.flex,
[class^=flex\@], [class*=" flex@"],
[class^=inline-flex\@], [class*=" inline-flex@"] {
  --gap: 0px;
  --gap-x: var(--gap);
  --gap-y: var(--gap);
  gap: var(--gap-y) var(--gap-x);
}
 .flex > *,
[class^=flex\@] > *, [class*=" flex@"] > *,
[class^=inline-flex\@] > *, [class*=" inline-flex@"] > * {
  --sub-gap: 0px;
  --sub-gap-x: var(--sub-gap);
  --sub-gap-y: var(--sub-gap);
}

/* #region (Safari < 14.1 fallback) */
@media not all and (min-resolution: 0.001dpcm) {
  @supports not (translate: none) {
     .flex[class*=gap-] {
      gap: 0px;
      margin-bottom: calc(-1 * var(--gap-y));
      margin-left: calc(-1 * var(--gap-x));
    }
     .flex[class*=gap-] > * {
      margin-bottom: var(--sub-gap-y);
    }
    .flex[class*=gap-] > * {
      margin-left: var(--sub-gap-x);
    }
  }
}
/* #endregion */

@media (min-width: 32rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 48rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 64rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 80rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
@media (min-width: 90rem) {
  @media not all and (min-resolution: 0.001dpcm) {
  }
}
*, *::after, *::before {
  box-sizing: inherit;
}

* {
  font: inherit;
}

html, body, div, object,
h1, p,
a, img, s,
small, var,
b, i, form,
figure, footer {
  margin: 0;
  padding: 0;
  border: 0;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--color-bg, white);
}

 figure,
footer {
  display: block;
}

button, input {
  margin: 0;
}

