@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=DM+Sans:wght@400;500;700&display=swap");.hero[data-v-53469796] {
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
  height: 43rem;
  max-height: 43rem;
  padding-bottom: 0;
}
@media (min-width: 768px) {
.hero[data-v-53469796] {
    height: 48rem;
    max-height: 48rem;
}
}
@media (min-width: 1024px) {
.hero[data-v-53469796] {
    height: min(max(100dvh - 5.75rem, 50rem), 54rem);
}
}
.hero > .content[data-v-53469796],
.hero .grid-20[data-v-53469796] {
  height: 100%;
}
.hero .tagline[data-v-53469796] {
  grid-column: 1/-1 !important;
  grid-row-start: 2 !important;
  justify-self: center;
  width: 100%;
}
.hero .tagline .box[data-v-53469796] {
  align-items: center;
  background-color: transparent;
}
.hero .tagline h1[data-v-53469796] {
  text-align: center;
  margin: 0 auto;
}
.hero .tagline .hero-highlight[data-v-53469796] {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}
.hero .tagline .hero-highlight img[data-v-53469796] {
  position: absolute;
  left: 50%;
  bottom: -0.12em;
  width: 115%;
  max-width: none;
  transform: translateX(-50%);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  animation: hero-marker-draw-53469796 700ms cubic-bezier(0.16, 1, 0.3, 1) 1700ms forwards;
  pointer-events: none;
}
.hero .tagline .hero-highlight-text[data-v-53469796] {
  position: relative;
  z-index: 1;
}
.hero .tagline .box-content[data-v-53469796] {
  max-width: 56rem;
  margin: 0 auto;
  opacity: 0;
  animation: hero-content-rise-53469796 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 1024px) {
.hero .tagline[data-v-53469796] {
    grid-column: 1/-1 !important;
}
}
.hero .cta[data-v-53469796] {
  --rowStart: calc( var(--grid-first-item-row-end) + 3);
  grid-column: 1/-1;
  grid-row: var(--rowStart)/span 1;
  justify-self: center;
  z-index: 1;
  align-self: center;
  justify-content: center;
  transform: translateY(calc(var(--gridRow) * -0.5));
  border-left: solid 0.5px transparent;
  border-right: solid 0.5px transparent;
}
.hero .cta button[data-v-53469796] {
  width: auto;
  opacity: 0;
  animation: hero-content-rise-53469796 700ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}
