/* Global — raw colour palette, scales, type-weight globals */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Do not use these directly in components. Reference semantic tokens. */

:root {
  --ui-alpha-white-heavy: rgba(255, 255, 255, 0.8);
  --ui-alpha-white-none: rgba(255, 255, 255, 0);
  --ui-white-0: rgb(255, 255, 255);
  --ui-grey-900: rgb(82, 80, 80);
  --ui-green-800: rgb(0, 102, 55);
  --ui-blue-600: rgb(7, 112, 207);
  --ui-red-600: rgb(208, 19, 69);
  --ui-black-0: rgb(0, 0, 0);
  --ui-black-200: rgb(45, 45, 45);
  --ui-grey-800: rgb(102, 102, 102);
  --ui-grey-700: rgb(118, 118, 118);
  --ui-grey-600: rgb(141, 141, 141);
  --ui-grey-300: rgb(221, 221, 221);
  --ui-grey-200: rgb(238, 238, 238);
  --ui-grey-100: rgb(248, 248, 248);
  --ui-green-600: rgb(1, 136, 73);
  --ui-green-100: rgb(204, 238, 222);
  --ui-blue-100: rgb(205, 226, 245);
  --ui-red-100: rgb(250, 231, 236);
  --ui-scale-400: 16px;
  --ui-scale-100: 4px;
  --ui-scale-350: 14px;
  --ui-scale-50: 2px;
  --ui-scale-1400: 100;
  --ui-scale-300: 12px;
  --ui-scale-1280: 80px;
  --ui-scale-200: 8px;
  --ui-scale-25: 1px;
  --ui-scale-250: 10px;
  --ui-scale-1200: 60px;
  --ui-scale-1000: 48px;
  --ui-scale-850: 36px;
  --ui-scale-900: 40px;
  --ui-scale-800: 32px;
  --ui-scale-700: 28px;
  --ui-scale-500: 20px;
  --ui-scale-600: 24px;
  --ui-scale-450: 18px;
  --ui-scale-950: 44px;
  --ui-purple-900: rgb(79, 65, 197);
  --ui-purple-700: rgb(111, 92, 255);
  --ui-purple-300: rgb(151, 151, 255);
  --ui-purple-100: rgb(191, 201, 255);
  --ui-purple-50: rgb(241, 239, 255);
  --ui-amber-600: rgb(255, 156, 50);
  --ui-amber-100: rgb(255, 235, 204);
  --ui-alpha-black-heavy: rgba(45, 45, 45, 0.8);
  --ui-scale-1240: 72px;
  --ui-scale-750: 30px;
  --ui-scale-550: 22px;
  --ui-type-font-weight-regular: 400;
  --ui-type-font-weight-book: 400;
  --ui-type-font-weight-demi: 500;
  --ui-type-font-weight-heavy: 600;
  --ui-black-500: rgb(61, 61, 61);
  --ui-black-400: rgb(37, 36, 36);
  --ui-black-300: rgb(40, 40, 40);
  --ui-green-700: rgb(45, 88, 68);
  --ui-blue-400: rgb(58, 162, 255);
  --ui-alpha-black-medium: rgba(45, 45, 45, 0.6);
  --ui-alpha-black-light: rgba(45, 45, 45, 0.4);
  --ui-black-100: rgb(31, 30, 30);
  --ui-red-400: rgb(252, 52, 106);
  --ui-blue-500: rgb(19, 120, 211);
  --ui-alpha-white-light: rgba(255, 255, 255, 0.4);
  --ui-amber-500: rgb(255, 192, 102);
  --ui-green-500: rgb(54, 179, 126);
  --ui-amber-700: rgb(217, 118, 21);
  --ui-alpha-black-none: rgba(45, 45, 45, 0);
  --ui-alpha-black-x-light: rgba(45, 45, 45, 0.16);
  --ui-alpha-black-xx-light: rgba(45, 45, 45, 0.06);
  --ui-alpha-white-x-light: rgba(255, 255, 255, 0.16);
  --ui-alpha-white-xx-light: rgba(255, 255, 255, 0.06);
  --ui-alpha-white-medium: rgba(255, 255, 255, 0.6);
  --ui-scale-4000: 160px;
  --ui-scale-6000: 240px;
  --ui-scale-8000: 320px;
  --ui-scale-9375: 375px;
  --ui-scale-9750: 390px;
  --ui-scale-19200: 768px;
  --ui-scale-25600: 1024px;
  --ui-scale-30000: 1200px;
  --ui-scale-36000: 1440px;
  --ui-scale-9000: 360px;
  --ui-scale-7500: 300;
  --ui-scale-15500: 620px;
  --ui-amber-650: rgb(214, 113, 0);
}

/* Alias — named colour aliases */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Do not use these directly in components. Reference semantic tokens. */

:root {
  --ui-primary-0: rgb(0, 0, 0);
  --ui-primary-200: rgb(45, 45, 45);
  --ui-secondary-0: rgb(255, 255, 255);
  --ui-neutral-900: rgb(82, 80, 80);
  --ui-neutral-800: rgb(102, 102, 102);
  --ui-neutral-700: rgb(118, 118, 118);
  --ui-neutral-600: rgb(141, 141, 141);
  --ui-neutral-300: rgb(221, 221, 221);
  --ui-neutral-200: rgb(238, 238, 238);
  --ui-neutral-100: rgb(248, 248, 248);
  --ui-accent-600: rgb(1, 136, 73);
  --ui-accent-800: rgb(0, 102, 55);
  --ui-error-600: rgb(208, 19, 69);
  --ui-error-100: rgb(250, 231, 236);
  --ui-success-600: rgb(1, 136, 73);
  --ui-success-100: rgb(204, 238, 222);
  --ui-information-600: rgb(7, 112, 207);
  --ui-information-100: rgb(205, 226, 245);
  --ui-sale-600: rgb(208, 19, 69);
  --ui-warning-600: rgb(255, 156, 50);
  --ui-warning-100: rgb(255, 235, 204);
  --ui-secondary-600: rgb(141, 141, 141);
  --ui-primary-500: rgb(61, 61, 61);
  --ui-primary-400: rgb(37, 36, 36);
  --ui-primary-300: rgb(40, 40, 40);
  --ui-secondary-300: rgb(221, 221, 221);
  --ui-accent-700: rgb(45, 88, 68);
  --ui-information-400: rgb(58, 162, 255);
  --ui-primary-100: rgb(31, 30, 30);
  --ui-error-400: rgb(252, 52, 106);
  --ui-information-500: rgb(19, 120, 211);
  --ui-warning-500: rgb(255, 192, 102);
  --ui-success-500: rgb(54, 179, 126);
  --ui-warning-700: rgb(217, 118, 21);
  --ui-warning-650: rgb(214, 113, 0);
}

/* Typography — font-size, font-weight, line-height, letter-spacing tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Base (platform-agnostic) values. Responsive overrides are in responsive.css. */

:root {
  --ui-font-size-3xs: 10px;
  --ui-font-size-sm: 16px;
  --ui-font-size-md: 18px;
  --ui-font-size-lg: 24px;
  --ui-font-size-xl: 28px;
  --ui-font-size-2xl: 36px;
  --ui-font-size-3xl: 60px;
  --ui-letter-spacing-perc-lg: 8px;
  --ui-letter-spacing-perc-md: 4px;
  --ui-letter-spacing-px-xs: 0.4px;
  --ui-letter-spacing-px-sm: 0.6px;
  --ui-letter-spacing-px-md: 0.8px;
  --ui-letter-spacing-px-lg: 1px;
  --ui-letter-spacing-px-xl: 1.2px;
  --ui-letter-spacing-px-2xl: 1.5px;
  --ui-line-height-3xs: 14px;
  --ui-line-height-lg: 24px;
  --ui-line-height-xl: 30px;
  --ui-line-height-2xl: 36px;
  --ui-line-height-3xl: 44px;
  --ui-line-height-4xl: 72px;
  --ui-font-size-xs: 14px;
  --ui-font-size-2xs: 12px;
  --ui-line-height-md: 22px;
  --ui-line-height-sm: 20px;
  --ui-line-height-2xs: 16px;
  --ui-line-height-xs: 18px;
  --ui-font-size-display-hero: 60px;
  --ui-font-size-display-lead: 36px;
  --ui-font-size-display-supporting: 28px;
  --ui-font-size-display-compact: 24px;
  --ui-font-size-headline-page-caps: 18px;
  --ui-font-size-headline-section: 16px;
  --ui-font-size-headline-subsection: 14px;
  --ui-font-size-headline-mini: 12px;
  --ui-font-size-body-paragraph: 14px;
  --ui-font-size-body-product-description: 16px;
  --ui-font-size-body-product-description-large: 18px;
  --ui-font-size-label-button: 16px;
  --ui-font-size-label-button-small: 14px;
  --ui-font-size-label-field-input: 14px;
  --ui-font-size-label-field-select: 14px;
  --ui-font-size-label-field-select-large: 16px;
  --ui-font-size-label-field-group: 14px;
  --ui-font-size-label-field-option: 16px;
  --ui-font-size-label-tag-emphasis: 12px;
  --ui-font-size-label-tag-emphasis-large: 14px;
  --ui-font-size-label-tab: 14px;
  --ui-font-size-label-tab-small: 12px;
  --ui-font-size-field-description: 16px;
  --ui-font-size-field-helper: 16px;
  --ui-font-size-field-placeholder: 16px;
  --ui-font-size-field-value: 16px;
  --ui-font-size-field-counter: 12px;
  --ui-font-size-field-helper-error: 12px;
  --ui-font-size-link-link-large: 16px;
  --ui-font-size-link-link: 14px;
  --ui-font-size-link-link-small: 12px;
  --ui-font-size-small-print-small-print: 10px;
  --ui-font-weight-display-hero: 600;
  --ui-font-weight-display-lead: 600;
  --ui-font-weight-display-supporting: 600;
  --ui-font-weight-display-compact: 600;
  --ui-font-weight-headline-page-cpas: 600;
  --ui-font-weight-headline-section: 600;
  --ui-font-weight-headline-subsection: 600;
  --ui-font-weight-headline-mini: 600;
  --ui-font-weight-body-paragraph: 400;
  --ui-font-weight-body-product-description: 600;
  --ui-font-weight-body-product-description-large: 400;
  --ui-font-weight-label-button: 600;
  --ui-font-weight-label-button-small: 600;
  --ui-font-weight-label-field-input: 600;
  --ui-font-weight-label-field-select: 600;
  --ui-font-weight-label-field-select-large: 400;
  --ui-font-weight-label-field-group: 600;
  --ui-font-weight-label-field-option: 400;
  --ui-font-weight-label-tag-emphasis: 600;
  --ui-font-weight-label-tag-emphasis-large: 600;
  --ui-font-weight-label-tab: 600;
  --ui-font-weight-label-tab-small: 600;
  --ui-font-weight-field-description: 400;
  --ui-font-weight-field-helper: 400;
  --ui-font-weight-field-helper-error: 600;
  --ui-font-weight-field-placeholder: 400;
  --ui-font-weight-field-counter: 600;
  --ui-font-weight-field-value: 400;
  --ui-font-weight-link-link: 400;
  --ui-font-weight-link-link-large: 400;
  --ui-font-weight-link-link-small: 400;
  --ui-line-height-display-hero: 72px;
  --ui-font-weight-small-print-small-print: 600;
  --ui-line-height-display-lead: 44px;
  --ui-line-height-display-supporting: 36px;
  --ui-line-height-display-compact: 30px;
  --ui-line-height-headline-page-caps: 24px;
  --ui-line-height-headline-section: 22px;
  --ui-line-height-headline-subsection: 20px;
  --ui-line-height-headline-mini: 16px;
  --ui-line-height-body-product-description-large: 24px;
  --ui-line-height-body-product-description: 22px;
  --ui-line-height-body-paragraph: 20px;
  --ui-line-height-label-button: 24px;
  --ui-line-height-label-button-small: 20px;
  --ui-line-height-label-field-input: 20px;
  --ui-line-height-label-field-select: 20px;
  --ui-line-height-label-field-select-large: 22px;
  --ui-line-height-label-field-group: 20px;
  --ui-line-height-label-field-option: 22px;
  --ui-line-height-label-tag-emphasis: 16px;
  --ui-line-height-label-tag-emphasis-large: 20px;
  --ui-line-height-label-tab: 20px;
  --ui-line-height-label-tab-small: 16px;
  --ui-line-height-field-description: 22px;
  --ui-line-height-field-helper: 22px;
  --ui-line-height-field-placeholder: 22px;
  --ui-line-height-field-counter: 16px;
  --ui-line-height-field-helper-error: 16px;
  --ui-line-height-field-value: 22px;
  --ui-line-height-link-link: 20px;
  --ui-line-height-link-link-large: 22px;
  --ui-line-height-link-link-small: 16px;
  --ui-line-height-small-print-small-print: 14px;
  --ui-letter-spacing-display-hero: 1.5px;
  --ui-letter-spacing-display-lead: 1.2px;
  --ui-letter-spacing-display-supporting: 1.2px;
  --ui-letter-spacing-display-compact: 1.2px;
  --ui-letter-spacing-headline-page-caps: 0.8px;
  --ui-letter-spacing-headline-subsection: 0.8px;
  --ui-letter-spacing-headline-section: 0.6px;
  --ui-letter-spacing-headline-mini: 1px;
  --ui-letter-spacing-body-paragraph: 0.6px;
  --ui-letter-spacing-body-product-description-large: 0.6px;
  --ui-letter-spacing-body-product-description: 0.4px;
  --ui-letter-spacing-label-button: 0.6px;
  --ui-letter-spacing-label-button-small: 0.8px;
  --ui-letter-spacing-label-field-input: 0.8px;
  --ui-letter-spacing-label-field-select: 0.8px;
  --ui-letter-spacing-label-field-select-large: 0.4px;
  --ui-letter-spacing-label-field-group: 0.8px;
  --ui-letter-spacing-label-field-option: 0.4px;
  --ui-letter-spacing-label-tag-emphasis-large: 0.8px;
  --ui-letter-spacing-label-tag-emphasis: 1px;
  --ui-letter-spacing-label-tab: 0.8px;
  --ui-letter-spacing-label-tab-small: 1px;
  --ui-letter-spacing-field-description: 0.4px;
  --ui-letter-spacing-field-helper: 0.4px;
  --ui-letter-spacing-field-placeholder: 0.4px;
  --ui-letter-spacing-field-value: 0.4px;
  --ui-letter-spacing-field-counter: 1px;
  --ui-letter-spacing-field-helper-error: 1px;
  --ui-letter-spacing-link-link: 0.6px;
  --ui-letter-spacing-link-link-large: 0.4px;
  --ui-letter-spacing-link-link-small: 0.8px;
  --ui-letter-spacing-small-print-small-print: 1.2px;
  --ui-font-size-label-button-description: 14px;
  --ui-font-weight-label-button-description: 400;
  --ui-line-height-label-button-description: 20px;
  --ui-letter-spacing-label-button-description: 0.4px;
  --ui-font-size-label-status: 14px;
  --ui-font-size-label-status-small: 10px;
  --ui-font-weight-label-status: 600;
  --ui-font-weight-label-status-small: 600;
  --ui-line-height-label-status: 20px;
  --ui-line-height-label-status-small: 14px;
  --ui-letter-spacing-label-status: 0.8px;
  --ui-letter-spacing-label-status-small: 1.2px;
  --ui-font-size-body-paragraph-large: 16px;
  --ui-font-weight-body-paragraph-large: 400;
  --ui-line-height-body-paragraph-large: 22px;
  --ui-letter-spacing-body-paragraph-large: 0.6px;
  --ui-font-size-label-accordion: 16px;
  --ui-font-weight-label-accordion: 600;
  --ui-line-height-label-accordion: 22px;
  --ui-letter-spacing-label-accordion: 0.4px;
  --ui-font-size-body-paragraph-small: 12px;
  --ui-font-weight-body-paragraph-small: 400;
  --ui-line-height-body-paragraph-small: 16px;
  --ui-letter-spacing-body-paragraph-small: 0.8px;
  --ui-line-height-body-paragraph-bold: 20px;
  --ui-letter-spacing-body-paragraph-bold: 0.6px;
  --ui-font-weight-body-paragraph-bold: 600;
  --ui-font-size-body-paragraph-bold: 14px;
  --ui-font-size-label-tag-large: 14px;
  --ui-font-weight-label-tag-large: 600;
  --ui-line-height-label-tag-large: 20px;
  --ui-letter-spacing-label-tag-large: 0.8px;
  --ui-font-size-headline-page: 18px;
  --ui-font-weight-headline-page: 600;
  --ui-line-height-headline-page: 24px;
  --ui-letter-spacing-headline-page: 0.8px;
}