.btn, .link, .reset {
  background-color: transparent;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  line-height: inherit;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input::-ms-clear {
  display: none;
}

img {
  max-width: 100%;
}

[data-theme] {
  background-color: var(--color-bg, hsl(0, 0%, 100%));
  color: var(--color-contrast-high, hsl(210, 7%, 21%));
}

:root {
  --space-unit: 1rem;
}

:root, * {
  --space-xxxxs: calc(0.125 * var(--space-unit));
  --space-xxxs: calc(0.25 * var(--space-unit));
  --space-xxs: calc(0.375 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(3.25 * var(--space-unit));
  --space-xxl: calc(5.25 * var(--space-unit));
  --space-xxxl: calc(8.5 * var(--space-unit));
  --space-xxxxl: calc(13.75 * var(--space-unit));
  --component-padding: var(--space-md);
}

:root {
  --radius-sm: calc(var(--radius, 0.375em)/2);
  --radius-md: var(--radius, 0.375em);
  --radius-lg: calc(var(--radius, 0.375em)*2);
  --shadow-ring: 0 0 0 1px hsla(0, 0%, 0%, 0.05);
  --shadow-xs: 0 0 0 1px hsla(0, 0%, 0%, 0.02),
                0 1px 3px -1px hsla(0, 0%, 0%, 0.2);
  --shadow-sm: 0 0.3px 0.4px hsla(0, 0%, 0%, 0.02),
                0 0.9px 1.5px hsla(0, 0%, 0%, 0.045),
                0 3.5px 6px hsla(0, 0%, 0%, 0.09);
  --shadow-md: 0 0.9px 1.25px hsla(0, 0%, 0%, 0.025),
                0 3px 5px hsla(0, 0%, 0%, 0.05),
                0 12px 20px hsla(0, 0%, 0%, 0.09);
  --shadow-lg: 0 1.2px 1.9px -1px hsla(0, 0%, 0%, 0.01),
                0 3px 5px -1px hsla(0, 0%, 0%, 0.015),
                0 8px 15px -1px hsla(0, 0%, 0%, 0.05),
                0 28px 40px -1px hsla(0, 0%, 0%, 0.1);
  --shadow-xl: 0 1.5px 2.1px -6px hsla(0, 0%, 0%, 0.009),
                0 3.6px 5.2px -6px hsla(0, 0%, 0%, 0.0115),
                0 7.3px 10.6px -6px hsla(0, 0%, 0%, 0.0125),
                0 16.2px 21.9px -6px hsla(0, 0%, 0%, 0.025),
                0 46px 60px -6px hsla(0, 0%, 0%, 0.15);
  --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
  --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

:root {
  --heading-line-height: 1.2;
  --body-line-height: 1.4;
}

body {
  font-size: var(--text-base-size, 1rem);
  font-family: var(--font-primary, sans-serif);
  color: var(--color-contrast-high, hsl(210, 7%, 21%));
  font-weight: var(--body-font-weight, normal);
}

h1 {
  color: var(--color-contrast-higher, hsl(204, 28%, 7%));
  line-height: var(--heading-line-height, 1.2);
  font-weight: var(--heading-font-weight, 700);
}

h1 {
  font-size: var(--text-xxl, 2rem);
}

small {
  font-size: var(--text-sm, 0.75rem);
}

a, .link {
  color: var(--color-primary, hsl(250, 84%, 54%));
  text-decoration: underline;
}

s {
  text-decoration: line-through;
}

.text-component h1 {
  line-height: calc(var(--heading-line-height) * var(--line-height-multiplier, 1));
  margin-bottom: calc(var(--space-unit) * 0.3125 * var(--text-space-y-multiplier, 1));
}
.text-component p {
  line-height: calc(var(--body-line-height) * var(--line-height-multiplier, 1));
}
 .text-component p {
  margin-bottom: calc(var(--space-unit) * 0.9375 * var(--text-space-y-multiplier, 1));
}
.text-component img {
  display: block;
  margin: 0 auto;
}
.text-component > *:first-child {
  margin-top: 0;
}
.text-component > *:last-child {
  margin-bottom: 0;
}
:root {
  --icon-xxxs: 8px;
  --icon-xxs: 12px;
  --icon-xs: 16px;
  --icon-sm: 24px;
  --icon-md: 32px;
  --icon-lg: 48px;
  --icon-xl: 64px;
  --icon-xxl: 96px;
  --icon-xxxl: 128px;
}

@keyframes icon-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: var(--btn-font-size, 1em);
  padding-top: var(--btn-padding-y, 0.5em);
  padding-bottom: var(--btn-padding-y, 0.5em);
  padding-left: var(--btn-padding-x, 0.75em);
  padding-right: var(--btn-padding-x, 0.75em);
  border-radius: var(--btn-radius, 0.25em);
}

.btn--sm {
  font-size: var(--btn-font-size-sm, 0.8em);
}

:root {
  --z-index-header: 3;
  --z-index-popover: 5;
  --z-index-fixed-element: 10;
  --z-index-overlay: 15;
}

:root {
  --display: block;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-grow {
  flex-grow: 1;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

[class^=aspect-ratio], [class*=" aspect-ratio"] {
  --aspect-ratio: calc(16/9);
  position: relative;
  height: 0;
  padding-bottom: calc(100% / (var(--aspect-ratio)));
}
[class^=aspect-ratio] > *, [class*=" aspect-ratio"] > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
[class^=aspect-ratio] > *:not(iframe), [class*=" aspect-ratio"] > *:not(iframe) {
  -o-object-fit: cover;
     object-fit: cover;
}

.hide {
  display: none;
}

.margin-top-md {
  margin-top: var(--space-md);
}

.margin-bottom-xs {
  margin-bottom: var(--space-xs);
}

.margin-bottom-md {
  margin-bottom: var(--space-md);
}

.padding-xl {
  padding: var(--space-xl);
}

.padding-top-md {
  padding-top: var(--space-md);
}

.padding-top-xxl {
  padding-top: var(--space-xxl);
}

.text-xs {
  font-size: var(--text-xs, 0.6875rem);
}

.text-sm {
  font-size: var(--text-sm, 0.75rem);
}

[class^=color-], [class*=" color-"] {
  --color-o: 1;
}

.color-contrast-medium {
  color: hsla(var(--color-contrast-medium-h), var(--color-contrast-medium-s), var(--color-contrast-medium-l), var(--color-o, 1));
}

[class^=color-gradient], [class*=" color-gradient"] {
  color: transparent !important;
  -webkit-background-clip: text;
          background-clip: text;
  opacity: var(--color-o, 1);
}

.min-height-100vh {
  min-height: 100vh;
}

:root {
  --max-width-xxxxxs: 17.5rem;
  --max-width-xxxxs: 20rem;
  --max-width-xxxs: 26rem;
  --max-width-xxs: 32rem;
  --max-width-xs: 38rem;
  --max-width-sm: 48rem;
  --max-width-md: 64rem;
  --max-width-lg: 80rem;
  --max-width-xl: 90rem;
  --max-width-xxl: 100rem;
  --max-width-xxxl: 120rem;
  --max-width-xxxxl: 150rem;
}

.max-width-xxs {
  max-width: var(--max-width-xxs);
}

[class^=max-width-adaptive], [class*=" max-width-adaptive"] {
  max-width: 32rem;
}
:where(.inner-glow, .inner-glow-top)::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
}

[class^=border-], [class*=" border-"] {
  --border-o: 1;
  --border-width: 1px;
  --border-style: solid;
}

 [class^=bg-], [class*=" bg-"] {
  --bg-o: 1;
}

[class^=flip], [class*=" flip"],
[class^=-rotate], [class*=" -rotate"],
[class^=rotate], [class*=" rotate"],
[class^=-translate], [class*=" -translate"],
[class^=translate], [class*=" translate"],
[class^=-scale], [class*=" -scale"],
[class^=scale], [class*=" scale"],
[class^=-skew], [class*=" -skew"] [class^=skew],
[class*=" skew"] {
  --translate: 0;
  --rotate: 0;
  --skew: 0;
  --scale: 1;
  transform: translate3d(var(--translate-x, var(--translate)), var(--translate-y, var(--translate)), var(--translate-z, 0)) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) rotateZ(var(--rotate-z, var(--rotate))) skewX(var(--skew-x, var(--skew))) skewY(var(--skew-y, 0)) scaleX(var(--scale-x, var(--scale))) scaleY(var(--scale-y, var(--scale)));
}

.visible {
  visibility: visible;
}
@media (min-width: 64rem) {
  .flex-row\@md {
    flex-direction: row;
  }
  .width-50\%\@md {
    width: 50%;
  }
}
:root, [data-theme=default] {
  --color-primary-darker: hsl(0, 0%, 0%);
  --color-primary-darker-h: 0;
  --color-primary-darker-s: 0%;
  --color-primary-darker-l: 0%;
  --color-primary-dark: hsl(0, 0%, 5%);
  --color-primary-dark-h: 0;
  --color-primary-dark-s: 0%;
  --color-primary-dark-l: 5%;
  --color-primary: hsl(0, 0%, 9%);
  --color-primary-h: 0;
  --color-primary-s: 0%;
  --color-primary-l: 9%;
  --color-primary-light: hsl(0, 0%, 15%);
  --color-primary-light-h: 0;
  --color-primary-light-s: 0%;
  --color-primary-light-l: 15%;
  --color-primary-lighter: hsl(0, 0%, 21%);
  --color-primary-lighter-h: 0;
  --color-primary-lighter-s: 0%;
  --color-primary-lighter-l: 21%;
  --color-accent-darker: hsl(34, 100%, 59%);
  --color-accent-darker-h: 34;
  --color-accent-darker-s: 100%;
  --color-accent-darker-l: 59%;
  --color-accent-dark: hsl(34, 100%, 65%);
  --color-accent-dark-h: 34;
  --color-accent-dark-s: 100%;
  --color-accent-dark-l: 65%;
  --color-accent: hsl(34, 100%, 71%);
  --color-accent-h: 34;
  --color-accent-s: 100%;
  --color-accent-l: 71%;
  --color-accent-light: hsl(34, 100%, 77%);
  --color-accent-light-h: 34;
  --color-accent-light-s: 100%;
  --color-accent-light-l: 77%;
  --color-accent-lighter: hsl(30, 100%, 110%);
  --color-accent-lighter-h: 30;
  --color-accent-lighter-s: 100%;
  --color-accent-lighter-l: 110%;
  --color-black: hsl(0, 0%, 9%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 9%;
  --color-white: hsl(180, 20%, 97%);
  --color-white-h: 180;
  --color-white-s: 20%;
  --color-white-l: 97%;
  --color-warning-darker: hsl(9, 100%, 23%);
  --color-warning-darker-h: 9;
  --color-warning-darker-s: 100%;
  --color-warning-darker-l: 23%;
  --color-warning-dark: hsl(9, 100%, 29%);
  --color-warning-dark-h: 9;
  --color-warning-dark-s: 100%;
  --color-warning-dark-l: 29%;
  --color-warning: hsl(9, 100%, 35%);
  --color-warning-h: 9;
  --color-warning-s: 100%;
  --color-warning-l: 35%;
  --color-warning-light: hsl(9, 100%, 41%);
  --color-warning-light-h: 9;
  --color-warning-light-s: 100%;
  --color-warning-light-l: 41%;
  --color-warning-lighter: hsl(9, 100%, 47%);
  --color-warning-lighter-h: 9;
  --color-warning-lighter-s: 100%;
  --color-warning-lighter-l: 47%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(9, 100%, 23%);
  --color-error-darker-h: 9;
  --color-error-darker-s: 100%;
  --color-error-darker-l: 23%;
  --color-error-dark: hsl(9, 100%, 29%);
  --color-error-dark-h: 9;
  --color-error-dark-s: 100%;
  --color-error-dark-l: 29%;
  --color-error: hsl(9, 100%, 35%);
  --color-error-h: 9;
  --color-error-s: 100%;
  --color-error-l: 35%;
  --color-error-light: hsl(9, 100%, 41%);
  --color-error-light-h: 9;
  --color-error-light-s: 100%;
  --color-error-light-l: 41%;
  --color-error-lighter: hsl(9, 100%, 47%);
  --color-error-lighter-h: 9;
  --color-error-lighter-s: 100%;
  --color-error-lighter-l: 47%;
  --color-bg-darker: hsl(180, 6%, 88%);
  --color-bg-darker-h: 180;
  --color-bg-darker-s: 6%;
  --color-bg-darker-l: 88%;
  --color-bg-dark: hsl(180, 7%, 92%);
  --color-bg-dark-h: 180;
  --color-bg-dark-s: 7%;
  --color-bg-dark-l: 92%;
  --color-bg: hsl(180, 40%, 98%);
  --color-bg-h: 180;
  --color-bg-s: 40%;
  --color-bg-l: 98%;
  --color-bg-light: hsl(180, 7%, 100%);
  --color-bg-light-h: 180;
  --color-bg-light-s: 7%;
  --color-bg-light-l: 100%;
  --color-bg-lighter: hsl(180, 6%, 100%);
  --color-bg-lighter-h: 180;
  --color-bg-lighter-s: 6%;
  --color-bg-lighter-l: 100%;
  --color-contrast-lower: hsl(180, 3%, 83%);
  --color-contrast-lower-h: 180;
  --color-contrast-lower-s: 3%;
  --color-contrast-lower-l: 83%;
  --color-contrast-low: hsl(180, 1%, 64%);
  --color-contrast-low-h: 180;
  --color-contrast-low-s: 1%;
  --color-contrast-low-l: 64%;
  --color-contrast-medium: hsl(180, 0%, 46%);
  --color-contrast-medium-h: 180;
  --color-contrast-medium-s: 0%;
  --color-contrast-medium-l: 46%;
  --color-contrast-high: hsl(0, 0%, 22%);
  --color-contrast-high-h: 0;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 22%;
  --color-contrast-higher: hsl(0, 0%, 9%);
  --color-contrast-higher-h: 0;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 9%;
}

[data-theme=dark] {
  --color-primary-darker: hsl(0, 0%, 0%);
  --color-primary-darker-h: 0;
  --color-primary-darker-s: 0%;
  --color-primary-darker-l: 0%;
  --color-primary-dark: hsl(0, 0%, 5%);
  --color-primary-dark-h: 0;
  --color-primary-dark-s: 0%;
  --color-primary-dark-l: 5%;
  --color-primary: hsl(0, 0%, 9%);
  --color-primary-h: 0;
  --color-primary-s: 0%;
  --color-primary-l: 9%;
  --color-primary-light: hsl(0, 0%, 15%);
  --color-primary-light-h: 0;
  --color-primary-light-s: 0%;
  --color-primary-light-l: 15%;
  --color-primary-lighter: hsl(0, 0%, 21%);
  --color-primary-lighter-h: 0;
  --color-primary-lighter-s: 0%;
  --color-primary-lighter-l: 21%;
  --color-accent-darker: hsl(34, 100%, 59%);
  --color-accent-darker-h: 34;
  --color-accent-darker-s: 100%;
  --color-accent-darker-l: 59%;
  --color-accent-dark: hsl(34, 100%, 65%);
  --color-accent-dark-h: 34;
  --color-accent-dark-s: 100%;
  --color-accent-dark-l: 65%;
  --color-accent: hsl(34, 100%, 71%);
  --color-accent-h: 34;
  --color-accent-s: 100%;
  --color-accent-l: 71%;
  --color-accent-light: hsl(34, 100%, 77%);
  --color-accent-light-h: 34;
  --color-accent-light-s: 100%;
  --color-accent-light-l: 77%;
  --color-accent-lighter: hsl(30, 100%, 110%);
  --color-accent-lighter-h: 30;
  --color-accent-lighter-s: 100%;
  --color-accent-lighter-l: 110%;
  --color-black: hsl(0, 0%, 9%);
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 9%;
  --color-white: hsl(0, 0%, 92%);
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 92%;
  --color-warning-darker: hsl(9, 100%, 23%);
  --color-warning-darker-h: 9;
  --color-warning-darker-s: 100%;
  --color-warning-darker-l: 23%;
  --color-warning-dark: hsl(9, 100%, 29%);
  --color-warning-dark-h: 9;
  --color-warning-dark-s: 100%;
  --color-warning-dark-l: 29%;
  --color-warning: hsl(9, 100%, 35%);
  --color-warning-h: 9;
  --color-warning-s: 100%;
  --color-warning-l: 35%;
  --color-warning-light: hsl(9, 100%, 41%);
  --color-warning-light-h: 9;
  --color-warning-light-s: 100%;
  --color-warning-light-l: 41%;
  --color-warning-lighter: hsl(9, 100%, 47%);
  --color-warning-lighter-h: 9;
  --color-warning-lighter-s: 100%;
  --color-warning-lighter-l: 47%;
  --color-success-darker: hsl(170, 78%, 26%);
  --color-success-darker-h: 170;
  --color-success-darker-s: 78%;
  --color-success-darker-l: 26%;
  --color-success-dark: hsl(170, 78%, 31%);
  --color-success-dark-h: 170;
  --color-success-dark-s: 78%;
  --color-success-dark-l: 31%;
  --color-success: hsl(170, 78%, 36%);
  --color-success-h: 170;
  --color-success-s: 78%;
  --color-success-l: 36%;
  --color-success-light: hsl(170, 78%, 42%);
  --color-success-light-h: 170;
  --color-success-light-s: 78%;
  --color-success-light-l: 42%;
  --color-success-lighter: hsl(170, 78%, 47%);
  --color-success-lighter-h: 170;
  --color-success-lighter-s: 78%;
  --color-success-lighter-l: 47%;
  --color-error-darker: hsl(9, 100%, 23%);
  --color-error-darker-h: 9;
  --color-error-darker-s: 100%;
  --color-error-darker-l: 23%;
  --color-error-dark: hsl(9, 100%, 29%);
  --color-error-dark-h: 9;
  --color-error-dark-s: 100%;
  --color-error-dark-l: 29%;
  --color-error: hsl(9, 100%, 35%);
  --color-error-h: 9;
  --color-error-s: 100%;
  --color-error-l: 35%;
  --color-error-light: hsl(9, 100%, 41%);
  --color-error-light-h: 9;
  --color-error-light-s: 100%;
  --color-error-light-l: 41%;
  --color-error-lighter: hsl(9, 100%, 47%);
  --color-error-lighter-h: 9;
  --color-error-lighter-s: 100%;
  --color-error-lighter-l: 47%;
  --color-bg-darker: hsl(0, 0%, 3%);
  --color-bg-darker-h: 0;
  --color-bg-darker-s: 0%;
  --color-bg-darker-l: 3%;
  --color-bg-dark: hsl(0, 0%, 5%);
  --color-bg-dark-h: 0;
  --color-bg-dark-s: 0%;
  --color-bg-dark-l: 5%;
  --color-bg: hsl(0, 0%, 9%);
  --color-bg-h: 0;
  --color-bg-s: 0%;
  --color-bg-l: 9%;
  --color-bg-light: hsl(0, 0%, 13%);
  --color-bg-light-h: 0;
  --color-bg-light-s: 0%;
  --color-bg-light-l: 13%;
  --color-bg-lighter: hsl(0, 0%, 15%);
  --color-bg-lighter-h: 0;
  --color-bg-lighter-s: 0%;
  --color-bg-lighter-l: 15%;
  --color-contrast-lower: hsl(0, 0%, 18%);
  --color-contrast-lower-h: 0;
  --color-contrast-lower-s: 0%;
  --color-contrast-lower-l: 18%;
  --color-contrast-low: hsl(0, 0%, 32%);
  --color-contrast-low-h: 0;
  --color-contrast-low-s: 0%;
  --color-contrast-low-l: 32%;
  --color-contrast-medium: hsl(0, 0%, 46%);
  --color-contrast-medium-h: 0;
  --color-contrast-medium-s: 0%;
  --color-contrast-medium-l: 46%;
  --color-contrast-high: hsl(0, 0%, 69%);
  --color-contrast-high-h: 0;
  --color-contrast-high-s: 0%;
  --color-contrast-high-l: 69%;
  --color-contrast-higher: hsl(0, 0%, 84%);
  --color-contrast-higher-h: 0;
  --color-contrast-higher-s: 0%;
  --color-contrast-higher-l: 84%;
}

@media (min-width: 64rem) {
  :root, * {
    --space-xxxxs: calc(0.1875 * var(--space-unit));
    --space-xxxs: calc(0.375 * var(--space-unit));
    --space-xxs: calc(0.5625 * var(--space-unit));
    --space-xs: calc(0.75 * var(--space-unit));
    --space-sm: calc(1.125 * var(--space-unit));
    --space-md: calc(2 * var(--space-unit));
    --space-lg: calc(3.125 * var(--space-unit));
    --space-xl: calc(5.125 * var(--space-unit));
    --space-xxl: calc(8.25 * var(--space-unit));
    --space-xxxl: calc(13.25 * var(--space-unit));
    --space-xxxxl: calc(21.5 * var(--space-unit));
  }
}
:root {
  --radius: 0.375em;
}

:root {
  --font-primary: "DM Sans", system-ui, sans-serif;
  --font-secondary: "DM Sans", serif;
  --text-base-size: 1.1rem;
  --text-scale-ratio: 1.1;
  --body-line-height: 1.35;
  --heading-line-height: 1.3;
  --font-primary-capital-letter: 1;
  --font-secondary-capital-letter: 1;
  --text-unit: var(--text-base-size);
}

:root, * {
  --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}

@media (min-width: 64rem) {
  :root {
    --text-base-size: 1.1rem;
    --text-scale-ratio: 1.215;
  }
}
body {
  font-family: var(--font-primary);
  --body-font-weight: 400;
}

h1 {
  font-family: var(--font-secondary);
  --heading-font-weight: 600;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.link {
  text-decoration: none;
  background-image: linear-gradient(to right, currentColor 50%, hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15) 50%);
  background-size: 200% 1px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  transition: background-position 0.2s;
}
.link:hover {
  background-position: 0% 100%;
}

.text-component {
  --line-height-multiplier: 1;
  --text-space-y-multiplier: 1;
}
.text-component > * {
  --text-unit: 1em;
  --space-unit: 1em;
}

:root {
  --btn-font-size: var(--text-md);
  --btn-padding-x: var(--space-md);
  --btn-padding-y: var(--space-xs);
  --btn-radius: var(--radius-sm);
}

.btn {
  background: var(--color-bg-dark);
  color: var(--color-contrast-higher);
  cursor: pointer;
  font-family: var(--font-secondary);
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.3;
  letter-spacing: 0.025rem;
  transition: all 0.2s ease;
  will-change: transform;
}
.btn:focus {
  box-shadow: 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.15);
  outline: none;
}
.btn:active {
  transform: translateY(2px);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-primary-darker);
  box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 3px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 2px 6px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 6px 10px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1);
}
.btn--accent:focus {
  box-shadow: inset 0px 1px 0px hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), 0.15), 0px 1px 2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.25), 0px 1px 4px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 3px 6px -2px hsla(var(--color-accent-darker-h), var(--color-accent-darker-s), var(--color-accent-darker-l), 0.1), 0px 0px 0px 2px var(--color-bg), 0px 0px 0px 4px var(--color-accent);
}

 .btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn--sm {
  font-size: 0.8em;
}

