/* ========================= */
/* CSS Variables & Reset      */
/* ========================= */
:root {
  --white: white;
  --bg-pale: #e8efe4;
  --dark-green: #335c30;
  --bg-light: #b6cba5;
  --light-green: #90b96d;

  /* Scaling System by Osmo */
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 2560px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* Easing curves */
  --default-ease: cubic-bezier(.72, .17, .17, 1);
  --smooth-ease: cubic-bezier(.32, .72, 0, 1);
  --bouncy-ease: cubic-bezier(.34, 1.42, .64, 1);
  --elastic-ease-out: linear(
    0, .5737 7.6%, .8382 11.87%, .9463 14.19%, 1.0292 16.54%,
    1.0886 18.97%, 1.1258 21.53%, 1.137 22.97%, 1.1424 24.48%,
    1.1423 26.1%, 1.1366 27.86%, 1.1165 31.01%, 1.0507 38.62%,
    1.0219 42.57%, .9995 46.99%, .9872 51.63%, .9842 58.77%,
    1.0011 81.26%, 1
  );

  /* Grid */
  --grid-margin: 2.5em;
  --grid-columns: 12;
  --grid-gutter: 1.25em;
  --grid-column-width: calc(
    ((var(--vw, 1vw) * 100) - (2 * var(--grid-margin))) / var(--grid-columns) -
    (var(--grid-gutter) * (var(--grid-columns) - 1) / var(--grid-columns))
  );
  --grid: repeat(var(--grid-columns), minmax(0, 1fr));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 640;
    --size-container-min: 768px;
    --size-container-max: 991px;
    --grid-margin: 1.25em;
    --grid-columns: 6;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: initial;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
}

body {
  font-size: var(--size-font);
  background-color: var(--bg-pale);
  font-family: 'Founders Grotesk Condensed', Arial, sans-serif;
  font-weight: 400;
  margin: 0;
  overscroll-behavior: none;
  width: 100%;
  height: 100%;
}

::selection {
  color: var(--bg-pale);
  background: var(--dark-green);
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* ========================= */
/* Grid Layout                */
/* ========================= */
.grid-layout {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  grid-template-rows: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  position: relative;
}

/* ========================= */
/* Navbar                     */
/* ========================= */
.navbar {
  background-color: transparent;
  position: absolute;
  inset: 0% 0% auto;
  z-index: 1000;
}

.nav-container {
  width: 100%;
  height: 100%;
  padding: 2.5em 2.5em 0;
  position: relative;
}

.nav-social-media-inner {
  grid-column: span 3;
  grid-column-gap: .3125em;
  grid-row-gap: .3125em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.nav-link-inner {
  grid-column: span 6;
  grid-column-gap: .625em;
  grid-row-gap: .625em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.nav-button {
  grid-column: span 3;
  justify-self: end;
  align-self: start;
}

.nav-link {
  color: var(--white);
  letter-spacing: -.03em;
  user-select: none;
  font-size: 1.5625em;
  font-weight: 500;
  line-height: 92%;
  display: grid;
}

.nav-text {
  background-color: rgba(51, 92, 48, 0.2);
  border-radius: 2em;
  grid-area: 1/1;
  padding: .1275em .4475em .2125em;
  transition: translate .725s var(--elastic-ease-out),
              rotate .725s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease),
              box-shadow .35s var(--smooth-ease);
}

/* Nav link hover effects */
@media (hover: hover) and (pointer: fine) {
  .nav-link:is(:hover, :focus-visible) .nav-text {
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .725s .1s var(--elastic-ease-out),
                rotate .725s .1s var(--elastic-ease-out),
                scale .15s .1s var(--default-ease),
                transform .35s .25s var(--bouncy-ease),
                box-shadow .35s var(--smooth-ease);
  }

  .nav-link:is(:hover, :focus-visible):nth-child(1) .nav-text {
    translate: -.125em -.325em 0;
    rotate: -4deg;
  }

  .nav-link:is(:hover, :focus-visible):nth-child(2) .nav-text {
    translate: -.0675em -.4em 0;
    rotate: -1deg;
  }

  .nav-link:is(:hover, :focus-visible):nth-child(3) .nav-text {
    translate: .125em -.325em 0;
    rotate: 3deg;
  }
}

.nav-link:is(:focus-visible) {
  outline: none;
}

.nav-link:is(:focus-visible) .nav-text {
  box-shadow: 0 0 0 3px var(--dark-green);
}

/* ========================= */
/* Social Media               */
/* ========================= */
.social-media-link {
  user-select: none;
  display: grid;
}

.social-media-circle {
  background-color: var(--bg-pale);
  border-radius: 50%;
  grid-area: 1/1;
  place-content: center;
  width: 2.5em;
  height: 2.5em;
  display: grid;
  transition: translate .725s var(--elastic-ease-out),
              rotate .725s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease),
              box-shadow .35s var(--smooth-ease);
}

.social-media-icon {
  width: 1.5em;
  height: 1.5em;
}

/* Social media hover effects */
@media (hover: hover) and (pointer: fine) {
  .social-media-link:is(:hover, :focus-visible) .social-media-circle {
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .725s .1s var(--elastic-ease-out),
                rotate .725s .1s var(--elastic-ease-out),
                scale .15s .1s var(--default-ease),
                transform .35s .25s var(--bouncy-ease),
                box-shadow .35s var(--smooth-ease);
  }

  .social-media-link:is(:hover, :focus-visible):nth-child(1) .social-media-circle {
    translate: -.125em -.325em 0;
    rotate: -4deg;
  }

  .social-media-link:is(:hover, :focus-visible):nth-child(2) .social-media-circle {
    translate: -.0675em -.4em 0;
    rotate: -1deg;
  }

  .social-media-link:is(:hover, :focus-visible):nth-child(3) .social-media-circle {
    translate: .125em -.325em 0;
    rotate: 3deg;
  }
}

.social-media-link:is(:focus-visible) {
  outline: none;
}

.social-media-link:is(:focus-visible) .social-media-circle {
  box-shadow: 0 0 0 3px var(--dark-green);
}

/* ========================= */
/* Button                     */
/* ========================= */
.button {
  z-index: 1;
  color: var(--white);
  user-select: none;
  flex: none;
  justify-content: center;
  align-items: stretch;
  text-decoration: none;
  display: flex;
  position: relative;
}

.button.is-white {
  color: var(--dark-green);
}

.button-cycle {
  pointer-events: none;
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  display: grid;
}

.button-cycle.is-second {
  position: absolute;
  top: -.125em;
  right: 0;
}

.button-arrow {
  z-index: 1;
  grid-area: 1/1;
  place-self: center;
  width: .625em;
  height: .625em;
}

.button-bg {
  z-index: 2;
  background-color: var(--dark-green);
  border-radius: 12.5em;
  justify-content: center;
  align-items: center;
  padding: .3125em .9375em .5625em;
  display: flex;
  position: relative;
  transition: translate .8s var(--elastic-ease-out),
              rotate .8s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease),
              box-shadow .35s var(--smooth-ease);
}

