@layer webflow-base {
  /* dark theme base + components (sc-121353 collapse 2b): the dark-family
     structural CSS, fully var()-tokenised, hoisted out of the per-brand
     jaumo/cosmy bundles. Brand divergence (weights, fonts, nav colours,
     mobile heading margins) is a `:root` token the brand sets only when it
     differs from the baked-in default (= jaumo, the majority — jaumo + the
     six dating aliases). cosmy overrides the handful where it diverges.

     Heading font / weight / letter-spacing / line-height come from the
     canonical unlayered `h1,h2,h3 { … var(--font-display) … }` in globals.css
     (unlayered beats @layer webflow-base), so the heading rules below only set
     what it leaves open: colour, margin, size. */

  /* --- universal element rules (dark lineage; byte-identical across brands) --- */
  .swiper-wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    display: flex;
  }
  a:hover {
    text-decoration: none;
  }
  li {
    padding-top: 3px;
    padding-bottom: 3px;
  }
  strong {
    font-family:
      Arial,
      Helvetica Neue,
      Helvetica,
      sans-serif;
    font-weight: 700;
  }
  ul {
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 24px;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-bottom: 10px;
    font-weight: 700;
  }
  p {
    margin-bottom: 0;
    font-weight: 400;
  }

  /* --- root box + body (font-family/weight differ: cosmy is 400, jaumo 500) --- */
  .webflow-scope {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-family: sans-serif;
  }
  .webflow-scope {
    height: 100%;
  }
  .webflow-scope {
    background-color: var(--colors--neutral--black);
    color: var(--colors--neutral--300);
    font-family: var(--fonts--satoshi, Satoshi, Arial, sans-serif);
    font-size: 1rem;
    font-weight: var(--webflow-scope-weight, 500);
    line-height: 100%;
  }
  body {
    margin: 0;
  }
  body {
    color: #333;
    background-color: #fff;
    min-height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 20px;
  }
  body {
    background-color: var(--colors--neutral--black);
    color: var(--colors--neutral--300);
    font-family: var(--fonts--satoshi, Satoshi, Arial, sans-serif);
    font-size: 1rem;
    font-weight: var(--webflow-scope-weight, 500);
    line-height: 100%;
  }

  /* --- links --- */
  a {
    background-color: #0000;
  }
  a {
    color: var(--mango);
    margin-bottom: 0;
    text-decoration: none;
  }

  /* --- headings (size + margin only; font/weight/ls/lh via globals) --- */
  h1 {
    margin: 0.67em 0;
    font-size: 2em;
  }
  h1 {
    margin-top: 20px;
    font-size: 38px;
    line-height: 44px;
  }
  h2 {
    margin-top: 20px;
    font-size: 32px;
    line-height: 36px;
  }
  h3 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 30px;
  }
  h1 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 54px;
  }
  h2 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 40px;
  }
  h3 {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 32px;
  }
  /* h4 is NOT in globals' unlayered heading rule, so it names its own font.
     jaumo's export had no bare h4; the dark-family h4 (cosmy's) is the default.
     Live legal/rich-text h4 is handled by `.rich-text h4` in webflow-shared. */
  h4 {
    margin-top: 10px;
    font-size: 18px;
    line-height: 24px;
  }
  h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-family: Satoshi, Arial, sans-serif;
    font-size: 28px;
    font-weight: 500;
    line-height: 32px;
  }
  ol {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
  }

  /* --- components --- */
  .swiper-slide {
    flex: var(--swiper-slide-flex);
    align-items: center;
    display: flex;
  }
  /* cosmy reset (margin-right:0) — no-op on jaumo (UA default is 0 too). */
  .swiper-slide.testimonials_item {
    margin-right: 0;
  }
  .brand.w--current {
    align-items: center;
  }
  /* jaumo current-page nav label colour (jaumo-only markup hook). */
  .text-regular-21.u-text-color-white.w--current {
    color: var(--colors--primary--primary);
  }
  .title-40 {
    color: var(--colors--neutral--white);
    letter-spacing: -0.06rem;
    font-family: var(--title-40-font, Gamuthdisplay, Verdana, sans-serif);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 120%;
  }
  .nav {
    border-bottom: var(--nav-border-bottom, 0 solid #0000);
    background-color: var(--nav-bg, var(--colors--neutral--900));
    position: fixed;
    inset: 0% 0% auto;
  }
  .download-btn {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
    color: #fff;
    background-color: #46485400;
    border: 1px solid var(--colors--neutral--white);
    border-radius: 100px;
    justify-content: center;
    align-items: center;
    height: 3.5rem;
    padding: 0.5rem 2rem;
    text-decoration: none;
    transition: opacity 0.2s;
    display: flex;
    font-family: var(--download-btn-font, Satoshi, Arial, sans-serif);
  }
  .content-wrapper.mw-433 {
    max-width: 27.06rem;
  }
  .text-bold-17 {
    font-size: 1.06rem;
    font-weight: 700;
    line-height: 150%;
  }
  .text-bold-21 {
    font-size: 1.31rem;
    font-weight: 700;
    line-height: 150%;
  }
  .padding-section-136._pb-80 {
    padding-bottom: 5rem;
  }
  .padding-section-136._pb-48 {
    padding-bottom: 3rem;
  }
  /* rich-text bold: jaumo overrides the base `strong` (Arial) with its body
     font (Satoshi) via the token; cosmy leaves it unset → the Arial fallback. */
  .rich-text strong {
    font-family: var(--rich-strong-font, Arial, Helvetica Neue, Helvetica, sans-serif);
    font-weight: 700;
  }
  .section_safety-hero {
    padding-top: 8.5rem;
    padding-bottom: 5rem;
    overflow: hidden;
  }
  .safety_hero_heading-wrapper {
    grid-column-gap: 2.44rem;
    grid-row-gap: 2.44rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    max-width: 57rem;
    display: flex;
  }
  .safety_component {
    grid-column-gap: 3.75rem;
    grid-row-gap: 3.75rem;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: flex;
  }
}