:root {
  --form-control-font-size: 1em;
  --form-control-padding-x: var(--space-xs);
  --form-control-padding-y: var(--space-xxs);
  --form-control-radius: var(--radius-sm);
}
.logo {
  width: 190px;
  height: auto;
}

/* -------------------------------- 

File#: _1_list
Title: List
Descr: Custom list component
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --list-space-y: 0.375em;
  --list-offset: 1em;
  --list-line-height-multiplier: 1;
}

.list, .text-component .list {
  padding-left: 0;
  list-style: none;
}
.list ul, .list ol, .text-component .list ul, .text-component .list ol {
  list-style: none;
  margin: 0;
  margin-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  padding-top: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  padding-left: var(--list-offset);
}
.list li, .text-component .list li {
  padding-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  margin-bottom: calc(var(--list-space-y) / 2 * var(--text-space-y-multiplier, 1));
  line-height: calc(var(--body-line-height) * var(--list-line-height-multiplier));
}
.list > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
  margin-bottom: 0;
}
.list:not(.list--border) > li:last-child, .list ul > li:last-child, .list ol > li:last-child, .text-component .list:not(.list--border) > li:last-child, .text-component .list ul > li:last-child, .text-component .list ol > li:last-child {
  padding-bottom: 0;
}

/* #region (ul + ol) */
.list--ul, .text-component .list--ul,
.list--ol, .text-component .list--ol {
  --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}
