/********** Normalise **********/
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
}
main {
  display: block;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
pre {
  font-family: monospace, monospace;
  font-size: 1em;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}

/********** Global **********/
*, *:before, *:after {
    box-sizing: border-box;
}
* {
    border: 0;
    vertical-align: baseline;
    word-break: break-word;
}
:root {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    padding: 0;
}
.android-group,
.apple-group {
    display: none;
}

body.mobile-android .android-group,
body.mobile-ios .apple-group {
    display: inline-flex;
}

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

/***** Colours *****/
body {
    --yp-colour-site-bg: #fff;
    --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/Inputs *****/
button, input {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
}
.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;
    }
}

/***** Inputs *****/
button {
    border: 0;
}

/***** 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;
}
a {
    text-decoration: none;
}
.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;
    }
    .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 {
    }
}

/***** 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);
    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-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 {
        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%);
}

/***** 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;
}
.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 *****/
.lc-inner {
    overflow-x: hidden;
}
.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: var( --yp-colour-site-bg-2 );
    content: "";
    position: fixed;
    top: 0; 
    left: 50%;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 100%;
    z-index: -2;
    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;
}

/********** [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(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 (min-width: 1025px) and (max-width: 1100px) {
    .l-nav {
        gap: 20px;
    }
}
@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-header .l-btn.l-b-sec:not(.l-b-menu) {
        display: none;
    }
}

/********** [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;
}

/* App Badges */
.l-f-app-badges {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 8px;
    margin-bottom: 40px;
}
.l-f-app-badges a {
    display: block;
}
.l-f-app-badges svg {
    display: block;
    width: auto;
    height: 36px;
}

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

/********** Pink Theme [Currently a test] **********/
body.theme-pink,
body.theme-pink[data-theme=white] {
    background: #F796B9;
    background: #F796B9;
    color: #000000;
    --yp-colour-site-bg-2: #ffc8dc;
}
body.theme-pink .l-btn {
    color: #fff;
    background-color: #000000;
    border: 1px solid #000000;
}
body.theme-pink .l-btn.l-b-sec {
    color: #000000;
    background-color: transparent;
}
body.theme-pink .l-logo svg path {
    fill: var( --yp-colour-heading );
}

/********** Modal **********/