/* Spacing — padding and gap tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */
/* Base (platform-agnostic) values. Responsive overrides are in responsive.css. */

:root {
  --ui-padding-button-vertical-default: 12px;
  --ui-padding-button-horizontal-default: 16px;
  --ui-padding-button-vertical-small: 4px;
  --ui-padding-button-vertical-medium: 8px;
  --ui-padding-button-horizontal-medium: 8px;
  --ui-padding-button-horizontal-small: 8px;
  --ui-padding-button-horizontal-large: 16px;
  --ui-padding-button-vertical-large: 16px;
  --ui-gap-horizontal-xx-large: 32px;
  --ui-gap-horizontal-x-large: 24px;
  --ui-gap-horizontal-large: 16px;
  --ui-gap-horizontal-small: 8px;
  --ui-gap-horizontal-x-small: 4px;
  --ui-gap-horizontal-medium: 12px;
  --ui-gap-vertical-xx-large: 32px;
  --ui-gap-vertical-x-large: 24px;
  --ui-gap-vertical-large: 16px;
  --ui-gap-vertical-medium: 12px;
  --ui-gap-vertical-small: 8px;
  --ui-gap-vertical-x-small: 4px;
  --ui-gap-horizontal-xxx-large: 40px;
  --ui-gap-vertical-xxx-large: 40px;
  --ui-padding-select-field-horizontal-large: 16px;
  --ui-padding-select-field-horizontal-medium: 12px;
  --ui-padding-select-field-horizontal-small: 8px;
  --ui-padding-select-field-vertical-default: 16px;
  --ui-gap-vertical-xx-small: 2px;
  --ui-gap-horizontal-xx-small: 2px;
}

/* Shape — border-radius, border-width, corner-radius tokens */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-border-width-hairline: 1px;
  --ui-border-width-thin: 2px;
  --ui-border-radius-lg: 20px;
  --ui-border-radius-round: 100px;
  --ui-border-radius-md: 12px;
  --ui-border-radius-sm: 10px;
  --ui-border-width-thick: 4px;
  --ui-shape-corner-radius-full: 100px;
  --ui-shape-corner-radius-small: 8px;
  --ui-shape-corner-radius-medium: 16px;
  --ui-shape-corner-radius-large: 24px;
  --ui-shape-corner-radius-x-small: 4px;
}

/* Elevation and shadows */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-elevation-none: rgba(45, 45, 45, 0);
  --ui-elevation-light: rgba(45, 45, 45, 0.4);
  --ui-elevation-medium: rgba(45, 45, 45, 0.6);
  --ui-elevation-heavy: rgba(45, 45, 45, 0.8);
  --ui-shadows-none: rgba(45, 45, 45, 0);
  --ui-shadows-light: rgba(45, 45, 45, 0.4);
  --ui-shadows-medium: rgba(45, 45, 45, 0.6);
  --ui-shadows-heavy: rgba(45, 45, 45, 0.8);
  --ui-shadows-x-light: rgba(45, 45, 45, 0.16);
  --ui-shadows-xx-light: rgba(45, 45, 45, 0.06);
}

/* Layout — container sizes, breakpoints, aspect ratios */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-container-max-sm: 390px;
  --ui-container-max-md: 768px;
  --ui-container-max-lg: 1024px;
  --ui-container-max-xl: 1200px;
  --ui-container-max-xs: 375px;
  --ui-breakpoint-sm: 375px;
  --ui-breakpoint-m: 390px;
  --ui-breakpoint-xl: 768px;
  --ui-breakpoint-xxl: 1024px;
  --ui-breakpoint-xxxl: 1440px;
  --ui-breakpoint-x-sm: 360px;
  --ui-breakpoint-xx-sm: 300;
  --ui-breakpoint-l: 620px;
  --ui-aspect-square: 1 / 1;
  --ui-aspect-product: 3 / 4;
  --ui-aspect-lanscape: 4 / 3;
  --ui-aspect-wide: 16 / 9;
}

/* Motion */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  --ui-motion-translate-hover-default: 4px;
}

/* Semantic — surface, text, border, icon, link tokens */
/* Values use light-dark() so they respond to the color-scheme property. */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

