/********** Hide Unwanted Elements **********/
.grecaptcha-badge,
.announce-bar,
section[data-section=footer] {
    display: none !important;
}

/********** Components **********/

/***** Colours *****/
body {
    /* --yp-colour-site-bg: #F4F2ED; */
    /* --yp-colour-site-bg: #9c9dad; */
    /* --yp-colour-site-bg: #F4F2ED; */
    /* --yp-colour-site-bg: #D7D3CE; */
    /* --yp-colour-site-bg: #e8e0cd; */
    --yp-colour-site-bg: #fff;
    /* --yp-colour-site-bg-2: #d0cfd1; */
    /* --yp-colour-site-bg-2: #FAF8F2; */
    --yp-colour-site-bg-2: #fffdf8;
    --yp-colour-light-bg: #fff;
    --yp-colour-dark-bg: #000;
    --yp-colour-text: #242025;
    --yp-colour-heading: #001614;
    --yp-colour-text-reverse: #fff;
    --yp-colour-heading-reverse: #fff;
    --yp-colour-btn-sec-bg: #00000014;
    --yp-colour-btn-sec-bg-reverse: #ffffff29;
}

/***** Fonts *****/

@font-face {
    font-family: 'Fancy';
    src: url('../fonts/fancy-Bold.woff2') format('woff2'),
        url('../fonts/fancy-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Fancy';
    src: url('../fonts/fancy-BoldItalic.woff2') format('woff2'),
        url('../fonts/fancy-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: auto;
}
@font-face {
    font-family: 'Fancy';
    src: url('../fonts/fancy-Medium.woff2') format('woff2'),
        url('../fonts/fancy-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: auto;
}
@font-face {
    font-family: 'Fancy';
    src: url('../fonts/fancy-MediumItalic.woff2') format('woff2'),
        url('../fonts/fancy-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: auto;
}

/***** Buttons *****/
.l-btns {
    display: flex;
    align-items: center;
    gap: 6px;
}
.l-btn {
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    font-size: 14px;
    line-height: 48px;
    gap: 10px;
    padding: 0 24px;
    color: var( --yp-colour-heading-reverse );
    fill: currentColor;
    background-color: var( --yp-colour-heading );
    border-radius: 500px;
    border: 1px solid var( --yp-colour-heading );
    white-space: nowrap;
}
.l-btn.l-b-sec {
    color: var( --yp-colour-heading );
    background-color: transparent;
    backdrop-filter: blur(10px);
}
.l-btns.l-btns-reverse .l-btn {
    color: var( --yp-colour-heading );
    background-color: var( --yp-colour-heading-reverse );
    border-radius: 500px;
    border: 1px solid var( --yp-colour-heading-reverse );
}
.l-btns.l-btns-reverse .l-btn.l-b-sec {
    color: var( --yp-colour-heading-reverse );
    background-color: transparent;
}
@media (max-width: 400px) {
    .l-btn {
        font-size: 12px;
    }
}

/***** Typography *****/
h1,
h2,
h3,
h4,
h5,
h6,
p {
    font-size: revert;
    font-family: "Inter", sans-serif;
    margin: 0;
    line-height: revert;
    letter-spacing: 0;
    margin: 0;
}
p {
    margin: 0 0 18px;
    line-height: 1.3em;
    font-weight: 300;
}
p:last-child {
    margin-bottom: 0;
}
.l-heading-sub {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
}
.l-heading-primary {
    font-size: 128px;
    line-height: 0.9em;
    font-weight: 600;
    letter-spacing: -0.02em;
}
.l-heading-primary .break.l-indent-01 {
    padding-left: 0;
}
.l-heading-primary .break.l-indent-02 {
    padding-left: 1em;
}
.l-heading-primary .break.l-indent-03 {
    padding-left: 2em;
}
.l-heading-secondary {
    font-size: 72px;
    line-height: 1.2em;
    font-weight: 600;
}
.l-heading-tertiary {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2em;
}
.l-line {
    font-weight: 300;
    /* width: 32px; */
    display: inline-block;
    margin-right: 6px;
    transform: translateY(-0.1em);
    transform: translateY(0.18em);
    font-family: "fancy", sans-serif;
    font-weight: 600;
}
.break {
    display: block;
}
.l-heading-contain {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    position: relative;
}
@media (min-width: 1025px) {
    .l-heading-contain p {
        width: 16em;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(290px, -50%);
    }
}
@media (max-width: 1024px) {
    .l-heading-sub {
        font-size: 16px;
    }
    .l-heading-primary {
        font-size: 96px;
    }
    .l-heading-secondary {
        font-size: 64px;
    }
    .l-heading-tertiary {
        font-size: 26px;
    }
    .l-heading-contain p {
        width: 100%;
        max-width: 22em;
        margin-top: 32px;
    }
}
@media (max-width: 767px) {
    .l-heading-sub {
        font-size: 16px;
    }
    .l-heading-primary {
        font-size: 56px;
        /* line-height: 0.9em;
        letter-spacing: -0.02em; */
    }
    .l-heading-primary .break.l-indent-02 {
        padding-left: 0.5em;
    }
    .l-heading-primary .break.l-indent-03 {
        padding-left: 1em;
    }
    .l-heading-secondary {
        font-size: 40px;
    }
    .l-heading-tertiary {
        /* font-size: 32px; */
    }
}

/***** Padding *****/
body {
    --yp-x-padding: 24px;
    --yp-y-padding: 240px;
}
@media (max-width: 1024px) {
    body {
        --yp-y-padding: 200px;
    }
}
@media (max-width: 767px) {
    body {
        --yp-x-padding: 16px;
        --yp-y-padding: 160px;
    }
}

/***** Fancy Text *****/
.fancy {
    font-family: "Fancy", serif;
    font-style: italic;
    font-weight: 500;
}

/***** Signup Form *****/
.l-signup-contain {
    width: calc( 100% - ( var( --yp-x-padding ) * 2 ) );
    max-width: 500px;
    background: #ffffffD9;
    -webkit-backdrop-filter: blur(10px) invert(1);
    backdrop-filter: blur(10px) invert(1);
    /* mix-blend-mode: difference; */
    position: relative;
    z-index: 6;
}
form.l-s-form {
    width: 100%;
    color: var( --yp-colour-heading );
}
.l-s-form .l-sf-input-contain {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: nowrap;
}
.l-s-form .l-sf-input-contain .l-sfi-prefix {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 24px;
    font-size: 14px;
    line-height: 1em;
    font-weight: 400;
    top: calc( 50% - 0.5em );
    color: currentColor;
}
.l-s-form .l-sf-input-contain input::placeholder {
    opacity: 1;
}
.l-s-form .l-sf-input-contain .l-sfi-input {
    font-family: "Fancy", serif;
    font-weight: 500;
    font-style: italic;
    font-size: 16px;
    line-height: 100px;
    vertical-align: middle;
    flex: 1 1 auto;
    padding: 0 0 0 118px;
    color: currentColor;
    background: none;
}
.l-s-form .l-sf-input-contain button,
.l-s-form .l-sf-input-contain button:hover,
.l-s-form .l-sf-input-contain button:focus,
.l-s-form .l-sf-input-contain input,
.l-s-form .l-sf-input-contain input:hover,
.l-s-form .l-sf-input-contain input:focus {
    outline: none;
}
.l-s-form .l-sf-input-contain .l-sfi-submit {
    padding: 0 24px;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    position: relative;
    background: none;
    cursor: pointer;
    color: currentColor;
}
.l-s-form .l-sf-input-contain .l-sfi-submit::after {
    content: "";
    display: block;
    left: 24px;
    right: 24px;
    top: calc( 50% + 12px );
    background: currentColor;
    height: 1px;
    max-height: 1px;
    position: absolute;
}
.l-s-form .l-sf-input-contain .l-sfi-submit .l-sfis-icon {
    width: 24px;
    height: 24px;
}
.l-s-form .l-sf-input-contain .l-sfi-submit .l-sfis-icon {
    fill: currentColor;
}
.l-s-description {
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    line-height: 1em;
    color: var( --yp-colour-heading-reverse );
    mix-blend-mode: difference;
    margin-top: 16px;
    position: relative;
    z-index: 6;
}
.l-s-description a {
    color: var( --yp-colour-heading-reverse );
    mix-blend-mode: difference;
    text-decoration: underline;
    text-underline-offset: 0.1em;
    font-weight: 500;
}
@media (max-width: 548px) {
    .l-s-form .l-sf-input-contain {
        flex-wrap: wrap;
    }
    /* .l-s-form .l-sf-input-contain .l-sfi-prefix,
    .l-s-form .l-sf-input-contain .l-sfi-submit .l-sfis-text, */
    .l-s-form .l-sf-input-contain .l-sfi-submit::after {
        display: none;
    }
    .l-s-form .l-sf-input-contain .l-sfi-prefix {
        top: calc( 36px - 0.5em );
    }
    .l-s-form .l-sf-input-contain .l-sfi-input {
        /* padding-left: var( --yp-x-padding ); */
        line-height: 72px;
    }
    .l-s-form .l-sf-input-contain .l-sfi-submit {
        width: 100%;
        padding: 12px 24px;
    }
}
/*** Blur / Mask Background ***/
.l-signup-cover-full::after,
.l-signup-cover-half::after {
    position: absolute;
    content: "";
    display: block;
    left: 50%;
    top: 50%;
    z-index: 4;
}
/* Full Circle */
.l-signup-cover-full::after {
    width: 100%;
    max-width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background-image: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter: blur(10px) invert(0);
    backdrop-filter: blur(10px) invert(0);
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%,rgba(0,0,0,0) 70%);
    mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 20%,rgba(0,0,0,0) 70%);
}
/* Half Circle */
.l-signup-cover-half::after {
    width: 100%;
    max-width: 500px;
    height: 250px;
    transform: translate(-50%, 0);
    border-radius: 0 0 1000px 1000px;
    background-image: radial-gradient(50% 100% at 50% 0%, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    -webkit-backdrop-filter: blur(10px) invert(0);
    backdrop-filter: blur(10px) invert(0);
    -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%);
    mask-image: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,1) 20%,rgba(0,0,0,0) 100%);
}
/*** Reverse ***/
.l-signup-contain.l-s-reverse .l-s-form {
    color: var( --yp-colour-heading-reverse );
}
.l-signup-cover-full.l-sc-reverse::after,
.l-signup-cover-half.l-sc-reverse::after {
    background-image: radial-gradient(50% 100% at 50% 0%, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    /* mix-blend-mode: difference; */
}

/***** Marquee *****/
.l-marquee-contain {
    /* font-size: 240px; */
    font-size: clamp(240px, 16vw, 16vw);
    line-height: 1.1em;
    letter-spacing: -0.02em;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    /* transform: translateY(90%); */
}
.l-marquee-contain .l-mc-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.45em;
}
.l-marquee-contain span:not(.fancy) {
    padding-left: 0.45em;
}
.l-marquee-contain svg {
    display: block;
    flex: 0 0 0.4em;
    height: auto;
}
.l-marquee-contain svg path {
    fill: currentColor;
}
.l-marquee-contain .fancy {
    font-weight: 700;
}
.l-marquee-contain .outline {
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-fill-color: transparent;
}
@media (max-width: 767px) {
    .l-marquee-contain {
        font-size: clamp(150px, 16vw, 16vw);
    }
}