/* Basic Modal Styles */
.modal__overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(6px);
}
.modal__container {
    background-color: #000;
    padding: 30px;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    border-radius: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal__title {
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.25;
    color: #fff;
    box-sizing: border-box;
}
.modal__close {
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #fff;
    opacity: 0.6;
}
.modal__close:hover {
    opacity: 1;
}
.modal__header .modal__close:before { 
    content: "\2715";
}
.modal__content {
    margin-top: 2rem;
    margin-bottom: 2rem;
    line-height: 1.5;
    color: #fff;
}
.modal__btn {
    font-size: .875rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    background-color: transparent;
    color: #fff;
    border-radius: 500px;
    border: 1px solid #fff;
    cursor: pointer;
    -webkit-appearance: button;
    text-transform: none;
    overflow: visible;
    line-height: 1.15;
    margin: 0;
    will-change: transform;
    -moz-osx-font-smoothing: grayscale;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    transition: -webkit-transform .25s ease-out;
    transition: transform .25s ease-out;
    transition: transform .25s ease-out,-webkit-transform .25s ease-out;
    width: 100%;
}
.modal__btn:focus, .modal__btn:hover {
    background: #fff;
    color: #000;
}
/* Animation Style */
@keyframes mmfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mmfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes mmslideIn {
    from { transform: translateY(15%); }
    to { transform: translateY(0); }
}
@keyframes mmslideOut {
    from { transform: translateY(0); }
    to { transform: translateY(-10%); }
}
.micromodal-slide {
    display: none;
}
.micromodal-slide.is-open {
    display: block;
}
.micromodal-slide[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="false"] .modal__container {
    animation: mmslideIn .3s cubic-bezier(0, 0, .2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.micromodal-slide[aria-hidden="true"] .modal__container {
    animation: mmslideOut .3s cubic-bezier(0, 0, .2, 1);
}

/******************** 
 [Page] Home 
******************** /

/********** [SECTION] Hero **********/
.l-hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    min-height: clamp( 47vw, 100vh, 100svh );
    position: relative;
    padding-top: 124px;
}
/***** Marquee *****/
.l-hero .l-marquee-contain {
    position: relative;
    z-index: 2;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 0;
    right: 0;
}
/***** Heading *****/
.l-hero .l-h-heading {
    grid-column: span 4 / span 4;
    grid-row: span 1 / span 1;
    grid-column-start: 2;
    grid-row-start: 2;
    position: relative;
    z-index: 2;
    width: 12em;
}
/***** Form *****/
.l-hero .l-h-form {
    grid-column: span 6 / span 6;
    grid-row: span 1 / span 1;
    grid-column-start: 2;
    grid-row-start: 3;
    position: relative;
    z-index: 2;
}
.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;
}
/***** 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;
}
.l-hero .l-h-bg::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-position: center 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,
body.l-creator-01 .l-hero .l-h-img,
.l-hero .l-h-bg::after,
body.l-creator-01 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-01-opt.jpg");
}
.l-hero .l-h-cta .l-hc-img,
body.l-creator-01 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/07/img-l-creator-12-opt.jpg");
}
body.l-creator-02 .l-hero .l-h-img,
body.l-creator-02 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/07/img-l-creator-12-opt.jpg");
}
body.l-creator-02 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/11/img-l-creator-14-opt.jpg");
}
body.l-creator-03 .l-hero .l-h-img,
body.l-creator-03 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/11/img-l-creator-14-opt.jpg");
}
body.l-creator-03 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-03-w-opt.jpg");
}
body.l-creator-04 .l-hero .l-h-img,
body.l-creator-04 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-03-w-opt.jpg");
}
body.l-creator-04 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-05-opt.jpg");
}
body.l-creator-05 .l-hero .l-h-img,
body.l-creator-05 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-05-opt.jpg");
}
body.l-creator-05 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-06-opt.jpg");
}
body.l-creator-06 .l-hero .l-h-img,
body.l-creator-06 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-06-opt.jpg");
}
body.l-creator-06 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-07-opt.jpg");
}
body.l-creator-07 .l-hero .l-h-img,
body.l-creator-07 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-07-opt.jpg");
}
body.l-creator-07 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-08-opt.jpg");
}
body.l-creator-08 .l-hero .l-h-img,
body.l-creator-08 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-08-opt.jpg");
}
body.l-creator-08 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-04-opt.jpg");
}
body.l-creator-09 .l-hero .l-h-img,
body.l-creator-09 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-04-opt.jpg");
}
body.l-creator-09 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-10-w-opt.jpg");
}
body.l-creator-10 .l-hero .l-h-img,
body.l-creator-10 .l-hero .l-h-bg::after {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-10-w-opt.jpg");
}
body.l-creator-10 .l-hero .l-h-cta .l-hc-img {
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-01-opt.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;
}
.l-hero .l-h-cta .l-hc-text {
    width: 10em;
    margin-top: 4px;
}
@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 {
        grid-column-start: 1;
        grid-row-start: 3;
        padding: 64px 32px;
    }
    .l-hero .l-signup-contain {
        /* width: calc( 100% - ( var( --yp-x-padding ) * 2 ) ); */
        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;
    }
    /***** Marquee *****/
    .l-hero .l-marquee-contain {
        bottom: 25vw;
    }
}
@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 {
        grid-column: span 1 / span 1;
        padding: 32px;
    }
    /***** Image *****/
    .l-hero .l-h-img {
        grid-column: span 1 / span 1;
    }
    /***** CTA *****/
    .l-hero .l-h-cta {
        display: none;
    }
}

/********** [SECTION] Screenshot / Signup **********/