.list--ul ul, .list--ul ol, .text-component .list--ul ul, .text-component .list--ul ol,
.list--ol ul,
.list--ol ol, .text-component .list--ol ul, .text-component .list--ol ol {
  padding-left: 0;
}
.list--ul li, .text-component .list--ul li,
.list--ol li, .text-component .list--ol li {
  padding-left: var(--list-offset);
}
.list--ul li::before, .text-component .list--ul li::before,
.list--ol li::before, .text-component .list--ol li::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  vertical-align: middle;
  position: relative;
  top: -0.1em;
  left: calc(var(--list-bullet-margin-right) * -1);
  margin-left: calc(var(--list-bullet-size) * -1);
}

.list--ul, .text-component .list--ul {
  --list-bullet-size: 7px;
  --list-bullet-margin-right: 12px;
}
.list--ul > li::before, .text-component .list--ul > li::before {
  content: "";
  border-radius: 50%;
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.1);
  background-color: currentColor;
}
.list--ul ul li::before, .text-component .list--ul ul li::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px currentColor;
}

.list--ol, .text-component .list--ol {
  --list-bullet-size: 26px;
  --list-bullet-margin-right: 6px;
  --list-bullet-font-size: 14px;
  counter-reset: list-items;
}
.list--ol > li, .text-component .list--ol > li {
  counter-increment: list-items;
}
.list--ol ol, .text-component .list--ol ol {
  counter-reset: list-items;
}
.list--ol > li::before, .text-component .list--ol > li::before {
  content: counter(list-items);
  font-size: var(--list-bullet-font-size, 14px);
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  color: var(--color-contrast-higher);
  line-height: 1;
  border-radius: 50%;
}
.list--ol ol > li::before, .text-component .list--ol ol > li::before {
  background-color: transparent;
  box-shadow: inset 0 0 0 2px hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
}