@layer webflow-responsive {
  @media screen and (min-width: 1440px) {
    h2,
    h3,
    h6 {
      font-family: Satoshi, Arial, sans-serif;
    }
    p {
      font-family: Satoshi, Arial, sans-serif;
      font-weight: 400;
      line-height: 28px;
    }
  }
  @media screen and (min-width: 1920px) {
    .downloadbutton:hover {
      background-color: var(--yellow-cosmy);
      mix-blend-mode: normal;
    }
  }
  @media screen and (max-width: 991px) {
    .swiper-slide {
      width: 200px;
    }
    .nav-link:hover {
      color: #c8c8c8;
    }
    .nav_link:hover,
    .nav_link.w--current {
      color: #fff;
    }
    .menu-icon_line-top {
      background-color: var(--colors--neutral--white);
      border-radius: 6.25rem;
      width: 24px;
      height: 2.1px;
      padding-bottom: 0;
      padding-right: 0;
    }
    .menu-icon_line-bottom {
      background-color: var(--colors--neutral--white);
      border-radius: 6.25rem;
      width: 24px;
      height: 2px;
      padding-bottom: 0;
      padding-right: 0;
    }
    .menu-icon_line-middle {
      background-color: var(--colors--neutral--white);
      border-radius: 6.25rem;
      justify-content: center;
      align-items: center;
      width: 24px;
      height: 2px;
      margin-top: 6px;
      margin-bottom: 6px;
      padding-bottom: 0;
      padding-right: 0;
      display: flex;
    }
  }
  @media screen and (max-width: 767px) {
    h1 {
      font-size: 40px;
      margin-bottom: var(--h-mb-767-h1, 0px);
    }
    h2 {
      font-size: 32px;
      margin-bottom: var(--h-mb-767-h2, 16px);
    }
    h3 {
      font-size: 28px;
      margin-bottom: var(--h-mb-767-h3, 12px);
    }
    h4 {
      font-size: 24px;
      line-height: 30px;
    }
    .title-50 {
      margin-bottom: 0;
    }
  }
  @media screen and (max-width: 479px) {
    h1 {
      font-size: 40px;
      margin-bottom: var(--h-mb-479-h1, 0px);
    }
    h2 {
      font-size: 32px;
      line-height: 38px;
    }
    .swiper-slide {
      width: var(--swiper-slide-w-479, 250px);
      margin-right: var(--swiper-slide-mr-479, 5px);
      display: block;
    }
    .nav-link:hover {
      color: #c8c8c8;
    }
    .title-50 {
      margin-bottom: 0;
      font-size: 2rem;
      line-height: 130%;
    }
    .text-regular-21 {
      font-size: 1.06rem;
    }
    .title-40 {
      font-size: 1.5rem;
    }
    .nav {
      height: 3.8rem;
      padding-top: 0.25rem;
      padding-bottom: 0.25rem;
    }
    .text-semibold-21 {
      font-size: 1.06rem;
    }
    .title-60 {
      font-size: var(--title-60-fs-479, 2rem);
    }
    .title-60.u-text-align-center.mob-align-left {
      text-align: left;
    }
    .padding-section-100._pb-0._mob-pb-32 {
      padding-bottom: 2rem;
    }
    .u-mob-pb-8 {
      padding-bottom: 0.5rem;
      padding-right: 0;
    }
    .u-mob-pb-24 {
      padding-bottom: 1.5rem;
      padding-right: 0;
    }
    .padding-bottom-24 {
      padding-bottom: 1rem;
    }
    .padding-section-80.u-mob-pt-0 {
      padding-top: 0;
      padding-bottom: 3rem;
    }
    .u-text-wrap-balance {
      text-wrap: balance;
    }
    .section_safety-hero {
      padding-top: 5rem;
      padding-bottom: 2rem;
    }
    .safety_hero_heading-wrapper {
      grid-column-gap: 1.5rem;
      grid-row-gap: 1.5rem;
      justify-content: flex-start;
      align-items: flex-start;
    }
    .safety_component {
      grid-column-gap: 1.5rem;
      grid-row-gap: 1.5rem;
    }
  }
}