@media (min-width: 480px) {
.hero.v2 .tagline h1[data-v-53469796], .hero.v3 .tagline h1[data-v-53469796] {
    max-width: 90%;
}
}
@media (min-width: 558px) {
.hero.v2 .tagline h1[data-v-53469796], .hero.v3 .tagline h1[data-v-53469796] {
    max-width: 100%;
}
}
@media (min-width: 1264px) {
.hero.v2 .tagline h1[data-v-53469796], .hero.v3 .tagline h1[data-v-53469796] {
    max-width: 90%;
}
}
.hero .hero-portfolio-cards[data-v-53469796] {
  position: absolute;
  left: 50%;
  top: calc(50% + 6.5rem);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  width: min(90vw, 82rem);
  height: clamp(16rem, 28vw, 26rem);
  pointer-events: auto;
  opacity: 0;
  animation: hero-cards-rise-53469796 850ms cubic-bezier(0.16, 1, 0.3, 1) 950ms forwards;
}
.hero .portfolio-card[data-v-53469796] {
  display: block;
  position: absolute;
  left: 50%;
  top: 0;
  width: clamp(17rem, 30vw, 28rem);
  box-sizing: border-box;
  overflow: hidden;
  border: 6px solid var(--asphalt10, #FEFEFE);
  border-radius: 20px;
  box-shadow: 0 1.25rem 3rem rgba(15, 15, 15, 0.14), 0 0.25rem 0.75rem rgba(15, 15, 15, 0.08);
  backface-visibility: hidden;
  cursor: default;
  pointer-events: auto;
  transform-origin: center bottom;
  transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1), z-index 0ms linear 120ms;
  will-change: transform;
}
.hero .portfolio-card.v5-position-left[data-v-53469796],
.hero .portfolio-card.v5-position-right[data-v-53469796] {
  cursor: pointer;
}
.hero .portfolio-card.v5-position-center[data-v-53469796] {
  cursor: default;
  pointer-events: none;
}
.hero .portfolio-card img[data-v-53469796] {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .portfolio-card.v5-position-left[data-v-53469796] {
  z-index: 1;
  transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
.hero .portfolio-card.v5-position-center[data-v-53469796] {
  z-index: 4;
  transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
.hero .portfolio-card.v5-position-right[data-v-53469796] {
  z-index: 2;
  transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
.hero .portfolio-card.side[data-v-53469796] {
  width: clamp(17rem, 30vw, 28rem);
}
@media (max-width: 767px) {
.hero .hero-portfolio-cards[data-v-53469796] {
    top: calc(50% + 5.5rem);
    height: 17rem;
    width: 150vw;
}
.hero .portfolio-card[data-v-53469796] {
    width: 18rem;
}
.hero .portfolio-card.side[data-v-53469796] {
    width: 18rem;
}
}
@keyframes hero-card-left-53469796 {
0%, 22.66%, 100% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
22.67% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
56% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
66.66%, 89.32% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
89.33% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
99.9% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-center-53469796 {
0%, 22.66%, 100% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
22.67% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
33.33%, 55.99% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
56% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
66.65% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
89.33% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
}
@keyframes hero-card-right-53469796 {
0%, 22.66%, 100% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
22.67% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% + 18vw), -2rem, 0) rotate(3deg) scale(0.92);
}
33.32% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
33.33%, 55.99% {
    z-index: 1;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
56% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(calc(-50% - 18vw), -2rem, 0) rotate(-3deg) scale(0.92);
}
66.66%, 89.32% {
    z-index: 4;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
89.33% {
    z-index: 2;
    opacity: 1;
    transform: translate3d(-50%, -3.5rem, 0) rotate(0) scale(1);
}
}
@keyframes hero-content-rise-53469796 {
from {
    opacity: 0;
    transform: translateY(1.5rem);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
@keyframes hero-cards-rise-53469796 {
from {
    opacity: 0;
    transform: translateX(-50%) translateY(4rem);
}
to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
}
@keyframes hero-marker-draw-53469796 {
from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
}
to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero .tagline .box-content[data-v-53469796] {
    opacity: 1;
    animation: none;
}
.hero .tagline .hero-highlight img[data-v-53469796] {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    animation: none;
}
.hero .cta button[data-v-53469796] {
    opacity: 1;
    animation: none;
}
.hero .hero-portfolio-cards[data-v-53469796] {
    opacity: 1;
    animation: none;
}
.hero .portfolio-card[data-v-53469796] {
    transition: none;
}
}

/*! modern-normalize v2.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
/*
Document
========
*/
/**
Use a better box model (opinionated).
*/
*,
::before,
::after {
  box-sizing: border-box;
}
html {
  /* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.15; /* 1. Correct the line height in all browsers. */
  -webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
  -moz-tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
  tab-size: 4; /* 3 */
}

/*
Sections
========
*/
body {
  margin: 0; /* Remove the margin in all browsers. */
}

/*
Grouping content
================
*/
/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/
hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
}

/*
Text-level semantics
====================
*/
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr[title] {
  text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/
b,
strong {
  font-weight: bold;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/
small {
  font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

/*
Tabular data
============
*/
/**
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/
table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
}

/*
Forms
=====
*/
/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
  text-transform: none;
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
Remove the inner border and padding in Firefox.
*/
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
Restore the focus styles unset by the previous rule.
*/
:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
Remove the additional ':invalid' styles in Firefox.
See: https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737
*/
:-moz-ui-invalid {
  box-shadow: none;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/
legend {
  padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
  vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Interactive
===========
*/
/*
Add the correct display in Chrome and Safari.
*/
summary {
  display: list-item;
}
* {
  box-sizing: border-box;
}
:root {
  --Asphalt: #0F0F0F;
  --Asphalt-10: #FEFEFE;
  --Asphalt-15: #F9F9F9;
  --Asphalt-20: #EEEEEE;
  --Asphalt-30: #D1D1D1;
  --Asphalt-40: #A2A2A2;
  --Asphalt-50: #707070;
  --Asphalt-60: #484747;
  --Asphalt-70: #3D3D3D;
  --Asphalt-80: #333333;
  --Asphalt-90: #262626;
  --Asphalt-95: #1A1A1A;
  --Asphalt-100: #0F0F0F;
  --Snow: #FEFEFE;
  --Volt: #DCFA37;
  --Rain: #91939A;
  --Frost: #EEF0F6;
  --Stone: #3D3F45;
  --Success60: #10B981;
  --Error-40: #F87171;
  --Error-60: #DC2626;
  --Linear: linear-gradient(180deg, var(--Rain, #91939A) 37.12%, transparent 74.17%);
  --headlineFont: "Bricolage Grotesque", sans-serif;
  --font-headline-family: "Bricolage Grotesque", sans-serif;
  --bodyFont: "Work Sans", sans-serif;
  --font-body-family: "Work Sans", sans-serif;
  --font-h0: 400 54px/1.24 var(--font-headline-family);
  --font-h1: 400 44px/1.1 var(--font-headline-family);
  --font-h2: 400 36px/1.1 var(--font-headline-family);
  --font-h3: 400 32px/1.2 var(--font-headline-family);
  --font-h4: 400 24px/1.3 var(--font-headline-family);
  --font-h5: 400 16px/1.2 var(--font-headline-family);
  --font-h6: 400 14px/1.2 var(--font-headline-family);
  --font-s1: 400 1.6875rem/1.2 var(--font-headline-family);
  --font-s2: 400 1.1875rem/1.4 var(--font-headline-family);
  --font-s3: 600 0.8125rem/1.2 var(--font-body-family);
  --font-s4: 400 18px/1.2 var(--font-body-family);
  --font-b1: 400 15px/1.2 var(--font-body-family);
  --font-b2: 400 14px/1.2 var(--font-body-family);
  --font-b3: 400 0.75rem/1.35 var(--font-body-family);
  --font-c1: 400 0.75rem/1.3 var(--font-body-family);
  --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
@media (min-width: 768px) {
:root {
    --font-h0: 400 72px/1.22 var(--font-headline-family);
    --font-h1: 400 56px/1.1 var(--font-headline-family);
    --font-h2: 400 44px/1.1 var(--font-headline-family);
    --font-h3: 400 36px/1.2 var(--font-headline-family);
    --font-h4: 400 26px/1.3 var(--font-headline-family);
    --font-h5: 400 18px/1.2 var(--font-headline-family);
    --font-h6: 400 16px/1.2 var(--font-headline-family);
    --font-s1: 400 1.8125rem/1.2 var(--font-headline-family);
    --font-s2: 400 1.3125rem/1.2 var(--font-headline-family);
    --font-s3: 600 0.9375rem/1.2 var(--font-body-family);
    --font-s4: 400 20px/1.2 var(--font-body-family);
    --font-b1: 400 16px/1.2 var(--font-body-family);
    --font-b2: 400 15px/1.2 var(--font-body-family);
    --font-b3: 400 13px/1.35 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
@media (min-width: 1024px) {
:root {
    --font-h0: 400 4.5rem/1.2 var(--font-headline-family);
    --font-h1: 400 64px/1.2 var(--font-headline-family);
    --font-h2: 400 48px/1.2 var(--font-headline-family);
    --font-h3: 400 40px/1.2 var(--font-headline-family);
    --font-h4: 400 28px/1.3 var(--font-headline-family);
    --font-h5: 400 20px/1.2 var(--font-headline-family);
    --font-h6: 400 18px/1.2 var(--font-headline-family);
    --font-s1: 400 3rem/1.2 var(--font-headline-family);
    --font-s2: 400 1.5rem/1.2 var(--font-headline-family);
    --font-s3: 600 1.0625rem/1.3 var(--font-body-family);
    --font-s4: 400 24px/1.2 var(--font-body-family);
    --font-s5: 400 18px/1.2 var(--font-headline-family);
    --font-b1: 400 18px/1.4 var(--font-body-family);
    --font-b2: 400 16px/1.3 var(--font-body-family);
    --font-b3: 400 14px/1.4 var(--font-body-family);
    --font-c1: 400 0.875rem/1.3 var(--font-body-family);
    --font-c2: 400 0.75rem/1.3 var(--font-body-family);
}
}
.light-mode {
  --color-text: var(--Asphalt);
  --color-bg: var(--Snow);
  --color-bg-rgba: rgba(254, 254, 254, 0);
  --color-secondary-bg: #F3F3F3;
  --color-navigation-bg: rgba(254, 254, 254, 0.70);
  --color-examples-border: var(--Frost);
  --bannerBgColor: #212121;
  --color-btn-primary-bg: var(--Asphalt-100);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt-10);
  --color-btn-primary-bg-hover: var(--Asphalt-100);
  --color-btn-primary-text-hover: var(--Asphalt-10);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
  --color-btn-tertiary-bg: var(--Asphalt);
  --color-btn-tertiary-border: var(--Asphalt);
  --color-btn-tertiary-text: var(--Snow);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Asphalt);
  --color-btn-inline-text-hover: var(--Asphalt);
  --color-nav-link-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-30);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt);
  --color-form-elem-border-disabled: var(--Asphalt-30);
  --color-form-elem-border-error: var(--Error-60);
  --color-form-elem-label: var(--Asphalt-60);
  --color-form-elem-label-hover: var(--Asphalt-60);
  --color-form-elem-label-focus: var(--Asphalt-60);
  --color-form-elem-label-disabled: var(--Asphalt-60);
  --color-form-elem-text: var(--Asphalt-70);
  --color-form-elem-text-hover: var(--Asphalt-70);
  --color-form-elem-text-focus: var(--Asphalt-80);
  --color-form-elem-text-disabled: var(--Asphalt-70);
  --color-banner-bg: #212121;
  --color-banner-text: var(--Snow);
}
.light-mode .banner:not(.color) {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
}
.light-mode {
  --color-cycle-text-inactive: var(--Stone);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: #EDEDED;
  --color-cycle-active-bg: var(--Snow);
}
.dark-mode {
  --color-text: var(--Snow);
  --color-bg: var(--Asphalt);
  --color-bg-rgba: rgba(15, 15, 15, 0);
  --color-secondary-bg: #212121;
  --color-navigation-bg: rgba(15, 15, 15, 0.70);
  --color-examples-border: var(--Stone);
  --bannerBgColor: #F3F3F3;
  --color-btn-primary-bg: var(--Volt);
  --color-btn-primary-border: transparent;
  --color-btn-primary-text: var(--Asphalt);
  --color-btn-primary-bg-hover: var(--Snow);
  --color-btn-primary-text-hover: var(--Asphalt);
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Snow);
  --color-btn-secondary-text: var(--Snow);
  --color-btn-secondary-bg-hover: var(--Snow);
  --color-btn-secondary-text-hover: var(--Asphalt);
  --color-btn-tertiary-bg: var(--Snow);
  --color-btn-tertiary-border: var(--Snow);
  --color-btn-tertiary-text: var(--Asphalt);
  --color-btn-tertiary-bg-hover: #393939;
  --color-btn-tertiary-border-hover: #393939;
  --color-btn-tertiary-text-hover: var(--Asphalt-10);
  --color-btn-inline-bg: transparent;
  --color-btn-inline-border: transparent;
  --color-btn-inline-text: var(--Snow);
  --color-btn-inline-text-hover: var(--Snow);
  --color-nav-link-text: var(--Snow);
  --color-banner-bg: #F3F3F3;
  --color-banner-text: var(--Asphalt);
  --color-form-elem-bg-disabled: var(--carbon20);
  --color-form-elem-border: var(--Asphalt-50);
  --color-form-elem-border-hover: var(--Asphalt-40);
  --color-form-elem-border-focus: var(--Asphalt-30);
  --color-form-elem-border-disabled: var(--Asphalt-50);
  --color-form-elem-border-error: var(--Error-40);
  --color-form-elem-label: var(--Asphalt-40);
  --color-form-elem-label-hover: var(--Asphalt-40);
  --color-form-elem-label-focus: var(--Asphalt-30);
  --color-form-elem-label-disabled: var(--Asphalt-40);
  --color-form-elem-text: var(--Asphalt-30);
  --color-form-elem-text-hover: var(--Asphalt-20);
  --color-form-elem-text-focus: var(--Asphalt-10);
  --color-form-elem-text-disabled: var(--Asphalt-30);
}
.dark-mode .banner {
  --color-btn-secondary-bg: transparent;
  --color-btn-secondary-border: var(--Asphalt);
  --color-btn-secondary-text: var(--Asphalt);
  --color-btn-secondary-bg-hover: var(--Asphalt);
  --color-btn-secondary-text-hover: var(--Snow);
}
.dark-mode {
  --color-cycle-text-inactive: var(--Snow);
  --color-cycle-text-active: var(--Asphalt);
  --color-cycle-switch-bg: var(--Stone);
  --color-cycle-active-bg: var(--Snow);
}
body {
  background-color: var(--background-fill-color, var(--color-bg));
}
.h0 {
  font: var(--font-h0);
  color: var(--color-text);
  letter-spacing: -0.04em;
}
.h1 {
  font: var(--font-h1);
  color: var(--color-text);
  letter-spacing: -0.04em;
}
.h2 {
  font: var(--font-h2);
  color: var(--color-text);
  letter-spacing: -0.04em;
}
.h3 {
  font: var(--font-h3);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.h4 {
  font: var(--font-h4);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.h5 {
  font: var(--font-h5);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.h6 {
  font: var(--font-h6);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.s1 {
  font: var(--font-s1);
  color: var(--color-text);
  letter-spacing: -0.04em;
}
.s2 {
  font: var(--font-s2);
  color: var(--color-text);
  letter-spacing: -0.02em;
}
.s3 {
  font: var(--font-s3);
  color: var(--color-text);
}
.s4 {
  font: var(--font-s4);
  color: var(--color-text);
}
.s5 {
  font: var(--font-s5);
  color: var(--color-text);
}
.b1 {
  font: var(--font-b1);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.b2 {
  font: var(--font-b2);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.b3 {
  font: var(--font-b3);
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.c1 {
  font: var(--font-c1);
  color: var(--color-text);
}
.c2 {
  font: var(--font-c2);
  color: var(--color-text);
}
.content {
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
}
@media (min-width: 768px) {
.content {
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.content {
    padding: 0 72px;
}
}
.grid-12 {
  --gridGap: 1rem;
  width: 100%;
  max-width: 1440px;
  padding: 0 24px;
  display: grid;
  gap: var(--gridGap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (min-width: 768px) {
.grid-12 {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    padding: 0 2rem;
}
}
@media (min-width: 1024px) {
.grid-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    padding: 0 72px;
}
}
:root {
  --gridRowPadding: 24px;
}
@media (min-width: 768px) {
:root {
    --gridRowPadding: 2rem;
}
}
@media (min-width: 1024px) {
:root {
    --gridRowPadding: 72px;
}
}
:root {
  --gridRowColNum: 20;
}
@media (max-width: 1300px) {
:root {
    --gridRowColNum: 18;
}
}
@media (max-width: 1200px) {
:root {
    --gridRowColNum: 16;
}
}
@media (max-width: 1000px) {
:root {
    --gridRowColNum: 14;
}
}
@media (max-width: 900px) {
:root {
    --gridRowColNum: 12;
}
}
@media (max-width: 768px) {
:root {
    --gridRowColNum: 10;
}
}
@media (max-width: 480px) {
:root {
    --gridRowColNum: 8;
}
}
@media (max-width: 360px) {
:root {
    --gridRowColNum: 6;
}
}
:root {
  --gridRow: calc((min(100cqw, 1440px) - 2 * var(--gridRowPadding)) / var(--gridRowColNum));
}
.uxfolio-app-root > main {
  container-type: inline-size;
}
.grid-20 {
  --gridGap: 0;
  --colNum: 20;
}
@media (max-width: 1300px) {
.grid-20 {
    --colNum: 18;
}
}
@media (max-width: 1200px) {
.grid-20 {
    --colNum: 16;
}
}
@media (max-width: 1000px) {
.grid-20 {
    --colNum: 14;
}
}
@media (max-width: 900px) {
.grid-20 {
    --colNum: 12;
}
}
@media (max-width: 768px) {
.grid-20 {
    --colNum: 10;
}
}
@media (max-width: 480px) {
.grid-20 {
    --colNum: 8;
}
}
@media (max-width: 360px) {
.grid-20 {
    --colNum: 6;
}
}
.grid-20 {
  --gridFixer: 0;
}
@media (min-width: 1001px) {
.grid-20 {
    --gridFixer: 1;
}
}
@media (min-width: 1201px) {
.grid-20 {
    --gridFixer: 2;
}
}
@media (min-width: 1301px) {
.grid-20 {
    --gridFixer: 3;
}
}
.grid-20 {
  width: 100%;
  max-width: 1440px;
  display: grid;
  grid-template-columns: repeat(var(--colNum), minmax(0, var(--gridRow)));
  grid-auto-rows: var(--gridRow);
  gap: 0;
}
@media (min-width: 1456px) {
.grid-20 {
    grid-template-columns: repeat(var(--colNum), minmax(0, 65.6px));
    grid-auto-rows: 65.6px;
}
}
html[data-prerendered] .grid-20 {
  grid-auto-rows: minmax(var(--gridRow), auto);
  align-content: start;
}
@media (min-width: 1456px) {
html[data-prerendered] .grid-20 {
    grid-auto-rows: minmax(65.6px, auto);
}
}
html[data-prerendered] .grid-20 > .grid-item {
  align-self: start;
  min-height: var(--gridRow);
}
.divider {
  height: 0.5rem;
  align-self: stretch;
  background-color: var(--Volt);
}
@media (min-width: 1024px) {
.divider {
    height: 0.75rem;
}
}
p a {
  color: var(--color-text);
  text-decoration: underline;
}
p a:hover {
  color: var(--color-text);
  text-decoration: underline;
}
nav a {
  text-decoration: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  padding: 0.25rem 0;
  gap: 0.5rem;
  color: var(--color-nav-link-text);
  font-family: var(--font-headline-family);
  font-size: 0.75rem;
  font-weight: 450;
  line-height: 1;
  letter-spacing: -0.0225rem;
}
@media (min-width: 768px) {
nav a {
    font-size: 0.875rem;
    letter-spacing: -0.0175rem;
}
}
@media (min-width: 1024px) {
nav a {
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
}
}
nav a {
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-nav-link-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-in-out;
}
nav a:hover, nav a.router-link-active {
  color: var(--color-text);
}
nav a:hover::after, nav a.router-link-active::after {
  transform: scaleX(1);
}
nav a span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
nav a span::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
nav a span::after {
    display: none;
}
}
.divider {
  height: 8px;
}
a.report-ribbon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 14px 16px;
  background-color: #DCFA37;
  color: #0F0F0F;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
}
a.report-ribbon:hover, a.report-ribbon:visited, a.report-ribbon:active, a.report-ribbon:focus {
  color: #0F0F0F;
  text-decoration: none;
}
a.report-ribbon:hover .report-ribbon-cta::after {
  transform: scaleX(1);
}
a.report-ribbon:hover .report-ribbon-cta-arrow {
  transform: translateX(4px);
}
a.report-ribbon .report-ribbon-text {
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 22px;
  letter-spacing: 0.15px;
}
a.report-ribbon .report-ribbon-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  white-space: nowrap;
  font-weight: 600;
}
a.report-ribbon .report-ribbon-cta::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease;
}
a.report-ribbon .report-ribbon-cta-arrow {
  display: inline-block;
  transition: transform 220ms ease;
}
@media (max-width: 640px) {
a.report-ribbon {
    min-height: 56px;
    padding: 14px 12px;
}
a.report-ribbon .report-ribbon-text {
    font-size: 13px;
    line-height: 18px;
}
}
header {
  border-radius: 0.16606rem;
  background-color: var(--color-bg);
  display: flex;
  justify-content: center;
  position: sticky;
  -webkit-position: sticky;
  top: 0;
  z-index: 30;
}
header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--Asphalt-20);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}
header.show-border::after {
  opacity: 1;
}
header .content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
@media (min-width: 768px) {
header .logo {
    display: flex;
    flex: 1 0 0;
    justify-content: flex-start;
}
}
@media (max-width: 1023px) {
header .logo {
    width: auto;
}
header .logo a {
    width: 6rem;
}
header .logo svg {
    width: 100%;
}
}
header nav {
  display: flex;
  align-items: center;
  gap: 1.71556rem;
  align-self: stretch;
}
header nav svg {
  display: none;
}
header nav button.login {
  margin: 0.625rem 0;
}
@media (max-width: 767px) {
header nav {
    order: 3;
    width: 100%;
    height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}
header nav.on {
    height: calc(100vh - 5.1rem);
    padding-top: 1.63rem;
}
header nav a {
    width: 100%;
    font-size: 1.1875rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
}
header nav a svg {
    display: block;
}
}
@media (min-width: 768px) {
header nav button.login {
    display: none;
}
}
header .actions {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
header .actions {
    flex: 1 0 0;
    justify-content: flex-end;
}
}
@media (max-width: 767px) {
header .actions button.login {
    display: none;
}
}
@media (min-width: 768px) {
header .actions button.toggler {
    display: none;
}
}
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
footer .top-footer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  padding: 1rem 0;
}
@media (min-width: 768px) {
footer .top-footer {
    flex-direction: row;
    padding: 4rem 0;
    gap: 3.75rem;
}
}
@media (min-width: 1280px) {
footer .top-footer {
    padding: 7.5rem 0;
}
}
footer .top-footer .site-map {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 1rem;
  align-items: flex-start;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map {
    padding-top: 0.5rem;
    flex-direction: row;
    flex-wrap: wrap;
    gap: unset;
    width: unset;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map {
    width: 59.25rem;
    max-width: 100%;
}
}
footer .top-footer .site-map .category {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
@media (min-width: 768px) {
footer .top-footer .site-map .category {
    flex: 50%;
    width: unset;
    margin-bottom: 0.87rem;
}
}
@media (min-width: 1200px) {
footer .top-footer .site-map .category {
    flex: 1 0 0;
    margin-bottom: 0;
}
}
@media (max-width: 768px) {
footer .top-footer .site-map .category {
    gap: 0;
}
footer .top-footer .site-map .category nav {
    height: 0;
    overflow: hidden;
    display: none;
}
footer .top-footer .site-map .category.expanded nav {
    height: max-content;
    display: flex;
}
footer .top-footer .site-map .category.expanded .footer-category-arrow {
    transform: rotate(-90deg);
}
}
footer .top-footer .site-map .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 3.0625rem;
  width: 100%;
  padding: 0.75rem 0;
  color: var(--color-text);
  font-family: var(--font-headline-family);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.5;
}
footer .top-footer .site-map .title .footer-category-arrow {
  flex-shrink: 0;
  color: currentColor;
  transform: rotate(90deg);
  transition: transform 200ms ease;
}
@media (min-width: 768px) {
footer .top-footer .site-map .title {
    height: 3rem;
    font-size: 1.125rem;
    font-weight: 500;
}
footer .top-footer .site-map .title .footer-category-arrow {
    display: none;
}
}
footer .top-footer .site-map nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  align-self: stretch;
}
footer .top-footer .site-map nav a {
  font-size: 0.875rem;
}
footer .top-footer .site-map nav a.has-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
footer .top-footer .site-map nav .footer-link-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(0.125rem + 1px) 0.375rem;
  border-radius: 0.25rem;
  background-color: var(--Volt);
  color: var(--Asphalt);
  font-family: var(--font-body-family);
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
footer .bottom-footer {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  gap: 1rem;
}
@media (min-width: 768px) {
footer .bottom-footer {
    flex-direction: row;
    align-items: center;
    padding: 1.5rem 0;
}
}
footer .bottom-footer .cc {
  padding: 0.875rem 0;
}
footer .controls {
  display: flex;
  align-items: flex-start;
  gap: 24px;
}
footer .controls button {
  font-size: 0.75rem;
}
footer .controls .footer-back-to-top-arrow {
  transform: rotate(-90deg);
}
.landing-cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  height: 2.75rem;
  padding: 0 20px;
  font-family: var(--font-headline-family);
  font-weight: 500;
  line-height: 1;
  font-size: 0.875rem;
  letter-spacing: -0.015rem;
  border: 2px solid;
  transition: all 200ms ease-in-out;
  gap: 0.375rem;
}
.landing-cta svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 768px) {
.landing-cta {
    height: 3rem;
    font-size: 1rem;
    letter-spacing: -0.0175rem;
    padding: 0 20px;
}
}
@media (min-width: 1024px) {
.landing-cta {
    height: 3.375rem;
    font-size: 1.125rem;
    letter-spacing: -0.0225rem;
    padding: 0 20px;
    gap: 0.5rem;
}
.landing-cta svg {
    width: 1.5rem;
    height: 1.5rem;
}
}
.landing-cta:focus {
  outline: none;
}
.landing-cta span {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.landing-cta span::after {
  content: attr(data-label);
  content: attr(data-label)/"";
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 700;
}
@media speech {
.landing-cta span::after {
    display: none;
}
}
.landing-cta.primary, .landing-cta.submit {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 20px;
  border-radius: 8px;
  background-color: var(--color-btn-primary-bg);
  border-color: var(--color-btn-primary-border);
  color: var(--color-btn-primary-text);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
}
.landing-cta.primary svg path, .landing-cta.submit svg path {
  fill: var(--color-btn-primary-text);
  transition: fill 300ms ease-in-out;
}
.landing-cta.primary:not(.toggler):hover svg, .landing-cta.submit:not(.toggler):hover svg {
  transform: translateX(3px);
}
.landing-cta.secondary {
  box-sizing: border-box;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 450;
  letter-spacing: 0;
  border-width: 1px;
  background-color: var(--color-btn-secondary-bg);
  border-color: var(--color-btn-secondary-border);
  color: var(--color-btn-secondary-text);
  border-radius: 8px;
}
.landing-cta.secondary svg path {
  fill: var(--color-btn-secondary-text);
  transition: fill 300ms ease-in-out;
}
.landing-cta.secondary:not(.toggler):hover svg {
  transform: translateX(3px);
}
.landing-cta.tertiary {
  box-sizing: border-box;
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  font-size: 14px;
  font-weight: 450;
  background-color: var(--color-btn-tertiary-bg);
  border-color: var(--color-btn-tertiary-border);
  color: var(--color-btn-tertiary-text);
  border-radius: 8px;
}
.landing-cta.tertiary svg {
  transform: translateY(-1px);
}
.landing-cta.tertiary:hover svg {
  transform: translate(3px, -1px);
}
.landing-cta.inline {
  background-color: var(--color-btn-inline-bg);
  border-color: var(--color-btn-inline-border);
  color: var(--color-btn-inline-text);
  padding: 0.25rem 0;
  position: relative;
  border: none;
  height: unset;
}
.landing-cta.inline svg path {
  fill: var(--color-btn-inline-text);
  transition: fill 200ms ease-in-out;
}
.landing-cta.inline::after {
  content: "";
  position: absolute;
  bottom: -0.25rem;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: var(--color-nav-link-text);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 220ms ease-in-out;
}
.landing-cta.inline:hover::after, .landing-cta.inline.active::after {
  transform: scaleX(1);
}
.landing-cta.has-arrow {
  gap: 4px;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-cta.has-arrow .button-arrow-icon {
  transition: transform 220ms ease-in-out;
}
.landing-cta.has-arrow:hover .button-arrow-icon {
  transform: translateX(3px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow {
  position: relative;
  overflow: hidden;
  gap: 0;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow .button-arrow-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  opacity: 0;
  transform: translate(-12px, -50%);
  transition: transform 220ms ease-in-out, opacity 180ms ease-in-out;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow span {
  transition: transform 220ms ease-in-out;
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow.tertiary .button-arrow-icon {
  top: 50%;
  transform: translate(-12px, -50%);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover .button-arrow-icon {
  opacity: 1;
  transform: translate(0, -50%);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover span {
  transform: translateX(8px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover.tertiary span {
  transform: translateX(6px);
}
.landing-cta.hover-arrow-on-no-arrow.has-arrow:hover.tertiary .button-arrow-icon {
  transform: translate(0, -50%);
}
.public-page-icon-button {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.landing ::selection {
  background: var(--Volt);
  color: black;
}
.landing .logo svg path {
  fill: var(--color-text);
}
.landing .features-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 24px 64px;
  text-align: center;
}
.landing .features-intro .h3 {
  max-width: 640px;
  margin: 0;
}
.landing .features-intro .features-intro-highlight {
  position: relative;
  display: inline-block;
}
.landing .features-intro .features-intro-highlight-text {
  position: relative;
  z-index: 1;
}
.landing .features-intro .features-intro-highlight img {
  position: absolute;
  left: 50%;
  bottom: -0.26em;
  z-index: 0;
  width: 112%;
  height: 0.72em;
  max-width: none;
  transform: translateX(-50%);
  pointer-events: none;
}