.l-screen {
    padding-top: 32px;
    position: relative;
    min-height: 56.25vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.l-screen::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-landing-01-opt.jpg");
    background-position: center center;
    background-size: cover;
    filter: blur(100px);
    opacity: 0.3;
    z-index: -1;
}
/***** Signup Form *****/
.l-screen .l-signup-contain {
    background-color: #00000080;
}
.l-screen.l-signup-cover-half::after {
    /* opacity: 0; */
    background-image: radial-gradient(50% 100% at 50% 0%, rgba(31,33,42,1) 0%,rgba(31,33,42,0) 100%);
}
/******* Buttons *******/
.l-screen .l-btns {
    z-index: 6;
}
/******* App Badges *******/
.l-s-app-badges {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 8px;
    margin-bottom: 40px;
    z-index: 6;
}
.l-s-app-badges a {
    display: block;
}
.l-s-app-badges svg {
    display: block;
    width: auto;
    height: 48px;
}
@media (max-width: 386px) {
    .l-s-app-badges svg {
        height: 44px;
    }
}
/******* Image Placeholder *******/
.l-screen {
    position: relative;
}
.l-screen .l-s-img {
    background-color: #d9d9d9;
    z-index: 1;
    position: absolute;
    top: 32px;
    left: var( --yp-x-padding );
    right: var( --yp-x-padding );
    bottom: 0;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-landing-01-opt.jpg");
    background-size: cover;
    background-position: center center;
}
@media (max-width: 1024px) {
    .l-screen {
        min-height: 137.80487804878vw;
    }
    .l-screen .l-s-img {
        background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-landing-03-opt.jpg");
    }
}
@media (max-width: 767px) {
    .l-screen {
        min-height: 177.77777777778vw;
    }
    .l-screen .l-s-img {
        background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-landing-02-opt.jpg");
    }
}

/********** [SECTION] Brands **********/

.l-brands {
    display: flex;
    flex-direction: column;
    gap: 136px;
}
@media (min-width: 1025px) {
    .l-brands .l-heading-contain p {
        width: 16em;
        transform: translate(290px, -50%);
    }
}
.l-brands svg.l-logo {
    height: auto;
    width: 100%;
    display: block;
}
body {
    --logo-steam: 160px;
    --logo-blackmilk: 152px;
    --logo-nike: 142px;
    --logo-lululemon: 184px;
    --logo-lskd: 142px;
    --logo-mimco: 152px;
    --logo-doordash: 238px;
    --logo-airbnb: 150px;
    --logo-ikea: 133px;
    --logo-amazon: 142px;
    --logo-spotify: 163px;
    --logo-clinique: 164px;
    --logo-prezzee: 160px;
    --logo-sheridan: 205px;
    --logo-apple: 69px;
    --logo-trenery: 160px;
    --logo-netflix: 141px;
    --logo-ubereats: 172px;
    --logo-twitch: 109px;
    --logo-honeybirdette: 238px;
    --logo-pandora: 177px;
    --logo-ticketmaster: 206px;
    --logo-asos: 113px;
    --logo-visa: 108px;
}
.l-brands svg.logo-steam { width: var( --logo-steam ); max-width: var( --logo-steam ); }
.l-brands svg.logo-blackmilk { width: var( --logo-blackmilk ); max-width: var( --logo-steam ); }
.l-brands svg.logo-nike { width: var( --logo-nike ); max-width: var( --logo-nike ); }
.l-brands svg.logo-lululemon { width: var( --logo-lululemon ); max-width: var( --logo-lululemon ); }
.l-brands svg.logo-lskd { width: var( --logo-lskd ); max-width: var( --logo-lskd ); }
.l-brands svg.logo-mimco { width: var( --logo-mimco ); max-width: var( --logo-mimco ); transform: translateY(5px); }
.l-brands svg.logo-doordash { width: var( --logo-doordash ); max-width: var( --logo-doordash ); }
.l-brands svg.logo-airbnb { width: var( --logo-airbnb ); max-width: var( --logo-airbnb ); }
.l-brands svg.logo-ikea { width: var( --logo-ikea ); max-width: var( --logo-ikea ); }
.l-brands svg.logo-amazon { width: var( --logo-amazon ); max-width: var( --logo-amazon ); transform: translateY(4px); }
.l-brands svg.logo-spotify { width: var( --logo-spotify ); max-width: var( --logo-spotify ); }
.l-brands svg.logo-clinique { width: var( --logo-clinique ); max-width: var( --logo-clinique ); transform: translateY(2px); }
.l-brands svg.logo-prezzee { width: var( --logo-prezzee ); max-width: var( --logo-prezzee ); }
.l-brands svg.logo-sheridan { width: var( --logo-sheridan ); max-width: var( --logo-sheridan ); transform: translateY(6px); }
.l-brands svg.logo-apple { width: var( --logo-apple ); max-width: var( --logo-apple ); }
.l-brands svg.logo-trenery { width: var( --logo-trenery ); max-width: var( --logo-trenery ); }
.l-brands svg.logo-netflix { width: var( --logo-netflix ); max-width: var( --logo-netflix ); }
.l-brands svg.logo-ubereats { width: var( --logo-ubereats ); max-width: var( --logo-ubereats ); }
.l-brands svg.logo-twitch { width: var( --logo-twitch ); max-width: var( --logo-twitch ); }
.l-brands svg.logo-honeybirdette { width: var( --logo-honeybirdette ); max-width: var( --logo-honeybirdette ); transform: translateY(6px); }
.l-brands svg.logo-pandora { width: var( --logo-pandora ); max-width: var( --logo-pandora ); transform: translateY(-1px); }
.l-brands svg.logo-ticketmaster { width: var( --logo-ticketmaster ); max-width: var( --logo-ticketmaster ); }
.l-brands svg.logo-asos { width: var( --logo-asos ); max-width: var( --logo-asos ); }
.l-brands svg.logo-visa { width: var( --logo-visa ); max-width: var( --logo-visa ); }
.l-brands .l-btns {
    justify-content: center;
}
@media (max-width: 1024px) {
    .l-brands {
        gap: 96px;
    }
}
@media (max-width: 767px) {
    body {
        --logo-steam: calc( 160px * 0.8 );
        --logo-blackmilk: calc( 152px * 0.8 );
        --logo-nike: calc( 142px * 0.8 );
        --logo-lululemon: calc( 184px * 0.8 );
        --logo-lskd: calc( 142px * 0.8 );
        --logo-mimco: calc( 152px * 0.8 );
        --logo-doordash: calc( 238px * 0.8 );
        --logo-airbnb: calc( 150px * 0.8 );
        --logo-ikea: calc( 133px * 0.8 );
        --logo-amazon: calc( 142px * 0.8 );
        --logo-spotify: calc( 163px * 0.8 );
        --logo-clinique: calc( 164px * 0.8 );
        --logo-prezzee: calc( 160px * 0.8 );
        --logo-sheridan: calc( 205px * 0.8 );
        --logo-apple: calc( 69px * 0.8 );
        --logo-trenery: calc( 160px * 0.8 );
        --logo-netflix: calc( 141px * 0.8 );
        --logo-ubereats: calc( 172px * 0.8 );
        --logo-twitch: calc( 109px * 0.8 );
        --logo-honeybirdette: calc( 238px * 0.8 );
        --logo-pandora: calc( 177px * 0.8 );
        --logo-ticketmaster: calc( 206px * 0.8 );
        --logo-asos: calc( 113px * 0.8 );
        --logo-visa: calc( 108px * 0.8 );
    }
    .l-brands {
        display: flex;
        flex-direction: column;
        gap: 72px;
    }
}