.button-bg.white-bg {
  background-color: var(--bg-pale);
}

.button-text {
  letter-spacing: -.02em;
  font-size: 2em;
  font-weight: 500;
  line-height: 80%;
}

.dark-font {
  color: var(--dark-green);
}

.button-cycle-bg {
  background-color: var(--dark-green);
  border-radius: 50%;
  grid-area: 1/1;
  transition: scale .75s var(--elastic-ease-out),
              opacity .15s ease-out;
}

.button-cycle-bg.white-bg {
  background-color: var(--bg-pale);
}

.button-cycle.is-second .button-cycle-bg {
  scale: 0;
  opacity: 0;
  transition: scale .75s var(--elastic-ease-out),
              opacity .15s .1s ease-out;
}

.button-cycle.is-first .button-arrow {
  transition: translate .3s .15s var(--bouncy-ease),
              scale .3s .1s var(--default-ease),
              opacity .15s .15s ease-out,
              filter .15s .15s ease-out;
}

.button-cycle.is-second .button-arrow {
  transition: translate .75s var(--elastic-ease-out),
              scale .3s var(--default-ease),
              opacity .15s .05s ease-out,
              filter .15s .05s ease-out;
  translate: -.75em .75em 0;
  filter: blur(.5rem);
  opacity: 0;
  scale: .625;
}

/* Button hover effects */
@media (hover: hover) and (pointer: fine) {
  .button:is(:hover, :focus-visible) .button-bg {
    translate: -2.5em -.325em 0;
    rotate: -4deg;
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .8s .1s var(--elastic-ease-out),
                rotate .8s .1s var(--elastic-ease-out),
                scale .15s .1s var(--default-ease),
                transform .35s .25s var(--bouncy-ease),
                box-shadow .35s var(--smooth-ease);
  }

  .button:is(:hover, :focus-visible) .button-cycle.is-first .button-cycle-bg {
    scale: 0;
    opacity: 0;
    transition: scale .35s var(--default-ease),
                opacity .15s .15s ease-out;
  }

  .button:is(:hover, :focus-visible) .button-cycle.is-first .button-arrow {
    translate: -.75em .75em 0;
    filter: blur(.5rem);
    opacity: 0;
    scale: .625;
    transition: translate .75s .1s var(--elastic-ease-out),
                scale .25s .1s var(--default-ease),
                opacity .1s .15s ease-out,
                filter .1s .15s ease-out;
  }

  .button:is(:hover, :focus-visible) .button-cycle.is-second .button-cycle-bg {
    scale: 1;
    opacity: 1;
    transition: scale .75s .1s var(--elastic-ease-out),
                opacity .15s ease-out;
  }

  .button:is(:hover, :focus-visible) .button-cycle.is-second .button-arrow {
    translate: 0 0 0;
    filter: blur(0);
    opacity: 1;
    scale: 1;
    transition: translate .3s .2s var(--bouncy-ease),
                scale .3s .15s var(--default-ease),
                opacity .15s .2s ease-out,
                filter .15s .2s ease-out;
  }
}

.button:is(:focus-visible) {
  outline: none;
}

.button:is(:focus-visible) .button-bg {
  box-shadow: 0 0 0 3px var(--white);
}

.button:is(:focus-visible) .button-bg.white-bg {
  box-shadow: 0 0 0 3px var(--dark-green);
}

/* ========================= */
/* Stage / Hero Section       */
/* ========================= */
.stage {
  background-color: var(--bg-light);
  padding-bottom: 6.875em;
  position: relative;
  overflow: clip;
}

.stage-overlay {
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: color-burn;
  background-image: url('https://cdn.prod.website-files.com/686c09a33211842a0ac0183d/68b0b1e2ae528702c898a058_pattern.png');
  background-position: 0 0;
  background-size: 7rem 7rem;
  position: absolute;
  inset: 0%;
}

.stage-container {
  padding-top: 4.625em;
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.stage-inner {
  position: relative;
}

.stage-content {
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

/* Logo */
.stage-logo {
  color: var(--dark-green);
  width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter) * (8 - 1)));
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
  height: max(12.5em, 34svh);
  display: flex;
}

.stage-logo-svg {
  width: 100%;
  max-height: 100%;
}

.stage-logo-text {
  color: var(--dark-green);
  font-size: 12em;
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 80%;
  text-align: center;
  white-space: nowrap;
}

/* CTA */
.stage-cta {
  flex: none;
}

/* Stage Wrap (grid with left/right) */
.stage-wrap {
  grid-template-columns: var(--grid);
  grid-gap: var(--grid-gutter);
  flex: none;
  width: 100%;
  display: grid;
}

.stage-left {
  grid-column: 7 span;
  display: grid;
  position: relative;
}

.stage-right {
  grid-column: 5 span;
}

/* Decorative elements */
.stage-deco {
  grid-area: 1/1;
  position: relative;
  z-index: 3;
  pointer-events: none;
}

.stage-deco-text-wrap {
  display: grid;
  position: absolute;
  top: 5%;
}

.stage-deco-text {
  grid-area: 1/1;
  width: 8.9375em;
  height: auto;
}

.stage-deco-arrow-wrap {
  display: grid;
  position: absolute;
  top: 13%;
  left: 1%;
}

.stage-deco-arrow {
  grid-area: 1/1;
  width: 2.8125em;
  height: auto;
}

/* Wiggle animation */
@media (prefers-reduced-motion: no-preference) {
  .is-wiggle {
    animation: wiggle .8s steps(7, end) infinite;
    animation-delay: var(--animation-delay);
  }
}

@keyframes wiggle {
  0% { transform: translateY(1px); }
  20% { transform: translate(-1px, -1px); }
  32% { transform: translate(0); }
  48% { transform: translate(0); }
  64% { transform: translate(1px); }
  80% { transform: translateY(-1px); }
  to { transform: translate(0); }
}

/* Product Visual */
.stage-visual {
  pointer-events: none;
  z-index: 1;
  grid-area: 1/1;
  justify-content: center;
  align-items: flex-start;
  margin-left: auto;
  display: flex;
}

.stage-canvas {
  aspect-ratio: 977 / 1148;
  width: 100%;
  max-width: 30.5em;
  height: auto;
  position: relative;
  top: -1.25em;
  left: -15%;
}

.stage-visual-img {
  user-select: none;
  will-change: transform, opacity;
  contain: paint;
  backface-visibility: hidden;
  width: 30.5em;
  height: auto;
  position: relative;
  top: -1.25em;
  left: 8%;
}