/* #endregion */
/* #region (border) */
.list--border li:not(:last-child), .text-component .list--border li:not(:last-child) {
  border-bottom: 1px solid var(--color-contrast-lower);
}
.list--border ul, .list--border ol, .text-component .list--border ul, .text-component .list--border ol {
  border-top: 1px solid var(--color-contrast-lower);
}

/* #endregion */
/* #region (icons) */
.list--icons, .text-component .list--icons {
  --list-bullet-size: 24px;
  --list-bullet-margin-right: 8px;
  --list-offset: calc(var(--list-bullet-size) + var(--list-bullet-margin-right));
}
.list--icons ul, .list--icons ol, .text-component .list--icons ul, .text-component .list--icons ol {
  padding-left: var(--list-offset);
}

.list__icon {
  position: relative;
  width: var(--list-bullet-size);
  height: var(--list-bullet-size);
  margin-right: var(--list-bullet-margin-right);
}
.list__icon:not(.top-0) {
  top: calc((1em * var(--body-line-height) * var(--list-line-height-multiplier) - var(--list-bullet-size)) / 2);
}

/* #endregion */
/* --------------------------------

File#: _1_newsletter-input
Title: Newsletter Input
Descr: Animated newsletter input
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --news-form-input-height: 48px;
  --news-form-input-padding-x: 18px;
  --news-form-input-radius: 50em;
  --news-form-btn-margin: 4px;
  --news-form-btn-padding-x: 16px;
  --news-form-icon-size: 24px;
}

.news-form__wrapper {
  position: relative;
}

.news-form__input {
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.075);
  padding: 0 var(--news-form-input-padding-x);
  border-radius: var(--news-form-input-radius);
  width: 100%;
  height: var(--news-form-input-height);
  transition: 0.2s;
}
.news-form__input:focus {
  outline: none;
  background-color: var(--color-bg);
  box-shadow: var(--shadow-md), 0 0 0 2px var(--color-primary);
}

.news-form__btn {
  display: inline-block;
  overflow: hidden;
  position: absolute;
  top: var(--news-form-btn-margin);
  right: var(--news-form-btn-margin);
  height: calc(var(--news-form-input-height) - 2 * var(--news-form-btn-margin));
  padding: 0 var(--news-form-btn-padding-x);
  background-color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.2);
  color: hsla(var(--color-contrast-higher-h), var(--color-contrast-higher-s), var(--color-contrast-higher-l), 0.9);
  border-radius: calc(var(--news-form-input-radius) * 0.85);
  box-shadow: var(--shadow-sm);
  font-size: var(--text-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  transition: 0.2s;
}
.news-form__btn > * {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s var(--ease-out);
}
.news-form__btn > *:last-child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(100%);
}

.news-form__icon {
  display: block;
  width: var(--news-form-icon-size);
  height: var(--news-form-icon-size);
}
.news-form__icon > * {
  transform-origin: 50% 50%;
}

.news-form__icon-circle {
  stroke-dashoffset: 160;
  stroke-dasharray: 32;
}

.news-form__icon-check {
  stroke-dashoffset: 30;
  stroke-dasharray: 30;
}

.news-form__icon-excl-line {
  stroke-dashoffset: 14;
  stroke-dasharray: 14;
}

.news-form__icon-excl-dot {
  transform-origin: 12px 21.5px;
  transform: scale(0);
}

.news-form--enabled .news-form__btn {
  background-color: var(--color-primary);
  color: var(--color-white);
}
.news-form--enabled .news-form__btn:hover {
  background-color: var(--color-primary-dark);
}

.news-form--loading .news-form__btn > *:first-child {
  transform: translateY(-100%);
}
.news-form--loading .news-form__btn > *:last-child {
  transform: translateY(0);
}

.news-form--circle-loop .news-form__icon-circle {
  animation: news-input-circle-anim-loader 1s var(--ease-in-out);
}

.news-form--success .news-form__btn > *,
.news-form--error .news-form__btn > * {
  transition: none;
}
.news-form--success .news-form__btn > *:first-child,
.news-form--error .news-form__btn > *:first-child {
  transform: translateY(-100%);
}
.news-form--success .news-form__btn > *:last-child,
.news-form--error .news-form__btn > *:last-child {
  transform: translateY(0);
}

.news-form--success .news-form__icon-circle {
  animation: news-input-circle-anim-success 1s var(--ease-in-out) forwards;
}
.news-form--success .news-form__icon-check {
  animation: news-input-check-anim-success 0.5s 0.8s var(--ease-in-out) forwards;
}

.news-form--error .news-form__icon-circle {
  animation: news-input-circle-anim-error 0.8s var(--ease-in-out) forwards;
}
.news-form--error .news-form__icon-excl-line {
  animation: news-input-line-anim-error 0.3s 0.6s var(--ease-in-out) forwards;
}
.news-form--error .news-form__icon-excl-dot {
  animation: news-input-dot-anim-error 0.3s 0.9s var(--ease-out) forwards;
}

@keyframes news-input-circle-anim-loader {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    stroke-dashoffset: 96;
    transform: rotate(-180deg);
  }
}
@keyframes news-input-circle-anim-success {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    transform: rotate(-180deg);
    stroke-dashoffset: 96;
  }
}
@keyframes news-input-circle-anim-error {
  from {
    transform: rotate(0);
    stroke-dashoffset: 160;
  }
  to {
    transform: rotate(-90deg);
    stroke-dashoffset: 96;
  }
}
@keyframes news-input-check-anim-success {
  from {
    stroke-dashoffset: 30;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes news-input-line-anim-error {
  from {
    stroke-dashoffset: 14;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes news-input-dot-anim-error {
  from {
    transform: translateY(-4px) scale(0);
  }
  to {
    transform: translateY(0) scale(1);
  }
}
.news-form__msg {
  position: absolute;
  z-index: var(--z-index-popover, 5);
  top: calc(14px + var(--news-form-input-height));
  left: 5%;
  width: 90%;
  border-top-left-radius: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.3s, visibility 0s 0.3s, transform 0.3s var(--ease-out);
}
.news-form__msg::before {
  content: "";
  width: 12px;
  height: 10px;
  background-color: inherit;
  position: absolute;
  left: 0;
  bottom: calc(100% - 1px);
  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
}

.news-form__msg--success {
  background-color: var(--color-success-lighter);
  color: var(--color-black);
}

.news-form__msg--error {
  background-color: var(--color-error);
  color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.news-form--success .news-form__msg--success,
.news-form--error .news-form__msg--error {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
  transition: opacity 0.3s 1s, transform 0.3s 1s var(--ease-out);
}

/* -------------------------------- 

File#: _1_reveal-effects
Title: Reveal Effects
Descr: A collection of reveal effects targeting specific elements as they enter the viewport
Usage: codyhouse.co/license

-------------------------------- */
:root {
  --reveal-fx-duration: 0.6s;
  --reveal-fx-timing-function: var(--ease-out);
}

