@layer base {
  :root {
    --gutter: 1rem;
    --margin: 1rem;

    /* Typography */

    /* sm */
    --font-size-body-sm: 0.875rem; /* 14px */
    --line-height-body-sm: 1.25rem; /* 20px */
    --letter-spacing-body-sm: 0.02em; /* 2%   */

    /* md */
    --font-size-body-base: 1rem; /* 16px */
    --line-height-body-base: 1.5rem; /* 24px */
    --letter-spacing-body-base: 0; /* 0%   */

    /* lg */
    --font-size-body-lg: 1.125rem; /* 18px */
    --line-height-body-lg: 1.625rem; /* 26px */
    --letter-spacing-body-lg: -0.02em; /* -2%  */

    /* t8 */
    --font-size-t8: 0.875rem; /* 14px */
    --font-weight-t8: 700; /* bold */
    --line-height-t8: 1rem; /* 16px */
    --letter-spacing-t8: -0.02em; /* -2%  */

    /* t7 */
    --font-size-t7: 1.125rem; /* 18px */
    --font-weight-t7: 700; /* bold */
    --line-height-t7: 1.25rem; /* 20px */
    --letter-spacing-t7: -0.02em; /* -2%  */

    /* t6 */
    --font-size-t6: 1.25rem; /* 20px */
    --font-weight-t6: 700; /* bold */
    --line-height-t6: 1.375rem; /* 22px */
    --letter-spacing-t6: -0.02em; /* -2%  */

    /* t5 */
    --font-size-t5: 1.5rem; /* 24px */
    --font-weight-t5: 700; /* bold */
    --line-height-t5: 1.625rem; /* 26px */
    --letter-spacing-t5: -0.02em; /* -2%  */

    /* t4 */
    --font-size-t4: 1.75rem; /* 28px */
    --font-weight-t4: 700; /* bold */
    --line-height-t4: 1.875rem; /* 30px */
    --letter-spacing-t4: -0.02em; /* -2%  */

    /* t3 */
    --font-size-t3: 2.125rem; /* 34px */
    --font-weight-t3: 700;
    --line-height-t3: 2.375rem; /* 38px */
    --letter-spacing-t3: -0.02em; /* -2%  */

    /* t2 */
    --font-size-t2: 2.5rem; /* 40px */
    --font-weight-t2: 700; /* bold */
    --line-height-t2: 2.75rem; /* 44px */
    --letter-spacing-t2: -0.02em; /* -2%  */

    /* t1 */
    --font-size-t1: 2.875rem; /* 46px */
    --font-weight-t1: 700; /* bold */
    --line-height-t1: 3.125rem; /* 50px */
    --letter-spacing-t1: -0.02em; /* -2%  */

    /* dsp */
    --font-size-dsp: 4.125rem; /* 66px */
    --font-weight-dsp: 700; /* bold */
    --line-height-dsp: 4.5rem; /* 72px */
    --letter-spacing-dsp: -0.02em; /* -2%  */

    /* Space sizes */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 2.5rem;
    --space-3xl: 4rem;
    --space-4xl: 5rem;
    --space-5xl: 8rem;
    --header-height: 4.5rem;
    --hero-top: var(--header-height);
  }
  @media (min-width: 640px) {
    :root {
      --margin: 1.875rem;
    }
  }

  @media (min-width: 900px) {
    :root {
      --margin: 3.125rem;

      /* Typography sizes */

      /* lg */
      --font-size-body-lg: 1.25rem; /* 20 px */
      --line-height-body-lg: 1.75rem; /* 28px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.5rem; /* 24px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.625rem; /* 26px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 1.75rem; /* 28px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2rem; /* 32px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.125rem; /* 34px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.375rem; /* 38px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 2.625rem; /* 42px */
      --font-weight-t3: 700;
      --line-height-t3: 2.875rem; /* 46px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.125rem; /* 50px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 3.5rem; /* 56px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 3.625rem; /* 58px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 4.125rem; /* 66px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 5.5rem; /* 88px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 6rem; /* 96px */
      --letter-spacing-dsp: -0.02em; /* -2%  */

      /* Space sizes */
      --space-xs: 0.5rem;
      --space-sm: 1rem;
      --space-md: 1.5rem;
      --space-lg: 2rem;
      --space-xl: 2.5rem;
      --space-2xl: 4rem;
      --space-3xl: 5rem;
      --space-4xl: 8rem;
      --space-5xl: 10rem;
      --hero-top: calc(var(--header-height));
    }
  }

  @media (min-width: 1200px) {
    :root {
      --margin: 5.625rem;
      --gutter: 1.5rem;

      /* Typography sizes */

      /* md */
      --font-size-body-base: 1.125rem; /* 18px */
      --line-height-body-base: 1.625rem; /* 26px */
      --letter-spacing-body-base: 0; /* 0%   */

      /* lg */
      --font-size-body-lg: 1.375rem; /* 22px */
      --line-height-body-lg: 2rem; /* 32px */
      --letter-spacing-body-lg: -0.02em; /* -2%  */

      /* t8 */
      --font-size-t8: 1rem; /* 16px */
      --font-weight-t8: 700; /* bold */
      --line-height-t8: 1.125rem; /* 18px */
      --letter-spacing-t8: -0.02em; /* -2%  */

      /* t7 */
      --font-size-t7: 1.25rem; /* 20px */
      --font-weight-t7: 700; /* bold */
      --line-height-t7: 1.375rem; /* 22px */
      --letter-spacing-t7: -0.02em; /* -2%  */

      /* t6 */
      --font-size-t6: 1.625rem; /* 26px */
      --font-weight-t6: 700; /* bold */
      --line-height-t6: 1.75rem; /* 28px */
      --letter-spacing-t6: -0.02em; /* -2%  */

      /* t5 */
      --font-size-t5: 2rem; /* 32px */
      --font-weight-t5: 700; /* bold */
      --line-height-t5: 2.25rem; /* 36px */
      --letter-spacing-t5: -0.02em; /* -2%  */

      /* t4 */
      --font-size-t4: 2.5rem; /* 40px */
      --font-weight-t4: 700; /* bold */
      --line-height-t4: 2.75rem; /* 44px */
      --letter-spacing-t4: -0.02em; /* -2%  */

      /* t3 */
      --font-size-t3: 3rem; /* 48px */
      --font-weight-t3: 700;
      --line-height-t3: 3.25rem; /* 52px */
      --letter-spacing-t3: -0.02em; /* -2%  */

      /* t2 */
      --font-size-t2: 3.75rem; /* 60px */
      --font-weight-t2: 700; /* bold */
      --line-height-t2: 4.125rem; /* 66px */
      --letter-spacing-t2: -0.02em; /* -2%  */

      /* t1 */
      --font-size-t1: 4.5rem; /* 72px */
      --font-weight-t1: 700; /* bold */
      --line-height-t1: 5rem; /* 80px */
      --letter-spacing-t1: -0.02em; /* -2%  */

      /* dsp */
      --font-size-dsp: 6.875rem; /* 110px */
      --font-weight-dsp: 700; /* bold */
      --line-height-dsp: 7.5rem; /* 120px */
      --letter-spacing-dsp: -0.02em; /* -2%  */
    }
  }
}