/* Fact circles */
.stage-facts {
  grid-area: 1/1;
  z-index: 2;
}

.stage-fact-outer {
  pointer-events: auto;
  cursor: default;
}

.stage-fact {
  grid-column-gap: .3125em;
  grid-row-gap: .3125em;
  background-color: var(--bg-pale);
  will-change: transform;
  border-radius: 100%;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 8.75em;
  height: 8.75em;
  display: flex;
  position: absolute;
  inset: 0%;
}

.stage-fact.is-first {
  top: 4%;
  left: 24%;
}

.stage-fact.is-second {
  top: 15.5%;
  left: 9%;
}

.stage-fact.is-third {
  top: 31.5%;
}

.stage-fact-wrap {
  grid-column-gap: .0625em;
  grid-row-gap: .0625em;
  justify-content: center;
  align-items: flex-end;
  display: flex;
}

.stage-fact-number {
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 3.25em;
  font-weight: 600;
  line-height: 70%;
}

.stage-fact-unit {
  color: var(--dark-green);
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 1.875em;
  font-weight: 600;
  line-height: 70%;
}

.stage-fact-text {
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 1.25em;
  font-weight: 500;
  line-height: 92%;
}

/* Stage background ellipse */
.stage-bg {
  color: var(--white);
  grid-area: 1/1;
  padding-top: 1.875em;
  padding-left: 1.75em;
  padding-right: 1.75em;
}

/* Right side text */
.stage-text-wrap {
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  text-align: center;
  flex-flow: column;
  padding-top: .625em;
  display: flex;
}

h1 {
  color: var(--white);
  letter-spacing: -.03em;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 7em;
  font-weight: 600;
  line-height: 70%;
}

.hero-heading {
  color: var(--dark-green);
}

.white-span {
  color: var(--white);
}

.paragraph {
  color: var(--dark-green);
  letter-spacing: -.03em;
  margin-bottom: 0;
  font-size: 1.875em;
  line-height: 92%;
}

.paragraph.is-stage-paragraph {
  max-width: 27ch;
}