.reveal-fx {
  opacity: 0;
  transition: opacity, transform var(--reveal-fx-timing-function);
  transition-duration: var(--reveal-fx-duration);
}
.reveal-fx::before {
  display: none;
  content: "reveal-fx";
}

.reveal-fx--translate, .reveal-fx--translate-up {
  transform: translateY(50px);
}

.reveal-fx--translate-right {
  transform: translateX(-50px);
}

.reveal-fx--translate-left {
  transform: translateX(50px);
}

.reveal-fx--translate-down {
  transform: translateY(-50px);
}

.reveal-fx--scale {
  transform: scale(0.8);
}

.reveal-fx--scale-up {
  transform: translateY(50px) scale(0.8);
}

.reveal-fx--scale-right {
  transform: translateX(-50px) scale(0.8);
}

.reveal-fx--scale-left {
  transform: translateX(50px) scale(0.8);
}

.reveal-fx--scale-down {
  transform: translateY(-50px) scale(0.8);
}

.reveal-fx--rotate, .reveal-fx--rotate-down, .reveal-fx--rotate-right, .reveal-fx--rotate-left, .reveal-fx--rotate-up {
  perspective: 1000px;
}
.reveal-fx--rotate > *, .reveal-fx--rotate-down > *, .reveal-fx--rotate-right > *, .reveal-fx--rotate-left > *, .reveal-fx--rotate-up > * {
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  backface-visibility: hidden;
}