:root {
  color-scheme: light; /* default */
  --ui-icon-base-primary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-icon-base-secondary: light-dark(rgb(102, 102, 102), rgb(102, 102, 102));
  --ui-icon-base-on-dark-adaptive: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-decision-primary: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-base-primary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-link-primary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-border-base-default: light-dark(rgb(118, 118, 118), rgb(118, 118, 118));
  --ui-text-base-secondary: light-dark(rgb(102, 102, 102), rgb(221, 221, 221));
  --ui-link-secondary: light-dark(rgb(141, 141, 141), rgb(141, 141, 141));
  --ui-border-base-subtle: light-dark(rgb(238, 238, 238), rgb(102, 102, 102));
  --ui-text-base-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-surface-base-canvas: light-dark(rgb(238, 238, 238), rgb(0, 0, 0));
  --ui-border-decision-primary: light-dark(
    rgb(118, 118, 118),
    rgb(221, 221, 221)
  );
  --ui-surface-base-raised: light-dark(rgb(255, 255, 255), rgb(31, 30, 30));
  --ui-surface-base-elevated: light-dark(rgb(248, 248, 248), rgb(45, 45, 45));
  --ui-link-accent: light-dark(rgb(7, 112, 207), rgb(58, 162, 255));
  --ui-surface-base-invert: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-decision-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-surface-base-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.6)
  );
  --ui-border-action-primary: light-dark(rgb(45, 45, 45), rgb(238, 238, 238));
  --ui-surface-decision-primary: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-surface-decision-secondary: light-dark(
    rgb(238, 238, 238),
    rgb(238, 238, 238)
  );
  --ui-surface-decision-invert: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-surface-decision-success: light-dark(
    rgb(204, 238, 222),
    rgb(204, 238, 222)
  );
  --ui-border-action-primary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(238, 238, 238)
  );
  --ui-surface-decision-error: light-dark(
    rgb(250, 231, 236),
    rgb(250, 231, 236)
  );
  --ui-surface-decision-warning: light-dark(
    rgb(255, 235, 204),
    rgb(255, 235, 204)
  );
  --ui-icon-decision-focus: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-border-action-accent-primary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(0, 102, 55)
  );
  --ui-surface-decision-neutral: light-dark(
    rgb(205, 226, 245),
    rgb(205, 226, 245)
  );
  --ui-icon-decision-pressed: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-surface-decision-information: light-dark(
    rgb(7, 112, 207),
    rgb(19, 120, 211)
  );
  --ui-icon-decision-secondary: light-dark(
    rgb(102, 102, 102),
    rgb(102, 102, 102)
  );
  --ui-surface-action-primary: light-dark(rgb(45, 45, 45), rgb(238, 238, 238));
  --ui-icon-decision-on-dark: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-surface-action-primary-hover: light-dark(
    rgb(0, 0, 0),
    rgb(221, 221, 221)
  );
  --ui-icon-decision-disabled: light-dark(
    rgb(238, 238, 238),
    rgb(238, 238, 238)
  );
  --ui-text-decision-primary: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-surface-action-accent-primary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-text-decision-secondary: light-dark(
    rgb(118, 118, 118),
    rgb(221, 221, 221)
  );
  --ui-surface-action-accent-primary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(45, 88, 68)
  );
  --ui-surface-action-secondary: light-dark(
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0)
  );
  --ui-border-decision-invert: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-surface-action-secondary-hover: light-dark(
    rgb(248, 248, 248),
    rgba(255, 255, 255, 0)
  );
  --ui-surface-action-disabled: light-dark(
    rgb(238, 238, 238),
    rgba(45, 45, 45, 0.4)
  );
  --ui-border-decision-focus: light-dark(rgb(7, 112, 207), rgb(19, 120, 211));
  --ui-border-action-accent-primary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-border-action-secondary: light-dark(
    rgb(221, 221, 221),
    rgb(255, 255, 255)
  );
  --ui-text-action-primary: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-border-action-secondary-hover: light-dark(
    rgb(221, 221, 221),
    rgb(221, 221, 221)
  );
  --ui-border-action-disabled: light-dark(rgb(221, 221, 221), rgb(82, 80, 80));
  --ui-text-decision-error: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-text-decision-sale: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-text-decision-disabled: light-dark(
    rgb(238, 238, 238),
    rgb(141, 141, 141)
  );
  --ui-text-action-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(61, 61, 61)
  );
  --ui-text-action-accent-primary: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-text-action-disabled: light-dark(rgb(221, 221, 221), rgb(118, 118, 118));
  --ui-text-base-accent: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-border-decision-secondary: light-dark(
    rgb(221, 221, 221),
    rgb(82, 80, 80)
  );
  --ui-surface-decision-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.8)
  );
  --ui-surface-decision-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  --ui-text-action-secondary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-action-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-secondary: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-text-action-accent-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-border-action-accent-secondary: light-dark(
    rgb(1, 136, 73),
    rgb(1, 136, 73)
  );
  --ui-border-action-accent-secondary-hover: light-dark(
    rgb(0, 102, 55),
    rgb(0, 102, 55)
  );
  --ui-surface-action-accent-secondary: light-dark(
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0)
  );
  --ui-surface-action-accent-secondary-hover: light-dark(
    rgb(255, 255, 255),
    rgba(255, 255, 255, 0)
  );
  --ui-icon-action-primary: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-icon-action-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-secondary: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-icon-action-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-primary: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-primary-hover: light-dark(
    rgb(255, 255, 255),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-secondary: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-accent-secondary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-icon-action-disabled: light-dark(rgb(255, 255, 255), rgb(61, 61, 61));
  --ui-border-base-invert: light-dark(rgb(255, 255, 255), rgb(255, 255, 255));
  --ui-icon-decision-error: light-dark(rgb(208, 19, 69), rgb(208, 19, 69));
  --ui-icon-decision-success: light-dark(rgb(1, 136, 73), rgb(1, 136, 73));
  --ui-surface-action-tertiary: light-dark(
    rgb(221, 221, 221),
    rgba(45, 45, 45, 0.8)
  );
  --ui-text-action-tertiary: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-action-tertiary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-surface-action-tertiary-hover: light-dark(
    rgb(221, 221, 221),
    rgba(45, 45, 45, 0.8)
  );
  --ui-icon-action-tertiary: light-dark(rgb(45, 45, 45), rgb(61, 61, 61));
  --ui-icon-action-tertiary-hover: light-dark(
    rgb(45, 45, 45),
    rgb(221, 221, 221)
  );
  --ui-border-action-tertiary: light-dark(
    rgb(221, 221, 221),
    rgb(102, 102, 102)
  );
  --ui-border-action-tertiary-hover: light-dark(
    rgb(221, 221, 221),
    rgb(102, 102, 102)
  );
  --ui-border-decision-error: light-dark(rgb(208, 19, 69), rgb(252, 52, 106));
  --ui-link-on-dark: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
  --ui-text-base-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-base-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-decision-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-text-decision-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-icon-base-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-icon-base-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-icon-decision-on-light: light-dark(rgb(45, 45, 45), rgb(255, 255, 255));
  --ui-icon-decision-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-text-base-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-icon-base-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-icon-decision-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-text-decision-on-dark-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-link-on-colour: light-dark(rgb(45, 45, 45), rgb(45, 45, 45));
  --ui-link-on-dark-fixed: light-dark(rgb(255, 255, 255), rgb(255, 255, 255));
  --ui-surface-backdrop-light: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.6)
  );
  --ui-surface-backdrop-dark: light-dark(
    rgba(45, 45, 45, 0.8),
    rgba(45, 45, 45, 0.4)
  );
  --ui-border-base-strong: light-dark(rgb(102, 102, 102), rgb(141, 141, 141));
  --ui-icon-base-invert-surface: light-dark(
    rgb(255, 255, 255),
    rgb(45, 45, 45)
  );
  --ui-text-decision-warning-light: light-dark(
    rgb(255, 156, 50),
    rgb(255, 192, 102)
  );
  --ui-text-decision-success: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-border-decision-warning: light-dark(
    rgb(214, 113, 0),
    rgb(255, 192, 102)
  );
  --ui-border-decision-success: light-dark(rgb(1, 136, 73), rgb(54, 179, 126));
  --ui-surface-base-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.6)
  );
  --ui-surface-action-overlay-white: light-dark(
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0.8)
  );
  --ui-surface-action-overlay-black: light-dark(
    rgba(45, 45, 45, 0.8),
    rgb(61, 61, 61)
  );
  --ui-text-decision-warning-dark: light-dark(
    rgb(214, 113, 0),
    rgb(255, 192, 102)
  );
  --ui-border-base-muted: light-dark(rgb(221, 221, 221), rgb(102, 102, 102));
  --ui-surface-base-black-fixed: light-dark(rgb(0, 0, 0), rgb(0, 0, 0));
  --ui-surface-base-grey-fixed: light-dark(rgb(82, 80, 80), rgb(82, 80, 80));
  --ui-surface-base-white-fixed: light-dark(
    rgb(255, 255, 255),
    rgb(255, 255, 255)
  );
  --ui-surface-base-loading: light-dark(rgb(221, 221, 221), rgb(31, 30, 30));
  --ui-text-action-pill: light-dark(rgb(45, 45, 45), rgb(221, 221, 221));
  --ui-border-action-pill: light-dark(rgb(221, 221, 221), rgb(118, 118, 118));
  --ui-surface-action-pill: light-dark(rgb(255, 255, 255), rgb(45, 45, 45));
}

/* Flip to dark when the OS/browser preference is dark. */
/* Override on any element with: color-scheme: light | dark */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Chameleon UI — responsive token overrides */
/* Overrides core token values for mWeb (≤620px) and dWeb (>620px). */
/* Included automatically by core.css — do not import separately. */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

/* No mWeb/dWeb overrides differ from the base values in this Thread DS version. */

/* @asosteam/chameleon-tokens-asos/css-variables.css
 * All Thread DS design tokens as CSS custom properties.
 *
 * Global stylesheet — not a CSS Module, no default export.
 * From CSS:   @import "@asosteam/chameleon-tokens-asos/css-variables.css";
 * From JS/TS: import "@asosteam/chameleon-tokens-asos/css-variables.css";
 *
 * Individual files in ./css-variables/ are managed by:
 *   npm run sync-tokens
 */

/* Typography utility classes — composite font styles from Thread DS text styles */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

.ui-display-hero {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-display-hero, 60px);
  font-weight: var(--ui-font-weight-display-hero, 600);
  line-height: var(--ui-line-height-display-hero, 72px);
  letter-spacing: var(--ui-letter-spacing-display-hero, 1.5px);
}

.ui-display-lead {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-display-lead, 36px);
  font-weight: var(--ui-font-weight-display-lead, 600);
  line-height: var(--ui-line-height-display-lead, 44px);
  letter-spacing: var(--ui-letter-spacing-display-lead, 1.2px);
}

.ui-display-supporting {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-display-supporting, 28px);
  font-weight: var(--ui-font-weight-display-supporting, 600);
  line-height: var(--ui-line-height-display-supporting, 36px);
  letter-spacing: var(--ui-letter-spacing-display-supporting, 1.2px);
}

.ui-display-compact {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-display-compact, 24px);
  font-weight: var(--ui-font-weight-display-compact, 600);
  line-height: var(--ui-line-height-display-compact, 30px);
  letter-spacing: var(--ui-letter-spacing-display-compact, 1.2px);
}

.ui-headline-page-caps {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-headline-page-caps, 18px);
  font-weight: var(--ui-font-weight-headline-page-caps, 600);
  line-height: var(--ui-line-height-headline-page-caps, 24px);
  letter-spacing: var(--ui-letter-spacing-headline-page-caps, 0.8px);
}

.ui-headline-page {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-headline-page, 18px);
  font-weight: var(--ui-font-weight-headline-page, 600);
  line-height: var(--ui-line-height-headline-page, 24px);
  letter-spacing: var(--ui-letter-spacing-headline-page, 0.8px);
}

.ui-headline-section {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-headline-section, 16px);
  font-weight: var(--ui-font-weight-headline-section, 600);
  line-height: var(--ui-line-height-headline-section, 22px);
  letter-spacing: var(--ui-letter-spacing-headline-section, 0.6px);
}

.ui-headline-subsection {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-headline-subsection, 14px);
  font-weight: var(--ui-font-weight-headline-subsection, 600);
  line-height: var(--ui-line-height-headline-subsection, 20px);
  letter-spacing: var(--ui-letter-spacing-headline-subsection, 0.8px);
}

.ui-headline-mini {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-headline-mini, 12px);
  font-weight: var(--ui-font-weight-headline-mini, 600);
  line-height: var(--ui-line-height-headline-mini, 16px);
  letter-spacing: var(--ui-letter-spacing-headline-mini, 1px);
}

.ui-body-paragraph {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-paragraph, 14px);
  font-weight: var(--ui-font-weight-body-paragraph, 400);
  line-height: var(--ui-line-height-body-paragraph, 20px);
  letter-spacing: var(--ui-letter-spacing-body-paragraph, 0.6px);
}

.ui-body-paragraph-bold {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-paragraph-bold, 14px);
  font-weight: var(--ui-font-weight-body-paragraph-bold, 600);
  line-height: var(--ui-line-height-body-paragraph-bold, 20px);
  letter-spacing: var(--ui-letter-spacing-body-paragraph-bold, 0.6px);
}

.ui-body-paragraph-sm {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-paragraph-small, 12px);
  font-weight: var(--ui-font-weight-body-paragraph-small, 400);
  line-height: var(--ui-line-height-body-paragraph-small, 16px);
  letter-spacing: var(--ui-letter-spacing-body-paragraph-small, 0.8px);
}

.ui-body-paragraph-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-paragraph-large, 16px);
  font-weight: var(--ui-font-weight-body-paragraph-large, 400);
  line-height: var(--ui-line-height-body-paragraph-large, 22px);
  letter-spacing: var(--ui-letter-spacing-body-paragraph-large, 0.6px);
}

.ui-body-product-description {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-product-description, 16px);
  font-weight: var(--ui-font-weight-body-product-description, 600);
  line-height: var(--ui-line-height-body-product-description, 22px);
  letter-spacing: var(--ui-letter-spacing-body-product-description, 0.4px);
}

.ui-body-product-description-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-body-product-description-large, 18px);
  font-weight: var(--ui-font-weight-body-product-description-large, 400);
  line-height: var(--ui-line-height-body-product-description-large, 24px);
  letter-spacing: var(
    --ui-letter-spacing-body-product-description-large,
    0.6px
  );
}

.ui-label-accordion {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-accordion, 16px);
  font-weight: var(--ui-font-weight-label-accordion, 600);
  line-height: var(--ui-line-height-label-accordion, 22px);
  letter-spacing: var(--ui-letter-spacing-label-accordion, 0.4px);
}

.ui-label-button {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-button, 16px);
  font-weight: var(--ui-font-weight-label-button, 600);
  line-height: var(--ui-line-height-label-button, 24px);
  letter-spacing: var(--ui-letter-spacing-label-button, 0.6px);
}

.ui-label-button-sm {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-button-small, 14px);
  font-weight: var(--ui-font-weight-label-button-small, 600);
  line-height: var(--ui-line-height-label-button-small, 20px);
  letter-spacing: var(--ui-letter-spacing-label-button-small, 0.8px);
}

