.accordion__icon {
    transition-duration: .4s;
    transition-timing-function: cubic-bezier(.25, .74, .22, .99)
}

.sticky {
    display: grid;
    grid-auto-rows: 1fr;
    grid-template-areas:"sticky_content";
    grid-template-columns:1fr;
    grid-template-rows:auto
}

.sticky__layer {
    align-self: start;
    grid-area: sticky_content;
    min-width: 0
}

.sticky__layer--top {
    position: relative;
    z-index: 1
}

.sticky__layer--sticky {
    position: sticky;
    top: 0
}

.has-scroll-smooth .sticky__layer--sticky {
    position: relative
}

.sticky__spacer {
    height: 100vh
}

.sticky--under-previous {
    margin-top: -100vh;
    position: relative
}

.sticky--under-previous:after {
    content: "";
    display: block;
    height: 100vh
}

.sticky--under-next {
    margin-bottom: -100vh;
    position: relative
}

.sticky--under-next:after {
    content: "";
    display: block;
    height: 100vh
}

.sticky--under-previous.sticky--under-next .sticky__layer--sticky {
    max-height: 200vh
}

.sticky--under-previous.sticky--under-next:after {
    height: 200vh
}

.sticky--full-height, .sticky--full-height .sticky__layer {
    min-height: 100vh
}

.sticky--full-height .sticky__layer--sticky {
    height: 100vh
}

@media (min-width: 980px) {
    .sticky--full-height\:lg, .sticky--full-height\:lg .sticky__layer {
        min-height: 100vh
    }

    .sticky--full-height\:lg .sticky__layer--sticky {
        height: 100vh
    }
}

.accordion__icon {
    transition-property: transform
}

a.is-active .accordion__icon {
    transform: rotate(-180deg)
}

.js .accordion__content[aria-hidden=true] {
    display: none
}

@media print {
    .js .accordion__content[aria-hidden=true] {
        display: unset !important
    }
}

.carousel {
    --item-spacing: var(--spacing);
    position: relative
}

.carousel__list__inner {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    cursor: grab;
    display: flex;
    position: relative;
    touch-action: pan-y;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.carousel__list__inner:before {
    content: "";
    height: 100%;
    left: -1000px;
    position: absolute;
    right: -1000px
}

.carousel__list__inner[data-keen-slider-moves] {
    cursor: grabbing
}

.carousel__list__inner[data-keen-slider-moves] * {
    pointer-events: none
}

.carousel__list__item {
    max-width: 100%;
    min-width: 100%;
    position: relative;
    width: 100%
}

.no-js .carousel__nav {
    opacity: 0;
    pointer-events: none
}

.carousel__counter {
    bottom: var(--spacing);
    left: 50%;
    position: absolute;
    transform: translateX(-50%)
}

.carousel:not(.carousel--md-up) .carousel__list__inner {
    margin-left: calc(var(--item-spacing) * -1)
}

.carousel:not(.carousel--md-up) .carousel__list__item {
    margin-left: 0;
    padding-left: var(--item-spacing)
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .carousel--md-up .carousel__list__inner {
        touch-action: auto
    }

    .carousel--md-up .carousel__list__inner:before {
        display: none
    }

    .carousel--md-up .carousel__list__item {
        min-width: 0
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .carousel--md-up .carousel__list__inner {
        margin-left: calc(var(--item-spacing) * -1)
    }

    .carousel--md-up .carousel__list__item {
        margin-left: 0;
        padding-left: var(--item-spacing)
    }
}

.carousel--no-spacing:not(.carousel--md-up) .carousel__list__inner {
    margin-left: 0
}

.carousel--no-spacing:not(.carousel--md-up) .carousel__list__item {
    padding-left: 0
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .carousel--no-spacing.carousel--md-up .carousel__list__inner {
        margin-left: 0
    }

    .carousel--no-spacing.carousel--md-up .carousel__list__item {
        padding-left: 0
    }

    .carousel--no-overflow.carousel--md-up .carousel__list {
        overflow: hidden
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
}

.carousel--not-ready:not(.carousel--md-up) .is-hidden--not-ready {
    display: none !important
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .carousel--not-ready.carousel--md-up .is-hidden--not-ready {
        display: none !important
    }
}

.background {
    left: 0;
    overflow: hidden;
    overflow: clip;
    position: absolute;
    top: 0
}

.background iframe {
    pointer-events: none
}

.background _::-webkit-full-page-media, .background _:future, .background:has(iframe):after {
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.background img, img.background {
    display: block;
    height: auto;
    width: 100%
}

.background--top {
    width: 100%
}

.background--bottom {
    bottom: 0;
    top: auto;
    width: 100%
}

.background--cover {
    --iframe-width: var(--vw100);
    --iframe-height: 100vh;
    height: 100%;
    width: 100%
}

.background--cover img, .background--cover video, img.background--cover, video.background--cover {
    aspect-ratio: unset;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%
}

.background--cover iframe {
    aspect-ratio: unset;
    height: max(100%, calc(var(--iframe-width) / var(--ratio)));
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: max(100%, calc(var(--iframe-height) * var(--ratio)))
}

.parallax-image-move {
    overflow: hidden;
    overflow: clip
}

.parallax-image-move img {
    margin-bottom: var(--md, -.90909) var(--n-md, 0);
    -o-object-fit: cover;
    object-fit: cover;
    position: relative
}

.parallax-image-move.background--cover img {
    height: var(--md, 110%) var(--n-md, 100%);
    margin-bottom: 0
}

.parallax-image-move.background--top-cover img {
    height: var(--md, 110%) var(--n-md, auto);
    margin-bottom: 0
}

@media (max-width: 979px) {
    .mobile-scrollable {
        --scrollable-item-width: var(--md, calc(var(--grid-col) * 6 + var(--grid-gutter) * 5)) var(--n-md, var(--sm, var(--grid-col)) var(--n-sm, 83.33333vw));
        --scrollable-item-gap: var(--lg, var(--grid-gutter)) var(--n-lg, calc(var(--scale-px) * 10));
        --scrollable-side-gap: 0px;
        --_side-offset: var(--container-h-padding-left);
        display: flex;
        flex-wrap: nowrap;
        gap: var(--scrollable-item-gap) !important;
        margin-left: calc(var(--_side-offset) * -1);
        margin-right: calc(var(--_side-offset) * -1);
        overflow-x: scroll;
        overflow-y: hidden;
        padding: 0 0 0 calc(var(--scrollable-side-gap) + var(--_side-offset));
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        max-width: 100%;
        width: 100%
    }

    .mobile-scrollable::-webkit-scrollbar {
        display: none
    }

    .mobile-scrollable:after {
        content: "";
        display: block;
        flex: 0 0 calc(var(--scrollable-side-gap) + var(--_side-offset));
        height: 1px;
        margin-left: calc(var(--scrollable-item-gap) * -1);
        position: relative;
        width: calc(var(--scrollable-side-gap) + var(--_side-offset))
    }

    .mobile-scrollable .mobile-scrollable__item {
        flex: 0 0 var(--scrollable-item-width);
        scroll-snap-align: center;
        width: var(--scrollable-item-width)
    }

    .mobile-scrollable.mobile-scrollable--center {
        --scrollable-side-gap: calc((100% - var(--scrollable-item-width)) / 2)
    }

    .mobile-scrollable.mobile-scrollable--auto {
        --scrollable-item-width: auto
    }

    .mobile-scrollable.mobile-scrollable--auto .mobile-scrollable__item {
        scroll-snap-align: unset
    }
}

.content-animation {
    position: relative
}

.content-animation [data-content-animation-item] {
    left: 0;
    min-width: 100%;
    position: relative;
    top: 0
}

.content-animation.content-animation--ready [data-content-animation-item] {
    position: absolute
}

.content-animation.content-animation--ready [data-content-animation-top] {
    position: relative
}

.content-animation.content-animation--ready [data-content-animation-top] ~ [data-content-animation-top] {
    position: absolute
}

.content-animation--bottom {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.content-animation--bottom [data-content-animation-item] {
    bottom: 0;
    top: auto
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .content-animation--bottom\:md {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-end
    }

    .content-animation--bottom\:md [data-content-animation-item] {
        bottom: 0;
        top: auto
    }
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .content-animation--bottom\:xs {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-end
    }

    .content-animation--bottom\:xs [data-content-animation-item] {
        bottom: 0;
        top: auto
    }
}

.intro-sticky {
    overflow: visible;
    position: relative
}

.intro-sticky:before {
    content: " ";
    display: table
}

.intro-sticky__section {
    min-height: var(--lg, auto) var(--n-lg, 150vh);
    position: relative
}

.intro-sticky__section__content {
    position: relative
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .intro-sticky__section {
        bottom: -100vh;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .intro-sticky__section__content {
        height: 100vh;
        overflow: hidden;
        position: sticky;
        top: 0
    }

    .has-scroll-smooth .intro-sticky__section__content {
        position: relative
    }

    .intro-sticky__section__content.intro-video {
        height: auto;
        max-height: none;
        min-height: 240dvh;
        overflow: visible
    }

    .has-scroll-smooth .intro-sticky__section__content.intro-video {
        min-height: 240dvh;
        overflow: visible
    }
}

.intro-sticky__section--top {
    z-index: 1
}

#intro-top.intro-sticky__section {
    pointer-events: none
}

#intro-top .intro-sticky__section__content.intro-video {
    pointer-events: auto
}

:root {
    --hero-header-offset: calc(var(--announcement-bar-height, 40px) + var(--header-height, calc(var(--scale-px) * 80)) + clamp(10px, 1.5vh, 20px))
}

#intro-top .intro {
    isolation: isolate;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

#intro-top .intro,
#intro-top a,
#intro-top button {
    pointer-events: auto
}

.intro-sticky__section__content.intro-video {
    height: auto;
    isolation: isolate;
    max-height: none;
    min-height: 240dvh;
    overflow: visible;
    z-index: 2
}

.intro-sticky__section__content.intro-video .container-h.intro__bottom {
    bottom: auto;
    height: var(--hero-collage-h, 34vh);
    left: 0;
    margin: 0;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
    position: absolute;
    right: 0;
    top: calc(100dvh - var(--hero-collage-h, 34vh));
    width: 100%;
    z-index: 5
}

.intro-sticky__section__content.intro-video .container-h.intro-video__container {
    align-items: flex-end;
    bottom: auto;
    box-sizing: border-box;
    display: flex;
    height: calc(100dvh - var(--hero-text-max, 48vh) - var(--hero-collage-h, 34vh));
    justify-content: center;
    isolation: isolate;
    left: 0;
    margin: 0;
    max-height: calc(100dvh - var(--hero-text-max, 48vh) - var(--hero-collage-h, 34vh));
    max-width: none;
    padding-bottom: clamp(calc(var(--scale-px) * 8), 1vh, calc(var(--scale-px) * 20));
    padding-left: var(--container-h-padding-left, 20px);
    padding-right: var(--container-h-padding-right, 20px);
    position: absolute;
    right: 0;
    top: var(--hero-text-max, 48vh);
    width: 100%;
    z-index: 15
}

.intro-sticky__section__content.intro-video .intro__bottom__inner,
.intro-sticky__section__content.intro-video .intro__bottom__image,
.intro-sticky__section__content.intro-video .intro__bottom__image__item,
.intro-sticky__section__content.intro-video .intro__bottom__image__item video {
    opacity: 1;
    visibility: visible
}

.intro-sticky__section__content.intro-video .intro-video__content.tablet-preview {
    height: auto;
    margin: 0 auto;
    max-height: var(--hero-video-center-h, min(28vh, calc(var(--hero-collage-h, 34vh) * 0.78)));
    max-width: var(--hero-video-center-w, min(38vw, calc(var(--scale-px) * 460)));
    width: auto
}

.intro-sticky__section__content.intro-video .intro-video__tablet {
    display: block;
    height: auto;
    line-height: 0;
    max-width: 100%;
    position: relative;
    transform: translate3d(0, 100%, 0) scale(.5);
    transform-origin: center top;
    width: auto
}

.intro-sticky__section__content.intro-video .intro-video__player {
    /* Matches the grey video placeholder in screen-image-1 (measured px bounds
       of the 1760x1193 asset: x 640-1600, y 314-859). */
    bottom: 28%;
    right: 9.1%;
    top: 26.3%;
    width: 54.55%
}

.intro-sticky__section__content.intro-video .intro-video__tablet > picture:not(.intro-video__tablet__image) {
    display: block;
    height: auto;
    left: auto;
    max-height: var(--hero-video-center-h, var(--hero-collage-h, 34vh));
    max-width: 100%;
    position: relative;
    right: auto;
    top: auto;
    width: auto
}

.intro-sticky__section__content.intro-video .intro-video__tablet > picture:not(.intro-video__tablet__image) img {
    display: block;
    height: auto;
    max-height: var(--hero-video-center-h, var(--hero-collage-h, 34vh));
    max-width: 100%;
    width: auto
}

.intro-sticky__section__content.intro-video .intro-video__tablet > picture.intro-video__tablet__image {
    height: auto;
    left: 0;
    max-height: var(--hero-video-center-h, var(--hero-collage-h, 34vh));
    max-width: 100%;
    position: absolute;
    right: auto;
    top: 0;
    width: 100%
}

.intro-sticky__section__content.intro-video .intro-video__tablet > picture.intro-video__tablet__image img {
    display: block;
    height: auto;
    max-height: var(--hero-video-center-h, var(--hero-collage-h, 34vh));
    width: 100%
}

@media (min-width: 980px) {
    .intro-sticky__section__content.intro-video .intro__bottom__video-placeholder {
        aspect-ratio: 640 / 364;
        bottom: 0;
        height: var(--hero-video-landed-h, var(--hero-collage-h, 34vh));
        left: 50%;
        max-width: var(--hero-video-landed-w, min(44vw, calc(var(--scale-px) * 520)));
        transform: translateX(-50%);
        width: auto
    }
}

#intro-top .intro__container {
    height: auto;
    max-height: none
}

#intro-top .intro__content {
    padding-top: max(var(--hero-header-offset), clamp(calc(var(--scale-px) * 125), 19vh, calc(var(--scale-px) * 230)))
}

#intro-top .hero-copy-row__text .text-lead {
    --lh: 1.45;
    line-height: 1.45
}