.reveal-fx--rotate > *, .reveal-fx--rotate-down > * {
  transform-origin: top;
  transform: rotateX(-45deg);
}

.reveal-fx--rotate-right > * {
  transform-origin: left center;
  transform: rotateY(45deg);
}

.reveal-fx--rotate-left > * {
  transform-origin: right center;
  transform: rotateY(-45deg);
}

.reveal-fx--rotate-up > * {
  transform-origin: bottom;
  transform: rotateX(45deg);
}

.reveal-fx--text-mask {
  overflow: hidden;
}
.reveal-fx--text-mask > * {
  display: inline-block;
  transform: translateY(100%);
  transition: transform var(--reveal-fx-duration) var(--reveal-fx-timing-function);
  will-change: transform;
}

[class*=reveal-fx--translate], [class*=reveal-fx--scale] {
  will-change: opacity, transform;
}

.reveal-fx--text-mask > *, [class*=reveal-fx--rotate] > * {
  will-change: transform;
}

.reveal-fx--clip-x > *,
.reveal-fx--clip-y > * {
  transition: opacity, clip-path var(--ease-out);
  transition-duration: var(--reveal-fx-duration);
}

.reveal-fx--clip-x > * {
  clip-path: polygon(10% 0%, 90% 0%, 90% 100%, 10% 100%);
}

