@charset "UTF-8";
.rounded {
  border-radius: 8px;
}

.bg-brand {
  background-color: #2e8bff;
}

.bg-orange {
  background-color: #f66049;
}

.bg-green {
  background-color: #2dbc3c;
}

.bg-black {
  background-color: #000000;
}

.bg-white {
  background-color: #ffffff;
}

@font-face {
  font-family: "Roboto Flex";
  src: url("assets/fonts/roboto-flex.woff2") format("woff2-variations"), url("assets/fonts/roboto-flex.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto";
  src: url("assets/fonts/roboto-flex.woff2") format("woff2-variations"), url("assets/fonts/roboto-flex.woff2") format("woff2");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
/**
  * placeholders
  * this file should be 1:1 with _placeholders
  * reason is extends classes should be available
  globally for templates to use% placeholders
  are the same version, except they dont generate
  additional css when you want to use these same classes
  in scss files instead%

  if you ran @extend %class, then these "extends" classes
  would need to be either imported into every scss file and rendered,
  or available globally in which case they are also rendered

  placeholders are not rendered
  */
/**
* flex helpers
*/
/**
  * text classes
  */
/**
  * utility
  */
h1,
.h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}

h2,
.h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}

h3,
.h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}

h4,
.h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}

h5,
.h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}

h6,
.h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}

.heading-7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}

h1 span,
h1 b,
h1 strong,
h1 em,
h1 i,
h2 span,
h2 b,
h2 strong,
h2 em,
h2 i,
h3 span,
h3 b,
h3 strong,
h3 em,
h3 i,
h4 span,
h4 b,
h4 strong,
h4 em,
h4 i,
h5 span,
h5 b,
h5 strong,
h5 em,
h5 i,
h6 span,
h6 b,
h6 strong,
h6 em,
h6 i,
.h1 span,
.h1 b,
.h1 strong,
.h1 em,
.h1 i,
.h2 span,
.h2 b,
.h2 strong,
.h2 em,
.h2 i,
.h3 span,
.h3 b,
.h3 strong,
.h3 em,
.h3 i,
.h4 span,
.h4 b,
.h4 strong,
.h4 em,
.h4 i,
.h5 span,
.h5 b,
.h5 strong,
.h5 em,
.h5 i,
.h6 span,
.h6 b,
.h6 strong,
.h6 em,
.h6 i,
.heading-7 span,
.heading-7 b,
.heading-7 strong,
.heading-7 em,
.heading-7 i {
  font-family: inherit;
}

.body-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 20px;
  line-height: 160%;
}

.body-regular {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}

.body-small {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}

.body-tiny {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 12px;
}

.body-small-to-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}
@media (min-width: 985px) {
  .body-small-to-large {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 20px;
    line-height: 160%;
  }
}

body {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}

p,
span {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
  margin: 0;
}

a {
  color: #2e8bff;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.bold {
  font-weight: 700 !important;
}

.italic {
  font-style: italic !important;
}

.text-brand {
  color: #2e8bff !important;
}

.text-pink {
  color: #e87594 !important;
}

.text-gold {
  color: #f9c97f !important;
}

.text-dark {
  color: #26355e !important;
}

.text-error {
  color: #e55263 !important;
}

.text-secondary {
  opacity: 0.7;
}

.text-crossed {
  text-decoration: line-through;
  text-decoration-color: #e55263;
}

.text-underline {
  text-decoration: underline;
}

.heading-number {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
  font-size: 140px;
  color: #2e8bff;
}

.form-label {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
  font-weight: 700;
  color: #eceef3;
  min-height: 20px;
}