@layer utilities {
  .container {
    @apply mx-margin w-auto max-w-none;
  }

  @media (min-width: 1600px) {
    /* Target both .container and .xl\:container so the
       responsive variant gets the same custom sizing. In v3,
       Tailwind's container plugin propagated custom overrides
       to responsive variants automatically; v4 does not. */
    .container, .xl\:container {
      @apply w-full mx-auto;
      max-width: calc(1600px - (var(--margin) * 2));
    }
  }
}
.global-logo {
  max-width: 121px;
  min-width: 121px;
}

.footer-logo {
  max-width: 2rem;
  min-width: 2rem;
  width: 100%
}

.footer-icon {
  max-width: 2rem;
}

.action-icon {
  max-width: 4rem;
  min-width: 4rem;
}

.back-arrow {
  max-width: 1rem;
  min-width: 1rem;
}
.mobile-session-menu-display:checked ~ .mobile-session-menu-content {
  display: block;
}

select {
  background-image: url('https://cdn.shopify.com/shopifycloud/privacy_portal/assets/select_input_arrow-aa5b3eb5cbd28a20423c38af4c627b92a752fb563333efb24605dcc846988419.svg');
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

.gradient-background {
  background: radial-gradient(47.74% 41.25% at 81.94% -21.87%, #C5D1FF 0%, rgba(199, 237, 236, 0) 100%),
    radial-gradient(83.54% 67.24% at 92.81% -17.19%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%)
}

.form-gradient-background {
  background:
    radial-gradient(88.11% 69.88% at 89.1% -10.65%, #ADCEFF 0%, rgba(205, 234, 243, 0) 100%),
    radial-gradient(35.73% 50.82% at 88.74% 15.24%, rgba(255, 255, 255, 0.5) 0%, rgba(245, 253, 255, 0) 100%),
    linear-gradient(0deg, #F5FCFF, #F5FCFF);
}

.error-gradient-background {
  background:
    radial-gradient(88.11% 69.88% at 89.1% -10.65%, #ffadad 0%, rgba(205, 234, 243, 0) 100%),
    radial-gradient(35.73% 50.82% at 88.74% 15.24%, rgba(255, 255, 255, 0.5) 0%, rgba(245, 253, 255, 0) 100%),
    linear-gradient(0deg, #fff5f5, #fff5f5);
}

.form-notice p {
  display: none;
}

.form-notice p:first-child {
  display: block;
  font-weight: 500;
}

.form-notice.expanded-notice p {
  display: block;
}

.form-notice.expanded-notice p ~ p {
  margin-top: 0.5rem;
}

.form-notice.expanded-notice .alert-icon {
  align-self: flex-start;
  margin-top: 0.75rem;
}

.form-notice.expanded-notice .toggle-container {
  align-self: flex-start;
  margin-top: 0.5rem;
}

.language-list {
  display: none;
}

.language-list.expanded {
  display: block;
}

.language-selector {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.language-selector.emphasized > .emphasis-regular {
  display: none;
}

.language-selector.emphasized > .emphasis-heavy {
  display: block;
}