.reveal-fx--clip-y > * {
  clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}

.reveal-fx--is-visible {
  opacity: 1;
}
.reveal-fx--is-visible[class*=reveal-fx--translate], .reveal-fx--is-visible[class*=reveal-fx--scale], .reveal-fx--is-visible[class*=reveal-fx--rotate] > *, .reveal-fx--is-visible.reveal-fx--text-mask > * {
  transform: translate(0);
}
.reveal-fx--is-visible.reveal-fx--clip-x > *, .reveal-fx--is-visible.reveal-fx--clip-y > * {
  opacity: 1;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

/* -------------------------------- 

File#: _2_coming-soon
Title: Coming Soon
Descr: Coming soon template
Usage: codyhouse.co/license

-------------------------------- */
.coming-soon {
  position: relative;
  z-index: 1;
}

.coming-soon__figure {
  position: relative;
  height: 40vh;
}
.coming-soon__figure img {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.coming-soon__social-btn {
  --btn-size: 32px;
  --icon-size: 16px;
  position: relative;
  width: var(--btn-size);
  height: var(--btn-size);
  display: inline-flex;
}
.coming-soon__social-btn .icon {
  position: relative;
  z-index: 2;
  display: block;
  margin: auto;
  font-size: var(--icon-size);
  color: var(--color-contrast-high);
}
.coming-soon__social-btn::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0.5);
  transition: 0.3s var(--ease-out);
}
.coming-soon__social-btn:hover::before {
  background-color: var(--color-contrast-lower);
  transform: scale(1);
}

@media (min-width: 64rem) {
  .coming-soon__figure {
    height: auto;
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
    animation: coming-soon-figure-anim 0.6s var(--ease-out) forwards;
  }
}
@keyframes coming-soon-figure-anim {
  from {
    clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
  }
  to {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 10% 100%);
  }
}
a.text-white {color: var(--color-accent);font-weight: bold;}
a.text-white:hover {text-decoration: underline;opacity: 0.8;}