/***** Logo Marquee *****/
.l-lmc-outer {
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.l-logo-marquee-contain {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 80px,rgba(0,0,0,1) calc(100% - 80px),rgba(255,255,255,0) 100%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(0,0,0,1) 80px,rgba(0,0,0,1) calc(100% - 80px),rgba(255,255,255,0) 100%);
}
.l-logo-marquee-contain .l-lmc-inner {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 80px;
}
.l-logo-marquee-contain svg {
    display: block;
}
.l-logo-marquee-contain svg:first-child {
    margin-left: 80px;
}
.l-logo-marquee-contain svg path {
    fill: currentColor;
}

/***** Structure *****/
.l-container:not(.l-c-noxpad) {
    padding-left: var( --yp-x-padding );
    padding-right: var( --yp-x-padding );
}
.l-c-ypad {
    padding-top: var( --yp-y-padding );
    padding-bottom: var( --yp-y-padding );
}
.l-c-toppad {
    padding-top: var( --yp-y-padding );
}
.l-c-botpad {
    padding-bottom: var( --yp-y-padding );
}

/***** GSAP *****/
/* .split-char,
.split-word, */
.split-line {
    overflow: hidden;
}

/********** Global **********/

body {
    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-size: 14px;
    font-weight: 300;
    line-height: 140%;
    background: var( --yp-colour-site-bg );
    color: var( --yp-colour-text );
    overflow-x: hidden;
    overflow-x: clip;
}
body[data-theme=white] {
    background: var( --yp-colour-site-bg );
}
body::after {
    /* background: linear-gradient(135deg,transparent,var( --yp-colour-site-bg-2 )); */
    background: var( --yp-colour-site-bg-2 );
    content: "";
    position: fixed;
    /* top: -25%; */
    top: 0; 
    left: 50%;
    right: 0;
    bottom: 0;
    width: 50%;
    /* height: 150%; */
    height: 100%;
    /* padding-top: 100%; */
    z-index: -2;
    /* border-radius: 100%; */
    filter: blur(60vh);
    z-index: -2;
}
::placeholder {
    opacity: 1;
    color: currentColor;
}