.stage-paragraph-wrap {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.stage-subline-wrap {
  padding-left: 12.575em;
  display: grid;
}

.subline-img {
  user-select: none;
  grid-area: 1/1;
  width: 9.375em;
  height: auto;
  margin-top: -.4375em;
  padding-top: 0;
}

/* ========================= */
/* Marquee                    */
/* ========================= */
.marquee {
  z-index: 2;
  width: 100%;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-x: clip;
}

.marquee-inner {
  display: grid;
}

.marquee-bg-svg {
  color: #214a1e;
  grid-area: 1/1;
}

.marquee-text-svg {
  z-index: 1;
  grid-area: 1/1;
  margin-top: 8.5em;
}

.marquee-text-svg text {
  fill: var(--bg-light);
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 11rem;
  font-weight: 600;
  line-height: 70%;
  font-family: 'Founders Grotesk Condensed', Arial, sans-serif;
  user-select: none;
}

.marquee-overlay {
  z-index: -1;
  background-color: var(--bg-pale);
  clip-path: polygon(66% 10%, 100% 53%, 100% 100%, 0 100%, 0 79%);
  grid-area: 1/1;
  position: relative;
  bottom: -1px;
}

/* ========================= */
/* Insider Section            */
/* ========================= */
.insider-section {
  z-index: 2;
  background-color: var(--bg-pale);
  width: 100%;
  height: 100%;
  margin-top: -3.75em;
  padding-bottom: 10em;
  position: relative;
}

.insider-container {
  width: 100%;
  height: 100%;
  padding-bottom: 2em;
  padding-left: 2.5em;
  padding-right: 2.5em;
  position: relative;
}

.insider-heading {
  grid-column: span 12;
  place-self: center;
  color: var(--dark-green);
  text-align: center;
  letter-spacing: -.03em;
  font-size: 6.25em;
  line-height: 80%;
}

.light-green-span {
  color: var(--light-green);
}

.insider-wrapper {
  grid-column: span 12;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  grid-template-rows: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-columns: 1fr;
  width: 100%;
  margin-top: 7.5em;
  display: grid;
}

/* Testimonial video cards */
.testimonial-wrapper {
  z-index: 1;
  grid-column: span 7;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: grid;
  position: relative;
}

.testimonial-inner-wrap.is-first {
  position: relative;
  top: 3.75em;
  left: -8.5625em;
  rotate: -12deg;
}

.testimonial-inner-wrap.is-second {
  position: relative;
  top: 11.875em;
  left: -13.9375em;
  rotate: -2.5deg;
}

.testimonial-inner-wrap.is-third {
  position: relative;
  top: -2.6875em;
  left: -25em;
  rotate: 5.5deg;
}

.testimonial-inner {
  grid-column-gap: .625em;
  grid-row-gap: .625em;
  background-color: var(--white);
  border-radius: .375em;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  width: 23.4375em;
  height: 100%;
  padding: .875em;
  display: flex;
  position: relative;
}

.testimonial-media {
  aspect-ratio: 9 / 16;
  background-color: var(--bg-light);
  object-fit: cover;
  border-radius: .375em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.testimonial-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: .375em;
}

.testimonial-sound-btn {
  -webkit-backdrop-filter: blur(.375em);
  backdrop-filter: blur(.375em);
  color: var(--white);
  background-color: color-mix(in hsl, var(--dark-green), transparent 65%);
  border: none;
  border-radius: 50%;
  place-content: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: grid;
  position: absolute;
  bottom: 1.5em;
  right: 1.5em;
  cursor: pointer;
  transition: scale .75s var(--elastic-ease-out),
              background-color .25s var(--smooth-ease);
}

.testimonial-sound-btn.is-top {
  top: 1.5em;
  bottom: auto;
}

.testimonial-sound-btn:active {
  scale: .9;
}

@media (hover: hover) and (pointer: fine) {
  .testimonial-sound-btn:is(:hover, :focus-visible) {
    background-color: color-mix(in hsl, var(--dark-green), transparent 35%);
  }
}

.testimonial-sound-button-icon {
  grid-area: 1/1;
  width: 1em;
  height: 1em;
}

.testimonial-sound-button-icon.is-first {
  transition: opacity .15s .05s ease-out,
              scale .75s .05s var(--elastic-ease-out),
              rotate .75s .05s var(--elastic-ease-out);
}

.is-clicked .testimonial-sound-button-icon.is-first {
  opacity: 0;
  scale: .5;
  rotate: -30deg;
  transition: opacity .15s ease-out,
              scale .35s var(--smooth-ease),
              rotate .35s var(--smooth-ease);
}

.testimonial-sound-button-icon.is-second {
  opacity: 0;
  scale: .5;
  rotate: 30deg;
  transition: opacity .15s ease-out,
              scale .35s var(--smooth-ease),
              rotate .35s var(--smooth-ease);
}

.is-clicked .testimonial-sound-button-icon.is-second {
  opacity: 1;
  scale: 1;
  rotate: 0deg;
  transition: opacity .15s .05s ease-out,
              scale .75s .05s var(--elastic-ease-out),
              rotate .75s .05s var(--elastic-ease-out);
}

/* Insider text area */
.insider-text-inner {
  grid-column: 8 / 12;
  z-index: 0;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 1.25em;
  display: flex;
  position: relative;
}

.insider-subheading {
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 80%;
}

.insider-cta {
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  padding-top: 1.25em;
  display: flex;
  align-items: center;
}

/* Rating */
.rating-inner {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.rating-link {
  grid-column-gap: .625em;
  grid-row-gap: .625em;
  color: var(--dark-green);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.rating-link:after {
  content: "";
  display: block;
  position: absolute;
  inset: -.5em -.25em;
}

.rating-star-wrap {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.rating-star {
  width: 1.25em;
  height: 1.25em;
  transition: translate .725s var(--elastic-ease-out),
              rotate .725s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease);
}

.rating-text-wrap {
  position: relative;
}

.rating-text-wrap:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 2%;
  background-color: currentColor;
  bottom: -3%;
  transition: translate .45s var(--smooth-ease);
}

.rating-text {
  color: var(--dark-green);
  letter-spacing: -.03em;
  justify-content: center;
  align-items: center;
  font-size: 1.125em;
  line-height: 92%;
  display: flex;
  transition: translate .725s var(--elastic-ease-out),
              rotate .725s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease);
}

/* Rating hover */
.rating-link:is(:hover, :focus-visible) .rating-text-wrap:after {
  translate: 0 .125em 0;
}

.rating-link:is(:hover, :focus-visible) .rating-text {
  translate: .125em -.25em 0;
  rotate: 3deg;
  scale: .945 .915;
  transform: scale(1.0582010582, 1.0928961749);
  transition: translate .725s .1s var(--elastic-ease-out),
              rotate .725s .1s var(--elastic-ease-out),
              scale .15s .1s var(--default-ease),
              transform .35s .25s var(--bouncy-ease);
}

.rating-link:is(:hover, :focus-visible) .rating-star {
  scale: .945 .915;
  transform: scale(1.0582010582, 1.0928961749);
  transition: translate .725s .1s var(--elastic-ease-out),
              rotate .725s .1s var(--elastic-ease-out),
              scale .15s .1s var(--default-ease),
              transform .35s .25s var(--bouncy-ease);
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(1) {
  translate: -.125em -.4em 0;
  rotate: -3deg;
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(2) {
  translate: -.0675em -.75em 0;
  rotate: -1deg;
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(3) {
  translate: 0 -.4em 0;
  rotate: -2deg;
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(4) {
  translate: .0675em -.625em 0;
  rotate: 1deg;
}

.rating-link:is(:hover, :focus-visible) .rating-star:nth-child(5) {
  translate: .125em -.4em 0;
  rotate: 1deg;
}

/* ========================= */
/* Sequence Section           */
/* ========================= */
.sequence-section {
  width: 100%;
  position: relative;
}

.sequence-signature {
  position: absolute;
  top: -12em;
  right: 18.375em;
  rotate: -7deg;
}

.sequence-signature-text {
  display: grid;
}

.sequence-signature-text-img {
  grid-area: 1/1;
  width: 8.625em;
  height: auto;
}

.sequence-signature-arrow {
  display: grid;
  position: absolute;
  top: 3em;
  left: -3.125em;
  rotate: -11deg;
}

.sequence-signature-arrow-img {
  grid-area: 1/1;
  width: 4.375em;
  height: auto;
}

.sequence-scroll-wrap {
  height: 720lvh;
  position: relative;
}

.sequence-sticky {
  height: 100lvh;
  display: grid;
  position: sticky;
  top: 0;
}

.sequence-canvas {
  pointer-events: none;
  grid-area: 1/1;
  width: 100%;
  height: 100%;
}

.sequence-cards {
  z-index: -1;
  flex-flow: column;
  grid-area: 1/1;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100lvh;
  padding-left: 2.5em;
  padding-right: 2.5em;
  display: flex;
  position: relative;
  overflow: clip;
}

.statement-card {
  width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter) * (5 - 1)));
  position: absolute;
}

.statement-card.is-first {
  align-self: flex-end;
}

.statement-card.is-second,
.statement-card.is-fourth {
  align-self: flex-start;
}

.statement-card.is-third {
  align-self: flex-end;
}

.statement-card-wrapper {
  grid-column-gap: 3.75em;
  grid-row-gap: 3.75em;
  background-color: var(--bg-light);
  border-radius: .75em;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  padding: 1.875em 3em 3.125em;
  display: flex;
  position: relative;
}

.statement-card-wrapper.left {
  /* left-aligned cards */
}

.statement-heading {
  color: var(--white);
  text-align: center;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 5.375em;
  font-weight: 600;
  line-height: 75%;
}

.statement-card-paragraph-wrap {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.paragraph.center-align {
  position: relative;
  text-align: center;
}

.top-smiley {
  justify-content: center;
  align-items: stretch;
  width: 5.5625em;
  height: 5.5625em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
  inset: -4em 0% auto;
}

.top-smiley img {
  width: 100%;
  height: 100%;
}

/* Decorative icons on cards */
.first-statement-icon {
  width: 10.9431em;
  height: auto;
  display: grid;
  position: absolute;
  inset: -1.4em auto auto 0%;
  transform: rotate(-7deg);
}

.first-statement-icon-img {
  grid-area: 1/1;
  width: 100%;
}

.second-icon {
  width: 2.5em;
  display: grid;
  position: absolute;
  bottom: 0%;
  left: -3.5em;
  right: auto;
  translate: 0 -.5em;
}

.second-icon-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

.third-statement-icon {
  width: 3em;
  margin-left: auto;
  margin-right: auto;
  display: grid;
  position: absolute;
  inset: -2em 0% auto;
  translate: -.75em;
}

.third-statement-icon-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

.fourth-statement-icon {
  width: 3.5625em;
  display: grid;
  position: absolute;
  inset: 1em auto 0% 2em;
}

.fourth-statement-icon-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

/* Sequence final screen */
.sequence-final {
  z-index: -1;
  grid-area: 1/1;
  justify-content: center;
  align-items: flex-start;
  padding-top: 5em;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.sequence-title {
  color: var(--dark-green);
  text-align: center;
  letter-spacing: -.03em;
  font-size: 8.75em;
  line-height: 76%;
}

.sequence-title .split-word {
  will-change: transform;
}

.sequence-final-signature {
  width: 5.8125em;
  display: grid;
  position: absolute;
  bottom: 16.875em;
  left: 14em;
  rotate: -7deg;
}

.sequence-final-signature.is-first-arrow {
  width: 4.4375em;
  bottom: 13.5em;
  left: 17em;
  rotate: 20deg;
}

.sequence-final-signature.is-second {
  width: 7.8125em;
  bottom: 17.5em;
  left: auto;
  right: 13em;
}

.sequence-final-signature.is-second-arrow {
  width: 3.75em;
  bottom: 12.5em;
  left: auto;
  right: 16.5em;
  rotate: -5deg;
}

.sequence-final-signature-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

.sequence-final-cookie {
  width: 5.25em;
  height: 5.25em;
  position: absolute;
  bottom: 5em;
  left: 16em;
}

.sequence-final-cookie.is-second {
  width: 10.75em;
  height: 10.75em;
  bottom: 21em;
  left: -2.5em;
}

.sequence-final-strawberry {
  width: 8.9375em;
  height: 8.9375em;
  position: absolute;
  bottom: 13em;
  right: 21.5em;
}

.sequence-final-strawberry.is-second {
  width: 18.5625em;
  height: 18.5625em;
  bottom: 1.5em;
  right: -7em;
}

/* SVG decorative lines */
.sequence-lines {
  z-index: -2;
  color: var(--white);
  grid-area: 1/1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
  overflow-x: clip;
}

.sequence-line-svg {
  width: 100%;
  position: absolute;
}

.sequence-inner-signature {
  width: 10em;
  height: auto;
  display: grid;
  position: absolute;
  right: 20em;
}

.sequence-inner-signature-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

/* ========================= */
/* Benefits Section           */
/* ========================= */
.benefit-section {
  z-index: 1;
  background-color: var(--white);
  border-radius: .375em;
  margin-left: .625em;
  margin-right: .625em;
  position: relative;
}

.benefit-section .top-smiley.is-benefit {
  top: 0%;
  translate: 0 -50%;
}

.container {
  width: 100%;
  height: 100%;
  padding: 2em 2.5em;
  position: relative;
}

.container.smaller {
  padding: .625em;
}

.img-wrapper {
  grid-column: span 5;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: .375em;
}

.top-img {
  z-index: 2;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.benefit-svg {
  z-index: 1;
  color: var(--white);
  width: 100%;
  margin-top: auto;
  margin-bottom: auto;
  position: absolute;
}

.img {
  object-fit: cover;
  border-radius: .375em;
  width: 100%;
  height: 100%;
  position: relative;
}

.benefit-wrapper {
  grid-column: 7 / 12;
  grid-column-gap: 3.75em;
  grid-row-gap: 3.75em;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-top: 5.625em;
  padding-bottom: 5.625em;
  display: flex;
}

.benefit-heading {
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 5em;
  line-height: 80%;
}

.benefit-table {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 100%;
  display: grid;
}

.benefit-table-title-wrapper {
  grid-column: span 5;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  align-items: center;
}

.benefit-table-title {
  color: var(--light-green);
  letter-spacing: -.03em;
  font-size: 1.25em;
  line-height: 92%;
}

.benefit-table-title:first-child {
  grid-column: span 3;
}

.benefit-table-title-img {
  height: 1.4525em;
  width: auto;
}

.sub-line {
  grid-column: span 5;
  background-color: var(--dark-green);
  height: max(.0625em, 1px);
}

.benefit-item-wrapper {
  grid-column: span 5;
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.benefit-table-item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
  align-items: center;
}

.benefit-item-title {
  grid-column: span 3;
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 1.5625em;
  line-height: 92%;
}

.benefit-checker-inner {
  grid-column: span 2;
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  justify-content: space-between;
  display: flex;
}

.benefit-item-check {
  background-color: var(--bg-pale);
  border-radius: .5em;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 3.125em;
  display: flex;
}

.benefit-item-x {
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 3.125em;
  display: flex;
}

.check {
  width: 1.5em;
  height: 1.5em;
}

.line {
  background-color: var(--dark-green);
  opacity: .15;
  height: max(.0625em, 1px);
}

/* ========================= */
/* Testimonial / Reviews      */
/* ========================= */
.testimonial-section {
  width: 100%;
  height: 78.1875em;
  min-height: 78.1875em;
  margin-top: -2.5em;
  position: relative;
}

.bg-img-wrapper {
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: clip;
}

.testimonial-top-img {
  z-index: 2;
  transform-origin: 50% 100%;
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  scale: 1.05;
}

.bg-img {
  transform-origin: 50% 100%;
  object-fit: cover;
  width: 100%;
  height: 100%;
  scale: 1.05;
}

.testimonial-container {
  width: 100%;
  height: 100%;
  padding-top: 5.875em;
  padding-bottom: 1.25em;
  position: relative;
}

.big-title-wrapper {
  grid-column: span 12;
  place-self: start center;
  grid-column-gap: 1.625em;
  grid-row-gap: 1.625em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.testimonial-signature {
  display: grid;
}

.testimonial-signature-img {
  grid-area: 1/1;
  width: 15.4375em;
  height: auto;
}

.testimonial-big-heading {
  color: var(--white);
  text-align: center;
  letter-spacing: -.03em;
  font-size: 11.25em;
  line-height: 70%;
}

.testimonial-slider {
  grid-column: span 12;
  z-index: 2;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.testimonial-heading {
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-size: 3em;
  font-weight: 600;
  line-height: 70%;
}

.testimonial-slider-wrapper {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  display: flex;
  overflow-x: clip;
}

.testimonial-slider-interface {
  display: flex;
  justify-content: center;
}

.testimonial-slider-button-wrapper {
  grid-column-gap: .3125em;
  grid-row-gap: .3125em;
  justify-content: space-between;
  display: flex;
}

.testimonial-slider-button {
  background-color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  border-style: none;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 3.125em;
  height: 3.125em;
  padding: 0;
  display: flex;
  cursor: pointer;
  transition: scale .75s var(--elastic-ease-out),
              background-color .25s var(--smooth-ease);
}

.testimonial-slider-button:active {
  scale: .9;
}

.testimonial-slider-button-arrow {
  z-index: 1;
  grid-area: 1/1;
  place-self: center;
  width: 1.25em;
  height: 1.25em;
}

.testimonial-slider-inner {
  width: 100vw;
  padding-inline: calc(50% - 16vw);
  display: flex;
  overflow-x: hidden;
}

.testimonial-slider-item-wrap {
  flex: none;
  justify-content: center;
  align-items: stretch;
  width: 32vw;
  padding-left: .625em;
  padding-right: .625em;
  display: flex;
}

.testimonial-slider-item {
  border: max(.0625em, 1px) solid var(--white);
  color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  border-radius: .375em;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  padding: 2.5em;
  display: flex;
  transition: background-color .35s var(--smooth-ease),
              color .35s var(--smooth-ease);
}

.testimonial-slider-item.active {
  background-color: var(--white);
  color: var(--dark-green);
  border-color: transparent;
}

/* Non-active cards: icons need to be white to match white text */
.testimonial-star,
.testimonial-verified-icon {
  filter: brightness(0) invert(1);
  transition: filter .35s var(--smooth-ease);
}

.testimonial-slider-item.active .testimonial-star,
.testimonial-slider-item.active .testimonial-verified-icon {
  filter: none;
}

.testimonial-star-wrap {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 1.25em;
  display: flex;
}

.testimonial-star {
  width: .875em;
  height: .875em;
}

.testimonial-item-heading {
  font-size: 2.5em;
  font-weight: 500;
  line-height: 92%;
}

.testimonial-item-text {
  letter-spacing: -.03em;
  font-size: 1.875em;
  line-height: 92%;
}

.testimonial-item-inner-text {
  grid-column-gap: .625em;
  grid-row-gap: .625em;
  flex-flow: column;
  padding-bottom: 2.5em;
  display: flex;
}

.testimonial-line {
  opacity: .15;
  background-color: currentColor;
  width: 100%;
  height: max(.0625em, 1px);
}

.testimonial-item-bottom {
  justify-content: space-between;
  align-items: center;
  padding-top: .9375em;
  display: flex;
}

.testimonial-client-name {
  letter-spacing: -.03em;
  font-size: 1.625em;
  font-weight: 500;
  line-height: 92%;
}

.testimonial-verified-wrap {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.testimonial-verified-icon {
  width: 1.1875em;
  height: 1.1875em;
}

.testimonial-verified-text {
  letter-spacing: -.02em;
  font-size: 1.125em;
  font-weight: 400;
  line-height: .92;
}

/* ========================= */
/* Flavour Section            */
/* ========================= */
.flavour {
  background-color: var(--bg-pale);
  color: var(--dark-green);
  padding-top: 7.5em;
  overflow-x: clip;
}

.flavour-container {
  padding-left: 2.5em;
  padding-right: 2.5em;
}

.flavour-header {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  padding-left: 2.5em;
  padding-right: 2.5em;
  display: flex;
}

.flavour-heading-wrap {
  grid-column-gap: 3.125em;
  grid-row-gap: 3.125em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.flavour-title {
  letter-spacing: -.03em;
  font-size: 15em;
  line-height: .76;
}

.flavour-subline {
  font-size: 3.75em;
  font-weight: 500;
  line-height: .8;
}

.flavour-paragraph {
  letter-spacing: -.03em;
  max-width: 25ch;
  font-size: 1.875em;
  line-height: .92;
}

.flavour-content {
  grid-template-columns: var(--grid);
  grid-gap: 0 var(--grid-gutter);
  display: grid;
}

.flavour-left {
  grid-column: 5 span;
  padding-top: 1.25em;
  display: grid;
}

.flavour-signature-wrap {
  grid-column-gap: .6875em;
  grid-row-gap: .6875em;
  grid-area: 1/1;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 3.4375em;
  display: flex;
  translate: 0 -1.25em;
}

.flavour-signature {
  width: 9.9375em;
  height: auto;
  display: grid;
}

.flavour-signature-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

.flavour-signature-arrow {
  width: 3.125em;
  margin-top: 1.8125em;
  display: grid;
}

.flavour-signature-arrow-img {
  grid-area: 1/1;
  width: 100%;
  height: auto;
}

.flavour-left-dose {
  z-index: 2;
  grid-area: 1/1;
  place-self: center;
  margin-left: auto;
  rotate: 7.7deg;
}

.flavour-left-dose-img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 15em;
  height: auto;
}

.flavour-left-pack {
  grid-area: 1/1;
  place-self: center;
}

.flavour-left-pack.is-first {
  z-index: 1;
  translate: 0 1.5em;
  rotate: -13deg;
}

.flavour-left-pack.is-second {
  z-index: 0;
  translate: -3.125em 2.125em;
  rotate: -25deg;
}

.flavour-left-pack-img {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  width: 13.875em;
  height: auto;
}

.flavour-plus {
  grid-column: 2 span;
  justify-content: center;
  align-items: center;
  display: flex;
}

.flavour-plus-img {
  width: 4.9375em;
  height: auto;
}

.flavour-right {
  z-index: 3;
  grid-column: 5 span;
  position: relative;
}

.flavour-swiper {
  width: 100%;
  height: 100%;
}

.flavour-swiper-wrapper {
  position: relative;
}

.flavour-slide {
  backface-visibility: hidden;
  display: none;
}

.flavour-slide.is-active {
  display: block;
}

.flavour-slide-inner {
  backface-visibility: hidden;
  grid-column: 5 span;
  height: 100%;
  padding-top: 1.25em;
  display: grid;
}

.flavour-slide-dose {
  z-index: 2;
  grid-area: 1/1;
  place-self: flex-end flex-start;
  position: relative;
  bottom: 5.75em;
}

.flavour-slide-dose-img {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
  width: 22.5em;
  height: auto;
}

.flavour-slide-pack {
  grid-area: 1/1;
  place-self: center;
}

.flavour-slide-pack.is-first {
  z-index: 1;
  place-self: flex-start flex-end;
  position: relative;
  top: 3.125em;
  right: 4.5em;
}

.flavour-slide-pack.is-second {
  z-index: 0;
  place-self: flex-start flex-end;
  position: relative;
  top: 3.4375em;
  right: 1.6875em;
}

.flavour-slide-pack-img {
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-user-select: none;
  user-select: none;
  width: 20.3125em;
  height: auto;
}

.flavour-right-bg {
  z-index: -1;
  color: var(--white);
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  inset: 0%;
}

.flavour-right-bg-svg {
  width: 135%;
  position: absolute;
  left: 1.25em;
}

.flavour-navigation {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  z-index: 5;
  grid-column: 8 / 13;
  justify-content: flex-end;
  align-items: flex-start;
  margin-top: -5em;
  padding-right: 6.25em;
  display: flex;
}

.flavour-slider-button {
  background-color: var(--white);
  -webkit-user-select: none;
  user-select: none;
  border-style: none;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 5em;
  height: 5em;
  padding: 0;
  display: flex;
  cursor: pointer;
  transition: scale .75s var(--elastic-ease-out);
}

.flavour-slider-button:active {
  scale: .9;
}

.flavour-slider-button-arrow {
  z-index: 1;
  grid-area: 1/1;
  place-self: center;
  width: 1.25em;
  height: 1.25em;
}

.flavour-center {
  grid-column: 5 / 9;
  margin-top: -5em;
}

.flavour-content-swiper-wrapper {
  position: relative;
}

.flavour-content-slide {
  backface-visibility: hidden;
  display: none;
}

.flavour-content-slide.is-active {
  display: block;
}

.flavour-content-slide-inner {
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  backface-visibility: hidden;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.flavour-content-slide-header {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  text-align: center;
  flex-flow: column-reverse;
  display: flex;
}

.flavour-content-slider-title {
  backface-visibility: hidden;
  text-transform: uppercase;
  font-size: 3em;
  font-weight: 600;
  line-height: .75;
}

.flavour-content-slider-subline {
  backface-visibility: hidden;
  color: var(--light-green);
  letter-spacing: -.02em;
  font-size: 1.375em;
  line-height: .8;
}

/* ========================= */
/* Payment Section            */
/* ========================= */
.payment-section {
  width: 100%;
  min-height: 100vh;
  padding-top: 12.5em;
  padding-bottom: 10em;
  overflow-x: clip;
}

.payment-container {
  width: 100%;
  height: 100%;
  padding: 2em 2.5em;
  position: relative;
}

.payment-wrapper {
  grid-column: span 12;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  grid-template-rows: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-columns: 1fr;
  display: grid;
  position: relative;
}

.payment-signature-days {
  letter-spacing: -.03em;
  display: grid;
  position: relative;
  top: -2em;
  grid-area: 1 / 2 / 2 / 4;
  align-self: start;
}

.payment-signature-days-img {
  grid-area: 1/1;
  width: 6.5em;
  height: auto;
  rotate: -7.535deg;
}

.payment-wrapper > .insider-heading {
  grid-area: 1 / 1 / 2 / 13;
  place-self: center;
}

.payment-methods-inner {
  grid-column: span 12;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 30em;
  margin-bottom: 1em;
  display: flex;
  position: relative;
}

.pament-methods {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
}

.payment-method-item-outer {
  pointer-events: none;
}

.payment-method-item {
  background-color: var(--white);
  pointer-events: auto;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 13.0625em;
  height: 13.0625em;
  display: flex;
  position: relative;
}

.payment-method-item._1 {
  bottom: 13.125em;
}

.payment-method-item._2 {
  bottom: 8.125em;
}

.payment-method-item._3 {
  bottom: 3.75em;
}

.payment-method-item._4 {
  bottom: 0;
}

.payment-method-item._5 {
  bottom: 3.75em;
}

.payment-method-item._6 {
  bottom: 8.125em;
}

.payment-method-item._7 {
  bottom: 13.125em;
}

.payment-method-img {
  -webkit-user-select: none;
  user-select: none;
  width: 6.8125em;
}

.payment-method-img.is-amex {
  width: 5em;
  height: auto;
}

.payment-method-img.is-mastercard {
  width: 6.375em;
  height: auto;
}

.payment-method-img.is-paypal {
  width: 6em;
  height: auto;
}

.payment-method-img.is-apple-pay {
  height: auto;
}

.payment-method-img.is-google-pay,
.payment-method-img.is-visa {
  width: 6.875em;
  height: auto;
}

.payment-signature {
  letter-spacing: -.03em;
  display: grid;
  position: absolute;
  bottom: -2em;
  right: 6.5em;
}

.payment-signature-img {
  grid-area: 1/1;
  width: 14.4375em;
  height: auto;
  rotate: -7.535deg;
}

/* Footer Bridge */
.footer-bridge {
  width: 100%;
  position: relative;
  padding-top: 2.5em;
}

.footer-line {
  color: var(--white);
  width: 100%;
  display: block;
}

/* ========================= */
/* Footer                     */
/* ========================= */
.footer {
  width: 100%;
  height: 100%;
  margin-top: -10em;
  position: relative;
  overflow-x: clip;
}

.footer-full-height-container {
  z-index: 1;
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  grid-template-rows: auto;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-columns: 1fr;
  width: 100%;
  height: 100%;
  padding: 2em 2.5em 1.75em;
  display: grid;
  position: relative;
}

.footer-product {
  grid-column: span 6;
  aspect-ratio: 1;
  border-radius: .5em;
  width: calc(100% + 1.875em);
  height: auto;
  position: relative;
  left: -1.875em;
  overflow: hidden;
}

.absolute-background {
  border-radius: .5em;
  position: absolute;
  inset: 0%;
}

.footer-img {
  object-fit: cover;
  object-position: 50% 0%;
  border-radius: .375em;
  width: 100%;
  height: 100%;
  position: relative;
}

.footer-img.top {
  z-index: 1;
  position: absolute;
  transition: opacity .6s var(--smooth-ease);
}

.footer-product {
  transition: translate .8s var(--elastic-ease-out),
              rotate .8s var(--elastic-ease-out),
              scale .35s var(--default-ease),
              transform .35s var(--default-ease);
}

@media (hover: hover) and (pointer: fine) {
  .footer-product:hover {
    translate: -.5em -.75em 0;
    rotate: -2deg;
    scale: .97 .96;
    transform: scale(1.03, 1.04);
  }
  .footer-product:hover .footer-img.top {
    opacity: 0;
  }
  /* Button arrow: first disappears, second appears */
  .footer-product:hover .button-cycle.is-first .button-cycle-bg {
    scale: 0;
    opacity: 0;
  }
  .footer-product:hover .button-cycle.is-first .button-arrow {
    translate: -.75em .75em 0;
    filter: blur(.5rem);
    opacity: 0;
    scale: .625;
  }
  .footer-product:hover .button-cycle.is-second .button-cycle-bg {
    scale: 1;
    opacity: 1;
  }
  .footer-product:hover .button-cycle.is-second .button-arrow {
    translate: 0 0 0;
    filter: blur(0);
    opacity: 1;
    scale: 1;
  }
  .footer-product:hover .button-bg {
    translate: -2.5em -.325em 0;
    rotate: -4deg;
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
  }
}

.footer-product-text-inner {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1.5em 1.5em 1.875em;
  display: flex;
  position: relative;
}

.footer-product-heading {
  color: var(--white);
  text-align: center;
  text-transform: uppercase;
  font-size: 7em;
  line-height: 70%;
}

.footer-product-link {
  z-index: 2;
  position: absolute;
  inset: 0%;
}

.button.is-light {
  color: var(--dark-green);
}

.button-bg.light-bg {
  background-color: var(--white);
}

.button-cycle-bg.light-bg {
  background-color: var(--white);
}

.footer-content {
  grid-column: span 6;
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  justify-content: space-between;
  min-height: 55em;
  display: flex;
}

.footer-fact-wrapper {
  grid-column-gap: .625em;
  grid-row-gap: .625em;
  display: flex;
}

.footer-info {
  border: max(.0625em, 1px) solid var(--bg-pale);
  background-color: var(--white);
  border-radius: .375em;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 8.75em;
  height: 10em;
  padding: .9375em 1em 1.25em;
  display: flex;
  text-decoration: none;
  transition: scale .75s var(--elastic-ease-out);
}

.footer-info:active {
  scale: .95;
}

@media (hover: hover) and (pointer: fine) {
  .footer-info:hover {
    scale: .945 .915;
    transform: scale(1.0582010582, 1.0928961749);
    transition: translate .725s .1s var(--elastic-ease-out),
                rotate .725s .1s var(--elastic-ease-out),
                scale .15s .1s var(--default-ease),
                transform .35s .25s var(--bouncy-ease);
  }
  .footer-info.is-first:hover {
    translate: -.125em -.325em 0;
    rotate: -4deg;
  }
  .footer-info.is-second:hover {
    translate: .125em -.325em 0;
    rotate: 3deg;
  }
}

.footer-info-text {
  color: var(--dark-green);
  text-align: center;
  letter-spacing: -.03em;
  text-transform: uppercase;
  font-size: 1.5em;
  font-weight: 600;
  line-height: 70%;
}

.footer-info-img.is-first {
  width: 3.5em;
  height: auto;
}

.footer-info-img.is-second {
  width: 3.5625em;
  height: auto;
  margin-top: .5em;
}

.footer-content-wrapper {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100%;
  padding-top: 2.5em;
  padding-left: 9.25em;
  display: flex;
}

.footer-heading {
  color: var(--dark-green);
  letter-spacing: -.03em;
  font-size: 4.125em;
  font-weight: 500;
  line-height: 80%;
}

.heading-line {
  color: var(--light-green);
}

.footer-shipping-wrapper {
  grid-column-gap: .9375em;
  grid-row-gap: .9375em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.shipping-link {
  color: var(--dark-green);
  letter-spacing: -.02em;
  font-size: 1.375em;
  line-height: 80%;
  position: relative;
  text-decoration: none;
}

.shipping-link-text {
  border-bottom: max(.0625em, 1px) solid currentColor;
  padding-bottom: .125em;
  transition: border-color .35s var(--smooth-ease);
}

@media (hover: hover) and (pointer: fine) {
  .shipping-link:hover .shipping-link-text {
    border-color: transparent;
  }
}

.footer-social-media-wrap {
  grid-column-gap: .3125em;
  grid-row-gap: .3125em;
  justify-content: flex-start;
  align-items: center;
  display: none;
}

.social-media-circle.is-white {
  background-color: var(--white);
}

.footer-logo {
  width: calc(100% + .5em);
  max-width: none;
  position: absolute;
  left: -.25em;
  right: -.25em;
  bottom: 1.75em;
  z-index: -1;
  pointer-events: none;
}

.footer-logo.desktop {
  display: inline-block;
}

.footer-logo.mobile {
  display: none;
}

.footer-bottom {
  grid-column: span 12;
  align-self: end;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.footer-bottom-text {
  color: var(--dark-green);
  letter-spacing: -.02em;
  font-size: 1.125em;
  line-height: 92%;
  display: none;
}

.footer-credits-toggle {
  z-index: 2;
  color: var(--dark-green);
  background-color: transparent;
  border-style: none;
  padding: 0;
  position: relative;
  cursor: pointer;
}

.footer-credits-toggle-text {
  letter-spacing: -.02em;
  font-size: 1.125em;
  line-height: 92%;
  border-bottom: max(.0625em, 1px) solid currentColor;
  padding-bottom: .125em;
}

.footer-credits {
  padding-bottom: 1.75em;
  position: absolute;
  bottom: 0;
  right: 0;
}

.footer-credits-inner {
  background-color: var(--white);
  border-radius: .375em;
  padding: .4375em 1.25em;
}

.footer-credits-detail {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  border-style: none none solid;
  border-bottom-color: color-mix(in hsl, var(--dark-green), transparent 85%);
  border-bottom-width: max(.0625em, 1px);
  justify-content: space-between;
  align-items: center;
  padding-top: .625em;
  padding-bottom: .625em;
  display: flex;
}

.footer-credits-detail:last-child {
  border-bottom: none;
}

.footer-credits-text {
  color: var(--dark-green);
  font-size: 1.375em;
  font-weight: 500;
  line-height: 80%;
}

.credits-link {
  color: var(--dark-green);
  text-decoration: none;
  font-size: 1.375em;
  line-height: 80%;
}

.credits-link-text {
  border-bottom: max(.0625em, 1px) solid currentColor;
  padding-bottom: .125em;
  transition: border-color .35s var(--smooth-ease);
}

@media (hover: hover) and (pointer: fine) {
  .credits-link:hover .credits-link-text {
    border-color: transparent;
  }
}

/* ========================= */
/* Responsive: Tablet         */
/* ========================= */
@media screen and (max-width: 991px) {
  .grid-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .nav-container {
    padding: 2.25em 1.25em 0;
  }

  .nav-link-inner {
    display: none;
  }

  .nav-social-media-inner {
    grid-column: span 3;
  }

  .nav-button {
    grid-column: span 3;
  }

  .stage-container {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }

  .stage-left {
    grid-column: 6 span;
  }

  .stage-right {
    grid-column: 6 span;
    padding-top: 15.625em;
    padding-bottom: 3.75em;
  }

  .stage-visual-img {
    width: 100%;
    top: 0;
    left: 0%;
  }

  .stage-bg {
    padding-top: 5.3125em;
    padding-left: 0;
    padding-right: 0;
    position: relative;
  }

  .stage-bg-svg {
    width: 120%;
    margin-left: -10%;
  }

  .stage-subline-wrap {
    padding-left: 3.5em;
  }

  .stage-fact.is-first {
    z-index: 3;
    top: auto;
    bottom: 1.5%;
    left: 46%;
  }

  .stage-fact.is-second {
    z-index: 2;
    top: auto;
    bottom: -3%;
    left: 12%;
  }

  .stage-fact.is-third {
    z-index: 1;
    inset: auto auto -4% 24%;
  }

  .marquee-text-svg {
    margin-top: 3.75em;
  }
}

/* ========================= */
/* Responsive: Mobile         */
/* ========================= */
@media screen and (max-width: 479px) {
  .stage-fact.is-first {
    top: auto;
    bottom: 5%;
    left: auto;
    right: 0;
  }

  .stage-fact.is-second {
    top: auto;
    bottom: -4%;
    left: 5%;
  }

  .stage-fact.is-third {
    top: auto;
    bottom: -7%;
    left: 0%;
  }

  .stage-canvas {
    width: 110%;
  }

  .sequence-signature {
    top: 6em;
    right: 8em;
  }
}

/* ========================= */
/* Landscape orientation      */
/* ========================= */
@media (orientation: landscape) {
  .stage-container {
    min-height: 100svh;
  }
}

@media (orientation: portrait) {
  .stage-logo {
    width: 100%;
    height: auto;
  }
}