.r-h1-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h1-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h1-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h1-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h1-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h1-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h1-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 72px;
  line-height: 110%;
  letter-spacing: 2px;
}
@media (min-width: 985px) {
  .r-h1-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h2-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h2-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h2-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h2-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h2-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h2-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h2-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 40px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h2-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h3-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h3-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h3-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h3-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h3-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h3-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h3-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 32px;
  line-height: 110%;
}
@media (min-width: 985px) {
  .r-h3-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h4-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h4-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h4-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h4-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h4-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h4-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h4-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 24px;
}
@media (min-width: 985px) {
  .r-h4-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h5-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h5-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h5-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h5-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h5-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h5-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h5-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 18px;
}
@media (min-width: 985px) {
  .r-h5-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h6-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h6-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h6-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h6-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h6-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h6-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h6-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-h6-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-h7-to-h1 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h1 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 72px;
    line-height: 110%;
    letter-spacing: 2px;
  }
}
.r-h7-to-h2 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h2 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 40px;
    line-height: 110%;
  }
}
.r-h7-to-h3 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h3 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 32px;
    line-height: 110%;
  }
}
.r-h7-to-h4 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h4 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 24px;
  }
}
.r-h7-to-h5 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h5 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 18px;
  }
}
.r-h7-to-h6 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h6 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 14px;
  }
}
.r-h7-to-h7 {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
  font-weight: 500;
  line-height: 120%;
  letter-spacing: 1px;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-h7-to-h7 {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-family: var(--w2w-nb-font-display, "Roboto", sans-serif);
    font-weight: 500;
    line-height: 120%;
    letter-spacing: 1px;
    font-size: 12px;
  }
}
.r-body-large-to-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 20px;
  line-height: 160%;
}
@media (min-width: 985px) {
  .r-body-large-to-large {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 20px;
    line-height: 160%;
  }
}
.r-body-large-to-regular {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 20px;
  line-height: 160%;
}
@media (min-width: 985px) {
  .r-body-large-to-regular {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 16px;
  }
}
.r-body-large-to-small {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 20px;
  line-height: 160%;
}
@media (min-width: 985px) {
  .r-body-large-to-small {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 14px;
  }
}
.r-body-large-to-tiny {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 20px;
  line-height: 160%;
}
@media (min-width: 985px) {
  .r-body-large-to-tiny {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 12px;
  }
}
.r-body-regular-to-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}
@media (min-width: 985px) {
  .r-body-regular-to-large {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 20px;
    line-height: 160%;
  }
}
.r-body-regular-to-regular {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}
@media (min-width: 985px) {
  .r-body-regular-to-regular {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 16px;
  }
}
.r-body-regular-to-small {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}
@media (min-width: 985px) {
  .r-body-regular-to-small {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 14px;
  }
}
.r-body-regular-to-tiny {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 16px;
}
@media (min-width: 985px) {
  .r-body-regular-to-tiny {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 12px;
  }
}
.r-body-small-to-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-body-small-to-large {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 20px;
    line-height: 160%;
  }
}
.r-body-small-to-regular {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-body-small-to-regular {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 16px;
  }
}
.r-body-small-to-small {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-body-small-to-small {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 14px;
  }
}
.r-body-small-to-tiny {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 14px;
}
@media (min-width: 985px) {
  .r-body-small-to-tiny {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 12px;
  }
}
.r-body-tiny-to-large {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-body-tiny-to-large {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 20px;
    line-height: 160%;
  }
}
.r-body-tiny-to-regular {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-body-tiny-to-regular {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 16px;
  }
}
.r-body-tiny-to-small {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-body-tiny-to-small {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 14px;
  }
}
.r-body-tiny-to-tiny {
  font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
  font-style: normal;
  margin: 0;
  color: #eceef3;
  font-weight: 400;
  line-height: 140%;
  text-transform: none;
  font-size: 12px;
}
@media (min-width: 985px) {
  .r-body-tiny-to-tiny {
    font-family: var(--w2w-nb-font-body, "Roboto", sans-serif);
    font-style: normal;
    margin: 0;
    color: #eceef3;
    font-weight: 400;
    line-height: 140%;
    text-transform: none;
    font-size: 12px;
  }
}

/**
  * buttons
  */
.button {
  font-variation-settings: "wdth" 114, "XTRA" 600, "XOPQ" 96, "YOPQ" 79, "YTLC" 530, "YTUC" 690, "YTAS" 740, "YTDE" -180, "YTFI" 738;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  height: 48px;
  border-radius: 40px;
  border: none;
  font-family: "Roboto";
  font-size: 12px;
  font-style: normal;
  font-weight: 1000;
  line-height: normal;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out;
}
.button.primary {
  background: #2e8bff;
  color: #26355e;
}
.button.pink {
  background: #e87594;
  color: #26355e;
}
.button.secondary {
  background: #dfd8cc;
  color: #26355e;
}
.button.white {
  background: #eceef3;
  color: #26355e;
}
.button.black {
  background: #121418;
  color: #eceef3;
}
.button.bigger {
  height: 56px;
}
.button.tiny {
  height: 28px;
  padding: 16px 12px;
}
.button[disabled] {
  pointer-events: none;
  border: none;
  cursor: not-allowed;
  opacity: 0.5;
}
@media (min-width: 985px) {
  .button:hover {
    cursor: pointer;
    padding-left: 24px;
    padding-right: 16px;
  }
}

/**
  * root
  */
body {
  margin: 0 auto;
  overflow: overlay;
  background: #181b20;
}
body.pink-theme {
  background: #241c27;
}
body.pink-theme .footer-container .spot:not(.untouchable) {
  color: #e87594;
  opacity: 0.3;
}

/**
  * page
  */
.page {
  margin-top: 56px;
}
.page.with-banner {
  margin-top: 120px;
}
@media (min-width: 942px) {
  .page {
    margin-top: 56px;
  }
  .page.with-banner {
    margin-top: 96px;
  }
}
.page {
  align-items: center;
  color: #ffffff;
}