/********** [SECTION] Why YouPay **********/

.l-photo-heading {
}
.l-photo-heading .l-grid-heading {
    gap: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
}
.l-photo-heading .l-grid-heading .l-heading-sub {
    text-align: center;
    max-width: 100%;
}
.l-photo-heading .l-grid-heading .l-heading-secondary {
    text-align: center;
    max-width: 15em;
}
.l-photo-grid .l-pgp {
    background-position: top center;
    background-size: cover;
}
.l-photo-grid .l-pg-spacer {
    grid-column-start: 1;
    grid-row-start: 1;
    padding-top: 100%;
}
.l-photo-heading .l-photo-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(30, 1fr);
    gap: 0px;
    overflow: visible;
    width: 100%;
    padding-top: 50vh;
    padding-bottom: 100vh;
}
.l-photo-grid .l-pg-photo-01 {
    grid-column-start: 5;
    grid-row-start: 2;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-01-opt.jpg");
}
.l-photo-grid .l-pg-photo-02 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 9;
    grid-row-start: 4;
    z-index: -1;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-02-opt.jpg");
}
.l-photo-grid .l-pg-photo-03 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 2;
    grid-row-start: 7;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-11-w-opt.jpg");
}
.l-photo-grid .l-pg-photo-04 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 6;
    grid-row-start: 11;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-04-opt.jpg");
}
.l-photo-grid .l-pg-photo-05 {
    grid-column-start: 11;
    grid-row-start: 15;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-05-opt.jpg");
}
.l-photo-grid .l-pg-photo-06 {
    grid-column: span 2 / span 2;
    grid-row: span 2 / span 2;
    grid-column-start: 3;
    grid-row-start: 17;
    z-index: -1;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-06-opt.jpg");
}
.l-photo-grid .l-pg-photo-07 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-column-start: 10;
    grid-row-start: 21;
    background-image: url("https://youpay.co/wp-content/uploads/2025/11/img-l-creator-13-opt.jpg");
}
.l-photo-grid .l-pg-photo-08 {
    grid-column-start: 6;
    grid-row-start: 22;
    z-index: -1;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-08-opt.jpg");
}
.l-photo-grid .l-pg-photo-09 {
    grid-column: span 2 / span 2;
    grid-row: span 3 / span 3;
    grid-row-start: 25;
    background-image: url("https://youpay.co/wp-content/uploads/2025/01/img-l-creator-09-opt.jpg");
}
@media (max-width: 1024px) {
    .l-photo-heading .l-photo-grid {
        grid-template-columns: repeat(9, 1fr);
        grid-template-rows: repeat(40, 1fr);
    }
    .l-photo-grid .l-pg-photo-01 {
        grid-column-start: 4;
        grid-row-start: 2;
    }
    .l-photo-grid .l-pg-photo-02 {
        grid-column-start: 8;
        grid-row-start: 7;
    }
    .l-photo-grid .l-pg-photo-03 {
        grid-column-start: 1;
        grid-row-start: 10;
    }
    .l-photo-grid .l-pg-photo-04 {
        grid-column-start: 7;
        grid-row-start: 14;
    }
    .l-photo-grid .l-pg-photo-05 {
        grid-column-start: 9;
        grid-row-start: 22;
    }
    .l-photo-grid .l-pg-photo-06 {
        grid-column-start: 2;
        grid-row-start: 23;
    }
    .l-photo-grid .l-pg-photo-07 {
        grid-column-start: 6;
        grid-row-start: 28;
    }
    .l-photo-grid .l-pg-photo-08 {
        grid-column-start: 5;
        grid-row-start: 30;
    }
    .l-photo-grid .l-pg-photo-09 {
        grid-row-start: 35;
    }
}
@media (max-width: 767px) {
    .l-photo-heading .l-photo-grid {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(22, 1fr);
    }
    .l-pgp,
    .l-pgp {
        transform: none !important;
    }
    .l-photo-grid .l-pg-photo-01 {
        grid-column-start: 3;
        grid-row-start: 2;
    }
    .l-photo-grid .l-pg-photo-02 {
        grid-column-start: 5;
        grid-row-start: 6;
    }
    .l-photo-grid .l-pg-photo-03 {
        grid-column-start: 1;
        grid-row-start: 10;
    }
    .l-photo-grid .l-pg-photo-04 {
        grid-column-start: 4;
        grid-row-start: 14;
        z-index: -1;
    }
    .l-photo-grid .l-pg-photo-05 {
        grid-column-start: 6;
        grid-row-start: 18;
    }
    .l-photo-grid .l-pg-photo-06 {
        grid-column-start: 2;
        grid-row-start: 21;
        display: none;
    }
    .l-photo-grid .l-pg-photo-07 {
        grid-column-start: 4;
        grid-row-start: 25;
        z-index: 0;
        display: none;
    }
    .l-photo-grid .l-pg-photo-08 {
        grid-column-start: 6;
        grid-row-start: 30;
        display: none;
    }
    .l-photo-grid .l-pg-photo-09 {
        grid-row-start: 32;
        display: none;
    }
}

