/* ------------------------- BASE CONFIGURATIONS ------------------------------------------- */

/* Fonts */

@font-face {
  font-family: Haffer XH;
  src: url("../fonts/HafferXHRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Mono;
  src: url("../fonts/HafferMonoMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer Mono;
  src: url("../fonts/HafferMonoRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Brisa Pro;
  src: url("../fonts/BrisaPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Haffer VF;
  src: url("../fonts/HafferStandardUprights-VF.ttf") format("truetype");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

/* Root */

:root {
  /* Colors */
  --color-neutral-100: white;
  --color-neutral-200: #f4f4f4;
  --color-neutral-300: #eaeaea;
  --color-neutral-400: #e1e1e1;
  --color-neutral-450: #d8d8d8;
  --color-neutral-475: #b8b8b8;
  --color-neutral-500: #817f7f;
  --color-neutral-525: #4f4c4c;
  --color-neutral-550: #393636;
  --color-neutral-600: #312e2e;
  --color-neutral-700: #2a2727;
  --color-neutral-800: #201d1d;
  --color-neutral-900: #151313;
  --color-neutral-950: black;
  --color-dark: var(--color-neutral-800);
  --color-black: var(--color-neutral-900);
  --color-white: var(--color-neutral-100);
  --color-light: var(--color-neutral-200);
  --color-electric: #a1ff62;
  --color-purple: #6840ff;
  --color-coral: #f84131;
  
  /* DC Styles */
  --color-dc-cream: #FAF8F3;
  --color-dc-green: #C8DDCD;
  --color-dc-purple: #BEA7F3;
  --color-dc-pink: #F4978E;
  --color-dc-yellow: #FFD464;
  --color-dc-blue: #AECCFA;

  /* RGB Colors, for transparent RGBA */
  --color-rgb-gray: 129, 127, 127;
  --color-rgb-tint: 40, 40, 40;

  /* Padding */
  --container-padding: 1.875em;
  --padding-xl: 12.5em;
  --padding-l: 10em;
  --padding-m: 7.5em;
  --padding-s: 5em;
  --padding-xs: 3.75em;

  /* Gap */
  --gap-xxl: 2.5em;
  --gap-xl: 2em;
  --gap-l: 1.875em;
  --gap-m: 1.5em;
  --gap-s: 1em;
  --gap-sm: 1.25em;
  --gap-xs: 0.75em;
  --gap-xxs: 0.5em;

  /* Weights & Heights */
  --stroke-weight: 1px;
  --btn-height: 2.5em;
  --input-height: 3em;
  --nav-bar-height: 4.625em;
  --nav-bar-max-width-small: 1920px;

  /* Animations */
  --cubic-default: cubic-bezier(0.625, 0.05, 0, 1);
  --duration-default-double: 1.2s; /* Double of default */
  --duration-default-onehalf: 0.9s; /* One & Half of default */
  --duration-default: 0.6s;
  --duration-default-half: 0.3s; /* Half of default */
  --animation-default-double: var(--duration-default-double) var(--cubic-default);
  --animation-default-onehalf: var(--duration-default-onehalf) var(--cubic-default);
  --duration-default-quarter: 0.15s; /* Quarter of default */
  --animation-default: var(--duration-default) var(--cubic-default);
  --animation-default-half: var(--duration-default-half) var(--cubic-default);
  --animation-default-quarter: var(--duration-default-quarter) var(--cubic-default);
  --animation-ease: 0.2s ease;
  --animation-ease-double: 0.4s ease;
  --cubic-bounce: linear(0,0.5737 7.6%,0.8382 11.87%,0.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%,0.9995 46.99%,0.9872 51.63%,0.9842 58.77%,1.0011 81.26%,1);
}

.is--bg-green {
  background: var(--color-dc-green) !important;
}
.is--bg-purple {
  background: var(--color-dc-purple) !important;
}
.is--bg-yellow {
  background: var(--color-dc-yellow) !important;
}
.is--bg-pink {
  background: var(--color-dc-pink) !important;
}
.is--bg-blue {
  background: var(--color-dc-blue) !important;
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --btn-height: 3em;

    --padding-xl: 10em;
    --padding-l: 7.5em;
    --padding-m: 5em;
    --padding-s: 3.75em;

    --container-padding: 0.625em;
  }
}

/* ------------------------- Container -------------------------  */

/* Desktop */
@media screen and (min-width: 992px) {
  .container {
    max-width: var(--size-container);
    padding: 0 var(--container-padding);
  }
  
  .container.is--m {
    max-width: calc(var(--size-container) * 0.825);
  }
  
  .container.is--sm {
    max-width: calc(var(--size-container) * 0.65);
  }
  
  .container.is--s {
    max-width: calc(var(--size-container) * 0.5);
  }
}
  
/* Tablet & Mobile */
@media screen and (max-width: 991px) {
  .container {
    max-width: 100%;
    padding: 0 var(--container-padding);
  }
  
  .container.is--md-m {
    padding: 0 var(--gap-m);
  }
}

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --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)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 850; 
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

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

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

}


/* Elements Styles */

html,
body {
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: var(--color-dc-cream);
  color: var(--color-neutral-800);
  font-variation-settings: "wght" 460;
  letter-spacing: -0.01em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: var(--size-font);
  font-weight: 400;
  line-height: 20px;
  scrollbar-width: none;
  overscroll-behavior: none;
  -ms-overflow-style: none;
}

h1 {
  letter-spacing: -0.06em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 7em;
  font-weight: 400;
  line-height: 1;
}

h2 {
  letter-spacing: -0.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 5em;
  font-weight: 400;
  line-height: 1;
}

h3 {
  letter-spacing: -0.04em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 3.875em;
  font-weight: 400;
  line-height: 1;
}

h4 {
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.05;
}

h5 {
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 1.875em;
  font-weight: 400;
  line-height: 1.08;
}

h6 {
  letter-spacing: -0.03em;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.08;
}

p {
  margin-bottom: 0;
}

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

ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
}

ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

img {
  object-fit: cover;
  width: 100%;
  max-width: none;
  height: 100%;
  display: inline-block;
}

strong {
  font-weight: bold;
}

textarea{
  resize: none;
}

button{
  background: transparent;
  padding: 0;
  margin: 0;
  border: none;
}

/* Selectors */

body::-webkit-scrollbar,
html::-webkit-scrollbar{
  display: none;
}

::selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}

::-moz-selection {
  background-color: rgba(var(--color-rgb-gray), 0.2);
  text-shadow: none;
}




/* ------------------------- GLOBAL STYLES -------------------------------------------------- */

.main {
  overflow: clip;
}

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.global {
  z-index: 100;
}

.svg {
  width: 100%;
  height: 100%;
  display: flex;
}

.underline-link {
  position: relative;
}

[data-underline-link] {
  text-decoration: none;
  position: relative;
  cursor: pointer;
}

[data-underline-link]::before,
[data-underline-link="alt"]::before,
[data-underline-link="alt"]::after {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.0625em;
  background-color: currentColor;
  transition: transform var(--duration-default) var(--cubic-default);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

[data-underline-link].nav-bar__big-span::before {
  bottom: -0.175em;
  height: calc(0.0625 / 3);
}

[data-underline-link="alt"]::before {
  transform-origin: left;
  transform: scaleX(1) rotate(0.001deg);
  transition-delay: 0.3s;
}

[data-underline-link="alt"]::after {
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }

  [data-hover]:hover [data-underline-link="alt"]::before,
  [data-underline-link="alt"]:hover::before {
    transform-origin: right;
    transform: scaleX(0) rotate(0.001deg);
    transition-delay: 0s;
  }

  [data-hover]:hover [data-underline-link="alt"]::after,
  [data-underline-link="alt"]:hover::after {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
    transition-delay: 0.3s;
  }
}

:where([data-theme-section="dark"]) {
    background-color: var(--color-dark);
    color: var(--color-light);
}

.text-mask-line-mask {
  margin: -0.2em -0.1em;
  padding: 0.1em 0.1em;
  text-align: inherit !important;
}

.transition {
  z-index: 50;
  background-color: var(--color-neutral-200);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
}

[data-transition-theme="dark"] {
  background-color: var(--color-dark);
}

[data-transition-theme="light"] {
  background-color: var(--color-neutral-200);
}

:is(.wf-design-mode, .wf-editor) .transition {
  display: none;
}

.padding-hero {
  height: var(--nav-bar-height);
}

[data-wf--padding-hero--variant="nav"] {
  height: var(--nav-bar-height);
}

[data-wf--padding-hero--variant="nav-medium"] {
  height: calc(var(--nav-bar-height) + max(5em, 15svh));
}

[data-wf--padding-hero--variant="nav-large"] {
  height: calc(var(--nav-bar-height) + max(6.666em, 20svh));
}

[data-wf--padding-hero--variant="nav-xl"] {
  height: calc(var(--nav-bar-height) + max(8.333em, 25svh));
}

.before__100 {
  padding-top: 100%;
}

.user__site-link-wrap {
  border-radius: 50em;
  display: flex;
}

.user__site-link-wrap[href="#"] {
  opacity: 0.25;
  pointer-events: none;
}

.contain-image {
  object-fit: contain;
}

.used__top {
  min-height: calc(100dvh + -12em - 1px);
}