#intro-top .hero-copy-row__text .leading-trim:before,
#intro-top .hero-copy-row__text .leading-trim:after {
    content: none;
    display: none;
    margin: 0
}

#intro-top .hero-copy-row__centered-line {
    display: block;
    line-height: 1.45;
    padding-bottom: 0.12em
}

#intro-top .intro-content h2.text-h2-md {
    margin-top: 0
}

@media (min-width: 980px) {
    :root {
        --hero-collage-h: 36vh;
        --hero-text-max: 53vh;
        --hero-video-landed-h: 42vh;
        --hero-video-landed-w: min(52vw, calc(var(--scale-px) * 820));
        --hero-video-center-h: 52vh;
        --hero-video-center-w: min(46vw, calc(var(--scale-px) * 830))
    }

    #intro-top .intro__content {
        max-height: none;
        overflow: visible;
        padding-bottom: clamp(calc(var(--scale-px) * 12), 1.5vh, calc(var(--scale-px) * 24))
    }

    #intro-top .intro__container {
        padding-bottom: clamp(calc(var(--scale-px) * 48), 5.5vh, calc(var(--scale-px) * 64));
        position: relative
    }

    #intro-top .intro__scroll-button-outer {
        align-items: center;
        aspect-ratio: 1;
        bottom: 0;
        display: inline-flex;
        height: var(--btn-height);
        justify-content: center;
        left: calc(var(--spacing) + var(--container-h-padding-left));
        min-width: var(--btn-height);
        position: absolute;
        top: auto;
        width: var(--btn-height)
    }

    #intro-top .intro__scroll-button-outer .btn__content {
        justify-content: center;
        width: 100%
    }

    #intro-top .intro__title {
        margin-bottom: clamp(calc(var(--scale-px) * 18), 2vh, calc(var(--scale-px) * 36));
        padding-bottom: clamp(calc(var(--scale-px) * 18), 2vh, calc(var(--scale-px) * 36))
    }
}

@media (min-width: 980px) and (max-height: 850px) {
    :root {
        --hero-text-max: 50vh
    }

    #intro-top .intro__content {
        padding-top: max(var(--hero-header-offset), clamp(calc(var(--scale-px) * 88), 12vh, calc(var(--scale-px) * 140)))
    }

    #intro-top .intro__title {
        margin-bottom: clamp(calc(var(--scale-px) * 12), 1.5vh, calc(var(--scale-px) * 24));
        padding-bottom: clamp(calc(var(--scale-px) * 12), 1.5vh, calc(var(--scale-px) * 24))
    }

    .intro-sticky__section__content.intro-video .container-h.intro-video__container {
        top: 52vh
    }
}

@media (max-width: 979px) {
    :root {
        --hero-collage-h: clamp(148px, 50vw, 228px);
        --hero-text-max: 50dvh
    }

    .intro-sticky__section__content.intro-video {
        min-height: 200dvh
    }

    #intro-top.intro-sticky__section {
        min-height: 0
    }

    #intro-top .intro__container,
    #intro-top .intro__content {
        max-height: none;
        overflow: visible
    }

    #intro-top .intro__content {
        padding-bottom: clamp(calc(var(--scale-px) * 10), 2dvh, calc(var(--scale-px) * 20))
    }

    #intro-top .intro__content {
        padding-top: max(var(--hero-header-offset), clamp(calc(var(--scale-px) * 88), 12dvh, calc(var(--scale-px) * 130)))
    }

    #intro-top .intro__title {
        font-size: clamp(calc(var(--scale-text-rem) * 2.7), 7.5vw, calc(var(--scale-text-rem) * 3.4)) !important;
        line-height: 1.08;
        margin-bottom: clamp(calc(var(--scale-px) * 8), 1.5vw, calc(var(--scale-px) * 16));
        padding-bottom: clamp(calc(var(--scale-px) * 8), 1.5vw, calc(var(--scale-px) * 16))
    }

    #intro-top .hero-copy-row__text .text-lead {
        font-size: clamp(calc(var(--scale-text-rem) * 1.4), 3.6vw, calc(var(--scale-text-rem) * 1.55));
        line-height: 1.45;
        text-align: left
    }

    #intro-top .hero-copy-row__centered-line {
        text-align: left
    }
}

.intro-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center
}

.intro-sticky .intro-content,
.intro-sticky .intro-prepare {
    isolation: isolate;
    position: relative;
    z-index: 6
}

.intro-content__card {
    display: flex;
    justify-content: flex-start
}

.intro-content--left .intro-content__text, .intro-content--right .intro-content__text {
    max-width: var(--xxxl, calc(var(--scale-px) * 500)) var(--n-xxxl, calc(var(--scale-px) * 380))
}

.intro-content--center .intro-content__text {
    max-width: var(--xxxl, calc(var(--scale-px) * 760)) var(--n-xxxl, calc(var(--scale-px) * 580))
}

.l-intro-arrow-down .btn__text {
    display: flex;
    height: calc(var(--scale-px) * 22);
    overflow: hidden;
    position: relative;
    width: calc(var(--scale-px) * 22)
}

.l-intro-arrow-down .icon {
    animation: intro-arrow-down 1.8s infinite
}

.l-intro-arrow-down .icon + .icon {
    animation: intro-arrow-down-2 1.8s infinite;
    left: 0;
    position: absolute;
    top: 0;
    transform: translateY(-22px)
}

@keyframes intro-arrow-down {
    0% {
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
        transform: translateY(0)
    }
    33.33%, to {
        transform: translateY(calc(var(--scale-px) * 22))
    }
}

@keyframes intro-arrow-down-2 {
    0% {
        animation-timing-function: cubic-bezier(.65, 0, .35, 1);
        transform: translateY(calc(var(--scale-px) * -22))
    }
    33.33%, to {
        transform: translateY(0)
    }
}

.intro {
    position: absolute;
    top: 0;
    width: 100%
}

.intro__container {
    height: 100vh;
    position: relative;
    z-index: 1
}

.intro__content {
    display: flex;
    flex-direction: column;
    padding-top: var(--xxxl, calc(var(--scale-px) * 230)) var(--n-xxxl, var(--lg, 19.11111vh) var(--n-lg, var(--md, 30vh) var(--n-md, calc(var(--scale-px) * 125))))
}