/********** [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/2025/01/img-landing-04-opt.jpg");
    background-position: center center;
    background-size: cover;
    filter: blur(100px);
    opacity: 0.5;
    z-index: -1;
}
body:not(.theme-dark) .l-setup::after {
    opacity: 0;
}
@media (min-width: 1025px) {
    .l-setup .l-heading-contain p {
        width: 16em;
        transform: translate(220px, -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-image: url("https://youpay.co/wp-content/uploads/2025/01/img-landing-04-opt.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.5em;
}
@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;
    }
}

/******************** 
 [Page] Card 
******************** /

/********** [SECTION] Card Hero **********/

.l-card-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    min-height: clamp( 47vw, 100vh, 100svh );
    position: relative;
    /* padding-top: 66px; */
}
.l-card-hero::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 100%;
    background: linear-gradient(to bottom, transparent 0%, black 40%, black 60%, transparent 100% );
    pointer-events: none;
    opacity: 0.6;
}
.l-card-hero .l-ch-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    bottom: 0;
    transform: translateY(-10vw);
    aspect-ratio: 1/1;
    background-image: url("https://youpay.co/wp-content/uploads/2026/10/bg-noise-1.jpg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 90% );
    mask-image: linear-gradient( to bottom, black 0%, black 60%, transparent 90% );
}
.l-card-hero .l-ch-heading .l-heading-primary {
    pointer-events: none;
}
.l-card-hero .l-ch-heading .fancy {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px #0000004d;
}
/* .l-card-hero .l-ch-heading .fancy .split-word {
    background: linear-gradient(to bottom, #fff, #eee);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    padding: 8px;
    inset: 0 -8px;
} */
.l-card-hero .l-card-contain {
    width: 100%;
    aspect-ratio: 1/1;
    left: 0;
    top: 0;
    position: absolute;
    transform: translateY(32vh);
    display: flex;
    align-items: center;
    justify-content: center;
}
.l-card-hero .l-card-contain .l-cc-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.l-card-hero #card_hero {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    touch-action: pan-y;
}
.l-card-hero .split-word {
    padding: 6px 0;
}
.l-card-hero .l-btns {
    /* position: absolute;
    bottom: 60px;
    left: 0; */
    position: relative;
    z-index: 3;
    width: 100%;
    justify-content: center;
}
/* @media (min-width: 1025px) {
    .l-card-hero .l-ch-heading .l-heading-primary {
        transform: translateY(-5vw);
    }
    .l-card-hero .l-card-contain {
        transform: translateY(-5vw);
    }
    .l-card-hero .l-btns {
        transform: translateY(-5vw);
    }
} */
@media (min-width: 681px) {
    .l-card-hero .l-btns {
        transform: translateY(36px);
    }
}
@media (max-width: 1024px) {
    .l-card-hero #card_hero {
        width: 150%;
    }
}
@media (max-width: 680px) {
    .l-card-hero {
        justify-content: flex-start;
        padding-top: 55vw;
        padding-bottom: 55vw;
    }
    .l-card-hero .l-ch-bg {
        aspect-ratio: 1/3;
        transform: none;
    }
    .l-card-hero .l-ch-heading .l-heading-primary {
        transform: translateY(-5vw);
    }
    .l-card-hero .l-card-contain {
        transform: translateY(0);
        margin-top: 85vw;
    }
    .l-card-hero #card_hero {
        width: 200%;
    }
    .l-card-hero .l-btns {
        margin-top: 32px;
        transform: translateY(-5vw);
    }
}
@media (max-width: 480px) {
    .l-card-hero .l-ch-heading .l-heading-primary {
        font-size: 13vw;
    }
}