/***** Transitions *****/
body,
body::after,
.l-hero .l-h-img,
.l-hero .l-h-bg::after,
.l-hero .l-h-cta .l-hc-img,
.l-setup::after {
    -webkit-transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
    -moz-transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
    -ms-transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
    -o-transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
    transition: color 0.3s ease-in-out, background 0.3s ease-in-out;
}
.l-header .l-nav {
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -ms-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
}
.l-header .l-btn.l-b-menu .l-bi-menu,
.l-header .l-btn.l-b-menu .l-bi-menu::before,
.l-header .l-btn.l-b-menu .l-bi-menu::after {
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

/***** Cursor *****/
#l_cursor {
    background: #000;
    mix-blend-mode: difference;
    backdrop-filter: invert(1);
    z-index: 100;
    position: fixed;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    pointer-events: none;
    height: 0;
    width: 0;
    /* animation: spin 6s infinite linear; */
}
/* @keyframes spin { to { rotate: -360deg; } } */
#l_cursor.l-c-hover {
    height: 48px;
    width: 48px;
}
@media (max-width: 1024px) {
    #l_cursor {
        display: none;
    }
}

/********** [SECTION] Header **********/

/***** Header Container *****/
.l-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    padding: 32px var( --yp-x-padding ) 60px;
    position: absolute;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
}