.intro__title {
    border-bottom: 1px solid var(--t-line);
    margin-bottom: var(--xxxl, calc(var(--scale-px) * 60)) var(--n-xxxl, var(--md, calc(var(--scale-px) * 40)) var(--n-md, calc(var(--scale-px) * 30)));
    padding-bottom: var(--xxxl, calc(var(--scale-px) * 60)) var(--n-xxxl, var(--md, calc(var(--scale-px) * 40)) var(--n-md, calc(var(--scale-px) * 30)))
}

.intro__scroll-button {
    z-index: 3
}

.intro__scroll-button-outer {
    bottom: calc(var(--spacing) + 100lvh - 100svh);
    left: calc(var(--spacing) + var(--container-h-padding-left));
    position: absolute;
    z-index: 3
}

.intro__scroll-target {
    bottom: 50vh;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0
}

.intro__bottom {
    bottom: var(--lg, -6vh) var(--n-lg, var(--md, calc(100lvh - 100svh - 15px)) var(--n-md, calc(100lvh - 100svh - 10px)));
    height: var(--lg, 36vh) var(--n-lg, var(--md, calc(var(--scale-px) * 220)) var(--n-md, 60vw));
    left: 0;
    position: absolute;
    right: 0
}

.intro__bottom__inner {
    height: 100%;
    position: relative;
    width: 100%;
    z-index: 2
}

.intro__bottom__image {
    height: 100%;
    left: 0;
    position: absolute;
    transform-origin: center bottom;
    width: 100%
}

.intro__bottom__image__item {
    bottom: 0;
    position: absolute
}

.intro__bottom__image__item:before {
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1
}

.intro__bottom__image__item img {
    display: none
}

