/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/lockIndicator.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
.Header_lockWrap--lEcon {
  display: inline-flex;
  flex: 0 0 auto;
}

.Header_lockIcon--pJg0X {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--semantic-colour-text-primary-soil);
}
/*!***********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/MegaMenu/index.module.scss ***!
  \***********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.MegaMenu_itemButton--tdh0R, .MegaMenu_itemButton--tdh0R.MuiButton-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MegaMenu_itemButton--tdh0R, .MegaMenu_itemButton--tdh0R.MuiButton-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MegaMenu_columnTitle--vTFXf.MuiButton-root {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MegaMenu_columnTitle--vTFXf.MuiButton-root {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MegaMenu_itemButton--tdh0R:hover .MegaMenu_stableHoverLabel--WjTRf, .MegaMenu_stableHoverLabel--WjTRf::after {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MegaMenu_itemButton--tdh0R:hover .MegaMenu_stableHoverLabel--WjTRf, .MegaMenu_stableHoverLabel--WjTRf::after {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MegaMenu_badge--PFk3_ {
  font-family: var(--typography-eyebrow-family-default);
  font-weight: 600;
  font-size: var(--typography-eyebrow-size-mobile-semi-bold);
  line-height: var(--typography-eyebrow-line-height-mobile-semi-bold);
  letter-spacing: 0;
}
@media (min-width: 1200px) {
  .MegaMenu_badge--PFk3_ {
    font-family: var(--typography-eyebrow-family-default);
    font-weight: 600;
    font-size: var(--typography-eyebrow-size-desktop-semi-bold);
    line-height: var(--typography-eyebrow-line-height-desktop-semi-bold);
    letter-spacing: 0;
  }
}

.MegaMenu_columnsWrapper--N8KZi {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-medium);
  background: var(--semantic-colour-background-white);
  padding: var(--spacing-medium);
  border-radius: var(--semantic-border-radius-s);
}

.MegaMenu_columnWrapper--ff6rN {
  display: flex;
  align-items: flex-start;
}

.MegaMenu_columnWrapper--ff6rN:not(:last-child) {
  align-self: stretch;
  border-right: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-light-base);
}

.MegaMenu_column--b2wT6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xxx-small);
  width: 200px;
}

.MegaMenu_itemGroup--BrE6K,
.MegaMenu_childLinks--Ouqfu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxx-small);
  width: 100%;
}

.MegaMenu_childLinks--Ouqfu {
  padding-left: var(--spacing-medium);
}

.MegaMenu_groupedColumns--qSvun {
  --menu-item-height: calc(
    var(--typography-body-line-height-desktop-regular) + 2 *
      (var(--spacing-xx-small) + var(--spacing-xxx-small))
  );
}
.MegaMenu_groupedColumns--qSvun .MegaMenu_itemButton--tdh0R {
  min-height: var(--menu-item-height);
  padding-block: calc(var(--spacing-xx-small) + var(--spacing-xxx-small));
}

.MegaMenu_badge--PFk3_ {
  margin-left: var(--spacing-xx-small);
  text-transform: uppercase;
}

.MegaMenu_itemButton--tdh0R {
  min-width: 0;
  width: 100%;
  padding: var(--spacing-xx-small) 0;
  color: var(--semantic-colour-interactive-light-idle);
  text-transform: none;
  justify-content: flex-start;
}

.MegaMenu_itemButton--tdh0R.MuiButton-root {
  text-transform: none;
  justify-content: flex-start;
}

.MegaMenu_itemButton--tdh0R:hover {
  background-color: transparent;
}

.MegaMenu_itemButton--tdh0R:hover .MegaMenu_badge--PFk3_ {
  font-weight: 700;
}

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

.MegaMenu_lockedLabel--RoxDc {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xx-small);
}

.MegaMenu_stableHoverLabel--WjTRf::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.MegaMenu_itemButton--tdh0R:focus-visible {
  outline: var(--semantic-border-width-m) solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.MegaMenu_columnTitle--vTFXf.MuiButton-root {
  width: fit-content;
  border-bottom: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-light-base);
  border-radius: 0;
}
/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/MobileNotificationsPanel/index.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.MobileNotificationsPanel_notificationsTitle--Dgt91 {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .MobileNotificationsPanel_notificationsTitle--Dgt91 {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.MobileNotificationsPanel_notificationsSettingsBtn--bao42, .MobileNotificationsPanel_notificationsItemTitle--i5KTO {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileNotificationsPanel_notificationsSettingsBtn--bao42, .MobileNotificationsPanel_notificationsItemTitle--i5KTO {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileNotificationsPanel_notificationsPanel--urPaJ {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  height: 100%;
  overflow-y: auto;
  padding: 0 var(--spacing-x-large) var(--spacing-x-large);
}

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

.MobileNotificationsPanel_notificationsTitle--Dgt91 {
  color: var(--semantic-colour-text-primary-soil);
  line-height: var(--font-line-height-21);
}

.MobileNotificationsPanel_notificationsSettingsBtn--bao42 {
  padding: 8px 0;
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
  min-width: 0;
}

.MobileNotificationsPanel_notificationsSettingsBtn--bao42.MuiButton-root {
  font-size: var(--typography-body-size-desktop-regular);
  font-weight: 700;
  line-height: var(--font-line-height-24);
  text-transform: none;
}

.MobileNotificationsPanel_notificationsList--ZvjVk {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.MobileNotificationsPanel_notificationsDivider--rcjEG {
  border-color: var(--semantic-colour-divider-border-light-base);
  margin: 0;
}

.MobileNotificationsPanel_notificationsItem--yScLm {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
}

.MobileNotificationsPanel_notificationsUnreadWrap--BE17J {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MobileNotificationsPanel_notificationsUnreadDot--VWRzd {
  width: 12px;
  height: 12px;
  border-radius: var(--semantic-border-radius-full);
  background: var(--semantic-colour-status-info);
}

.MobileNotificationsPanel_notificationsIconWrap--LgzgN {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-colour-text-primary-soil);
}
.MobileNotificationsPanel_notificationsIconWrap--LgzgN svg {
  font-size: 18px;
}

.MobileNotificationsPanel_notificationsContent--haOnW {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x-small);
}

.MobileNotificationsPanel_notificationsItemTitle--i5KTO {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileNotificationsPanel_notificationsItemMessage--UpVBw {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
}

.MobileNotificationsPanel_notificationsItemTimestamp--wiwTh {
  color: var(--semantic-colour-text-primary-alt2);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
}

.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root {
  width: 40px;
  height: 40px;
  padding: 0;
  flex-shrink: 0;
  border-radius: var(--semantic-border-radius-full);
  color: var(--semantic-colour-text-primary-soil);
  background: transparent;
}
.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:hover, .MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:focus, .MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:active {
  background: var(--semantic-colour-icon-soil);
  color: var(--semantic-colour-icon-white);
}
.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:hover .MobileNotificationsPanel_notificationsMoreIcon--qW4xk,
.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:hover .MuiSvgIcon-root, .MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:focus .MobileNotificationsPanel_notificationsMoreIcon--qW4xk,
.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:focus .MuiSvgIcon-root, .MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:active .MobileNotificationsPanel_notificationsMoreIcon--qW4xk,
.MobileNotificationsPanel_notificationsMoreBtn--fHfqa.MuiIconButton-root:active .MuiSvgIcon-root {
  color: var(--semantic-colour-icon-white);
  fill: var(--semantic-colour-icon-white);
}

.MobileNotificationsPanel_notificationsMoreIcon--qW4xk {
  font-size: 16px;
  color: var(--semantic-colour-icon-soil);
  fill: currentColor;
}

.MobileNotificationsPanel_notificationsMoreBtnActive--TYTK1.MuiIconButton-root {
  background: var(--semantic-colour-interactive-light-focus);
  color: var(--semantic-colour-interactive-dark-idle);
}
.MobileNotificationsPanel_notificationsMoreBtnActive--TYTK1.MuiIconButton-root .MobileNotificationsPanel_notificationsMoreIcon--qW4xk,
.MobileNotificationsPanel_notificationsMoreBtnActive--TYTK1.MuiIconButton-root .MuiSvgIcon-root {
  color: var(--semantic-colour-interactive-dark-idle);
  fill: var(--semantic-colour-interactive-dark-idle);
}

.MobileNotificationsPanel_actionMenuPaper--rb7xu {
  margin-top: var(--spacing-xx-small);
  min-width: 187px;
  padding: var(--spacing-medium);
  border-radius: var(--semantic-border-radius-s);
  box-shadow: var(--elevation-alert);
  background: var(--semantic-colour-background-white);
}

.MobileNotificationsPanel_actionMenuItem--GpUhr {
  padding: var(--spacing-xx-small) 0;
  min-height: 0;
  color: var(--semantic-colour-interactive-light-idle);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.MobileNotificationsPanel_actionMenuItem--GpUhr:hover {
  background: transparent;
  text-decoration: underline;
}

.MobileNotificationsPanel_notificationsFooter--tBwB0 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xx-small);
  padding: var(--spacing-medium);
}

.MobileNotificationsPanel_notificationsFooterIcon--OUwxz {
  width: 32px;
  height: 32px;
  color: var(--semantic-colour-icon-soil);
}

.MobileNotificationsPanel_notificationsFooterText--tMmAe {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--typography-body-size-mobile-regular);
  font-weight: 700;
  line-height: var(--typography-body-line-height-mobile-regular);
  text-align: center;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Button/TextButton/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.TextButton_btn-text--McKV1, .TextButton_btn-primary--OLRab, .TextButton_btnText--r_lRR.MuiButton-root {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .TextButton_btn-text--McKV1, .TextButton_btn-primary--OLRab, .TextButton_btnText--r_lRR.MuiButton-root {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.TextButton_btn-text--McKV1, .TextButton_btnText--r_lRR.MuiButton-root {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  padding: var(--spacing-xx-small) 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .TextButton_btn-text--McKV1, .TextButton_btnText--r_lRR.MuiButton-root {
    min-height: 40px;
  }
}
.TextButton_btn-text--McKV1:hover, .TextButton_btnText--r_lRR:hover.MuiButton-root {
  text-decoration: underline;
}
.TextButton_btn-text--McKV1:active, .TextButton_btnText--r_lRR:active.MuiButton-root {
  text-decoration: underline;
}
.TextButton_btn-text--McKV1:disabled, .TextButton_btnText--r_lRR:disabled.MuiButton-root {
  color: var(--semantic-colour-interactive-light-disabled);
  cursor: not-allowed;
  text-decoration: none;
}
.TextButton_btn-text--McKV1:focus-visible, .TextButton_btnText--r_lRR:focus-visible.MuiButton-root {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
  border-radius: var(--semantic-border-radius-s);
}

.TextButton_btn-icon--iXSYf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.TextButton_btn-icon--iXSYf:hover {
  background-color: var(--semantic-colour-interactive-light-hover);
}
.TextButton_btn-icon--iXSYf:active {
  color: var(--semantic-colour-icon-white);
  background-color: var(--semantic-colour-interactive-light-pressed);
}
.TextButton_btn-icon--iXSYf:disabled {
  color: var(--colour-greyscale-500);
  cursor: not-allowed;
  background-color: transparent;
}
.TextButton_btn-icon--iXSYf:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
}

.TextButton_btn-primary--OLRab {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  min-width: 176px;
  padding: var(--spacing-x-small);
  background: var(--semantic-colour-interactive-light-idle);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-white);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .TextButton_btn-primary--OLRab {
    min-height: 56px;
  }
}
.TextButton_btn-primary--OLRab:hover {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}
.TextButton_btn-primary--OLRab:active {
  background: var(--semantic-colour-interactive-light-focus);
  color: var(--semantic-colour-text-primary-white);
}
.TextButton_btn-primary--OLRab:disabled {
  background: var(--semantic-colour-interactive-dark-disabled);
  color: var(--semantic-colour-text-primary-white);
  cursor: not-allowed;
}
.TextButton_btn-primary--OLRab:focus-visible {
  outline: 2px solid var(--semantic-colour-interactive-light-focus);
  outline-offset: 2px;
}

.TextButton_btnText--r_lRR.MuiButton-root {
  text-transform: none;
}

.TextButton_btnTextDanger--eKRyt.MuiButton-root {
  color: var(--semantic-colour-status-error);
}

.TextButton_labelHideMobile--CYbRV {
  display: none;
}
@media (min-width: 600px) {
  .TextButton_labelHideMobile--CYbRV {
    display: inline;
  }
}

.TextButton_iconLeft--dJkby,
.TextButton_iconRight--nRKmV {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.TextButton_iconLeft--dJkby .MuiSvgIcon-root,
.TextButton_iconRight--nRKmV .MuiSvgIcon-root {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.TextButton_iconLeft--dJkby > svg:not(.MuiSvgIcon-root),
.TextButton_iconRight--nRKmV > svg:not(.MuiSvgIcon-root) {
  width: 17px;
  height: 17px;
  color: inherit;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Button/IconButton/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.IconButton_btn-text--ONau3, .IconButton_btn-primary--_zS4Y {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .IconButton_btn-text--ONau3, .IconButton_btn-primary--_zS4Y {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.IconButton_btn-text--ONau3 {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  padding: var(--spacing-xx-small) 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .IconButton_btn-text--ONau3 {
    min-height: 40px;
  }
}
.IconButton_btn-text--ONau3:hover {
  text-decoration: underline;
}
.IconButton_btn-text--ONau3:active {
  text-decoration: underline;
}
.IconButton_btn-text--ONau3:disabled {
  color: var(--semantic-colour-interactive-light-disabled);
  cursor: not-allowed;
  text-decoration: none;
}
.IconButton_btn-text--ONau3:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
  border-radius: var(--semantic-border-radius-s);
}

.IconButton_btn-icon--dpL2k, .IconButton_btnIcon--CeUUO {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.IconButton_btn-icon--dpL2k:hover, .IconButton_btnIcon--CeUUO:hover {
  background-color: var(--semantic-colour-interactive-light-hover);
}
.IconButton_btn-icon--dpL2k:active, .IconButton_btnIcon--CeUUO:active {
  color: var(--semantic-colour-icon-white);
  background-color: var(--semantic-colour-interactive-light-pressed);
}
.IconButton_btn-icon--dpL2k:disabled, .IconButton_btnIcon--CeUUO:disabled {
  color: var(--colour-greyscale-500);
  cursor: not-allowed;
  background-color: transparent;
}
.IconButton_btn-icon--dpL2k:focus-visible, .IconButton_btnIcon--CeUUO:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
}

.IconButton_btn-primary--_zS4Y {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  min-width: 176px;
  padding: var(--spacing-x-small);
  background: var(--semantic-colour-interactive-light-idle);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-white);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .IconButton_btn-primary--_zS4Y {
    min-height: 56px;
  }
}
.IconButton_btn-primary--_zS4Y:hover {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}
.IconButton_btn-primary--_zS4Y:active {
  background: var(--semantic-colour-interactive-light-focus);
  color: var(--semantic-colour-text-primary-white);
}
.IconButton_btn-primary--_zS4Y:disabled {
  background: var(--semantic-colour-interactive-dark-disabled);
  color: var(--semantic-colour-text-primary-white);
  cursor: not-allowed;
}
.IconButton_btn-primary--_zS4Y:focus-visible {
  outline: 2px solid var(--semantic-colour-interactive-light-focus);
  outline-offset: 2px;
}

.IconButton_btnIcon--CeUUO .MuiSvgIcon-root {
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.IconButton_btnIcon--CeUUO svg:not(.MuiSvgIcon-root) {
  width: 24px;
  height: 24px;
  color: inherit;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Button/Button/index.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Button_btn-text--h9TUP, .Button_btn-primary--Q_KqL, .Button_btn--cWJeC.MuiButton-root {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Button_btn-text--h9TUP, .Button_btn-primary--Q_KqL, .Button_btn--cWJeC.MuiButton-root {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Button_btn-text--h9TUP {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  padding: var(--spacing-xx-small) 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  text-decoration: none;
  transition: -webkit-text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease;
  transition: text-decoration 0.2s ease, -webkit-text-decoration 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .Button_btn-text--h9TUP {
    min-height: 40px;
  }
}
.Button_btn-text--h9TUP:hover {
  text-decoration: underline;
}
.Button_btn-text--h9TUP:active {
  text-decoration: underline;
}
.Button_btn-text--h9TUP:disabled {
  color: var(--semantic-colour-interactive-light-disabled);
  cursor: not-allowed;
  text-decoration: none;
}
.Button_btn-text--h9TUP:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
  border-radius: var(--semantic-border-radius-s);
}

.Button_btn-icon--HJxOC {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--semantic-colour-surface-primary-white);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.Button_btn-icon--HJxOC:hover {
  background-color: var(--semantic-colour-interactive-light-hover);
}
.Button_btn-icon--HJxOC:active {
  color: var(--semantic-colour-icon-white);
  background-color: var(--semantic-colour-interactive-light-pressed);
}
.Button_btn-icon--HJxOC:disabled {
  color: var(--colour-greyscale-500);
  cursor: not-allowed;
  background-color: transparent;
}
.Button_btn-icon--HJxOC:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-soil);
  outline-offset: 2px;
}

.Button_btn-primary--Q_KqL, .Button_btn--cWJeC.MuiButton-root {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xx-small);
  min-width: 176px;
  padding: var(--spacing-x-small);
  background: var(--semantic-colour-interactive-light-idle);
  border: none;
  border-radius: var(--semantic-border-radius-s);
  color: var(--semantic-colour-text-primary-white);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease;
  font-weight: 700;
}
@media (max-width: 599.95px) {
  .Button_btn-primary--Q_KqL, .Button_btn--cWJeC.MuiButton-root {
    min-height: 56px;
  }
}
.Button_btn-primary--Q_KqL:hover, .Button_btn--cWJeC:hover.MuiButton-root {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}
.Button_btn-primary--Q_KqL:active, .Button_btn--cWJeC:active.MuiButton-root {
  background: var(--semantic-colour-interactive-light-focus);
  color: var(--semantic-colour-text-primary-white);
}
.Button_btn-primary--Q_KqL:disabled, .Button_btn--cWJeC:disabled.MuiButton-root {
  background: var(--semantic-colour-interactive-dark-disabled);
  color: var(--semantic-colour-text-primary-white);
  cursor: not-allowed;
}
.Button_btn-primary--Q_KqL:focus-visible, .Button_btn--cWJeC:focus-visible.MuiButton-root {
  outline: 2px solid var(--semantic-colour-interactive-light-focus);
  outline-offset: 2px;
}

.Button_btn--cWJeC.MuiButton-root {
  text-transform: none;
}

.Button_btnDark--hzoH_.MuiButton-root {
  background: var(--semantic-colour-background-white);
  color: var(--semantic-colour-text-primary-soil);
}
.Button_btnDark--hzoH_.MuiButton-root:hover {
  background: var(--semantic-colour-interactive-dark-hover);
  color: var(--semantic-colour-text-primary-white);
}
.Button_btnDark--hzoH_.MuiButton-root:active {
  background: var(--semantic-colour-interactive-dark-pressed);
  color: var(--semantic-colour-text-primary-white);
}
.Button_btnDark--hzoH_.MuiButton-root:focus-visible {
  outline: 2px solid var(--semantic-colour-text-primary-white);
  outline-offset: 2px;
}

.Button_iconLeft--W_gAB,
.Button_iconRight--cipoz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.Button_iconLeft--W_gAB .MuiSvgIcon-root,
.Button_iconRight--cipoz .MuiSvgIcon-root {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.Button_iconLeft--W_gAB svg:not(.MuiSvgIcon-root),
.Button_iconRight--cipoz svg:not(.MuiSvgIcon-root) {
  width: 16px;
  height: 16px;
  color: inherit;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Modal/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Modal_title--ft4R0 {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-xx-small);
  line-height: var(--typography-headline-1-line-height-mobile-xx-small);
}
@media (min-width: 1200px) {
  .Modal_title--ft4R0 {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-xx-small);
    line-height: var(--typography-headline-1-line-height-desktop-xx-small);
  }
}

.Modal_backdrop--Divft.MuiBackdrop-root {
  background-color: rgba(0, 0, 0, 0.4);
}

.Modal_paper--TxT8m.MuiDialog-paper {
  width: 600px;
  max-width: 90vw;
  max-height: calc(100vh - var(--spacing-64));
  border-radius: 8px;
  padding: var(--spacing-medium);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x-large);
  background-color: var(--semantic-colour-background-white);
  box-shadow: var(--elevation-widget-shadow);
  margin: 0;
  overflow: hidden;
}
@media (max-width: 599.95px) {
  .Modal_paper--TxT8m.MuiDialog-paper {
    max-width: calc(100vw - 32px);
  }
}

.Modal_header--c56fL {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.Modal_title--ft4R0 {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}

.Modal_closeButton--BSTcR {
  color: var(--semantic-colour-interactive-light-idle);
}
.Modal_closeButton--BSTcR svg:not(.MuiSvgIcon-root) {
  width: var(--spacing-24);
  height: var(--spacing-24);
}
.Modal_closeButton--BSTcR svg:not(.MuiSvgIcon-root) path {
  stroke: currentColor;
  stroke-width: 2px;
}

.Modal_body--Vb27P {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.Modal_footerWrapper--JD834 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  flex-shrink: 0;
}

.Modal_footer--Z2Wfr {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: var(--spacing-48);
  min-height: 36px;
}

.Modal_spinner--rhBn7 {
  color: var(--semantic-colour-text-primary-soil);
  margin-left: auto;
}
/*!*****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/SearchBar/index.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.SearchBar_searchWrapper--ErO1c {
  position: relative;
  width: 100%;
}

.SearchBar_searchWrapperMenu--HK1Ly {
  padding-bottom: var(--spacing-medium);
}

.SearchBar_searchInput--Fdh6Q.MuiOutlinedInput-root {
  border-radius: var(--semantic-border-radius-s);
  height: 56px;
  font-size: var(--typography-body-size-desktop-regular);
  color: var(--semantic-colour-text-primary-soil);
}
.SearchBar_searchInput--Fdh6Q.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-border-alt3);
  border-width: var(--semantic-border-width-s);
}
.SearchBar_searchInput--Fdh6Q.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--colour-soil-700);
}
.SearchBar_searchInput--Fdh6Q.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-interactive-light-idle);
  border-width: var(--semantic-border-width-focus);
}

.SearchBar_searchInputMenu--X1IKu.MuiOutlinedInput-root {
  padding-left: var(--spacing-16);
}
.SearchBar_searchInputMenu--X1IKu.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline, .SearchBar_searchInputMenu--X1IKu.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-border-alt3) !important;
}
.SearchBar_searchInputMenu--X1IKu.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-interactive-light-idle) !important;
}
.SearchBar_searchInputMenu--X1IKu.MuiOutlinedInput-root .MuiOutlinedInput-input::placeholder {
  color: var(--semantic-colour-text-primary-soil);
  opacity: 1;
}

.SearchBar_searchAdornmentMenu--TuxeK.MuiInputAdornment-root {
  margin-right: var(--spacing-16);
}

.SearchBar_searchIcon--dHuHw.MuiSvgIcon-root {
  color: var(--semantic-colour-icon-soil);
  font-size: var(--font-size-24);
}

.SearchBar_clearButton--yAm7f.MuiIconButton-root {
  color: var(--semantic-colour-text-primary-soil);
  padding: var(--spacing-xx-small);
}
.SearchBar_clearButton--yAm7f.MuiIconButton-root:hover {
  background-color: var(--semantic-colour-interactive-light-hover);
}

.SearchBar_clearIcon--qdAvZ.MuiSvgIcon-root {
  font-size: var(--font-size-20);
}

.SearchBar_searchLabel--WNKbg {
  position: absolute;
  top: calc(-1 * var(--spacing-10));
  left: var(--spacing-10);
  background-color: var(--semantic-colour-background-white);
  padding: 0 var(--spacing-xx-small);
  pointer-events: none;
}

.SearchBar_searchLabelText--p7hrM {
  font-size: var(--font-size-10);
  line-height: var(--font-line-height-18);
  color: var(--semantic-colour-text-primary-soil);
  white-space: nowrap;
}
/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Dashboard/LocationSelector/index.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.LocationSelector_triggerDrawer--cbWfe .LocationSelector_contextLabel--TJeDF,
.LocationSelector_triggerDrawer--cbWfe .LocationSelector_label--qsz7C, .LocationSelector_labelDrawer--dIsKV {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .LocationSelector_triggerDrawer--cbWfe .LocationSelector_contextLabel--TJeDF,
  .LocationSelector_triggerDrawer--cbWfe .LocationSelector_label--qsz7C, .LocationSelector_labelDrawer--dIsKV {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.LocationSelector_switchItemLabel--qWNi0, .LocationSelector_menuItemLabel--WK2XN.MuiTypography-root, .LocationSelector_confirmText--JCIjL {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .LocationSelector_switchItemLabel--qWNi0, .LocationSelector_menuItemLabel--WK2XN.MuiTypography-root, .LocationSelector_confirmText--JCIjL {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.LocationSelector_contextLabel--TJeDF, .LocationSelector_labelDefault--JVp3z {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .LocationSelector_contextLabel--TJeDF, .LocationSelector_labelDefault--JVp3z {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.LocationSelector_switchItemLabelSelected--S4l3W {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .LocationSelector_switchItemLabelSelected--S4l3W {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.LocationSelector_headerSelectorDivider--qow56.MuiDivider-root {
  align-self: center;
  height: 52px;
  border-right-width: var(--semantic-border-width-s);
  border-color: var(--semantic-colour-divider-border-dark-base);
}
@media (max-width: 1199.95px) {
  .LocationSelector_headerSelectorDivider--qow56.MuiDivider-root {
    display: none;
  }
}

.LocationSelector_trigger--a6nib {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-xx-small);
  padding: var(--spacing-0);
  max-width: 200px;
  height: 52px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--semantic-colour-text-primary-soil);
  overflow: visible;
  flex-shrink: 0;
}
.LocationSelector_trigger--a6nib:not(.LocationSelector_triggerDrawer--cbWfe):hover .LocationSelector_contextLabel--TJeDF, .LocationSelector_trigger--a6nib:not(.LocationSelector_triggerDrawer--cbWfe):hover .LocationSelector_label--qsz7C, .LocationSelector_trigger--a6nib.LocationSelector_triggerOpen--kXK1k:not(.LocationSelector_triggerDrawer--cbWfe) .LocationSelector_contextLabel--TJeDF, .LocationSelector_trigger--a6nib.LocationSelector_triggerOpen--kXK1k:not(.LocationSelector_triggerDrawer--cbWfe) .LocationSelector_label--qsz7C {
  font-weight: 700;
}
@media (max-width: 1199.95px) {
  .LocationSelector_trigger--a6nib {
    display: none;
  }
}

.LocationSelector_triggerContent--kB4oB {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xx-small);
  min-width: 0;
}

.LocationSelector_contextLabel--TJeDF {
  color: var(--semantic-colour-text-primary-soil);
}

.LocationSelector_valueRow--pms6Q {
  display: flex;
  align-items: center;
  gap: var(--spacing-xx-small);
  width: 100%;
  min-width: 0;
}

.LocationSelector_triggerLoading--wkai4 {
  cursor: default;
}

.LocationSelector_skeletonIcon--f61gh.MuiSkeleton-root {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: var(--semantic-colour-interactive-light-hover);
}

.LocationSelector_skeletonLabel--ySh2E.MuiSkeleton-root {
  flex: 1;
  height: var(--font-size-24);
  transform: none;
  background-color: var(--semantic-colour-interactive-light-hover);
}

.LocationSelector_triggerDrawer--cbWfe {
  width: 100%;
  max-width: none;
  height: auto;
  justify-content: space-between;
  gap: var(--spacing-x-small);
  padding: var(--spacing-small) var(--spacing-medium) var(--spacing-small) var(--spacing-x-large);
  overflow: visible;
  display: flex;
}
.LocationSelector_triggerDrawer--cbWfe .LocationSelector_triggerContent--kB4oB {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-x-small);
}
.LocationSelector_triggerDrawer--cbWfe .LocationSelector_valueRow--pms6Q {
  gap: var(--spacing-xx-small);
}
@media (max-width: 1199.95px) {
  .LocationSelector_triggerDrawer--cbWfe {
    display: flex;
  }
}
.LocationSelector_triggerDrawer--cbWfe:hover {
  opacity: 1;
}
.LocationSelector_triggerDrawer--cbWfe:hover .LocationSelector_contextLabel--TJeDF, .LocationSelector_triggerDrawer--cbWfe:hover .LocationSelector_label--qsz7C {
  text-decoration: underline;
}

.LocationSelector_locationIcon--w2ugJ {
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  overflow: visible;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
}

.LocationSelector_label--qsz7C {
  color: var(--semantic-colour-text-primary-soil);
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.LocationSelector_chevronContainer--up9O2 {
  display: flex;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 24px;
  flex-shrink: 0;
}

.LocationSelector_chevron--JVDJs {
  display: block;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
}

.LocationSelector_chevronOpen--_Xq2h {
  transform: rotate(180deg);
}

.LocationSelector_chevronDrawer--vVzMI.MuiSvgIcon-root {
  margin-left: auto;
  width: 48px;
  height: 48px;
  padding: var(--spacing-12);
  box-sizing: border-box;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.LocationSelector_switchList--ijbUY {
  display: flex;
  flex-direction: column;
}

.LocationSelector_switchItem--G1es4 {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-medium);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}
.LocationSelector_switchItem--G1es4:hover .LocationSelector_switchItemLabel--qWNi0 {
  text-decoration: underline;
}

.LocationSelector_switchItemLabel--qWNi0 {
  color: var(--semantic-colour-text-primary-soil);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.LocationSelector_switchCheckIcon--VFyOJ.MuiSvgIcon-root {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.LocationSelector_menuPaper--tsTit {
  margin-top: var(--spacing-medium);
  padding: var(--spacing-medium);
  width: 400px;
  border-radius: var(--semantic-border-radius-s);
  box-shadow: var(--semantic-elevation-overlay-mega-menu);
}

.LocationSelector_menuPaper--tsTit .LocationSelector_menuItem--rQ7Ln.MuiMenuItem-root:hover:not(.Mui-selected) {
  background-color: transparent !important;
}

.LocationSelector_menuItem--rQ7Ln.MuiMenuItem-root {
  padding: var(--spacing-xx-small) 0;
  gap: var(--spacing-medium);
}
.LocationSelector_menuItem--rQ7Ln.MuiMenuItem-root + .LocationSelector_menuItem--rQ7Ln.MuiMenuItem-root {
  margin-top: var(--spacing-xxx-small);
}

.LocationSelector_menuItem--rQ7Ln:hover .LocationSelector_menuItemLabel--WK2XN,
.LocationSelector_menuItemLabel--WK2XN.LocationSelector_menuItemLabelSelected--Tywga {
  font-weight: 700;
}

.LocationSelector_menuItemLabel--WK2XN.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.LocationSelector_menuItemLabel--WK2XN.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.LocationSelector_menuCheckIcon--tBEpL.MuiSvgIcon-root {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
  flex-shrink: 0;
}

.LocationSelector_confirmBody--YiptN {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x-small);
}

.LocationSelector_confirmText--JCIjL {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}
/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/MobileNavPanel/index.module.scss ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.MobileNavPanel_listItemLabel--VtOhQ, .MobileNavPanel_groupLink--TCj2m {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileNavPanel_listItemLabel--VtOhQ, .MobileNavPanel_groupLink--TCj2m {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileNavPanel_groupHeading--lZuT_ {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileNavPanel_groupHeading--lZuT_ {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileNavPanel_backLabel--f9HZL {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileNavPanel_backLabel--f9HZL {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileNavPanel_badge--pCQ3L {
  font-family: var(--typography-eyebrow-family-default);
  font-weight: 600;
  font-size: var(--typography-eyebrow-size-mobile-semi-bold);
  line-height: var(--typography-eyebrow-line-height-mobile-semi-bold);
  letter-spacing: 0;
}
@media (min-width: 1200px) {
  .MobileNavPanel_badge--pCQ3L {
    font-family: var(--typography-eyebrow-family-default);
    font-weight: 600;
    font-size: var(--typography-eyebrow-size-desktop-semi-bold);
    line-height: var(--typography-eyebrow-line-height-desktop-semi-bold);
    letter-spacing: 0;
  }
}

.MobileNavPanel_panel--UiiFd {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.MobileNavPanel_listItem--Qhgd7 {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileNavPanel_listItem--Qhgd7:hover .MobileNavPanel_listItemLabel--VtOhQ {
  text-decoration: underline;
}

.MobileNavPanel_listItemLabel--VtOhQ {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileNavPanel_topLevelLabel--TcTEZ,
.MobileNavPanel_lockedLabel--wa5Sf {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xx-small);
}

.MobileNavPanel_arrowRight--f_iVh {
  margin-left: auto;
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.MobileNavPanel_backRow--A22AX {
  width: 100%;
  padding: var(--spacing-x-small) var(--spacing-small) var(--spacing-x-small) var(--spacing-x-large);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-small);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileNavPanel_arrowLeft--EJvtB {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.MobileNavPanel_backLabel--f9HZL {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileNavPanel_groupsContainer--ZW46X {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  margin-top: var(--spacing-x-small);
}

.MobileNavPanel_group--kf7pi {
  display: flex;
  flex-direction: column;
}

.MobileNavPanel_groupHeading--lZuT_ {
  padding: var(--spacing-small) var(--spacing-x-large);
  border-bottom: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-light-base);
  color: var(--semantic-colour-text-primary-soil);
}

.MobileNavPanel_groupLink--TCj2m {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--semantic-colour-text-primary-soil);
}

.MobileNavPanel_groupLink--TCj2m:hover {
  text-decoration: underline;
}

.MobileNavPanel_childLink--v1zys {
  padding-left: calc(var(--spacing-x-large) + var(--spacing-medium));
}

.MobileNavPanel_badge--pCQ3L {
  margin-left: var(--spacing-xx-small);
  text-transform: uppercase;
}

.MobileNavPanel_locationFooter--InS69 {
  margin-top: auto;
  padding-top: var(--spacing-medium);
  padding-bottom: max(var(--spacing-small), env(safe-area-inset-bottom));
  flex-shrink: 0;
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/NewUiSwitch/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.NewUiSwitch_label--xRZhv {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .NewUiSwitch_label--xRZhv {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.NewUiSwitch_label--xRZhv {
  color: var(--semantic-colour-text-primary-soil);
}

.NewUiSwitch_switch--NGzL7 {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
  width: 36px;
  height: 18px;
}

.NewUiSwitch_switchOff--DZe6x {
  transform: scaleX(-1);
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/UserAvatar/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
.UserAvatar_avatar--NWGPH {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--semantic-border-radius-full);
  background: var(--semantic-colour-interactive-light-idle);
  color: var(--semantic-colour-text-primary-white);
  font-size: var(--typography-body-size-desktop-regular);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.UserAvatar_sizeMd--wOU7T {
  width: 56px;
  height: 56px;
}

.UserAvatar_sizeLg--UCyXm {
  width: 64px;
  height: 64px;
  font-size: var(--typography-body-size-desktop-large);
}

.UserAvatar_interactive--PSy1o {
  border: none;
  cursor: pointer;
}
.UserAvatar_interactive--PSy1o:hover {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}
.UserAvatar_interactive--PSy1o:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/MobileUserPanel/index.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.MobileUserPanel_accountItemName--nbyiI {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .MobileUserPanel_accountItemName--nbyiI {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.MobileUserPanel_listItemLabel--MYE1t {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileUserPanel_listItemLabel--MYE1t {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileUserPanel_userPanelName--YG9i3 {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileUserPanel_userPanelName--YG9i3 {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileUserPanel_accountItemSelected--yBdiw .MobileUserPanel_accountItemName--nbyiI {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .MobileUserPanel_accountItemSelected--yBdiw .MobileUserPanel_accountItemName--nbyiI {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.MobileUserPanel_backLabel--X5AhF {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileUserPanel_backLabel--X5AhF {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileUserPanel_panel--uHe9n {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.MobileUserPanel_listItem--FsCdM {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileUserPanel_listItem--FsCdM:hover .MobileUserPanel_listItemLabel--MYE1t {
  text-decoration: underline;
}

.MobileUserPanel_listItemLabel--MYE1t {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileUserPanel_arrowRight--hetH4 {
  margin-left: auto;
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.MobileUserPanel_backRow--AQxaT {
  width: 100%;
  padding: var(--spacing-x-small) var(--spacing-small) var(--spacing-x-small) var(--spacing-x-large);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-small);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileUserPanel_arrowLeft--lPv6d {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
}

.MobileUserPanel_backLabel--X5AhF {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileUserPanel_userPanelHeader--IM2eZ {
  display: flex;
  align-items: center;
  gap: var(--spacing-x-small);
  padding: var(--spacing-medium) var(--spacing-x-large);
  margin-bottom: var(--spacing-x-small);
}

.MobileUserPanel_userPanelName--YG9i3 {
  overflow-wrap: anywhere;
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
}

.MobileUserPanel_accountItem--Lurwi {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--spacing-medium);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileUserPanel_accountItemName--nbyiI {
  overflow-wrap: anywhere;
  color: var(--semantic-colour-text-primary-soil);
}

.MobileUserPanel_accountItemSelected--yBdiw .MobileUserPanel_accountItemName--nbyiI {
  color: var(--semantic-colour-interactive-light-idle);
}

.MobileUserPanel_accountCheckIcon--IqYD1 {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-24);
  flex-shrink: 0;
}

.MobileUserPanel_newUiToggleItem--WZ9bC {
  margin-top: auto;
  padding-top: var(--spacing-medium);
  padding-bottom: max(var(--spacing-small), env(safe-area-inset-bottom));
  flex-shrink: 0;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/MobileMenu/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.MobileMenu_listItemLabel--JlTQT, .MobileMenu_groupLink--eVJuj {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileMenu_listItemLabel--JlTQT, .MobileMenu_groupLink--eVJuj {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileMenu_groupHeading--HHkzX, .MobileMenu_userPanelName--lLzZ3 {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileMenu_groupHeading--HHkzX, .MobileMenu_userPanelName--lLzZ3 {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileMenu_notificationsTitle--t6wim {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .MobileMenu_notificationsTitle--t6wim {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.MobileMenu_backLabel--gWcMe, .MobileMenu_notificationsSettingsBtn--Unqty, .MobileMenu_notificationsItemTitle--QX5Vu, .MobileMenu_notificationsFooterBtn--wbxtv {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .MobileMenu_backLabel--gWcMe, .MobileMenu_notificationsSettingsBtn--Unqty, .MobileMenu_notificationsItemTitle--QX5Vu, .MobileMenu_notificationsFooterBtn--wbxtv {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.MobileMenu_overlay--OBNru {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: var(--semantic-colour-background-white);
  overflow: hidden;
  padding-top: 125px;
  /* Hidden state */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.MobileMenu_overlayOpen--YIobB {
  pointer-events: auto;
  opacity: 1;
}