/***** Logo *****/
.l-logo {
    flex: 0 0 240px;
}
.l-logo a {
    display: flex;
    width: 100%;
    max-width: 160px;
    /* transform: translateY(4px); */
    transform: translateY(14%);
}
.l-logo svg {
    width: 100%;
    height: auto;
    display: block;
}
.l-logo svg path {
    fill: var( --yp-colour-heading );
}

/***** Navigation *****/
.l-nav {
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 48px;
    gap: 32px;
    flex-grow: 1;
    flex-shrink: 1;
}
.l-nav a {
    font-weight: 500;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1em;
    gap: 10px;
    flex-wrap: nowrap;
    color: var( --yp-colour-heading );
}

/***** CTA Buttons *****/
.l-header .l-btns {
    flex: 0 0 240px;
    justify-content: flex-end;
}
.l-header .l-btn {
    padding: 0 16px;
    line-height: 32px;
}

/***** Menu Icon *****/
.l-header .l-btn.l-b-menu {
    display: none;
    width: 34px;
    height: 34px;
    justify-content: center;
    align-items: center;
    padding: 0;
}
.l-header .l-btn.l-b-menu .l-bi-menu {
    width: 16px;
    display: flex;
    gap: 6px;
    flex-direction: column;
}
body.l-mobile-nav-active .l-header .l-btn.l-b-menu .l-bi-menu {
    transform: rotate(45deg);
}
.l-header .l-btn.l-b-menu .l-bi-menu::before,
.l-header .l-btn.l-b-menu .l-bi-menu::after {
    content: "";
    width: 16px;
    height: 1px;
    background-color: currentColor;
    transform: none;
    display: block;
}
body.l-mobile-nav-active .l-header .l-btn.l-b-menu .l-bi-menu::before,
body.l-mobile-nav-active .l-header .l-btn.l-b-menu .l-bi-menu::after {
    width: 17px;
}
body.l-mobile-nav-active .l-header .l-btn.l-b-menu .l-bi-menu::before {
    transform: translate(0px, 4px);
}
body.l-mobile-nav-active .l-header .l-btn.l-b-menu .l-bi-menu::after {
    transform: rotate(90deg) translate(-3px, 0px);
}

/***** Header Media Queries *****/
@media (max-width: 1024px) {
    body.l-mobile-nav-active .l-header {
        position: fixed;
    }
    .l-logo,
    .l-header .l-btns {
        flex: 1 1 auto;
    }
    .l-logo a {
        max-width: clamp(0px, 100%, 140px)
    }
    body.l-mobile-nav-active .l-logo svg path {
        fill: var( --yp-colour-heading-reverse );
    }
    .l-nav {
        /* display: none; */
        position: fixed;
        width: 100vw;
        height: 100svh;
        z-index: -1;
        background: var( --yp-colour-heading );
        top: 0;
        left: 0;
        color: var( --yp-colour-heading-reverse );
        opacity: 0;
        transform: translateY(-100%);
        flex-direction: column;
        padding-top: 66px;
    }
    body.l-mobile-nav-active .l-nav {
        opacity: 1;
        transform: translateY(0);
    }
    .l-nav a {
        color: var( --yp-colour-heading-reverse );
        font-size: 40px;
        font-weight: 300;
        text-transform: none;
    }
    .l-header .l-btn.l-b-menu {
        display: flex;
    }
    body.l-mobile-nav-active .l-header .l-btn {
        color: var( --yp-colour-heading );
        background-color: var( --yp-colour-heading-reverse );
        border: 1px solid var( --yp-colour-heading-reverse );
    }
    body.l-mobile-nav-active .l-header .l-btn.l-b-sec {
        color: var( --yp-colour-heading-reverse );
        background-color: transparent;
    }
}
@media (max-width: 460px) {
    .l-header {
        gap: 16px;
    }
    /* .l-logo a {
        transform: translateY(3px);
        max-width: 34px;
        overflow: hidden;
    }
    .l-logo svg {
        min-width: 140px;
    }
    .l-logo svg path.l-l-type {
        display: none;
    } */
    .l-header .l-btn.l-b-sec:not(.l-b-menu) {
        display: none;
    }
}