.ui-label-button-description {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-button-description, 14px);
  font-weight: var(--ui-font-weight-label-button-description, 400);
  line-height: var(--ui-line-height-label-button-description, 20px);
  letter-spacing: var(--ui-letter-spacing-label-button-description, 0.4px);
}

.ui-label-field-input {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-field-input, 14px);
  font-weight: var(--ui-font-weight-label-field-input, 600);
  line-height: var(--ui-line-height-label-field-input, 20px);
  letter-spacing: var(--ui-letter-spacing-label-field-input, 1px);
}

.ui-label-field-select {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-field-select, 14px);
  font-weight: var(--ui-font-weight-label-field-select, 600);
  line-height: var(--ui-line-height-label-field-select, 20px);
  letter-spacing: var(--ui-letter-spacing-label-field-select, 1px);
}

.ui-label-field-select-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-field-select-large, 16px);
  font-weight: var(--ui-font-weight-label-field-select-large, 400);
  line-height: var(--ui-line-height-label-field-select-large, 22px);
  letter-spacing: var(--ui-letter-spacing-label-field-select-large, 0.4px);
}

.ui-label-field-group {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-field-group, 14px);
  font-weight: var(--ui-font-weight-label-field-group, 600);
  line-height: var(--ui-line-height-label-field-group, 20px);
  letter-spacing: var(--ui-letter-spacing-label-field-group, 0.8px);
}

.ui-label-field-option {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-field-option, 16px);
  font-weight: var(--ui-font-weight-label-field-option, 400);
  line-height: var(--ui-line-height-label-field-option, 22px);
  letter-spacing: var(--ui-letter-spacing-label-field-option, 0.4px);
}

.ui-label-tag-emphasis {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-tag-emphasis, 12px);
  font-weight: var(--ui-font-weight-label-tag-emphasis, 600);
  line-height: var(--ui-line-height-label-tag-emphasis, 16px);
  letter-spacing: var(--ui-letter-spacing-label-tag-emphasis, 1px);
}

.ui-label-tag-emphasis-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-tag-emphasis-large, 14px);
  font-weight: var(--ui-font-weight-label-tag-emphasis-large, 600);
  line-height: var(--ui-line-height-label-tag-emphasis-large, 20px);
  letter-spacing: var(--ui-letter-spacing-label-tag-emphasis-large, 0.8px);
}

.ui-label-tag-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-tag-large, 14px);
  font-weight: var(--ui-font-weight-label-tag-large, 600);
  line-height: var(--ui-line-height-label-tag-large, 20px);
  letter-spacing: var(--ui-letter-spacing-label-tag-large, 0.8px);
}

.ui-label-tab-sm {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-tab-small, 12px);
  font-weight: var(--ui-font-weight-label-tab-small, 600);
  line-height: var(--ui-line-height-label-tab-small, 16px);
  letter-spacing: var(--ui-letter-spacing-label-tab-small, 1px);
}

.ui-label-tab {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-tab, 14px);
  font-weight: var(--ui-font-weight-label-tab, 600);
  line-height: var(--ui-line-height-label-tab, 20px);
  letter-spacing: var(--ui-letter-spacing-label-tab, 0.8px);
}

.ui-label-status {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-status, 14px);
  font-weight: var(--ui-font-weight-label-status, 600);
  line-height: var(--ui-line-height-label-status, 20px);
  letter-spacing: var(--ui-letter-spacing-label-status, 0.8px);
}

.ui-label-status-sm {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-label-status-small, 10px);
  font-weight: var(--ui-font-weight-label-status-small, 600);
  line-height: var(--ui-line-height-label-status-small, 14px);
  letter-spacing: var(--ui-letter-spacing-label-status-small, 1.2px);
}

.ui-field-description {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-description, 16px);
  font-weight: var(--ui-font-weight-field-description, 400);
  line-height: var(--ui-line-height-field-description, 22px);
  letter-spacing: var(--ui-letter-spacing-field-description, 0.4px);
}

.ui-field-helper {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-helper, 16px);
  font-weight: var(--ui-font-weight-field-helper, 400);
  line-height: var(--ui-line-height-field-helper, 22px);
  letter-spacing: var(--ui-letter-spacing-field-helper, 0.4px);
}

.ui-field-helper-error {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-helper-error, 12px);
  font-weight: var(--ui-font-weight-field-helper-error, 600);
  line-height: var(--ui-line-height-field-helper-error, 16px);
  letter-spacing: var(--ui-letter-spacing-field-helper-error, 1px);
}

.ui-field-placeholder {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-placeholder, 16px);
  font-weight: var(--ui-font-weight-field-placeholder, 400);
  line-height: var(--ui-line-height-field-placeholder, 22px);
  letter-spacing: var(--ui-letter-spacing-field-placeholder, 0.4px);
}

.ui-field-counter {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-counter, 12px);
  font-weight: var(--ui-font-weight-field-counter, 600);
  line-height: var(--ui-line-height-field-counter, 16px);
  letter-spacing: var(--ui-letter-spacing-field-counter, 1px);
}

.ui-field-value {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-field-value, 16px);
  font-weight: var(--ui-font-weight-field-value, 400);
  line-height: var(--ui-line-height-field-value, 22px);
  letter-spacing: var(--ui-letter-spacing-field-value, 0.4px);
}

.ui-link-link {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-link-link, 14px);
  font-weight: var(--ui-font-weight-link-link, 400);
  line-height: var(--ui-line-height-link-link, 20px);
  letter-spacing: var(--ui-letter-spacing-link-link, 0.6px);
}

.ui-link-link-lg {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-link-link-large, 16px);
  font-weight: var(--ui-font-weight-link-link-large, 400);
  line-height: var(--ui-line-height-link-link-large, 22px);
  letter-spacing: var(--ui-letter-spacing-link-link-large, 0.4px);
}

.ui-link-link-sm {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-link-link-small, 12px);
  font-weight: var(--ui-font-weight-link-link-small, 400);
  line-height: var(--ui-line-height-link-link-small, 16px);
  letter-spacing: var(--ui-letter-spacing-link-link-small, 0.8px);
}

.ui-small-print-sm-print {
  font-family: "futura-pt", sans-serif;
  font-size: var(--ui-font-size-small-print-small-print, 10px);
  font-weight: var(--ui-font-weight-small-print-small-print, 600);
  line-height: var(--ui-line-height-small-print-small-print, 14px);
  letter-spacing: var(--ui-letter-spacing-small-print-small-print, 1.2px);
}

/* Spacing utility classes — padding and gap */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

.ui-padding-button-v-default {
  padding-top: var(--ui-padding-button-vertical-default, 12px);
  padding-bottom: var(--ui-padding-button-vertical-default, 12px);
}

.ui-padding-button-h-default {
  padding-left: var(--ui-padding-button-horizontal-default, 16px);
  padding-right: var(--ui-padding-button-horizontal-default, 16px);
}

.ui-padding-button-v-sm {
  padding-top: var(--ui-padding-button-vertical-small, 4px);
  padding-bottom: var(--ui-padding-button-vertical-small, 4px);
}

.ui-padding-button-v-md {
  padding-top: var(--ui-padding-button-vertical-medium, 8px);
  padding-bottom: var(--ui-padding-button-vertical-medium, 8px);
}

.ui-padding-button-h-md {
  padding-left: var(--ui-padding-button-horizontal-medium, 8px);
  padding-right: var(--ui-padding-button-horizontal-medium, 8px);
}

.ui-padding-button-h-sm {
  padding-left: var(--ui-padding-button-horizontal-small, 8px);
  padding-right: var(--ui-padding-button-horizontal-small, 8px);
}

.ui-padding-button-h-lg {
  padding-left: var(--ui-padding-button-horizontal-large, 16px);
  padding-right: var(--ui-padding-button-horizontal-large, 16px);
}

.ui-padding-button-v-lg {
  padding-top: var(--ui-padding-button-vertical-large, 16px);
  padding-bottom: var(--ui-padding-button-vertical-large, 16px);
}

.ui-gap-h-2xl {
  column-gap: var(--ui-gap-horizontal-xx-large, 32px);
}

.ui-gap-h-xl {
  column-gap: var(--ui-gap-horizontal-x-large, 24px);
}

.ui-gap-h-lg {
  column-gap: var(--ui-gap-horizontal-large, 16px);
}

.ui-gap-h-sm {
  column-gap: var(--ui-gap-horizontal-small, 8px);
}

.ui-gap-h-xs {
  column-gap: var(--ui-gap-horizontal-x-small, 4px);
}

.ui-gap-h-md {
  column-gap: var(--ui-gap-horizontal-medium, 12px);
}

.ui-gap-v-2xl {
  row-gap: var(--ui-gap-vertical-xx-large, 32px);
}

.ui-gap-v-xl {
  row-gap: var(--ui-gap-vertical-x-large, 24px);
}

.ui-gap-v-lg {
  row-gap: var(--ui-gap-vertical-large, 16px);
}

.ui-gap-v-md {
  row-gap: var(--ui-gap-vertical-medium, 12px);
}

.ui-gap-v-sm {
  row-gap: var(--ui-gap-vertical-small, 8px);
}

.ui-gap-v-xs {
  row-gap: var(--ui-gap-vertical-x-small, 4px);
}

.ui-gap-h-3xl {
  column-gap: var(--ui-gap-horizontal-xxx-large, 40px);
}

.ui-gap-v-3xl {
  row-gap: var(--ui-gap-vertical-xxx-large, 40px);
}

.ui-padding-select-field-h-lg {
  padding-left: var(--ui-padding-select-field-horizontal-large, 16px);
  padding-right: var(--ui-padding-select-field-horizontal-large, 16px);
}

.ui-padding-select-field-h-md {
  padding-left: var(--ui-padding-select-field-horizontal-medium, 12px);
  padding-right: var(--ui-padding-select-field-horizontal-medium, 12px);
}

.ui-padding-select-field-h-sm {
  padding-left: var(--ui-padding-select-field-horizontal-small, 8px);
  padding-right: var(--ui-padding-select-field-horizontal-small, 8px);
}

.ui-padding-select-field-v-default {
  padding-top: var(--ui-padding-select-field-vertical-default, 16px);
  padding-bottom: var(--ui-padding-select-field-vertical-default, 16px);
}

.ui-gap-v-2xs {
  row-gap: var(--ui-gap-vertical-xx-small, 2px);
}

.ui-gap-h-2xs {
  column-gap: var(--ui-gap-horizontal-xx-small, 2px);
}

/* Layout utility classes — container sizes and aspect ratios */
/* Auto-generated by scripts/sync-tokens.js — do not edit manually */

.ui-container-max-sm {
  max-width: var(--ui-container-max-sm, 390px);
}

.ui-container-max-md {
  max-width: var(--ui-container-max-md, 768px);
}

.ui-container-max-lg {
  max-width: var(--ui-container-max-lg, 1024px);
}

.ui-container-max-xl {
  max-width: var(--ui-container-max-xl, 1200px);
}

.ui-container-max-xs {
  max-width: var(--ui-container-max-xs, 375px);
}

.ui-aspect-square {
  aspect-ratio: var(--ui-aspect-square, 1 / 1);
}

.ui-aspect-product {
  aspect-ratio: var(--ui-aspect-product, 3 / 4);
}

.ui-aspect-lanscape {
  aspect-ratio: var(--ui-aspect-lanscape, 4 / 3);
}

.ui-aspect-wide {
  aspect-ratio: var(--ui-aspect-wide, 16 / 9);
}

/* @asosteam/chameleon-tokens-asos/css-utility-classes.css
 * Thread DS utility classes — typography, spacing, layout.
 *
 * Global stylesheet — not a CSS Module, no default export. Class names are
 * literal and unhashed: className="ui-container-max-xl". Requires css-variables.css
 * to be loaded too; the order between the two files is immaterial.
 *
 * From CSS:   @import "@asosteam/chameleon-tokens-asos/css-variables.css";
 *             @import "@asosteam/chameleon-tokens-asos/css-utility-classes.css";
 * From JS/TS: import "@asosteam/chameleon-tokens-asos/css-variables.css";
 *             import "@asosteam/chameleon-tokens-asos/css-utility-classes.css";
 *
 * Individual files in ./css-utility-classes/ are managed by:
 *   npm run sync-tokens
 */