/**
  * inputs
  */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";
  -webkit-transition-delay: 9999s;
}

/**
  * section
  */
section,
.section {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
section > .container,
.section > .container {
  max-width: 1200px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}
@media (min-width: 599px) {
  section > .container,
  .section > .container {
    gap: 24px;
    padding: 40px;
  }
}
@media (min-width: 1019px) {
  section > .container,
  .section > .container {
    gap: 40px;
    gap: 24px;
  }
}
.gaps {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 599px) {
  .gaps {
    gap: 24px;
  }
}

/**
  * iframe
  */
iframe {
  border: 0;
}

.cart_item_count {
  position: absolute;
  top: -10px;
  right: -10px;
  background-color: #2e8bff;
  border-radius: 40px;
  width: 40px;
  height: 40px;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #000000;
  font-size: 16px;
}

/**
  * visibility
  */
.hidden {
  display: none !important;
}

@media (min-width: 985px) {
  .hidden-desktop {
    display: none !important;
  }
}
@media (max-width: 985px) {
  .hidden-mobile {
    display: none !important;
  }
}
/* Util */
.clickable {
  cursor: pointer;
}

/* hide horizontal scrollbar when using 100vw for containers */
body {
  overflow-x: hidden;
}

.flex-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.checklist-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.checklist-column-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 1019px) {
  .checklist-column-wrapper {
    flex-direction: row;
    gap: 24px;
  }
}

.no-list {
  list-style: none;
}

.nowrap {
  white-space: nowrap;
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100% !important;
}

.error-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.error-modal .button {
  align-self: end;
}

.vfm__overlay.vfm--overlay {
  background-color: rgba(24, 27, 32, 0.8);
}

/**
  * accessibility improvements
  */
p > a {
  text-decoration: underline !important;
}

/**
 * `@styles/custom/_fonts.scss` was copied into sass/@styles/ along with every
 * other Vue global partial (see the file header above) but never actually
 * `@use`d until now — a gap that outdates this migration, not introduced by
 * it. Reported 2026-08-03 as "fonts aren't pulling in"; measuring
 * `document.fonts` and computed `font-family` both looked fine (they report
 * the CSS as *declared*, not what actually matched), so the real check was
 * `document.styleSheets`' own `CSSFontFaceRule` entries, which showed only
 * one family registered: "Roboto Flex", from sass/abstracts/_tokens.scss's
 * own long-standing `@font-face` block.
 *
 * The Vue app's own font file registers the SAME woff2 under two family
 * names — "Roboto Flex" AND "Roboto" — because its codebase uses both:
 * "Roboto" in the older _typography.scss / _buttons.scss, "Roboto Flex" in
 * 16+ newer component styles. Every transplanted component stylesheet in
 * this theme carries that same bare `font-family: "Roboto"` verbatim (68
 * occurrences on the membership-bloodwork page alone), because copying it
 * unchanged is correct per docs/migration/lessons.md #1 — but with no
 * `@font-face` registered under that exact name, every one of those
 * declarations silently fell through to the browser's generic sans-serif.
 * Visually close enough at a glance to read as "the font looks a bit off"
 * rather than "missing" — which is what made it easy to miss the first few
 * passes and confirm as fine.
 *
 * `_fonts.scss`'s own font-display is `swap`, not `_tokens.scss`'s
 * `optional` — `_fonts.scss`'s header explains why: `optional` gave the
 * browser only a ~100ms window and, on a cache miss, permanently fell back
 * to a system font for that page load. Both declare the "Roboto Flex"
 * family/weight range identically, and browsers use whichever `@font-face`
 * for a given family was declared last, so `_fonts.scss` (`@use`d after
 * `_tokens.scss` loads, since vue-globals.css is enqueued before style.css)
 * wins for that family. `_tokens.scss`'s block is now redundant — worth
 * deleting next time that file is touched, so the theme isn't carrying two
 * declarations of the same family with different behaviour.
 */
/**
 * WordPress body-class collisions.
 *
 * In the Vue app `.page` is a route wrapper <div>, so `_global.scss` gives it
 * `display: flex; flex-direction: column; align-items: center` plus a
 * navbar-clearing `margin-top`. WordPress independently puts a `page` class on
 * <body> for any page request, so importing that rule unchanged turns <body>
 * into a centred flex column and collapses #page to its content width.
 *
 * `.page` is the only Vue global whose name collides with a WordPress body
 * class (the others emitted here are .gaps, .cart_item_count, .hidden,
 * .clickable, .flex-center, .checklist-column, .no-list, .nowrap, .w-100,
 * .h-100, .error-modal).
 */
body.page {
  display: block;
  margin-top: 0;
  align-items: initial;
  color: #eceef3;
}