/********** [SECTION] Hero **********/
.l-hero {
    min-height: clamp( 47vw, 100vh, 100svh );
    position: relative;
    padding-top: 124px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6vw;
    overflow: hidden;
}
/***** Heading *****/
.l-hero .l-h-heading {
    position: relative;
    z-index: 2;
    margin-left: 10%;
    transition: none;
}
.l-hero .l-h-heading.l-heading-primary {
    font-size: 8vw;
}
@media (max-width: 1024px) {
    .l-hero .l-h-heading.l-heading-primary {
        font-size: 9.5vw;
    }
}
/***** Form *****/
.l-hero .l-h-form {
    position: relative;
    z-index: 2;
    margin-left: 20%;
}
.l-hero .l-signup-contain {
    background: var( --yp-colour-heading );
    max-width: 480px;
}
.l-hero .l-s-form .l-sf-input-contain .l-sfi-input {
    line-height: 72px;
}
.l-hero .l-s-description,
.l-hero .l-s-description a {
    color: var( --yp-colour-text );
    text-align: left;
}
/***** Screenshot *****/
.l-h-screen {
    z-index: 1;
}
@media (min-width: 1025px) {
    .l-h-screen {
        position: absolute;
        right: 6%;
        top: 128px;
        width: 30vw;
        will-change: transform, width, right, top;
    }
    /* .l-h-screen::after {
        z-index: 1;
        content: '';
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        padding-top: 100%;
        background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        opacity: 0.3;
    } */
}
@media (max-width: 1024.99px) {
    .l-h-screen {
        margin: 40px auto 0;
    }
}
@media (min-width: 768px) and (max-width: 1024.99px) {
    .l-h-screen {
        width: 80%;
    }
}
@media (max-width: 767.99px) {
    .l-h-screen {
        width: 90%;
    }
}
.l-h-screen img {
    width: 100%;
    height: auto;
}
/*** Buttons **/
@media (min-width: 1025px) {
    .l-hero .l-btns {
        justify-content: center;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
        z-index: 100;
    }
}
@media (max-width: 1024px) {
    .l-hero .l-btns {
        margin-top: 40px;
        width: 100%;
        filter: invert(1);
        justify-content: center;
    }
}
/***** Background Image / Hero Image *****/
/* Background Image */
.l-hero .l-h-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100svh;
    -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    mask: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
    z-index: -1;
    /* opacity: 0.5; */
}
.l-hero .l-h-bg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* background-color: #d9d9d9; */
    background-position: top center;
    background-size: 150vw 200vh;
    -webkit-mask: radial-gradient(at center bottom, transparent 50%, black 100%);
    mask: radial-gradient(at center bottom, transparent 50%, black 100%);
    filter: blur(100px);
}
/* Hero Image */
.l-hero .l-h-img {
    grid-column: span 4 / span 4;
    grid-row: span 5 / span 5;
    grid-column-start: 6;
    grid-row-start: 1;
    background-position: top center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
.l-hero .l-h-img,
.l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2026/05/img-landingBio-04.jpg");
}
/***** CTA *****/
.l-hero .l-h-cta {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 11;
    grid-row-start: 2;
    position: relative;
    z-index: 2;
    margin-top: 32%;
}
.l-hero .l-h-cta .l-hc-img {
    background-position: center center;
    background-size: cover;
    width: 50%;
    padding-top: 50%;
    position: relative;
}
@media (max-width: 1024px) {
    .l-hero {
        grid-template-columns: repeat(6, 1fr);
    }
    /***** Heading *****/
    .l-hero .l-h-heading {
        grid-column: span 3 / span 3;
        grid-row: span 1 / span 1;
        grid-column-start: 1;
        grid-row-start: 2;
        margin-left: 32px
    }
    /***** Form *****/
    .l-hero .l-h-form {
        padding: 64px 32px;
        margin-left: 0;
    }
    .l-hero .l-signup-contain {
        width: 100%;
        max-width: 100%;
    }
    .l-hero .l-s-description,
    .l-hero .l-s-description a {
        text-align: center;
    }
    /***** Image *****/
    .l-hero .l-h-img {
        grid-column: span 6 / span 6;
        grid-row: span 4 / span 4;
        grid-column-start: 1;
        grid-row-start: 4;
        min-height: 90vw;
    }
    /***** CTA *****/
    .l-hero .l-h-cta {
        grid-column: span 2 / span 2;
        grid-row: span 1 / span 1;
        grid-column-start: 5;
        grid-row-start: 2;
        margin-top: 0;
    }
}
@media (max-width: 767px) {
    .l-hero {
        grid-template-columns: repeat(1, 1fr);
    }
    /***** Heading *****/
    .l-hero .l-h-heading {
        grid-column: span 1 / span 1;
        grid-row-start: 1;
        margin-top: 32px;
    }
    /***** Form *****/
    .l-hero .l-h-form {
        padding: 32px;
    }
    /***** Image *****/
    .l-hero .l-h-img {
        grid-column: span 1 / span 1;
    }
    /***** CTA *****/
    .l-hero .l-h-cta {
        display: none;
    }
}