.MobileMenu_panels--tbxyF {
  display: flex;
  width: 200%;
  height: 100%;
  transition: transform 0.25s ease;
}

.MobileMenu_panelsSlid--cbkID {
  transform: translateX(-50%);
}

.MobileMenu_listItem--XPtY4 {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileMenu_listItem--XPtY4:hover .MobileMenu_listItemLabel--JlTQT {
  text-decoration: underline;
}

.MobileMenu_listItemLabel--JlTQT {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_arrowRight--paLB2 {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 8px solid var(--semantic-colour-text-primary-soil);
}

.MobileMenu_backRow--utsfT {
  width: 100%;
  padding: var(--spacing-x-small) var(--spacing-small) var(--spacing-x-small) var(--spacing-x-large);
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  background: none;
  border: none;
  cursor: pointer;
}

.MobileMenu_arrowLeft--Kzs6R {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid var(--semantic-colour-text-primary-soil);
}

.MobileMenu_backLabel--gWcMe {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_groupsContainer--Gh7o8 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  margin-top: var(--spacing-x-small);
}

.MobileMenu_group--CMyA8 {
  display: flex;
  flex-direction: column;
}

.MobileMenu_groupHeading--HHkzX {
  padding: var(--spacing-small) var(--spacing-x-large);
  border-bottom: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-light-base);
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_groupLink--eVJuj {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_groupLink--eVJuj:hover {
  text-decoration: underline;
}

.MobileMenu_userPanelHeader--bkq6L {
  display: flex;
  align-items: center;
  gap: var(--spacing-x-small);
  padding: var(--spacing-medium) var(--spacing-x-large);
  border-bottom: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-light-base);
  margin-bottom: var(--spacing-x-small);
}

.MobileMenu_userPanelAvatar--Fojcx {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--semantic-border-radius-full);
  background: var(--semantic-colour-interactive-light-idle);
  color: var(--semantic-colour-text-primary-white);
  font-size: var(--font-size-17);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}

.MobileMenu_userPanelName--lLzZ3 {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_accountItem--aIQGx {
  width: 100%;
  padding: var(--spacing-small) var(--spacing-x-large);
  display: flex;
  align-items: center;
  gap: var(--spacing-x-small);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
}

.MobileMenu_accountItemName--oaNsW {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-14);
  font-weight: 500;
  line-height: var(--font-line-height-22);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.MobileMenu_accountItemRef--Lm2fa {
  color: var(--semantic-colour-text-primary-subtitle);
  font-size: var(--font-size-13);
  line-height: var(--font-line-height-21);
  flex-shrink: 0;
}

.MobileMenu_accountCheckIcon--yMzgF {
  color: var(--semantic-colour-text-primary-soil);
  font-size: 16px;
  flex-shrink: 0;
}

.MobileMenu_notificationsPanel--F1xMr {
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
  overflow-y: auto;
  padding: 0 36px 36px;
}

.MobileMenu_notificationsHeader--c1udo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
}

.MobileMenu_notificationsTitle--t6wim {
  color: var(--semantic-colour-text-primary-soil);
  line-height: var(--font-line-height-21);
}

.MobileMenu_notificationsSettingsBtn--Unqty {
  padding: 8px 0;
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
  min-width: 0;
}

.MobileMenu_notificationsSettingsBtn--Unqty.MuiButton-root {
  font-size: var(--typography-body-size-desktop-regular);
  font-weight: 700;
  line-height: var(--font-line-height-24);
  text-transform: none;
}

.MobileMenu_notificationsList--jngFN {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.MobileMenu_notificationsDivider--Pa3No {
  border-color: var(--semantic-colour-divider-border-light-base);
  margin: 0;
}

.MobileMenu_notificationsItem--rzkC9 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.MobileMenu_notificationsUnreadWrap--PY9va {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.MobileMenu_notificationsUnreadDot--K5Pok {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--semantic-colour-status-info);
}

.MobileMenu_notificationsIconWrap--a_W9p {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--semantic-colour-text-primary-soil);
}
.MobileMenu_notificationsIconWrap--a_W9p svg {
  font-size: 18px;
}

.MobileMenu_notificationsContent--CnW_V {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.MobileMenu_notificationsItemTitle--QX5Vu {
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_notificationsItemMessage--NL6tv {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
}

.MobileMenu_notificationsItemTimestamp--IVaiT {
  color: var(--semantic-colour-text-primary-alt2);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
}

.MobileMenu_notificationsMoreBtn--rfnsy {
  width: 24px;
  height: 24px;
  padding: 0;
  flex-shrink: 0;
  color: var(--semantic-colour-text-primary-soil);
}

.MobileMenu_notificationsMoreIcon--w4lsn {
  font-size: 16px;
}

.MobileMenu_notificationsFooterBtn--wbxtv {
  align-self: center;
  padding: 8px 0;
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
  min-width: 0;
}

.MobileMenu_notificationsFooterBtn--wbxtv.MuiButton-root {
  font-size: var(--typography-body-size-desktop-regular);
  font-weight: 700;
  line-height: var(--font-line-height-24);
  text-transform: none;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/AvatarMenu/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.AvatarMenu_menuItemLabel--zlxQY.MuiTypography-root, .AvatarMenu_menuItemLabelLogout--kSwJb.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .AvatarMenu_menuItemLabel--zlxQY.MuiTypography-root, .AvatarMenu_menuItemLabelLogout--kSwJb.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.AvatarMenu_userMenuEmail--aE35j.MuiTypography-root,
.AvatarMenu_userMenuBusiness--rviDO.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .AvatarMenu_userMenuEmail--aE35j.MuiTypography-root,
  .AvatarMenu_userMenuBusiness--rviDO.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.AvatarMenu_userMenuName--R2G3w.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .AvatarMenu_userMenuName--R2G3w.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.AvatarMenu_avatarTrigger--Pzb_M.MuiButton-root {
  min-width: 0;
  width: 40px;
  height: 40px;
  padding: var(--spacing-0);
  border-radius: var(--semantic-border-radius-full);
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
  gap: var(--spacing-x-small);
}

.AvatarMenu_avatarTrigger--Pzb_M.MuiButton-root:hover {
  background-color: transparent;
}

.AvatarMenu_avatarTrigger--Pzb_M.MuiButton-root:hover .AvatarMenu_headerAvatar--vAhMi {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}

.AvatarMenu_avatarTrigger--Pzb_M.MuiButton-root:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.AvatarMenu_chevronIcon--KOE5H {
  font-size: 20px;
}

@media (max-width: 1199.95px) {
  .AvatarMenu_avatarTrigger--Pzb_M.MuiButton-root {
    display: none;
  }
}
.AvatarMenu_userMenuPaper--SqU0B {
  margin-top: var(--spacing-xx-small);
  padding: var(--spacing-medium);
  min-width: 320px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
  border-radius: var(--semantic-border-radius-s);
}

.AvatarMenu_userMenuHeader--rSlZL {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-x-small);
  padding: var(--spacing-medium) 0;
}

.AvatarMenu_userMenuInfo--YSPH8 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xx-small);
  min-width: 0;
}

.AvatarMenu_userMenuName--R2G3w.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
}