.intro__bottom__image__item video {
    display: block;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.intro__bottom__image__item--1 {
    -webkit-clip-path: polygon(0 5.372%, 0 5.372%, .025% 4.935%, .102% 4.506%, .227% 4.085%, .401% 3.676%, .621% 3.28%, .886% 2.899%, 1.195% 2.536%, 1.546% 2.193%, 1.939% 1.872%, 2.371% 1.575%, 2.371% 1.575%, 2.837% 1.308%, 3.328% 1.073%, 3.842% .873%, 4.376% .706%, 4.926% .574%, 5.489% .478%, 6.063% .418%, 6.643% .395%, 7.227% .41%, 7.812% .463%, 94.389% 11.106%, 94.389% 11.106%, 95.333% 11.275%, 96.217% 11.536%, 97.03% 11.883%, 97.764% 12.306%, 98.41% 12.798%, 98.959% 13.351%, 99.401% 13.957%, 99.728% 14.609%, 99.931% 15.297%, 100% 16.015%, 100% 84.452%, 100% 84.452%, 99.93% 85.17%, 99.727% 85.858%, 99.399% 86.508%, 98.956% 87.114%, 98.408% 87.666%, 97.762% 88.158%, 97.028% 88.581%, 96.215% 88.927%, 95.333% 89.188%, 94.389% 89.356%, 7.812% 100%, 7.812% 100%, 7.228% 100.053%, 6.644% 100.067%, 6.064% 100.044%, 5.491% 99.984%, 4.928% 99.889%, 4.378% 99.757%, 3.844% 99.591%, 3.33% 99.39%, 2.839% 99.156%, 2.373% 98.889%, 2.373% 98.889%, 1.941% 98.593%, 1.549% 98.272%, 1.197% 97.929%, .888% 97.567%, .623% 97.186%, .402% 96.79%, .229% 96.381%, .103% 95.961%, .026% 95.532%, 0 95.096%, 0 5.372%);
    clip-path: polygon(0 5.372%, 0 5.372%, .025% 4.935%, .102% 4.506%, .227% 4.085%, .401% 3.676%, .621% 3.28%, .886% 2.899%, 1.195% 2.536%, 1.546% 2.193%, 1.939% 1.872%, 2.371% 1.575%, 2.371% 1.575%, 2.837% 1.308%, 3.328% 1.073%, 3.842% .873%, 4.376% .706%, 4.926% .574%, 5.489% .478%, 6.063% .418%, 6.643% .395%, 7.227% .41%, 7.812% .463%, 94.389% 11.106%, 94.389% 11.106%, 95.333% 11.275%, 96.217% 11.536%, 97.03% 11.883%, 97.764% 12.306%, 98.41% 12.798%, 98.959% 13.351%, 99.401% 13.957%, 99.728% 14.609%, 99.931% 15.297%, 100% 16.015%, 100% 84.452%, 100% 84.452%, 99.93% 85.17%, 99.727% 85.858%, 99.399% 86.508%, 98.956% 87.114%, 98.408% 87.666%, 97.762% 88.158%, 97.028% 88.581%, 96.215% 88.927%, 95.333% 89.188%, 94.389% 89.356%, 7.812% 100%, 7.812% 100%, 7.228% 100.053%, 6.644% 100.067%, 6.064% 100.044%, 5.491% 99.984%, 4.928% 99.889%, 4.378% 99.757%, 3.844% 99.591%, 3.33% 99.39%, 2.839% 99.156%, 2.373% 98.889%, 2.373% 98.889%, 1.941% 98.593%, 1.549% 98.272%, 1.197% 97.929%, .888% 97.567%, .623% 97.186%, .402% 96.79%, .229% 96.381%, .103% 95.961%, .026% 95.532%, 0 95.096%, 0 5.372%);
    left: 0;
    max-height: 89.01099%;
    width: 19.83051%
}

.intro__bottom__image__item--1 img, .intro__bottom__image__item--1 video {
    aspect-ratio: 149/204;
    max-height: 100%
}

.intro__bottom__image__item--1:before {
    background: rgba(0, 0, 0, .4) linear-gradient(269.55deg, rgba(0, 0, 0, .8) 52.31%, transparent 99.59%)
}

.intro__bottom__image__item--2 {
    -webkit-clip-path: polygon(0 4.416%, 0 4.416%, .022% 4.058%, .085% 3.705%, .19% 3.36%, .335% 3.023%, .519% 2.698%, .74% 2.386%, .998% 2.088%, 1.291% 1.806%, 1.619% 1.543%, 1.979% 1.3%, 1.979% 1.3%, 2.368% 1.081%, 2.777% .889%, 3.206% .724%, 3.651% .588%, 4.11% .48%, 4.579% .402%, 5.057% .354%, 5.541% .335%, 6.027% .348%, 6.514% .392%, 95.341% 11.288%, 95.341% 11.288%, 96.125% 11.427%, 96.858% 11.642%, 97.533% 11.926%, 98.142% 12.273%, 98.679% 12.677%, 99.134% 13.13%, 99.502% 13.626%, 99.773% 14.16%, 99.942% 14.724%, 100% 15.312%, 100% 85.08%, 100% 85.08%, 99.942% 85.668%, 99.773% 86.232%, 99.502% 86.765%, 99.134% 87.262%, 98.679% 87.715%, 98.142% 88.118%, 97.533% 88.465%, 96.858% 88.75%, 96.125% 88.965%, 95.341% 89.104%, 6.514% 100%, 6.514% 100%, 6.027% 100.044%, 5.541% 100.056%, 5.057% 100.038%, 4.579% 99.99%, 4.11% 99.911%, 3.651% 99.804%, 3.206% 99.668%, 2.777% 99.503%, 2.368% 99.311%, 1.979% 99.092%, 1.979% 99.092%, 1.619% 98.849%, 1.291% 98.585%, .998% 98.304%, .74% 98.006%, .519% 97.694%, .335% 97.368%, .19% 97.032%, .085% 96.687%, .022% 96.334%, 0 95.976%, 0 4.416%);
    clip-path: polygon(0 4.416%, 0 4.416%, .022% 4.058%, .085% 3.705%, .19% 3.36%, .335% 3.023%, .519% 2.698%, .74% 2.386%, .998% 2.088%, 1.291% 1.806%, 1.619% 1.543%, 1.979% 1.3%, 1.979% 1.3%, 2.368% 1.081%, 2.777% .889%, 3.206% .724%, 3.651% .588%, 4.11% .48%, 4.579% .402%, 5.057% .354%, 5.541% .335%, 6.027% .348%, 6.514% .392%, 95.341% 11.288%, 95.341% 11.288%, 96.125% 11.427%, 96.858% 11.642%, 97.533% 11.926%, 98.142% 12.273%, 98.679% 12.677%, 99.134% 13.13%, 99.502% 13.626%, 99.773% 14.16%, 99.942% 14.724%, 100% 15.312%, 100% 85.08%, 100% 85.08%, 99.942% 85.668%, 99.773% 86.232%, 99.502% 86.765%, 99.134% 87.262%, 98.679% 87.715%, 98.142% 88.118%, 97.533% 88.465%, 96.858% 88.75%, 96.125% 88.965%, 95.341% 89.104%, 6.514% 100%, 6.514% 100%, 6.027% 100.044%, 5.541% 100.056%, 5.057% 100.038%, 4.579% 99.99%, 4.11% 99.911%, 3.651% 99.804%, 3.206% 99.668%, 2.777% 99.503%, 2.368% 99.311%, 1.979% 99.092%, 1.979% 99.092%, 1.619% 98.849%, 1.291% 98.585%, .998% 98.304%, .74% 98.006%, .519% 97.694%, .335% 97.368%, .19% 97.032%, .085% 96.687%, .022% 96.334%, 0 95.976%, 0 4.416%);
    left: 6.10169%;
    max-height: 89.01099%;
    width: 19.83051%
}

.intro__bottom__image__item--2 img, .intro__bottom__image__item--2 video {
    aspect-ratio: 179/248;
    max-height: 100%
}

.intro__bottom__image__item--2:before {
    background: rgba(0, 0, 0, .2) linear-gradient(269.51deg, rgba(0, 0, 0, .8) 52.19%, transparent 99.55%)
}

.intro__bottom__image__item--3 {
    -webkit-clip-path: polygon(0 3.37%, 0 3.37%, .016% 3.097%, .065% 2.828%, .146% 2.564%, .256% 2.308%, .397% 2.059%, .566% 1.821%, .764% 1.594%, .988% 1.379%, 1.238% 1.178%, 1.514% .992%, 1.514% .992%, 1.811% .825%, 2.125% .678%, 2.453% .553%, 2.793% .449%, 3.144% .367%, 3.503% .307%, 3.868% .27%, 4.238% .256%, 4.61% .266%, 4.983% .299%, 96.436% 11.485%, 96.436% 11.485%, 97.036% 11.591%, 97.597% 11.755%, 98.113% 11.972%, 98.579% 12.237%, 98.989% 12.545%, 99.338% 12.89%, 99.619% 13.269%, 99.827% 13.677%, 99.956% 14.107%, 100% 14.556%, 100% 85.743%, 100% 85.743%, 99.956% 86.192%, 99.827% 86.622%, 99.619% 87.03%, 99.338% 87.409%, 98.989% 87.754%, 98.579% 88.062%, 98.113% 88.327%, 97.597% 88.544%, 97.036% 88.708%, 96.436% 88.814%, 4.983% 100%, 4.983% 100%, 4.61% 100.034%, 4.238% 100.043%, 3.868% 100.029%, 3.503% 99.992%, 3.144% 99.932%, 2.793% 99.85%, 2.453% 99.746%, 2.125% 99.621%, 1.811% 99.474%, 1.514% 99.307%, 1.514% 99.307%, 1.238% 99.121%, .988% 98.92%, .764% 98.705%, .566% 98.478%, .397% 98.24%, .256% 97.991%, .146% 97.735%, .065% 97.471%, .016% 97.202%, 0 96.929%, 0 3.37%);
    clip-path: polygon(0 3.37%, 0 3.37%, .016% 3.097%, .065% 2.828%, .146% 2.564%, .256% 2.308%, .397% 2.059%, .566% 1.821%, .764% 1.594%, .988% 1.379%, 1.238% 1.178%, 1.514% .992%, 1.514% .992%, 1.811% .825%, 2.125% .678%, 2.453% .553%, 2.793% .449%, 3.144% .367%, 3.503% .307%, 3.868% .27%, 4.238% .256%, 4.61% .266%, 4.983% .299%, 96.436% 11.485%, 96.436% 11.485%, 97.036% 11.591%, 97.597% 11.755%, 98.113% 11.972%, 98.579% 12.237%, 98.989% 12.545%, 99.338% 12.89%, 99.619% 13.269%, 99.827% 13.677%, 99.956% 14.107%, 100% 14.556%, 100% 85.743%, 100% 85.743%, 99.956% 86.192%, 99.827% 86.622%, 99.619% 87.03%, 99.338% 87.409%, 98.989% 87.754%, 98.579% 88.062%, 98.113% 88.327%, 97.597% 88.544%, 97.036% 88.708%, 96.436% 88.814%, 4.983% 100%, 4.983% 100%, 4.61% 100.034%, 4.238% 100.043%, 3.868% 100.029%, 3.503% 99.992%, 3.144% 99.932%, 2.793% 99.85%, 2.453% 99.746%, 2.125% 99.621%, 1.811% 99.474%, 1.514% 99.307%, 1.514% 99.307%, 1.238% 99.121%, .988% 98.92%, .764% 98.705%, .566% 98.478%, .397% 98.24%, .256% 97.991%, .146% 97.735%, .065% 97.471%, .016% 97.202%, 0 96.929%, 0 3.37%);
    left: 13.38983%;
    max-height: 89.01099%;
    width: 19.83051%
}

.intro__bottom__image__item--3 img, .intro__bottom__image__item--3 video {
    aspect-ratio: 234/324;
    max-height: 100%
}

.intro__bottom__image__item--3:before {
    background: linear-gradient(269.88deg, rgba(0, 0, 0, .8) 52.55%, transparent 99.89%)
}

.intro__bottom__image__item--4 {
    -webkit-clip-path: polygon(100% 3.37%, 100% 3.37%, 99.984% 3.097%, 99.935% 2.828%, 99.854% 2.564%, 99.744% 2.308%, 99.603% 2.059%, 99.434% 1.821%, 99.236% 1.594%, 99.012% 1.379%, 98.762% 1.178%, 98.486% .992%, 98.486% .992%, 98.189% .825%, 97.875% .678%, 97.547% .553%, 97.207% .449%, 96.856% .367%, 96.497% .307%, 96.132% .27%, 95.762% .256%, 95.39% .266%, 95.017% .299%, 3.564% 11.485%, 3.564% 11.485%, 2.964% 11.591%, 2.403% 11.755%, 1.887% 11.972%, 1.421% 12.237%, 1.011% 12.545%, .662% 12.89%, .381% 13.269%, .173% 13.677%, .044% 14.107%, 0 14.556%, 0 85.743%, 0 85.743%, .044% 86.192%, .173% 86.622%, .381% 87.03%, .662% 87.409%, 1.011% 87.754%, 1.421% 88.062%, 1.887% 88.327%, 2.403% 88.544%, 2.964% 88.708%, 3.564% 88.814%, 95.017% 100%, 95.017% 100%, 95.39% 100.034%, 95.762% 100.043%, 96.132% 100.029%, 96.497% 99.992%, 96.856% 99.932%, 97.207% 99.85%, 97.547% 99.746%, 97.875% 99.621%, 98.189% 99.474%, 98.486% 99.307%, 98.486% 99.307%, 98.762% 99.121%, 99.012% 98.92%, 99.236% 98.705%, 99.434% 98.478%, 99.603% 98.24%, 99.744% 97.991%, 99.854% 97.735%, 99.935% 97.471%, 99.984% 97.202%, 100% 96.929%, 100% 3.37%);
    clip-path: polygon(100% 3.37%, 100% 3.37%, 99.984% 3.097%, 99.935% 2.828%, 99.854% 2.564%, 99.744% 2.308%, 99.603% 2.059%, 99.434% 1.821%, 99.236% 1.594%, 99.012% 1.379%, 98.762% 1.178%, 98.486% .992%, 98.486% .992%, 98.189% .825%, 97.875% .678%, 97.547% .553%, 97.207% .449%, 96.856% .367%, 96.497% .307%, 96.132% .27%, 95.762% .256%, 95.39% .266%, 95.017% .299%, 3.564% 11.485%, 3.564% 11.485%, 2.964% 11.591%, 2.403% 11.755%, 1.887% 11.972%, 1.421% 12.237%, 1.011% 12.545%, .662% 12.89%, .381% 13.269%, .173% 13.677%, .044% 14.107%, 0 14.556%, 0 85.743%, 0 85.743%, .044% 86.192%, .173% 86.622%, .381% 87.03%, .662% 87.409%, 1.011% 87.754%, 1.421% 88.062%, 1.887% 88.327%, 2.403% 88.544%, 2.964% 88.708%, 3.564% 88.814%, 95.017% 100%, 95.017% 100%, 95.39% 100.034%, 95.762% 100.043%, 96.132% 100.029%, 96.497% 99.992%, 96.856% 99.932%, 97.207% 99.85%, 97.547% 99.746%, 97.875% 99.621%, 98.189% 99.474%, 98.486% 99.307%, 98.486% 99.307%, 98.762% 99.121%, 99.012% 98.92%, 99.236% 98.705%, 99.434% 98.478%, 99.603% 98.24%, 99.744% 97.991%, 99.854% 97.735%, 99.935% 97.471%, 99.984% 97.202%, 100% 96.929%, 100% 3.37%);
    max-height: 89.01099%;
    right: 13.38983%;
    width: 19.83051%
}

.intro__bottom__image__item--4 img, .intro__bottom__image__item--4 video {
    aspect-ratio: 234/324;
    max-height: 100%
}

.intro__bottom__image__item--4:before {
    background: linear-gradient(90deg, rgba(0, 0, 0, .8) 51.27%, transparent 99.89%)
}

.intro__bottom__image__item--5 {
    -webkit-clip-path: polygon(100% 4.416%, 100% 4.416%, 99.978% 4.058%, 99.915% 3.705%, 99.81% 3.36%, 99.665% 3.023%, 99.481% 2.698%, 99.26% 2.386%, 99.002% 2.088%, 98.709% 1.806%, 98.381% 1.543%, 98.021% 1.3%, 98.021% 1.3%, 97.632% 1.081%, 97.223% .889%, 96.794% .724%, 96.349% .588%, 95.89% .48%, 95.421% .402%, 94.943% .354%, 94.459% .335%, 93.973% .348%, 93.486% .392%, 4.659% 11.288%, 4.659% 11.288%, 3.875% 11.427%, 3.142% 11.642%, 2.467% 11.926%, 1.858% 12.273%, 1.321% 12.677%, .866% 13.13%, .498% 13.626%, .227% 14.16%, .058% 14.724%, 0 15.312%, 0 85.08%, 0 85.08%, .058% 85.668%, .227% 86.232%, .498% 86.765%, .866% 87.262%, 1.321% 87.715%, 1.858% 88.118%, 2.467% 88.465%, 3.142% 88.75%, 3.875% 88.965%, 4.659% 89.104%, 93.486% 100%, 93.486% 100%, 93.973% 100.044%, 94.459% 100.056%, 94.943% 100.038%, 95.421% 99.99%, 95.89% 99.911%, 96.349% 99.804%, 96.794% 99.668%, 97.223% 99.503%, 97.632% 99.311%, 98.021% 99.092%, 98.021% 99.092%, 98.381% 98.849%, 98.709% 98.585%, 99.002% 98.304%, 99.26% 98.006%, 99.481% 97.694%, 99.665% 97.368%, 99.81% 97.032%, 99.915% 96.687%, 99.978% 96.334%, 100% 95.976%, 100% 4.416%);
    clip-path: polygon(100% 4.416%, 100% 4.416%, 99.978% 4.058%, 99.915% 3.705%, 99.81% 3.36%, 99.665% 3.023%, 99.481% 2.698%, 99.26% 2.386%, 99.002% 2.088%, 98.709% 1.806%, 98.381% 1.543%, 98.021% 1.3%, 98.021% 1.3%, 97.632% 1.081%, 97.223% .889%, 96.794% .724%, 96.349% .588%, 95.89% .48%, 95.421% .402%, 94.943% .354%, 94.459% .335%, 93.973% .348%, 93.486% .392%, 4.659% 11.288%, 4.659% 11.288%, 3.875% 11.427%, 3.142% 11.642%, 2.467% 11.926%, 1.858% 12.273%, 1.321% 12.677%, .866% 13.13%, .498% 13.626%, .227% 14.16%, .058% 14.724%, 0 15.312%, 0 85.08%, 0 85.08%, .058% 85.668%, .227% 86.232%, .498% 86.765%, .866% 87.262%, 1.321% 87.715%, 1.858% 88.118%, 2.467% 88.465%, 3.142% 88.75%, 3.875% 88.965%, 4.659% 89.104%, 93.486% 100%, 93.486% 100%, 93.973% 100.044%, 94.459% 100.056%, 94.943% 100.038%, 95.421% 99.99%, 95.89% 99.911%, 96.349% 99.804%, 96.794% 99.668%, 97.223% 99.503%, 97.632% 99.311%, 98.021% 99.092%, 98.021% 99.092%, 98.381% 98.849%, 98.709% 98.585%, 99.002% 98.304%, 99.26% 98.006%, 99.481% 97.694%, 99.665% 97.368%, 99.81% 97.032%, 99.915% 96.687%, 99.978% 96.334%, 100% 95.976%, 100% 4.416%);
    max-height: 89.01099%;
    right: 6.10169%;
    width: 19.83051%
}

.intro__bottom__image__item--5 img, .intro__bottom__image__item--5 video {
    aspect-ratio: 179/248;
    max-height: 100%
}

.intro__bottom__image__item--5:before {
    background: rgba(0, 0, 0, .2) linear-gradient(90deg, rgba(0, 0, 0, .8) 50.25%, transparent 99.55%)
}

.intro__bottom__image__item--6 {
    -webkit-clip-path: polygon(100% 5.372%, 100% 5.372%, 99.975% 4.935%, 99.898% 4.506%, 99.773% 4.085%, 99.599% 3.676%, 99.379% 3.28%, 99.114% 2.899%, 98.805% 2.536%, 98.454% 2.193%, 98.061% 1.872%, 97.629% 1.575%, 97.629% 1.575%, 97.163% 1.308%, 96.672% 1.073%, 96.158% .873%, 95.624% .706%, 95.074% .574%, 94.511% .478%, 93.937% .418%, 93.357% .395%, 92.773% .41%, 92.188% .463%, 5.611% 11.106%, 5.611% 11.106%, 4.667% 11.275%, 3.783% 11.536%, 2.97% 11.883%, 2.236% 12.306%, 1.59% 12.798%, 1.041% 13.351%, .599% 13.957%, .272% 14.609%, .069% 15.297%, 0 16.015%, 0 84.452%, 0 84.452%, .07% 85.17%, .273% 85.858%, .601% 86.508%, 1.044% 87.114%, 1.592% 87.666%, 2.238% 88.158%, 2.972% 88.581%, 3.785% 88.927%, 4.667% 89.188%, 5.611% 89.356%, 92.188% 100%, 92.188% 100%, 92.772% 100.053%, 93.356% 100.067%, 93.936% 100.044%, 94.509% 99.984%, 95.072% 99.889%, 95.622% 99.757%, 96.156% 99.591%, 96.67% 99.39%, 97.161% 99.156%, 97.627% 98.889%, 97.627% 98.889%, 98.059% 98.593%, 98.451% 98.272%, 98.803% 97.929%, 99.112% 97.567%, 99.377% 97.186%, 99.598% 96.79%, 99.771% 96.381%, 99.897% 95.961%, 99.974% 95.532%, 100% 95.096%, 100% 5.372%);
    clip-path: polygon(100% 5.372%, 100% 5.372%, 99.975% 4.935%, 99.898% 4.506%, 99.773% 4.085%, 99.599% 3.676%, 99.379% 3.28%, 99.114% 2.899%, 98.805% 2.536%, 98.454% 2.193%, 98.061% 1.872%, 97.629% 1.575%, 97.629% 1.575%, 97.163% 1.308%, 96.672% 1.073%, 96.158% .873%, 95.624% .706%, 95.074% .574%, 94.511% .478%, 93.937% .418%, 93.357% .395%, 92.773% .41%, 92.188% .463%, 5.611% 11.106%, 5.611% 11.106%, 4.667% 11.275%, 3.783% 11.536%, 2.97% 11.883%, 2.236% 12.306%, 1.59% 12.798%, 1.041% 13.351%, .599% 13.957%, .272% 14.609%, .069% 15.297%, 0 16.015%, 0 84.452%, 0 84.452%, .07% 85.17%, .273% 85.858%, .601% 86.508%, 1.044% 87.114%, 1.592% 87.666%, 2.238% 88.158%, 2.972% 88.581%, 3.785% 88.927%, 4.667% 89.188%, 5.611% 89.356%, 92.188% 100%, 92.188% 100%, 92.772% 100.053%, 93.356% 100.067%, 93.936% 100.044%, 94.509% 99.984%, 95.072% 99.889%, 95.622% 99.757%, 96.156% 99.591%, 96.67% 99.39%, 97.161% 99.156%, 97.627% 98.889%, 97.627% 98.889%, 98.059% 98.593%, 98.451% 98.272%, 98.803% 97.929%, 99.112% 97.567%, 99.377% 97.186%, 99.598% 96.79%, 99.771% 96.381%, 99.897% 95.961%, 99.974% 95.532%, 100% 95.096%, 100% 5.372%);
    max-height: 89.01099%;
    right: 0;
    width: 19.83051%
}

.intro__bottom__image__item--6 img, .intro__bottom__image__item--6 video {
    aspect-ratio: 149/204;
    max-height: 100%
}

.intro__bottom__image__item--6:before {
    background: rgba(0, 0, 0, .4) linear-gradient(90deg, rgba(0, 0, 0, .8) 51.64%, transparent 99.59%)
}

.intro__bottom img, .intro__bottom picture {
    height: 100%;
    width: 100%
}

.intro__bottom img {
    -o-object-fit: cover;
    object-fit: cover;
    object-position: center center
}

.intro__bottom video {
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
    width: 100%
}

.intro__bottom__video-placeholder {
    aspect-ratio: 320/180;
    bottom: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    transform: translateX(-50%);
    width: var(--lg, 71.11111vh) var(--n-lg, var(--md, 51.08108vh) var(--n-md, 88.88889vw));
    z-index: 1
}

.intro-video {
    height: 100vh
}

.intro-video__container {
    align-items: var(--md, center) var(--n-md, flex-end);
    display: flex;
    height: var(--md, 100vh) var(--n-md, 150vh);
    justify-content: center
}

.intro-video__content {
    position: relative
}

.intro-video__content:before {
    background-color: var(--c-superlight);
    content: "";
    height: 1000vh;
    left: -100vw;
    opacity: var(--background-opacity);
    pointer-events: none;
    position: absolute;
    top: -100vh;
    width: 300vw;
    z-index: 0
}

.intro-video__tablet {
    opacity: var(--tablet-opacity, 1)
}

.intro-video__tablet, .intro-video__tablet img, .intro-video__tablet picture {
    height: 100%;
    width: auto
}

.intro-video__tablet picture {
    left: var(--lg, 0) var(--n-lg, auto);
    position: absolute;
    right: var(--lg, auto) var(--n-lg, 0);
    top: 0
}

.intro-video__tablet picture.intro-video__tablet__image {
    box-shadow: none;
    opacity: var(--tablet-screen-opacity)
}

.intro-video__player {
    aspect-ratio: 640 / 364;
    border-radius: 2.8%;
    bottom: 30.05948%;
    height: auto;
    opacity: min(var(--tablet-opacity, 1), calc(1 - var(--tablet-screen-opacity, 0)), calc(var(--tablet-video-opacity) + var(--tablet-caption-opacity)));
    overflow: hidden;
    position: absolute;
    right: 8.80769%;
    top: 28.37918%;
    transform-origin: 0 0;
    width: 52%
}

.intro-video__player video {
    background: var(--c-black-dark) url(../images/landing/1.intro/video-poster.webp);
    background-size: cover;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    position: relative;
    width: 100%
}

.intro-video__player__caption {
    display: none;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1
}

.intro-video__player__progress {
    backface-visibility: hidden;
    background: var(--t-background);
    border-radius: var(--md, 1.22222vh) var(--n-md, calc(var(--scale-px) * 10));
    bottom: 1.94444vw;
    height: 3.05556vw;
    left: 6.38889vw;
    opacity: var(--tablet-caption-opacity);
    overflow: hidden;
    position: absolute;
    right: 1.94444vw
}

.intro-video__player__progress:before {
    animation: videoProgress 27s linear infinite;
    backface-visibility: hidden;
    background: hsla(0, 0%, 100%, .1);
    border-radius: 1.22222vh;
    box-shadow: inset -10px 0 20px hsla(0, 0%, 100%, .2);
    content: "";
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .intro-video__player__progress {
        bottom: 4.72973%;
        height: 9.45946%;
        left: 10.11236%;
        right: 2.62172%
    }
}

.tablet-preview {
    aspect-ratio: 880 / 607;
    height: auto;
    max-width: 100%;
    position: relative;
    width: var(--xl, min(87.33333vh, 92vw)) var(--n-xl, var(--md, min(62.7027vw, 88vw)) var(--n-md, min(84.16667vw, 92vw)))
}

.tablet-preview__image img {
    border-radius: var(--lg, 2.88889vh) var(--n-lg, var(--md, 2.2973vw) var(--n-md, 4.72222vw));
    box-shadow: 0 205.316px 164.253px rgba(0, 0, 0, .07), 0 85.776px 68.6208px rgba(0, 0, 0, .05), 0 45.86px 36.688px rgba(0, 0, 0, .04), 0 25.7087px 20.567px rgba(0, 0, 0, .035), 0 13.6537px 10.923px rgba(0, 0, 0, .028), 0 5.68161px 4.54529px rgba(0, 0, 0, .02);
    display: block;
    height: auto;
    overflow: hidden;
    width: 100%
}

.is-chrome .tablet-preview__image img {
    backface-visibility: hidden;
    box-shadow: 0 85.776px 68.6208px rgba(0, 0, 0, .05), 0 45.86px 36.688px rgba(0, 0, 0, .042), 0 25.7087px 20.567px rgba(0, 0, 0, .035), 0 13.6537px 10.923px rgba(0, 0, 0, .028), 0 5.68161px 4.54529px rgba(0, 0, 0, .02)
}

@keyframes videoProgress {
    0% {
        transform: translateX(-100%)
    }
    to {
        transform: translateX(0)
    }
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .intro-see {
        height: auto
    }

    .intro-see__anchor {
        scroll-margin: calc(var(--spacing) * 2)
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .intro-see {
        margin-top: 108vh
    }

    .intro-see__anchor {
        scroll-margin: var(--xl, calc(60.22222vh / 2 - 50vh)) var(--n-xl, calc(43.24324vw / 2 - 50vh))
    }
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .intro-process {
        height: auto
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .intro-process {
        margin-top: 26vh
    }
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .intro-convenient {
        height: auto
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .intro-convenient {
        margin-top: -18vh
    }
}

@media (min-width: 980px) {
    .intro-convenient {
        margin-top: -8vh
    }
}

.intro-convenient .intro-content__text {
    margin-left: auto;
    margin-right: auto;
    max-width: calc(var(--scale-px) * 690);
    text-align: center
}

.intro-convenient__image {
    position: relative
}

.intro-convenient__image-item {
    height: 83.33333vh;
    height: var(--lg, 84.38889vh) var(--n-lg, 48.33333vh);
    left: 0;
    position: absolute;
    top: 0;
    width: 56.66667vh;
    width: var(--lg, 66.22222vh) var(--n-lg, 32.77778vh)
}

.intro-convenient__image-item img {
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%
}

.intro-convenient__image-item--right {
    left: var(--lg, -5.55556vh) var(--n-lg, -4.44444vh);
    top: -50vh
}

.intro-convenient__image-item--left {
    left: var(--lg, -15.55556vh) var(--n-lg, 6.66667vh);
    top: 16.66667vh
}

.intro-convenient__mobile-images {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing)
}

.intro-convenient__mobile-images img, .intro-convenient__mobile-images picture {
    height: auto;
    width: 100%
}

.intro-convenient > .container-h > .row {
    justify-content: center
}

.intro-convenient .intro-convenient__image {
    display: none
}

.intro-convenient__dashboard {
    aspect-ratio: 880 / 607;
    height: auto;
    margin: var(--md, calc(var(--scale-px) * 46) auto 0) var(--n-md, 28px auto 0);
    max-width: min(100%, calc(var(--scale-px) * 820));
    position: relative;
    width: var(--md, calc(var(--scale-px) * 820)) var(--n-md, 100%);
    z-index: 3
}

.intro-convenient__dashboard.tablet-preview {
    height: auto;
    width: min(100%, calc(var(--scale-px) * 820))
}

.intro-convenient__dashboard .tablet-preview__image,
.intro-convenient__dashboard .tablet-preview__image img {
    height: auto;
    width: 100%
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .intro-prepare {
        height: auto
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9) and (max-width: 979px),(min-width: 668px) and (min-height: 416px) and (max-width: 979px) {
    .intro-prepare {
        height: 68vh;
        margin-top: -16vh
    }
}

.l-stress-free-bg img {
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 44% 50%;
    object-position: 44% 50%;
    width: 100%;
    height: 100%
}

.l-streamlined-content {
    position: relative;
    z-index: 2
}

.l-streamlined-deco {
    align-self: center;
    margin-top: var(--lg, -12vh) var(--n-lg, var(--md, -6vh) var(--n-md, 0));
    overflow: visible;
    position: relative;
    z-index: 1
}

.l-streamlined-deco picture {
    border-radius: var(--lg, 1.4vh) var(--n-lg, var(--md, 1.1vw) var(--n-md, 2.2vw));
    display: block;
    margin-left: var(--lg, 14%) var(--n-lg, var(--md, 8%) var(--n-md, 4%));
    max-width: none;
    overflow: hidden;
    width: var(--lg, 112%) var(--n-lg, var(--md, min(100%, calc(var(--scale-px) * 640))) var(--n-md, 112%))
}

.l-streamlined-deco img {
    border-radius: inherit;
    display: block;
    height: auto;
    width: 100%
}

@media (min-width: 980px) {
    .l-streamlined-deco picture {
        margin-left: 0;
        width: 100%
    }
}

.l-steps-title {
    --fos: -0.1365em;
    --foe: -0.1635em;
    --lh: var(--xxxl, 1.04167em) var(--n-xxxl, var(--lg, 1.04839em) var(--n-lg, var(--md, 1.25em) var(--n-md, 1.07143em)));
    font-family: Inter, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: var(--xxxl, calc(var(--scale-text-rem) * 7.2)) var(--n-xxxl, var(--lg, calc(var(--scale-text-rem) * 6.2)) var(--n-lg, var(--md, calc(var(--scale-text-rem) * 3.2)) var(--n-md, calc(var(--scale-text-rem) * 2.8))));
    font-weight: 400;
    letter-spacing: var(--lg, -.06em) var(--n-lg, -.05em);
    line-height: var(--lh)
}

.is-win .l-steps-title {
    --fos: -0.1445em;
    --foe: -0.1155em
}

.l-steps-section {
    --image-width: var(--lg, calc(var(--grid-col) * 6 + var(--grid-gutter) * 5)) var(--n-lg, var(--md, calc(var(--grid-col) * 8 + var(--grid-gutter) * 7 - 20px)) var(--n-md, calc(100vw - 60px)));
    --image-height: var(--md, calc(var(--image-width) * 0.68014)) var(--n-md, calc(var(--image-width) * 0.67965));
    --steps-title-height: var(--lg, calc(var(--scale-text-rem) * 5)) var(--n-lg, var(--md, calc(var(--scale-text-rem) * 7)) var(--n-md, calc(var(--scale-text-rem) * 4.5)));
    --steps-padding-top: var(--lg, calc(50vh - var(--image-height) / 2 + var(--spacing) + var(--steps-title-height) / 2)) var(--n-lg, var(--md, calc(var(--image-height) + var(--steps-title-height) + 210px)) var(--n-md, calc(var(--image-height) + var(--steps-title-height) + 90px)));
    --steps-padding-bottom: var(--md, calc(50vh - var(--image-height) / 2 - var(--spacing) - var(--steps-title-height) / 2)) var(--n-md, 13.88889vw)
}

#steps.l-steps-section.sticky--full-height {
    min-height: max(200vh, calc(100vh + var(--steps-padding-top, 0px) + var(--steps-padding-bottom, 0px)))
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .l-steps-section {
        margin-bottom: calc(var(--steps-padding-top) + var(--steps-padding-bottom) + 3em + 60px - 100vh)
    }
}

.sticky__layer--sticky {
    z-index: 1
}

.l-steps-images {
    aspect-ratio: 900 / 620;
    background: var(--c-black-2);
    border: calc(var(--scale-px) * 10) solid var(--c-black-2);
    border-radius: calc(var(--scale-px) * 20);
    position: relative;
    width: 100%;
    z-index: 1
}

.l-steps-images__list img,
.l-steps-images__list picture {
    display: block;
    height: 100%;
    width: 100%
}

.l-steps-images__list img {
    border-radius: calc(var(--scale-px) * 15);
    -o-object-fit: cover;
    object-fit: cover;
    object-position: top center
}

.l-steps-images__list li {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.l-steps-deco, .l-steps-images__list li:first-child {
    position: relative
}

.l-steps-deco__list {
    --center-x: 0.516;
    --center-y: 0.685;
    --deco-size: var(--xxxl, calc(var(--scale-px) * 160)) var(--n-xxxl, var(--lg, calc(var(--scale-px) * 120)) var(--n-lg, var(--md, calc(var(--scale-px) * 100)) var(--n-md, calc(var(--scale-px) * 60))));
    --x: 0.516;
    --y: 0.685;
    background: var(--c-black-2);
    border: calc(var(--scale-px) * 2) solid var(--c-black-2);
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    height: var(--deco-size);
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform: translate(-50%, -50%) translate(calc(var(--image-width) * var(--x)), calc(var(--image-height) * var(--y)));
    width: var(--deco-size)
}

.l-steps-deco__list picture,
.l-steps-deco__list img {
    height: auto;
    max-width: none !important;
    width: calc(var(--image-width) * 1.9) !important
}

.l-steps-deco__list img {
    transform: translate(calc(var(--deco-size) * .5), calc(var(--deco-size) * .5)) translate(calc(var(--center-x) * -100%), calc(var(--center-y) * -100%))
}

.l-steps-deco__list li {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

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

.l-steps-content li {
    border-top: 1px solid var(--t-line);
    height: var(--lg, calc(var(--image-height) - var(--spacing) * 1.5 - 2em)) var(--n-lg, var(--md, calc(var(--scale-px) * 150)) var(--n-md, 23vh));
    padding-right: var(--lg, calc(var(--grid-col) + var(--grid-gutter))) var(--n-lg, var(--md, calc(var(--grid-col) * 2 + var(--grid-gutter))) var(--n-md, 25vw));
    padding-top: calc(var(--scale-px) * 30);
    position: relative
}

@media (max-width: 979px) {
    .l-steps-content li {
        border-bottom: 1px solid var(--t-line);
        border-top: none
    }

    .l-steps-content li:first-child {
        margin-top: var(--md, calc(var(--scale-px) * 10)) var(--n-md, 0)
    }

    .l-steps-content li:last-child {
        border-bottom: none
    }
}

.l-steps-content li:last-child {
    height: var(--lg, var(--image-height)) var(--n-lg, calc(100vh - var(--steps-padding-top) - var(--steps-padding-bottom)))
}

.l-steps-content__deco {
    position: absolute;
    right: 0;
    top: calc(var(--scale-px) * 20)
}

.l-why-section {
    overflow: clip
}

.l-why {
    height: var(--lg, calc(100lvh + (var(--item-count) - 1) * 90lvh)) var(--n-lg, calc((var(--item-count) - 1) * 80px + var(--item-count) * 340px + 80px))
}

.l-why-list {
    align-items: stretch;
    flex-wrap: var(--lg, nowrap) var(--n-lg, wrap);
    gap: var(--lg, 0) var(--n-lg, calc(var(--scale-px) * 10))
}

@media (max-width: 979px) {
    .l-why-list {
        max-height: calc(var(--items-count) * 70px + (var(--items-count) - 1) * 10px + 80px)
    }
}

/* Brand hexagon: the rounded hexagon from the JobHive logo mark, applied as a
   mask so the number/check badges keep their colors and states. */
.badge {
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 168.5 78.6 83.5'%3E%3Cpath fill='%23000' d='M68.15,182.98l-18.38-10.61c-6.16-3.55-13.74-3.55-19.9,0l-18.38,10.61c-6.16,3.55-9.95,10.12-9.95,17.23v21.23c0,7.11,3.79,13.68,9.95,17.23l18.38,10.61c6.16,3.55,13.74,3.55,19.9,0l18.38-10.61c6.16-3.55,9.95-10.12,9.95-17.23v-21.23C78.09,193.11,74.3,186.54,68.15,182.98z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.5 168.5 78.6 83.5'%3E%3Cpath fill='%23000' d='M68.15,182.98l-18.38-10.61c-6.16-3.55-13.74-3.55-19.9,0l-18.38,10.61c-6.16,3.55-9.95,10.12-9.95,17.23v21.23c0,7.11,3.79,13.68,9.95,17.23l18.38,10.61c6.16,3.55,13.74,3.55,19.9,0l18.38-10.61c6.16-3.55,9.95-10.12,9.95-17.23v-21.23C78.09,193.11,74.3,186.54,68.15,182.98z'/%3E%3C/svg%3E") center/contain no-repeat
}

/* Footer marquee videos clipped to a crisp rounded hexagon (the logo hexagon's
   corner radius reads too soft at card size, so this uses a tighter radius). */
.card--footer {
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.7 0 86.6 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M41.34,5 Q50,0 58.66,5 L84.64,20 Q93.3,25 93.3,35 L93.3,65 Q93.3,75 84.64,80 L58.66,95 Q50,100 41.34,95 L15.36,80 Q6.7,75 6.7,65 L6.7,35 Q6.7,25 15.36,20 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='6.7 0 86.6 100' preserveAspectRatio='none'%3E%3Cpath fill='%23000' d='M41.34,5 Q50,0 58.66,5 L84.64,20 Q93.3,25 93.3,35 L93.3,65 Q93.3,75 84.64,80 L58.66,95 Q50,100 41.34,95 L15.36,80 Q6.7,75 6.7,65 L6.7,35 Q6.7,25 15.36,20 Z'/%3E%3C/svg%3E") center/100% 100% no-repeat
}

.l-why-item {
    border-radius: calc(var(--scale-px) * 20);
    overflow: hidden;
    position: relative
}

@media (max-width: 979px) {
    .l-why-item {
        --item-size-collapsed: 70px;
        --item-size-expanded: var(--md, 40vw) var(--n-md, calc(var(--scale-px) * 340));
        --item-size-diff: calc(var(--item-size-expanded) - var(--item-size-collapsed));
        flex: 0 0 100%;
        height: calc(var(--item-size-collapsed) + (1 - var(--progress, 0)) * var(--item-size-diff));
        width: 100%
    }

    .l-why-item__inner {
        background: var(--t-background-alt);
        border-radius: 20px;
        height: var(--item-size-expanded);
        overflow: hidden;
        padding: 70px 20px 20px;
        width: 100%
    }

    .l-why-item__inner-content {
        align-items: flex-start;
        border-top: 1px solid var(--t-line);
        display: flex;
        flex-direction: column-reverse;
        gap: var(--md, calc(var(--grid-col) + var(--grid-gutter) * 2)) var(--n-md, calc(var(--scale-px) * 20));
        opacity: calc(1 - var(--progress));
        padding-top: calc(var(--scale-px) * 20)
    }

    .l-why-item__inner-content img {
        align-self: flex-end;
        height: auto;
        width: var(--md, calc(var(--grid-col) * 4 + var(--grid-gutter) * 3 - 20px)) var(--n-md, 41.66667vw);
        border-radius: calc(var(--scale-px) * 12)
    }

    .l-why-item__inner-deco {
        opacity: var(--progress)
    }

    .l-why-item__title {
        left: 0;
        padding: 10px 20px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 1
    }

    .l-why-item__title h3 {
        padding: 15px 0;
        transform: scale(calc(.6 + .4 * (1 - var(--progress))));
        transform-origin: 0 0
    }

    .l-why-item__button {
        bottom: calc(var(--scale-px) * 20);
        position: absolute;
        right: 0;
        width: calc(var(--grid-col) * 3 + var(--grid-gutter) * 2)
    }
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .l-why-item__inner-content {
        flex-direction: row
    }

    .l-why-item__button {
        bottom: calc(var(--scale-px) * 20);
        position: absolute;
        right: calc(var(--scale-px) * 20);
        width: calc(var(--grid-col) * 4 + var(--grid-gutter) * 3)
    }
}

@media (min-width: 980px) {
    /* Faint honeycomb cluster in the empty top-right corner of the Why
       section, drawn from the logo's rounded hexagon. */
    .l-why .sticky__layer--sticky {
        position: sticky
    }

    .l-why .sticky__layer--sticky::before {
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 340' fill='none'%3E%3Cdefs%3E%3Cpath id='h' d='M68.15,182.98l-18.38-10.61c-6.16-3.55-13.74-3.55-19.9,0l-18.38,10.61c-6.16,3.55-9.95,10.12-9.95,17.23v21.23c0,7.11,3.79,13.68,9.95,17.23l18.38,10.61c6.16,3.55,13.74,3.55,19.9,0l18.38-10.61c6.16-3.55,9.95-10.12,9.95-17.23v-21.23C78.09,193.11,74.3,186.54,68.15,182.98z' transform='translate(-39.8,-210.3)'/%3E%3C/defs%3E%3Cuse href='%23h' transform='translate(300,105) scale(1.7)' stroke='%23222222' stroke-width='2.2' opacity='0.07'/%3E%3Cuse href='%23h' transform='translate(207,212) scale(1)' stroke='%23222222' stroke-width='3' opacity='0.055'/%3E%3Cuse href='%23h' transform='translate(352,232) scale(0.5)' fill='%23ffc501' opacity='0.5'/%3E%3Cuse href='%23h' transform='translate(163,84) scale(0.42)' stroke='%23ffc501' stroke-width='6' opacity='0.4'/%3E%3C/svg%3E") top right/contain no-repeat;
        content: "";
        height: clamp(220px, 30vh, 330px);
        pointer-events: none;
        position: absolute;
        right: clamp(20px, 3vw, 56px);
        top: clamp(16px, 3.5vh, 44px);
        width: clamp(280px, 24vw, 420px);
        z-index: -1
    }

    .l-why-item {
        --item-size-collapsed: calc(var(--scale-px) * 80);
        --item-size-expanded: calc(var(--container-content-width) - (var(--item-count) - 1) * (var(--item-size-collapsed) + var(--grid-gutter)));
        --item-size-diff: calc(var(--item-size-expanded) - var(--item-size-collapsed));
        flex: 0 0 var(--item-size-expanded);
        height: 100%;
        transform: translateX(calc(var(--move, 0) * var(--item-size-diff) * -1));
        width: var(--item-size-expanded)
    }

    .l-why-item__inner {
        background: var(--t-background-alt);
        border-radius: calc(var(--scale-px) * 20);
        height: 100%;
        overflow: hidden;
        padding: calc(var(--scale-px) * 120) calc(var(--scale-px) * 20) calc(var(--scale-px) * 20);
        transform: translateX(calc(var(--progress, 0) * var(--item-size-diff) * -1));
        width: 100%
    }

    .l-why-item--last .l-why-item__inner {
        transform: none
    }

    .l-why-item__inner-content {
        align-items: flex-start;
        border-top: 1px solid var(--t-line);
        display: flex;
        gap: calc(var(--scale-px) * 20);
        opacity: calc(1 - var(--progress));
        padding-top: calc(var(--scale-px) * 20);
        transform: translateX(calc(var(--progress, 0) * var(--item-size-diff)))
    }

    .l-why-item--last .l-why-item__inner-content {
        opacity: 1;
        transform: none
    }

    .l-why-item__inner-content img {
        flex: 0 0 42.85714%;
        max-width: calc(var(--scale-px) * 360);
        -o-object-fit: contain;
        object-fit: contain;
        -o-object-position: 0 50%;
        object-position: 0 50%;
        border-radius: calc(var(--scale-px) * 12)
    }

    .l-why-item__inner-content p {
        max-width: calc(var(--scale-px) * 490)
    }

    .l-why-item__inner-deco {
        opacity: var(--progress)
    }

    .l-why-item--last .l-why-item__inner-deco {
        opacity: 1
    }

    .l-why-item__title {
        height: 100%;
        left: 0;
        padding: calc(var(--scale-px) * 20);
        position: absolute;
        top: 0;
        transform: translateY(calc(100% * var(--progress))) translate(calc((var(--scale-px) * 10) * var(--progress)), calc((var(--scale-px) * -10) * var(--progress))) rotate(calc(-90deg * var(--progress))) scale(calc(.5 + .5 * (1 - var(--progress))));
        transform-origin: 0 0;
        z-index: 1
    }

    .l-why-item--last .l-why-item__title {
        transform: none
    }

    .l-why-item__button {
        bottom: calc(var(--scale-px) * 40);
        width: calc(var(--grid-col) * 3 + var(--grid-gutter) * 2)
    }
}

.l-success {
    position: relative
}

@media (min-width: 980px) {
    .l-success__images {
        width: calc(var(--scale-px) * 70)
    }

    .l-success__text {
        margin: -20px -10px -10px 0;
        overflow: hidden;
        padding: 20px 10px 10px 0;
        position: relative
    }

    .l-success__buttons {
        bottom: 10px;
        position: absolute;
        right: 10px;
        z-index: 1
    }
}

.l-pdf {
    display: flex;
    min-height: var(--xxxl, calc(100vh - 100px)) var(--n-xxxl, var(--lg, calc(100vh - 70px)) var(--n-lg, var(--md, calc(var(--scale-px) * 760)) var(--n-md, calc(var(--scale-px) * 440))))
}

.l-pdf__background {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.l-pdf__form {
    display: flex;
    flex-direction: column;
    justify-content: flex-end
}

.l-pdf__container {
    display: var(--md, block) var(--n-md, flex)
}

@media (min-width: 568px) and (max-aspect-ratio: 13/9),(min-width: 668px) and (min-height: 416px),(min-width: 980px) {
    .l-pdf .row, .l-pdf .row .col, .l-pdf__container {
        min-height: 100%
    }

    .l-pdf__background:after {
        background: linear-gradient(180deg, rgba(var(--t-background-rgb), 0) 50.16%, rgba(var(--t-background-rgb), .8) 100%);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }
}

@media (min-width: 1920px) and (min-height: 700px) {
    .l-pdf__background {
        left: 50%;
        transform: translateX(-50%)
    }
}

.l-faq-list {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: calc(var(--scale-px) * 10)
}

.l-tips-list {
    gap: var(--md, 0) var(--n-md, calc(var(--scale-px) * 10))
}

/* Stat cards: radial (donut) charts */
.card--stat .card__top {
    flex: 0 0 auto;
    min-height: 0;
    align-items: center;
    justify-content: center
}

.stat-donut {
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--scale-px) * 108);
    height: calc(var(--scale-px) * 108)
}

.intro-sticky .stat-donut__bar {
    animation: none
}

.stat-donut__svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg)
}

.stat-donut__track {
    fill: none;
    stroke: var(--c-black-10, rgba(34, 34, 34, .1));
    stroke-width: 9
}

.stat-donut__bar {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: var(--circ);
    stroke-dashoffset: calc(var(--circ) - var(--circ) * var(--pct, 0) / 100);
    animation: jh-donut-fill 1.4s cubic-bezier(.22, 1, .36, 1) both
}

@keyframes jh-donut-fill {
    from {
        stroke-dashoffset: var(--circ)
    }
}

.stat-donut__label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(var(--scale-px) * 1);
    color: var(--c-black, #222)
}

.stat-donut__value {
    font-weight: 700;
    font-size: calc(var(--scale-px) * 32);
    line-height: 1;
    letter-spacing: -.02em
}

.stat-donut__unit {
    font-weight: 700;
    font-size: calc(var(--scale-px) * 16);
    line-height: 1
}

@media (prefers-reduced-motion: reduce) {
    .stat-donut__bar {
        animation: none
    }
}

@media (max-width: 979px) {
    .intro-see .stat-donut {
        --pct: 90
    }

    .intro-process .intro-content__card .stat-donut {
        --pct: 65
    }

    .intro-sticky__section__content.intro-video .intro__bottom__image > picture.is-hidden--md-up {
        display: none !important
    }

    .intro-sticky__section__content.intro-video .intro__bottom__image.is-hidden--sm-down,
    .intro-sticky__section__content.intro-video .intro__bottom__image__item.is-hidden--sm-down {
        display: block !important
    }

    .intro-sticky__section__content.intro-video .intro-video__tablet {
        transform: none
    }

    .intro-sticky__section__content.intro-video .intro-video__tablet > picture.intro-video__tablet__image {
        opacity: 0 !important;
        pointer-events: none;
        visibility: hidden
    }

    .intro-sticky__section__content.intro-video .intro-video__player {
        opacity: 1 !important;
        visibility: visible
    }
}

@media (min-width: 980px) {
    .hero-title-row {
        align-items: flex-start;
        display: block;
        position: relative
    }

    .hero-title-row .intro__title {
        box-sizing: border-box;
        min-width: 0;
        padding-right: clamp(calc(var(--scale-px) * 160), 20vw, calc(var(--scale-px) * 340));
        width: 100%
    }

    .hero-title-row__cta {
        align-items: center;
        display: flex;
        position: absolute;
        right: calc(var(--scale-px) * 100);
        top: calc(var(--scale-px) * 26)
    }

    .hero-copy-row {
        align-items: flex-start;
        justify-content: flex-start
    }

    .hero-copy-row__text {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%
    }

    .hero-copy-row__text .text-lead {
        max-width: min(72%, 800px);
        overflow: visible;
        text-align: left;
        text-wrap: balance;
        white-space: normal;
        line-height: 1.45
    }

    .hero-copy-row__centered-line {
        display: block;
        text-align: left;
        width: 100%
    }

    .hero-copy-row__cta {
        margin-left: auto;
        padding-top: calc(var(--scale-px) * 4)
    }
}

@media (max-width: 979px) {
    .hero-title-row__cta {
        display: none
    }
}

.header.header--sticky {
    top: var(--announcement-bar-height, 40px) !important
}

/* Scroll-up collapsed header: stay light over dark landing sections. */
.js-page-content-wrapper > .header.header--sticky.header--collapsed .ui-background {
    background-color: var(--c-superlight, #f5f6f8);
    box-shadow: 0 0 0 1px rgba(34, 34, 34, 0.08);
    transform: translateY(0);
}

.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-dark,
.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-light {
    --t-background: var(--c-superlight, #f5f6f8);
    --t-background-rgb: var(--c-superlight-rgb, 245, 246, 248);
    --t-text: var(--c-black, #222);
    --t-heading: var(--c-black, #222);
}

.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-dark
    .header__brand img.site-brand-logo--on-dark,
.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-light
    .header__brand img.site-brand-logo--on-dark {
    display: none !important;
}

.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-dark
    .header__brand img.site-brand-logo--on-light,
.js-page-content-wrapper > .header.header--sticky.header--collapsed.ui-light
    .header__brand img.site-brand-logo--on-light {
    display: block !important;
}

.header .btn--primary[href="book-demo.html"],
.l-subscribe .btn--primary[href="book-demo.html"] {
    background: linear-gradient(135deg, var(--c-yellow, #ffc501), var(--c-yellow-dark, #ffb800));
    box-shadow: 0 14px 34px rgba(255, 197, 1, .28), inset 0 1px 0 rgba(255, 255, 255, .42);
    color: var(--c-black, #222)
}

.header .btn--primary[href="book-demo.html"]:hover,
.l-subscribe .btn--primary[href="book-demo.html"]:hover {
    transform: translateY(-1px)
}

.footer-author.header__brand .site-brand-logo {
    height: clamp(22px, 2.5vw, 28px)
}

.l-subscribe__top {
    display: flex;
    flex-direction: column
}

.l-subscribe__logo {
    display: block;
    line-height: 0;
    margin-bottom: clamp(20px, 3vh, 40px);
    width: fit-content
}

.l-subscribe__logo .site-brand-logo {
    display: block;
    height: clamp(56px, 10vw, 120px);
    width: auto
}

/* Fluid responsive safeguards */
.page-content-wrapper,
.page-content,
.page-content.js-page-content {
    max-width: 100%;
    overflow-x: clip
}

picture.img-full,
.img-full {
    display: block;
    height: 100%;
    max-width: 100%;
    width: 100%
}

.img-full img {
    display: block;
    height: 100%;
    max-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: top center;
    width: 100%
}

.l-steps-content li {
    padding-right: var(--lg, calc(var(--grid-col) + var(--grid-gutter))) var(--n-lg, var(--md, calc(var(--grid-col) * 2 + var(--grid-gutter))) var(--n-md, clamp(calc(var(--scale-px) * 20), 8vw, 25vw)))
}

@media (max-width: 979px) {
    .hero-title-row .intro__title {
        padding-right: 0
    }
}

/* === Responsive system enhancements === */

@supports (height: 100dvh) {
    .sticky--full-height .sticky__layer--sticky,
    .sticky--full-height\:lg .sticky__layer--sticky {
        height: 100dvh
    }

    .sticky--full-height\:lg,
    .sticky--full-height\:lg .sticky__layer {
        min-height: 100dvh
    }

    .intro-sticky__section__content.intro-video {
        height: auto;
        min-height: 240dvh
    }

    .intro-sticky__section__content.intro-video .intro-video__container {
        height: calc(100dvh - var(--hero-text-max, 48vh) - var(--hero-collage-h, 34vh));
        max-height: calc(100dvh - var(--hero-text-max, 48vh) - var(--hero-collage-h, 34vh))
    }

    .l-steps-content li:last-child {
        height: var(--lg, var(--image-height)) var(--n-lg, calc(100dvh - var(--steps-padding-top) - var(--steps-padding-bottom)))
    }
}

.page-content-wrapper img,
.page-content-wrapper video,
.page-content-wrapper picture,
.page-content img,
.page-content video,
.page-content picture {
    max-width: 100%
}

.section.section--no-overflow,
.section.section--with-overflow {
    overflow-x: clip
}

.row.row--pad,
.container-h {
    max-width: 100%
}

@media (max-width: 979px) {
    .l-steps-section {
        --image-width: min(calc(100vw - 60px), calc(var(--grid-col) * 8 + var(--grid-gutter) * 7 - 20px));
        --steps-padding-bottom: clamp(calc(var(--scale-px) * 24), 8vw, 13.88889vw)
    }

    .l-steps-content__deco {
        right: clamp(calc(var(--scale-px) * 8), 2vw, calc(var(--scale-px) * 20))
    }

    .l-steps-deco__list {
        --deco-size: clamp(calc(var(--scale-px) * 48), 14vw, calc(var(--scale-px) * 100))
    }

    .l-streamlined-content .text-nowrap {
        white-space: normal
    }

    .l-streamlined-deco picture {
        margin-left: clamp(0%, 4vw, 8%);
        width: 100%
    }

    .intro-convenient__dashboard {
        margin-left: auto;
        margin-right: auto;
        width: min(100%, calc(var(--scale-px) * 680))
    }

    .intro-prepare {
        height: auto;
        margin-top: 0
    }

    .tablet-preview {
        max-width: 100%;
        width: min(92vw, calc(var(--scale-px) * 720))
    }
}

@media (max-width: 567px) and (max-aspect-ratio: 13/9),(max-width: 667px) and (min-aspect-ratio: 13/9),(max-width: 979px) and (max-height: 415px) and (min-aspect-ratio: 13/9) {
    .intro-see {
        height: auto
    }

    .intro-see__anchor {
        scroll-margin: calc(var(--spacing) * 2)
    }

    .l-steps-content li {
        padding-right: clamp(calc(var(--scale-px) * 12), 4vw, calc(var(--scale-px) * 24))
    }

    .l-steps-content li:last-child {
        min-height: min(65dvh, var(--image-height))
    }
}

@media (min-width: 980px) and (max-width: 1180px) {
    .hero-title-row {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: calc(var(--scale-px) * 16)
    }

    .hero-title-row .intro__title {
        padding-right: 0;
        width: 100%
    }

    .hero-title-row__cta {
        align-self: flex-start;
        position: static;
        right: auto;
        top: auto
    }
}

@media (min-width: 1181px) and (max-width: 1320px) {
    .hero-title-row .intro__title {
        padding-right: clamp(calc(var(--scale-px) * 120), 14vw, calc(var(--scale-px) * 280))
    }

    .hero-title-row__cta {
        right: calc(var(--scale-px) * 48)
    }
}

@media (min-width: 980px) and (max-width: 1280px) {
    .l-why-item {
        --item-size-expanded: min(40vw, calc(var(--scale-px) * 300))
    }
}