/********** [SECTION] Split Content **********/

/* .scroll-container {
    position: relative;
}
.fixed-view {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.fixed-view .content-wrapper {
    display: flex;
    height: 100svh;
    width: 100%;
}
.fixed-view .image-column,
.fixed-view .text-column { 
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 50%;
    text-align: center;
}
.fixed-view .text-layer,
.fixed-view .image-layer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    visibility: hidden;
}
.fixed-view .text-layer {
    padding: 5vw;
}
.fixed-view .text-layer.active,
.fixed-view .image-layer.active {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.scroll-container .img-box,
.scroll-container .img-layer {
    position: absolute;
    width: 100%;
    height: 100%;
}
.scroll-container .img-box img,
.scroll-container .img-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.scroll-container .l-heading-secondary span.l-h-ui {
    font-style: italic;
    text-decoration: underline;
}
.scroll-container .text-layer p,
.scroll-container .txt-layer p {
    margin-top: 12px;
    font-size: 18px;
}
.scroll-container .scroll-trigger.st-first {
    height: 100vh;
}
.scroll-container .scroll-trigger:not(.st-first) {
    height: 150vh;
}
.stacked-view .img-layer,
.stacked-view .txt-layer {
    height: 50svh;
    width: 100%;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
@media (min-width: 1025px) {
    .stacked-view {
        display: none;
    }
}
@media (max-width: 1024px) {
    .fixed-view {
        display: none !important;
    }
    .fixed-view .content-wrapper {
        flex-direction: column;
    }
    .fixed-view .image-column,
    .fixed-view .text-column {
        height: 50%;
        width: 100%;
    }
    .text-layer p {
        margin-top: 12px;
    }
    .scroll-container .scroll-trigger {
        display: none !important;
    }
    .scroll-container .scroll-trigger.st-first,
    .scroll-container .scroll-trigger:not(.st-first) {
        height: 50vh;
    }
} */

.l-points {
    display: flex;
    gap: 80px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    align-items: flex-start;
}
.l-points .l-po-card {
    width: 100%;
}
.l-points .l-po-img img {
    width: 100%;
    height: auto;
}
.l-points .l-po-text {
    margin-top: 32px;
}
.l-points .l-po-text h2 {
    font-weight: 400;
    padding: 16px 0;
}
@media (max-width: 1024px) {
    .l-points {
        flex-direction: column;
    }
}

/********** [SECTION] Marquees **********/

.l-marquees .l-marquee-contain.l-m-right {
    margin-top: -0.2em;
    margin-bottom: -0.2em;
}
.l-marquees .l-marquee-contain .l-mc-inner {
    padding-left: 0.18em;
    gap: 0.18em;
}
.l-marquees .l-marquee-contain span:not(.fancy) {
    padding-left: 0;
}
@media (max-width: 767px) {
    .l-marquees .l-marquee-contain {
        font-size: 190px;
    }
}

/********** [SECTION] Setup **********/