.lenis {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

[data-disabled] {
  cursor: not-allowed;
}

[data-hover] {
  cursor: pointer;
}

:is(.wf-design-mode, .wf-editor) .button-label[aria-hidden="true"] {
  display: none;
}

@media screen and (max-width: 991px) {
  .container.is--m.is--full-tablet {
    padding-left: 0;
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .container.is--m-full {
    padding-left: 0;
    padding-right: 0;
  }
}

/* Login Stuff */

.login-hero__line {
  width: var(--stroke-weight);
  background-color: var(--color-neutral-700);
  height: 100%;
  position: absolute;
}

.login-hero__logged-in-message {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.locked-badge__svg-2 {
  color: #a1ff62;
  width: 0.875em;
  position: relative;
}

.login-hero__cards {
  z-index: 5;
  flex-flow: column;
  width: 100%;
  height: 0;
  display: flex;
  position: sticky;
  top: 0;
}

.login-hero__cards-list {
  padding-top: var(--gap-l);
  left: calc(100% + var(--gap-l));
  flex-flow: column;
  display: flex;
  position: absolute;
}

:is(.wf-design-mode, .wf-editor) .home-hero__cards-list {
  opacity: 1;
}

@media screen and (max-width: 991px) {
  .login-hero__cards {
    height: auto;
    padding-bottom: 1.25em;
    position: relative;
    top: auto;
  }

  .login-hero__cards-list {
    padding-top: 0;
    position: relative;
    left: auto;
  }
}

@media screen and (max-width: 767px) {
  .login-hero__cards {
    padding-bottom: 0.75em;
  }
}

/* U Styles */

.u--rel {
  z-index: 1;
  position: relative;
}

.u--color-electric {
  color: var(--color-electric);
}

.u--fw-460 {
  font-variation-settings: "wght" 460;
}

.u--opacity-40 {
  opacity: 0.4;
}

.u--color-purple {
  color: var(--color-purple);
}

.u--text-balance {
  text-wrap: balance;
}

/* Line */

.line {
  z-index: 3;
  height: var(--stroke-weight);
  background-color: var(--color-neutral-400);
  width: 100%;
  position: relative;
}

.line.is--nav-transparent {
  background-color: var(--color-neutral-200);
  opacity: 0.08;
}

/* Padding */

.p-l {
  font-variation-settings: "wght" 420;
  letter-spacing: -0.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.1875em;
  font-weight: 400;
  line-height: 1.25;
}

.p-l.u--fw-medium {
  font-variation-settings: "wght" 550;
}

.p-m {
  font-variation-settings: "wght" 430;
  letter-spacing: -0.01em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3;
}

.p-m.u--fw-460 {
  font-variation-settings: "wght" 460;
}

@media screen and (max-width: 767px) {
  .p-l {
    font-size: 1.125em;
  }
}





/* ------------------------- TEXT STYLES -------------------------------------------------- */

/* Headings */

.h-xl {
  letter-spacing: -0.06em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 7em;
  font-weight: 400;
  line-height: 1;
}

.h-l {
  letter-spacing: -0.04em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 5em;
  font-weight: 400;
  line-height: 1;
}

.h-l.is--reel-h {
  z-index: 2;
  color: var(--color-neutral-450);
  margin-top: -0.125em;
  position: relative;
}

.h-l.is--continent-nr {
  width: 3ch;
}

.h-ml {
  letter-spacing: -0.04em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 3.875em;
  font-weight: 400;
  line-height: 1;
}

.h-m {
  letter-spacing: -0.03em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1.05;
}

.h-m.is--ptc-card-h {
  max-width: 8em;
}

.h-s {
  letter-spacing: -0.03em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 1.875em;
  font-weight: 400;
  line-height: 1.08;
}

.h-xs {
  letter-spacing: -0.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.25em;
  font-weight: 400;
  line-height: 1.08;
}

.h-xxl {
  letter-spacing: -0.05em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 9.375em;
  font-weight: 400;
  line-height: 0.9;
}

/* Rich Text */

.rich-text p {
  margin-bottom: var(--gap-s);
  font-size: 1em;
  line-height: 1.3;
}

.rich-text a {
  color: var(--color-purple);
  text-decoration: underline;
}

.rich-text ol {
  margin-top: var(--gap-xxs);
  padding-left: var(--gap-sm);
  margin-bottom: 0;
}

.rich-text ul {
  margin-top: var(--gap-xxs);
  padding-left: var(--gap-sm);
  list-style: disc;
}

.rich-text li {
  margin-bottom: var(--gap-xs);
  font-variation-settings: "wght" 430;
  font-size: 1em;
  line-height: 1.2;
}

.rich-text strong {
  font-variation-settings: "wght" 680;
}

.rich-text h3 {
  margin-top: var(--gap-xl);
  margin-bottom: var(--gap-s);
  padding-top: var(--gap-xl);
  border-top: 1px solid var(--color-neutral-400);
  font-size: 1.875em;
}

[data-theme-section="dark"] .rich-text a {
  color: var(--color-electric);
}

/* Eyebrow */

.eyebrow {
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 0.6875em;
  font-weight: 400;
  line-height: 1;
  display: block;
}

.eyebrow.tag-label {
  z-index: 1;
  position: relative;
}

.eyebrow.is--nav-marquee {
  margin-top: 0.0625em;
}

.eyebrow.is--relative {
  position: relative;
}

/* Scribble */

.scribble {
  letter-spacing: 0;
  flex: none;
  font-family: Brisa Pro, Arial, sans-serif;
  font-size: 1.5625em;
  font-weight: 400;
  line-height: 0.8;
}

.scribble-arrow {
  flex: none;
  width: 2em;
}

.scribble-arrow.is--info-col {
  transform-style: preserve-3d;
}

.scribble-arrow.is--db-top {
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(-180deg) rotateZ(0);
}

.scribble-arrow.is--reel {
  margin-bottom: 0.75em;
}

.scribble-arrow.is--try-vault {
  position: absolute;
  transform: translate(3em, -1.4em) rotate(-90deg);
}

.scribble-arrow.is--default-hero {
  margin-bottom: var(--gap-xxs);
}

/* Breakpoints */

@media screen and (max-width: 991px) {
  .h-xl {
    font-size: 6.25em;
  }

  .h-l.is--continent-nr {
    font-size: 3.5em;
  }

  .h-xxl {
    font-size: 7.25em;
  }

  .scribble-arrow.is--try-vault {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .h-xl {
    font-size: 3.7em;
  }

  .h-l {
    font-size: 2.9em;
  }

  .h-l.is--reel-h {
    display: none;
  }

  .h-ml {
    font-size: 3em;
  }

  .h-ml.is--long {
    font-size: 2.5em;
  }

  .h-m.is--long {
    font-size: 1.875em;
  }

  .h-m.is--testimonial {
    font-size: 1.5em;
  }

  .h-s {
    font-size: 1.5625em;
  }

  .h-xxl {
    font-size: 4.25em;
  }

  .scribble-arrow.is--info-col {
    transform: translate(0, 30%) rotateX(180deg) rotateY(0) rotateZ(-90deg);
  }

  .scribble-arrow.is--db-top,
  .scribble-arrow.is--try-vault {
    transform: rotate(-85deg);
  }

  .scribble-arrow.is--section-intro {
    order: 9999;
    transform: translate(-150%, -50%) rotate(-90deg);
  }

  .scribble-arrow.is--community-hero {
    position: absolute;
    bottom: 100%;
    right: -1.5em;
    transform: rotate(50deg);
  }
}





/* ------------------------- BUTTON & TAGS -------------------------------------------------- */

.button {
  height: var(--btn-height);
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  color: var(--color-neutral-800);
  white-space: nowrap;
  border-radius: 0.125em;
  justify-content: center;
  align-items: center;
  padding: 0 1.125em 0.0625em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button.tag {
  height: calc(var(--btn-height) / 2);
  padding: 0.1875em 0.375em;
}

.button,
button.tag {
  --r: 20deg;
}

.button[data-shape="round"],
.square-button[data-shape="round"] {
  border-radius: 3em;
}

.button[data-size="full"] {
  width: 100%;
}

div.button {
  pointer-events: none;
}

:is(.wf-design-mode, .wf-editor) div.button {
  pointer-events: auto;
}

.button-bg,
.button,
.tag-bg,
button.tag {
  transition: all var(--animation-ease);
}

.tag[data-shape="round"] {
  border-radius: 100em;
}

div.tag .button-label__wrap {
  display: none;
}

button.tag .button-label__wrap {
  display: grid;
}

button.tag .tag-label {
  display: none;
}

.button.is--close-btn {
  z-index: 1;
  grid-column-gap: 0em;
  grid-row-gap: 0em;
  color: var(--color-neutral-200);
  padding: 0;
  border: none !important;
  outline: none !important;
}

.button-icon__slot {
  height: 1em;
}

.button-bg {
  z-index: 0;
  background-color: var(--color-dc-green);
  pointer-events: none;
  position: absolute;
  inset: 0%;
}

.button-bg.is--close-bg {
  background-color: var(--color-neutral-550);
}

.button-label__wrap {
  z-index: 1;
  place-items: center;
  display: grid;
  position: relative;
}

.button-label {
  font-variation-settings: "wght" 500;
  letter-spacing: -0.02em;
  justify-content: flex-start;
  align-items: center;
  font-size: 1.125em;
  line-height: 1;
  display: flex;
  position: relative;
  transform-origin: 50% var(--y, 1100%);
}

.button-label.eyebrow {
  letter-spacing: 0;
  font-size: 0.6875em;
}

.button-icon {
  transform-origin: 50% var(--y, 1100%);
}

:is(.wf-design-mode, .wf-editor) .button-label {
  transform-origin: 50% 1800%;
}

.button-label:not(:nth-of-type(1)),
.square-button .button-icon:not(:nth-of-type(1)) {
  position: absolute;
}

.button-label:nth-of-type(1),
.square-button .button-icon:nth-of-type(1) {
  transform: rotate(calc(var(--r) * 0));
}

.button-label:nth-of-type(2),
.square-button .button-icon:nth-of-type(2) {
  transform: rotate(calc(var(--r) * -1));
}

.button-label:nth-of-type(3),
.square-button .button-icon:nth-of-type(3) {
  transform: rotate(calc(var(--r) * -2));
}

.button__wrap {
  display: flex;
}

.button-row {
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 100%;
  display: flex;
}

.button-row.align--end {
  justify-content: flex-end;
  align-items: center;
}

.button-row__wrap {
  justify-content: center;
  align-items: center;
  display: flex;
}

.button-icon__wrap {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.button-icon {
  width: 100%;
  height: 100%;
}

.button-icon__end {
  width: 0.3125em;
  height: 0.3125em;
  margin-left: 0.625em;
  display: inline-block;
}

/* Square Button */

.square-button {
  width: var(--btn-height);
  height: var(--btn-height);
  color: var(--color-neutral-800);
  border-radius: 0.125em;
  padding: 0.625em;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  --r: 10deg;
}

.square-button[data-size="m"] {
  width: 3em;
  height: 3em;
}

.square-button[data-size="l"] {
  width: 3.875em;
  height: 3.875em;
  padding: 1.375em;
  --r: 15deg;
}

@media screen and (max-width: 991px) {
  .button[data-responsive="tablet"] {
    width: 100%;
  }

  .button-row.mobile--small {
    font-size: 0.6em;
  }

  .button-icon__slot {
    height: 0.875em;
  }
}

@media screen and (max-width: 767px) {
  .button[data-responsive="landscape"] {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .button[data-responsive="mobile"] {
    width: 100%;
  }

  .button:has(.button-icon__slot) {
    gap: 0.45em;
  }

  .button:has(.button-icon__slot) .button-icon__slot {
    width: 1em;
  }
}

/* Tag */

.tag {
  color: var(--color-neutral-800);
  border-radius: 0.125em;
  justify-content: center;
  align-items: center;
  padding: 0.25em 0.375em 0.1875em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tag.is--check {
  align-items: center;
  padding-top: 0.25em;
  display: flex;
}

.tag-bg {
  background-color: var(--color-electric);
  position: absolute;
  inset: 0%;
}

.tag-row {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
}

.tag-row__line {
  height: var(--stroke-weight);
  opacity: 0.1;
  background-color: currentColor;
  flex: 1;
}

.tag__check-svg {
  color: currentColor;
  width: 0.5625em;
  margin-right: 0.3125em;
  display: block;
  position: relative;
}

.tag-icon {
  justify-content: center;
  align-items: center;
  width: 0.625em;
  height: 0.625em;
  margin-right: 0.25em;
}

@media screen and (max-width: 479px) {
  .tag {
    flex: none;
  }
}

/* Button + Tag Themes */
[data-wf--button-theme--variant="coral"] {
  background-color: var(--color-coral);
}

[data-wf--button-theme--variant="purple"] {
  background-color: var(--color-purple);
}

[data-wf--button-theme--variant="neutral-200"] {
  background-color: var(--color-neutral-200);
}

[data-wf--button-theme--variant="neutral-300"] {
  background-color: var(--color-neutral-300);
}

[data-wf--button-theme--variant="neutral-525"] {
  background-color: var(--color-neutral-525);
}

[data-wf--button-theme--variant="neutral-600"] {
  background-color: var(--color-neutral-600);
}

[data-wf--button-theme--variant="neutral-800"] {
  background-color: var(--color-neutral-800);
}

[data-wf--button-theme--variant="dark-10"] {
  background-color: color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
}

[data-wf--button-theme--variant="light-10"] {
  background-color: color-mix(in srgb, var(--color-neutral-200) 10%, transparent);
}

[data-wf--button-theme--variant="dark-outline"],
[data-wf--button-theme--variant="light-outline"] {
  background-color: transparent;
}

[data-theme]:has([data-wf--button-theme--variant="coral"]),
[data-theme]:has([data-wf--button-theme--variant="purple"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-525"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-600"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-800"]),
[data-theme]:has([data-wf--button-theme--variant="light-10"]) {
  color: var(--color-neutral-200);
}

[data-theme]:has([data-wf--button-theme--variant="electric"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-200"]),
[data-theme]:has([data-wf--button-theme--variant="neutral-300"]),
[data-theme]:has([data-wf--button-theme--variant="dark-10"]) {
  color: var(--color-neutral-800);
}

[data-theme]:has([data-wf--button-theme--variant="light-outline"]) {
  color: var(--color-neutral-200);
  border: 0.0625em solid currentColor;
}

[data-theme]:has([data-wf--button-theme--variant="dark-outline"]) {
  color: var(--color-neutral-800);
  border: 0.0625em solid currentColor;
}





/* ------------------------- NAVIGATION BAR -------------------------------------------------- */

.nav {
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0%;
}

:is(.wf-design-mode, .wf-editor) .nav {
  opacity: 1;
  visibility: visible;
}

.nav__bg {
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  background-color: #0000004d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity var(--animation-default), visibility var(--animation-default);
}

[data-nav-status="active"] .nav__bg {
  opacity: 1;
  visibility: visible;
}

.nav-bar {
  max-width: var(--nav-bar-max-width-small);
  pointer-events: auto;
  color: var(--color-neutral-200);
  border-radius: 0.25em;
  width: 100%;
  position: relative;
  transition: max-width var(--animation-default-onehalf) 0.2s;
}

[data-nav-status="active"] .nav-bar {
  transition: max-width var(--animation-default) 0s;
  max-width: 100%;
}

.nav-bar__wrap {
  height: var(--nav-bar-height);
  justify-content: center;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.nav-bar__top {
  justify-content: center;
  align-items: center;
  height: 3.375em;
  padding: 0.4375em;
  display: flex;
  position: relative;
}

.nav-bar__top .button {
  height: 100%;
}

.nav-bar__width {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  max-width: var(--size-container);
  flex-flow: column;
  flex: none;
  align-items: center;
  width: 100%;
  padding: 1.25em;
  display: flex;
}

.nav-bar__logo {
  justify-content: center;
  align-items: center;
  height: 2.5em;
  display: flex;
}

.nav-bar__logo svg {
  max-width: 30vw;
}

.nav-logo__wordmark-svg {
  flex: none;
  width: 5.5em;
  display: block;
  transition: transform var(--animation-default), opacity var(--animation-default-half) 0.15s;
  transform: translateY(0em) rotate(0.001deg);
  opacity: 1;
}

[data-scrolling-started="true"] .nav-logo__wordmark-svg {
  transform: translateY(0.75em) rotate(0.001deg);
  opacity: 0;
}

.nav-logo__icon-svg {
  opacity: 0;
  width: 1.375em;
  display: block;
  position: absolute;
  transition: transform var(--animation-default), opacity var(--animation-default-half) 0.15s;
  transform: translateY(-0.75em) rotate(0.001deg);
  opacity: 0;
}

[data-scrolling-started="true"] .nav-logo__icon-svg {
  transform: translateY(0em) rotate(0.001deg);
  opacity: 1;
}

.nav-bar__buttons {
  height: 2.5em;
  display: flex;
  margin-left: auto;
}

.nav-bar__outline {
  background-color: var(--color-neutral-200);
  opacity: 0.1;
  pointer-events: none;
  inset: calc(var(--stroke-weight) * -1);
  border-radius: 0.4375em;.nav-bar__menu
  position: absolute;
  transition: opacity var(--animation-ease);
  display: none;
}

[data-nav-theme][data-nav-status="active"] .nav-bar__outline {
  transition: opacity var(--animation-ease);
}

[data-nav-theme="dark"] .nav-bar__outline {
  opacity: 0.32;
  background-color: var(--color-neutral-900);
}

.nav-bar__bg {
  background-color: transparent;
  pointer-events: none;
  border-radius: 0.375em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color var(--animation-ease);
}

.nav-bar__bg,
[data-nav-theme="dark"] .nav-bar__bg {
  transition: background-color var(--animation-ease);
}

[data-nav-theme][data-nav-status="active"] .nav-bar__bg {
  background-color: var(--color-neutral-900);
}

[data-nav-theme="dark"] .nav-bar__bg {
  background-color: var(--color-neutral-100);
  border-color: none;
}

.nav-logo {
  border-radius: 0.5em;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding-left: 0.5em;
  padding-right: 0.5em;
  display: flex;
}

.nav-bar__back {
  position: absolute;
  inset: 0;
}

.nav-bar__back,
[data-scrolling-started][data-nav-status="active"] .nav-bar__back {
  transition: all var(--animation-default);
  inset: 0em;
  top: 100px
}

[data-nav-status="active"] .nav__bg {
  display: none !important;
}

[data-scrolling-started="true"] .nav-bar__back {
  inset: 0.1875em;
}

@media screen and (max-width: 767px) {
  .nav-bar__back,
  [data-scrolling-started][data-nav-status] .nav-bar__back {
    inset: 0.5em;
  }

  [data-scrolling-started][data-nav-status="active"] .nav-bar__back {
    inset: -0.25em 0em;
  }
}

.nav-bar__bottom {
  grid-template-rows: 0fr;
  width: 100%;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows var(--animation-default) 0s;
}

[data-nav-status="active"] .nav-bar__bottom {
  transition: grid-template-rows var(--animation-default-onehalf) 0.3s;
  grid-template-rows: 1fr;
}

@media screen and (max-width: 767px) {
  .nav-bar__bottom {
    transition: grid-template-rows var(--animation-default) 0s, transform var(--animation-default) 0s;
    transform: translateY(-0.625em) rotate(0.001deg);
  }

  [data-nav-status="active"] .nav-bar__bottom {
    transition: grid-template-rows var(--animation-default-onehalf) 0.3s, transform var(--animation-default) 0.3s;
    transform: translateY(0em) rotate(0.001deg);
  }
}

.nav-bar__bottom-overflow {
  flex-flow: column;
  align-items: center;
  height: 10000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.nav-bar__bottom-inner {
  width: calc(var(--size-container) - 2.5em);
  flex-flow: column;
  align-items: center;
  padding: 1.5em;
  display: flex;
  position: relative;
}

.nav-bar__line {
  height: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  position: absolute;
  bottom: 0;
  left: 0.5em;
  right: 0.5em;
  transition: all var(--animation-default) 0s;
  opacity: 0;
}

[data-nav-status="active"] .nav-bar__line {
  transition: all var(--animation-default) 0.1s;
  opacity: 0;
}

@media screen and (max-width: 767px) {
  .nav-bar__line {
    inset: auto 1em 0em;
  }

  [data-nav-status="active"] .nav-bar__line {
    transition: all var(--animation-default) 0.2s;
    inset: auto 0em 0em;
  }
}

.nav-bar__bottom-row {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  width: 100%;
  display: flex;
  transition: transform var(--animation-default) 0s;
  /* transform: translateY(2em) rotate(0.001deg); */
}

.nav-bar__bottom-row > *:nth-child(2) {
  transition: transform var(--animation-default) 0.075s;
  transform: translateY(2em) rotate(0.001deg);
}

.nav-bar__bottom-row > *:nth-child(3) {
  transition: transform var(--animation-default) 0.15s;
  transform: translateY(2em) rotate(0.001deg);
}

[data-nav-status="active"] .nav-bar__bottom-row > * {
  transition: transform var(--animation-default-onehalf) 0.3s;
  transform: translateY(0em) rotate(0.001deg);
}

[data-nav-status="active"] .nav-bar__bottom-row > *:nth-child(2) {
  transition: transform var(--animation-default-onehalf) 0.375s;
  transform: translateY(0em) rotate(0.001deg);
}

[data-nav-status="active"] .nav-bar__bottom-row > *:nth-child(3) {
  transition: transform var(--animation-default-onehalf) 0.45s;
  transform: translateY(0em) rotate(0.001deg);
}

.nav-bar__bottom-col {
  grid-column-gap: 1.375em;
  grid-row-gap: 1.375em;
  flex-flow: column;
  width: 100%;
  padding: 2.5em;
  display: flex;
}

.nav-bar__bottom-col.is--products {
  background-color: var(--color-neutral-700);
  border-radius: 1em;
}

.nav-bar__bottom-col.is--ad {
  padding: 0;
}

.nav-bar__tag-row {
  opacity: 0.8;
  display: flex;
}

.nav-bar__big-a {
  align-items: center;
  width: 100%;
  padding-top: .5em;
  padding-bottom: .5em;
  display: flex;
  font-size: 2em;
  justify-content: flex-end;
}

.nav-bar__a-tag {
  padding-top: 0.25em;
  padding-left: 0.625em;
}

.nav-bar__a-tag.is--small {
  padding-top: 0.125em;
  font-size: 0.8em;
}

.nav-bar__small-ul {
  margin-top: auto;
}

.nav-bar__small-li.is--inactive {
  cursor: not-allowed;
}

.nav-bar__small-a {
  align-items: center;
  width: 100%;
  padding-top: 0.3125em;
  padding-bottom: 0.25em;
  display: flex;
}

.nav-bar__small-a.is--inactive {
  pointer-events: none;
}

.nav-bar__socials {
  margin-top: auto;
  padding-top: 2em;
  display: flex;
}

.nav-bar__small-span {
  font-size: 1em;
  line-height: 1;
}

.nav-bar__big-span {
  font-variation-settings: "wght" 430;
  font-size: 1.5em;
  line-height: 1;
}

.nav-bar__mobile-buttons {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  display: none;
}

/* Nav Banner */

.nav-banner__content {
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 2.5em;
  display: flex;
  position: absolute;
}

.nav-banner {
  background-color: var(--color-neutral-700);
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.nav-banner[data-hover] {
  transition: background-color var(--animation-ease);
}

.nav-banner[data-hover]:hover {
  background-color: var(--color-neutral-600);
}

.nav-banner__before {
  padding-top: 110%;
}

.nav-banner__tags {
  justify-content: center;
  display: flex;
}

.nav-banner__title {
  text-align: center;
}

.nav-banner__btn {
  justify-content: center;
  padding-top: 1.5em;
  display: flex;
}

.nav-banner__center-content {
  flex-flow: column;
  flex: 1;
  justify-content: center;
  padding-bottom: 2em;
  display: flex;
}

.nav-banner__bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

/* Menu */

.nav-menu {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  cursor: pointer;
  border-radius: 0.125em;
  align-items: center;
  height: 100%;
  padding-left: 0.625em;
  padding-right: 1em;
  display: flex;
  transition: background-color var(--animation-default-half), grid-column-gap var(--animation-default);
  background-color: var(--color-neutral-800);
}

.nav-menu:hover {
  background-color: var(--color-dc-green);
  color: var(--color-neutral-800);
}

[data-nav-status="active"] .nav-menu {
  background-color: var(--color-dc-green);
  color: var(--color-neutral-800);
}

[data-nav-status="active"] .nav-menu {
  grid-column-gap: 0.1875em;
}

.nav-menu__label {
  font-variation-settings: "wght" 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.0625em;
  font-size: 1.125em;
  line-height: 1;
}

.nav-menu__hamburger {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 1.375em;
  height: 0.4375em;
  display: flex;
  position: relative;
}

.nav-menu__hamburger > * {
  transition: transform var(--animation-default);
  transform: translateY(0.1875em) rotate(0.001deg) scaleX(1);
}

.nav-menu__hamburger > *:nth-child(2) {
  transform: translateY(-0.1875em) rotate(0.001deg) scaleX(1);
}

[data-nav-status="active"] .nav-menu__hamburger > *:nth-child(1) {
  transform: translateY(0em) rotate(-45deg) scaleX(0.75);
}

[data-nav-status="active"] .nav-menu__hamburger > *:nth-child(2) {
  transform: translateY(0em) rotate(45deg) scaleX(0.75);
}

.nav-menu__hamburger-bar {
  height: var(--stroke-weight);
  background-color: currentColor;
  width: 100%;
  position: absolute;
}

.nav-bar__menu {
  height: 2.5em;
  margin-left: 8px;
}

.nav-bar__menu .nav-menu {
  border-radius: 3em !important;
  padding-inline: 1.125em;
}


/* Marquee & Under Nav */

.nav-marquee {
  background-color: var(--color-electric);
  pointer-events: auto;
  color: var(--color-neutral-800);
  border-radius: 0.1875em;
  flex: none;
  width: 100%;
  height: 1.25em;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

[data-wf--under-nav-bar--variant="purple"] .nav-marquee,
[data-wf--under-nav-bar--variant="purple"] .nav-product-info__end .tag-bg {
  background-color: var(--color-purple);
}

[data-wf--under-nav-bar--variant="coral"] .nav-marquee,
[data-wf--under-nav-bar--variant="coral"] .nav-product-info__end .tag-bg {
  background-color: var(--color-coral);
}

[data-wf--under-nav-bar--variant="purple"] .nav-marquee,
[data-wf--under-nav-bar--variant="purple"] .nav-product-info__end .tag,
[data-wf--under-nav-bar--variant="coral"] .nav-marquee,
[data-wf--under-nav-bar--variant="coral"] .nav-product-info__end .tag {
  color: var(--color-light);
}

.under-nav-bar__inner {
  max-width: var(--nav-bar-max-width-small);
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  flex-flow: column;
  width: 100%;
  padding-top: 0.375em;
  display: flex;
  position: relative;
}

.under-nav-bar {
  z-index: 50;
  padding-top: var(--nav-bar-height);
  padding-right: var(--gap-l);
  padding-left: var(--gap-l);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  flex-flow: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  transition: all var(--animation-default);
  transform: translateY(0em) scale(1) rotate(0.001deg);
}

body:has([data-nav-status="active"]) .under-nav-bar,
body:has([data-scrolling-started="true"]) .under-nav-bar {
  transition: all var(--animation-default);
  transform: translateY(-2em) scale(0.975) rotate(0.001deg);
}

:is(.wf-design-mode, .wf-editor) .under-nav-bar {
  opacity: 1;
  visibility: visible;
}

/* Product Info */

.nav-product-info {
  pointer-events: auto;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.nav-product-info__start,
.nav-product-info__end {
  display: flex;
}

/* Breakpoints */

@media screen and (max-width: 991px) {
  .nav-bar__bottom-col.is--ad {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .nav-bar__top {
    height: var(--nav-bar-height);
    padding: 1em;
  }

  .nav-bar__width {
    padding: 0;
  }

  .nav-menu__label {
    margin-bottom: 0;
  }

  .nav-bar__bottom-inner {
    max-height: calc(100dvh - var(--nav-bar-height));
    width: 100vw;
    padding: 1em 1em 1.25em;
    overflow: scroll;
  }

  .nav-bar__line {
    left: 0;
    right: 0;
  }

  .nav-bar__bottom-row {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
  }

  .nav-bar__bottom-col {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    padding: 1.25em 2.25em 2em;
  }

  .nav-bar__bottom-col.is--products {
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
    padding-top: 2em;
    padding-bottom: 1em;
  }

  .nav-bar__tag-row.is--membership {
    display: none;
  }

  .nav-bar__big-a {
    padding-top: 0.8125em;
    padding-bottom: 0.875em;
  }

  .nav-bar__small-ul {
    display: none;
  }

  .nav-bar__socials {
    padding-top: 0;
    display: none;
  }

  .nav-bar__big-span {
    font-size: 1.25em;
  }

  .nav-bar__login-button {
    display: none;
  }

  .nav-bar__mobile-buttons {
    width: calc(100% + 4em);
    margin-bottom: -2em;
    margin-left: -2em;
    padding-top: 0.5em;
    display: flex;
  }

  .under-nav-bar__inner {
    margin-top: -0.125em;
    padding-top: 0;
  }

  .under-nav-bar {
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .nav-product-info {
    justify-content: center;
  }

  .nav-product-info__start {
    display: none;
  }
}





/* ------------------------- FOOTER -------------------------------------------------- */

.footer {
  position: relative;
}

.footer-inner {
  padding-top: var(--gap-xxl);
  padding-bottom: var(--gap-l);
  grid-column-gap: var(--padding-s);
  grid-row-gap: var(--padding-s);
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  min-height: 100vh;
  display: flex;
}

.footer-top__links {
  grid-column-gap: 8.5em;
  grid-row-gap: 8.5em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-bottom__row {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  flex-flow: column;
  display: flex;
}

.footer-bottom__logo {
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 122vw;
  display: flex;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.footer-bottom__details {
  grid-template-columns: 1fr 1fr 1fr;
  display: grid;
}

.footer-bottom__details-col.is--center {
  justify-content: center;
  align-items: center;
  display: flex;
}

.footer-bottom__details-col.is--end {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.footer-form__col {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 35.1875em;
  display: flex;
}

.footer-top__row {
  grid-column-gap: 3.75em;
  grid-row-gap: 3.75em;
  flex-flow: column;
  display: flex;
}

.footer-link__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.footer-link__col {
  width: 100%;
  max-width: 13.375em;
}

.footer-link__col-bottom {
  grid-template-rows: 1fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .footer-link__col-bottom {
  grid-template-rows: 1fr;
}

.footer-link__col-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.footer-link__col-icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 0.625em;
  height: 0.625em;
  display: none;
  transform: rotate(0);
  transition: transform var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .footer-link__col-icon {
  transform: rotate(315deg);
}
.footer-link__col-top {
  padding-bottom: var(--gap-xxl);
}

.footer-link__col-ul {
  grid-column-gap: 0.3125em;
  grid-row-gap: 0.3125em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 0.125em;
  list-style: none;
  display: flex;
}

.footer-link__col-li.is--soon {
  grid-column-gap: 0.3125em;
  grid-row-gap: 0.3125em;
  opacity: 0.35;
  cursor: not-allowed;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-link__col-li.is--wip {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-top__buttons {
  grid-column-gap: 8.5em;
  grid-row-gap: 8.5em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.footer-top__buttons-spacer {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 35.1875em;
  display: flex;
}

.footer-top__button-row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.footer-top__button-col {
  width: 100%;
  max-width: 13.375em;
}

.footer-bottom__logo-svg {
  overflow: visible !important;
}

.footer-link__col-li-tag {
  flex: none;
  padding-top: 0.125em;
  padding-left: 0.3125em;
  font-size: 0.8em;
}

.footer-bottom__legal {
  display: flex;
}

.footer-bottom__legal-list {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  display: flex;
}

@media screen and (max-width: 991px) {
  .footer-top__links {
    grid-column-gap: 4.5em;
    grid-row-gap: 4.5em;
    flex-flow: column;
  }

  .footer-top__buttons-spacer {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .footer-inner {
    justify-content: flex-start;
    align-items: stretch;
    min-height: auto;
  }

  .footer-top__links {
    grid-column-gap: var(--gap-xxl);
    grid-row-gap: var(--gap-xxl);
  }

  .footer-bottom__row {
    grid-column-gap: var(--gap-sm);
    grid-row-gap: var(--gap-sm);
    justify-content: flex-start;
    align-items: center;
  }

  .footer-bottom__logo {
    margin-top: var(--gap-xxl);
    width: 210vw;
    margin-bottom: 0.625em;
    margin-left: -85vw;
    left: auto;
    transform: none;
  }

  .footer-bottom__details {
    grid-column-gap: var(--gap-sm);
    grid-row-gap: var(--gap-sm);
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    display: contents;
  }

  .footer-bottom__details-col.is--end {
    order: -1;
  }

  .footer-top__row {
    grid-column-gap: var(--gap-xxl);
    grid-row-gap: var(--gap-xxl);
  }

  .footer-link__row {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
  }

  .footer-link__col {
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: var(--color-neutral-400);
    margin-left: calc(-1 * var(--gap-l));
    width: 100vw;
    max-width: none;
  }

  .footer-link__col.is--last {
    border-bottom: 1px solid var(--color-neutral-400);
  }

  .footer-link__col-bottom {
    grid-template-rows: 0fr;
  }

  .footer-link__col-bottom-content {
    padding-right: var(--gap-l);
    padding-bottom: var(--gap-l);
    padding-left: var(--gap-l);
  }

  .footer-link__col-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .footer-link__col-top {
    padding: var(--gap-m) var(--gap-l);
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .footer-link__col-ul {
    grid-column-gap: var(--gap-xxs);
    grid-row-gap: var(--gap-xxs);
  }

  .footer-top__buttons {
    padding-bottom: var(--gap-l);
    border-bottom: 1px solid var(--color-neutral-400);
    order: -1;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
  }

  .footer-top__button-row {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .footer-top__button-col {
    width: auto;
    max-width: none;
  }

  .footer-bottom__legal-list {
    max-width: 20em;
  }
}






/* ------------------------- LOADING -------------------------------------------------- */

/* Animation */
@keyframes loadingRotate {
  0% {
    transform: rotate(0.001deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-icon {
  background-color: rgba(var(--color-rgb-tint), 0.15);
  opacity: 0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  display: flex;
  position: absolute;
}

.loading-icon__inner {
  border-top-style: solid;
  border-top-width: 0.125em;
  border-top-color: var(--color-light);
  border-right-style: solid;
  border-right-width: 0.125em;
  border-right-color: var(--color-light);
  border-bottom-style: solid;
  border-bottom-width: 0.125em;
  border-bottom-color: var(--color-light);
  border-left-style: solid;
  border-left-width: 0.125em;
  border-left-color: var(--color-light);
  -webkit-clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
  clip-path: polygon(0% 0%, 50% 0%, 50% 50%, 0% 50%);
  border-radius: 50%;
  width: 1.5em;
  height: 1.5em;
  position: absolute;
  animation: loadingRotate 0.5s linear infinite;
}

.transition[style="opacity: 1; visibility: inherit;"] .loading-icon {
  transition: var(--animation-ease-double) 1s;
  opacity: 1;
}

[data-transition-theme="dark"] .loading-icon {
  background-color: rgba(var(--color-rgb-light), 0.15);
}

[data-transition-theme="dark"] .loading-icon .loading-icon__inner {
  border-color: var(--color-dark);
}





/* ------------------------- MARQUEE -------------------------------------------------- */

/* Animation */
@keyframes translateX {
  to {
    transform: translateX(-100%);
  }
}

[data-css-marquee-list] {
  animation: translateX 30s linear;
  animation-iteration-count: infinite;
  animation-duration: inherit;
}

body:has([data-scrolling-started="true"]) [data-css-marquee-list="nav"] {
  animation-play-state: paused;
}

.marquee-css {
  width: var(--nav-bar-max-width-small);
  flex: none;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.marquee-css__list {
  flex: none;
  align-items: center;
  display: flex;
  position: relative;
}

.marquee-css__item {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex: 0;
  align-items: center;
  padding-right: 1.5em;
  display: flex;
}

.marquee-css__item-svg {
  width: 0.4375em;
}





/* ------------------------- DEFAULT & PASSWORD HERO (401) -------------------------------------------------- */

.default-hero {
  padding-bottom: 3.75em;
  overflow: hidden;
}

.default-hero.is--legal {
  padding-bottom: var(--padding-m);
}

.default-hero__content {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

[data-wf--default-hero--variant="gap-50"] .default-hero__content {
  gap: 3.75em;
}

[data-wf--default-hero--variant="gap-80"] .default-hero__content {
  gap: 5em;
}

[data-wf--default-hero-title--variant="xl"] h1 {
  font-size: 7em;
}

[data-wf--default-hero-title--variant="l"] h1 {
  font-size: 5em;
}

@media screen and (max-width: 767px) {
  [data-wf--default-hero-title--variant="xl"] h1 {
    font-size: 4em;
  }

  [data-wf--default-hero-title--variant="l"] h1 {
    font-size: 4em;
  }
}

@media screen and (max-width: 479px) {
  [data-wf--default-hero-title--variant="l"] h1 {
    font-size: 3.5em;
  }
}

.default-hero__title-row {
  justify-content: center;
  align-items: center;
  max-width: 60em;
  display: flex;
  position: relative;
}

.default-hero__subtitle-row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.default-hero__scribble {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  color: var(--color-electric);
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}

[data-wf--default-hero-scribble--variant="coral"] {
  color: var(--color-coral);
}

[data-wf--default-hero-scribble--variant="purple"] {
  color: var(--color-purple);
}

.default-hero__subtitle {
  position: relative;
}

.default-hero__title {
  z-index: 1;
  position: relative;
}

.password-hero {
  padding: var(--nav-bar-height) var(--gap-l);
  justify-content: center;
  align-items: center;
  height: 100dvh;
  display: flex;
}

.password-hero__form {
  width: 100%;
  position: relative;
}

.password-hero__fields {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  background-color: var(--color-neutral-600);
  border-radius: 1em;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 27.5em;
  padding: 1.875em 2em 2em;
  display: flex;
  position: relative;
}

.password-hero__group {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.password-hero__title {
  text-align: center;
  padding-top: 1.25em;
  padding-bottom: 2em;
}

@media screen and (max-width: 767px) {
  .password-hero__fields {
    padding: 1.5em;
  }

  .default-hero__subtitle {
    z-index: 1;
    text-wrap: balance;
    position: relative;
  }
}





/* ------------------------- FULL VIDEO (SEE VAULT) -------------------------------------------------- */

.full-video {
  z-index: 1;
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
}

.full-video__wrap {
  width: 100%;
  position: relative;
}

.full-video__bg {
  z-index: 0;
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
}

.full-video__bg.is--half {
  height: 50%;
}

@media screen and (max-width: 991px) {
  .full-video {
    padding-top: 3em;
  }
}





/* ------------------------- INFO -------------------------------------------------- */

.info {
  padding-top: var(--gap-xxl);
  padding-bottom: var(--padding-m);
}

.info__wrap {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.info__small-col {
  width: 100%;
  max-width: 28em;
}

.info__large-col {
  width: 100%;
  max-width: 50em;
  position: relative;
}

.info__graphic {
  width: 7.5em;
}

.info__list {
  margin-top: calc(2 * var(--gap-xl));
  margin-bottom: calc(3 * var(--gap-xxl));
  grid-column-gap: calc(2 * var(--gap-xl));
  grid-row-gap: calc(2 * var(--gap-xl));
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.info__li {
  padding-top: var(--gap-sm);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  border-top: var(--stroke-weight) solid var(--color-neutral-400);
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.info__li-title {
  flex: none;
  width: 20.625em;
}

.info__scribble {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  color: var(--color-coral);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  left: -7.5em;
}

.info-grid {
  padding-top: var(--padding-xl);
}

.info-grid__intro {
  padding-bottom: var(--padding-m);
  text-align: center;
  width: 100%;
  max-width: 59em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.info-grid__title strong {
  font-weight: inherit;
  color: var(--color-electric);
}

[data-theme-section="light"] .info-grid__title strong {
  color: var(--color-purple);
}

[data-theme-section="light"] .info-grid__main-item {
  border-color: var(--color-neutral-300);
}

[data-theme-section="light"] .info-grid__intro-bg {
  background-color: var(--color-neutral-300);
}

.info-grid__main {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--padding-s);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.info-grid__main-item {
  padding-top: var(--gap-l);
  border-top-style: solid;
  border-top-width: var(--stroke-weight);
  border-top-color: var(--color-neutral-600);
  min-width: calc(50% - var(--gap-sm) / 2);
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.info-grid__item-nr {
  flex: none;
  width: 7.25em;
}

.info-grid__item-col {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 24.5em;
  display: flex;
}

.info-grid__intro-bg {
  z-index: -1;
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100vh;
  position: absolute;
  bottom: 0;
  left: 50%;
}

@media screen and (max-width: 991px) {
  .info__small-col {
    max-width: 18em;
  }

  .info__li {
    flex-flow: column;
  }

  .info-grid__item-nr {
    width: 3.5em;
  }
}

@media screen and (max-width: 767px) {
  .info {
    position: relative;
  }

  .info__wrap {
    grid-column-gap: 10.5em;
    grid-row-gap: 10.5em;
    flex-flow: column;
  }

  .info__graphic {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .info__list {
    margin-top: calc(2 * var(--gap-xxl));
  }

  .info__scribble {
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    top: -3.5em;
    left: 5%;
  }

  .info__small-col {
    max-width: none;
  }

  .info__title {
    text-align: center;
  }

  .info-grid__main {
    grid-row-gap: var(--gap-xxl);
  }

  .info-grid__main-item {
    width: 100%;
    min-width: 100%;
  }

  .info-grid__item-nr {
    top: var(--gap-l);
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    position: absolute;
    right: 0;
  }

  .info-grid__item-col {
    max-width: 30em;
  }
}





/* ------------------------- LAST ADDED -------------------------------------------------- */

.last-added {
  padding-top: 15em;
  padding-bottom: var(--padding-s);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
  overflow: clip;
}

.last-added__bg {
  color: var(--color-neutral-600);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 10em;
  display: flex;
  position: absolute;
  top: 0;
}

.last-added__title-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 3.75em;
  display: flex;
  position: relative;
}

.last-added__p-row {
  text-align: center;
  width: 100%;
  max-width: 28em;
  margin-bottom: 3.75em;
  margin-left: auto;
  margin-right: auto;
}

.last-added__scribble {
  color: var(--color-electric);
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}

.last-added__scribble-arrow {
  transform-style: preserve-3d;
  width: 3em;
  position: absolute;
  right: -2em;
}

.last-added__wrap {
  position: relative;
}

.last-added__overlay {
  z-index: 2;
  background-image: linear-gradient(
    180deg,
    #201d1d00,
    var(--color-neutral-800)
  );
  pointer-events: none;
  height: 13.125em;
  position: absolute;
  inset: auto 0% 0%;
}

.last-added__list {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  display: flex;
}

.last-added__button-row {
  z-index: 1;
  margin-top: var(--gap-sm);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

@media screen and (max-width: 991px) {
  .last-added__bg {
    padding-top: 7.5em;
  }

  .last-added__title-row {
    flex-flow: column;
  }

  .last-added__scribble {
    order: 9999;
    top: 2em;
  }

  .last-added__scribble-arrow {
    transform: rotateX(180deg) rotateY(0) rotateZ(-26deg);
  }
}

@media screen and (max-width: 767px) {
  .last-added__title-row {
    text-align: center;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .last-added__overlay {
    height: 30em;
  }
}





/* ------------------------- WEBCAM -------------------------------------------------- */

.webcam__video {
  aspect-ratio: 1;
  background-color: var(--color-neutral-800);
  outline-color: var(--color-purple);
  outline-offset: 0.75em;
  border-radius: 100em;
  outline-width: 1px;
  outline-style: solid;
  width: 100%;
  position: relative;
}

[data-wf--webcam-wrap--variant="electric"] .webcam__video {
  outline-color: var(--color-electric);
}

.webcam__sound {
  aspect-ratio: 1;
  background-color: var(--color-electric);
  color: var(--color-neutral-800);
  cursor: pointer;
  border-radius: 100em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  padding: 0.9375em;
  display: flex;
  position: absolute;
  left: 0;
  transform: translate(-65%);
  transition: transform var(--animation-default-half);
}

.webcam__sound:hover {
  transform: translate(-65%) scale(1.1) rotate(0.001deg);
}

.webcam__wrap {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}
.webcam__sound-mute-svg {
  width: 100%;
  height: 100%;
  display: none;
}

.webcam__sound-unmute-svg {
  width: 100%;
  height: 100%;
  display: flex;
}

.webcam__shadow {
  background-color: var(--color-neutral-900);
  opacity: 0;
  filter: blur(2em);
  border-radius: 50%;
  width: 150%;
  height: 150%;
  position: absolute;
}





/* ------------------------- TESTIMONIALS -------------------------------------------------- */

/* Trusted By */

.trustedby-wrap {
  grid-column-gap: var(--gap-xl);
  grid-row-gap: var(--gap-xl);
  flex-flow: column;
  display: flex;
}

.trustedby-row {
  width: 100%;
}

.trustedby-marquee__item {
  margin-right: calc(2 * var(--gap-xxl));
  flex: none;
  justify-content: center;
  align-items: center;
  display: flex;
}

.trustedby-marquee__collection {
  will-change: transform;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.trustedby-marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 1) 86%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 14%, rgba(255, 255, 255, 1) 86%, rgba(255, 255, 255, 0) 100%);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.trusted-by {
  padding-bottom: var(--padding-xl);
  margin-top: calc(-2.75 * var(--gap-xxl));
}

.trusted-by__container {
  width: 100%;
  max-width: 50em;
  margin-left: auto;
  margin-right: auto;
}

.trustedby-marquee__item-svg {
  width: auto;
  height: 2.5em;
  display: block;
}

/* Testimonials */

.testimonial {
  padding-bottom: var(--gap-l);
}

.testimonial-row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  width: 100%;
  display: flex;
}

.testimonial-col__small {
  width: 100%;
  max-width: 28em;
}

.testimonial-col__large {
  flex: 1;
}

.testimonial-wrap {
  background-color: var(--color-neutral-300);
  border-radius: 1em;
  width: 100%;
  height: 100%;
  min-height: 38.75em;
  position: relative;
}

.testimonial-item {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  border-radius: 1em;
  flex-flow: column;
  width: 100%;
  min-height: 23.125em;
  padding: 3.75em;
  display: flex;
}

.testimonial-item__lower {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-item__info {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-item__info-img {
  aspect-ratio: 1;
  border-radius: 100em;
  width: 4.5em;
  margin-bottom: 0.125em;
  overflow: hidden;
}

.testimonial-item__info-details {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

/* Globe */

.testimonial-globe__col {
  padding-top: var(--gap-xxl);
  padding-bottom: var(--gap-xxl);
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  text-align: center;
  border-radius: 100em;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.testimonial-globe__wrap {
  aspect-ratio: 1;
  width: 23.75em;
  position: relative;
}

.testimonial-globe__progress {
  z-index: 1;
  width: 100%;
  height: 100%;
  position: relative;
}

.testimonial-globe__map-w {
  z-index: 0;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0.75em;
  overflow: hidden;
}

.testimonial-globe__img {
  z-index: 1;
  opacity: 0;
  width: auto;
  transition: transform 1.2s cubic-bezier(0.625, 0.05, 0, 1), opacity 0.2s;
  position: absolute;
}

.testimonial-globe__img.is--base {
  z-index: 0;
  opacity: 100;
}

[data-testimonial-map].is--active {
  opacity: 1;
}

.testimonial-globe__map-w:has([data-testimonial-map="NL"].is--active) .testimonial-globe__img {
  transform: translate(8%, 40%) scale(5.5);
}

.testimonial-globe__map-w:has([data-testimonial-map="UK"].is--active) .testimonial-globe__img {
  transform: translate(15%, 25%) scale(4);
}

.testimonial-globe__map-w:has([data-testimonial-map="AUS"].is--active) .testimonial-globe__img {
  transform: translate(-70%, -60%) scale(2);
}

.testimonial-globe__map-w:has([data-testimonial-map="SWE"].is--active) .testimonial-globe__img {
  transform: translate(-5%, 45%) scale(3.5);
}

.testimonial-globe__map-w:has([data-testimonial-map="CA"].is--active) .testimonial-globe__img {
  transform: translate(33%, 17%) scale(1.1);
}

.testimonial-globe__map-w:has([data-testimonial-map="VNM"].is--active) .testimonial-globe__img {
  transform: translate(-80%, -40%) scale(3);
}

/* Vertical Slider */

.vertical-slider__collection {
  height: 100%;
}

.vertical-slider__list {
  z-index: 1;
  perspective: 50em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.vertical-slider__list.is--rounded {
  border-radius: 50em;
}

.vertical-slider__item {
  z-index: 1;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  flex: none;
  width: 100%;
  max-width: 35em;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
}

.vertical-slider__item.is--quote {
  max-width: 42.5em;
}

.vertical-slider__buttons {
  z-index: 10;
  flex-flow: column;
  display: flex;
  position: absolute;
  inset: 0%;
}

.vertical-slider__buttons.is--recent-updates {
  border-radius: 50em;
  overflow: hidden;
}

.vertical-slider__bullets {
  top: 50%;
  right: var(--gap-m);
  z-index: 3;
  flex-flow: column;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: absolute;
  transform: translate(0, -50%);
}

.vertical-slider__bullet-item {
  color: var(--color-neutral-475);
  width: 3em;
  padding: 0.5em 1em;
}

.vertical-slider__bullet-item-line {
  transform-style: preserve-3d;
  background-color: currentColor;
  width: 100%;
  height: 1px;
  transition-property: transform, background-color;
  transition-duration: 0.55s, 0.2s;
  transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1), ease;
  transform: scale3d(0.5, 1, 1);
}

[data-vertical-slider-bullet="active"] {
  color: var(--color-purple);
}

.intro [data-vertical-slider-bullet="active"] {
  color: var(--color-electric);
}

[data-vertical-slider-bullet="active"] .vertical-slider__bullet-item-line {
  transform: scale(1, 1);
}

@media screen and (min-width: 992px) {
  .slider__cursor-icon {
    transform: translate(0px, 200%);
  }

  .slider__cursor-inner {
    transition: clip-path var(--duration-default) var(--cubic-default);
    clip-path: inset(50% round 100em);
  }

  [data-vertical-slider]:has([data-vertical-slider-cursor-track]:hover) .slider__cursor-inner {
    clip-path: inset(0% round 100em);
  }

  [data-vertical-slider]:has([data-vertical-slider-cursor-track]:hover) .slider__cursor-icon {
    transform: translate(0px, 0%);
  }

  [data-vertical-slider]:has([data-next]:hover) .slider__cursor-icon {
    transform: translate(0px, -100%);
  }

  :is(.wf-design-mode, .wf-editor) .vertical-slider__buttons {
    pointer-events: none;
  }
}

.vertical-slider__button {
  cursor: pointer;
  flex: 1;
  width: 100%;
}

.vertical-slider__button:focus {
  outline-offset: 0px;
  border: 1px #000;
  outline: 3px #f4f4f4;
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .testimonial-col__small {
    max-width: 18em;
    display: none;
  }

.testimonial-wrap {
  min-height: 42em;
}

.testimonial + .faq {
  padding-top: calc(var(--padding-l) - var(--gap-xxl));
}

  .testimonial-item {
    padding: var(--gap-xxl) var(--gap-l);
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .testimonial-item__lower {
    grid-column-gap: var(--gap-l);
    grid-row-gap: var(--gap-l);
    flex-flow: column;
  }

  .testimonial-item__info {
    flex-flow: row;
    order: 1;
    justify-content: flex-start;
    align-items: center;
  }

  .testimonial-globe__wrap {
    width: 90%;
  }

  .vertical-slider__list {
    padding-bottom: var(--gap-xl);
  }

  .vertical-slider__buttons {
    padding-bottom: var(--gap-xl);
    grid-column-gap: var(--gap-xxs);
    grid-row-gap: var(--gap-xxs);
    flex-flow: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: auto 0 0;
  }

  .vertical-slider__buttons.is--recent-updates {
    padding-bottom: 7em;
  }

  .vertical-slider__button {
    color: var(--color-neutral-200);
    flex: 0 auto;
    width: auto;
  }
}

@media screen and (max-width: 767px) {
  .testimonial {
    padding-bottom: 0.625em;
  }

  .testimonial-col__small {
    display: none;
  }

  .testimonial-wrap {
    min-height: 43.5em;
  }

  .testimonial-item__info-img {
    width: 3.5em;
  }

  .vertical-slider__item {
    max-width: 78%;
  }

  .vertical-slider__bullets {
    display: none;
  }
}





/* ------------------------- SVG IMAGE -------------------------------------------------- */

.svg-img {
  width: auto;
  height: auto;
  max-height: none;
  display: block;
}

.svg-img.is--product-slider {
  aspect-ratio: 3481 / 1740.5;
  pointer-events: none;
  width: 238em;
  position: absolute;
  top: 48%;
}

.svg-img.is--reel-circle {
  aspect-ratio: 1;
  width: 100%;
}

.svg-img.is--dc-radial-marquee {
  aspect-ratio: 2120 / 1060.31;
  width: 90%;
  position: absolute;
  bottom: 0;
}

.svg-img.is--made-flick,
.svg-img.is--for-who,
.svg-img.is--hero-bg {
  aspect-ratio: 1;
  width: 100%;
}

.svg-img.is--last-added {
  opacity: 0.1;
  width: 125em;
}

.svg-img.is--resources-list {
  opacity: 0.1;
  width: 18em;
  position: absolute;
  top: 0;
  transform: translateY(-50%);
}

.svg-img.is--updates-hero {
  width: 125em;
}

.svg-img.is--updates-hero-bottom {
  width: 18em;
  position: absolute;
  top: 100%;
  transform: translateY(-50%);
}

[data-svg-theme="dark"] .svg-img {
  opacity: 0.15;
}

[data-wf--hero-background-lines--variant="dark-mode"] .svg-img {
  opacity: 0.15;
}




/* ------------------------- FORM -------------------------------------------------- */

.form-label {
  color: var(--color-neutral-800);
  letter-spacing: 0;
  text-transform: uppercase;
  width: 100%;
  margin-bottom: 0;
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 0.75em;
  font-weight: 400;
  line-height: 1;
}

.form {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.form-required {
  color: var(--color-coral);
  display: inline-block;
  transform: translate(-0.25em, -0.25em);
}

.form-group {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  text-align: left;
  flex-flow: column;
  width: 100%;
  margin-bottom: 0;
  display: flex;
}

.form-field {
  width: 100%;
  position: relative;
}

.form-field-row {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  display: flex;
}

.form-bottom-row {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.form-field-group {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.form-field-group.is--auto {
  width: auto;
}

/* Form Inputs */

.form-input {
  height: var(--input-height);
  border-top-style: solid;
  border-top-width: var(--stroke-weight);
  border-top-color: #0000;
  border-right-style: solid;
  border-right-width: var(--stroke-weight);
  border-bottom-style: solid;
  border-right-color: #0000;
  border-bottom-width: var(--stroke-weight);
  border-bottom-color: #0000;
  border-left-style: solid;
  border-left-width: var(--stroke-weight);
  background-color: var(--color-neutral-300);
  outline-offset: 0px;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  border-left-color: #0000;
  border-radius: 0.1875em;
  outline: 0 #0000;
  min-width: 15em;
  margin-bottom: 0;
  padding: 0.75em 1em;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 0 #0000;
  width: 100%;
}

.form-input:hover {
  border-color: var(--color-neutral-450);
}

.form-input:focus {
  border-color: var(--color-neutral-475);
}

.form-input::placeholder {
  color: var(--color-neutral-475);
  background-color: #0000;
}

/* Radiocheck */

.radiocheck-custom {
  background-color: var(--color-neutral-300);
  pointer-events: none;
  color: var(--color-neutral-300);
  -webkit-user-select: none;
  user-select: none;
  border: 0.0625em solid #0000;
  border-radius: 100em;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  margin-top: 0.066em;
  margin-right: 0.75em;
  display: flex;
  position: absolute;
}

.radiocheck-group {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.radiocheck-check-svg {
  width: 1.5em;
  position: absolute;
}

.radiocheck-label {
  color: var(--color-neutral-800);
  cursor: pointer;
  flex-grow: 1;
  margin-bottom: 0;
  padding-left: 1.8em;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
}

.radiocheck-label.is--small {
  flex-grow: 1;
  padding-left: 2.75em;
  font-size: 1em;
}

.radiocheck-field {
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: relative;
}

.radiocheck-field.is--newsletter {
  height: var(--btn-height);
  align-items: center;
}

/* Checkbox */

.checkbox-input {
  cursor: pointer;
  width: 0;
  height: 0;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
}

/* Submit */

.form-submit-btn {
  cursor: pointer;
  width: 100%;
  margin-top: 0.5em;
  position: relative;
}

.form-submit-btn:focus {
  outline-offset: 0px;
  border-width: 1px;
  border-color: #cbc8c5;
  outline-color: #131313;
}

.form-submit-btn.is--newsletter {
  margin-top: 0;
}

.form-submit {
  visibility: hidden;
  opacity: 0;
  display: none;
  position: absolute;
  inset: 0;
}

/* Notification */

.form-notification-bg {
  opacity: 0.1;
  pointer-events: none;
  color: inherit;
  background-color: currentColor;
  border-radius: calc(0.125em - 2px);
  display: flex;
  position: absolute;
  inset: 0;
}

.form-notifcation {
  border-top-style: solid;
  border-top-width: 0.0625em;
  border-top-color: var(--color-neutral-500);
  border-right-style: solid;
  border-right-width: 0.0625em;
  border-right-color: var(--color-neutral-500);
  border-bottom-style: solid;
  border-bottom-width: 0.0625em;
  border-bottom-color: var(--color-neutral-500);
  border-left-style: solid;
  border-left-width: 0.0625em;
  border-left-color: var(--color-neutral-500);
  background-color: var(--color-neutral-200);
  outline-offset: 0px;
  color: var(--color-neutral-475);
  text-align: center;
  border-color: inherit;
  border-radius: 0.25rem;
  outline: 0 #0000;
  width: 100%;
  padding: 0.875em;
  font-size: 1em;
  position: relative;
}

.form-notifcation.is--error {
  color: var(--color-coral);
  margin-top: 0;
}

.form-notification-p {
  color: var(--color-neutral-500);
  font-size: 0.9375em;
}

.form-notification-p.is--error {
  color: var(--color-coral);
}

/* Breakpoints */

[data-validate].is--error input,
[data-validate].is--error textarea,
[data-validate].is--error select {
  border-color: var(--color-coral);
}

[data-validate].is--error .form-field-icon.is--error,
[data-validate].is--error .radiocheck-field-icon.is--error {
  opacity: 1;
}

[data-validate].is--success .form-field-icon.is--success,
[data-validate].is--success .radiocheck-field-icon.is--success {
  opacity: 1;
}

[data-form-validate] .radiocheck-field input:focus-visible ~ .radiocheck-custom {
  background-color: var(--color-neutral-400);
  color: var(--color-neutral-400);
}

[data-form-validate] .radiocheck-field input:hover ~ .radiocheck-custom {
  border-color: var(--color-neutral-450);
}

[data-form-validate] .radiocheck-field input:focus-visible:checked ~ .radiocheck-custom,
[data-form-validate] .radiocheck-field input:checked ~ .radiocheck-custom {
  background-color: var(--color-purple);
  color: var(--color-light);
  border-color: var(--color-purple) !important;
}

[data-form-validate] .radiocheck-field .radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .radiocheck-custom {
  border-color: var(--color-coral);
}

[data-validate].is--error input:checked ~ .radiocheck-custom {
  border-color: var(--color-dark);
}

[data-form-validate] select:has(option[value=""]:checked) {
  color: rgba(19, 19, 19, 0.3);
}

[data-form-theme="dark"] .form-input {
  color: var(--color-light);
  background-color: var(--color-neutral-800);
}

[data-form-theme="dark"] .form-input:hover,
[data-form-theme="dark"] .form-input:focus,
[data-form-theme="dark"] .form-input:focus-within {
  border-color: var(--color-neutral-525);
}

[data-form-theme="dark"] [data-validate].is--error .form-input {
  border-color: var(--color-coral);
}

[data-form-theme="dark"] .form-input::placeholder {
  color: var(--color-neutral-525);
}

[data-form-theme="dark"] .form-label {
  color: var(--color-neutral-200);
}

[data-form-theme="dark"] .radiocheck-label {
  color: var(--color-neutral-400);
}

[data-form-theme="dark"] .radiocheck-custom {
  color: var(--color-neutral-525);
  background-color: currentColor;
}

[data-form-theme="dark"] .radiocheck-field input:hover ~ .radiocheck-custom {
  border-color: var(--color-neutral-500);
}

[data-form-theme="dark"] .form-notifcation,
[data-form-theme="dark"] .form-notifcation.is--error {
  background-color: transparent;
}

@media screen and (max-width: 767px) {
  .form.is--newsletter {
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
  }

  .form-group {
    width: 100%;
  }

  .form-field-row.is--newsletter {
    grid-column-gap: 0.625em;
    grid-row-gap: 0.625em;
    flex-flow: column;
  }

  .form-bottom-row {
    margin-top: var(--gap-sm);
    grid-column-gap: var(--gap-l);
    grid-row-gap: var(--gap-l);
    flex-flow: column;
    justify-content: space-between;
    align-items: stretch;
  }
}





/* ------------------------- PRODUCT -------------------------------------------------- */

.product-card {
  background-color: var(--color-neutral-900);
  color: var(--color-neutral-200);
  border-radius: 1em;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-decoration: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.product-card.is--purple {
  background-color: var(--color-purple);
}

.product-card.is--black {
  background-color: var(--color-neutral-900);
}

.product-card.is--electric {
  background-color: var(--color-electric);
  color: var(--color-neutral-900);
}

.product-card.is--neutral-400 {
  background-color: var(--color-neutral-400);
  color: var(--color-neutral-800);
}

.product-card.is--neutral-400.is--disabled {
  cursor: not-allowed;
}

.product-card__before {
  padding-top: 130%;
}

.product-card__bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.product-card__content {
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 2.5em;
  display: flex;
  justify-content: flex-end;
  position: absolute;
  display: none;
}

.product-card__tags {
  justify-content: center;
  display: flex;
}

.product-card__center-content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  padding-bottom: 9em;
  display: flex;
}

.product-card__btn {
  height: var(--btn-height);
  flex-flow: column;
  align-items: center;
  display: flex;
}

.product-card__title {
  text-align: center;
}

.product-card__h {
  font-size: 4em;
}

.product-card__h.is--m {
  font-size: 2.75em;
  line-height: 0.95;
}

.product-card__icon {
  justify-content: center;
  display: flex;
}

.product-card__icon-svg {
  width: 1.875em;
  display: block;
}

.product-card__text {
  text-align: center;
  text-wrap: balance;
  justify-content: center;
  display: flex;
}

.product-card__p {
  font-variation-settings: "wght" 430;
  letter-spacing: -0.01em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
}

@media screen and (max-width: 767px) {
  .product-card__content {
    padding: 1.5em;
  }

  .product-card__center-content {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    padding-bottom: 6.5em;
  }

  .product-card__h {
    font-size: 2.875em;
  }

  .product-card__h.is--m {
    font-size: 2.1875em;
  }

  .product-card__icon-svg {
    width: 1.5em;
  }

  .product-card__p {
    font-size: 0.875em;
  }
}





/* ------------------------- FAQ -------------------------------------------------- */

.faq {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
}

.faq.padding-m {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}

.faq__title {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  text-align: center;
  margin-bottom: calc(2 * var(--gap-xl));
  flex-flow: column;
  display: flex;
  position: relative;
}

.faq__wrap {
  position: relative;
}

.faq__collection {
  width: 100%;
}

.faq__list {
  border-bottom: 1px solid var(--color-neutral-400);
}

.faq__item-top {
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  grid-column-gap: var(--gap-m);
  grid-row-gap: var(--gap-m);
  border-top: var(--stroke-weight) solid var(--color-neutral-400);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.faq__item-icon {
  aspect-ratio: 1;
  flex: none;
  width: 0.75em;
  transition: transform var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .faq__item-icon {
  transform: rotate(315deg);
}

.faq__item-bottom {
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .faq__item-bottom {
  grid-template-rows: 1fr;
}

.faq__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.faq__item-bottom-content {
  padding-bottom: var(--gap-sm);
}

.faq__title-scribble {
  grid-row-gap: var(--gap-xxs);
  color: var(--color-coral);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  right: -5em;
}

.faq__title-scribble-arrow {
  flex: none;
  width: 2em;
  margin-left: 2em;
}

[data-collection-status="not-active"] {
  display: none;
}

.faq[data-theme-section="dark"] .faq__title-scribble {
  color: var(--color-electric);
}

.faq[data-theme-section="dark"] .faq__item-top,
.faq[data-theme-section="dark"] .faq__list {
  border-color: var(--color-neutral-600);
}

[data-faq-toggle][data-toggle-status="active"] {
  border-radius: calc(var(--btn-height) / 2);
}

[data-theme-section="dark"] [data-faq-toggle][data-toggle-status="active"] {
  color: var(--color-neutral-800) !important;
}

[data-theme-section="dark"] [data-faq-toggle][data-toggle-status="active"] [data-wf--button-theme--variant] {
  background-color: var(--color-neutral-200);
}

[data-theme-section="dark"] [data-faq-toggle]:not([data-toggle-status="active"]) {
  color: var(--color-neutral-200) !important;
}

[data-theme-section="dark"] [data-faq-toggle]:not([data-toggle-status="active"]) [data-wf--button-theme--variant] {
  background-color: var(--color-neutral-600);
}

[data-theme-section="light"] [data-faq-toggle][data-toggle-status="active"] {
  color: var(--color-neutral-200) !important;
}

[data-theme-section="light"] [data-faq-toggle][data-toggle-status="active"] [data-wf--button-theme--variant] {
  background-color: var(--color-neutral-800);
}





/* ------------------------- SHAPES SECTION -------------------------------------------------- */

.shapes-section {
  z-index: 2;
  padding-bottom: var(--gap-l);
  background-color: var(--color-neutral-200);
  position: relative;
}

.shapes-section-title__row {
  padding-bottom: var(--padding-s);
  text-align: center;
  justify-content: center;
  display: flex;
}

.shapes-section__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  display: flex;
}

.shapes-section__col {
  flex: 1;
}

.shapes-cta-card {
  padding-top: var(--gap-xxl);
  padding-right: var(--gap-xxl);
  padding-bottom: var(--gap-xxl);
  padding-left: var(--gap-xxl);
  border-top-left-radius: var(--gap-s);
  border-top-right-radius: var(--gap-s);
  border-bottom-left-radius: var(--gap-s);
  border-bottom-right-radius: var(--gap-s);
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  grid-column-gap: calc(2 * var(--gap-xl));
  grid-row-gap: calc(2 * var(--gap-xl));
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.shapes-cta__title-row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.shapes-cta__title-p {
  width: 100%;
  max-width: 25em;
}

.shapes-visual-card {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.shapes-visual__note {
  bottom: var(--gap-xl);
  position: absolute;
}

.shapes-section__row-copy {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  display: flex;
}

.shapes-section-title__title {
  max-width: 40em;
}

@media screen and (max-width: 991px) {
  .shapes-section__row {
    flex-flow: column;
  }

  .shapes-section__col.is--last {
    order: -1;
  }

  .shapes-visual-card {
    min-height: 35em;
  }

  .shapes-section__row-copy {
    flex-flow: column;
  }
}

@media screen and (max-width: 767px) {
  .shapes-cta-card {
    padding: var(--gap-l);
  }

  .shapes-visual-card {
    aspect-ratio: 1;
    min-height: 30em;
  }

  .shapes-section-title__title {
    max-width: 20em;
  }
}





/* ------------------------- JOIN SECTION -------------------------------------------------- */

.join-faces__wrap {
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.join-faces__image-row {
  margin-right: var(--gap-s);
  display: flex;
}

.join-faces__image-el {
  border: 1px solid var(--color-purple);
  border-radius: 10em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: -0.5em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.join-faces__collection,
.join-faces__list {
  display: flex;
}

[data-wf--cta-card--variant="electric"] {
  background-color: var(--color-electric);
  color: var(--color-neutral-800);
}

[data-wf--cta-card--variant="electric"] .join-faces__image-el {
  border-color: var(--color-electric);
}

[data-wf--join-others-newsletter--variant="light-borders"] .join-faces__image-el,
[data-wf--join-others--variant="light-borders"] .join-faces__image-el {
  border-color: var(--color-neutral-200);
}

[data-wf--join-others-newsletter--variant="dark-borders"] .join-faces__image-el,
[data-wf--join-others--variant="dark-borders"] .join-faces__image-el {
  border-color: var(--color-neutral-800);
}

.join-faces__image-el:nth-of-type(1) {
  z-index: 4;
}

.join-faces__image-el:nth-of-type(2) {
  z-index: 3;
}

.join-faces__image-el:nth-of-type(3) {
  z-index: 2;
}

.join-faces__image-el:nth-of-type(4) {
  z-index: 1;
}





/* ------------------------- LOCKED IN -------------------------------------------------- */

.locked-badge {
  grid-column-gap: 0.1875em;
  grid-row-gap: 0.1875em;
  color: var(--color-ignore-light);
  background-color: var(--color-ignore-neutral-900);
  border-radius: 50em;
  align-items: center;
  height: 1.875em;
  padding-left: 0.5625em;
  padding-right: 0.8125em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.locked-bage__span {
  font-size: 0.8125em;
  position: relative;
}

.locked-badge__bg-1 {
  opacity: 0.3;
  background-color: var(--color-ignore-light);
  border-radius: 50em;
  border-radius: inherit;
  position: absolute;
  inset: 0.0625em 0 0;
}

.locked-badge__bg-2 {
  background-color: var(--color-ignore-dark);
  border-radius: 50em;
  border-radius: inherit;
  position: absolute;
  inset: 0.125em 0 0;
}





/* -------------------------  COVER IMAGE & VIDEO -------------------------------------------------- */

.cover-image {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.cover-image.is--try-vault {
  object-position: left top;
}

.cover-image.is--try-vault-light {
  opacity: 0;
  object-position: left top;
}

.cover-image.is--top {
  object-position: 50% 0%;
}

.cover-video {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

[data-video-lazy][data-video-status] {
  transition: opacity var(--animation-ease), visibility var(--animation-ease);
  opacity: 0;
  visibility: hidden;
}

[data-video-lazy][data-video-status="loaded"] {
  opacity: 1;
  visibility: visible;
}





/* ------------------------- ICON STUFF -------------------------------------------------- */

.icon-wave {
  color: var(--color-neutral-200);
  background-color: #0000;
  margin-bottom: -10em;
  padding-top: 1em;
  position: relative;
}

.icon-wave__item {
  aspect-ratio: 1;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  width: 13.125em;
  margin-left: -1em;
  margin-right: -1em;
  display: flex;
  position: relative;
  --r: 5deg;
  --y: 1.875em;
}

.icon-wave__item:nth-of-type(1) {
  z-index: 0;
  transform: rotate(calc(-5.5 * var(--r)));
  margin-top: calc(13.5 * var(--y));
}

.icon-wave__item:nth-of-type(2) {
  z-index: 1;
  transform: rotate(calc(-5 * var(--r)));
  margin-top: calc(10 * var(--y));
}

.icon-wave__item:nth-of-type(3) {
  z-index: 2;
  transform: rotate(calc(-4 * var(--r)));
  margin-top: calc(7 * var(--y));
}

.icon-wave__item:nth-of-type(4) {
  z-index: 3;
  transform: rotate(calc(-3 * var(--r)));
  margin-top: calc(4.5 * var(--y));
}

.icon-wave__item:nth-of-type(5) {
  z-index: 4;
  transform: rotate(calc(-2 * var(--r)));
  margin-top: calc(2.5 * var(--y));
}

.icon-wave__item:nth-of-type(6) {
  z-index: 5;
  transform: rotate(calc(-1 * var(--r)));
  margin-top: calc(1 * var(--y));
}

.icon-wave__item:nth-of-type(7) {
  z-index: 6;
}

.icon-wave__item:nth-of-type(8) {
  z-index: 5;
  transform: rotate(calc(1 * var(--r)));
  margin-top: calc(1 * var(--y));
}

.icon-wave__item:nth-of-type(9) {
  z-index: 4;
  transform: rotate(calc(2 * var(--r)));
  margin-top: calc(2.5 * var(--y));
}

.icon-wave__item:nth-of-type(10) {
  z-index: 3;
  transform: rotate(calc(3 * var(--r)));
  margin-top: calc(4.5 * var(--y));
}

.icon-wave__item:nth-of-type(11) {
  z-index: 2;
  transform: rotate(calc(4 * var(--r)));
  margin-top: calc(7 * var(--y));
}

.icon-wave__item:nth-of-type(12) {
  z-index: 1;
  transform: rotate(calc(5 * var(--r)));
  margin-top: calc(10 * var(--y));
}

.icon-wave__item:nth-of-type(13) {
  z-index: 0;
  transform: rotate(calc(5.5 * var(--r)));
  margin-top: calc(13.5 * var(--y));
}

.icon-wave__list {
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.icon-wave__item-holder {
  width: 2em;
  height: 2em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.icon-wave__bg {
  z-index: 0;
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  position: absolute;
  top: 2em;
  bottom: 0;
  left: 50%;
}

.icon-overview {
  z-index: 1;
  padding-bottom: var(--padding-s);
  background-color: #0000;
  position: relative;
}

.icon-overview__intro {
  text-align: center;
  width: 100%;
  max-width: 40.25em;
  margin-bottom: 4em;
  margin-left: auto;
  margin-right: auto;
}

.icon-overview__container {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 72em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.icon-overview__cta {
  margin-top: var(--padding-m);
  justify-content: center;
  align-items: center;
  display: flex;
}

.icon-overview__card {
  padding-right: var(--gap-xxl);
  padding-bottom: var(--gap-xxl);
  padding-left: var(--gap-xxl);
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  width: calc(50% - (var(--gap-sm) / 2));
  padding-top: calc(2 * var(--gap-l));
  border-radius: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

[data-wf--icon-overview-card--variant="light"] {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

[data-wf--icon-overview-card--variant="light"] .icon-overview__card-overlay {
  background: linear-gradient(
    180deg,
    rgba(244, 244, 244, 0) 0%,
    rgba(244, 244, 244, 1) 100%
  );
}

[data-wf--square-cta-card--variant="dark-square"],
[data-wf--square-cta-card--variant="dark-round"] {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

[data-wf--square-cta-card--variant="dark-round"],
[data-wf--square-cta-card--variant="electric-round"] {
  border-radius: 100em;
}

.icon-overview__card-grid {
  margin-top: var(--gap-xxl);
  margin-bottom: var(--gap-sm);
  position: relative;
}

.icon-overview__bg {
  z-index: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.icon-overview__bg-vertical {
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}

.icon-overview__bg-horizontal {
  height: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  width: 100%;
  position: absolute;
  top: 49.25%;
  left: 0;
  right: 0;
}

.icon-overview__bg-circle {
  aspect-ratio: 1;
  color: var(--color-neutral-600);
  width: 79em;
  margin-top: -1em;
  position: absolute;
}

.icon-wave__card {
  padding: var(--gap-sm);
  aspect-ratio: 1;
  background-color: var(--color-neutral-600);
  border-radius: 0.25em;
  flex: none;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  margin-left: -1em;
  margin-right: -1em;
  display: flex;
  position: relative;
  box-shadow: 0 0 1.25em #0000001f;
  transition: transform 0.5s cubic-bezier(.15, 0.7, .3, 1);
}

.icon-wave__item:hover .icon-wave__card {
  transform: translate(0px, -25%);
}

.icon-wave__item:hover + * .icon-wave__card {
  transform: translate(0px, -8%);
}

.icon-wave__item:hover + * + .icon-wave__item .icon-wave__card {
  transform: translate(0px, -5%);
}

.icon-wave__item:has(+ :hover) .icon-wave__card {
  transform: translate(0px, -8%);
}

.icon-wave__item:has(+ * + :hover) .icon-wave__card {
  transform: translate(0px, -5%);
}

.icon-overview__card-img {
  width: 23em;
  height: 10em;
}

.icon-overview__card-i {
  object-fit: contain;
}

.icon-overview__card-overlay {
  z-index: 2;
  background-image: linear-gradient(180deg, #6840ff00, var(--color-purple));
  height: 3em;
  position: absolute;
  inset: auto 0% 0%;
}

/* Icon Methods */

.icons-methods__card {
  grid-column-gap: var(--btn-height);
  grid-row-gap: var(--btn-height);
  aspect-ratio: 1;
  background-color: var(--color-neutral-300);
  text-align: center;
  border-radius: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 3em 3em 2em;
  display: flex;
  position: relative;
}

.icons-methods__inner {
  padding: var(--gap-s);
  aspect-ratio: 1.1;
  background-color: var(--color-neutral-100);
  border-radius: 1em;
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  width: 18em;
  display: flex;
  position: relative;
}

.icons-methods__p {
  text-align: center;
  max-width: 25em;
  margin-left: auto;
  margin-right: auto;
}

.icons-methods__tags {
  top: var(--gap-sm);
  position: absolute;
}

.icons-methods__controls {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  width: 100%;
  display: flex;
}

.icons-methods__control {
  background-color: var(--color-neutral-300);
  border-radius: 0.45em;
  justify-content: center;
  align-items: center;
  width: 3.125em;
  height: 2.75em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
}

.icons-methods__control.is--main {
  flex: 1;
}

.icons-methods__wrap {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 3.375em;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -85%);
}

.icons-methods__item {
  width: 100%;
  height: 100%;
  position: absolute;
  --dur: 3s;
  --overlap: 1.5s;
  --step: calc(var(--dur) - var(--overlap));
  --count: 5;
  --cycle: calc(var(--dur) + (var(--count) - 2) * var(--step));
  --rot: 25deg;
  opacity: 0;
  transform: rotate(var(--rot));
  transform-origin: 50% 400%;
  animation: iconCycle var(--cycle) var(--cubic-default) infinite both;
  animation-delay: calc(var(--offset, 0s) - var(--cycle));
}

.icons-methods__item:nth-child(1) {
  --offset: 0s;
}

.icons-methods__item:nth-child(2) {
  --offset: calc(1 * var(--step));
}

.icons-methods__item:nth-child(3) {
  --offset: calc(2 * var(--step));
}

.icons-methods__item:nth-child(4) {
  --offset: calc(3 * var(--step));
}

.icons-methods__item:nth-child(5) {
  --offset: calc(4 * var(--step));
}

@keyframes iconCycle {
  0% {
    opacity: 0;
    transform: rotate(var(--rot));
  }
  6.6667% {
    opacity: 1;
    transform: rotate(0deg);
  }
  16.6667% {
    opacity: 1;
    transform: rotate(0deg);
  }
  26.6667% {
    opacity: 0;
  }
  33.3333% {
    opacity: 0;
    transform: rotate(calc(-1 * var(--rot)));
  }
  100% {
    opacity: 0;
    transform: rotate(calc(-1 * var(--rot)));
  }
}

.icons-video__card {
  aspect-ratio: 1;
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  border-radius: 100em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-top: 1.5em;
  padding-left: 5.625em;
  padding-right: 5.625em;
  display: flex;
  position: relative;
}

/* Icon Process */

.icon-process {
  z-index: 2;
  padding-top: var(--padding-l);
  background-color: var(--color-neutral-200);
  position: relative;
}

.icon-process__title-row {
  padding-bottom: var(--padding-s);
  text-align: center;
  max-width: 54em;
  margin-left: auto;
  margin-right: auto;
}

.sections-dark {
  background-color: var(--color-neutral-800);
  overflow: hidden;
}

/* Breakpoints */

@media screen and (max-width: 991px) {
  .icon-overview__card-img {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .icon-wave {
    margin-bottom: -7.5em;
  }

  .icon-wave__item {
    font-size: 0.6em;
  }

  .icon-overview__card {
    padding-right: var(--gap-xs);
    padding-left: var(--gap-xs);
    text-align: center;
    width: 100%;
  }

  .icons-methods__card {
    grid-column-gap: var(--gap-xl);
    grid-row-gap: var(--gap-xl);
    padding: 6em 2em 3em;
  }

  .icons-video__card {
    padding: 9em var(--gap-l) 6em;
    aspect-ratio: auto;
  }

  .icon-overview__card-img {
    width: 14em;
    margin-left: 0;
    font-size: 1em;
    overflow: hidden;
  }

  .icon-overview__card-i {
    object-fit: contain;
    width: 175%;
  }
}





/* ------------------------- SVG APP -------------------------------------------------- */

.svg-app {
  padding-top: var(--container-padding);
  background-color: var(--color-neutral-200);
}

.svg-app__wrap {
  padding: var(--padding-m) var(--gap-l) 4em;
  border-radius: 30em;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.svg-app__bg {
  z-index: 1;
  background-color: var(--color-neutral-800);
  border-radius: 30em;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.svg-app__content {
  z-index: 2;
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  color: var(--color-neutral-200);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 37.5em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.svg-app__el {
  z-index: 1;
  -webkit-clip-path: inset(0 0 0 round 0.275em);
  clip-path: inset(0 0 0 round 0.275em);
  background-color: #292929;
  border-radius: 0.375em;
  width: 15em;
  margin-top: -3.25em;
  position: relative;
  overflow: hidden;
}

.svg-app__header {
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 0.75em 0.5em 0.5em;
  display: flex;
}

.svg-app__header-start {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.svg-app__text {
  font-variation-settings: "wght" 530;
  font-size: 0.6875em;
  line-height: 1;
}

.svg-app__logo {
  width: 1.5em;
}

.svg-app__body {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  border-top: 1px solid #454545;
  flex-flow: column;
  padding: 0.5em 0.5em 1em;
  display: flex;
  overflow: hidden;
}

.svg-app__body-main {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  aspect-ratio: 1;
  background-color: #353535;
  border-radius: 0.1875em;
  flex-flow: column;
  width: 100%;
  padding: 1em;
  display: flex;
}

.svg-app__body-text {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  display: flex;
}

.svg-app__body-drop {
  background-color: #0000001a;
  border: 1px dashed #515151;
  border-radius: 0.1875em;
  flex: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.svg-app__body-svg {
  width: 3em;
}

.svg-app__description {
  max-width: 28em;
}

.svg-app__body-options {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-bottom: 1px;
  padding-left: 0.5em;
  display: flex;
}

.svg-app__body-option {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.svg-app__icon {
  width: 0.875em;
}

.svg-app__header-end {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  justify-content: flex-end;
  align-items: center;
  padding-right: 0.25em;
  display: flex;
}

.svg-app__bg-lines {
  z-index: 1;
  pointer-events: none;
  color: var(--color-neutral-600);
  width: 102%;
  position: absolute;
}

.svg-app__bg-icon {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 5em;
  position: absolute;
  top: 36%;
}

.svg-app__cursor {
  z-index: 5;
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  justify-content: center;
  align-items: stretch;
  display: flex;
  position: absolute;
}

.svg-app__cursor-i {
  width: 1.125em;
}

.svg-app__cursor-t {
  white-space: nowrap;
  background-color: #225df5;
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
  font-size: 0.625em;
  line-height: 1;
  display: flex;
}

.svg-app__cursor-w {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(0%, 90%);
}

.svg-app__cursor-c {
  width: 1em;
  position: absolute;
}

.svg-app__cursor-c.is--base {
  width: 0.8em;
  left: 0.25em;
}

.svg-app__cursor-c.is--click {
  opacity: 0;
  width: 1.25em;
  transform: translate(0, -25%);
}

.svg-app__cursor-add {
  opacity: 0;
  width: 0.875em;
  position: absolute;
  transform: translate(90%, 90%);
}

@media screen and (max-width: 767px) {
  .svg-app__wrap {
    border-radius: 0;
    overflow: visible;
  }

  .svg-app__bg {
    height: 74%;
    top: auto;
  }

  .svg-app__content {
    padding-bottom: 2em;
  }

  .svg-app__el {
    display: block;
  }

  .svg-app__bg-lines {
    display: none;
  }

  .svg-app__bg-icon {
    top: 25%;
  }
}





/* -------------------------  FOR WHO -------------------------------------------------- */

.for-who {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
  overflow: hidden;
}

.for-who__row {
  z-index: 1;
  width: 100%;
  display: flex;
  position: relative;
}

.for-who__col {
  flex: 1;
  padding-top: 17.5em;
  position: relative;
}

.for-who__content {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 32.625em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.for-who__title {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 25em;
  display: flex;
}

.for-who__visual-wrap {
  width: 100%;
  max-height: 30.5em;
  position: relative;
  overflow: hidden;
}

.for-who__visual {
  border-radius: 0.5em;
  width: 100%;
  height: 32em;
  position: relative;
  overflow: hidden;
}

.for-who__visual.is--webflow {
  height: 21.75em;
}

.for-who__bg {
  z-index: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0% 0% -11%;
}

.for-who__bg-circle {
  aspect-ratio: 1;
  color: var(--color-neutral-600);
  width: 72em;
  position: absolute;
}

.for-who__bg-line {
  z-index: 0;
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100%;
  position: absolute;
}

.for-who__bg-text {
  z-index: 1;
  height: 100%;
  padding-top: 16.5em;
  position: relative;
}

.for-who__col-top {
  z-index: 1;
  justify-content: center;
  align-items: center;
  height: 10em;
  display: flex;
  position: absolute;
  inset: 0% 0% auto;
}

.for-who__col-webflow {
  width: 11em;
}

.for-who__marquee {
  color: var(--color-neutral-200);
  width: 100%;
  max-width: 40em;
  display: flex;
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, rgba(32, 29, 29, 0) 0%, rgba(32, 29, 29, 1) 14%, rgba(32, 29, 29, 1) 86%, rgba(32, 29, 29, 0) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(32, 29, 29, 0) 0%, rgba(32, 29, 29, 1) 14%, rgba(32, 29, 29, 1) 86%, rgba(32, 29, 29, 0) 100%);
  mask-size: cover;
  -webkit-mask-size: cover;
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.for-who__marquee-list {
  flex: none;
  align-items: center;
  display: flex;
  position: relative;
}

.for-who__marquee-item {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex: 0;
  padding-right: 3em;
}

.for-who__marquee-item-svg {
  width: auto;
  height: 3.125em;
  display: block;
}

.for-who__or {
  background-color: var(--color-neutral-600);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 4.5em;
  height: 4.5em;
  padding-bottom: 0.125em;
  display: flex;
  position: relative;
}

@media screen and (max-width: 991px) {
  .for-who {
    padding-bottom: var(--padding-m);
  }

  .for-who__row {
    flex-flow: column;
  }

  .for-who__col {
    padding-top: 10em;
  }

  .for-who__col.is--first {
    padding-bottom: var(--gap-xxl);
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: var(--color-neutral-600);
    width: calc(100% + 2 * var(--container-padding));
    margin-left: calc(-1 * var(--container-padding));
  }

  .for-who__visual {
    border-radius: 1em;
    height: 25em;
  }

  .for-who__bg-circle,
  .for-who__bg-line,
  .for-who__bg-text {
    display: none;
  }

  .for-who__col-top {
    height: 5em;
  }

  .for-who__col-webflow {
    width: 7.5em;
  }

  .for-who__marquee-item-svg {
    height: 2.25em;
  }
}

@media screen and (max-width: 767px) {
  .for-who__col {
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
  }

  .for-who__visual-wrap {
    max-height: 20em;
  }

  .for-who__visual {
    height: 20em;
    padding: 2em;
  }

  .for-who__visual.is--webflow {
    height: 14.25em;
  }
}

@media screen and (max-width: 479px) {
  .for-who__visual {
    font-size: 0.75em;
  }
}





/* -------------------------  PRICING -------------------------------------------------- */

.pricing-home__graphic {
  margin-right: auto;
  margin-bottom: var(--padding-l);
  color: var(--color-neutral-475);
  width: 13.75em;
  margin-left: auto;
}

.pricing-home__button-row {
  z-index: 2;
  padding-bottom: var(--gap-xxl);
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.pricing-home__scribble {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  color: var(--color-electric);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  top: -4.5em;
  left: 95%;
}

.pricing-home__title-row {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 3em;
  display: flex;
}

.pricing-home__title-p {
  width: 100%;
  max-width: 28em;
}

.pricing-home__title-el {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
  display: flex;
  transition: transform 0.6s var(--cubic-default);
}

.pricing-home__title-sub {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  height: 3.875em;
  display: flex;
  overflow: hidden;
  transition: transform 0.6s var(--cubic-default);
}

.pricing-home__title-sub .h-ml {
  transition: transform 0.6s var(--cubic-default);
}

[data-pricing-section-status="team"] .pricing-home__title-sub .h-ml {
  transform: translate(0px, -100%);
}

/* Overview */

.pricing-overview {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-s);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
}

.pricing-overview__bg {
  z-index: 0;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.pricing-overview__bg-circle {
  aspect-ratio: 1;
  color: var(--color-neutral-600);
  width: 32em;
  position: absolute;
}

.pricing-overview__bg-circle.is--large {
  width: 72em;
}

.pricing-home {
  padding-top: var(--gap-l);
  padding-bottom: var(--padding-l);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
}

@media screen and (min-width: 768px) {
  [data-pricing-section-status="team"] .pricing-home__title-el {
    transform: translate(3.4em, 0px);
  }
}

/* Cards */

.pricing-cards {
  margin-bottom: var(--gap-l);
  position: relative;
}

.pricing-cards__wrap {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: center;
  align-items: stretch;
  display: flex;
  transition: padding 0.6s var(--cubic-default), margin 0.6s var(--cubic-default);
}

[data-pricing-section-status="team"]:not(.pricing-hero) .pricing-cards__wrap {
  padding-bottom: 4.25em;
}

[data-pricing-section-status="team"].pricing-hero .pricing-cards__wrap {
  margin-bottom: -8em;
}

@media screen and (max-width: 767px) {
  [data-pricing-section-status="team"].pricing-hero .pricing-cards__wrap {
    margin-bottom: -60em;
  }
}

[data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(1) {
  color: var(--color-neutral-800);
}

[data-wf--pricing-card-member--variant="dark"][data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(1) {
  color: var(--color-neutral-200);
}

[data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(1) .button-bg {
  background-color: color-mix(in srgb, var(--color-neutral-800) 10%, transparent);
}

[data-wf--pricing-card-member--variant="dark"][data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(1) .button-bg {
  background-color: color-mix(in srgb, var(--color-neutral-200) 10%, transparent) !important;
}

[data-wf--pricing-card-team--variant][data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(1) .button-bg {
  background-color: color-mix(in srgb, var(--color-neutral-200) 10%, transparent) !important;
}

[data-pricing-state="annually"].is--gray [data-pricing-card-toggle]:nth-of-type(1) {
  color: var(--color-neutral-200);
}

[data-pricing-state="annually"].is--gray [data-pricing-card-toggle]:nth-of-type(1) .button-bg {
  background-color: var(--color-neutral-800);
}

[data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(2) {
  color: var(--color-neutral-200);
}

[data-pricing-state="annually"] [data-pricing-card-toggle]:nth-of-type(2) .button-bg {
  background-color: var(--color-purple);
}

[data-wf--pricing-card-member--variant="dark"],
[data-wf--pricing-card-team--variant="dark"] {
  background-color: var(--color-neutral-800) !important;
  color: var(--color-neutral-200) !important;
}

[data-wf--pricing-card-member--variant="dark"] .pricing-benefit,
[data-wf--pricing-card-team--variant="dark"] .pricing-benefit {
  border-color: color-mix(in srgb, var(--color-neutral-200) 20%, transparent);
}

[data-pricing-section-status="team"] [data-pricing-button="team"] {
  color: var(--color-neutral-200) !important;
}

[data-pricing-section-status="team"] [data-pricing-button="team"] .button-bg {
  background-color: var(--color-purple);
}

[data-pricing-section-status="team"] [data-pricing-button="solo"] .button-bg {
  background-color: var(--color-neutral-525);
}

[data-pricing-section-theme="light"][data-pricing-section-status="team"] [data-pricing-button="solo"] {
  color: var(--color-neutral-800);
}

[data-pricing-section-theme="light"][data-pricing-section-status="team"] [data-pricing-button="solo"] .button-bg {
  background-color: var(--color-neutral-300);
}

.pricing-card {
  background-color: var(--color-neutral-200);
  transform-origin: 50% 600%;
  color: var(--color-neutral-800);
  border-radius: 1em;
  min-width: 35em;
  padding: 3.75em;
  position: relative;
}

[data-pricing-card="team"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

:is(.wf-design-mode, .wf-editor) [data-pricing-section-status="team"] [data-pricing-card="team"] {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}

:is(.wf-design-mode, .wf-editor) [data-pricing-section-status="team"] [data-pricing-card="solo"] {
  display: none;
}

[data-pricing-section-status="team"] [data-pricing-card="team"] {
  pointer-events: auto;
}

.pricing-card.is--purple {
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
}

.pricing-card.is--gray {
  background-color: var(--color-neutral-600);
  color: var(--color-neutral-200);
}

.pricing-card__inner {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.pricing-card__title-row {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.pricing-card__title {
  font-size: 3em;
}

.pricing-card__price {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  justify-content: flex-start;
  align-items: center;
  font-size: 1.125em;
  display: flex;
}

.pricing-card__price-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.pricing-card__divider {
  margin-bottom: var(--gap-sm);
  width: 100%;
  min-height: 1.125em;
}

.pricing-card__cta {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.pricing-card__cta-p {
  max-width: 23em;
}

.pricing-card__cta-row {
  width: 100%;
}

.pricing-card__list-row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.pricing-card__price-w {
  flex: none;
  height: 1.5em;
  overflow: hidden;
}

.pricing-card__scribble {
  z-index: 1;
  text-align: center;
  top: calc(2 * var(--gap-l));
  right: calc(2 * var(--gap-l));
  position: absolute;
}

.pricing-card__price-h {
  letter-spacing: -0.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.08;
}

.pricing-card__price-w .pricing-card__price-h {
  transition: transform 0.6s var(--cubic-default);
}

[data-pricing-state="annually"] .pricing-card__price-w .pricing-card__price-h {
  transform: translate(0px, -100%);
}

/* Benefits */

.pricing-benefit {
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  border-bottom: var(--stroke-weight) solid var(--color-neutral-400);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.pricing-benefit.is--end {
  border-bottom-style: none;
  padding-bottom: 0;
  position: relative;
}

.pricing-benefit__tag.p-r {
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  border-radius: 0.125em;
  padding: 0.125em 0.3125em;
}

.pricing-card.is--purple .pricing-benefit__tag {
  background-color: var(--color-neutral-800);
}

.pricing-card.is--purple .pricing-benefit {
  border-color: color-mix(in srgb, var(--color-neutral-200) 20%, transparent);
}

.pricing-card.is--gray .pricing-benefit {
  border-color: color-mix(in srgb, var(--color-neutral-200) 20%, transparent);
}

.pricing-benefits__wrap {
  width: 100%;
}

.pricing-benefits__row {
  margin-bottom: 3.5em;
}

.pricing-benefit__end {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  margin-right: auto;
  display: flex;
}

/* Pricing Hero */

.pricing-hero {
  padding-bottom: var(--padding-m);
}

.pricing-hero__scribble {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  color: var(--color-coral);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  top: -4.5em;
  left: 95%;
}

.pricing-hero__row {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 7.5em;
  display: flex;
}

.pricing-hero__title {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 59em;
  display: flex;
  position: relative;
}

.pricing-hero__join-others {
  position: relative;
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .pricing-card {
    padding: var(--gap-xxl);
    min-width: auto;
  }

  .pricing-overview__bg-circle {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .pricing-home__scribble {
    left: 70%;
  }

  .pricing-cards__wrap {
    grid-column-gap: 0.625em;
    grid-row-gap: 0.625em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .pricing-card {
    padding: var(--gap-xxl) var(--gap-l);
  }

  .pricing-card__title {
    font-size: 2.5em;
  }

  .pricing-card__price:where(.w-variant-da4d6acc-f1e8-1c18-ea23-95de4c4d8f92) {
    font-size: 1em;
  }

  .pricing-card__price-row {
    grid-column-gap: var(--gap-l);
    grid-row-gap: var(--gap-l);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .pricing-home__title-el {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .pricing-home__title-sub {
    justify-content: flex-start;
    align-items: center;
    height: 3.25em;
  }

  .pricing-hero {
    padding-bottom: var(--padding-l);
  }

  .pricing-hero__scribble {
    left: 70%;
  }

  .pricing-card__price-h {
    font-size: 1.25em;
  }
}





/* ------------------------- FLICKS -------------------------------------------------- */

.flick-group__relative-object-before {
  aspect-ratio: 1.84;
  width: 100%;
}

.flick-group__relative-object {
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 57.5em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.flick-group__item {
  position: absolute;
}

.flick-group__list {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.flick-group {
  position: relative;
}

.flick-group__collection {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.flick-group__bg {
  width: 86.1875em;
  position: absolute;
}

.flick-group__scribble {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  color: var(--color-electric);
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  top: -6em;
  left: 60%;
}

.flick-group__scribble-arrow {
  flex: none;
  width: 2em;
  margin-bottom: -1.25em;
}

/* Flick Card */

.flick-card {
  z-index: 1;
  padding-top: var(--gap-xxs);
  padding-right: var(--gap-xxs);
  padding-bottom: var(--gap-xxs);
  padding-left: var(--gap-xxs);
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 0.3125em;
  flex-flow: column;
  justify-content: flex-end;
  align-items: stretch;
  width: 42.5em;
  display: flex;
  position: relative;
}

.flick-card__bg {
  background-color: var(--color-electric);
  border-radius: 0.375em;
  position: absolute;
  transition: all var(--animation-default);
  left: calc(var(--gap-xxs) + 1px);
  top: calc(var(--gap-xxs) + 1px);
  width: calc((100% - 2px) - (var(--gap-xxs) * 2));
  height: calc((100% - 2px) - (var(--gap-xxs) * 3) - 2.25em);
}

[data-flick-cards-item-status="active"] .flick-card__bg,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.flick-card__bottom {
  transition: all var(--animation-default);
  transform: translateY(50%) rotate(0.001deg);
  opacity: 0;
  visibility: hidden;
}

[data-flick-cards-item-status="active"] .flick-card__bottom,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__bottom {
  transform: translateY(0%) rotate(0.001deg);
  opacity: 1;
  visibility: visible;
}

[data-flick-cards-dragger] {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
  touch-action: pan-y;
  bottom: 3.25em;
}

[data-flick-cards-item-status] .flick-card__media-dark,
:is(.wf-design-mode, .w-editor) .flick-card__media-dark {
  transition: opacity var(--animation-ease);
  opacity: 0.75;
}

[data-flick-cards-item-status="2-before"] .flick-card__media-dark,
[data-flick-cards-item-status="2-after"] .flick-card__media-dark,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) .flick-card__media-dark,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) .flick-card__media-dark {
  opacity: 0.5;
}

[data-flick-cards-item-status="active"] .flick-card__media-dark,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media-dark {
  opacity: 0;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) {
  z-index: 4;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(2) {
  transform: translate(25%, 5%) rotate(5deg) scale(0.9, 0.9);
  z-index: 3;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(3) {
  transform: translate(45%, 7%) rotate(10deg) scale(0.75, 0.75);
  z-index: 2;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(1) {
  transform: translate(-25%, 5%) rotate(-5deg) scale(0.9, 0.9);
  z-index: 3;
}

:is(.wf-design-mode, .w-editor) .flick-group__item:nth-last-child(2) {
  transform: translate(-45%, 7%) rotate(-10deg) scale(0.75, 0.75);
  z-index: 2;
}

[data-flick-cards-item-status] .flick-card__info,
:is(.wf-design-mode, .w-editor) .flick-group__item .flick-card__info {
  transition: all var(--animation-default);
  transform: translate(0%, -110%);
  opacity: 0;
  visibility: hidden;
}

[data-flick-cards-item-status="active"] .flick-card__info,
:is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__info {
  transform: translate(0%, 0%);
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 767px) {
  [data-flick-cards-item-status="active"] .flick-card__media,
  :is(.wf-design-mode, .w-editor) .flick-group__item:nth-child(1) .flick-card__media {
    inset: 0.25em 0.25em 2.5em 0.25em;
  }
}
.flick-card__media {
  z-index: 2;
  border-radius: 0.25em;
  width: 100%;
  position: relative;
}

.flick-card__info {
  z-index: 1;
  color: var(--color-neutral-800);
  justify-content: space-between;
  align-items: center;
  height: 2.25em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: relative;
  transform: translate(0, 200%);
}

.flick-card__bottom {
  z-index: 0;
  padding-top: var(--gap-xxs);
  justify-content: center;
  width: 100%;
  display: flex;
  position: absolute;
  top: 100%;
}

.flick-card__media-dark {
  background-color: var(--color-neutral-900);
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.flick-card__hidden-profile-pic {
  display: none;
}

.flick-card__click {
  z-index: 5;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

[data-flick-cards-item-status] .flick-card__click {
  display: none;
}

[data-flick-cards-item-status="active"] .flick-card__click {
  display: block;
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .flick-group__relative-object {
    width: 90vw;
  }

  .flick-group__scribble {
    top: -7.5em;
    left: 80%;
  }
}

@media screen and (max-width: 767px) {
  .flick-group__relative-object {
    width: 120vw;
  }

  .flick-card {
    border-width: 0.25em;
    width: 92vw;
    padding-top: 0.25em;
    padding-left: 0.25em;
    padding-right: 0.75em;
  }

  .flick-group {
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .flick-card__info {
    justify-content: center;
    align-items: center;
  }

  .flick-group__bg {
    width: 50em;
  }

  .flick-group__scribble {
    display: none;
  }

  .flick-card__bottom {
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .flick-card__bg {
    border-radius: 0.5em;
  }
}





/* ------------------------- MADE SECTION -------------------------------------------------- */

.made {
  padding-bottom: var(--gap-xxl);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
}

.made + .shapes-section {
  padding-top: var(--gap-xxl);
}

.made__title-row {
  z-index: 1;
  padding-bottom: var(--padding-s);
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.made__button-row {
  padding-top: var(--padding-l);
  justify-content: center;
  align-items: center;
  display: flex;
}

@media screen and (max-width: 991px) {
  .made__title-row {
    grid-column-gap: 2em;
    flex-flow: wrap;
    justify-content: center;
    align-items: center;
  }
}

@media screen and (max-width: 767px) {
  .made__title-row {
    grid-column-gap: 1.25em;
    margin-bottom: calc(1 * var(--gap-xxl));
  }
}





/* ------------------------- SLIDERS -------------------------------------------------- */

.slider__cursor-icon-w {
  aspect-ratio: 1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 0.625em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.slider__cursor-inner {
  aspect-ratio: 1;
  background-color: var(--color-neutral-800);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 4em;
  display: flex;
  overflow: hidden;
}

.slider__cursor-inner.show--tablet {
  display: none;
}

.slider__cursor-inner.is--light {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-800);
}

@media screen and (max-width: 991px) {
  .slider__cursor-inner.show--tablet {
    display: flex;
  }
}

/* Product Slider */

.product-slider {
  position: relative;
}

.product-slider__text-row {
  padding-bottom: var(--gap-xxl);
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 3em;
  display: flex;
}

.product-slider__title {
  width: 100%;
  max-width: 52em;
}

.product-slider__nav {
  padding-bottom: var(--gap-sm);
  grid-column-gap: 0.125em;
  grid-row-gap: 0.125em;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Latest Resources */

.latest-resources-slider {
  aspect-ratio: 1.3;
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 50em;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.latest-resources-slider__card-text {
  left: 50%;
  top: var(--gap-l);
  bottom: var(--gap-sm);
  z-index: 5;
  pointer-events: auto;
  text-align: center;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  transform: translate(-50%);
}

.latest-resources-slider__fade {
  z-index: 3;
  background-image: linear-gradient(
    180deg,
    var(--color-neutral-800),
    transparent
  );
  width: 100%;
  height: 6em;
  position: absolute;
  top: 0;
  left: 0;
}

.latest-resources-slider__fade.is--flipped {
  top: auto;
  bottom: 0;
  transform: scaleY(-1);
}

@media screen and (max-width: 767px) {
  .latest-resources-slider {
    aspect-ratio: 1 / 2;
  }

  .latest-resources-slider__card-text {
    top: 3.125em;
    bottom: 3.125em;
  }
}

/* Product Slider */

.product-slider__fade {
  background-image: linear-gradient(
    180deg,
    transparent,
    var(--color-neutral-200)
  );
  pointer-events: none;
  width: 100%;
  height: 10em;
  position: absolute;
  bottom: -1px;
  left: 0;
}

.product-slider__inner {
  padding-top: var(--padding-xl);
  padding-bottom: calc((17em - var(--gap-xxl)) + 20em);
  margin-bottom: -20em;
  position: relative;
  overflow: hidden;
}

:is(.wf-design-mode, .wf-editor) .product-slider__list {
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: auto;
  width: 100vw;
}

:is(.wf-design-mode, .wf-editor) .product-slider__card {
  position: relative;
  flex-shrink: 0;
}

[data-product-slider-button][data-status="active"] {
  border-radius: 1.5em;
  color: var(--color-neutral-200) !important;
}

[data-product-slider-button][data-status="active"] [data-wf--button-theme--variant] {
  background-color: var(--color-neutral-800);
}

[data-product-slider-button]:not([data-status="active"]) {
  color: var(--color-neutral-800) !important;
}

[data-product-slider-button]:not([data-status="active"]) [data-wf--button-theme--variant] {
  background-color: var(--color-neutral-300);
}

.product-slider__button-row {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
  bottom: 23em;
}

@media screen and (max-width: 767px) {
  .product-slider__inner {
    padding-top: var(--padding-l);
    padding-bottom: calc((4.25em - var(--gap-xxl)) + 10em);
    margin-bottom: -10em;
  }
  .product-slider__button-row {
    bottom: 5em;
  }
}





/* ------------------------- GSAP SLIDERS -------------------------------------------------- */

[data-gsap-slider-init] {
  --slider-status: on;
  --slider-spv: 3.1;
  --slider-gap: var(--gap-sm);
}

@media screen and (max-width: 991px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 2.1;
    --slider-gap: 0.625em;
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 1;
    --slider-gap: 0.625em;
  }
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

[data-gsap-slider-rotate] [data-gsap-slider-item] {
  transform-origin: 50% 300%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-right: 0;
}

:is(.wf-design-mode, .wf-editor) [data-gsap-slider-rotate] [data-gsap-slider-item] {
  position: relative;
  top: auto;
  left: auto;
  margin-right: 0.25em;
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control="next"][data-gsap-slider-control-status="not-active"],
[data-gsap-slider-control="prev"][data-gsap-slider-control-status="not-active"] {
  opacity: 0.2;
  pointer-events: none;
}

.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status],
.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status] .button-bg {
  transition: all var(--animation-default);
}

.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status="active"] {
  border-radius: 3em;
  color: var(--color-light);
}

.product-slider [data-gsap-slider-init] [data-gsap-slider-control-status="active"] .button-bg {
  background-color: var(--color-dark);
}

.gsap-slider__control {
  transition: opacity 0.3s ease;
}

.demo-card {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card {
  background-color: #131313;
}

[data-gsap-slider-item-status="active"] .demo-card {
  background-color: red;
}

.demo-card__tag {
  transition: all 0.3s ease;
}

[data-gsap-slider-item-status="not-active"] .demo-card__tag {
  opacity: 1;
}

.product-slider [data-gsap-slider-init] {
  --slider-status: on;
  --slider-spv: 3;
  --slider-gap: 0em;
}

@media screen and (max-width: 991px) {
  .product-slider [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 3;
    --slider-gap: 0em;
  }
}

@media screen and (max-width: 767px) {
  .product-slider [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 3;
    --slider-gap: 0em;
  }
}

.product-slider [data-gsap-slider-rotate] [data-gsap-slider-item] {
  transform-origin: 50% 375%;
}

@media screen and (max-width: 767px) {
  .product-slider [data-gsap-slider-rotate] [data-gsap-slider-item] {
    transform-origin: 50% 325%;
  }
}

.gsap-slider {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.gsap-slider__controls {
  z-index: 2;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.gsap-slider__collection {
  width: 100%;
}

.gsap-slider__collection.is--products {
  width: 82.5em;
}

.gsap-slider__list {
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
  backface-visibility: hidden;
  display: flex;
}

.gsap-slider__control {
  color: #efeeec;
  background-color: #131313;
  border: 1px solid #2c2c2c;
  border-radius: 0.25em;
  padding: 0.75em 1.5em;
  font-size: 1em;
}

.gsap-slider__item {
  width: calc(
    ((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) /
      var(--slider-spv)
  );
  margin-right: var(--slider-gap);
  flex: none;
}

@media screen and (max-width: 767px) {
  .gsap-slider__collection.is--products {
    width: 60em;
  }
}





/* ------------------------- BUNNY PLAYER -------------------------------------------------- */

[data-bunny-player-init] :is(.custom-player__placeholder, .custom-player__dark, .custom-player__playpause, .custom-player__loading) {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

[data-bunny-player-init][data-player-status="playing"] .custom-player__placeholder,
[data-bunny-player-init][data-player-status="paused"] .custom-player__placeholder,
[data-bunny-player-init][data-player-activated="true"][data-player-status="ready"] .custom-player__placeholder {
  opacity: 0;
  visibility: hidden;
}

[data-bunny-player-init][data-player-status="paused"] .custom-player__dark,
[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .custom-player__dark {
  opacity: 0.3;
}

[data-bunny-player-init][data-player-status="playing"] .custom-player__dark {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"] .custom-player__playpause,
[data-bunny-player-init][data-player-status="loading"] .custom-player__playpause {
  opacity: 0;
}

[data-bunny-player-init][data-player-status="playing"][data-player-hover="active"] .custom-player__playpause {
  opacity: 1;
}

[data-bunny-player-init] .custom-player__toggle-playpause {
  transition: width var(--animation-default);
  width: 1.825em;
}

[data-bunny-player-init][data-player-status="playing"] .custom-player__toggle-playpause,
[data-bunny-player-init][data-player-status="loading"] .custom-player__toggle-playpause {
  width: 2.75em;
}

[data-bunny-player-init] .custom-player__toggle-playpause > * {
  transition: transform var(--animation-default);
  transform: translateY(0%) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="playing"] .custom-player__toggle-playpause > *,
[data-bunny-player-init][data-player-status="loading"] .custom-player__toggle-playpause > * {
  transform: translateY(-100%) rotate(0.001deg);
}

[data-bunny-player-init][data-player-status="loading"] .custom-player__loading {
  opacity: 1;
  visibility: visible;
}

[data-bunny-player-init][data-player-status="idle"][data-player-activated="false"] .custom-player__timeline,
[data-bunny-player-init][data-player-status="ready"][data-player-activated="false"] .custom-player__timeline {
  pointer-events: none;
}

[data-bunny-player-init] .custom-player__timeline-handle {
  transition: transform 0.15s ease-in-out;
}

[data-bunny-player-init][data-timeline-drag="true"] .custom-player__timeline-handle {
  transform: translate(-50%, -50%) scale(1);
}

[data-bunny-player-init] .webcam__sound svg {
  stroke-width: 1.25;
}

[data-bunny-player-init][data-player-muted="true"] .webcam__sound-mute-svg {
  display: block;
}

[data-bunny-player-init][data-player-muted="true"] .webcam__sound-unmute-svg {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"] {
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}

[data-bunny-player-init][data-player-update-size="cover"] [data-player-before] {
  display: none;
}

[data-bunny-player-init][data-player-update-size="cover"][data-player-fullscreen="false"] .custom-player__video {
  object-fit: cover;
}

[data-bunny-player-init] [data-player-mirror-init] .cover-image {
  transition: opacity 0.3s linear, visibility 0.3s linear;
}

[data-bunny-player-init] [data-player-mirror-init][data-player-mirror-status="playing"] .cover-image,
[data-bunny-player-init] [data-player-mirror-init][data-player-mirror-status="paused"] .cover-image,
[data-bunny-player-init][data-player-activated="true"] [data-player-mirror-init][data-player-mirror-status="ready"] .cover-image {
  opacity: 0;
  visibility: hidden;
}

[data-bunny-player-init] .custom-player__timeline-handle {
  width: 1px;
  height: 1.75em;
  transition: transform 0.15s ease-in-out;
  transform: translate(-50%, -50%) scaleY(0.66);
}

[data-bunny-player-init][data-timeline-drag="true"] .custom-player__timeline-handle {
  transform: translate(-50%, -50%) scaleY(1);
}
.bunny-player__before {
  padding-top: 62.5%;
}

.bunny-player__interface {
  flex-flow: column;
  justify-content: flex-end;
  align-items: baseline;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.bunny-player__time {
  grid-column-gap: 0.125em;
  grid-row-gap: 0.125em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 5.25em;
  display: flex;
}

.bunny-player__toggle-mute,
.bunny-player__toggle-fullscreen {
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
}

.bunny-player__interface-btns {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  align-items: center;
  display: flex;
}

.bunny-player__placeholder {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-player__timeline-progress {
  background-color: var(--color-electric);
  pointer-events: none;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-player__video {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-right: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.bunny-player__text {
  font-variation-settings: "wght" 500;
  white-space: nowrap;
  margin-bottom: 0;
  font-size: 0.875em;
  line-height: 1;
}

.bunny-player__text.is--transparent {
  opacity: 0.5;
}

.bunny-player__playpause {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.bunny-player__fullscreen-scale-svg {
  display: block;
}

.bunny-player__big-btn {
  background-color: var(--color-purple);
  cursor: pointer;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 5em;
  height: 5em;
  padding: 1.625em;
  display: flex;
  position: relative;
}

.bunny-player__volume-mute-svg {
  display: none;
}

.bunny-player {
  pointer-events: none;
  isolation: isolate;
  color: var(--color-ignore-light);
  border-radius: 0.375em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateX(0);
}

.bunny-player__toggle-playpause {
  cursor: pointer;
  width: 1.25em;
  height: 1.25em;
}

.bunny-player__fullscreen-shrink-svg {
  display: none;
}

.bunny-player__timeline-bg {
  background-color: #ffffff26;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-player__timeline-bar {
  border-radius: 1em;
  width: 100%;
  height: 25%;
  position: absolute;
  overflow: hidden;
}

.bunny-player__interface-bottom {
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.5em;
  display: flex;
  position: relative;
}

.bunny-player__volume-up-svg {
  display: block;
}

.bunny-player__timeline {
  cursor: pointer;
  flex: 1;
  align-items: center;
  height: 1em;
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: flex;
  position: relative;
}

.bunny-player__pause-svg {
  display: none;
}

.bunny-player__interface-fade {
  opacity: 0.5;
  background-image: linear-gradient(#0000, #000);
  width: 100%;
  height: 25%;
  position: absolute;
  bottom: 0;
}

.bunny-player__timeline-buffered {
  opacity: 0.2;
  pointer-events: none;
  background-color: #fff;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.bunny-player__loading-svg {
  width: 6em;
}

.bunny-player__dark {
  opacity: 0.1;
  background-color: #000;
  width: 100%;
  height: 100%;
  position: absolute;
}

.bunny-player__timeline-handle {
  background-color: var(--color-electric);
  pointer-events: none;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.bunny-player__loading {
  opacity: 0;
  visibility: hidden;
  background-color: #00000054;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.bunny-player__toggle-speed {
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.25em;
  display: flex;
}

.bunny-player__toggle-speed-span {
  letter-spacing: 0.03em;
  -webkit-user-select: none;
  user-select: none;
  display: block;
}





/* ------------------------- BUILT TO FLEX SECTION -------------------------------------------------- */

.btf-wrap {
  z-index: 2;
  aspect-ratio: 1 / 1.3;
  justify-content: center;
  align-items: center;
  width: 21.25em;
  display: flex;
  position: relative;
}

.btf-bg {
  z-index: 0;
  position: absolute;
  inset: 0%;
}

.btf-layer {
  z-index: 1;
  aspect-ratio: 1;
  background-color: var(--color-neutral-800);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.btf-layer.is--1 {
  background-color: #0000;
}

.btf-layer.is--2 {
  width: 72.5%;
}

.btf-layer.is--3 {
  width: 48%;
}

.btf-layer__h {
  text-align: center;
  white-space: nowrap;
  flex: none;
  font-size: 7em;
  line-height: 0.85;
  position: absolute;
}

.btf-layer__img {
  object-fit: contain;
  width: auto;
  height: 27.5em;
  position: absolute;
}

.btf-rotate {
  z-index: 5;
  aspect-ratio: 1;
  width: 48%;
  padding: 0.25em;
  position: absolute;
}

@media screen and (max-width: 767px) {
  .btf-wrap {
    font-size: 0.85em;
  }
}





/* ------------------------- RESOURCES -------------------------------------------------- */

.resources-list__collection:has(.w-dyn-empty),
.resources-list__collection .resources-list__list:empty {
  display: none;
}

:is(.wf-design-mode, .wf-editor) .resources-list__collection {
  display: block;
}

.resource-card {
  background-color: var(--color-neutral-600);
  cursor: pointer;
  border-radius: 0.3125em;
  width: 100%;
  padding: 0.625em;
  position: relative;
  transition: background-color var(--animation-ease);
}

.resource-card:hover {
  background-color: var(--color-neutral-550);
}

.resource-card__inner {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  justify-content: space-between;
  align-items: stretch;
  display: flex;
}

.resource-card__start {
  padding: var(--gap-l) 0.9375em 3.5em 2em;
  flex-flow: column;
  flex: 1;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.resource-card__end {
  flex: 0 auto;
  width: 100%;
  max-width: 20em;
}

.resource-card[data-wf--resources-card--variant="slider"] {
  background-color: var(--color-electric);
  color: var(--color-dark);
}

.resource-card[data-wf--resources-card--variant="slider"] .tag {
  color: var(--color-electric) !important;
}

.resource-card__video {
  z-index: 2;
  opacity: 0;
  object-fit: cover;
  visibility: hidden;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (min-width: 992px) {
  .resource-card[data-wf--resources-card--variant="small"] .resource-card__start {
    padding-left: 1.5em;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .resource-card[data-wf--resources-card--variant="small"] .resource-card__end {
    max-width: 15em;
  }

  .resource-card[data-wf--resources-card--variant="slider"] {
    padding: 0.3125em;
  }

  .resource-card[data-wf--resources-card--variant="slider"] .resource-card__start-inner {
    display: contents;
  }

  .resource-card[data-wf--resources-card--variant="slider"] .h-s {
    font-size: 1.25em;
  }

  .resource-card[data-wf--resources-card--variant="slider"] .resource-card__start {
    padding-left: 0.9375em;
    padding-top: 0.9375em;
    padding-bottom: 0.9375em;
  }

  .resource-card[data-wf--resources-card--variant="slider"] .resource-card__end {
    max-width: 15em;
  }
}

@media screen and (max-width: 767px) {
  .last-added .last-added__list .last-added__item:nth-last-child(1) {
    display: none;
  }
}

.resource-card__img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  inset: 0%;
}

.resource-visual__before {
  padding-top: 62.5%;
}

.resource-card__start-inner {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.resource-visual {
  border-radius: 0.1875em;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Resources (Used in update.html) */

.resources-list {
  padding-top: var(--padding-xl);
  padding-bottom: var(--padding-m);
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  position: relative;
}

.resources-list__list {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  display: flex;
}

.resources-list__title-row {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  text-align: center;
  flex-flow: column;
  align-items: center;
  padding-bottom: 3.75em;
  display: flex;
}

.resources-list__bg {
  pointer-events: none;
  color: var(--color-neutral-600);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.resources-list__scribble {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  color: var(--color-electric);
  text-align: center;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}

.resources-list__scribble-arrow {
  width: 1.625em;
  position: absolute;
  left: 103%;
  transform: translateY(1.25em) rotate(12deg) scaleY(-1);
}

.resources-list__group {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  display: flex;
}

.resources-list__line {
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100%;
  position: relative;
}

@media screen and (max-width: 991px) {
  .resources-list__title-row {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }
}





/* ------------------------- FEATURED WORK -------------------------------------------------- */

.featured-work__content {
  transition: grid-column-gap var(--animation-default);
}

.featured-work__content:hover {
  grid-column-gap: 4em;
}


.featured-work {
  z-index: 1;
  padding-top: calc(var(--padding-s) + 2.5em);
  padding-bottom: calc(var(--padding-xl) + 2.5em);
  position: relative;
}

.featured-work__title {
  z-index: 4;
  text-align: right;
  width: 100%;
  margin-bottom: 6.25em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.featured-work__title > * {
  max-width: 1100px;
  margin-inline: auto;
  text-align: center;
}

.featured-work__content {
  z-index: 3;
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  cursor: pointer;
  justify-content: center;
  align-items: center;
  max-width: 45em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.featured-work__content-center {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.featured-work__visual {
  z-index: 2;
  background-color: var(--color-black);
  border-radius: 0.25em;
  width: 16em;
  height: 10em;
  position: relative;
  overflow: hidden;
}

.featured-work__visual-text {
  z-index: 2;
  padding: var(--gap-s);
  color: var(--color-neutral-200);
  background-color: #00000059;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.featured-work__circle {
  z-index: 0;
  aspect-ratio: 1;
  color: var(--color-neutral-450);
  width: 28em;
  margin-left: 0.45em;
  position: absolute;
}

.featured-work__bg {
  z-index: 1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.featured-work__line {
  z-index: 0;
  justify-content: center;
  width: 100vw;
  display: flex;
  position: absolute;
}

.featured-work__bg-line {
  width: var(--stroke-weight);
  background-image: linear-gradient(
    180deg,
    var(--color-neutral-400),
    var(--color-neutral-400) 6%,
    var(--color-neutral-400) 94%,
    #e8e8e800
  );
  height: 100%;
}

.featured-work__scribble {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  color: var(--color-coral);
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-end;
  display: flex;
  position: absolute;
  bottom: -4em;
  right: 0;
  transform: translate(105%);
}

@media screen and (max-width: 991px) {
  .featured-work {
    background-color: var(--color-neutral-200);
  }
}

@media screen and (max-width: 767px) {
  .featured-work__circle {
    width: 22em;
    margin-left: 0;
  }

  .featured-work__scribble {
    justify-content: flex-start;
    align-items: flex-end;
    right: auto;
    transform: translate(0%);
  }
}

/* Fixed Reel */

.fixed-reel {
  z-index: 200;
  width: 100%;
  height: 100dvh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: clip;
}

.fixed-reel__bg {
  background-color: var(--color-black);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.fixed-reel__video {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.fixed-reel__close {
  padding-top: var(--gap-sm);
  padding-right: var(--gap-sm);
  position: absolute;
  top: 0;
  right: 0;
}

/* Custom Player */

.custom-player {
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.custom-player.is--reel {
  flex: 1;
  width: 100%;
}

.custom-player__before {
  padding-top: 62.5%;
}

.custom-player__video {
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  padding-right: 0;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.custom-player__placeholder {
  background-color: var(--color-neutral-950);
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
}

.custom-player__placeholder.is--reel {
  justify-content: center;
  align-items: center;
  display: flex;
}

.custom-player__playpause {
  pointer-events: auto;
  cursor: pointer;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.custom-player__interface {
  flex-flow: column;
  width: 100%;
  display: flex;
}

.custom-player__loading {
  opacity: 0;
  visibility: hidden;
  background-color: #00000054;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.custom-player__loading-svg {
  width: 6em;
}

.custom-player__media {
  pointer-events: none;
  color: var(--color-neutral-200);
  isolation: isolate;
  border-radius: 0.5em;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  overflow: hidden;
  transform: translateX(0);
}

.custom-player__media.is--reel {
  border-radius: 0;
}

.custom-player__float {
  z-index: 2;
  justify-content: center;
  align-items: center;
  width: 7.5em;
  display: flex;
  position: absolute;
  top: 45%;
  left: 0%;
  transform: translate(-50%, -50%);
}

.custom-player__interface-bottom {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  pointer-events: auto;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1.5em;
  padding-bottom: 4em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.custom-player__toggle-playpause {
  z-index: 2;
  cursor: pointer;
  align-items: center;
  width: 2.75em;
  height: 1.5em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.custom-player__toggle-pause {
  font-variation-settings: "wght" 430;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  position: absolute;
  top: 100%;
}

.custom-player__toggle-play {
  font-variation-settings: "wght" 430;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
  display: block;
}

.custom-player__timeline {
  cursor: pointer;
  flex: none;
  align-items: center;
  height: 1em;
  display: flex;
  position: relative;
}

.custom-player__timeline-bar {
  border-radius: 1em;
  width: 100%;
  height: 20%;
  position: absolute;
  overflow: hidden;
}

.custom-player__timeline-handle {
  background-color: var(--color-electric);
  pointer-events: none;
  border-radius: 1em;
  width: 0.75em;
  height: 0.75em;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) scale(0);
}

.custom-player__timeline-bg {
  background-color: #ffffff26;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
}

.custom-player__timeline-buffered {
  opacity: 0.2;
  pointer-events: none;
  background-color: #fff;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.custom-player__timeline-progress {
  background-color: var(--color-electric);
  pointer-events: none;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: translateX(-100%);
}

.custom-player__timeline-bg,
.custom-player__timeline-buffered,
.custom-player__timeline-progress {
  background-color: transparent;
  opacity: 1;
}

.custom-player__timeline-bar {
  overflow: visible;
}

.custom-player__timeline-progress::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2em;
  top: -0.375em;
  left: 100%;
  background-color: var(--color-dark);
  opacity: 0.75;
}

.custom-player__time {
  z-index: 2;
  grid-column-gap: 0.125em;
  grid-row-gap: 0.125em;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 6.25em;
  display: flex;
  position: relative;
}

.custom-player__time {
  width: 2.675em;
}

.custom-player__time .custom-player__text {
  display: none;
}

.custom-player__time .custom-player__text:first-child {
  display: block;
}

.custom-player__text {
  white-space: nowrap;
  margin-bottom: 0;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  font-weight: 400;
  line-height: 1.2;
}

.custom-player__text.is--transparent {
  opacity: 0.5;
}

.custom-player__toggle-word {
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.custom-player__cover-unmute {
  pointer-events: auto;
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
}

.custom-player__ticks {
  width: 100%;
  height: 0.5em;
  position: absolute;
  top: 0.25em;
}

.custom-player__ticks:has(.custom-player__markers:empty) .custom-player__ticks-line {
  height: 0.5em;
}

.custom-player__ticks-line {
  width: 100%;
  height: 1.625em;
  position: absolute;
}

.custom-player__ticks-line,
.custom-player[data-player-size="small"] .custom-player__ticks-line {
  width: 100%;
  background: repeating-linear-gradient(
    to right,
    var(--color-light) 0 1px,
    transparent 1px 0.5em
  );
}

@media screen and (min-width: 992px) {
  .custom-player__ticks-line {
    width: 100%;
    background: repeating-linear-gradient(
      to right,
      var(--color-light) 0 1px,
      transparent 1px calc((100% - 1px) / 100)
    );
  }
}

.custom-player[data-player-size="small"] .custom-player__interface-bottom {
  padding-bottom: 1.5em;
  gap: 0.5em;
}

.custom-player[data-player-size="small"] .custom-player__ticks-line {
  height: 1.5em;
}

.custom-player[data-player-size="small"] .custom-player__float {
  left: 50%;
  top: 0%;
  width: 6.25em;
}

.custom-player[data-player-bg-theme="purple"] .custom-player__timeline-progress::after {
  background-color: var(--color-purple);
}

.custom-player[data-player-bg-theme="purple"] .webcam__shadow {
  background-color: var(--color-purple);
  display: none;
}

.custom-player__markers {
  width: 100%;
  height: 1.25em;
  display: flex;
  position: absolute;
  top: 100%;
  left: 0%;
}

.custom-player__marker {
  width: 100%;
  height: 4em;
  position: relative;
}

.custom-player__markers-bg {
  background-color: var(--color-neutral-800);
  height: 100%;
  position: absolute;
  left: 0.25em;
  right: 0.25em;
}

.custom-player__marker-click {
  z-index: 2;
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  pointer-events: auto;
  cursor: pointer;
  flex-flow: column;
  align-items: flex-start;
  margin-left: -1.4em;
  padding-top: 1.5em;
  display: flex;
  position: absolute;
}

.custom-player__marker-p {
  white-space: nowrap;
  font-size: 1em;
  line-height: 1;
}

.custom-player__timeline-wrap {
  flex-flow: column;
  flex: 1;
  margin-left: 0.5em;
  margin-right: 0.5em;
  display: flex;
  position: relative;
}

.custom-player__cover-unmute-click {
  width: 0;
  height: 0;
}

@media screen and (max-width: 991px) {
  .custom-player__float {
    top: 0%;
    left: 80%;
  }

  .custom-player__interface-bottom {
    padding-bottom: 1.5em;
  }

  .custom-player__ticks-line {
    height: 0.5em;
  }

  .custom-player__marker {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .custom-player__float {
    width: 6.25em;
  }

  .custom-player__interface-bottom {
    grid-column-gap: 0.5em;
    grid-row-gap: 0.5em;
    padding-top: 1em;
    padding-bottom: 1em;
  }

  .custom-player__timeline-bar {
    height: 25%;
  }
}





/* ------------------------- RADIAL MARQUEE -------------------------------------------------- */

/* Animation */
@keyframes rotateMarquee {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

[data-dc-radial-marquee-rotate] {
  animation: rotateMarquee 90s linear infinite;
  transform-origin: center center;
  animation-play-state: paused;
}

.dc-radial-marquee__circle,
[data-dc-radial-marquee-rotate] {
  will-change: transform;
}

.dc-radial-marquee__collection {
  will-change: transform;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.dc-radial-marquee {
  justify-content: center;
  align-items: flex-start;
  width: 144em;
  display: flex;
  position: absolute;
}

.dc-radial-marquee__list {
  will-change: transform;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
}

.dc-radial-marquee__card {
  width: 100%;
  position: relative;
}

.dc-radial-marquee__card .dc-radial-marquee__card-p {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  min-height: 1.2em;
  overflow: hidden;
}

.dc-radial-marquee__card video[data-video-status] {
  transition: opacity var(--animation-default), visibility var(--animation-default);
}

.dc-radial-marquee__card video[data-video-status="loaded"] {
  opacity: 1;
  visibility: visible;
}

.dc-radial-marquee__card-inner {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 0.3125em;
  flex-flow: column;
  padding-top: 0.375em;
  padding-left: 0.375em;
  padding-right: 0.375em;
  display: flex;
}

.dc-radial-marquee__card-visual {
  border-radius: 0.1875em;
  position: relative;
  overflow: hidden;
}

.dc-radial-marquee__card-info {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 0.75em;
  display: flex;
}

.dc-radial-marquee__card-p {
  text-align: left;
  width: 100%;
  font-size: 0.8125em;
  line-height: 1.2;
}

.dc-radial-marquee__item {
  flex-flow: column;
  flex: none;
  width: 18.125em;
  position: absolute;
  --y: 500%;
  --y-circ: calc((var(--y) * -1) + 50%);
  transform-origin: center var(--y);
}

[data-theme-section="dark"] [data-dc-radial-marquee] .dc-radial-marquee__circle-svg {
  color: var(--color-neutral-550);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(1) {
  transform: translateY(var(--y-circ)) rotate(0deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(2) {
  transform: translateY(var(--y-circ)) rotate(20deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(3) {
  transform: translateY(var(--y-circ)) rotate(40deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(4) {
  transform: translateY(var(--y-circ)) rotate(60deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(5) {
  transform: translateY(var(--y-circ)) rotate(80deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(6) {
  transform: translateY(var(--y-circ)) rotate(100deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(7) {
  transform: translateY(var(--y-circ)) rotate(120deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(8) {
  transform: translateY(var(--y-circ)) rotate(140deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(9) {
  transform: translateY(var(--y-circ)) rotate(160deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(10) {
  transform: translateY(var(--y-circ)) rotate(180deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(11) {
  transform: translateY(var(--y-circ)) rotate(200deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(12) {
  transform: translateY(var(--y-circ)) rotate(220deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(13) {
  transform: translateY(var(--y-circ)) rotate(240deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(14) {
  transform: translateY(var(--y-circ)) rotate(260deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(15) {
  transform: translateY(var(--y-circ)) rotate(280deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(16) {
  transform: translateY(var(--y-circ)) rotate(300deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(17) {
  transform: translateY(var(--y-circ)) rotate(320deg);
}

[data-dc-radial-marquee] .dc-radial-marquee__item:nth-child(18) {
  transform: translateY(var(--y-circ)) rotate(340deg);
}

.dc-radial-marquee__before {
  padding-top: 50%;
}

.dc-radial-marquee__half-circle {
  aspect-ratio: 2;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 75%, #0000 100%);
  mask-image: linear-gradient(#000 75%, #0000 100%);
}

.dc-radial-marquee__circle {
  aspect-ratio: 1;
  width: 100%;
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
}

@media screen and (max-width: 991px) {
  .dc-radial-marquee__item {
    flex: none;
  }
}

@media screen and (max-width: 767px) {
  .dc-radial-marquee {
    width: 112em;
  }

  .dc-radial-marquee__card-info {
    padding-top: 0.75em;
    padding-bottom: 0.75em;
  }

  .dc-radial-marquee__card-p {
    font-size: 0.6875em;
  }

  .dc-radial-marquee__item {
    width: 14.25em;
    height: 11em;
  }
}





/* ------------------------- CURSOR -------------------------------------------------- */

.cursor {
  z-index: 100;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  display: flex;
  position: fixed;
  top: 0%;
  left: 0%;
}

.cursor-bubble {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-800);
  border-radius: 50%;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 4em;
  height: 4em;
  display: flex;
  position: relative;
  transition: clip-path var(--animation-default) 0s, background-color 0s linear var(--duration-default), color 0s linear var(--duration-default);
  clip-path: inset(50% round 100em);
}

body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear var(--duration-default), color 0s linear var(--duration-default);
  clip-path: inset(50% round 100em);
}

body:has([data-cursor-zone="neutral-600"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
  background-color: var(--color-neutral-600);
  color: var(--color-light);
}

body:has([data-cursor-zone="purple"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
  background-color: var(--color-purple);
  color: var(--color-light);
}

body:has([data-cursor-zone="electric"]:hover) .cursor-bubble {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
  background-color: var(--color-electric);
  color: var(--color-dark);
}

.cursor-bubble__arrow {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  aspect-ratio: 1;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 0.625em;
  display: flex;
  position: absolute;
  overflow: hidden;
  transform: rotate(-90deg);
  transition-delay: var(--duration-default);
}

.cursor-bubble__drag {
  position: relative;
  overflow: hidden;
}

.cursor-bubble__drag-span {
  font-variation-settings: "wght" 550;
  letter-spacing: -0.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 0.875em;
  line-height: 1.2em;
  display: block;
  position: relative;
  transition: transform var(--animation-default);
  transform: translateY(100%) scale(0.5) rotate(0.001deg);
}

.cursor__drag-dots {
  border-radius: 50em;
  justify-content: space-between;
  width: 0;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.cursor__drag-dot {
  aspect-ratio: 1;
  background-color: var(--color-neutral-200);
  border-radius: 1em;
  flex: none;
  width: 0.375em;
  position: relative;
  transition: background-color 0s linear 0.25s;
}

body:has([data-cursor-zone="neutral-600"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
  background-color: var(--color-neutral-600);
}

body:has([data-cursor-zone="purple"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
  background-color: var(--color-purple);
}

body:has([data-cursor-zone="electric"]:hover) .cursor__drag-dot {
  transition: background-color 0s linear 0s;
  background-color: var(--color-electric);
}

.cursor-bubble__arrow-svg {
  flex: none;
  width: 100%;
  display: block;
  transition: transform var(--animation-default);
  transform: translateY(0%) rotate(0.001deg);
}

body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble__arrow-svg {
  transition: transform var(--animation-default);
  transform: translateY(0%) rotate(0.001deg);
}

@media screen and (pointer: fine) {
  body:has([data-cursor="prev"]:hover) .cursor-bubble__arrow-svg {
    transform: translateY(100%) rotate(0.001deg);
  }

  body:has([data-cursor="next"]:hover) .cursor-bubble__arrow-svg {
    transform: translateY(-100%) rotate(0.001deg);
  }
}

.cursor-bubble__drag-span,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor-bubble__drag-span {
  transition: transform var(--animation-default);
  transform: translateY(100%) scale(0.5) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, [data-gsap-slider-collection]:hover) .cursor-bubble__drag-span {
  transform: translateY(0%) scale(1) rotate(0.001deg);
}

.cursor__drag-dots,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor__drag-dots {
  transition: all var(--animation-default);
  width: 0em;
  transform: scale(0) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, [data-gsap-slider-collection]:hover) .cursor__drag-dots {
  width: 6.5em;
  transform: scale(1) rotate(0.001deg);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status="grabbing"] [data-flick-cards-dragger]:hover, [data-gsap-drag-status="grabbing"] [data-gsap-slider-list]:hover) .cursor__drag-dots {
  width: 7.5em;
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status="grabbing"] [data-flick-cards-dragger]:hover, [data-gsap-drag-status="grabbing"] [data-gsap-slider-list]:hover) .cursor-bubble {
  clip-path: inset(7.5% round 100em);
}

.cursor__fade,
body:has(main [data-button-rotate-hover]:hover) .cursor .cursor__fade {
  transition: transform var(--animation-default);
  transform: scale(0) rotate(0.001deg);
}

body:has([data-cursor]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, [data-gsap-slider-collection]:hover) .cursor__fade {
  transform: scale(1) rotate(0.001deg);
}

body:has([data-cursor-zone="neutral-600"]:hover) .cursor-bubble__arrow {
  transition: clip-path var(--animation-default) 0s, background-color 0s linear 0s, color 0s linear 0s;
}

body:has([data-vertical-slider] [data-cursor]:hover) .cursor-bubble__arrow {
  transition-delay: 0s;
  transform: rotate(0deg);
}

body:has([data-cursor-zone="neutral-600"]:hover) .cursor-bubble {
  background-color: var(--color-neutral-600);
  color: var(--color-light);
}

body:has([data-cursor-zone="purple"]:hover) .cursor-bubble {
  background-color: var(--color-purple);
  color: var(--color-light);
}

body:has([data-cursor-zone="electric"]:hover) .cursor-bubble {
  background-color: var(--color-electric);
  color: var(--color-dark);
}

body:has([data-cursor]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, [data-gsap-slider-collection]:hover) .cursor-bubble {
  clip-path: inset(0% round 100em);
}

body:has([data-cursor="drag"]:hover, [data-flick-drag-status="grabbing"] [data-flick-cards-dragger]:hover, [data-gsap-drag-status="grabbing"] [data-gsap-slider-list]:hover) .cursor-bubble {
  clip-path: inset(7.5% round 100em);
}

body:has([data-cursor]:hover, [data-flick-drag-status] [data-flick-cards-dragger]:hover, [data-gsap-slider-collection]:hover) .cursor__fade {
  transform: scale(1) rotate(0.001deg);
}

@media (hover: none) and (pointer: coarse) {
  .cursor {
    display: none;
  }
}





/* ------------------------- PLATFORM DETAILS SECTION -------------------------------------------------- */

.db {
  z-index: 2;
  padding-top: var(--padding-xl);
  background-color: var(--color-neutral-200);
  position: relative;
}

.db__bottom-row {
  padding-top: var(--padding-s);
  padding-bottom: var(--padding-m);
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.db__top-row {
  padding-bottom: var(--padding-s);
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.db__top-title {
  position: relative;
}

.db__top-scribble {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  color: var(--color-coral);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
  right: -6.5em;
}

.db__top-description {
  width: 100%;
  max-width: 34em;
  margin-left: auto;
  margin-right: auto;
}
.db-visual__before {
  pointer-events: none;
  padding-top: 62.5%;
}

.db-visual {
  border-radius: 0.625em;
  width: 100%;
  position: relative;
}

.db__content {
  position: relative;
}

.db__back {
  background-color: var(--color-neutral-300);
  border-radius: 500em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.db__bottom-description {
  width: 100%;
  max-width: 24em;
}

@media screen and (max-width: 991px) {
  .db__bottom-row {
    padding-top: var(--gap-xxl);
    padding-bottom: 0;
  }
  .db__top-scribble {
    top: -3.5em;
    right: -3.5em;
  }

  .db__content {
    padding-top: 0;
  }

  .db__back {
    background-color: var(--color-neutral-200);
  }
}

@media screen and (max-width: 767px) {
  .db-visual {
    border-radius: 0.375em;
  }

  .db__back {
    border-radius: 1em;
  }

  .db__bottom-description {
    display: none;
  }

  .db {
    padding-top: var(--padding-s);
  }

  .db__bottom-row {
    grid-column-gap: var(--gap-m);
    grid-row-gap: var(--gap-m);
    padding-top: 2em;
  }

  .db__top-row {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .db__top-scribble {
    justify-content: flex-start;
    align-items: flex-end;
    display: none;
    position: relative;
    inset: auto;
  }
}





/* ------------------------- INTRO SECTION -------------------------------------------------- */

.intro {
  z-index: 1;
  background-color: var(--color-neutral-200);
  position: relative;
}

.intro__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: row;
  display: flex;
}

[data-wf--section-intro-title--variant="medium"] {
  max-width: 43.75em;
}

.intro__row.is--borders {
  margin-top: var(--gap-sm);
  margin-bottom: var(--gap-sm);
}

.intro__small-col {
  width: 100%;
  max-width: 35em;
}

.intro__large-col {
  flex: 1;
  position: relative;
}

.intro-col__micro {
  width: 3.75em;
  position: absolute;
  inset: 0% auto auto 0%;
}

@media screen and (max-width: 991px) {
  .intro__row {
    flex-flow: column;
  }

  .intro__small-col {
    max-width: none;
  }

  .intro__small-col.md--hide {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .intro__large-col {
    justify-content: center;
    display: flex;
  }

  .intro-col__micro {
    display: none;
  }
}





/* ------------------------- TRY VAULT -------------------------------------------------- */

.for-who + .try-vault {
  padding-top: var(--gap-xxl);
  padding-bottom: 0;
}

@media screen and (max-width: 767px) {
  .for-who + .try-vault {
    padding-top: 0;
    border-top: 1px solid var(--color-neutral-550);
  }
}

.try-vault {
  padding-bottom: var(--gap-l);
}

.try-vault__card {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 1em;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: color var(--animation-default), background-color var(--animation-default);
}

body:has([data-marketing-theme="light"]) .try-vault__card {
  background-color: var(--color-neutral-300);
  color: var(--color-dark);
}

.try-vault__end {
  flex-flow: column;
  width: 100%;
  display: flex;
}

.try-vault__start {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.try-vault__switches {
  padding: var(--gap-l);
  grid-column-gap: 0.4375em;
  grid-row-gap: 0.4375em;
  flex: none;
  justify-content: flex-end;
  display: flex;
  position: relative;
}

.try-vault__dark-button [data-marketing-theme-toggle],
.try-vault__light-button [data-marketing-theme-toggle] {
  transition: transform var(--animation-default), opacity var(--animation-default), color var(--animation-default);
  transform: scale(1) rotate(0.001deg);
}

body:has([data-marketing-theme="dark"]) .try-vault__light-button [data-marketing-theme-toggle] {
  opacity: 0.5;
}

body:has([data-marketing-theme="light"]) .try-vault__dark-button [data-marketing-theme-toggle] {
  opacity: 0.4;
}

.try-vault__tag .tag {
  transition: color var(--animation-default);
}

body:has([data-marketing-theme="light"]) .try-vault__tag .tag {
  color: var(--color-neutral-500);
}

.try-vault__tag .tag .button-bg {
  transition: background-color var(--animation-default);
}

body:has([data-marketing-theme="light"]) .try-vault__tag .tag .button-bg {
  background-color: var(--color-neutral-100);
}

@media (hover: hover) and (pointer: fine) {
  body:has([data-marketing-theme="light"]) .try-vault__dark-button [data-marketing-theme-toggle]:hover,
  body:has([data-marketing-theme="dark"]) .try-vault__light-button [data-marketing-theme-toggle]:hover {
    transform: scale(0.8) rotate(0.001deg);
    opacity: 1;
  }
}

.try-vault__switches .button-bg {
  transition: background-color var(--animation-default);
}

body:has([data-marketing-theme="dark"]) .try-vault__dark-button > *,
body:has([data-marketing-theme="light"]) .try-vault__light-button > * {
  pointer-events: none;
}

body:has([data-marketing-theme="light"]) .try-vault__switches .button-bg {
  background-color: var(--color-neutral-100);
}

body:has([data-marketing-theme="light"]) .try-vault__switches [data-marketing-theme-toggle] {
  color: var(--color-neutral-600);
}

.try-vault__visual {
  position: relative;
  overflow: hidden;
}

.try-vault__visual-before {
  padding-top: 73%;
}

.try-vault .cover-image {
  transition: opacity var(--animation-default);
}

body:has([data-marketing-theme="light"]) .try-vault .cover-image.is--try-vault-light {
  opacity: 1;
}

body:has([data-marketing-theme="light"]) .try-vault .cover-image.is--try-vault {
  opacity: 0;
}

.try-vault__text {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  max-width: 25em;
  display: flex;
  position: relative;
}

.try-vault__button-row {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding-top: 1em;
  display: flex;
}

.try-vault__tag {
  top: var(--gap-l);
  position: absolute;
}

.try-vault__light-button,
.try-vault__dark-button {
  display: flex;
}

.try-vault__scribble {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  color: var(--color-electric);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 12em;
  margin-top: 2.5em;
  margin-right: 14em;
  display: flex;
  position: absolute;
  top: 100%;
  transition: color var(--animation-default);
}

body:has([data-marketing-theme="light"]) .try-vault__scribble {
  color: var(--color-coral);
}

.try-vault__desktop-lines-svg {
  opacity: 0.12;
  pointer-events: none;
  width: 102%;
  position: absolute;
  top: 72%;
  left: -0.5%;
  transform: translateY(-50%);
}

.try-vault__mobile-lines-svg {
  display: none;
}

.try-vault__number-free {
  display: block;
}

@media screen and (max-width: 991px) {
  .try-vault__card {
    flex-flow: column;
  }

  .try-vault__end {
    padding-left: 10vw;
  }

  .try-vault__start {
    padding-top: 8em;
    padding-bottom: 2em;
  }

  .try-vault__switches {
    justify-content: center;
    padding-left: 0;
    padding-right: 10vw;
  }

  .try-vault__scribble {
    width: 100%;
    max-width: none;
    margin-top: 0.5em;
    margin-right: 0;
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
  }

  .try-vault__mobile-lines-svg {
    position: absolute;
  }

  .try-vault__number-free {
    display: inline;
  }
}

@media screen and (max-width: 767px) {
  .try-vault__end {
    padding-left: 1em;
    position: relative;
  }

  .try-vault__switches {
    padding-right: 1em;
  }

  .try-vault__visual-before {
    padding-top: 90%;
  }

  .try-vault__text {
    max-width: 20em;
  }

  .try-vault__desktop-lines-svg {
    display: none;
  }

  .try-vault__mobile-lines-svg {
    opacity: 0.1;
    pointer-events: none;
    width: calc(100vw + 2em);
    display: block;
    top: 3.25em;
    left: -2.0625em;
  }

  .try-vault__card {
    border-radius: 0;
  }
}





/* ------------------------- LIFETIME -------------------------------------------------- */

.lifetime-hero {
  padding-top: var(--gap-xl);
  padding-bottom: var(--gap-xxl);
  position: relative;
}

.lifetime-hero__content {
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.lifetime-hero__p {
  margin-top: var(--gap-xxl);
  width: 100%;
  max-width: 28.75em;
  margin-left: auto;
  margin-right: auto;
}

.lifetime-table {
  z-index: 2;
  position: relative;
}

.lifetime-table__wrap {
  padding: var(--gap-xxl);
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  background-color: var(--color-neutral-600);
  border-radius: 0.5em;
  flex-flow: column;
  width: 100%;
  display: flex;
}

.lifetime-table__row {
  padding-bottom: var(--gap-xxs);
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  border-bottom: 1px solid var(--color-neutral-525);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.lifetime-table__row:last-of-type {
  border: none;
}

.lifetime-table-icon {
  flex: none;
  width: 2em;
}

.lifetime-table__spacer {
  height: var(--gap-xxl);
}

.lifetime-hero__bg {
  z-index: 0;
  position: absolute;
  top: 0;
  left: -25%;
  right: -25%;
}

@media screen and (max-width: 767px) {
  .lifetime-table__wrap {
    padding-right: var(--gap-m);
    padding-left: var(--gap-m);
  }

  .lifetime-hero__bg {
    left: -50%;
    right: -50%;
  }
}





/* ------------------------- MODALS -------------------------------------------------- */

.modal__group {
  z-index: 150;
  pointer-events: none;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0.625em;
  display: flex;
  position: fixed;
  inset: 0%;
}

.modal__bg {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  background-color: #0000004d;
  width: 100%;
  height: 100%;
  transition: opacity 0.45s;
  position: fixed;
  inset: 0%;
}

[data-modal-wrap]:has([data-modal-target][data-modal-status="active"]) [data-modal-bg] {
  opacity: 1;
  pointer-events: auto;
}

.modal {
  width: 100%;
  min-height: 100%;
  overflow: clip;
}

.modal__item {
  z-index: 2;
  background-color: var(--color-neutral-800);
  pointer-events: auto;
  transform-origin: 50% 100%;
  color: var(--color-neutral-200);
  border-radius: 0.3125em;
  width: 100%;
  max-width: 43.75em;
  min-height: calc(100% - 1.25em);
  transition-property: transform;
  transition-duration: 0.75s;
  transition-timing-function: cubic-bezier(0.625, 0.05, 0, 1);
  position: absolute;
  top: 0.625em;
  bottom: 0.625em;
  right: 0.625em;
  overflow: hidden;
  transform: rotate(6deg) translate(105%);
}

[data-modal-status="active"] {
  transform: rotate(0deg) translate(0%);
  overflow: auto;
}

.wf-design-mode .modal__item {
  overflow: auto;
}

.modal-footer {
  padding-bottom: var(--gap-xs);
  overflow: hidden;
}

.about-footer__logo {
  opacity: 0.1;
  flex-flow: column;
  flex: none;
  justify-content: flex-start;
  align-items: center;
  width: 120%;
  display: flex;
  position: relative;
  left: 50%;
  transform: translate(-50%);
}

.modal__container {
  z-index: 1;
  padding-right: var(--gap-l);
  padding-left: var(--gap-l);
  position: relative;
}

.modal__container.is--used {
  padding-right: var(--gap-xs);
  padding-left: var(--gap-xs);
}

/* Modal Close */

.modal__close {
  z-index: 5;
  padding: var(--gap-sm);
  justify-content: flex-end;
  align-items: center;
  margin-left: auto;
  display: flex;
  position: sticky;
  inset: 0% 0% auto auto;
}

.button-close {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  white-space: nowrap;
  border-radius: 0.125em;
  justify-content: center;
  align-items: center;
  padding: 0.1875em 0.375em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.button-close__circle {
  background-color: var(--color-neutral-550);
  border-radius: 10em;
  justify-content: center;
  align-items: center;
  width: 1.5em;
  height: 1.5em;
  padding: 0.45em;
  display: flex;
}

.modal-close__bg {
  background-image: linear-gradient(
    210deg,
    var(--color-neutral-800),
    #0000 65%
  );
  width: 25%;
  height: 100%;
  position: absolute;
  inset: 0% 0% auto auto;
}

/* Breakpoints */

@media screen and (max-width: 767px) {
  .modal__group {
    padding: 0;
  }

  .modal__item {
    border-radius: 0;
    min-height: 100%;
    inset: 0;
  }
  .modal__container.is--used {
    padding-right: var(--gap-sm);
    padding-left: var(--gap-sm);
  }
}





/* ------------------------- HOME -------------------------------------------------- */

.home-hero {
  z-index: 2;
  flex-flow: column;
  justify-content: space-between;
  align-items: stretch;
  display: flex;
  position: relative;
}

.home-hero__title-row {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
  padding-left: 0.5em;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.home-hero__title-row h1 {
  max-width: 1050px;
}

.home-hero__top-logo {
  color: var(--color-purple);
  width: 5em;
}

.home-hero__bg {
  z-index: -1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

[data-wf--hero-background-lines--variant="dark-mode"] .home-hero__bg-line {
  color: var(--color-neutral-600);
}

[data-wf--hero-background-lines--variant="dark-mode"] {
    color: var(--color-neutral-600) !important;
}

.home-hero__content {
  grid-column-gap: max(1.5em, 4.5svh);
  grid-row-gap: max(1.5em, 4.5svh);
  flex-flow: column;
  align-items: center;
  display: flex;
}

.home-hero__marquee-row {
  aspect-ratio: 5;
  pointer-events: none;
  justify-content: center;
  width: 100%;
  display: flex;
  position: relative;
}

.hero-bg__wrap {
  z-index: 0;
  pointer-events: none;
  color: var(--color-neutral-400);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.hero-bg__wrap[data-bg-offset="l"] {
  margin-bottom: -3.6em;
}

.hero-bg__wrap[data-bg-offset="xl"] {
  margin-bottom: -5.1em;
}

.hero-bg__wrap[data-bg-offset="xxl"] {
  margin-bottom: -8em;
}

.hero-bg__circle {
  z-index: 0;
  aspect-ratio: 1;
  width: 22em;
  position: absolute;
}

.hero-bg__circle.is--large {
  width: 64em;
}

.hero-bg__horizontal {
  background-image: linear-gradient(
    90deg,
    color-mix(in srgb, currentColor 0%, transparent 100%) 0%,
    currentColor 10%,
    currentColor 90%,
    color-mix(in srgb, currentColor 0%, transparent 100%) 100%
  );
  height: var(--stroke-weight);
  width: 100vw;
}

.hero-bg__vertical {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, currentColor 0%, transparent 100%) 15%,
    currentColor 50%,
    currentColor 90%,
    color-mix(in srgb, currentColor 0%, transparent 100%) 100%
  );
  width: var(--stroke-weight);
  height: 100vh;
  position: absolute;
}

.home-hero__description-p {
  font-size: 1.375em;
  line-height: 1.2;
}

.home-hero__description-row {
  background-image: linear-gradient(
    180deg,
    transparent,
    var(--color-neutral-200) 20%,
    var(--color-neutral-200) 80%,
    transparent
  );
  text-align: center;
  width: 100%;
  max-width: 33em;
  padding-top: 2em;
  padding-bottom: 2em;
}

.home-hero__description-highlight {
  background-color: var(--color-neutral-300);
  border-radius: 0.1875em;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 0.2em 1em 0.3em !important;
  display: inline-block;
}

.home-hero__description-highlight.is--round {
  border-radius: 10em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

@media screen and (max-width: 991px) {
  .home-hero__title-row {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
  }

  .home-hero__top-logo {
    margin-top: var(--gap-m);
    order: 1;
  }
}

@media screen and (max-width: 767px) {
  .home-hero__title-row {
    padding-left: 0;
  }

  .home-hero__top-logo {
    margin-top: var(--gap-sm);
    width: 3em;
  }

  .home-hero__content {
    padding-bottom: 0;
  }

  .home-hero__marquee-row {
    font-size: 0.875em;
  }

  .hero-bg__circle {
    width: 22em;
    margin-left: 0;
  }

  .hero-bg__circle.is--large {
    width: 40em;
  }

  .home-hero__description-p {
    font-size: 1.125em;
  }

  .home-hero__description-row {
    padding-top: 0;
    padding-bottom: 2em;
  }
  
  .home-hero__description-highlight {
    padding: 0.4em 1em 0.5em !important;
  }
}





/* ------------------------- ABOUT -------------------------------------------------- */

/* Hero */

.about-hero {
  padding-right: var(--gap-sm);
  padding-bottom: var(--gap-xl);
  padding-left: var(--gap-sm);
}

.about-hero__logo {
  width: 7.75em;
  margin-bottom: 5em;
}

.about-container {
  z-index: 1;
  padding-right: var(--gap-l);
  padding-left: var(--gap-l);
  position: relative;
}

.about-hero__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: row;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.about-hero__intro {
  padding-bottom: var(--gap-xxl);
  grid-column-gap: calc(2 * var(--gap-xl));
  grid-row-gap: calc(2 * var(--gap-xl));
  flex-flow: column;
  display: flex;
}

.about-hero__col {
  flex: 1;
}

/* Card */

.about-card {
  padding-top: var(--gap-xl);
  padding-left: var(--gap-xxl);
  background-color: var(--color-purple);
  color: var(--color-neutral-200);
  cursor: pointer;
  border-radius: 1em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

[data-about-intro-card] h3,
[data-about-intro-card] h4 {
  transition: all var(--duration-default) var(--cubic-default);
}

[data-about-intro-card="ilja"] h3,
[data-about-intro-card="ilja"] h4 {
  transform: translate(0px, -100%);
}

[data-about-intro-card="ilja"] h3:first-of-type,
[data-about-intro-card="ilja"] h4:first-of-type {
  opacity: 0;
}

[data-about-intro-card="dennis"] h3:nth-of-type(2),
[data-about-intro-card="dennis"] h4:nth-of-type(2) {
  opacity: 0;
}

[data-about-intro-button="dennis"] {
  border: 1px solid transparent;
}

[data-about-intro-card="ilja"] [data-about-intro-button="ilja"] {
  color: var(--color-neutral-800);
  border-color: transparent;
}

[data-about-intro-card="ilja"] [data-about-intro-button="ilja"] .button-bg {
  background-color: var(--color-neutral-200);
}

[data-about-intro-card="ilja"] [data-about-intro-button="dennis"] {
  color: var(--color-neutral-200);
  border-color: var(--color-neutral-200);
}

[data-about-intro-card="ilja"] [data-about-intro-button="dennis"] .button-bg {
  background-color: transparent;
}

.about-card__text {
  z-index: 3;
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.about-card__text-h {
  height: 4em;
  padding-right: 0.5em;
  overflow: hidden;
}

.about-card__text-sub {
  height: 1.5em;
  overflow: hidden;
}

.about-card__controls {
  left: 50%;
  bottom: var(--gap-sm);
  z-index: 3;
  position: absolute;
  transform: translate(-50%);
}

.about-card__row {
  top: auto;
  left: 0%;
  right: 0%;
  bottom: var(--gap-xl);
  z-index: 0;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.about-card__img-w {
  z-index: 2;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 28em;
  display: flex;
  position: relative;
}

.about-card__img-layer {
  z-index: 1;
  aspect-ratio: 1;
  background-color: var(--color-purple);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  overflow: hidden;
}

.about-card__img-layer.is--2 {
  width: 75%;
}

.about-card__img-layer.is--3 {
  width: 50%;
}

.about-card__img-rotate {
  z-index: 5;
  aspect-ratio: 1;
  width: 50%;
  padding: 0.25em;
  position: absolute;
}

.about-card__img {
  opacity: 1;
  object-fit: contain;
  flex: none;
  width: auto;
  height: 28em;
  padding-top: 2em;
  position: absolute;
}

.about-card__img.is--2 {
  opacity: 0;
}

/* Others */

.about-item {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.about-item__img {
  aspect-ratio: 1;
  border-radius: 100em;
  width: 5.5em;
  position: relative;
  overflow: hidden;
}

.about-item__spacer {
  width: 5.5em;
}

.about-map__wrap {
  margin-bottom: var(--gap-xxl);
  aspect-ratio: 2.1;
  border-top: 1px solid var(--color-neutral-600);
  width: 100%;
  position: relative;
}

.about-map {
  z-index: 1;
  border-bottom-right-radius: 100em;
  border-bottom-left-radius: 100em;
  position: relative;
  overflow: hidden;
}

.about-map__inner {
  border-bottom-right-radius: 100em;
  border-bottom-left-radius: 100em;
  overflow: hidden;
}

.about-map__outline {
  z-index: 0;
  aspect-ratio: 1;
  color: var(--color-neutral-600);
  width: 100%;
  position: absolute;
  inset: auto 0% 0%;
}

.about-intro {
  text-align: center;
  width: 100%;
  max-width: 28.75em;
  margin-left: auto;
  margin-right: auto;
}

.about-stats {
  padding-right: var(--gap-sm);
  padding-left: var(--gap-sm);
  padding-top: calc(2 * var(--gap-xl));
  padding-bottom: calc(2 * var(--gap-xl));
}

.about-stats__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  width: 100%;
  display: flex;
}

.about-stats__col {
  padding-top: var(--gap-sm);
  padding-bottom: var(--gap-sm);
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  border-top: 1px solid var(--color-neutral-600);
  border-bottom: 1px solid var(--color-neutral-600);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.about-stats__col.is--left {
  padding-left: var(--gap-l);
}

.about-gallery {
  padding-top: var(--gap-xxl);
  padding-bottom: calc(2 * var(--gap-xxl));
  overflow: hidden;
}

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

.about-gallery__list {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.about-gallery__item {
  aspect-ratio: 1 / 1.2;
  border-radius: 0.1875em;
  flex: none;
  width: 16.25em;
  margin-left: -2em;
  margin-right: -3.5em;
  overflow: hidden;
}

.about-gallery__item.is--1 {
  z-index: 3;
  position: relative;
  transform: rotate(-4deg) translate(0, -10%);
}

.about-gallery__item.is--2 {
  z-index: 2;
  position: relative;
  transform: rotate(3deg);
}

.about-gallery__item.is--3 {
  z-index: 1;
  position: relative;
  transform: rotate(6deg) translate(0, 15%);
}

/* Breakpoints */
@media screen and (max-width: 991px) {
  .about-card {
    aspect-ratio: 1;
  }

  .about-card__row {
    height: 70%;
  }
}

@media screen and (max-width: 767px) {
  .about-card {
    padding-top: var(--gap-l);
    padding-right: var(--gap-l);
    padding-left: var(--gap-l);
    aspect-ratio: 1 / 1.25;
  }

  .about-card__text {
    flex-flow: row;
    justify-content: space-between;
  }

  .about-container {
    padding-left: 0;
    padding-right: 0;
  }

  .about-hero__row {
    grid-column-gap: var(--gap-xxl);
    grid-row-gap: var(--gap-xxl);
    flex-flow: row;
  }

  .about-item {
    grid-column-gap: var(--gap-xxs);
    grid-row-gap: var(--gap-xxs);
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .about-item__img {
    width: 4em;
  }

  .about-item__spacer {
    height: var(--gap-xxs);
    width: auto;
  }

  .about-stats__col.is--left {
    padding-left: 0;
  }

  .about-footer__logo {
    margin-top: var(--gap-xxl);
    margin-bottom: 0.625em;
  }

  .about-card__img-w {
    width: 24em;
    font-size: 0.85em;
  }

  .about-card__name {
    order: -9999;
  }
}

@media screen and (max-width: 479px) {
  .about-card__text-h {
    height: 2.75em;
  }
}





/* ------------------------- PLANS -------------------------------------------------- */

.ptc-card {
  padding-top: var(--gap-xl);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  aspect-ratio: 1;
  border-radius: var(--gap-s);
  background-color: var(--color-electric);
  color: var(--color-neutral-800);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.ptc-card__tags {
  top: var(--gap-xl);
  position: absolute;
}

.ptc-card__visual {
  aspect-ratio: 2.5;
  margin-top: calc(-1 * var(--gap-sm));
  margin-bottom: calc(-1 * var(--gap-sm));
  width: 75%;
  position: relative;
}

.ptc-card__description {
  margin-bottom: var(--gap-xxs);
  width: 100%;
  max-width: 27em;
}

@media screen and (max-width: 991px) {
  .ptc-card {
    padding-top: var(--padding-m);
    padding-bottom: var(--padding-s);
    aspect-ratio: auto;
  }
}

@media screen and (max-width: 767px) {
  .ptc-card {
    padding: var(--padding-s) var(--gap-s);
    aspect-ratio: auto;
  }

  .ptc-card__tags {
    position: relative;
    top: 0;
  }

  .ptc-card__visual {
    width: 150%;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Students */

.students-card {
  padding-top: var(--gap-xl);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  aspect-ratio: 1;
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  text-align: center;
  border-radius: 500em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.students-card__visual-overlay {
  background-image: linear-gradient(
    0deg,
    var(--color-neutral-800) 20%,
    #201d1d00
  );
  height: 40%;
  position: absolute;
  inset: auto 0% 0%;
}

.students-card__visual {
  aspect-ratio: 2.5;
  width: 80%;
  margin-top: -0.25em;
  margin-bottom: -0.25em;
  position: relative;
}

.students-card__tags {
  top: var(--gap-xl);
  position: absolute;
}

.students-card__description {
  margin-bottom: var(--gap-xxs);
  width: 100%;
  max-width: 27em;
}

@media screen and (max-width: 767px) {
  .students-card {
    padding: var(--padding-l) var(--gap-s) var(--padding-m);
    aspect-ratio: auto;
  }

  .students-card__visual {
    width: 150%;
    margin-top: 0;
    margin-bottom: 0;
  }

  .students-card__tags {
    top: var(--padding-s);
  }
}





/* ------------------------- SHOWCASE -------------------------------------------------- */

/* Showcase Page */

.showcase-hero {
  padding-bottom: 0;
  overflow: hidden;
}

.showcase-hero__title-row {
  justify-content: center;
  align-items: center;
  max-width: 60em;
  margin-bottom: -0.5em;
  display: flex;
}

.showcase-hero__osmo-icon-svg {
  color: var(--color-purple);
  width: 0.7em;
  margin-bottom: -0.015625em;
  margin-right: 0.1875em;
  display: inline-block;
}

.showcase-featured__collection,
.showcase-featured__list,
.showcase-featured__item {
  width: 100%;
}

.showcase-featured__content {
  background-color: var(--color-neutral-800);
  border-radius: 500em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.showcase-featured__wrapper {
  width: 100%;
  max-width: 48em;
}

.showcase-featured__title {
  text-align: center;
  padding-bottom: 0.625em;
}

.showcase-featured__card {
  padding: 6.875em var(--gap-s) var(--gap-m);
  color: var(--color-neutral-200);
  flex-flow: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.showcase-featured__credits {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  padding-bottom: 1.875em;
  display: flex;
}

.showcase-featured__media {
  position: relative;
}

.showcase-featured__click {
  z-index: 2;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.showcase-featured__button {
  justify-content: center;
  display: flex;
}

.showcase-featured__button-click {
  z-index: 3;
  display: flex;
  position: relative;
}

.showcase-text {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-s);
  text-align: center;
}

.showcase-text__title-row {
  max-width: 50em;
  padding-bottom: 1.5em;
}

.showcase-text__content {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  align-items: center;
  display: flex;
}

.showcase-featured__resources {
  justify-content: center;
  padding-top: 1.875em;
  padding-bottom: 4.5em;
  display: flex;
}

.credit-link__hidden-handle {
  width: 0;
  height: 0;
  display: none;
  position: absolute;
  overflow: hidden;
}

.credit-link {
  z-index: 3;
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  align-items: center;
  display: flex;
  position: relative;
}

.showcase-featured__tags {
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: translateY(-50%);
}

.showcase-hero__title {
  margin-bottom: 6em;
  position: relative;
}

/* Showcase Modals */

.showcase-grid {
  padding-bottom: var(--padding-m);
}

.showcase-card {
  border-radius: 1em;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.showcase-media {
  border-radius: 1em;
  position: relative;
}

.showcase-media__before {
  pointer-events: none;
  padding-top: 62.5%;
  padding: 0;
  aspect-ratio: 1 / 1.31;
}

.showcase-media__video {
  pointer-events: none;
  object-fit: cover;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.showcase-media__image {
  pointer-events: none;
  object-fit: cover;
  border-radius: inherit;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.showcase-media__border {
  border-top-style: solid;
  border-top-width: var(--stroke-weight);
  border-top-color: var(--color-neutral-800);
  border-right-style: solid;
  border-right-width: var(--stroke-weight);
  border-right-color: var(--color-neutral-800);
  border-bottom-style: solid;
  border-bottom-width: var(--stroke-weight);
  border-bottom-color: var(--color-neutral-800);
  border-left-style: solid;
  border-left-width: var(--stroke-weight);
  border-left-color: var(--color-neutral-800);
  opacity: 0.1;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.showcase-grid__list {
  grid-column-gap: var(--gap-m);
  grid-row-gap: 3.75em;
  flex-flow: wrap;
  display: flex;
}

.showcase-grid__item {
  width: calc((99.99% - (var(--gap-m)) * 3) / 4);
}
width: calc((99.99% - (var(--gap-m)) * 2) / 3);

.showcase-media__loading {
  opacity: 0;
  color: var(--color-neutral-200);
  visibility: hidden;
  border-radius: inherit;
  background-color: #0003;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0.5em;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.showcase-media__image {
  transition: all 250ms ease-in-out;
}

.showcase-grid__list:has(.showcase-card:hover) .showcase-media__image {
  opacity: .4;
}

.showcase-card:hover .showcase-media__image {
  opacity: 1 !important;
  transform: scale(1.1) rotate(-1deg);
}

[data-bunny-thumbnail-init] .showcase-media__image,
[data-bunny-thumbnail-init] [data-player-img] {
  transition: opacity var(--animation-ease), visibility var(--animation-ease);
}

[data-bunny-thumbnail-init] .showcase-media__loading {
  transition: opacity var(--animation-ease-double), visibility var(--animation-ease-double);
}

[data-bunny-thumbnail-init][data-player-status="playing"] .showcase-media__image,
[data-bunny-thumbnail-init][data-player-status="playing"] [data-player-img] {
  opacity: 0;
  visibility: hidden;
}

[data-bunny-thumbnail-init][data-player-status="loading"] .showcase-media__loading {
  opacity: 1;
  visibility: visible;
}

.showcase-media__loading-svg {
  width: 4em;
  position: relative;
}

.showcase-card__credits {
  align-items: center;
  padding-top: 0.75em;
  display: flex;
  display: none !important;
}

.showcase-card__pictures {
  display: flex;
}

.showcase-card__click {
  z-index: 2;
  cursor: pointer;
  border-radius: 0.25em;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

:is(.wf-design-mode, .wf-editor) .showcase-card__click,
:is(.wf-design-mode, .wf-editor) .used-resource-card__click,
:is(.wf-design-mode, .wf-editor) .flick-card__click {
  display: none;
}

.showcase-card__info {
  grid-column-gap: 0.125em;
  grid-row-gap: 0.125em;
  flex-flow: column;
  justify-content: center;
  padding-left: 0.625em;
  display: flex;
}

.showcase-card__h3 {
  font-variation-settings: "wght" 500;
  letter-spacing: -0.02em;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1em;
  line-height: 1.2;
}

.showcase-card__info-handle {
  grid-column-gap: 0.3125em;
  grid-row-gap: 0.3125em;
  color: var(--color-neutral-500);
  align-items: center;
  padding-bottom: 0.125em;
  display: flex;
}

.showcase-card__handle {
  grid-column-gap: 0.3125em;
  grid-row-gap: 0.3125em;
  align-items: center;
  display: flex;
}

.showcase-card__resources {
  padding-top: 1.25em;
}

@media screen and (max-width: 991px) {
  .showcase-grid__item {
    width: calc((99.99% - (var(--gap-m)) * 1) / 2);
  }

  .showcase-featured__content {
    border-radius: 1em;
  }
}

@media screen and (max-width: 767px) {
  .showcase-grid__list {
    grid-row-gap: 2.5em;
  }

  .showcase-grid__item {
    width: 100%;
  }

  .showcase-hero {
    padding-bottom: 2.5em;
  }

  .showcase-hero__osmo-icon-svg {
    display: none;
  }

  .showcase-featured__title {
    padding-bottom: 1em;
  }

  .showcase-featured__card {
    padding-top: 3em;
  }

  .showcase-featured__credits {
    grid-column-gap: 0.75em;
    grid-row-gap: 0.75em;
  }

  .showcase-hero__title {
    margin-bottom: 2em;
  }

  .showcase-featured__resources {
    padding-top: 1.5em;
    padding-bottom: 2.5em;
  }

  .credit-link {
    grid-column-gap: 0.25em;
    grid-row-gap: 0.25em;
  }
}

/* Used * [Hero, Credits etc] (Within Showcase Modal) */

.used-hero {
  padding-bottom: 1.875em;
}

.used-hero__title-row {
  padding-left: var(--gap-xxl);
}

.used-credits__row {
  padding: var(--gap-sm) var(--gap-sm) var(--gap-sm) var(--gap-xxl);
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  border-top: var(--stroke-weight) solid var(--color-neutral-600);
  border-bottom: var(--stroke-weight) solid var(--color-neutral-600);
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.used-credits__pf-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: wrap;
  justify-content: center;
  align-items: center;
  display: flex;
}

.used-bottom {
  z-index: 2;
  margin-top: var(--gap-xs);
  border-top: var(--stroke-weight) solid var(--color-neutral-600);
  background-color: var(--color-neutral-800);
  width: 100%;
  position: sticky;
  bottom: 0;
  left: 0;
}

.usec-bottom__row {
  padding: var(--gap-sm) 0.625em;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.used-bottom__fade {
  background-image: linear-gradient(
    0deg,
    var(--color-neutral-800),
    transparent
  );
  pointer-events: none;
  width: 100%;
  height: 5em;
  display: none;
  position: absolute;
  bottom: 99%;
  left: 0;
}

.used-sitemap {
  width: 0;
  height: 0;
  display: none;
  position: absolute;
  overflow: hidden;
}

.used-resources {
  padding-top: var(--gap-xs);
}

.used-resources__list {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  flex-flow: column;
  display: flex;
}

.used-resource-card {
  padding-top: var(--gap-xxs);
  padding-right: var(--gap-xxs);
  padding-bottom: var(--gap-xxs);
  background-color: var(--color-neutral-600);
  border-radius: 0.3125em;
  width: 100%;
  display: flex;
  position: relative;
  transition: background-color var(--animation-ease);
}

.used-resource-card:hover {
  background-color: var(--color-neutral-550);
}

.used-resource-card__info {
  padding: var(--gap-s) var(--gap-xxl);
  grid-column-gap: 0.75em;
  grid-row-gap: 0.75em;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.used-resource-card__info .tag-label {
  color: var(--color-neutral-475);
}

.used-resource-card .h-xs {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  min-height: 1.1em;
  line-height: 1.1;
  overflow: hidden;
}

.used-resource-card__media {
  background-color: var(--color-neutral-800);
  border-radius: 0.125em;
  flex: none;
  width: 10.1875em;
  position: relative;
}

.used-resource-card__media-before {
  padding-top: 62.5%;
}

.used-resource-card__click {
  z-index: 2;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.used-resource-card__media-img {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.used-resource-card__media-video {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

[data-res-used-video] {
  transition: opacity var(--animation-ease), visibility var(--animation-ease);
  opacity: 0;
  visibility: hidden;
}

[data-res-used-video="playing"] {
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 479px) {
  .showcase-hero .padding-hero {
    height: calc(var(--nav-bar-height) + max(5em, 15svh));
  }
}

[data-res-used-update] .credits-link__second:has(.button-label:empty) {
  display: none;
}

.used-hero__title-h {
  letter-spacing: -0.03em;
  font-family: Haffer XH, Arial, sans-serif;
  font-size: 2.5em;
  font-weight: 400;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .used-hero {
    padding-bottom: 1em;
  }

  .used-resource-card .tag {
    font-size: 0.8125em;
  }

  .used-credits__row {
    border-top-style: none;
    flex-flow: column;
    align-items: flex-start;
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .used-credits__pf-col {
    padding-top: var(--gap-sm);
    border-top: var(--stroke-weight) solid var(--color-neutral-600);
    justify-content: flex-start;
    width: 100%;
  }

  .used-credits__count-col {
    order: -9999;
  }

  .used-bottom {
    margin-top: var(--gap-m);
  }

  .usec-bottom__row {
    padding-left: 0;
  }

  .used-hero__title-row {
    padding-left: 0;
  }

  .used-resources {
    padding-top: var(--gap-sm);
  }

  .used-resource-card {
    padding: 0.5em;
  }

  .used-resource-card__info {
    padding: 0em var(--gap-xs) 0em 0.75em;
    grid-column-gap: 0.625em;
    grid-row-gap: 0.625em;
  }

  .used-resource-card__media {
    width: 8em;
  }

  .used__top {
    min-height: calc(100svh + -12.5em - 1px);
  }
}

/* Resources Used */

.res-used {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  align-items: center;
  display: flex;
}

.res-used__icon {
  background-color: var(--color-neutral-300);
  color: var(--color-purple);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 1.75em;
  height: 1.75em;
  display: flex;
  transition: color var(--animation-ease), background-color var(--animation-ease);
  transform: rotate(0.001deg);
}

.res-used__icon.is--dark {
  background-color: var(--color-neutral-600);
  color: var(--color-neutral-200);
}

.res-used__icon.is--darker {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
}

.res-used__text {
  grid-column-gap: 0.375em;
  grid-row-gap: 0.375em;
  align-items: center;
  height: 1.75em;
  display: flex;
  position: relative;
}

.res-used__icon-svg {
  width: 0.625em;
}

.res-used__line {
  height: var(--stroke-weight);
  background-color: var(--color-neutral-450);
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}

.res-used__line.is--purple {
  background-color: var(--color-purple);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--animation-default);
}

.res-used__line.is--purple.is--dark {
  background-color: var(--color-electric);
}

.res-used__line.is--purple.is--darker {
  background-color: var(--color-neutral-800);
}

.res-used__line.is--dark {
  background-color: var(--color-neutral-600);
}

.res-used__line.is--dark-transparent {
  background-color: var(--color-neutral-950);
  opacity: 0.2;
}

@media (hover: hover) and (pointer: fine) {
  .showcase-card:has([data-modal-trigger]:hover) .res-used__icon,
  .showcase-featured__card:has([data-modal-trigger]:hover) .res-used__icon,
  .flick-card:has([data-modal-trigger]:hover) .res-used__icon,
  .res-used:hover .res-used__icon {
    transition: all var(--animation-default);
    transform: rotate(180deg);
  }

  .showcase-card:has([data-modal-trigger]:hover) .res-used__line,
  .showcase-featured__card:has([data-modal-trigger]:hover) .res-used__line,
  .flick-card:has([data-modal-trigger]:hover) .res-used__line,
  .res-used:hover .res-used__line {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

@media screen and (max-width: 767px) {
  .res-used.is--flick-card {
    display: none;
  }
}

@media screen and (min-width: 991px) {
  html:not(.wf-design-mode) [data-continent-anim] {
    transition: all 0.5s var(--cubic-default);
    transform: translate(-2rem, 0px);
    opacity: 0;
    transition-delay: 0s;
  }

  .continent-col,
  .continent-col__img {
    transition: all 0.3s ease;
  }

  .continent-col:not(:first-of-type) .continent-col__start-content {
    padding-left: calc(var(--gap-sm) * 2);
  }

  .continent-col:hover,
  .continent-col[data-state="active"] {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-800);
  }

  .continent-col:hover .continent-col__face-inner,
  .continent-col[data-state="active"] .continent-col__face-inner {
    border-color: var(--color-neutral-200);
  }

  .continent-row:has(.continent-col:not([data-state="active"]):hover) .continent-col[data-state="active"] .continent-col__face-inner {
    border-color: var(--color-neutral-600);
  }

  .continent-row:has(.continent-col:not([data-state="active"]):hover) .continent-col[data-state="active"] [data-continent-anim] {
    transition: all 0.5s var(--cubic-default);
    transform: translate(-2rem, 0px);
    opacity: 0;
    transition-delay: 0s;
  }

  .continent-col:hover .continent-col__start {
    grid-template-columns: 1fr;
  }

  .continent-col:hover .continent-col__img.is--base,
  .continent-col[data-state="active"] .continent-col__img.is--base {
    opacity: 0;
  }

  .continent-col:hover .continent-col__img.is--accent,
  .continent-col[data-state="active"] .continent-col__img.is--accent {
    opacity: 1;
  }

  .continent-col:hover [data-continent-anim],
  .continent-col[data-state="active"] [data-continent-anim] {
    transform: translate(0rem, 0px);
    opacity: 1;
  }

  [data-continent-anim] {
    transition-delay: calc(var(--i) * 0.05s) !important;
  }

  .continent-row:has(.continent-col:hover) .continent-col:not(:hover) {
    background-color: var(--color-neutral-600);
    color: var(--color-neutral-200);
  }

  .continent-row:has(.continent-col:hover) .continent-col:not(:hover) .continent-col__start {
    grid-template-columns: 0fr;
  }

  .continent-row:has(.continent-col:hover) .continent-col:not(:hover) .continent-col__img.is--base {
    opacity: 1;
  }
}

@media screen and (min-width: 478px) {
  .used-resource-card__info .tag {
    font-size: 0.8125em;
  }
}

/* Showcase Profiles */

.profile-picture {
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 2.25em;
  height: 2.25em;
  display: flex;
  position: relative;
}

.profile-picture:has(img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"]),
.profile-picture:has(img[src=""]) {
  background-color: var(--color-neutral-300);
}

.profile-picture:has(img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"]) svg,
.profile-picture:has(img[src=""]) svg {
  display: block;
}

.profile-picture img[src="https://cdn.prod.website-files.com/plugins/Basic/assets/placeholder.60f9b1840c.svg"],
.profile-picture img[src=""] {
  display: none;
}

.profile-picture__placeholder-svg {
  opacity: 0.15;
  width: 1em;
  margin-bottom: 0.125em;
  display: none;
}

.profile-picture-second {
  margin-left: -0.6875em;
  position: relative;
}

.profile-picture-second__bg {
  background-color: var(--color-neutral-200);
  top: calc(var(--stroke-weight) * -1);
  right: calc(var(--stroke-weight) * -1);
  bottom: calc(var(--stroke-weight) * -1);
  left: calc(var(--stroke-weight) * -1);
  border-radius: 50%;
  position: absolute;
}

.profile-picture__image {
  pointer-events: none;
  object-fit: cover;
  -webkit-user-select: none;
  user-select: none;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
}

.profile-picture__link {
  z-index: 3;
  border-radius: 50%;
  display: block;
  position: relative;
}

@media (hover: hover) and (pointer: fine) {
  .profile-picture__link {
    transition: transform var(--animation-ease);
    transform: translateY(0em) rotate(0.001deg);
  }

  .showcase-card:has([data-author="1"]:hover) .profile-picture__link[data-author="1"],
  .showcase-card:has([data-author="2"]:hover) .profile-picture__link[data-author="2"] {
    transform: translateY(-0.125em) rotate(0.001deg);
  }

  .showcase-card:has([data-author="1"]:hover) [data-underline-link][data-author="1"]::before,
  .showcase-card:has([data-author="2"]:hover) [data-underline-link][data-author="2"]::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }
}

/* Others */

.osmo-hero__title-inner {
  display: flex;
}





/* ------------------------- VAULT -------------------------------------------------- */

.vault-features {
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
}

.vault-features__title-row {
  grid-column-gap: var(--gap-xxl);
  grid-row-gap: var(--gap-xxl);
  text-align: center;
  margin-bottom: calc(2 * var(--gap-xl));
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.vault-features__p {
  max-width: 32.5em;
}

.vault-features__content {
  padding-top: var(--padding-l);
  padding-right: var(--gap-m);
  padding-left: var(--gap-m);
  background-color: var(--color-neutral-300);
  border-radius: 30em;
  width: 100%;
  position: relative;
}

.vault-features__tags {
  left: 0%;
  top: var(--gap-sm);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  right: 0%;
}

.vault-features__scribble {
  grid-column-gap: var(--gap-xs);
  grid-row-gap: var(--gap-xs);
  color: var(--color-coral);
  text-align: center;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  top: 40%;
  right: 0;
  transform: translate(120%);
}

.vault-features__button {
  left: 50%;
  bottom: var(--gap-l);
  z-index: 2;
  position: absolute;
  transform: translate(-50%);
}

@media screen and (max-width: 991px) {
  .vault-features__content {
    aspect-ratio: auto;
    border-radius: 1em;
  }
}

@media screen and (max-width: 767px) {
  .vault-features__tags {
    top: -0.5625em;
  }

  .vault-features__scribble {
    display: none;
    top: 70%;
    right: 30%;
  }

  .vault-features__button {
    display: none;
  }
}

/* Feature Mockup */

.feature-mockup {
  flex-flow: column;
  width: 100%;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.feature-mockup__screen {
  padding: var(--gap-xs);
  background-color: var(--color-neutral-950);
  border-radius: 0.625em;
  width: 100%;
}

.feature-mockup__screen-inner {
  aspect-ratio: 1440 / 900;
  background-color: var(--color-neutral-200);
  border-radius: 0.25em;
  width: 100%;
  height: 100%;
  position: relative;
}

.feature-mockup__base {
  background-image: linear-gradient(#c3c5d0, #c5c7d4);
  width: 15em;
  height: 10em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.feature-mockup__noise {
  z-index: 2;
  opacity: 0.33;
  mix-blend-mode: overlay;
  position: absolute;
  inset: 0%;
}

.feature-mockup__base-bottom {
  z-index: 0;
  mix-blend-mode: soft-light;
  background-image: linear-gradient(135deg, #acafbc, #fff);
  position: absolute;
  inset: 0%;
}

.feature-mockup__base-top {
  z-index: 0;
  mix-blend-mode: soft-light;
  background-image: linear-gradient(#383a44, #acafbc00);
  width: 100%;
  height: 2em;
  position: absolute;
  inset: 0% 0% auto;
}

.feature-mockup__screen-overlay {
  position: absolute;
  inset: 0%;
}

.feature__grid {
  margin-top: var(--padding-s);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-xxl);
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.feature-card__bottom-p {
  min-height: 5.5em;
}

.feature__card {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color-neutral-400);
  width: calc((100% - (2 * var(--gap-sm))) / 3);
}

.feature-card__top {
  padding: var(--gap-xxl) 0.625em var(--gap-xs);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.feature-card__top-row {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  display: flex;
}

.feature-card__icon {
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 0.625em;
  height: 0.625em;
  display: none;
  transform: rotate(0);
  transition: transform var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .feature-card__icon {
  transform: rotate(315deg);
}

.feature-card__bottom {
  grid-template-rows: 1fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-rows var(--duration-default) var(--cubic-default);
}

[data-accordion-status="active"] .feature-card__bottom {
  grid-template-rows: 1fr;
}

.feature-card__bottom-wrap {
  flex-flow: column;
  height: 10000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.feature-card__bottom-content {
  padding-bottom: 0.625em;
  padding-left: 0.625em;
  padding-right: 0.625em;
}

.feature-card__bottom-visual {
  aspect-ratio: 1440 / 900;
  background-color: var(--color-neutral-100);
  border-radius: 0.5em;
  width: 100%;
  position: relative;
}

.feature-mockup__video {
  background-color: var(--color-neutral-200);
  border-radius: 0.25em;
  width: 48.6%;
  padding: 0.6%;
  position: absolute;
  top: 29%;
  left: 23.25%;
}

.feature-mockup__video-inner {
  aspect-ratio: 1440 / 900;
  border-radius: 0.125em;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.feature-card__h {
  font-variation-settings: "wght" 500;
  font-family: Haffer VF, Arial, sans-serif;
  font-size: 1.25em;
}

@media screen and (max-width: 991px) {
  .feature__card {
    width: calc((100% - (2 * var(--gap-sm))) / 2);
  }
}

@media screen and (max-width: 767px) {
  .feature__card {
    width: calc((100% - (2 * var(--gap-sm))) / 2);
  }

  .feature-mockup__screen {
    padding-top: var(--gap-xxs);
    padding-right: var(--gap-xxs);
    padding-bottom: var(--gap-xxs);
    padding-left: var(--gap-xxs);
    border-radius: 0.25em;
    padding: 0.25em;
  }

  .feature-mockup__screen-inner {
    border-radius: 0.125em;
  }

  .feature-mockup__base {
    font-size: 0.4em;
  }

  .feature__grid {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
  }

  .feature__card {
    border-top: 1px solid var(--color-neutral-400);
    width: 100%;
  }

  .feature-card__top {
    padding: var(--gap-l) var(--gap-l) var(--gap-l) var(--gap-xs);
  }

  .feature-card__icon {
    justify-content: center;
    align-items: center;
    width: 0.75em;
    height: 0.75em;
    display: flex;
  }

  .feature-card__bottom {
    grid-template-rows: 0fr;
  }

  .feature-card__bottom-content {
    grid-column-gap: 1.25em;
    grid-row-gap: 1.25em;
    flex-flow: column;
    padding-bottom: 1em;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }

  .feature-card__bottom-p {
    padding-right: var(--gap-xs);
    padding-left: var(--gap-xs);
    min-height: 0;
  }

  .feature-card__h {
    font-size: 1.375em;
  }
}

/* Mockup Hotspot */

.mockup-hotspot {
  cursor: context-menu;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 0;
  height: 0;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
}

.mockup-hotspot.is--1 {
  top: 6.25%;
  left: 80.75%;
}

.mockup-hotspot.is--2 {
  top: 8.5%;
  left: 94.75%;
}

.mockup-hotspot.is--3 {
  top: 38%;
  left: 24%;
}

.mockup-hotspot.is--4 {
  top: 84.5%;
  left: 48.1%;
}

.mockup-hotspot.is--5 {
  top: 22.75%;
  left: 86.5%;
}

.mockup-hotspot__inner {
  z-index: 1;
  background-color: var(--color-purple);
  border-radius: 100em;
  width: 0.5em;
  height: 0.5em;
  position: relative;
}

.mockup-hotspot__circle {
  aspect-ratio: 1;
  cursor: context-menu;
  background-color: color-mix(in srgb, var(--color-purple), transparent 85%);
  border-radius: 100em;
  justify-content: center;
  align-items: center;
  width: 3.375em;
  display: flex;
}

.mockup-hotspot__pulse {
  z-index: 0;
  border-radius: inherit;
  background-color: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  transform: scale(0);
}

.mockup-hotspot__trigger {
  width: 3.375em;
  position: relative;
}

@media screen and (max-width: 767px) {
  .mockup-hotspot {
    display: none;
  }

  .mockup-hotspot__trigger {
    position: static;
  }
}

/* Tooltip */

.tooltip {
  z-index: 50;
  cursor: auto;
  opacity: 0;
  visibility: hidden;
  margin-top: 1.75em;
  position: absolute;
  top: 0;
  transition: all var(--animation-default);
  transform: scale(0.9) rotate(0.001deg);
  pointer-events: none;
}

[data-wf--tooltip-card--variant="dark-text"] {
  color: var(--color-neutral-800);
}

[data-tooltip-trigger]:hover + .tooltip,
[data-tooltip-trigger] + .tooltip:hover {
  opacity: 1;
  visibility: visible;
  transform: scale(1) rotate(0.001deg);
  pointer-events: auto;
}

[data-tooltip-trigger="top-center"] + .tooltip {
  top: unset;
  bottom: 0em;
  margin-top: 0;
  margin-bottom: 1.75em;
}

[data-tooltip-trigger="bottom-left"] + .tooltip {
  margin-right: 10em;
}

@media screen and (max-width: 991px) {
  [data-tooltip-trigger="bottom-left"] + .tooltip {
    margin-right: 27.5em;
  }
}

.tooltip__card {
  padding: 0.625em var(--gap-l) 0.625em 0.625em;
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  background-color: var(--color-neutral-100);
  border-radius: 0.75em;
  width: 40em;
  display: flex;
  box-shadow: 0 4em 10em #00000026;
}

.tooltip__card-visual {
  aspect-ratio: 1440 / 900;
  background-color: var(--color-neutral-300);
  border-radius: 0.375em;
  flex: none;
  width: 20em;
  position: relative;
}

.tooltip__card-text {
  padding-top: var(--gap-l);
  padding-bottom: var(--gap-sm);
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

/* Timestamp */

.timestamp {
  color: var(--color-neutral-200);
  background-color: #ffffff1a;
  border-radius: 0.125em;
  justify-content: center;
  align-items: center;
  width: 2.8em;
  padding: 0.25em 0.375em 0.1875em;
  display: flex;
  position: relative;
  overflow: hidden;
  transition: all var(--animation-default-half);
  transform: translateY(0em) rotate(0.001deg);
}

.timestamp__span {
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: 0.6875em;
  font-weight: 400;
  line-height: 1;
  display: block;
}

@media screen and (max-width: 479px) {
  .timestamp {
    flex: none;
  }
}

.custom-player__marker-click:hover .timestamp {
  background-color: var(--color-electric);
  color: var(--color-dark);
  transform: translateY(-0.125em) rotate(0.001deg);
}





/* ------------------------- COMMUNITY -------------------------------------------------- */

.community-hero {
  z-index: 1;
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  padding-bottom: calc(3 * var(--gap-xxl));
}

.community-hero__map {
  aspect-ratio: 1.5;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 57em;
  margin-bottom: -4.5em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.community-hero__bg {
  z-index: 0;
  color: var(--color-neutral-600);
  flex: none;
  width: 72em;
  display: flex;
  position: absolute;
}

.community-hero__bottom {
  z-index: 2;
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  display: flex;
  position: relative;
}

.community-hero__bottom-start {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-end;
  align-items: flex-start;
  max-width: 22.25em;
  display: flex;
}

.community-hero__bottom-cta {
  margin-top: var(--gap-sm);
  position: relative;
}

.community-hero__sticker {
  color: var(--color-neutral-475);
  width: 6.75em;
  position: absolute;
  bottom: -5.5em;
  right: 0;
}

.community-hero__scribble {
  grid-column-gap: var(--gap-xxs);
  grid-row-gap: var(--gap-xxs);
  color: var(--color-electric);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
  transform: translate(110%, 75%);
}

/* Continent */

.continent-row {
  padding-right: var(--gap-sm);
  justify-content: flex-end;
  align-items: stretch;
  height: 12.75em;
  display: flex;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.continent-row::-webkit-scrollbar {
  display: none;
}

.continent-col {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color-neutral-800);
  border-right-style: solid;
  border-right-width: 1px;
  border-right-color: var(--color-neutral-800);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: var(--color-neutral-800);
  border-left-style: solid;
  border-left-width: 1px;
  border-left-color: var(--color-neutral-800);
  background-color: var(--color-neutral-600);
  margin-right: calc(-1 * var(--gap-sm));
  border-radius: 0.25em;
  flex-flow: row;
  flex: none;
  display: flex;
  position: relative;
  overflow: hidden;
}

.continent-col:nth-of-type(1) {
  z-index: 6;
}

.continent-col:nth-of-type(2) {
  z-index: 5;
}

.continent-col:nth-of-type(3) {
  z-index: 4;
}

.continent-col:nth-of-type(4) {
  z-index: 3;
}

.continent-col:nth-of-type(5) {
  z-index: 2;
}

.continent-col:nth-of-type(6) {
  z-index: 1;
}

.continent-col__start {
  grid-template-columns: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
  transition: grid-template-columns 0.5s var(--cubic-default);
}

.continent-col[data-state="active"] .continent-col__start {
  grid-template-columns: 1fr;
  z-index: 10;
}

.continent-col__start-content {
  padding: var(--gap-sm);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.continent-col__stats {
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.continent-col__faces {
  padding-right: var(--gap-sm);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.continent-col__face {
  aspect-ratio: 1;
  margin-right: calc(-1 * var(--gap-sm));
  width: 4em;
}

.continent-col__start-wrap {
  width: 100000%;
  display: flex;
  overflow: hidden;
}

.continent-col__end {
  padding: var(--gap-sm);
  flex: none;
  justify-content: flex-end;
  align-items: flex-start;
  width: 7.5em;
  display: flex;
  position: relative;
}

.continent-col__map {
  flex: none;
  justify-content: flex-end;
  align-items: flex-start;
  height: 5em;
  display: flex;
  position: relative;
}

.continent-col__img {
  opacity: 0;
  width: auto;
  height: 100%;
  position: absolute;
}

.continent-col__img.is--base {
  z-index: 2;
  opacity: 1;
}

.continent-col__face-inner {
  border: 1px solid var(--color-neutral-600);
  background-color: var(--color-neutral-200);
  border-radius: 100em;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

/* Community Slack */

.community-slack {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-xl);
  color: var(--color-neutral-200);
}

.community-slack__intro {
  text-align: center;
  width: 100%;
  max-width: 42.5em;
  margin-bottom: 6.25em;
  margin-left: auto;
  margin-right: auto;
}

.community-slack__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.community-slack__col {
  flex: 1;
}

.community-slack__visual {
  aspect-ratio: 1.13;
  border: 1px solid var(--color-neutral-550);
  background-color: var(--color-neutral-200);
  border-radius: 100em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding-top: 6.25em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.community-slack__logo {
  z-index: 1;
  width: 10em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.community-slack__info {
  padding-right: var(--gap-sm);
  padding-left: var(--gap-sm);
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  max-width: 30em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.community-slack__list {
  margin-top: var(--gap-l);
  flex-flow: column;
  width: 100%;
  margin-bottom: 5em;
  list-style: none;
  display: flex;
}

.community-slack__li {
  padding-top: var(--gap-l);
  padding-bottom: var(--gap-l);
  border-bottom: 1px solid var(--color-neutral-600);
}

.community-slack__li.is--last {
  border-bottom-style: none;
  padding-bottom: 0;
}

/* Meetup */

.community-meet {
  z-index: 1;
  padding-top: var(--padding-l);
  padding-bottom: var(--padding-l);
  background-color: var(--color-neutral-200);
  position: relative;
}

.community-meet__intro {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  max-width: 72em;
  margin-bottom: -3.5em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.community-meet__us {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
}

.community-meet__us-img {
  z-index: 4;
  aspect-ratio: 1;
  border-radius: 100em;
  flex: none;
  width: 7em;
  margin-left: -0.5em;
  margin-right: -0.5em;
  position: relative;
  overflow: hidden;
}

.community-meet__us-img.is--first {
  z-index: 5;
}

.community-meet__row {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  max-width: 72em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.community-meet__col {
  flex: 1;
  position: relative;
}

.community-meet__info {
  padding-top: var(--padding-s);
  grid-column-gap: var(--padding-s);
  grid-row-gap: var(--padding-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 28em;
  display: flex;
}

.community-meet__info-start {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 25.375em;
  display: flex;
}

.community-meet__list {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.community-meet__item {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.community-meet__item.is--past {
  color: var(--color-neutral-475);
}

.community-meet__item-h {
  margin-top: var(--gap-sm);
  margin-bottom: var(--gap-xxs);
}

.community-meet__img {
  aspect-ratio: 1 / 1.15;
  border-radius: 0.25em;
  width: 28em;
  margin-bottom: -28em;
  position: relative;
  overflow: hidden;
}

.community-meet__img.is--1 {
  z-index: 3;
}

.community-meet__img.is--2 {
  z-index: 2;
  transform: translate(50%) rotate(3deg);
}

.community-meet__img.is--3 {
  z-index: 1;
  transform: translate(95%) rotate(6deg);
}

.community-meet__img-w {
  width: 100%;
  position: relative;
}

/* Breakpoints */

@media screen and (max-width: 991px) {
  .community-hero {
    padding-bottom: var(--gap-xxl);
  }

  .community-hero__map {
    margin-bottom: -2em;
  }

  .community-hero__bottom {
    grid-column-gap: 10em;
    grid-row-gap: 10em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
  }

  .community-hero__bottom-start {
    text-align: center;
    justify-content: flex-start;
    align-items: center;
  }

  .community-hero__bottom-end {
    width: 100%;
  }

  .continent-row {
    padding-right: var(--gap-m);
    padding-left: var(--gap-l);
    grid-column-gap: 0.625em;
    grid-row-gap: 0.625em;
    margin-left: calc(-1 * var(--gap-l));
    width: calc(100% + 2 * var(--gap-l));
    justify-content: flex-start;
    align-items: stretch;
    height: auto;
    overflow: auto;
  }

  .continent-col {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-800);
    height: 12.75em;
    margin-right: 0;
  }

  .continent-col__start {
    grid-template-columns: 1fr;
  }

  .continent-col__start-content {
    padding-bottom: var(--gap-xs);
  }

  .continent-col__stats {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .continent-col__face {
    border-top-color: var(--color-neutral-200);
    border-right-color: var(--color-neutral-200);
    border-bottom-color: var(--color-neutral-200);
    border-left-color: var(--color-neutral-200);
    margin-right: calc(-1 * var(--gap-xxs));
    width: 2em;
  }

  .continent-col__map {
    height: 3.5em;
  }

  .continent-col__img.is--base {
    opacity: 0;
  }

  .community-slack__row {
    grid-column-gap: 4em;
    grid-row-gap: 4em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  .community-slack__col.is--visual {
    order: 9999;
  }

  .community-hero__sticker {
    display: none;
  }

  .community-slack__info {
    text-align: center;
    justify-content: center;
    align-items: center;
    max-width: none;
  }

  .community-slack__list {
    margin-bottom: 2.75em;
  }

  .continent-col__face-inner {
    border-color: var(--color-neutral-200);
  }
}

@media screen and (max-width: 767px) {
  .community-hero__map {
    margin-bottom: 0;
  }

  .community-hero__bg {
    width: 43.75em;
  }

  .continent-row {
    padding-right: var(--gap-m);
    padding-left: var(--gap-m);
    width: calc(100% + 2 * var(--gap-m));
    margin-left: calc(-1 * var(--gap-m));
  }

  .community-slack__visual {
    padding-top: 2.5em;
  }

  .community-slack__logo {
    width: 8em;
  }

  .community-meet__intro {
    margin-bottom: 5em;
  }

  .community-meet__us-img {
    width: 5em;
  }

  .community-meet__row {
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    flex-flow: column;
  }

  .community-meet__col {
    width: 100%;
  }

  .community-meet__info {
    max-width: none;
    padding-top: 0;
  }

  .community-meet__img.is--2 {
    transform: translate(75%) rotate(3deg);
  }

  .community-meet__img.is--3 {
    display: none;
    transform: translate(150%) rotate(6deg);
  }

  .community-meet__img-w {
    height: 32em;
    font-size: 0.5em;
    left: -1.5em;
  }

  .community-hero__scribble {
    width: 9em;
    right: 50%;
    transform: translate(50%, 220%);
  }
}





/* ------------------------- SITEMAP -------------------------------------------------- */

.sitemap {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

.sitemap__img {
  width: 0%;
  height: 0%;
  display: none;
}

.sitemap__url {
  display: none;
}





/* ------------------------- LEGAL -------------------------------------------------- */

.legal__inner {
  padding-top: var(--gap-l);
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--gap-sm);
  padding-right: 14.5em;
  padding-bottom: calc(5 * var(--gap-xxl));
  flex-flow: row;
  justify-content: flex-start;
  align-items: stretch;
  display: flex;
  position: relative;
}

.legal__inner-col {
  width: 100%;
  position: relative;
}

.legal__sidebar {
  top: var(--nav-bar-height);
  width: 100%;
  max-width: 13.75em;
  position: sticky;
}

.legal__sidebar-links {
  margin-bottom: var(--gap-l);
  grid-column-gap: 0.625em;
  grid-row-gap: 0.625em;
  flex-flow: column;
  list-style: none;
  display: flex;
}

.legal__sidebar .w--current {
  color: var(--color-neutral-200) !important;
}

.legal__sidebar .w--current .button-bg {
  background: var(--color-neutral-800);
}

@media screen and (max-width: 991px) {
  .legal__inner {
    padding-right: 0;
  }
}

@media screen and (max-width: 767px) {
  .legal__inner {
    flex-flow: column;
  }
}





/* ------------------------- 404 NOT FOUND -------------------------------------------------- */

.nf-canvas {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0%;
}

.notfound {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  overflow: hidden;
}

.notfound__inner {
  padding-bottom: var(--gap-xxl);
  flex-flow: column;
  justify-content: flex-end;
  align-items: center;
  min-height: 100dvh;
  display: flex;
  position: relative;
}

.noutfound__content {
  z-index: 2;
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 25em;
  display: flex;
  position: relative;
}

.notfound__heading {
  z-index: 5;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.notfound__h {
  font-size: 25em;
  line-height: 0.75;
}

.notfound__bg {
  z-index: 0;
  aspect-ratio: 2;
  opacity: 0.25;
  flex: none;
  width: 120vw;
  position: absolute;
  top: auto;
  bottom: -45%;
}

.nf-overlay {
  z-index: 5;
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0%;
}

.nf-overlay__item {
  border-radius: 0.375em;
  position: absolute;
  overflow: hidden;
}

.nf-overlay__item img {
  border-radius: inherit;
}

.nf-overlay__item.is--1 {
  width: 20em;
}

.nf-overlay__item.is--4 {
  z-index: 2;
  width: 7.5em;
  top: 40%;
  left: 7em;
  transform: rotate(-14deg);
}

.nf-overlay__item.is--2 {
  width: 17.5em;
  bottom: 4.5em;
  right: 1.5em;
  transform: rotate(3deg);
}

.nf-overlay__item.is--3 {
  width: 13.75em;
  top: 6.25em;
  left: 6.25em;
  transform: rotate(3deg);
}

.nf-overlay__item.is--5 {
  width: 16.25em;
  top: 5em;
  right: 5em;
  transform: rotate(5deg);
}

.nf-overlay__item.is--6 {
  width: 15em;
  bottom: 2.5em;
  transform: rotate(2deg);
}

.nf-overlay__item.is--7 {
  z-index: 2;
  width: 9.5em;
  top: 9.5em;
  left: 40%;
  transform: rotate(6deg);
}

.nf-overlay__item.is--8 {
  width: 10em;
  bottom: 1.5em;
  left: 8em;
  transform: rotate(-15deg);
}

.nf-overlay__item.is--9 {
  aspect-ratio: 1;
  justify-content: center;
  align-items: flex-end;
  width: 9.5em;
  display: flex;
  right: 15%;
  overflow: visible;
  transform: translateY(50%) rotate(-5deg);
}

.nf-overlay__item.is--10 {
  width: 16em;
  top: 50%;
  left: 12%;
  transform: rotate(6.5deg);
}

.nf-overlay__item.is--11 {
  width: 13em;
  top: 3.75em;
  left: 50%;
  transform: rotate(-5deg);
}

.nf-canvas__tags {
  display: none;
  position: absolute;
  left: -200vw;
}

.nf-overlay__tags {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  pointer-events: auto;
  flex-flow: wrap;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  width: 14em;
  display: flex;
  position: absolute;
  transform: translateY(50%);
}

@media screen and (max-width: 991px) {
  .notfound__bg {
    width: 200vw;
    bottom: -10%;
  }
}

@media screen and (max-width: 767px) {
  .nf-overlay {
    font-size: 0.5em;
  }

  .nf-overlay__item.is--2 {
    bottom: 25%;
  }

  .nf-overlay__item.is--7 {
    top: 25%;
    left: 20%;
  }

  .nf-overlay__item.is--9 {
    top: 30%;
  }

  .nf-overlay__item.is--10 {
    top: 60%;
  }

  .nf-overlay__item.is--11 {
    top: 15%;
    left: 40%;
  }

  .nf-canvas__tags {
    font-size: 2em;
  }

  .nf-overlay__tags {
    font-size: 1.75em;
  }

  .notfound__h {
    font-size: 10em;
  }
}





/* ------------------------- UPDATES -------------------------------------------------- */

.updates-hero {
  padding-bottom: var(--gap-l);
  position: relative;
  overflow: hidden;
}

.updates-hero__content {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.updates-hero__title-row {
  grid-column-gap: var(--gap-l);
  grid-row-gap: var(--gap-l);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  max-width: 60em;
  display: flex;
  position: relative;
}

.updates-card {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 0.75em;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.updates-card[data-card-theme="light"] {
  color: var(--color-dark);
  background-color: var(--color-light);
}

.updates-card__before {
  padding-top: 110%;
}

.updates-card__bg {
  width: 100%;
  height: 100%;
  position: absolute;
}

.updates-card__content {
  flex-flow: column;
  width: 100%;
  height: 100%;
  padding: 2em;
  display: flex;
  position: absolute;
}

.updates-card__tags {
  justify-content: center;
  display: flex;
}

[data-gsap-slider-init="updates"] {
  --slider-status: on;
  --slider-spv: 3;
  --slider-gap: var(--gap-sm);
}

@media screen and (max-width: 991px) {
  [data-gsap-slider-init="updates"] {
    --slider-status: on;
    --slider-spv: 2.25;
    --slider-gap: var(--gap-sm);
  }
}

@media screen and (max-width: 767px) {
  [data-gsap-slider-init] {
    --slider-status: on;
    --slider-spv: 1;
    --slider-gap: 0.625em;
  }
}

.updates-card__center-content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  flex: 1;
  justify-content: center;
  width: 100%;
  padding-bottom: 5.5em;
  display: flex;
}

.updates-card__h {
  letter-spacing: -0.03em;
  font-size: 2em;
}

.updates-hero__text-row {
  padding-top: var(--padding-m);
  max-width: 28em;
  padding-bottom: 3.75em;
  position: relative;
}

.updates-hero__circle-bg {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: absolute;
  top: 2.5em;
}

.updates-hero__bg {
  pointer-events: none;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.updates-hero__line {
  width: var(--stroke-weight);
  background-color: var(--color-neutral-400);
  height: 100%;
  position: relative;
}

.updates-hero__socials-row {
  padding-top: var(--padding-m);
}

@media screen and (max-width: 767px) {
  .updates-hero__circle-bg {
    top: 1.5em;
  }
}

/* Extras */

.section__tags {
  left: 0;
  top: var(--gap-l);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  right: 0;
}

/* Resource Cards */
.resource-card__a {
  border-radius: inherit;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 991px) {
  .resource-card__start {
    padding-top: 1.5em;
    padding-bottom: 1.5em;
    padding-left: 1.5em;
  }

  .resource-card__end {
    max-width: 15em;
  }
}

@media screen and (max-width: 767px) {
  .resource-card__inner {
    flex-flow: column;
  }

  .resource-card__start {
    padding: 0.9375em;
  }

  .resource-card__end {
    max-width: 100%;
  }

  .resource-card__start-h {
    margin-top: var(--gap-sm);
  }

  .resource-card__start-inner {
    margin-top: var(--gap-xs);
    grid-column-gap: var(--gap-s);
    grid-row-gap: var(--gap-s);
  }
}





/* ------------------------- FAQ -------------------------------------------------- */

.faq__row {
  grid-column-gap: var(--btn-height);
  grid-row-gap: var(--btn-height);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.faq__section {
  grid-column-gap: var(--padding-s);
  grid-row-gap: var(--padding-s);
  flex-flow: column;
  display: flex;
}

.faq-overview {
  padding-bottom: var(--padding-m);
}

.faq__title-row {
  grid-column-gap: var(--gap-s);
  grid-row-gap: var(--gap-s);
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.faq__title-p {
  width: 100%;
  max-width: 28em;
  margin-left: auto;
  margin-right: auto;
}

.faq__cta {
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 991px) {
  .faq__title-scribble {
    right: -3.5em;
  }
}

@media screen and (max-width: 767px) {
  .faq__title-scribble {
    display: none;
  }

  .faq__title-scribble-arrow {
    order: -9999;
  }
}





/* ------------------------- MOBILE LANDSCAPE ONLY -------------------------------------------------- */

@media screen and (max-width: 767px) {
  .svg-app__heading {
    color: var(--color-neutral-800);
    padding-bottom: 3em;
  }

  .section__intro-scribble {
    margin-bottom: -2.5em;
    position: relative;
    bottom: auto;
    right: auto;
  }

  .sm--hide {
    display: none;
  }
}




/* ------------------------- STYLEGUIDES -------------------------------------------------- */

.sg-container {
  padding-top: var(--padding-m);
  padding-bottom: var(--padding-m);
}

.sg-wrapper {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  flex-flow: column;
  display: flex;
}

.sg-row {
  grid-column-gap: 2em;
  grid-row-gap: 2em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.sg-col {
  grid-column-gap: 0.5em;
  grid-row-gap: 0.5em;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--color-neutral-400);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: calc(50% - 1em);
  padding-top: 1em;
  display: flex;
}

.sg-col-4 {
  flex-basis: calc((100% - 6em) / 4);
}

.sg-header {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 40em;
  display: flex;
  position: relative;
  overflow: hidden;
}

.sg-header__row {
  grid-column-gap: 1.875em;
  grid-row-gap: 1.875em;
  justify-content: center;
  align-items: center;
  display: flex;
}

.sg-header__bg {
  z-index: 0;
  opacity: 0.1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
}

.sg-item__row {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.sg-item__dark-bg {
  background-color: var(--color-neutral-800);
  color: var(--color-neutral-200);
  border-radius: 0.25em;
  justify-content: center;
  align-items: center;
  padding: 2em 1em;
  display: flex;
}

.sg-item__dark-bg.is--full {
  width: 100%;
}

@media screen and (max-width: 991px) {
  .sg-col {
    max-width: 100%;
  }

  .sg-col.is--first {
    display: none;
  }
}





/* ------------------------- STACKING CARDS -------------------------------------------------- */
.stacking-cards__collection {
  width: 100%;
}

.stacking-cards__list {
  flex-flow: column;
  display: flex;
}

.stacking-cards__item {
  color: #fff;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  margin-top: -1em;
  padding-top: 5em;
  padding-bottom: 5em;
  display: flex;
  position: relative;
}

.stacking-cards__item.is--sensorem {
  //background-color: #263848;
  background: var(--color-dc-green);
}

.stacking-cards__item.is--auricmining {
  //background-color: #F6C602;
  background: var(--color-dc-purple);
}

.stacking-cards__item.is--highburyhomes {
  //background-color: #414F34;
  background: var(--color-dc-pink);
}

.stacking-cards__item.is--laketreeby {
  //background-color: #016B89;
  background: var(--color-dc-yellow);
}

.stacking-cards__item.is--privateproperties {
  //background-color: #CC7C37;
  background: var(--color-dc-blue);
}

.stacking-cards__item-h {
  text-align: center;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: PP Neue Corp Tight, Arial, sans-serif;
  font-size: 8vw;
  font-weight: 700;
  line-height: .8;
}

.stacking-cards__item-h span:last-child {
  font-size: 50%;
  display: block;
}

.stacking-card__heading-faded {
  opacity: .5;
}

.stacking-cards__item-img {
  aspect-ratio: 579/761;
  border-radius: .75em;
  width: 30vw;
  margin-top: -.5vw;
}

.stacking-cards__item-top {
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: absolute;
  top: 2.5em;
  left: 2.5em;
  right: 2.5em;
}

.stacking-card__top-span {
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
}





/* ------------------------- SERVICE GRID -------------------------------------------------- */


.services-grid {
  padding-top: var(--padding-m);
}


@media screen and (max-width: 767px) {
  .services-grid {
    padding-top: 100px;
  }
}

@media screen and (max-width: 460px) {
  .services-grid .container {
    padding-inline: 28px;
  }
}

.services-grid__intro {
  padding-bottom: var(--padding-m);
  text-align: center;
  width: 100%;
  max-width: 59em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 3;
}

.services-grid__title strong {
  font-weight: inherit;
  color: var(--color-electric);
}

[data-theme-section="light"] .services-grid__title strong {
  color: var(--color-purple);
}

[data-theme-section="light"] .services-grid__main-item {
  border-color: var(--color-neutral-300);
}

[data-theme-section="light"] .services-grid__intro-bg {
  background-color: var(--color-neutral-300);
}

.services-grid__main {
  grid-column-gap: var(--gap-sm);
  grid-row-gap: var(--padding-s);
  flex-flow: wrap;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: relative;
}

.services-grid__main:before {
  content: "";
  left: calc(50% - 50vw);
  top: calc(var(--padding-m) * -1);
  position: absolute;
  height: calc(100% + var(--padding-m) * 2);
  width: 100vw;
  background: #F8F7F5;
}


.services-grid__main-item {
  padding: var(--gap-l) var(--gap-m);
  min-width: calc(25% - var(--gap-sm) / 1);
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  position: relative;
  border-radius: 1em;
}

.services-grid__main-item img {
  max-width: 86px;
  margin-bottom: 7em
}

.services-grid__item-nr {
  flex: none;
  width: 7.25em;
}

.services-grid__item-col {
  grid-column-gap: var(--gap-sm);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 24.5em;
  display: flex;
  gap: 12px;
}

.services-grid__intro-bg {
  z-index: -1;
  width: var(--stroke-weight);
  background-color: var(--color-neutral-600);
  height: 100vh;
  position: absolute;
  bottom: 0;
  left: 50%;
}

@media screen and (max-width: 991px) {
  .info__small-col {
    max-width: 18em;
  }

  .info__li {
    flex-flow: column;
  }

  .services-grid__item-nr {
    width: 3.5em;
  }
}

@media screen and (max-width: 767px) {
  .info {
    position: relative;
  }

  .info__wrap {
    grid-column-gap: 10.5em;
    grid-row-gap: 10.5em;
    flex-flow: column;
  }

  .info__graphic {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .info__list {
    margin-top: calc(2 * var(--gap-xxl));
  }

  .info__scribble {
    flex-flow: row;
    justify-content: flex-start;
    align-items: flex-start;
    top: -3.5em;
    left: 5%;
  }

  .info__small-col {
    max-width: none;
  }

  .info__title {
    text-align: center;
  }

  .services-grid__main {
    grid-row-gap: var(--gap-s);
  }

  .services-grid__main-item {
    width: 100%;
    min-width: 100%;
  }

  .services-grid__item-nr {
    top: var(--gap-l);
    justify-content: flex-end;
    align-items: flex-start;
    display: flex;
    position: absolute;
    right: 0;
  }
  
  .services-grid__item-col {
    max-width: 30em;
    padding-left: 60px;
  }
  
  .services-grid__item-col img {
    position: absolute;
    left: 20px;
    width: 40px;
    height: unset;
    margin-bottom: 20px;
  }
  
  .services-grid__item-col .p-l {
    font-size: 1.6em
  }
  
  .services-grid__item-col .p-m {
    font-size: 1.1em
  }
  
  
}





/* ------------------------- TESTIMONIALS SECTION -------------------------------------------------- */

.testimonials-section {
  padding-block: var(--padding-m);
  margin-top: var(--padding-m);
  position: relative;
  z-index: 3;
}

.testimonial-lines {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-lines__controls {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 33.3333%;
  display: flex;
}

.testimonial-lines__main {
  grid-column-gap: 5em;
  grid-row-gap: 5em;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.testimonial-lines__button {
  background-color: #0000;
  border: 1px solid #0003;
  border-radius: .25em;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
}

.testimonial-lines__arrow {
  width: .75em;
}

.testimonial-lines__main-details {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  width: 100%;
}

.testimonial-lines__count {
  width: 1ch;
  display: inline-block;
}

.testimonial-lines__p {
  margin-bottom: 0;
  font-size: 1.25em;
  line-height: 1.2;
}

.testimonial-lines__p.is--faded {
  opacity: .5;
}

.testimonial-lines__collection {
  width: 100%;
}

.testimonial-lines__list {
  width: 100%;
  display: grid;
  position: relative;
}

.testimonial-lines__item {
  grid-column-gap: 4em;
  grid-row-gap: 4em;
  opacity: 0;
  visibility: hidden;
  flex-flow: column;
  grid-area: 1 / 1;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
  position: relative;
}

.testimonial-lines__item.is--active {
  opacity: 100;
  visibility: visible;
}

.testimonial-lines__h {
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 2.5em;
  font-weight: 500;
  line-height: 1;
}

.text-line-mask{
  padding-bottom: 0.2em;
  margin-bottom: -0.2em;
}

.testimonial-lines__item-details {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.testimonial-lines__item-visual {
  aspect-ratio: 1;
  border-radius: 100em;
  width: 5em;
  overflow: hidden;
}

.testimonial-lines__item-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .testimonial-lines {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
  }

  .testimonial-lines__controls {
    order: unset;
    width: 100%;
  }
  
  .testimonial-lines__controls button {
    display: none;
  }

  .testimonial-lines__main {
    grid-column-gap: 3em;
    grid-row-gap: 3em;
  }

  .testimonial-lines__p {
    font-size: 1em;
  }

  .testimonial-lines__item {
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }

  .testimonial-lines__h {
    font-size: 2em;
  }

  .testimonial-lines__item-visual {
    width: 3.5em;
  }
}

.testimonials-section .trustedby-wrap {
  padding-top: var(--padding-m);  
}

.testimonials-section .trustedby-wrap svg {
  filter: brightness(0) invert(1); 
}

.shapes-section {
  padding-block: var(--padding-m) 0;
  background: none;
  z-index: 100;
}

.shapes-section .shapes-cta-card {
  padding-block: var(--padding-m);
  background: var(--color-dc-yellow);
  color: var(--color-neutral-900);
}




// PARALAX FOOTER //

.demo-p {
  max-width: 19em;
  margin-bottom: 0;
  font-size: 1.3125em;
  font-weight: 600;
}

.demo-header {
  grid-column-gap: 7.5em;
  grid-row-gap: 7.5em;
  letter-spacing: -.02em;
  border-bottom: 1px solid #201d1d26;
  flex-flow: column;
  justify-content: space-between;
  width: 100%;
  min-height: 100svh;
  padding: 2.5em;
  font-weight: 600;
  display: flex;
  position: relative;
}

.demo-header__nav-row {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.demo-header__title-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  padding-left: calc(33.3333% + .833333em);
  display: flex;
}

.demo-header__info-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  display: flex;
}

.demo-header__col {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  justify-content: space-between;
  width: calc(33.3333% - 1.66667em);
  display: flex;
}

.demo-header__h1 {
  letter-spacing: -.03em;
  max-width: 11em;
  font-size: 4em;
  font-weight: 600;
  line-height: .95;
}

.demo-header__img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}

.demo-header__logo {
  width: 15em;
}

.demo-header__nav-a {
  margin-bottom: 0;
  font-size: 1.3125em;
  font-weight: 600;
}

.footer-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-dc-cream);
  z-index: 1000;
}

.demo-footer {
  grid-column-gap: 4em;
  grid-row-gap: 7.5em;
  letter-spacing: -.02em;
  flex-flow: column;
  justify-content: space-between;
  min-height: 100svh;
  min-height: 650px;
  padding: 2.5em;
  margin-inline: auto;
  font-weight: 600;
  display: flex;
  position: relative;
  max-width: 100%;
  padding: 0 var(--container-padding);
}
@media screen and (min-width: 992px) {
  .demo-footer {
    max-width: var(--size-container);
    padding: 0 var(--container-padding);
    padding-top: 200px;
  }
}

.demo-footer__links-row {
  grid-column-gap: 2.5em;
  grid-row-gap: 2.5em;
  display: flex;
}

.demo-footer__logo-row {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  flex-flow: column;
  display: flex;
}

.demo-footer__logo-row svg {
  max-width: 100%;
  height: auto !important;
}

.demo-footer__col {
  grid-column-gap: 3em;
  grid-row-gap: 3em;
  flex-flow: column;
  width: calc(33.3333% - 1.66667em);
  display: flex;
  
  width: 100%;
}

.demo-footer__links-row .demo-footer__col.footer-nav {
  display: none; 
}

.demo-footer__logo-row {
  order: -1;
  margin-top: auto;
  margin-bottom: -80px;
}
@media screen and (min-width: 992px) {
  .demo-footer__logo-row {
    margin-bottom: -80px;
  }
}

.demo-footer__links {
  grid-column-gap: .25em;
  grid-row-gap: .25em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
  
  flex-flow: row;
  justify-content: space-between;
}

.demo-footer__links p {
  color: inherit;
  font-size: 1.3em;
  line-height: 1;
  text-decoration: none;
}

.demo-footer__a {
  color: inherit;
  font-size: 2.75em;
  line-height: 1;
  text-decoration: none;
}

.footer-wrap__dark {
  opacity: 0 !important;
  pointer-events: none;
  background-color: #201d1d;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

@media screen and (max-width: 991px) {
  .demo-header__title-row {
    padding-left: 0;
  }

  .demo-header__info-row {
    flex-flow: column;
  }

  .demo-header__col {
    width: 100%;
  }

  .demo-header__logo {
    width: 50vw;
  }

  .demo-footer__links-row {
    flex-flow: column;
  }

  .demo-footer__logo-row {
    grid-column-gap: 1.5em;
    grid-row-gap: 1.5em;
  }

  .demo-footer__col {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .demo-eyebrow {
    font-size: 1em;
  }

  .demo-p {
    max-width: 100%;
    font-size: 1.25em;
  }

  .demo-header {
    grid-column-gap: 5em;
    grid-row-gap: 5em;
    padding-left: 1em;
    padding-right: 1em;
  }

  .demo-footer {
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 120px;
  }

  .demo-eyebrow {
    font-size: 1em;
  }

  .demo-footer__col {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .demo-footer__a {
    font-size: 1.75em;
  }

  .demo-header__info-row {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
  }

  .demo-header__h1 {
    font-size: 3em;
  }

  .demo-header__nav-a {
    max-width: 100%;
    font-size: 1em;
  }
}

.demo-footer__col.footer-nav {
  margin-left: auto;
  width: unset;
}

.footer-nav .demo-footer__links {
  flex-flow: row;
  grid-column-gap: 1em;
}

@media screen and (max-width: 767px) {
  
  .demo-footer__links {
    align-items: center;
  }
  
  .demo-footer__col.footer-nav {
    margin-inline: auto;
  }
}

.demo-footer__aoc {
  background: var(--color-neutral-900);
  padding: 22px;
  margin-inline: auto;
  border-radius: 25em;
  text-align: center;
  font-size: 0.9em;
  width: 100%;
  margin-bottom: 80px;
}

.demo-footer__aoctext {
  margin-inline: auto;
  color: white;
}

.demo-footer__aoc .demo-footer__aoctext p strong {
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
  .demo-footer__aoc {
    font-size: 1.3em;
  }
]
  
/* ------------------------- Underline Link [https://osmo.supply/] -------------------------  */

[data-underline-link] {
  text-decoration: none;
  position: relative;
}

[data-underline-link]::before {
  content: "";
  position: absolute;
  bottom: -0.0625em;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: currentColor;
  transition: transform 0.735s cubic-bezier(0.625, 0.05, 0, 1);
  transform-origin: right;
  transform: scaleX(0) rotate(0.001deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-hover]:hover [data-underline-link]::before,
  [data-underline-link]:hover::before {
    transform-origin: left;
    transform: scaleX(1) rotate(0.001deg);
  }  
}