/********** [SECTION] Card About **********/

.l-about {
    gap: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100svh;
    text-align: center;
    position: relative;
}
.l-about .l-a-heading {
    position: relative;
    z-index: 1;
}
.l-about .l-a-heading .l-heading-sub {
    margin-bottom: 1.5rem;
}
.l-about .l-a-heading .l-heading-secondary {
    max-width: 13.5em;
}
.l-about .l-btns {
    position: relative;
    z-index: 1;
}

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

body.page-template-page-card .l-marquees .l-marquee-contain.l-m-right {
    margin-bottom: 0
}

/********** [SECTION] Card Why **********/

.l-card-why {
    display: flex;
    gap: 4rem;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.l-card-why .l-cw-bg {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    bottom: 0;
    aspect-ratio: 2/1;
    background-image: url("https://youpay.co/wp-content/uploads/2026/10/bg-noise-2.jpg");
    background-position: left center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 40%, black 60%, transparent 100% );
    mask-image: linear-gradient( to bottom, transparent 0%, black 40%, black 60%, transparent 100% );
}
.l-card-why .l-heading-contain {
    align-items: flex-start;
    width: 100%;
}
.l-card-why .l-heading-contain .split-word {
    padding: 6px;
}
.l-card-why .l-btns {
    margin-top: 2rem;
}
.l-card-why .l-points-contain {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 80px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.l-card-why .l-pc-point {
    width: 25%;
}
.l-card-why .l-pc-point .l-scs-inner {
    max-width: 260px;
}
.l-card-why .l-pc-point .l-h-heading {
    font-weight: 400;
    padding: 16px 0 32px;
}
.l-card-why .l-pc-point p {
    font-weight: 400;
}
@media (min-width: 1083px) {
    .l-card-why .l-btns.show-mobile {
        display: none;
    }
}
@media (max-width: 1082px) {
    .l-card-why {
        flex-direction: column;
    }
    .l-card-why .l-cw-bg {
        aspect-ratio: 1/1;
    }
    .l-card-why .l-heading-contain,
    .l-card-why .l-heading-contain[style] {
        transform: none !important;
    }
    .l-card-why .l-btns.show-desktop {
        display: none;
    }
}
@media (max-width: 680px) {
    .l-card-why .l-cw-bg {
        aspect-ratio: 2/3;
    }
}
@media (min-width: 513px) {
    .l-card-why .l-pc-point {
        width: calc( 50% - 40px );
    }
}
@media (max-width: 512px) {
    .l-card-why .l-pc-point {
        width: 100%;
    }
}

/********** [SECTION] Card CTA **********/

.l-card-cta {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 100px;
    align-items: center;
}
.l-card-cta .l-cc-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    background-image: url("https://youpay.co/wp-content/uploads/2026/10/bg-noise-3.jpg");
    background-position: 44.4% top;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 56% );
    mask-image: linear-gradient( to bottom, transparent 0%, black 56% );
}
.l-card-cta .l-heading-contain {
    position: relative;
    z-index: 1;
}
.l-card-cta .l-btns {
    margin-top: 2rem;
    justify-content: center;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.l-card-cta .l-btns .l-cc-app-badges {
    display: flex;
    gap: 6px;
    justify-content: center;
}
.l-card-cta .l-btns .l-cc-app-badges svg {
    height: 50px;
    width: auto;
    display: block;
}
.l-card-cta .l-cc-phone {
    margin-top: 2rem;
    justify-content: center;
    width: 100%;
    max-width: 1000px;
    aspect-ratio: 1/1;
    position: relative;
    z-index: 1;
    margin: 0 auto;
}
.l-card-cta .l-cc-phone .l-ccp-phone {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 1;
}
.l-card-cta .l-cc-phone .l-ccp-card-contain {
    width: 100%;
    max-width: 900px;
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    padding: 0 32px;
}
.l-card-cta .l-cc-phone .l-ccp-card-contain svg {
    width: 100%;
    height: auto;
    display: block;
}

/********** [SECTION] Card Modal **********/
/* Button */
.l-countries {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 5;
    font-weight: 600;
    padding: 20px;
    background-color: 00000033;
    backdrop-filter: blur(16px);
    border: 1px solid #ffffff1a;
    display: flex;
    align-items: center;
    width: auto;
    color: #fff;
    width: 212px;
    text-align: left;
}
.flag-carousel {
    width: 60px;
    height: 40px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient( to right, transparent, #000 10px, #000 calc(100% - 10px), transparent );
    mask-image: linear-gradient( to right, transparent, #000 10px, #000 calc(100% - 10px), transparent );
    transform: translateX(-10px);
    flex-shrink: 0;
}
.flag-carousel__track {
    display: flex;
    width: max-content;
    gap: 20px;
    padding-left: 10px;
    transition: transform 250ms ease-in-out;
}
.flag-carousel__track img {
    display: block;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    object-fit: contain;
}

/* Modal Content */
.mastercard-countries {
    width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
    line-height: 1.6;
}
.mastercard-countries__grid {
    margin-top: 24px;
    margin-bottom: 24px;
}
.mastercard-countries__grid > article + article {
    margin-top: 16px;
}
.mastercard-countries__grid > article {
    padding: 20px;
    border: 1px solid #ffffff2e;
    box-sizing: border-box;
}
.mastercard-countries h3 {
    margin: 0 0 10px;
    font-size: 1.125rem;
    line-height: 1.3;
}
.mastercard-countries p {
    margin: 0;
}
.mastercard-countries__notice {
    font-size: 0.875rem;
    opacity: 0.7;
}
@media (max-width: 600px) {
    .mastercard-countries__grid > article {
        padding: 16px;
    }
}