.verify-student_container {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/*
  button.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 334:1157).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: button | Label/Button */
  --button-font-family: "futura-pt", sans-serif;
  --button-font-size: var(--ui-font-size-label-button, 16px);
  --button-font-weight: var(--ui-font-weight-label-button, 600);
  --button-line-height: var(--ui-line-height-label-button, 24px);
  --button-letter-spacing: var(--ui-letter-spacing-label-button, 0.6px);
  /* @end-chameleon-typography */

  /* Spacing */
  --button-padding-vertical: var(--ui-padding-button-vertical-default, 12px);
  --button-padding-horizontal: var(
    --ui-padding-button-horizontal-default,
    16px
  );

  /* Primary */
  --button-surface-primary: var(--ui-surface-action-primary, #2d2d2d);
  --button-text-primary: var(--ui-text-action-primary, #ffffff);
  --button-surface-primary-hover: var(
    --ui-surface-action-primary-hover,
    #000000
  );
  --button-text-primary-hover: var(--ui-text-action-primary-hover, #ffffff);

  /* Secondary */
  --button-surface-secondary: var(--ui-surface-action-secondary, #ffffff);
  --button-text-secondary: var(--ui-text-action-secondary, #2d2d2d);
  --button-border-secondary: var(--ui-border-action-secondary, #dddddd);
  --button-surface-secondary-hover: var(
    --ui-surface-action-secondary-hover,
    #f8f8f8
  );
  --button-text-secondary-hover: var(--ui-text-action-secondary-hover, #2d2d2d);
  --button-border-secondary-hover: var(
    --ui-border-action-secondary-hover,
    #dddddd
  );

  /* Tertiary */
  --button-surface-tertiary: var(--ui-surface-action-tertiary, #dddddd);
  --button-text-tertiary: var(--ui-text-action-tertiary, #2d2d2d);
  --button-border-tertiary: var(--ui-border-action-tertiary, #dddddd);
  --button-surface-tertiary-hover: var(
    --ui-surface-action-tertiary-hover,
    #dddddd
  );
  --button-text-tertiary-hover: var(--ui-text-action-tertiary-hover, #2d2d2d);
  --button-border-tertiary-hover: var(
    --ui-border-action-tertiary-hover,
    #dddddd
  );

  /* Accent Primary */
  --button-surface-accent-primary: var(
    --ui-surface-action-accent-primary,
    #018849
  );
  --button-text-accent-primary: var(--ui-text-action-accent-primary, #ffffff);
  --button-surface-accent-primary-hover: var(
    --ui-surface-action-accent-primary-hover,
    #006637
  );
  --button-text-accent-primary-hover: var(
    --ui-text-action-accent-primary-hover,
    #ffffff
  );

  /* Accent Secondary */
  --button-surface-accent-secondary: var(
    --ui-surface-action-accent-secondary,
    transparent
  );
  --button-text-accent-secondary: var(
    --ui-text-action-accent-secondary,
    #2d2d2d
  );
  --button-border-accent-secondary: var(
    --ui-border-action-accent-secondary,
    #018849
  );
  --button-surface-accent-secondary-hover: var(
    --ui-surface-action-accent-secondary-hover,
    #ffffff
  );
  --button-text-accent-secondary-hover: var(
    --ui-text-action-accent-secondary-hover,
    #2d2d2d
  );
  --button-border-accent-secondary-hover: var(
    --ui-border-action-accent-secondary-hover,
    #006637
  );

  /* Disabled */
  --button-surface-disabled: var(--ui-surface-action-disabled, #eeeeee);
  --button-text-disabled: var(--ui-text-action-disabled, #dddddd);

  /* Pill */
  --button-surface-pill: var(--ui-surface-action-pill, #ffffff);
  --button-text-pill: var(--ui-text-action-pill, #2d2d2d);
  --button-border-pill: var(--ui-border-action-pill, #dddddd);
  --button-border-radius-pill: var(--ui-border-radius-lg, 20px);
  --button-padding-vertical-pill: 8px;
  --button-padding-horizontal-pill: var(
    --ui-padding-button-horizontal-default,
    16px
  );

  /* @chameleon-typography: button-pill | Label/Button Small */
  --button-pill-font-family: "futura-pt", sans-serif;
  --button-pill-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-pill-font-weight: var(--ui-font-weight-label-button-small, 600);
  --button-pill-line-height: var(--ui-line-height-label-button-small, 20px);
  --button-pill-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );
  /* @end-chameleon-typography */

  /* Size: Large */
  --button-size-large-padding-h: var(
    --ui-padding-button-horizontal-large,
    16px
  );
  --button-size-large-padding-v: var(--ui-padding-button-vertical-large, 16px);
  --button-size-large-font-size: var(--ui-font-size-label-button, 16px);
  --button-size-large-line-height: var(--ui-line-height-label-button, 24px);
  --button-size-large-letter-spacing: var(
    --ui-letter-spacing-label-button,
    0.6px
  );

  /* Size: Medium */
  --button-size-medium-padding-h: var(
    --ui-padding-button-horizontal-medium,
    8px
  );
  --button-size-medium-padding-v: var(--ui-padding-button-vertical-medium, 8px);
  --button-size-medium-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-size-medium-line-height: var(
    --ui-line-height-label-button-small,
    20px
  );
  --button-size-medium-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );

  /* Size: Small */
  --button-size-small-padding-h: var(--ui-padding-button-horizontal-small, 8px);
  --button-size-small-padding-v: var(--ui-padding-button-vertical-small, 4px);
  --button-size-small-font-size: var(--ui-font-size-label-button-small, 14px);
  --button-size-small-line-height: var(
    --ui-line-height-label-button-small,
    20px
  );
  --button-size-small-letter-spacing: var(
    --ui-letter-spacing-label-button-small,
    0.8px
  );
}

/* Base layout and typography */

.button-module_root__G0cQu {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-padding-vertical) var(--button-padding-horizontal);
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box;
  min-width: 288px;
}

.button-module_root__G0cQu:disabled {
  cursor: not-allowed;
  background-color: var(--button-surface-disabled);
  color: var(--button-text-disabled);
  border-color: transparent;
}

/* Primary */

.button-module_primary__rOfeb {
  background-color: var(--button-surface-primary);
  color: var(--button-text-primary);
}

.button-module_primary__rOfeb:not(:disabled):hover {
  background-color: var(--button-surface-primary-hover);
  color: var(--button-text-primary-hover);
}

/* Secondary */

.button-module_secondary__yleAU {
  background-color: var(--button-surface-secondary);
  color: var(--button-text-secondary);
  border-color: var(--button-border-secondary);
}

.button-module_secondary__yleAU:not(:disabled):hover {
  background-color: var(--button-surface-secondary-hover);
  color: var(--button-text-secondary-hover);
  border-color: var(--button-border-secondary-hover);
}

/* Tertiary */

.button-module_tertiary__H-jYs {
  background-color: var(--button-surface-tertiary);
  color: var(--button-text-tertiary);
}

.button-module_tertiary__H-jYs:not(:disabled):hover {
  background-color: var(--button-surface-tertiary-hover);
  color: var(--button-text-tertiary-hover);
}

/* Accent Primary */

.button-module_accentPrimary__6zvcj {
  background-color: var(--button-surface-accent-primary);
  color: var(--button-text-accent-primary);
}

.button-module_accentPrimary__6zvcj:not(:disabled):hover {
  background-color: var(--button-surface-accent-primary-hover);
  color: var(--button-text-accent-primary-hover);
}

/* Accent Secondary */

.button-module_accentSecondary__ASjkw {
  background-color: var(--button-surface-accent-secondary);
  color: var(--button-text-accent-secondary);
  border-color: var(--button-border-accent-secondary);
}

.button-module_accentSecondary__ASjkw:not(:disabled):hover {
  background-color: var(--button-surface-accent-secondary-hover);
  color: var(--button-text-accent-secondary-hover);
  border-color: var(--button-border-accent-secondary-hover);
}

/* Pill */

.button-module_pill__wZZkF {
  background-color: var(--button-surface-pill);
  color: var(--button-text-pill);
  border-color: var(--button-border-pill);
  border-radius: var(--button-border-radius-pill);
  padding: var(--button-padding-vertical-pill)
    var(--button-padding-horizontal-pill);
  font-size: var(--button-font-size-pill);
  line-height: var(--button-line-height-pill);
  letter-spacing: var(--button-letter-spacing-pill);
  width: auto;
}

/* Size modifiers — override padding and typography from root */

.button-module_sizeLarge__3Je3R {
  padding: var(--button-size-large-padding-v) var(--button-size-large-padding-h);
  font-size: var(--button-size-large-font-size);
  line-height: var(--button-size-large-line-height);
  letter-spacing: var(--button-size-large-letter-spacing);
}

.button-module_sizeMedium__MjqHw {
  padding: var(--button-size-medium-padding-v)
    var(--button-size-medium-padding-h);
  font-size: var(--button-size-medium-font-size);
  line-height: var(--button-size-medium-line-height);
  letter-spacing: var(--button-size-medium-letter-spacing);
}

.button-module_sizeSmall__muyDC {
  padding: var(--button-size-small-padding-v) var(--button-size-small-padding-h);
  font-size: var(--button-size-small-font-size);
  line-height: var(--button-size-small-line-height);
  letter-spacing: var(--button-size-small-letter-spacing);
}

.error-page_container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 120px;
  color: var(--ui-text-base-primary, #2d2d2d);
}
  .error-page_container h1 {
    padding-top: var(--ui-scale-850, 36px);
    padding-bottom: var(--ui-scale-600, 24px);
  }
  .error-page_container p {
    padding-bottom: var(--ui-scale-450, 18px);
  }
/*
  input-field.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 595:10426).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: input-field-label | Label/Field Input */
  --input-field-label-font-family: "futura-pt", sans-serif;
  --input-field-label-font-size: var(--ui-font-size-label-field-input, 12px);
  --input-field-label-font-weight: var(--ui-font-weight-label-field-input, 600);
  --input-field-label-line-height: var(
    --ui-line-height-label-field-input,
    16px
  );
  --input-field-label-letter-spacing: var(
    --ui-letter-spacing-label-field-input,
    1px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-value | Field/Value */
  --input-field-value-font-family: "futura-pt", sans-serif;
  --input-field-value-font-size: var(--ui-font-size-field-value, 16px);
  --input-field-value-font-weight: var(--ui-font-weight-field-value, 400);
  --input-field-value-line-height: var(--ui-line-height-field-value, 22px);
  --input-field-value-letter-spacing: var(
    --ui-letter-spacing-field-value,
    0.4px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-placeholder | Field/Helper */
  --input-field-placeholder-font-family: "futura-pt", sans-serif;
  --input-field-placeholder-font-size: var(--ui-font-size-field-helper, 16px);
  --input-field-placeholder-font-weight: var(
    --ui-font-weight-field-helper,
    400
  );
  --input-field-placeholder-line-height: var(
    --ui-line-height-field-helper,
    22px
  );
  --input-field-placeholder-letter-spacing: var(
    --ui-letter-spacing-field-helper,
    0.4px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: input-field-error | Field/Helper Error */
  --input-field-error-font-family: "futura-pt", sans-serif;
  --input-field-error-font-size: var(--ui-font-size-field-helper-error, 12px);
  --input-field-error-font-weight: var(
    --ui-font-weight-field-helper-error,
    600
  );
  --input-field-error-line-height: var(
    --ui-line-height-field-helper-error,
    16px
  );
  --input-field-error-letter-spacing: var(
    --ui-letter-spacing-field-helper-error,
    1px
  );
  /* @end-chameleon-typography */

  /* Layout */
  --input-field-gap: var(--ui-gap-vertical-small, 8px);
  --input-field-padding-block: var(--ui-gap-vertical-small, 8px);
  --input-field-padding-inline-start: var(--ui-gap-horizontal-medium, 12px);
  --input-field-padding-inline-end: var(
    --ui-padding-select-field-vertical-none,
    0px
  );

  /* Border */
  --input-field-border-width: 1px;
  --input-field-border: var(--ui-border-decision-primary, #767676);
  --input-field-border-focus: var(--ui-border-decision-focus, #0770cf);
  --input-field-border-error: var(--ui-border-decision-error, #d01345);

  /* Text */
  --input-field-label-color: var(--ui-text-base-secondary, #666666);
  --input-field-value-color: var(--ui-text-base-primary, #2d2d2d);
  --input-field-placeholder-color: var(--ui-text-base-secondary, #666666);
  --input-field-error-color: var(--ui-text-decision-error, #d01345);

  /* Disabled — not in Figma node 594:8160; reuses the shared action-disabled tokens. */
  --input-field-surface-disabled: var(--ui-surface-action-disabled, #eeeeee);
  --input-field-border-disabled: var(--ui-border-action-disabled, #dddddd);
}

.input-field-module_root__YP8lj {
  display: flex;
  flex-direction: column;
  gap: var(--input-field-gap);
  align-items: stretch;
}

.input-field-module_label__T1B5s {
  display: flex;
  flex-direction: column;
  gap: var(--input-field-gap);
  align-items: stretch;
}

.input-field-module_labelText__dhDNt {
  font-family: var(--input-field-label-font-family);
  font-size: var(--input-field-label-font-size);
  font-weight: var(--input-field-label-font-weight);
  line-height: var(--input-field-label-line-height);
  letter-spacing: var(--input-field-label-letter-spacing);
  color: var(--input-field-label-color);
  text-transform: uppercase;
  word-break: break-word;
}

[dir="ltr"] .input-field-module_field__22N9o {
  padding-left: var(--input-field-padding-inline-start);
}

[dir="rtl"] .input-field-module_field__22N9o {
  padding-right: var(--input-field-padding-inline-start);
}

[dir="ltr"] .input-field-module_field__22N9o {
  padding-right: var(--input-field-padding-inline-end);
}

[dir="rtl"] .input-field-module_field__22N9o {
  padding-left: var(--input-field-padding-inline-end);
}

.input-field-module_field__22N9o {
  display: flex;
  align-items: center;
  padding-top: var(--input-field-padding-block);
  padding-bottom: var(--input-field-padding-block);
  border: var(--input-field-border-width) solid var(--input-field-border);
}

.input-field-module_field__22N9o:focus-within {
  border-color: var(--input-field-border-focus);
}

.input-field-module_fieldError__AUJoc,
.input-field-module_fieldError__AUJoc:focus-within {
  border-color: var(--input-field-border-error);
}

.input-field-module_field__22N9o[\:has\(.input-field-module_input__uzUqT\:disabled\)] {
  background-color: var(--input-field-surface-disabled);
  border-color: var(--input-field-border-disabled);
  cursor: not-allowed;
}

.input-field-module_field__22N9o:has(.input-field-module_input__uzUqT:disabled) {
  background-color: var(--input-field-surface-disabled);
  border-color: var(--input-field-border-disabled);
  cursor: not-allowed;
}

.input-field-module_input__uzUqT {
  flex: 1 0 0;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--input-field-value-font-family);
  font-size: var(--input-field-value-font-size);
  font-weight: var(--input-field-value-font-weight);
  line-height: var(--input-field-value-line-height);
  letter-spacing: var(--input-field-value-letter-spacing);
  color: var(--input-field-value-color);
  text-overflow: ellipsis;
}

.input-field-module_input__uzUqT:focus {
  outline: none;
}

.input-field-module_input__uzUqT:disabled {
  cursor: not-allowed;
}

.input-field-module_input__uzUqT::placeholder {
  font-family: var(--input-field-placeholder-font-family);
  font-size: var(--input-field-placeholder-font-size);
  font-weight: var(--input-field-placeholder-font-weight);
  line-height: var(--input-field-placeholder-line-height);
  letter-spacing: var(--input-field-placeholder-letter-spacing);
  color: var(--input-field-placeholder-color);
  opacity: 1; /* Firefox dims ::placeholder by default, which would override the token colour. */
}

.input-field-module_errorText__8gc3- {
  margin: 0;
  font-family: var(--input-field-error-font-family);
  font-size: var(--input-field-error-font-size);
  font-weight: var(--input-field-error-font-weight);
  line-height: var(--input-field-error-line-height);
  letter-spacing: var(--input-field-error-letter-spacing);
  color: var(--input-field-error-color);
  word-break: break-word;
}

.text-field_description {
  color: var(--ui-text-decision-secondary, #767676);
  padding-top: var(--ui-scale-200, 8px);
}

/*
  select.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma nodes 558:4183
  states and 472:4030 web border variant).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: select-label | Label/Field Select */
  --select-label-font-family: "futura-pt", sans-serif;
  --select-label-font-size: var(--ui-font-size-label-field-select, 14px);
  --select-label-font-weight: var(--ui-font-weight-label-field-select, 600);
  --select-label-line-height: var(--ui-line-height-label-field-select, 20px);
  --select-label-letter-spacing: var(
    --ui-letter-spacing-label-field-select,
    0.8px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: select-value | Field/Helper */
  --select-value-font-family: "futura-pt", sans-serif;
  --select-value-font-size: var(--ui-font-size-field-helper, 16px);
  --select-value-font-weight: var(--ui-font-weight-field-helper, 400);
  --select-value-line-height: var(--ui-line-height-field-helper, 22px);
  --select-value-letter-spacing: var(--ui-letter-spacing-field-helper, 0.4px);
  /* @end-chameleon-typography */

  /* @chameleon-typography: select-error | Field/Helper Error */
  --select-error-font-family: "futura-pt", sans-serif;
  --select-error-font-size: var(--ui-font-size-field-helper-error, 12px);
  --select-error-font-weight: var(--ui-font-weight-field-helper-error, 600);
  --select-error-line-height: var(--ui-line-height-field-helper-error, 16px);
  --select-error-letter-spacing: var(
    --ui-letter-spacing-field-helper-error,
    1px
  );
  /* @end-chameleon-typography */

  /* Description text has no named Thread DS text style on this node — values
     are taken directly from the Figma layer (14px Book, 20px line-height,
     0.6px letter-spacing). */
  --select-description-font-family: "futura-pt", sans-serif;
  --select-description-font-size: 14px;
  --select-description-font-weight: 400;
  --select-description-line-height: 20px;
  --select-description-letter-spacing: 0.6px;

  /* Spacing */
  --select-gap: var(--ui-gap-vertical-small, 8px);
  --select-label-gap: var(--ui-gap-horizontal-small, 8px);
  --select-padding-inline: var(
    --ui-padding-select-field-vertical-default,
    16px
  );
  --select-min-height: 44px;
  --select-chevron-size: 44px;
  --select-chevron-inset: 16px;

  /* Colour */
  --select-text-color: var(--ui-text-base-primary, #2d2d2d);
  --select-label-color: var(--ui-text-base-secondary, #666666);
  --select-value-color: var(--ui-text-base-secondary, #666666);
  --select-description-color: var(--ui-text-base-primary, #2d2d2d);
  --select-border-color: var(--ui-border-decision-primary, #767676);
  --select-border-color-focus: var(--ui-border-decision-focus, #0770cf);
  --select-border-color-error: var(--ui-border-decision-error, #d01345);
  --select-error-text-color: var(--ui-text-decision-error, #d01345);
  --select-icon-color: var(--ui-icon-base-secondary, #666666);
}

.select-module_root__N6Wpe {
  display: flex;
  flex-direction: column;
  gap: var(--select-gap);
  cursor: pointer;
}

.select-module_labelRow__o3mDU {
  display: flex;
  align-items: flex-start;
  gap: var(--select-label-gap);
}

.select-module_label__GKFaR {
  flex-shrink: 0;
  font-family: var(--select-label-font-family);
  font-size: var(--select-label-font-size);
  font-weight: var(--select-label-font-weight);
  line-height: var(--select-label-line-height);
  letter-spacing: var(--select-label-letter-spacing);
  color: var(--select-label-color);
  text-transform: uppercase;
  white-space: nowrap;
}

.select-module_description__RJwsi {
  flex: 1 0 0;
  min-width: 0;
  text-align: right;
  text-decoration: underline;
  font-family: var(--select-description-font-family);
  font-size: var(--select-description-font-size);
  font-weight: var(--select-description-font-weight);
  line-height: var(--select-description-line-height);
  letter-spacing: var(--select-description-letter-spacing);
  color: var(--select-description-color);
}

.select-module_control__kV5fH {
  position: relative;
  display: flex;
  align-items: center;
  min-height: var(--select-min-height);
  padding-left: var(--select-padding-inline);
  border: 1px solid var(--select-border-color);
}

.select-module_select__sF7pR {
  -webkit-appearance: none;
          appearance: none;
  width: 100%;
  padding: 0;
  padding-right: var(--select-chevron-size);
  border: none;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--select-value-font-family);
  font-size: var(--select-value-font-size);
  font-weight: var(--select-value-font-weight);
  line-height: var(--select-value-line-height);
  letter-spacing: var(--select-value-letter-spacing);
  color: var(--select-value-color);
}

.select-module_select__sF7pR:focus {
  outline: none;
}

.select-module_chevron__ftaGz {
  position: absolute;
  right: var(--select-chevron-inset);
  top: 50%;
  transform: translateY(-50%);
  color: var(--select-icon-color);
  pointer-events: none;
}

.select-module_error__FObdW {
  font-family: var(--select-error-font-family);
  font-size: var(--select-error-font-size);
  font-weight: var(--select-error-font-weight);
  line-height: var(--select-error-line-height);
  letter-spacing: var(--select-error-letter-spacing);
  color: var(--select-error-text-color);
}

/* Focus state — the border picks up the focus colour while the select is active */
.select-module_control__kV5fH[\:has\(.select-module_select__sF7pR.focus-visible\)] {
  border-color: var(--select-border-color-focus);
}
.select-module_control__kV5fH:has(.select-module_select__sF7pR.focus-visible) {
  border-color: var(--select-border-color-focus);
}
.select-module_control__kV5fH[\:has\(.select-module_select__sF7pR\:focus-visible\)] {
  border-color: var(--select-border-color-focus);
}
.select-module_control__kV5fH:has(.select-module_select__sF7pR:focus-visible) {
  border-color: var(--select-border-color-focus);
}

/* Error state — only the border colour changes; the value text stays neutral */
.select-module_control__kV5fH[\:has\(.select-module_select__sF7pR\[aria-invalid\%3D\%22true\%22\]\)] {
  border-color: var(--select-border-color-error);
}
.select-module_control__kV5fH:has(.select-module_select__sF7pR[aria-invalid="true"]) {
  border-color: var(--select-border-color-error);
}

/* Disabled state */
.select-module_root__N6Wpe[\:has\(.select-module_select__sF7pR\:disabled\)] {
  cursor: not-allowed;
  opacity: 0.4;
}
.select-module_root__N6Wpe:has(.select-module_select__sF7pR:disabled) {
  cursor: not-allowed;
  opacity: 0.4;
}

.country-select_container select {
    background-position: left center;
    background-size: 24px;
    background-repeat: no-repeat;
    padding-left: var(--ui-scale-800, 32px);
  }

.error-message_errorMessage {
  margin: 0;
  padding-top: var(--ui-gap-vertical-small, 8px);
  color: var(--ui-text-decision-error, #d01345);
  word-break: break-word;
}

.date-of-birth-field_groupLabel {
  display: block;
  text-transform: uppercase;
  color: var(--ui-text-decision-secondary, #767676);
  padding-bottom: var(--ui-scale-200, 8px);
}

.date-of-birth-field_wrapper {
  display: flex;
}

.date-of-birth-field_wrapper div {
    width: 100%;
  }

.date-of-birth-field_wrapper div:first-of-type, .date-of-birth-field_wrapper div:nth-of-type(2) {
    margin-right: var(--ui-scale-200, 8px);
  }

@media (max-width: 420px) {
  .date-of-birth-field_wrapper {
    display: flex;
    justify-content: space-between;
  }
    .date-of-birth-field_wrapper div {
      width: auto;
    }
    .date-of-birth-field_wrapper select {
      width: auto;
    }
}

/*
  radio.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 96:1710).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* @chameleon-typography: radio-label | Label/Field Option */
  --radio-label-font-family: "futura-pt", sans-serif;
  --radio-label-font-size: var(--ui-font-size-label-field-option, 16px);
  --radio-label-font-weight: var(--ui-font-weight-label-field-option, 400);
  --radio-label-line-height: var(--ui-line-height-label-field-option, 22px);
  --radio-label-letter-spacing: var(
    --ui-letter-spacing-label-field-option,
    0.4px
  );
  /* @end-chameleon-typography */

  /* Layout */
  --radio-gap: var(--ui-gap-vertical-medium, 12px);
  --radio-size: 20px;
  --radio-corner-radius: var(--ui-shape-corner-radius-full, 100px);

  /* Indicator */
  --radio-border: var(--ui-border-decision-primary, #767676);
  --radio-border-focus: var(--ui-border-decision-focus, #0770cf);
  --radio-surface-selected: var(--ui-surface-decision-information, #0770cf);
  --radio-dot-size: 10px;

  /* Label text */
  --radio-text-color: var(--ui-text-base-primary, #2d2d2d);
}

.radio-module_root__adrCj {
  display: inline-flex;
  align-items: center;
  gap: var(--radio-gap);
  cursor: pointer;
  min-height: 22px;
}

/* Visually hide the native input while keeping it accessible */
.radio-module_input__7ZLuE {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

.radio-module_indicator__rS6FM {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
  width: var(--radio-size);
  height: var(--radio-size);
  border: 1px solid var(--radio-border);
  border-radius: var(--radio-corner-radius);
  background-color: transparent;
}

.radio-module_indicator__rS6FM::after {
  content: "";
  opacity: 0;
  width: var(--radio-dot-size);
  height: var(--radio-dot-size);
  border-radius: var(--radio-corner-radius);
  background-color: var(--radio-surface-selected);
}

.radio-module_input__7ZLuE:checked + .radio-module_indicator__rS6FM {
  border-color: var(--radio-surface-selected);
}

.radio-module_input__7ZLuE:checked + .radio-module_indicator__rS6FM::after {
  opacity: 1;
}

/* Show a visible focus ring for keyboard users (the input is visually hidden) */
.radio-module_input__7ZLuE.focus-visible + .radio-module_indicator__rS6FM {
  outline: 2px solid var(--radio-border-focus);
  outline-offset: 2px;
}
.radio-module_input__7ZLuE:focus-visible + .radio-module_indicator__rS6FM {
  outline: 2px solid var(--radio-border-focus);
  outline-offset: 2px;
}

/* Disabled state */

.radio-module_root__adrCj[\:has\(.radio-module_input__7ZLuE\:disabled\)] {
  cursor: not-allowed;
}

.radio-module_root__adrCj:has(.radio-module_input__7ZLuE:disabled) {
  cursor: not-allowed;
}

.radio-module_input__7ZLuE:disabled + .radio-module_indicator__rS6FM {
  opacity: 0.4;
}

.radio-module_labelText__MuKAL {
  font-family: var(--radio-label-font-family);
  font-size: var(--radio-label-font-size);
  font-weight: var(--radio-label-font-weight);
  line-height: var(--radio-label-line-height);
  letter-spacing: var(--radio-label-letter-spacing);
  color: var(--radio-text-color);
  word-break: break-word;
}

.radio-button-group_legend {
  text-transform: uppercase;
  color: var(--ui-text-decision-secondary, #767676);
  padding-bottom: var(--ui-scale-200, 8px);
}

.radio-button-group_options {
  display: flex;
  position: relative;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
}

.radio-button-group_item {
  border: var(--ui-border-width-thin, 2px) solid var(--ui-border-decision-secondary, #dddddd);
  background-color: var(--ui-surface-base-raised, #ffffff);
  cursor: pointer;
  margin-top: 6px;
  min-width: calc((100% / 3) - 6px);
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Hover only on desktop, and not on the selected card. */
@media (hover: hover) and (pointer: fine) {
  .radio-button-group_item:hover:not(.radio-button-group_selected) {
    background-color: var(--ui-surface-base-canvas, #eeeeee);
  }
}

.radio-button-group_item:focus-within {
  outline: 3px auto var(--ui-border-decision-focus, #0770cf);
}

.radio-button-group_selected {
  background-color: var(--ui-surface-base-invert, #2d2d2d);
  border-color: var(--ui-surface-base-invert, #2d2d2d);
  transition: background-color 0.2s ease-in;
}

/* Radio's documented variables: hide the circle, keep the card as the control, match the old label type. */
.radio-button-group_radio {
  --radio-size: 0px;
  --radio-gap: 0px;
  --radio-border: transparent;
  --radio-surface-selected: transparent;
  --radio-text-color: var(--ui-text-base-primary, #2d2d2d);
  --radio-label-font-size: var(--ui-font-size-label-field-group, 14px);
  --radio-label-font-weight: var(--ui-font-weight-label-field-group, 600);
  --radio-label-line-height: var(--ui-line-height-label-field-group, 20px);
  --radio-label-letter-spacing: var(--ui-letter-spacing-label-field-group, 0.8px);
  width: 100%;
  height: 100%;
  justify-content: center;
}

.radio-button-group_selected .radio-button-group_radio {
  --radio-text-color: var(--ui-text-base-on-dark, #ffffff);
}

.finder-field_wrapper {
  position: relative;
}

/* Clears the absolutely positioned clear button. */
.finder-field_field {
  --input-field-padding-inline-end: 58px;
}

.finder-field_listOpen {
  --input-field-border: var(--ui-border-decision-focus, #0770cf);
}

.finder-field_list {
  border: var(--ui-border-width-hairline, 1px) solid var(--ui-border-base-default, #767676);
  border-top: none;
  position: absolute;
  width: calc(100% - 2px);
  background-color: var(--ui-surface-base-raised, #ffffff);
  z-index: 100;
  max-height: 300px;
  overflow-y: scroll;
  box-shadow: 0px 2px 3px rgba(45, 45, 45, 0.2);
}

.finder-field_list li {
    padding: var(--ui-scale-300, 12px) var(--ui-scale-350, 14px);
  }

.finder-field_list li:hover, .finder-field_list li:focus {
    background-color: var(--ui-surface-base-elevated, #f8f8f8);
    cursor: pointer;
  }

.finder-field_list::-webkit-scrollbar{
  display: none;
}

.finder-field_list:focus-within, .finder-field_clear:focus ~ .finder-field_list  {
  border: var(--ui-border-width-hairline, 1px) solid var(--ui-border-decision-focus, #0770cf);
  border-top: none;
}

.finder-field_clear {
  position: absolute;
  width: auto;
  height: auto;
  padding: 0px;
  min-width: auto;
  top: 41px;
  right: 12px;
  border: none;
  background: transparent;
  text-transform: uppercase;
}

.finder-field_clear:hover, .finder-field_clear:focus {
  background: transparent;
}

.finder-field_progressBar div {
  margin: auto;
}

.school-finder-field_wrapper ul > li > a {
    color: var(--ui-link-primary, #2d2d2d);
  }

.verification-form_container {
  color: var(--ui-text-base-primary, #2d2d2d);
  display: flex;
  flex-direction: column;
}
  .verification-form_container h1 {
    text-align: center;
    padding-bottom: var(--ui-scale-400, 16px);
  }
  .verification-form_container .verification-form_formInfo p, .verification-form_container .verification-form_formInfo ul {
      padding-bottom: var(--ui-scale-600, 24px);
    }
  .verification-form_container .verification-form_formInfo ul  {
      padding-left: var(--ui-scale-600, 24px);
    }
  .verification-form_container .verification-form_formInfo ul li {
        list-style-type: disc;
      }
  .verification-form_container .verification-form_formControl {
    padding-bottom: var(--ui-scale-600, 24px);
    display: flex;
    flex-direction: column;
  }
  .verification-form_container .verification-form_footer {
    text-align: center;
    padding: var(--ui-scale-600, 24px);
  }
  .verification-form_container .verification-form_footer p {
      color: var(--ui-text-base-secondary, #666666);
    }
  .verification-form_container .verification-form_footer a {
      text-decoration: underline;
      color: inherit;
      cursor: pointer;
    }
  .verification-form_container .verification-form_footer .verification-form_help {
      margin-top: var(--ui-scale-750, 30px);
      font-weight: var(--ui-type-font-weight-heavy, 600);
      display: block;
    }
  .verification-form_container .verification-form_footer svg {
      padding: var(--ui-scale-450, 18px) 0;
    }
  .verification-form_container .verification-form_tsAndCs {
    padding-bottom: var(--ui-scale-600, 24px);
    display: block;
    color: var(--ui-text-base-secondary, #666666);
  }
  .verification-form_container .verification-form_tsAndCs a {
      color: var(--ui-text-base-secondary, #666666);
    }

#react-root {
  height: 100%;
}

/* Light-only: dark mode is out of scope; :root:root beats semantic.css's prefers-color-scheme rule. */
:root:root {
  color-scheme: light;
}

.app_container {
  display: flex;
  justify-content: center;
  height: calc(100% - 110px);
}

.app_container .app_layout {
    width: 448px;
    max-width: 100%;
    padding: var(--ui-scale-600, 24px) var(--ui-scale-400, 16px);
  }

.app_progressContainer {
  display: flex;
  justify-content: center;
  height: 100%;
  align-items: center;
}

@media (min-width: 768px) {
  .app_container {
      height: calc(100% - 125px);;
  }
}

@media (min-width: 1024px) {
  .app_container {
    height: calc(100% - 160px);
  }
}

.app_errorContainer {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/*
  alert.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 763:2227).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* Spacing */
  --alert-padding: 16px;
  --alert-gap: 16px;
  --alert-content-gap: 4px;

  /* Background tokens — one per type */
  --alert-bg-information: #cde2f5;
  --alert-bg-success: #cceede;
  --alert-bg-warning: #ffebcc;
  --alert-bg-error: #fae7ec;
  --alert-bg-system: #2d2d2d;

  /* Text tokens */
  --alert-text-default: #2d2d2d;
  --alert-text-system: #ffffff;

  /* Link tokens */
  --alert-link-default: var(--ui-link-on-colour, #2d2d2d);

  /* @chameleon-typography: alert-title | Label/Field Group */
  --alert-title-font-family: "futura-pt", sans-serif;
  --alert-title-font-size: var(--ui-font-size-label-field-group, 14px);
  --alert-title-font-weight: var(--ui-font-weight-label-field-group, 600);
  --alert-title-line-height: var(--ui-line-height-label-field-group, 20px);
  --alert-title-letter-spacing: var(
    --ui-letter-spacing-label-field-group,
    0.8px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: alert-message | Body/Paragraph Large */
  --alert-message-font-family: "futura-pt", sans-serif;
  --alert-message-font-size: var(--ui-font-size-body-paragraph-large, 16px);
  --alert-message-font-weight: var(--ui-font-weight-body-paragraph-large, 400);
  --alert-message-line-height: var(--ui-line-height-body-paragraph-large, 22px);
  --alert-message-letter-spacing: var(
    --ui-letter-spacing-body-paragraph-large,
    0.6px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: alert-action | Link/Link Large */
  --alert-action-font-family: "futura-pt", sans-serif;
  --alert-action-font-size: var(--ui-font-size-link-link-large, 16px);
  --alert-action-font-weight: var(--ui-font-weight-link-link-large, 400);
  --alert-action-line-height: var(--ui-line-height-link-link-large, 22px);
  --alert-action-letter-spacing: var(
    --ui-letter-spacing-link-link-large,
    0.4px
  );
  /* @end-chameleon-typography */
}

.alert-module_root__UcUdo {
  display: flex;
  align-items: flex-start;
  padding: var(--alert-padding);
  background-color: var(--alert-bg);
  color: var(--alert-text);
  width: 100%;
  box-sizing: border-box;
}

.alert-module_attributes__dkgBP {
  display: flex;
  flex: 1 0 0;
  align-items: flex-start;
  gap: var(--alert-gap);
  min-width: 0;
}

.alert-module_iconSlot__oaX1l {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
}

.alert-module_content__XSZwq {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: var(--alert-content-gap);
  min-width: 0;
}

.alert-module_title__CgOn- {
  font-family: var(--alert-title-font-family);
  font-size: var(--alert-title-font-size);
  font-weight: var(--alert-title-font-weight);
  line-height: var(--alert-title-line-height);
  letter-spacing: var(--alert-title-letter-spacing);
  text-transform: uppercase;
  margin: 0;
  color: var(--alert-text);
}

.alert-module_message__7uUJt {
  font-family: var(--alert-message-font-family);
  font-size: var(--alert-message-font-size);
  font-weight: var(--alert-message-font-weight);
  line-height: var(--alert-message-line-height);
  letter-spacing: var(--alert-message-letter-spacing);
  margin: 0;
  color: var(--alert-text);
}

.alert-module_action__mOdBh {
  font-family: var(--alert-action-font-family);
  font-size: var(--alert-action-font-size);
  font-weight: var(--alert-action-font-weight);
  line-height: var(--alert-action-line-height);
  letter-spacing: var(--alert-action-letter-spacing);
  text-decoration: underline;
  color: var(--alert-link);
}

/* Ensure anchor elements inside action inherit the alert's link colour
   rather than browser-default blue */
.alert-module_action__mOdBh a {
  color: inherit;
  text-decoration: inherit;
}

.alert-module_closeButton__mhHZx {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--alert-text);
}

/* Type variants — set --alert-bg, --alert-text, --alert-link */

.alert-module_information__ADZy7 {
  --alert-bg: var(--alert-bg-information);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_success__9XtBq {
  --alert-bg: var(--alert-bg-success);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_warning__EagYG {
  --alert-bg: var(--alert-bg-warning);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_error__nSpLr {
  --alert-bg: var(--alert-bg-error);
  --alert-text: var(--alert-text-default);
  --alert-link: var(--alert-link-default);
}

.alert-module_system__J-EYE {
  --alert-bg: var(--alert-bg-system);
  --alert-text: var(--alert-text-system);
  --alert-link: var(--alert-text-system);
}

.view-discount_container {
  display: flex;
  flex-direction: column;
  height: calc(100% - 110px);
  justify-content: space-between;
  color: var(--ui-text-base-primary, #2d2d2d);
}
  .view-discount_container .view-discount_progressbar {
    height: 100%;
    display: flex;
    justify-content: space-around;
    flex-direction: column;
  }
  .view-discount_container .view-discount_progressbar div {
      align-self: center;
    }
  .view-discount_container .view-discount_content {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: center;
    transition: ease-in 0.3s;
  }
  .view-discount_container .view-discount_content > div:first-of-type {
      width: 448px;
      max-width: calc(100% - 32px);
      padding: var(--ui-scale-700, 28px) var(--ui-scale-400, 16px);
      text-align: center;
    }
  .view-discount_container .view-discount_content h1 {
      padding-bottom: 26px;
      text-transform: uppercase;
    }
  .view-discount_container .view-discount_content > div:first-of-type > p,
    .view-discount_container .view-discount_content .view-discount_discountError > p {
      padding-bottom: var(--ui-scale-800, 32px);
      text-align: left;
    }
  .view-discount_container .view-discount_content .view-discount_discount {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  .view-discount_container .view-discount_content .view-discount_discount span {
        padding: var(--ui-scale-400, 16px);
        border: var(--ui-border-width-hairline, 1px) solid var(--ui-border-action-primary, #2d2d2d);
        min-width: 190px;
        text-transform: uppercase;
      }
  .view-discount_container .view-discount_content .view-discount_discount button {
        margin: var(--ui-scale-200, 8px) 0;
        cursor: pointer;
        text-decoration: underline;
        background-color: unset;
        border: none;
        font-family: inherit;
        color: inherit;
      }
  .view-discount_container .view-discount_content .view-discount_discountPending {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  .view-discount_container .view-discount_content .view-discount_discountPending a {
        padding-top: 26px;
        text-decoration: underline;
        cursor: pointer;
        color: var(--ui-link-primary, #2d2d2d);
        font-weight: var(--ui-type-font-weight-heavy, 600);
      }
  .view-discount_container .view-discount_footer {
    /* The green is a fixed colour, so its text and button must not follow dark mode. */
    color-scheme: light;
    color: var(--ui-text-base-primary, #2d2d2d);
    display: flex;
    background-color: #26E066;
    padding: var(--ui-scale-800, 32px) var(--ui-scale-400, 16px) 46px var(--ui-scale-400, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .view-discount_container .view-discount_footer h2 {
      padding-bottom: 34px;
      text-align: center;
    }

/* Button's documented secondary variables: transparent with a dark border, filling dark on hover. */
.view-discount_browseButton {
  --button-surface-secondary: transparent;
  --button-border-secondary: var(--ui-border-action-primary, #2d2d2d);
  --button-surface-secondary-hover: var(--ui-surface-action-primary, #2d2d2d);
  --button-text-secondary-hover: var(--ui-text-action-primary, #ffffff);
  --button-border-secondary-hover: var(--ui-border-action-primary, #2d2d2d);
}

.view-discount_discountError {
  display: flex;
  flex-direction: column;
}

.view-discount_discountError p {
    padding-top: var(--ui-scale-500, 20px);
  }

.view-discount_discountError .view-discount_sheerIdCCLink {
    font-weight: bold;
    text-decoration: underline;
    color: var(--ui-link-primary, #2d2d2d);
  }

.view-discount_discountError > div {
    max-width: 343px;
    align-self: center;
  }

@media (min-width: 768px) {
  .view-discount_container {
    height: calc(100% - 125px);
  }
}

@media (min-width: 1024px) {
  .view-discount_container {
    height: calc(100% - 160px);
  }
}

.view-discount_error {
  padding-top: var(--ui-scale-600, 24px);
}

/*
  snack-bar.map.css
  ─────────────────────────────────────────────────────────────────────────────
  Token values extracted from the ASOS Design System (Figma node 780:17368).
  Copy this file into a consuming project's global stylesheet and remove it
  once a global token layer covers the same variables.
*/

:root {
  /* Spacing */
  --snack-bar-padding: 16px;
  --snack-bar-gap: 16px;

  /* Background tokens — one per type */
  --snack-bar-bg-information: var(--ui-surface-decision-neutral, #cde2f5);
  --snack-bar-bg-success: var(--ui-surface-decision-success, #cceede);
  --snack-bar-bg-warning: var(--ui-surface-decision-warning, #ffebcc);
  --snack-bar-bg-error: var(--ui-surface-decision-error, #fae7ec);
  --snack-bar-bg-system: var(--ui-surface-decision-invert, #2d2d2d);

  /* Text tokens */
  --snack-bar-text-default: var(--ui-text-base-on-colour, #2d2d2d);
  --snack-bar-text-system: var(--ui-text-base-on-dark-fixed, #ffffff);

  /* Link tokens */
  --snack-bar-link-default: var(--ui-link-on-colour, #2d2d2d);
  --snack-bar-link-system: var(--ui-link-on-dark-fixed, #ffffff);

  /* @chameleon-typography: snack-bar-message | Body/Paragraph Large */
  --snack-bar-message-font-family: "futura-pt", sans-serif;
  --snack-bar-message-font-size: var(--ui-font-size-body-paragraph-large, 16px);
  --snack-bar-message-font-weight: var(
    --ui-font-weight-body-paragraph-large,
    400
  );
  --snack-bar-message-line-height: var(
    --ui-line-height-body-paragraph-large,
    22px
  );
  --snack-bar-message-letter-spacing: var(
    --ui-letter-spacing-body-paragraph-large,
    0.6px
  );
  /* @end-chameleon-typography */

  /* @chameleon-typography: snack-bar-action | Link/Link Large */
  --snack-bar-action-font-family: "futura-pt", sans-serif;
  --snack-bar-action-font-size: var(--ui-font-size-link-link-large, 16px);
  --snack-bar-action-font-weight: var(--ui-font-weight-link-link-large, 400);
  --snack-bar-action-line-height: var(--ui-line-height-link-link-large, 22px);
  --snack-bar-action-letter-spacing: var(
    --ui-letter-spacing-link-link-large,
    0.4px
  );
  /* @end-chameleon-typography */
}

/* Root layout */

.snack-bar-module_root__uD4cr {
  display: flex;
  align-items: center;
  gap: var(--snack-bar-gap);
  padding: var(--snack-bar-padding);
  width: 100%;
  box-sizing: border-box;
  background-color: var(--snack-bar-bg);
  color: var(--snack-bar-text);
}

/* Message */

.snack-bar-module_message__-gS7B {
  flex: 1 0 0;
  min-width: 0;
  margin: 0;
  font-family: var(--snack-bar-message-font-family);
  font-size: var(--snack-bar-message-font-size);
  font-weight: var(--snack-bar-message-font-weight);
  line-height: var(--snack-bar-message-line-height);
  letter-spacing: var(--snack-bar-message-letter-spacing);
  word-break: break-word;
}

/* Action */

.snack-bar-module_action__GOiDZ {
  flex-shrink: 0;
  font-family: var(--snack-bar-action-font-family);
  font-size: var(--snack-bar-action-font-size);
  font-weight: var(--snack-bar-action-font-weight);
  line-height: var(--snack-bar-action-line-height);
  letter-spacing: var(--snack-bar-action-letter-spacing);
  text-decoration: underline;
  text-align: right;
  white-space: nowrap;
  color: var(--snack-bar-link);
}

.snack-bar-module_action__GOiDZ a {
  color: inherit;
  text-decoration: inherit;
}

/* Type variants — set --snack-bar-bg, --snack-bar-text, --snack-bar-link */

.snack-bar-module_information__jofbv {
  --snack-bar-bg: var(--snack-bar-bg-information);
  --snack-bar-text: var(--snack-bar-text-default);
  --snack-bar-link: var(--snack-bar-link-default);
}

.snack-bar-module_success__VWKG7 {
  --snack-bar-bg: var(--snack-bar-bg-success);
  --snack-bar-text: var(--snack-bar-text-default);
  --snack-bar-link: var(--snack-bar-link-default);
}

.snack-bar-module_warning__rr1y0 {
  --snack-bar-bg: var(--snack-bar-bg-warning);
  --snack-bar-text: var(--snack-bar-text-default);
  --snack-bar-link: var(--snack-bar-link-default);
}

.snack-bar-module_error__JgXbZ {
  --snack-bar-bg: var(--snack-bar-bg-error);
  --snack-bar-text: var(--snack-bar-text-default);
  --snack-bar-link: var(--snack-bar-link-default);
}

.snack-bar-module_system__i318W {
  --snack-bar-bg: var(--snack-bar-bg-system);
  --snack-bar-text: var(--snack-bar-text-system);
  --snack-bar-link: var(--snack-bar-link-system);
}

.copy-code_container .copy-code_popover {
    animation: copy-code_easeOut .2s ease-out 2.8s both;
  }
  @keyframes copy-code_easeOut {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }

.banner_container {
    background-image: url(data:image/png;base64,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);
    height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner_logo {
    width: 195px;
}

@media (min-width: 768px) {
    .banner_container {
        height: 125px;
    }

    .banner_logo {
        width: 215px;
    }
  }

  @media (min-width: 1024px) {
    .banner_container {
        height: 160px;
    }

    .banner_logo {
        width: 245px;
    }
  }
.pre-form_container {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    color: var(--ui-text-base-primary, #2d2d2d);
  }
    .pre-form_container h1 {
      text-align: center;
      padding-bottom: var(--ui-scale-400, 16px);
      text-transform: uppercase;
      max-width: 350px;
      margin: 0 auto;
    }
    .pre-form_container .pre-form_formInfo p {
        padding-bottom: var(--ui-scale-600, 24px);
      }
    .pre-form_container .pre-form_button {
      width: 100%;
    }
    .pre-form_container .pre-form_footer p {
        color: var(--ui-text-base-secondary, #666666);
      }

  @media (min-width: 768px) {
      .pre-form_container h1 {
        max-width: 450px;
      }

      .pre-form_container .pre-form_footer {
        padding-top: 130px;
      }
  }
  

/*# sourceMappingURL=student-validation.1bc4b824f41648ad38b8.css.map*/