.l-setup {
    display: flex;
    flex-direction: column;
    gap: 136px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.l-setup::after {
    content: "";
    display: block;
    position: absolute;
    top: -50%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 200%;
    background-image: url("https://youpay.co/wp-content/uploads/2026/05/img-landingBio-01-scaled.jpg");
    background-position: center center;
    background-size: cover;
    filter: blur(100px);
    opacity: 0.5;
    z-index: -1;
}
@media (min-width: 1025px) {
    .l-setup .l-heading-contain p {
        width: 16em;
        transform: translate(140px, -50%);
    }
}
body:not(.theme-dark) .l-setup::after {
    opacity: 0;
}
@media (min-width: 1025px) {
    .l-setup .l-heading-contain p {
        width: 16em;
        transform: translate(140px, -50%);
    }
}
.l-setup .l-steps-contain {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 80px;
    align-items: flex-start;
}
.l-setup .l-sc-step {
    width: 25%;
}
.l-setup .l-btns {
    justify-content: center;
}
@media (min-width: 1025px) {
    .l-setup .l-sc-step:nth-child(2) .l-scs-inner {
        padding-top: 4%;
    }
    .l-setup .l-sc-step:nth-child(3) .l-scs-inner {
        padding-top: 8%;
    }
    .l-setup .l-sc-step:nth-child(4) .l-scs-inner {
        padding-top: 12%;
    }
}
.l-setup .l-sc-step .l-scs-inner {
    max-width: 260px;
}
.l-setup .l-sc-step .l-heading-sub {
    
}
.l-setup .l-sc-step .l-heading-sub .l-line {
    
}
.l-setup .l-sc-step .l-h-heading {
    font-weight: 400;
    padding: 16px 0 32px;
}
.l-setup .l-sc-step p {
    font-weight: 400;
}
@media (max-width: 1024px) {
    .l-setup .l-steps-contain {
        flex-wrap: wrap;
    }
    .l-setup .l-sc-step {
        width: calc( 50% - 40px );
    }
    .l-setup .l-sc-step,
    .l-setup .l-sc-step[style] {
        transform: none !important;
    }
    .l-setup .l-sc-step:nth-child(3) .l-scs-inner,
    .l-setup .l-sc-step:nth-child(4) .l-scs-inner {
        margin-left: 32px;
    }
}
@media (max-width: 512px) {
    .l-setup .l-sc-step {
        width: 100%;
    }
    .l-setup .l-sc-step:nth-child(2) .l-scs-inner {
        margin-left: 10%;
    }
    .l-setup .l-sc-step:nth-child(3) .l-scs-inner {
        margin-left: 20%;
    }
    .l-setup .l-sc-step:nth-child(4) .l-scs-inner {
        margin-left: 30%;
    }
}

/********** [SECTION] Privacy **********/

.l-p-inner,
.l-privacy .l-p-content {
    display: flex;
    flex-direction: column;
    gap: 136px;
}
.l-privacy .l-p-img {
    width: 100vw;
    height: 100svh;
    /* background: #d9d9d9; */
    background-image: url("https://youpay.co/wp-content/uploads/2026/05/img-landingBio-01-scaled.jpg");
    background-size: cover;
    background-position: center center;
    margin-left: calc( 0px - var( --yp-x-padding ) );
    position: relative;
    z-index: 1;
}
.l-privacy .l-p-img .l-pi-overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    background-color: var( --yp-colour-dark-bg );
}
.l-privacy .l-p-content {
    align-items: center;
    position: relative;
    z-index: 2;
    padding-top: 100vh;
}
.l-privacy .l-heading-primary {
    line-height: 1.15em;
    width: 100%;
}
.l-privacy .l-heading-primary .l-line-02 {
    text-align: center;
}
.l-privacy .l-heading-primary .l-line-03 .fancy:last-child {
    float: right;
}
.l-privacy .l-pc-copy {
    display: flex;
    gap: 84px;
    width: 100%;
    max-width: 640px;
}
.l-privacy .l-pc-copy .l-h-heading {
    flex: 0 0 8.6em;
}
@media (max-width: 1024px) {
    .l-p-inner, .l-privacy .l-p-content {
        gap: 96px;
    }
}
@media (max-width: 767px) {
    .l-p-inner, .l-privacy .l-p-content {
        gap: 72px;
    }
    .l-privacy .l-pc-copy {
        display: block;
    }
    .l-privacy .l-pc-copy .l-h-heading {
        max-width: 300px;
        width: 100%;
        padding-left: 32px;
    }
    .l-privacy .l-pc-copy .l-pc-col {
        margin-top: 32px;
        margin-left: auto;
        padding-right: 32px;
        width: 100%;
        max-width: 320px;
    }
}