.AvatarMenu_userMenuSubtext--l30p1 {
  display: flex;
  flex-direction: column;
}

.AvatarMenu_userMenuEmail--aE35j.MuiTypography-root,
.AvatarMenu_userMenuBusiness--rviDO.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
}

.AvatarMenu_userMenuItem--yQgHw {
  padding: var(--spacing-xx-small) 0;
  gap: var(--spacing-4);
  color: var(--semantic-colour-text-primary-soil);
}

.AvatarMenu_userMenuPaper--SqU0B .AvatarMenu_userMenuItem--yQgHw.MuiMenuItem-root:hover:not(.Mui-selected) {
  background-color: transparent !important;
}

.AvatarMenu_userMenuPaper--SqU0B .AvatarMenu_userMenuItem--yQgHw.MuiMenuItem-root:hover .AvatarMenu_menuItemLabel--zlxQY.MuiTypography-root,
.AvatarMenu_userMenuPaper--SqU0B .AvatarMenu_userMenuItem--yQgHw.MuiMenuItem-root:hover .AvatarMenu_menuItemLabelLogout--kSwJb.MuiTypography-root {
  font-weight: 700;
}

.AvatarMenu_menuItemLabel--zlxQY.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
}
.AvatarMenu_menuItemLabel--zlxQY.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.AvatarMenu_menuItemLabelLogout--kSwJb.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/BusinessSwitcher/index.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.BusinessSwitcher_accountLabel--ZOyw6.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .BusinessSwitcher_accountLabel--ZOyw6.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.BusinessSwitcher_trigger--qjGUR, .BusinessSwitcher_triggerName--iXuOC,
.BusinessSwitcher_triggerReference--jU7l8 {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .BusinessSwitcher_trigger--qjGUR, .BusinessSwitcher_triggerName--iXuOC,
  .BusinessSwitcher_triggerReference--jU7l8 {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.BusinessSwitcher_trigger--qjGUR.MuiButton-root {
  min-width: 0;
  height: 52px;
  padding: var(--spacing-0);
  border-radius: var(--semantic-border-radius-xs);
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
  text-transform: none;
  gap: var(--spacing-xx-small);
}

.BusinessSwitcher_trigger--qjGUR.MuiButton-root:hover {
  background-color: transparent;
}

.BusinessSwitcher_trigger--qjGUR.MuiButton-root:hover .BusinessSwitcher_triggerName--iXuOC,
.BusinessSwitcher_trigger--qjGUR.MuiButton-root:hover .BusinessSwitcher_triggerReference--jU7l8,
.BusinessSwitcher_triggerOpen--NpGnV.MuiButton-root .BusinessSwitcher_triggerName--iXuOC,
.BusinessSwitcher_triggerOpen--NpGnV.MuiButton-root .BusinessSwitcher_triggerReference--jU7l8 {
  font-weight: 700;
}

.BusinessSwitcher_trigger--qjGUR.MuiButton-root:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.BusinessSwitcher_triggerText--yTCSJ {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xx-small);
  text-transform: none;
}

.BusinessSwitcher_trigger--qjGUR.MuiButton-root .MuiButton-endIcon {
  align-self: stretch;
  align-items: center;
  justify-content: center;
  width: 24px;
  margin: var(--spacing-0);
}

.BusinessSwitcher_triggerName--iXuOC,
.BusinessSwitcher_triggerReference--jU7l8 {
  display: block;
  white-space: nowrap;
}
.BusinessSwitcher_triggerName--iXuOC::after,
.BusinessSwitcher_triggerReference--jU7l8::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.BusinessSwitcher_triggerName--iXuOC {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.BusinessSwitcher_chevronIcon--gTJcQ {
  font-size: 20px;
}

@media (max-width: 1199.95px) {
  .BusinessSwitcher_trigger--qjGUR.MuiButton-root {
    display: none;
  }
}
.BusinessSwitcher_menuPaper--IoLQo {
  margin-top: var(--spacing-medium);
  padding: var(--spacing-medium);
  width: 368px;
  border-radius: var(--semantic-border-radius-s);
  box-shadow: var(--semantic-elevation-overlay-mega-menu);
}

.BusinessSwitcher_accountItem--jB9C6.MuiMenuItem-root {
  padding: var(--spacing-xx-small) 0;
  gap: var(--spacing-medium);
}
.BusinessSwitcher_accountItem--jB9C6.MuiMenuItem-root + .BusinessSwitcher_accountItem--jB9C6.MuiMenuItem-root {
  margin-top: var(--spacing-xxx-small);
}

.BusinessSwitcher_menuPaper--IoLQo .BusinessSwitcher_accountItem--jB9C6.MuiMenuItem-root:hover:not(.Mui-selected) {
  background-color: transparent !important;
}

.BusinessSwitcher_accountItem--jB9C6:hover .BusinessSwitcher_accountLabel--ZOyw6,
.BusinessSwitcher_accountLabel--ZOyw6.BusinessSwitcher_accountLabelSelected--mqRyh {
  font-weight: 700;
}

.BusinessSwitcher_accountLabel--ZOyw6.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.BusinessSwitcher_accountLabel--ZOyw6.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.BusinessSwitcher_checkIcon--zawgW.MuiSvgIcon-root {
  color: var(--semantic-colour-icon-soil);
  font-size: var(--font-size-24);
  flex-shrink: 0;
}

.BusinessSwitcher_accountItemSelected--PcNtJ.MuiMenuItem-root {
  cursor: default;
}

.BusinessSwitcher_currentGroup--YVTqM {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-x-small);
  margin-left: auto;
  flex-shrink: 0;
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/LogoutConfirmModal/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.LogoutConfirmModal_text--Elfwl {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .LogoutConfirmModal_text--Elfwl {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.LogoutConfirmModal_text--Elfwl {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}
/*!***************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/ChangePasswordModal/index.module.scss ***!
  \***************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.ChangePasswordModal_body--kkxDU {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .ChangePasswordModal_body--kkxDU {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.ChangePasswordModal_body--kkxDU {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/SettingsModal/index.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.SettingsModal_sectionLabel--f2jKy, .SettingsModal_textField--bPSUa .MuiInputBase-input, .SettingsModal_textField--bPSUa .MuiInputLabel-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .SettingsModal_sectionLabel--f2jKy, .SettingsModal_textField--bPSUa .MuiInputBase-input, .SettingsModal_textField--bPSUa .MuiInputLabel-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.SettingsModal_passwordMessage--MxecE, .SettingsModal_saveError--DnOsZ {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .SettingsModal_passwordMessage--MxecE, .SettingsModal_saveError--DnOsZ {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.MuiDialog-root .SettingsModal_paper--Q2LNV.MuiDialog-paper {
  width: 496px;
}

.SettingsModal_content--p2EnM {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x-large);
}

.SettingsModal_section--lDQ6C {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-medium);
}

.SettingsModal_sectionLabel--f2jKy {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}

.SettingsModal_changePasswordBtn--NXwij.MuiButton-root {
  align-self: flex-start;
}

.SettingsModal_passwordAction--QgUbd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-xx-small);
}

.SettingsModal_passwordMessage--MxecE {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}

.SettingsModal_passwordError--sjwO9 {
  color: var(--semantic-colour-status-error);
}

.SettingsModal_saveError--DnOsZ {
  color: var(--semantic-colour-status-error);
  margin: 0;
}

.SettingsModal_textField--bPSUa {
  font-family: inherit;
}
.SettingsModal_textField--bPSUa .MuiInputBase-input {
  color: var(--semantic-colour-text-primary-soil);
  font-family: inherit;
}
.SettingsModal_textField--bPSUa .MuiInputLabel-root {
  color: var(--semantic-colour-text-primary-alt2);
  font-family: inherit;
}
.SettingsModal_textField--bPSUa .MuiInputLabel-shrink {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-10);
}
.SettingsModal_textField--bPSUa .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-border-alt3);
  border-radius: var(--semantic-border-radius-s);
}
.SettingsModal_textField--bPSUa .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-text-primary-soil);
}
.SettingsModal_textField--bPSUa .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
  border-color: var(--semantic-colour-text-primary-soil);
  border-width: var(--semantic-border-width-focus);
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/BusinessSummaryOverlay/index.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.BusinessSummaryOverlay_fieldValue--mxd_Q {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .BusinessSummaryOverlay_fieldValue--mxd_Q {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.BusinessSummaryOverlay_sectionTitle--mlAZP {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .BusinessSummaryOverlay_sectionTitle--mlAZP {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.BusinessSummaryOverlay_fieldLabel--G2A85 {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .BusinessSummaryOverlay_fieldLabel--G2A85 {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.BusinessSummaryOverlay_body--BWLFt {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}

.BusinessSummaryOverlay_sectionHeader--oojnI {
  display: flex;
  align-items: center;
  gap: var(--spacing-xx-small);
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
}

.BusinessSummaryOverlay_chevron--VgvRg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.BusinessSummaryOverlay_chevron--VgvRg .MuiSvgIcon-root {
  color: var(--semantic-colour-icon-soil);
  transition: transform 0.2s ease;
}

.BusinessSummaryOverlay_chevronOpen--vM73i .MuiSvgIcon-root {
  transform: rotate(90deg);
}

.BusinessSummaryOverlay_sectionTitle--mlAZP {
  color: var(--semantic-colour-text-primary-soil);
}

.BusinessSummaryOverlay_sectionFields--Vmdmc {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-x-small);
  width: 100%;
}

.BusinessSummaryOverlay_field--oe6dh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-xx-small);
  width: 100%;
}

.BusinessSummaryOverlay_fieldText--l9tDb {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xx-small);
  flex: 1;
  min-width: 0;
}

.BusinessSummaryOverlay_fieldLabel--G2A85 {
  color: var(--semantic-colour-text-primary-alt2);
}

.BusinessSummaryOverlay_fieldValue--mxd_Q {
  color: var(--semantic-colour-text-primary-soil);
  word-break: break-word;
}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/AccessModal/index.module.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.AccessModal_body--jtt5m {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .AccessModal_body--jtt5m {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.AccessModal_message--sx9Fn {
  max-width: 500px;
  text-align: center;
}

.AccessModal_body--jtt5m {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Toast/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Toast_body--vXDYG {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .Toast_body--vXDYG {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.Toast_title--Cr4AP {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Toast_title--Cr4AP {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Toast_viewport--Wz2LH {
  position: fixed;
  right: var(--spacing-medium);
  bottom: var(--spacing-medium);
  z-index: 1400;
  pointer-events: none;
}

.Toast_toast--fpmx4 {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
  max-width: 536px;
  max-width: calc(100vw - 2 * var(--spacing-medium));
  padding: var(--spacing-medium);
  color: var(--semantic-colour-text-primary-soil);
  pointer-events: auto;
  border: var(--semantic-border-width-s) solid transparent;
  border-radius: var(--semantic-border-radius-m);
  box-shadow: var(--elevation-widget-shadow);
}

.Toast_success--l_lVz {
  background: var(--colour-green-100);
  border-color: var(--semantic-colour-status-success);
}
.Toast_success--l_lVz .Toast_icon--woQ0y {
  color: var(--semantic-colour-status-success);
}
.Toast_success--l_lVz .Toast_closeButton--nS9Wv:hover {
  background: var(--colour-green-200);
}

.Toast_info--NOBdu {
  background: var(--colour-blue-100);
}
.Toast_info--NOBdu .Toast_icon--woQ0y {
  color: var(--semantic-colour-status-info);
}
.Toast_info--NOBdu .Toast_closeButton--nS9Wv:hover {
  background: var(--colour-blue-200);
}

.Toast_warning--dhkSw {
  background: var(--colour-orange-100);
}
.Toast_warning--dhkSw .Toast_icon--woQ0y {
  color: var(--semantic-colour-status-warning);
}
.Toast_warning--dhkSw .Toast_closeButton--nS9Wv:hover {
  background: var(--colour-orange-200);
}

.Toast_error--n6KnK {
  background: var(--colour-red-100);
  border-color: var(--semantic-colour-status-error);
}
.Toast_error--n6KnK .Toast_icon--woQ0y {
  color: var(--semantic-colour-status-error);
}
.Toast_error--n6KnK .Toast_closeButton--nS9Wv:hover {
  background: var(--colour-red-150);
}

.Toast_icon--woQ0y {
  flex: 0 0 var(--spacing-48);
  width: var(--spacing-48);
  height: var(--spacing-48);
}

.Toast_content--c4zQe {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-8);
  min-width: 0;
  overflow-wrap: break-word;
}

.Toast_title--Cr4AP {
  margin: 0;
}

.Toast_closeButton--nS9Wv {
  display: flex;
  flex: 0 0 var(--spacing-40);
  align-items: center;
  justify-content: center;
  width: var(--spacing-40);
  height: var(--spacing-40);
  padding: 0;
  color: var(--semantic-colour-text-primary-soil);
  cursor: pointer;
  background: transparent;
  border: 0;
  border-radius: var(--semantic-border-radius-s);
}
.Toast_closeButton--nS9Wv:focus-visible {
  outline: var(--semantic-border-width-focus) solid var(--semantic-colour-interactive-light-focus);
  outline-offset: var(--spacing-2);
}
.Toast_closeButton--nS9Wv svg {
  display: block;
  width: var(--spacing-40);
  height: var(--spacing-40);
}
/*!****************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/RichText/index.module.scss ***!
  \****************************************************************************************************************************************************************************************************************************************************/
.RichText_richText--VC4Bu {
  color: var(--beta-brown);
  font-family: var(--beta-font);
}
.RichText_richText--VC4Bu a {
  color: var(--beta-info);
  text-decoration: underline;
}
.RichText_richText--VC4Bu p {
  margin: 0 0 16px;
}
.RichText_richText--VC4Bu p:last-child {
  margin-bottom: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/PromotionModal/index.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.PromotionModal_description--QkVI5 {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .PromotionModal_description--QkVI5 {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.PromotionModal_descriptionTitle--Fc0ng, .PromotionModal_counter--eSz2K {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .PromotionModal_descriptionTitle--Fc0ng, .PromotionModal_counter--eSz2K {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.PromotionModal_paper--GZYw2.MuiDialog-paper {
  width: var(--spacing-640);
  max-width: calc(100vw - var(--spacing-32));
}

.PromotionModal_content--CoWy4 {
  display: flex;
  flex-direction: column;
}

.PromotionModal_image--qiC8h {
  width: 100%;
  aspect-ratio: 592/376;
  flex-shrink: 0;
  border-radius: var(--semantic-border-radius-s);
  object-fit: cover;
  background-color: var(--semantic-colour-background-stone);
}

.PromotionModal_dots--wSkSw {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-20);
  margin-top: var(--spacing-16);
}

.PromotionModal_dotsWithoutTitle--TF4k0 {
  margin-bottom: var(--spacing-medium);
}

.PromotionModal_dot--ya9tG {
  width: var(--spacing-12);
  height: var(--spacing-12);
  flex: 0 0 var(--spacing-12);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--semantic-colour-interactive-light-idle);
  opacity: 0.2;
  cursor: pointer;
}

.PromotionModal_dotActive--uG35x {
  opacity: 1;
}

.PromotionModal_description--QkVI5 {
  align-self: stretch;
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}

.PromotionModal_descriptionTitle--Fc0ng {
  align-self: stretch;
  color: var(--semantic-colour-text-primary-soil);
  margin: var(--spacing-24) 0 var(--spacing-xx-small);
}

.PromotionModal_description--QkVI5 p {
  margin: var(--spacing-8) 0 0;
}

.PromotionModal_description--QkVI5 p:first-child {
  margin-top: 0;
}

.PromotionModal_footer--m_Oag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
  gap: var(--spacing-24);
}

.PromotionModal_counter--eSz2K {
  color: var(--semantic-colour-text-primary-soil);
  text-align: center;
}

.PromotionModal_actions--wGSzO {
  display: flex;
  align-items: center;
  gap: var(--spacing-48);
}

.PromotionModal_actionButton--v0As1.MuiButton-root {
  color: var(--semantic-colour-interactive-light-idle);
}

.PromotionModal_nextArrow--TNU0H {
  display: inline-flex;
  width: var(--spacing-24);
  height: var(--spacing-24);
  align-items: center;
  justify-content: center;
  color: var(--semantic-colour-interactive-light-idle);
}

.PromotionModal_nextArrow--TNU0H svg {
  width: var(--spacing-8);
  height: var(--spacing-12);
}
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Header/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Header_navButton--h615C, .Header_menuItemLabel--A1Y2b.MuiTypography-root, .Header_menuItemLabelLogout--pnuVx.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Header_navButton--h615C, .Header_menuItemLabel--A1Y2b.MuiTypography-root, .Header_menuItemLabelLogout--pnuVx.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Header_newUiControl--Z2VKv.MuiButton-root, .Header_userButton--w9sN7, .Header_userButtonRef--g8HtV, .Header_userMenuEmail--bilOG.MuiTypography-root,
.Header_userMenuBusiness--cYAnC.MuiTypography-root, .Header_accountItemRef--JHfeh.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .Header_newUiControl--Z2VKv.MuiButton-root, .Header_userButton--w9sN7, .Header_userButtonRef--g8HtV, .Header_userMenuEmail--bilOG.MuiTypography-root,
  .Header_userMenuBusiness--cYAnC.MuiTypography-root, .Header_accountItemRef--JHfeh.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.Header_accountItemName--atL8M.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .Header_accountItemName--atL8M.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.Header_newUiControl--Z2VKv.MuiButton-root:hover .Header_newUiLabel--KU7_c, .Header_userMenuName--ChQN4.MuiTypography-root, .Header_userMenuPaper--LXKxO .Header_userMenuItem--v_IMI.MuiMenuItem-root:hover .Header_menuItemLabel--A1Y2b.MuiTypography-root,
.Header_userMenuPaper--LXKxO .Header_userMenuItem--v_IMI.MuiMenuItem-root:hover .Header_menuItemLabelLogout--pnuVx.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Header_newUiControl--Z2VKv.MuiButton-root:hover .Header_newUiLabel--KU7_c, .Header_userMenuName--ChQN4.MuiTypography-root, .Header_userMenuPaper--LXKxO .Header_userMenuItem--v_IMI.MuiMenuItem-root:hover .Header_menuItemLabel--A1Y2b.MuiTypography-root,
  .Header_userMenuPaper--LXKxO .Header_userMenuItem--v_IMI.MuiMenuItem-root:hover .Header_menuItemLabelLogout--pnuVx.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Header_userButton--w9sN7.MuiButton-root:hover .Header_stableHoverLabel--y_966,
.Header_userButton--w9sN7.MuiButton-root:hover .Header_userButtonRef--g8HtV, .Header_userMenuPaper--LXKxO .Header_accountSubItem--UMyAQ.MuiMenuItem-root:hover .Header_accountItemName--atL8M.MuiTypography-root {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .Header_userButton--w9sN7.MuiButton-root:hover .Header_stableHoverLabel--y_966,
  .Header_userButton--w9sN7.MuiButton-root:hover .Header_userButtonRef--g8HtV, .Header_userMenuPaper--LXKxO .Header_accountSubItem--UMyAQ.MuiMenuItem-root:hover .Header_accountItemName--atL8M.MuiTypography-root {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.Header_headerBar--D2JAi {
  background-color: var(--semantic-colour-background-white);
  border-bottom: var(--semantic-border-width-s) solid var(--semantic-colour-divider-border-dark-base);
  color: var(--semantic-colour-text-primary-soil);
  padding: var(--spacing-large);
  gap: var(--spacing-x-large);
}
@media (max-width: 599.95px) {
  .Header_headerBar--D2JAi {
    height: 100px;
    padding: var(--spacing-large) var(--spacing-small);
  }
}

.Header_topRow--Oj9Dq {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 52px;
}

.Header_logoLink--ILDmN {
  display: flex;
  text-decoration: none;
  flex-shrink: 0;
}

.Header_logo--QCHux {
  width: 180px;
  height: auto;
  display: block;
  color: var(--semantic-colour-text-primary-soil);
}
@media (max-width: 599.95px) {
  .Header_logo--QCHux {
    width: 168px;
    height: var(--spacing-52);
  }
}

.Header_rightActions--bCPRA {
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
  min-height: 52px;
}

.Header_topRowDivider--ESnSP.MuiDivider-root {
  align-self: center;
  height: 52px;
  border-right-width: var(--semantic-border-width-s);
  border-color: var(--semantic-colour-divider-border-dark-base);
}

.Header_topRowDivider--ESnSP:first-child {
  display: none;
}

.Header_newUiControl--Z2VKv.MuiButton-root {
  display: flex;
  align-items: center;
  gap: var(--spacing-x-small);
  min-width: 0;
  padding: var(--spacing-6) var(--spacing-8);
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
}
@media (max-width: 1199.95px) {
  .Header_newUiControl--Z2VKv.MuiButton-root {
    display: none;
  }
}

.Header_newUiControl--Z2VKv.MuiButton-root:hover {
  background-color: transparent;
}

.Header_newUiControl--Z2VKv.MuiButton-root:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.Header_newUiIcon--cDvoF.MuiSvgIcon-root {
  font-size: var(--font-size-24);
}

.Header_iconButton--OqNR_.MuiIconButton-root:hover {
  background-color: var(--semantic-colour-interactive-light-hover);
}

.Header_iconButton--OqNR_:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.Header_userButton--w9sN7.MuiButton-root {
  min-width: 0;
  padding: var(--spacing-6) var(--spacing-8);
  border-radius: var(--semantic-border-radius-xs);
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--typography-body-size-desktop-small);
  line-height: var(--font-line-height-22);
}

.Header_userButton--w9sN7.MuiButton-root:hover {
  background-color: transparent;
}

.Header_userButton--w9sN7.MuiButton-root:hover .Header_headerAvatar--YaCkS {
  background: var(--semantic-colour-interactive-light-hover);
  color: var(--semantic-colour-text-primary-soil);
}

.Header_userButton--w9sN7.MuiButton-root:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.Header_userButtonContent--gJosJ {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-x-small);
}

.Header_userButtonText--BM_5j {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.Header_notificationBadge--YDu3S.MuiBadge-badge {
  background-color: var(--semantic-colour-interactive-light-idle);
  color: var(--semantic-colour-text-primary-white);
  font-size: var(--typography-body-size-desktop-small);
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: var(--semantic-border-radius-full);
  padding: 0 var(--spacing-xx-small);
}

.Header_stableHoverLabel--y_966 {
  display: inline-block;
  text-transform: none;
}

.Header_navLabelWithLock--BiI8y {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xx-small);
}

.Header_stableHoverLabel--y_966::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.Header_navRow--fuCni {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
}

.Header_navItem--P0yVl {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.Header_navButton--h615C {
  min-width: 0;
  padding: 0 var(--spacing-x-small);
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
}

.Header_navButton--h615C.MuiButton-root {
  font-size: var(--typography-body-size-desktop-regular);
  line-height: var(--font-line-height-24);
  text-transform: none;
}

.Header_overviewNavButton--nw5Xq {
  padding-left: 0;
}

.Header_navButton--h615C:hover {
  background-color: transparent;
}

.Header_navButton--h615C:hover .Header_stableHoverLabel--y_966,
.Header_navButtonOpen--VwYMO .Header_stableHoverLabel--y_966 {
  font-weight: 700;
}

.Header_navButton--h615C:focus-visible {
  outline: 2px solid var(--semantic-colour-status-info);
  outline-offset: 2px;
}

.Header_chevronIcon--JK5oA {
  font-size: 20px;
}

.Header_menuPaper--Jo3zJ.MuiPaper-root {
  margin-top: var(--spacing-xx-small);
  background: var(--semantic-colour-background-white);
  box-shadow: var(--semantic-elevation-overlay-mega-menu);
  padding: 0;
  border-radius: var(--semantic-border-radius-s);
  overflow: visible;
}

.Header_menuList--q7Kmz.MuiList-root {
  padding: 0;
}

.Header_userMenuPaper--LXKxO {
  margin-top: var(--spacing-xx-small);
  padding: var(--spacing-medium);
  min-width: 320px;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
  border-radius: var(--semantic-border-radius-s);
}

.Header_userMenuHeader--SjYOO {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-x-small);
  padding: var(--spacing-medium) 0;
}

.Header_userMenuInfo--_v8r5 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xx-small);
  min-width: 0;
}

.Header_userMenuName--ChQN4.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  text-transform: none;
}

.Header_userMenuSubtext--kAZTo {
  display: flex;
  flex-direction: column;
}

.Header_userMenuEmail--bilOG.MuiTypography-root,
.Header_userMenuBusiness--cYAnC.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
}

.Header_userMenuItem--v_IMI {
  padding: var(--spacing-xx-small) 0;
  gap: var(--spacing-4);
  color: var(--semantic-colour-text-primary-soil);
}

.Header_userMenuPaper--LXKxO .Header_userMenuItem--v_IMI.MuiMenuItem-root:hover:not(.Mui-selected),
.Header_userMenuPaper--LXKxO .Header_accountSubItem--UMyAQ.MuiMenuItem-root:hover:not(.Mui-selected) {
  background-color: transparent !important;
}

.Header_menuItemIcon--FNnWt.MuiListItemIcon-root {
  min-width: 32px;
  color: var(--semantic-colour-text-primary-soil);
}

.Header_menuItemLabel--A1Y2b.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
}
.Header_menuItemLabel--A1Y2b.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.Header_accordionChevron--D6MOT {
  font-size: var(--spacing-18);
  color: var(--semantic-colour-text-primary-soil);
  flex-shrink: 0;
}

.Header_accountSubItem--UMyAQ.MuiMenuItem-root {
  padding: var(--spacing-xx-small) var(--spacing-medium);
  gap: var(--spacing-xx-small);
}

.Header_accountItemText--E275J {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.Header_accountItemName--atL8M.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.Header_accountItemName--atL8M.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.Header_accountItemRef--JHfeh.MuiTypography-root {
  color: var(--semantic-colour-text-primary-soil);
  opacity: 0.6;
}

.Header_checkIcon--BJsqQ.MuiSvgIcon-root {
  color: var(--semantic-colour-text-primary-soil);
  font-size: var(--font-size-16);
  flex-shrink: 0;
}

.Header_menuItemLabelLogout--pnuVx.MuiTypography-root::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 700;
  pointer-events: none;
}

.Header_burgerButton--djeIB {
  display: none;
}

.Header_mobileAvatarButton--Pkep6 {
  display: none;
}

@media (max-width: 1199.95px) {
  .Header_topRowDivider--ESnSP {
    display: none;
  }
  .Header_burgerButton--djeIB {
    display: flex;
  }
  .Header_mobileAvatarButton--Pkep6 {
    display: flex;
  }
  .Header_navRow--fuCni {
    display: none;
  }
  .Header_newUiControl--Z2VKv {
    display: none;
  }
  .Header_userButton--w9sN7.MuiButton-root {
    display: none;
  }
}
/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Footer/AccordionColumn/index.module.scss ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.AccordionColumn_footerLink--nnzic {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .AccordionColumn_footerLink--nnzic {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.AccordionColumn_columnHeading--uxWBw {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .AccordionColumn_columnHeading--uxWBw {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.AccordionColumn_columnHeading--uxWBw {
  color: var(--semantic-colour-background-white);
  margin-bottom: 0;
}

.AccordionColumn_linkItem--QDZAw {
  padding: var(--spacing-small) 0;
}

.AccordionColumn_footerLink--nnzic {
  color: var(--semantic-colour-text-primary-white);
  transition: color 0.2s ease;
}
.AccordionColumn_footerLink--nnzic:hover {
  color: var(--semantic-colour-text-primary-stone);
}

.AccordionColumn_accordionTrigger--Wep2Z {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--spacing-x-small) 0;
  box-sizing: border-box;
}
.AccordionColumn_accordionTrigger--Wep2Z .AccordionColumn_columnHeading--uxWBw {
  margin-bottom: 0;
}

.AccordionColumn_accordionIcon--tsVGP {
  color: var(--semantic-colour-text-primary-white);
  font-size: var(--font-size-17);
  flex-shrink: 0;
}

.AccordionColumn_accordionList--ZGU4u {
  padding-bottom: var(--spacing-small);
}

.AccordionColumn_accordionDivider--LBZ1v {
  display: none;
}
/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Footer/LinkColumn/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.LinkColumn_footerLink--uFGZh {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .LinkColumn_footerLink--uFGZh {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.LinkColumn_columnHeading--RF3am {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .LinkColumn_columnHeading--RF3am {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.LinkColumn_columnHeading--RF3am {
  color: var(--semantic-colour-background-white);
  padding: var(--spacing-small) 0;
  margin-bottom: 0;
}

.LinkColumn_linkItem--HeC5f {
  padding: var(--spacing-small) 0;
}

.LinkColumn_footerLink--uFGZh {
  color: var(--semantic-colour-text-primary-white);
  transition: color 0.2s ease;
}
.LinkColumn_footerLink--uFGZh:hover {
  color: var(--semantic-colour-text-primary-stone);
}
/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Footer/SocialLinks/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
.SocialLinks_socialLinks--VDMUt {
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: var(--spacing-large);
}
@media (max-width: 599.95px) {
  .SocialLinks_socialLinks--VDMUt {
    justify-content: flex-start;
    padding-top: var(--spacing-small);
    gap: var(--spacing-xx-large);
  }
}

.SocialLinks_socialLink--sE5co {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.SocialLinks_socialLink--sE5co:hover {
  opacity: 0.75;
}

.SocialLinks_socialIcon--USjFy {
  display: block;
  width: 32px;
  height: 32px;
  color: var(--semantic-colour-icon-white);
}
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Footer/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Footer_copyrightText--bmFTw {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Footer_copyrightText--bmFTw {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Footer_footer--T1atR {
  background-color: var(--semantic-colour-background-soil);
  margin-top: auto;
}

.Footer_container--s2j7g {
  padding: 90px var(--spacing-large) 0;
}

.Footer_desktopTop--KDvMT {
  display: flex;
}

.Footer_mobileTop--AH1b_ {
  display: none;
}

.Footer_logoLink--Zp6dv {
  display: block;
  max-width: 180px;
}

.Footer_brandLogo--wlNfq {
  display: block;
  width: 100%;
  height: auto;
  color: var(--semantic-colour-text-primary-white);
}

.Footer_divider--bxPyw {
  border-color: var(--semantic-colour-divider-border-dark-base);
  margin: var(--spacing-x-large) 0;
}

.Footer_container--s2j7g:last-of-type {
  padding-top: 0;
  padding-bottom: var(--spacing-x-large);
}

.Footer_bottomBar--veyFp {
  padding: 0;
}

.Footer_copyrightText--bmFTw {
  color: var(--semantic-colour-text-primary-white);
}

@media (max-width: 599.95px) {
  .Footer_container--s2j7g {
    padding: 60px var(--spacing-small) 0;
  }
  .Footer_container--s2j7g:last-of-type {
    padding-bottom: var(--spacing-xx-large);
    padding-left: var(--spacing-small);
    padding-right: var(--spacing-small);
  }
  .Footer_desktopTop--KDvMT {
    display: none;
  }
  .Footer_mobileTop--AH1b_ {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xx-large);
  }
  .Footer_mobileTop--AH1b_ .Footer_logoLink--Zp6dv {
    display: block;
    margin-bottom: 0;
  }
  .Footer_accordionGroup--gDpwK {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-large);
  }
  .Footer_divider--bxPyw {
    margin: var(--spacing-xx-large) 0;
  }
  .Footer_copyrightText--bmFTw {
    max-width: 280px;
  }
}
/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/NoAddressModal/index.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.NoAddressModal_text--JZnDT {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .NoAddressModal_text--JZnDT {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.NoAddressModal_text--JZnDT {
  color: var(--semantic-colour-text-primary-soil);
  margin: 0;
}
/*!**********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/PdfViewerModal/index.module.scss ***!
  \**********************************************************************************************************************************************************************************************************************************************************/
.PdfViewerModal_paper--D316k.MuiDialog-paper {
  width: calc(100vw - var(--spacing-64));
  height: calc(100vh - var(--spacing-64));
}

.PdfViewerModal_viewer--FxLsT {
  height: 100%;
  min-height: 0;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/BetaPdfViewer/index.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
.BetaPdfViewer_message--W8R0_ {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--semantic-colour-text-primary-soil);
}
/*!*********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/tokens/_tokens.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Design Tokens - CSS Custom Properties
 * 
 * ⚠️ AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
 * Generated from TypeScript token files
 * Run: npx tsx src/component/BetaInitiative/tokens/generate-scss.ts
 */
/* ========================================================================
   FONT FACES
   ======================================================================== */
@font-face {
  font-family: "Gilroy";
  src: url(/7cc526e92005ccad7c04.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url(/2acbf1bbf74beebecb30.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url(/7662fd26100865f1d1f4.woff2) format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url(/78b256a63b6a37c9e6e5.woff2) format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url(/09450ab4fdb25fe406aa.woff2) format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url(/35f10103993bd739c875.woff2) format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lingua";
  src: url(/72df4b6213f19d01aea1.woff2) format("woff2"), url(/e2b1916136878b1c14f8.woff) format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* ========================================================================
   CSS CUSTOM PROPERTIES
   ======================================================================== */
:root {
  /* ========================================================================
     PRIMITIVES - COLORS
     ======================================================================== */
  /* Soil */
  --colour-soil-50: #f5f4f3;
  --colour-soil-100: #ece9e7;
  --colour-soil-200: #d9d4cf;
  --colour-soil-300: #c7beb7;
  --colour-soil-400: #b4a99f;
  --colour-soil-500: #a19387;
  --colour-soil-600: #8e7d6f;
  --colour-soil-700: #7b6857;
  --colour-soil-800: #69523f;
  --colour-soil-900: #563d27;
  --colour-soil-950: #43270f;
  /* Orange */
  --colour-orange-50: #fff3e6;
  --colour-orange-100: #ffe6cc;
  --colour-orange-200: #ffcd99;
  --colour-orange-300: #ffb566;
  --colour-orange-400: #ff9c33;
  --colour-orange-500: #ff8300;
  --colour-orange-600: #e87400;
  --colour-orange-700: #cc6900;
  --colour-orange-800: #b35c00;
  --colour-orange-900: #994f00;
  --colour-orange-950: #663400;
  /* Stone */
  --colour-stone-50: #fbf7f5;
  --colour-stone-100: #f5ece8;
  --colour-stone-200: #efe0d9;
  --colour-stone-300: #e3c9be;
  --colour-stone-400: #d1aa98;
  --colour-stone-500: #be8b75;
  --colour-stone-600: #a7725b;
  --colour-stone-700: #8c5e49;
  --colour-stone-800: #75503f;
  --colour-stone-900: #634639;
  --colour-stone-950: #34231b;
  /* Blue */
  --colour-blue-50: #ebf3ff;
  --colour-blue-100: #d7e8ff;
  --colour-blue-200: #aed1ff;
  --colour-blue-300: #86b9ff;
  --colour-blue-400: #5da2ff;
  --colour-blue-500: #358bff;
  --colour-blue-600: #2a6fcc;
  --colour-blue-700: #205399;
  --colour-blue-800: #1b4680;
  --colour-blue-900: #153866;
  --colour-blue-950: #0b1c33;
  /* Yellow */
  --colour-yellow-50: #fff8e5;
  --colour-yellow-100: #fff1cc;
  --colour-yellow-200: #ffe299;
  --colour-yellow-300: #ffd466;
  --colour-yellow-400: #ffc533;
  --colour-yellow-500: #ffb700;
  --colour-yellow-600: #e6a500;
  --colour-yellow-700: #cc9200;
  --colour-yellow-800: #b38000;
  --colour-yellow-900: #996e00;
  --colour-yellow-950: #664900;
  /* Green */
  --colour-green-50: #e5f9f3;
  --colour-green-100: #ccf3e7;
  --colour-green-200: #99e6ce;
  --colour-green-300: #66dab6;
  --colour-green-400: #33cd9d;
  --colour-green-500: #00c185;
  --colour-green-600: #00ae78;
  --colour-green-700: #009a6a;
  --colour-green-800: #00875d;
  --colour-green-900: #007450;
  --colour-green-950: #004d35;
  /* Greyscale */
  --colour-greyscale-0: #ffffff;
  --colour-greyscale-50: #efeeee;
  --colour-greyscale-100: #cecdcb;
  --colour-greyscale-200: #bebcba;
  --colour-greyscale-300: #9d9a98;
  --colour-greyscale-400: #6c6864;
  --colour-greyscale-500: #5c5753;
  --colour-greyscale-600: #534e4b;
  --colour-greyscale-700: #4a4642;
  --colour-greyscale-800: #403d3a;
  --colour-greyscale-900: #2e2c2a;
  --colour-greyscale-950: #1c1a19;
  --colour-greyscale-999: #000000;
  /* Red */
  --colour-red-50: #fef2f2;
  --colour-red-100: #fde3e3;
  --colour-red-150: #ffbdbd;
  --colour-red-200: #eb9898;
  --colour-red-600: #d62c2c;
  --colour-red-700: #b42121;
  --colour-red-800: #931f1f;
  --colour-red-900: #7c2121;
  /* ========================================================================
     PRIMITIVES - SPACING
     ======================================================================== */
  --spacing-0: 0px;
  --spacing-1: 1px;
  --spacing-1-2: 1.2px;
  --spacing-2: 2px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-100: 100;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-150: 150px;
  --spacing-168: 168px;
  --spacing-180: 180px;
  --spacing-200: 200px;
  --spacing-256: 256px;
  --spacing-300: 300px;
  --spacing-344: 344px;
  --spacing-416: 416px;
  --spacing-496: 496px;
  --spacing-640: 640px;
  --spacing-656: 656px;
  --spacing-708: 708px;
  --spacing-952: 952px;
  --spacing-970: 970px;
  --spacing-1024: 1024px;
  --spacing-1200: 1200px;
  --spacing-1328: 1328px;
  --spacing-1376: 1376px;
  --spacing-1440: 1440px;
  /* ========================================================================
     PRIMITIVES - BORDER RADIUS
     ======================================================================== */
  --radius-rounded0: 0px;
  --radius-rounded1: 1px;
  --radius-rounded2: 2px;
  --radius-rounded3: 3px;
  --radius-rounded4: 4px;
  --radius-rounded5: 5px;
  --radius-rounded6: 6px;
  --radius-rounded7: 7px;
  --radius-rounded8: 8px;
  --radius-rounded9: 9px;
  --radius-rounded10: 10px;
  --radius-rounded12: 12px;
  --radius-rounded16: 16px;
  --radius-rounded20: 20px;
  --radius-rounded24: 24px;
  --radius-rounded36: 36px;
  --radius-full: 999px;
  /* ========================================================================
     PRIMITIVES - BORDER WIDTH
     ======================================================================== */
  --width-width-xs: 0.5px;
  --width-width-s: 1px;
  --width-width-m: 2px;
  --width-width-l: 3px;
  --width-width-xl: 4px;
  /* ========================================================================
     PRIMITIVES - TYPOGRAPHY
     ======================================================================== */
  /* Font Families */
  --font-family-gilroy: 'Gilroy';
  --font-family-lingua: 'Lingua';
  /* Font Weights */
  --font-weight-light: 'Light';
  --font-weight-regular: 'Regular';
  --font-weight-medium: 'Medium';
  --font-weight-semi-bold: 'SemiBold';
  --font-weight-bold: 'Bold';
  --font-weight-italic: 'Italic';
  /* Font Sizes */
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-17: 17px;
  --font-size-19: 19px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-30: 30px;
  --font-size-36: 36px;
  --font-size-42: 42px;
  --font-size-48: 48px;
  --font-size-55: 55px;
  --font-size-90: 90px;
  --font-size-102: 102px;
  /* Line Heights */
  --font-line-height-13: 13px;
  --font-line-height-14: 14px;
  --font-line-height-16: 16px;
  --font-line-height-18: 18px;
  --font-line-height-21: 21px;
  --font-line-height-22: 22px;
  --font-line-height-24: 24px;
  --font-line-height-28: 28px;
  --font-line-height-34: 34px;
  --font-line-height-42: 42px;
  --font-line-height-43: 43px;
  --font-line-height-52: 52px;
  --font-line-height-53: 53px;
  --font-line-height-82: 82px;
  /* Font Case */
  --font-case-title-case: capitalize;
  --font-case-uppercase: uppercase;
  --font-case-sentence-case: sentence case;
  --font-case-as-typed: none;
  /* Font Decoration */
  --font-decoration-underline: Underline;
  --font-decoration-none: None;
  /* ========================================================================
     PRIMITIVES - ELEVATION
     ======================================================================== */
  --elevation-none: none;
  --elevation-xs: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --elevation-sm: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
  --elevation-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  --elevation-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  --elevation-xl: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
  --elevation-inner: inset 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --elevation-alert: 0 0 16px 0 rgba(0, 0, 0, 0.08);
  --elevation-widget-shadow: 0px 0px 32px 0px rgba(0, 0, 0, 0.08);
  /* ========================================================================
     SEMANTIC - COLORS
     ======================================================================== */
  /* Text Colors */
  --semantic-colour-text-primary-white: #ffffff;
  --semantic-colour-text-primary-soil: #43270f;
  --semantic-colour-text-primary-stone: #f5ece8;
  --semantic-colour-text-primary-subtitle: #7b6857;
  --semantic-colour-text-primary-alt1: #4a4642;
  --semantic-colour-text-primary-alt2: #6c6864;
  --semantic-colour-text-primary-alt3: #2e2c2a;
  --semantic-colour-text-secondary-bright-orange: #ff8300;
  --semantic-colour-text-secondary-bright-blue: #5da2ff;
  --semantic-colour-text-secondary-bright-yellow: #ffb700;
  --semantic-colour-text-secondary-bright-green: #00c185;
  --semantic-colour-text-secondary-dark-orange: #e87400;
  --semantic-colour-text-secondary-dark-blue: #2a6fcc;
  --semantic-colour-text-secondary-dark-yellow: #cc9200;
  --semantic-colour-text-secondary-dark-green: #00ae78;
  --semantic-colour-text-error-error: #931f1f;
  /* Icon Colors */
  --semantic-colour-icon-white: #ffffff;
  --semantic-colour-icon-soil: #43270f;
  --semantic-colour-icon-base: #43270f;
  /* Background Colors */
  --semantic-colour-background-base: #ffffff;
  --semantic-colour-background-white: #ffffff;
  --semantic-colour-background-soil: #43270f;
  --semantic-colour-background-stone: #f5ece8;
  --semantic-colour-background-stone50: #fbf7f5;
  /* Interactive Colors */
  --semantic-colour-interactive-dark-idle: #ffffff;
  --semantic-colour-interactive-dark-hover: #43270f;
  --semantic-colour-interactive-dark-focus: #43270f;
  --semantic-colour-interactive-dark-pressed: #43270f;
  --semantic-colour-interactive-dark-disabled: #9d9a98;
  --semantic-colour-interactive-light-idle: #43270f;
  --semantic-colour-interactive-light-hover: #f5ece8;
  --semantic-colour-interactive-light-focus: #43270f;
  --semantic-colour-interactive-light-pressed: #43270f;
  --semantic-colour-interactive-light-disabled: #bebcba;
  --semantic-colour-interactive-light-alt1-idle: #f5ece8;
  --semantic-colour-interactive-light-alt1-hover: #efe0d9;
  --semantic-colour-interactive-light-alt1-focus: #43270f;
  --semantic-colour-interactive-light-alt1-pressed: #43270f;
  --semantic-colour-interactive-light-alt1-disabled: #6c6864;
  --semantic-colour-interactive-red-idle: #931f1f;
  --semantic-colour-interactive-red-hover: #d62c2c;
  --semantic-colour-interactive-red-focus: #931f1f;
  --semantic-colour-interactive-red-pressed: #931f1f;
  --semantic-colour-interactive-red-disabled: #9d9a98;
  /* Border Colors */
  --semantic-colour-border-base: #be8b75;
  --semantic-colour-border-alt1: #43270f;
  --semantic-colour-border-alt2: #f5ece8;
  --semantic-colour-border-alt3: #bebcba;
  --semantic-colour-border-error: #931f1f;
  --semantic-colour-border-disabled: #cecdcb;
  --semantic-colour-border-hover: #563d27;
  /* Status Colors */
  --semantic-colour-status-error: #931f1f;
  --semantic-colour-status-error-surface: #fef2f2;
  --semantic-colour-status-success: #007450;
  --semantic-colour-status-warning: #994f00;
  --semantic-colour-status-info: #2a6fcc;
  --semantic-colour-status-notification: #931f1f;
  /* Accent Colors */
  --semantic-colour-accent-base: #9d9a98;
  --semantic-colour-accent-alt1: #e3c9be;
  --semantic-colour-accent-alt2: #bebcba;
  /* Divider Colors */
  --semantic-colour-divider-border-light-base: #cecdcb;
  --semantic-colour-divider-border-dark-base: #efeeee;
  /* Overlay Colors */
  --semantic-colour-overlay-dark: rgba(0, 0, 0, 0.5);
  --semantic-colour-overlay-mid: rgba(102, 102, 102, 0.5);
  --semantic-colour-overlay-light: rgba(255, 255, 255, 0.1);
  --semantic-colour-overlay-white90: rgba(255, 255, 255, 0.9);
  /* ========================================================================
     SEMANTIC - BORDER RADIUS
     ======================================================================== */
  --semantic-border-radius-null: 0px;
  --semantic-border-radius-xs: 2px;
  --semantic-border-radius-s: 4px;
  --semantic-border-radius-m: 8px;
  --semantic-border-radius-l: 16px;
  --semantic-border-radius-xl: 24px;
  --semantic-border-radius-xxl: 36px;
  --semantic-border-radius-full: 999px;
  /* ========================================================================
     SEMANTIC - BORDER WIDTH
     ======================================================================== */
  --semantic-border-width-xs: 0.5px;
  --semantic-border-width-s: 1px;
  --semantic-border-width-m: 2px;
  --semantic-border-width-l: 3px;
  --semantic-border-width-xl: 4px;
  --semantic-border-width-default: 0.5px;
  --semantic-border-width-focus: 1px;
  --semantic-border-width-error: 1px;
  /* ========================================================================
     SEMANTIC - SPACING (Responsive)
     ======================================================================== */
  /* Spacing aliases (mobile-first, responsive via media queries) */
  --spacing-none: var(--spacing-0);
  --spacing-xxx-small: var(--spacing-2);
  --spacing-xx-small: var(--spacing-4);
  --spacing-x-small: var(--spacing-8);
  --spacing-small: var(--spacing-16);
  --spacing-medium: var(--spacing-20);
  --spacing-large: var(--spacing-24);
  --spacing-x-large: var(--spacing-36);
  --spacing-xx-large: var(--spacing-40);
  /* ========================================================================
     SEMANTIC - ELEVATION
     ======================================================================== */
  /* Card */
  --semantic-elevation-card-default: var(--elevation-xs);
  --semantic-elevation-card-hover: var(--elevation-sm);
  --semantic-elevation-card-pressed: var(--elevation-none);
  /* Overlay */
  --semantic-elevation-overlay-dropdown: var(--elevation-md);
  --semantic-elevation-overlay-mega-menu: var(--elevation-widget-shadow);
  --semantic-elevation-overlay-modal: var(--elevation-lg);
  --semantic-elevation-overlay-tooltip: var(--elevation-lg);
  /* Navigation */
  --semantic-elevation-navigation-sticky: var(--elevation-sm);
  --semantic-elevation-navigation-floating: var(--elevation-md);
  /* Form */
  --semantic-elevation-form-default: var(--elevation-none);
  --semantic-elevation-form-focus: var(--elevation-xs);
  --semantic-elevation-form-error: var(--elevation-xs);
  /* ========================================================================
     SEMANTIC - TYPOGRAPHY
     ======================================================================== */
  --typography-headline-1-family-default: var(--font-family-gilroy);
  --typography-headline-1-weight-default: var(--font-weight-bold);
  --typography-headline-1-size-desktop-x-large: var(--font-size-90);
  --typography-headline-1-size-desktop-medium: var(--font-size-48);
  --typography-headline-1-size-desktop-small: var(--font-size-30);
  --typography-headline-1-size-desktop-x-small: var(--font-size-24);
  --typography-headline-1-size-desktop-xx-small: var(--font-size-19);
  --typography-headline-1-size-mobile-x-large: var(--font-size-48);
  --typography-headline-1-size-mobile-medium: var(--font-size-30);
  --typography-headline-1-size-mobile-small: var(--font-size-24);
  --typography-headline-1-size-mobile-x-small: var(--font-size-19);
  --typography-headline-1-size-mobile-xx-small: var(--font-size-17);
  --typography-headline-1-line-height-desktop-x-large: var(--font-line-height-82);
  --typography-headline-1-line-height-desktop-medium: var(--font-line-height-52);
  --typography-headline-1-line-height-desktop-small: var(--font-line-height-34);
  --typography-headline-1-line-height-desktop-x-small: var(--font-line-height-28);
  --typography-headline-1-line-height-desktop-xx-small: var(--font-line-height-28);
  --typography-headline-1-line-height-mobile-x-large: var(--font-line-height-43);
  --typography-headline-1-line-height-mobile-medium: var(--font-line-height-34);
  --typography-headline-1-line-height-mobile-small: var(--font-line-height-28);
  --typography-headline-1-line-height-mobile-x-small: var(--font-line-height-21);
  --typography-headline-1-line-height-mobile-xx-small: var(--font-line-height-21);
  --typography-headline-2-family-default: var(--font-family-lingua);
  --typography-headline-2-weight-default: var(--font-weight-regular);
  --typography-headline-2-size-desktop-large: var(--font-size-102);
  --typography-headline-2-size-desktop-medium: var(--font-size-55);
  --typography-headline-2-size-mobile-large: var(--font-size-55);
  --typography-headline-2-size-mobile-medium: var(--font-size-42);
  --typography-headline-2-line-height-desktop-large: var(--font-line-height-82);
  --typography-headline-2-line-height-desktop-medium: var(--font-line-height-43);
  --typography-headline-2-line-height-mobile-large: var(--font-line-height-53);
  --typography-headline-2-line-height-mobile-medium: var(--font-size-42);
  --typography-body-family-default: var(--font-family-gilroy);
  --typography-body-weight-regular: var(--font-weight-regular);
  --typography-body-weight-bold: var(--font-weight-bold);
  --typography-body-weight-semi-bold: var(--font-weight-semi-bold);
  --typography-body-weight-medium: var(--font-weight-medium);
  --typography-body-size-desktop-large: var(--font-size-19);
  --typography-body-size-desktop-regular: var(--font-size-16);
  --typography-body-size-desktop-small: var(--font-size-14);
  --typography-body-size-mobile-large: var(--font-size-16);
  --typography-body-size-mobile-regular: var(--font-size-14);
  --typography-body-size-mobile-small: var(--font-size-12);
  --typography-body-line-height-desktop-large: var(--font-line-height-28);
  --typography-body-line-height-desktop-regular: var(--font-size-24);
  --typography-body-line-height-desktop-small: var(--font-line-height-22);
  --typography-body-line-height-mobile-large: var(--font-size-24);
  --typography-body-line-height-mobile-regular: var(--font-line-height-21);
  --typography-body-line-height-mobile-small: var(--font-line-height-18);
  --typography-body-decoration-underline: var(--font-decoration-underline);
  --typography-eyebrow-family-default: var(--font-family-gilroy);
  --typography-eyebrow-weight-bold: var(--font-weight-bold);
  --typography-eyebrow-weight-medium: var(--font-weight-medium);
  --typography-eyebrow-weight-semi-bold: var(--font-weight-semi-bold);
  --typography-eyebrow-size-desktop-bold: var(--font-size-13);
  --typography-eyebrow-size-desktop-medium: var(--font-size-12);
  --typography-eyebrow-size-desktop-semi-bold: var(--font-size-12);
  --typography-eyebrow-size-mobile-bold: var(--font-size-12);
  --typography-eyebrow-size-mobile-medium: var(--font-size-12);
  --typography-eyebrow-size-mobile-semi-bold: var(--font-size-12);
  --typography-eyebrow-line-height-desktop-bold: var(--font-size-13);
  --typography-eyebrow-line-height-desktop-medium: var(--font-size-13);
  --typography-eyebrow-line-height-desktop-semi-bold: var(--font-size-13);
  --typography-eyebrow-line-height-mobile-bold: var(--font-size-14);
  --typography-eyebrow-line-height-mobile-medium: var(--font-size-14);
  --typography-eyebrow-line-height-mobile-semi-bold: var(--font-size-14);
}

/* ========================================================================
   RESPONSIVE SPACING - Using beta-breakpoints mixins
   Update spacing aliases at different breakpoints
   ======================================================================== */
/* Tablet breakpoint - sm-and-up (600px and up) */
@media (min-width: 600px) {
  :root {
    --spacing-none: var(--spacing-0);
    --spacing-xxx-small: var(--spacing-2);
    --spacing-xx-small: var(--spacing-6);
    --spacing-x-small: var(--spacing-12);
    --spacing-small: var(--spacing-16);
    --spacing-medium: var(--spacing-20);
    --spacing-large: var(--spacing-24);
    --spacing-x-large: var(--spacing-36);
    --spacing-xx-large: var(--spacing-40);
  }
}
/* Desktop breakpoint - lg-and-up (1200px and up) */
@media (min-width: 1200px) {
  :root {
    --spacing-none: var(--spacing-0);
    --spacing-xxx-small: var(--spacing-2);
    --spacing-xx-small: var(--spacing-8);
    --spacing-x-small: var(--spacing-16);
    --spacing-small: var(--spacing-20);
    --spacing-medium: var(--spacing-24);
    --spacing-large: var(--spacing-36);
    --spacing-x-large: var(--spacing-48);
    --spacing-xx-large: var(--spacing-56);
  }
}
/*!*******************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/tokens/global-typography.scss ***!
  \*******************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.body1 {
  color: var(--semantic-colour-text-primary-soil);
}

.body2 {
  color: var(--semantic-colour-text-primary-white);
}

.heading-xlarge {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-x-large);
  line-height: var(--typography-headline-1-line-height-mobile-x-large);
}
@media (min-width: 1200px) {
  .heading-xlarge {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-x-large);
    line-height: var(--typography-headline-1-line-height-desktop-x-large);
  }
}

.heading-medium {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-medium);
  line-height: var(--typography-headline-1-line-height-mobile-medium);
}
@media (min-width: 1200px) {
  .heading-medium {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-medium);
    line-height: var(--typography-headline-1-line-height-desktop-medium);
  }
}

.heading-small {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-small);
  line-height: var(--typography-headline-1-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .heading-small {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-small);
    line-height: var(--typography-headline-1-line-height-desktop-small);
  }
}

.heading-xsmall {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-x-small);
  line-height: var(--typography-headline-1-line-height-mobile-x-small);
}
@media (min-width: 1200px) {
  .heading-xsmall {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-x-small);
    line-height: var(--typography-headline-1-line-height-desktop-x-small);
  }
}

.heading-xxsmall {
  font-family: var(--typography-headline-1-family-default);
  font-weight: 700;
  font-size: var(--typography-headline-1-size-mobile-xx-small);
  line-height: var(--typography-headline-1-line-height-mobile-xx-small);
}
@media (min-width: 1200px) {
  .heading-xxsmall {
    font-family: var(--typography-headline-1-family-default);
    font-weight: 700;
    font-size: var(--typography-headline-1-size-desktop-xx-small);
    line-height: var(--typography-headline-1-line-height-desktop-xx-small);
  }
}

.heading2-large {
  font-family: var(--typography-headline-2-family-default);
  font-weight: 400;
  font-size: var(--typography-headline-2-size-mobile-large);
  line-height: var(--typography-headline-2-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .heading2-large {
    font-family: var(--typography-headline-2-family-default);
    font-weight: 400;
    font-size: var(--typography-headline-2-size-desktop-large);
    line-height: var(--typography-headline-2-line-height-desktop-large);
  }
}

.heading2-medium {
  font-family: var(--typography-headline-2-family-default);
  font-weight: 400;
  font-size: var(--typography-headline-2-size-mobile-medium);
  line-height: var(--typography-headline-2-line-height-mobile-medium);
}
@media (min-width: 1200px) {
  .heading2-medium {
    font-family: var(--typography-headline-2-family-default);
    font-weight: 400;
    font-size: var(--typography-headline-2-size-desktop-medium);
    line-height: var(--typography-headline-2-line-height-desktop-medium);
  }
}

.body-large {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .body-large {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.body-regular {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .body-regular {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.body-small {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .body-small {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.body-large-semi-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .body-large-semi-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.body-regular-semi-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .body-regular-semi-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.body-small-semi-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 600;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .body-small-semi-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 600;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.body-large-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-large);
  line-height: var(--typography-body-line-height-mobile-large);
}
@media (min-width: 1200px) {
  .body-large-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-large);
    line-height: var(--typography-body-line-height-desktop-large);
  }
}

.body-regular-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .body-regular-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.body-small-bold {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .body-small-bold {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.eyebrow-bold {
  font-family: var(--typography-eyebrow-family-default);
  font-weight: 700;
  font-size: var(--typography-eyebrow-size-mobile-bold);
  line-height: var(--typography-eyebrow-line-height-mobile-bold);
  letter-spacing: 0.5px;
}
@media (min-width: 1200px) {
  .eyebrow-bold {
    font-family: var(--typography-eyebrow-family-default);
    font-weight: 700;
    font-size: var(--typography-eyebrow-size-desktop-bold);
    line-height: var(--typography-eyebrow-line-height-desktop-bold);
    letter-spacing: 0.5px;
  }
}

.eyebrow-medium {
  font-family: var(--typography-eyebrow-family-default);
  font-weight: 500;
  font-size: var(--typography-eyebrow-size-mobile-medium);
  line-height: var(--typography-eyebrow-line-height-mobile-medium);
  letter-spacing: 0.5px;
}
@media (min-width: 1200px) {
  .eyebrow-medium {
    font-family: var(--typography-eyebrow-family-default);
    font-weight: 500;
    font-size: var(--typography-eyebrow-size-desktop-medium);
    line-height: var(--typography-eyebrow-line-height-desktop-medium);
    letter-spacing: 0.5px;
  }
}

.eyebrow-semi-bold {
  font-family: var(--typography-eyebrow-family-default);
  font-weight: 600;
  font-size: var(--typography-eyebrow-size-mobile-semi-bold);
  line-height: var(--typography-eyebrow-line-height-mobile-semi-bold);
  letter-spacing: 0;
}
@media (min-width: 1200px) {
  .eyebrow-semi-bold {
    font-family: var(--typography-eyebrow-family-default);
    font-weight: 600;
    font-size: var(--typography-eyebrow-size-desktop-semi-bold);
    line-height: var(--typography-eyebrow-line-height-desktop-semi-bold);
    letter-spacing: 0;
  }
}

/**
 * Global Typography Styles
 *
 * Emits the Figma "Core Frontier Design System" typography classes as real,
 * GLOBAL class names (this file is not a *.module.scss, so css-loader leaves
 * the names untouched). Use them as plain strings:
 *
 *   <Typography className="body-regular">…</Typography>
 *
 * ⚠️  Imported exactly ONCE, from src/component/BetaInitiative/Layout.
 *
 * Do NOT `@use` this file from a *.module.scss. 
 *
 * In a CSS Module, load the placeholders instead and @extend only what you
 * need — the definitions live in one place either way:
 *
 *   @use '../tokens/_typography-placeholders' as *;
 *
 *   .myTitle { @extend %heading-medium; }
 *
 * All classes are responsive by default (Mobile → Desktop breakpoint).
 * Typography classes do NOT include color — combine with body1/body2 for color.
 */
/*!**************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Layout/index.module.scss ***!
  \**************************************************************************************************************************************************************************************************************************************************/
.Layout_layout--DbVZG {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--semantic-colour-background-white);
}

.Layout_main--JXS5d {
  flex: 1;
  outline: none;
}
/*!*********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Layout/PageSkeleton.module.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************/
.Layout_container--AoEkk {
  width: 100%;
  background-color: var(--semantic-colour-background-base);
}

.Layout_hero--FIQIg {
  width: 100%;
  height: 220px !important;
}

.Layout_content--bBGmm {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  width: min(100%, 1280px);
  margin: 0 auto;
  padding: var(--spacing-x-large) var(--spacing-large) var(--spacing-xx-large);
}

.Layout_cardsGrid--lba_V {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-large);
  margin-top: var(--spacing-small);
}

.Layout_card--ShNu2 {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  padding: var(--spacing-large);
  background-color: var(--semantic-colour-background-white);
  border-radius: var(--semantic-border-radius-m);
}

.Layout_toolbar--AihGT {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-small);
  margin-top: var(--spacing-small);
}

.Layout_table--F99rC {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: var(--spacing-small);
  overflow: hidden;
  background-color: var(--semantic-colour-background-white);
  border-radius: var(--semantic-border-radius-m);
}

.Layout_tableRow--AR7AL {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-large);
  padding: var(--spacing-small) var(--spacing-large);
}

.Layout_guideContent--oDC6x {
  max-width: 920px;
}

.Layout_screenReaderOnly--fIKbN {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 899.95px) {
  .Layout_cardsGrid--lba_V {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 599.95px) {
  .Layout_hero--FIQIg {
    height: 160px !important;
  }
  .Layout_content--bBGmm {
    padding: var(--spacing-large) var(--spacing-small);
  }
  .Layout_cardsGrid--lba_V {
    grid-template-columns: 1fr;
  }
  .Layout_toolbar--AihGT {
    align-items: stretch;
    flex-direction: column;
  }
  .Layout_tableRow--AR7AL {
    gap: var(--spacing-small);
    padding-inline: var(--spacing-small);
  }
}
@media (prefers-reduced-motion: reduce) {
  .Layout_container--AoEkk .MuiSkeleton-root {
    animation: none;
  }
}
/*!*************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[3].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[3].use[3]!./src/component/BetaInitiative/Alert/index.module.scss ***!
  \*************************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/**
 * Typography Mixin
 * 
 * Usage in SCSS:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * // Option 1: Use with pre-defined semantic token maps
 * .my-heading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * // Option 2: Use with custom map and CSS custom properties
 * .my-heading {
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 * }
 * 
 * // Option 3: Responsive typography with breakpoints
 * @use '../_beta-breakpoints' as *;
 * 
 * .my-heading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-xlarge);
 *   }
 * }
 * 
 * Available pre-defined maps in typography-tokens.scss:
 * - $typography-h1-desktop-xlarge, $typography-h1-desktop-medium, etc.
 * - $typography-h1-mobile-xlarge, $typography-h1-mobile-medium, etc.
 * - $typography-h2-desktop-large, $typography-h2-mobile-large, etc.
 * - $typography-body-desktop-large, $typography-body-mobile-regular, etc.
 * - $typography-eyebrow-desktop-bold, $typography-eyebrow-mobile-medium, etc.
 */
/**
 * Typography mixin - applies font properties from a map
 * 
 * @param {Map} $map - Typography properties map with keys:
 *   - font-family (required)
 *   - font-weight (required)
 *   - font-size (required)
 *   - line-height (required)
 *   - letter-spacing (optional)
 * 
 * @example Using semantic token map
 *   @include typography($typography-h1-desktop-xlarge);
 * 
 * @example Using custom map with CSS custom properties
 *   @include typography((
 *     font-family: var(--typography-headline-1-family-default),
 *     font-weight: 700,
 *     font-size: var(--typography-headline-1-size-desktop-x-large),
 *     line-height: var(--typography-headline-1-line-height-desktop-x-large)
 *   ));
 */
/**
 * Typography Semantic Token Maps
 * 
 * SCSS maps that use the generated semantic typography tokens.
 * These can be passed directly to @include typography($map)
 * 
 * Usage:
 * 
 * @use '../tokens/typography-mixin' as *;
 * @use '../tokens/typography-tokens' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-desktop-xlarge);
 * }
 * 
 * For responsive styles:
 * 
 * @use '../_beta-breakpoints' as *;
 * 
 * .myHeading {
 *   @include typography($typography-h1-mobile-medium);
 *   
 *   @include lg-and-up {
 *     @include typography($typography-h1-desktop-medium);
 *   }
 * }
 */
/**
 * Typography Placeholders
 *
 * The single source of truth for the betaInitiative component library's responsive
 * typography styles. Everything here is a Sass *placeholder* (`%name`), so
 * loading this file emits ZERO CSS on its own — only the placeholders you
 * actually `@extend` end up in the output.
 *
 * ── Which file do I load? ────────────────────────────────────────────────────
 *
 *   In a CSS Module (*.module.scss)  → load THIS file and @extend:
 *
 *     @use '../tokens/_typography-placeholders' as *;
 *
 *     .myTitle {
 *       @extend %heading-medium;
 *       color: var(--semantic-colour-text-primary-soil);
 *     }
 */
.Alert_body--sPC8S {
  font-family: var(--typography-body-family-default);
  font-weight: 500;
  font-size: var(--typography-body-size-mobile-small);
  line-height: var(--typography-body-line-height-mobile-small);
}
@media (min-width: 1200px) {
  .Alert_body--sPC8S {
    font-family: var(--typography-body-family-default);
    font-weight: 400;
    font-size: var(--typography-body-size-desktop-small);
    line-height: var(--typography-body-line-height-desktop-small);
  }
}

.Alert_title--kz4gw {
  font-family: var(--typography-body-family-default);
  font-weight: 700;
  font-size: var(--typography-body-size-mobile-regular);
  line-height: var(--typography-body-line-height-mobile-regular);
}
@media (min-width: 1200px) {
  .Alert_title--kz4gw {
    font-family: var(--typography-body-family-default);
    font-weight: 700;
    font-size: var(--typography-body-size-desktop-regular);
    line-height: var(--typography-body-line-height-desktop-regular);
  }
}

.Alert_alert--LUHfq {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  width: 100%;
  min-width: 0;
  max-width: 431px;
  padding: var(--spacing-small);
  color: var(--semantic-colour-text-primary-soil);
  border-radius: var(--semantic-border-radius-m);
}

.Alert_success--xMG9E {
  background: var(--colour-green-100);
}
.Alert_success--xMG9E .Alert_icon--r2UgJ {
  color: var(--semantic-colour-status-success);
}

.Alert_info--Osl9L {
  background: var(--colour-blue-100);
}
.Alert_info--Osl9L .Alert_icon--r2UgJ {
  color: var(--semantic-colour-status-info);
}

.Alert_warning--Jzswx {
  background: var(--colour-orange-100);
}
.Alert_warning--Jzswx .Alert_icon--r2UgJ {
  color: var(--semantic-colour-status-warning);
}

.Alert_error--yRsMw {
  background: var(--colour-red-100);
}
.Alert_error--yRsMw .Alert_icon--r2UgJ {
  color: var(--semantic-colour-status-error);
}

.Alert_icon--r2UgJ {
  display: block;
  flex: 0 0 var(--spacing-24);
  width: var(--spacing-24);
  height: var(--spacing-24);
}

.Alert_content--N80Dr {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-xx-small);
  min-width: 0;
  overflow-wrap: anywhere;
}

.Alert_title--kz4gw {
  margin: 0;
}