@import url("./alix-webflow-template-system/raw/webflow-shared.css");

:root {
  /* Match the production shell scale: 1rem is 10px at a 375px viewport. */
  font-size: clamp(62.5%, calc(100vw / 37.5), 100%);
  --global-transition-duration: 240ms;
  --global-transition-easing-function: ease-in-out;
  --_alix-website-brand---navy: var(--_colors---navy, #0c2553);
  --_alix-website-brand---blue: var(--_colors---blue, #1170db);
  --_alix-website-brand---cta-blue: var(--_colors---cta-blue, #043ca5);
  --_alix-website-brand---light-blue: var(--_colors---light-blue, #bce5ea);
  --_alix-website-brand---purple: var(--_colors---purple, #b6abfd);
  --_alix-website-brand---light-purple: var(--_colors---light-purple, #e2defe);
  --_alix-website-brand---tan: var(--_colors---tan, #f4f3f1);
  --_alix-website-brand---darker-tan: var(--_colors---darker-tan, #e8e5e1);
  --_alix-website-brand---white: var(--_colors---white, #fff);
  --_alix-website-brand---almost-black: var(--_colors---almost-black, #11100d);
  --_alix-website-brand---font-heading: var(--_typography---font-families--make, Make, "Times New Roman", serif);
  --_alix-website-brand---font-body: var(--_typography---font-families--beausite-classic, "Beausite Classic", Arial, sans-serif);
}

@media screen and (width >= 768px) {
  :root {
    /* Match production desktop scaling: 1rem is 10px at 1440px. */
    font-size: max(62.5%, calc(100vw / 144));
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo::before,
.logo::after {
  content: unset;
}

.button-link {
  color: var(--_color-scheme---button-link-color);
  background-color: var(--_color-scheme---button-link-background-color);
  border: 1px solid var(--_color-scheme---button-link-border-color);
  transition:
    color var(--global-transition-duration) var(--global-transition-easing-function),
    background-color var(--global-transition-duration) var(--global-transition-easing-function),
    border-color var(--global-transition-duration) var(--global-transition-easing-function);
}

@media screen and (pointer: fine) {
  .button-link:hover {
    color: var(--_color-scheme---button-link-color-hover);
    background-color: var(--_color-scheme---button-link-background-color-hover);
    border-color: var(--_color-scheme---button-link-border-color-hover);
  }
}

.button-link__dot {
  background-color: var(--_color-scheme---button-link-dot-color);
  transition: background-color var(--global-transition-duration) var(--global-transition-easing-function);
}

@media screen and (pointer: fine) {
  .button-link:hover > .button-link__dot {
    background-color: var(--_color-scheme---button-link-dot-color-hover);
  }
}

.alix-download-skip {
  position: absolute;
  z-index: 10000;
  top: 1rem;
  left: 1rem;
  transform: translateY(-150%);
  padding: 0.8rem 1rem;
  border-radius: 999px;
  background: var(--_alix-website-brand---navy);
  color: var(--_alix-website-brand---white);
  font: 600 1.4rem / 1 var(--_alix-website-brand---font-body);
  text-decoration: none;
  transition: transform 160ms ease;
}

.alix-download-skip:focus {
  transform: translateY(0);
}

@media screen and (width < 1280px) {
  body:has(.header.header--active) {
    overflow: clip;
  }
}

.header.header--active .header__content {
  box-shadow: unset;
}

.header .header__toggle::before,
.header .header__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.4rem;
  height: 0.2rem;
  background-color: var(--_colors---black);
  transition: transform var(--global-transition-duration) var(--global-transition-easing-function);
}

.header .header__toggle::before {
  transform: translate(-50%, -50%) translateY(-0.3rem);
}

.header.header--active .header__toggle::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.header .header__toggle::after {
  transform: translate(-50%, -50%) translateY(0.3rem);
}

.header.header--active .header__toggle::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

.header.header--active .header__backdrop,
.header.header--active .header__main {
  opacity: 1;
  visibility: visible;
}

/* Keep the production shell, but give the three mobile controls explicit
   space. The source Webflow header uses a flexible row below 1280px; without
   these bounds the menu, wordmark, and conversion button can crowd each other
   while the viewport is settling. */
@media screen and (width < 768px) {
  .header {
    top: 8px;
    padding-inline: 10px;
  }

  .header__content {
    display: grid;
    width: 100%;
    height: 60px;
    padding: 6px 7px;
    grid-template-columns: 36px minmax(64px, 1fr) auto;
    gap: 8px;
  }

  .header__toggle {
    width: 32px;
    max-width: 32px;
    height: 44px;
  }

  .header__home-link-wrapper {
    min-width: 0;
    justify-content: flex-start;
  }

  .header__home-link {
    width: 68px;
    max-width: 68px;
  }

  .header__side {
    min-width: 0;
    margin-left: 0;
  }

  .header__side .button-link {
    min-height: 44px;
    padding-inline: 16px;
    white-space: nowrap;
  }

  .header__side .button-link__label {
    font-size: 14px;
    line-height: 1;
  }
}

@media screen and (width < 390px) {
  .header__content {
    grid-template-columns: 32px minmax(56px, 1fr) auto;
    gap: 6px;
  }

  .header__home-link {
    width: 60px;
    max-width: 60px;
  }

  .header__side .button-link {
    padding-inline: 12px;
  }

  .header__side .button-link__label {
    font-size: 13px;
  }
}