/********** [SECTION] Footer **********/

.l-footer {
    background: var( --yp-colour-dark-bg );
    color:  var( --yp-colour-text-reverse );
    width: 100%;
}

/***** Footer Signup *****/
.l-f-signup {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
}
/*** Top ***/
.l-f-signup .l-fs-top {
    padding: 24px var( --yp-x-padding ) 0 var( --yp-x-padding );
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    width: 100%;
}
.l-f-signup .l-fs-top .l-f-col:not(.l-fst-logo) {
    flex: 1 1 auto;
    position: relative;
}
.l-f-signup .l-fs-top .l-fst-heading {
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 600;
}
.l-f-signup .l-fs-top .l-fst-heading .fancy {
    font-size: 48px;
    line-height: 1.2em;
    font-weight: 500;
    display: block;
}
.l-f-signup .l-fs-top .l-fst-sub {
    position: absolute;
    bottom: 6px;
    left: 350px;
    max-width: 310px;
    width: 100%;
}
.l-f-signup .l-fs-top .l-f-col.l-fst-logo {
    flex: 0 0 120px;
}
.l-f-signup .l-fst-logo a {
    display: flex;
    width: 100%;
    transform: translateY(-6px);
}
.l-f-signup .l-fst-logo svg {
    width: 100%;
    height: auto;
    display: block;
}
.l-f-signup .l-fst-logo svg path {
    fill: var( --yp-colour-heading-reverse );
}
@media (max-width: 1024px) {
    .l-f-signup .l-fs-top {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 80px;
    }
    .l-f-signup .l-fs-top .l-f-col.l-fst-logo {
        order: -1;
        flex: 1 1 auto;
    }
    .l-f-signup .l-fst-logo a {
        transform: none;
    }
}
@media (max-width: 767px) {
    .l-f-signup .l-fs-top .l-fst-sub {
        position: relative;
        left: 0;
        bottom: auto;
        margin-top: 24px;
    }
}

/*** Marquee / Signup ***/
.l-f-signup .l-fs-marquee-form {
    flex-grow: 1;
    height: 100%;
    width: 100%;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
}
/* Marquee */
.l-f-signup .l-fs-marquee-form .l-marquee-contain {
    width: 100%;
    position: absolute;
    top: calc( 50% - 0.6em );
    left: 0;
    right: 0;
    color: var( --yp-colour-heading-reverse );
    z-index: 1;
}

/***** Footer Bottom *****/
.l-f-bottom {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: flex-start;
    padding: 24px var( --yp-x-padding ) 40px var( --yp-x-padding );
    gap: 24px 16px;
    border-top: 1px solid var( --yp-colour-heading-reverse );
    position: relative;
    z-index: 4;
}
.l-f-bottom .l-f-col {
    width: 20%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
@media (max-width: 767px) {
    .l-f-bottom {
        flex-wrap: wrap;
    }
    .l-f-bottom .l-f-col {
        width: calc( 50% - 8px );
    }
}
.l-f-bottom .l-f-col a,
.l-f-bottom .l-f-col > span {
    display: block;
    color: inherit;
    font-size: 12px;
    line-height: 1.2em;
    letter-spacing: -2%;
    font-weight: 400;
    text-transform: uppercase;
}
.l-f-location {
    display: flex;
    align-items: flex-start;
    width: 100%;
    justify-content: center;
    padding: 0 var( --yp-x-padding ) 40px var( --yp-x-padding );
    gap: 16px 24px;
    position: relative;
    z-index: 4;
    flex-wrap: wrap;
}
@media (max-width: 767px) {
    .l-f-location {
        justify-content: flex-start;
        flex-direction: column;
    }
}
.l-f-location .l-f-col {
    display: block;
    color: inherit;
    font-size: 12px;
    line-height: 1.2em;
    letter-spacing: -2%;
    font-weight: 400;
    text-transform: uppercase;
}

/********** Reverse Theme **********/
body.theme-dark,
body.theme-dark[data-theme=white] {
    background: var( --yp-colour-dark-bg );
    color: var( --yp-colour-text-reverse );
    --yp-colour-site-bg-2: #333;
}
body.theme-dark .l-btn {
    color: var( --yp-colour-heading );
    background-color: var( --yp-colour-heading-reverse );
    border: 1px solid var( --yp-colour-heading-reverse );
}
body.theme-dark .l-btn.l-b-sec {
    color: var( --yp-colour-heading-reverse );
    background-color: transparent;
}
body.theme-dark .l-logo svg path {
    fill: var( --yp-colour-heading-reverse );
}