/* ------------------------------------------------------------------
   SHARED landing scroll pages (parallax) for the sibling domains
   (uartig.com, liderlig.com, sextra.com, sexlyster.com).

   One stylesheet, one script: every site symlinks
     css/landing.css        -> ../../shared/landing/landing.css
     js/landing-parallax.js -> ../../shared/landing/landing.js

   Nothing here changes the page-1 screen. The whole look is driven by
   custom properties set inline on the `.lp` wrapper, so each site keeps
   its own palette / type / shapes without any per-site class or extra
   stylesheet. Only the highlighted tokens normally need overriding:

     --lp-bg-image   url(themes/D1/images/bg.jpg)   shared theme photo
     --lp-bg-position / --lp-bg-position-mobile     matches #app on page 1
     --lp-veil (rgb) readability veil colour, --lp-veil-edge/--lp-veil-mid
     --lp-accent / --lp-accent-rgb (+ -light)       brand accent, hex + rgb
     --lp-ink / --lp-muted / --lp-line              text colours
     --lp-title-weight / --lp-title-tracking / --lp-title-case
     --lp-radius-media / --lp-radius-card / --lp-radius-btn / --lp-radius-chip
     --lp-deco-rotate / --lp-deco-rotate-alt        photo tilt
     --lp-page-min   one scroll page (scroll box is ~viewport minus header+footer)
     --lp-media-portrait / --lp-media-wide          photo column widths

   Example:
     <div class="lp" id="lp-pages" style="
        --lp-bg-image:url(themes/D1/images/bg.jpg);
        --lp-bg-position:center center;
        --lp-veil:10 5 6;
        --lp-accent:#dc2626;--lp-accent-rgb:220 38 38;
        --lp-accent-light:#ef4444;--lp-accent-light-rgb:239 68 68">
   ------------------------------------------------------------------ */

.lp {
    /* ---------------------------------------------------------- palette */
    --lp-bg: #0a0608;
    --lp-ink: #fdf6f4;
    --lp-strong: #fff;
    --lp-lead: rgba(253, 246, 244, .88);
    --lp-muted: rgba(250, 236, 233, .73);
    --lp-accent: #c81e1e;
    --lp-accent-rgb: 200 30 30;
    --lp-accent-light: #ef4444;
    --lp-accent-light-rgb: 239 68 68;
    --lp-line: rgba(255, 255, 255, .10);
    --lp-eyebrow: var(--lp-accent-light);
    --lp-veil: 12 6 8;
    --lp-veil-edge: .80;
    --lp-veil-mid: .56;
    --lp-surface: rgba(20, 11, 13, .78);
    --lp-surface-2: rgba(12, 7, 9, .58);
    --lp-card-tint: rgba(200, 30, 30, .16);
    --lp-glow: .55;

    /* ------------------------------------------------- typography / shape */
    --lp-font: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --lp-title-weight: 700;
    --lp-title-tracking: -.015em;
    --lp-title-case: none;
    --lp-label-case: uppercase;
    --lp-radius-media: 16px;
    --lp-radius-card: 14px;
    --lp-radius-btn: 10px;
    --lp-radius-chip: 999px;
    --lp-deco-rotate: -1.6deg;
    --lp-deco-rotate-alt: 1.4deg;

    /* ---------------------------------------------------------- layout */
    --lp-max: 1180px;
    --lp-page-min: calc(100svh - 140px);
    --lp-gap: clamp(56px, 7vh, 96px);
    --lp-media-portrait: 420px;
    --lp-media-wide: 560px;
    --lp-media-heading: 430px;
}

.lp {
    position: relative;
    z-index: 1;
    color: var(--lp-ink);
    font-family: var(--lp-font);
    background-color: var(--lp-bg);
    /* Shared background: fixed, so it holds still while the content slides. */
    background-image: var(--lp-bg-image, none);
    background-position: var(--lp-bg-position, 100% center);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

.lp *,
.lp *::before,
.lp *::after {
    box-sizing: border-box;
}

/* soft entry from the untouched page 1 into the first scroll page */
.lp::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 140px;
    z-index: 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgb(var(--lp-veil) / .97) 0%, rgb(var(--lp-veil) / .55) 46%, rgb(var(--lp-veil) / 0) 100%);
}

/* the page footer is fixed; keep it above the new sections */
.footer-wrapper {
    z-index: 55;
}

/* ------------------------------------------------------ page 1 (hero) */
/* The app shell is the scroll viewport (bar outside, scroll box inside), so one
   screen here is 100% of the scroll box. Page 1 is wrapped in `.lp-hero`, which
   is exactly one screen tall: the landing pages then start on the next screen.
   Children keep their own size and anything past the screen edge stays clipped,
   so the hero above the fold is untouched. Without JS the wrapper is inert. */
.lp-js .lp-hero {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.lp-js .lp-hero > * {
    flex: 0 0 auto;
}

/* ------------------------------------------------------- top bar (shell) */
/* The app shell keeps its bar outside the scroll box, so at the seam the bar
   kept page 1's raw backdrop while everything below carried the landing veil.
   landing.js tags it `.lp-bar` and hands it the pages' composite tint (the .lp
   base plus the section veil), so the logo stays put and the strip reads as
   part of page 2+ instead of a different surface. */
.lp-js .items-start > .horizontal-bars {
    transition: background-color .35s ease, border-color .35s ease;
}

.lp-js .items-start > .horizontal-bars.lp-bar {
    border-bottom-color: rgb(255 255 255 / .08);
    box-shadow: 0 1px 0 rgb(0 0 0 / .35);
}

.lp-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 80;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.lp-progress.is-on {
    opacity: 1;
}

.lp-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--lp-accent), var(--lp-accent-light));
    box-shadow: 0 0 16px rgb(var(--lp-accent-light-rgb) / .8);
}

/* ------------------------------------------------------------- sections */

.lp-section {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--lp-page-min);
    padding: var(--lp-gap) clamp(20px, 5vw, 64px) calc(var(--lp-gap) + 16px);
    overflow: hidden;
    isolation: isolate;
}

/* the veil is symmetric top/bottom so neighbouring sections meet seamlessly */
.lp-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg,
        rgb(var(--lp-veil) / var(--lp-veil-edge)) 0%,
        rgb(var(--lp-veil) / var(--lp-veil-mid)) 18%,
        rgb(var(--lp-veil) / var(--lp-veil-mid)) 82%,
        rgb(var(--lp-veil) / var(--lp-veil-edge)) 100%),
        radial-gradient(120% 90% at 88% 4%, rgb(var(--lp-accent-rgb) / .18) 0%, rgb(var(--lp-accent-rgb) / 0) 62%),
        linear-gradient(100deg,
        rgb(var(--lp-veil) / .90) 0%,
        rgb(var(--lp-veil) / .70) 46%,
        rgb(var(--lp-veil) / .20) 82%,
        rgb(var(--lp-veil) / .34) 100%);
}

.lp-section--finale::before {
    background:
        linear-gradient(180deg,
        rgb(var(--lp-veil) / var(--lp-veil-edge)) 0%,
        rgb(var(--lp-veil) / .72) 22%,
        rgb(var(--lp-veil) / .78) 78%,
        rgb(var(--lp-veil) / .92) 100%),
        radial-gradient(78% 70% at 50% 42%, rgb(var(--lp-veil) / .72) 0%, rgb(var(--lp-veil) / .30) 62%, rgb(var(--lp-veil) / .62) 100%);
}

.lp-inner {
    position: relative;
    width: 100%;
    max-width: var(--lp-max);
    margin: 0 auto;
}

.lp-inner--narrow {
    max-width: 940px;
}

/* ------------------------------------------------------------ typography */

.lp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 0 0 1.1rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: var(--lp-label-case);
    color: var(--lp-eyebrow);
}

.lp-eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--lp-accent-light));
}

.lp-title {
    margin: 0 0 1.2rem;
    font-size: clamp(1.8rem, 3.6vw, 3rem);
    line-height: 1.12;
    font-weight: var(--lp-title-weight);
    letter-spacing: var(--lp-title-tracking);
    text-transform: var(--lp-title-case);
    text-wrap: balance;
    color: #fff;
    text-shadow: 0 2px 26px rgba(0, 0, 0, .6);
}

.lp-title--sm {
    font-size: clamp(1.55rem, 3vw, 2.45rem);
}

.lp-lead {
    max-width: 58ch;
    margin: 0 0 .9rem;
    font-size: clamp(1rem, 1.25vw, 1.16rem);
    line-height: 1.62;
    color: var(--lp-lead);
}

.lp-text {
    max-width: 64ch;
    margin: 0 0 .85rem;
    font-size: clamp(.95rem, 1.1vw, 1.02rem);
    line-height: 1.74;
    color: var(--lp-muted);
}

.lp-quote {
    margin: 1.6rem 0 0;
    padding: .1rem 0 .1rem 1.1rem;
    border-left: 2px solid var(--lp-accent-light);
    font-size: clamp(1.02rem, 1.4vw, 1.22rem);
    line-height: 1.5;
    color: #fff;
}

/* ---------------------------------------------------------------- buttons */

.lp-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
    margin-top: 1.6rem;
}

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    padding: .92rem 1.55rem;
    border-radius: var(--lp-radius-btn);
    border: 1px solid transparent;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-decoration: none;
    color: #fff;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}

.lp-btn--primary {
    background: linear-gradient(180deg, var(--lp-accent-light) 0%, var(--lp-accent) 72%);
    box-shadow: 0 14px 32px -16px rgb(var(--lp-accent-rgb) / var(--lp-glow)), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.lp-btn--primary:hover {
    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 20px 40px -16px rgb(var(--lp-accent-light-rgb) / .85), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.lp-btn--ghost {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .05);
    color: var(--lp-ink);
}

.lp-btn--ghost:hover {
    border-color: rgb(var(--lp-accent-light-rgb) / .6);
    background: rgb(var(--lp-accent-rgb) / .16);
    color: #fff;
}

.lp-btn svg {
    width: 18px;
    height: 18px;
}

/* ----------------------------------------------------------------- chips */

.lp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-chips li {
    padding: .44rem .9rem;
    border-radius: var(--lp-radius-chip);
    border: 1px solid var(--lp-line);
    background: rgb(var(--lp-veil) / .42);
    font-size: .78rem;
    letter-spacing: .05em;
    text-transform: var(--lp-label-case);
    color: rgba(253, 246, 244, .76);
}

/* ----------------------------------------------------------------- layout */

.lp-split {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    align-items: center;
    gap: clamp(2rem, 4.5vw, 4rem);
}

.lp-split--reverse .lp-split__media {
    order: -1;
}

.lp-split__media {
    display: flex;
    justify-content: center;
}

.lp-split__media > .lp-media {
    width: min(100%, var(--lp-media-portrait));
}

.lp-split__media > .lp-media--wide {
    width: min(100%, var(--lp-media-wide));
}

.lp-split--heading {
    align-items: center;
    margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.lp-split--heading .lp-split__media > .lp-media {
    width: min(100%, var(--lp-media-heading));
}

/* -------------------------------------------------- decorative parallax */

[data-lp-parallax] {
    transform: translate3d(0, var(--lp-shift, 0px), 0);
    will-change: transform;
}

/* ----------------------------------------------------------------- media */

.lp-media {
    position: relative;
    margin: 0;
    border-radius: var(--lp-radius-media);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .035) 0 12px, rgba(255, 255, 255, 0) 12px 24px),
        radial-gradient(80% 80% at 70% 20%, rgb(var(--lp-accent-rgb) / .35) 0%, transparent 70%),
        linear-gradient(160deg, rgb(var(--lp-veil) / .95) 0%, rgb(var(--lp-veil) / 1) 100%);
    box-shadow: 0 34px 70px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .35);
}

.lp-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lp-media--portrait {
    aspect-ratio: 4 / 5;
}

.lp-media--wide {
    aspect-ratio: 16 / 9;
}

.lp-media--thumb {
    aspect-ratio: 16 / 10;
    border-radius: calc(var(--lp-radius-media) * .8);
}

.lp-deco {
    rotate: var(--lp-deco-rotate);
    transition: rotate .5s cubic-bezier(.22, .61, .36, 1), box-shadow .5s ease;
}

.lp-deco:hover {
    rotate: 0deg;
}

.lp-deco--alt {
    rotate: var(--lp-deco-rotate-alt);
}

.lp-deco--alt:hover {
    rotate: 0deg;
}

/* placeholder label, only shown when an image is missing */
.lp-media.is-missing::after {
    content: attr(data-placeholder);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: .5rem .9rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .35);
    background: rgb(var(--lp-veil) / .65);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    white-space: nowrap;
}

.lp-media__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1.6rem 1.2rem 1rem;
    font-size: .82rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, .92);
    background: linear-gradient(180deg, transparent, rgb(var(--lp-veil) / .88) 64%);
}

.lp-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .38rem .75rem;
    border-radius: var(--lp-radius-chip);
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgb(var(--lp-veil) / .7);
    backdrop-filter: blur(6px);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: var(--lp-label-case);
    color: rgba(255, 255, 255, .85);
}

.lp-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-accent-light);
    box-shadow: 0 0 10px var(--lp-accent-light);
}

/* ----------------------------------------------------------------- cards */

.lp-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.75rem, 1.3vw, 1.1rem);
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.15rem 1.15rem 1.25rem;
    border-radius: var(--lp-radius-card);
    border: 1px solid var(--lp-line);
    background: linear-gradient(160deg, var(--lp-surface), var(--lp-surface-2));
    overflow: hidden;
    transition: transform .3s ease, border-color .3s ease;
}

.lp-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(70% 90% at 80% 0%, var(--lp-card-tint), transparent 70%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

.lp-card:hover {
    transform: translateY(-3px);
    border-color: rgb(var(--lp-accent-light-rgb) / .4);
}

.lp-card:hover::after {
    opacity: 1;
}

.lp-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: calc(var(--lp-radius-card) * .7);
    background: linear-gradient(160deg, rgb(var(--lp-accent-light-rgb) / .34), rgb(var(--lp-accent-rgb) / .14));
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
}

.lp-card__icon svg {
    width: 18px;
    height: 18px;
}

.lp-card__title {
    margin: 0;
    font-size: .93rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

.lp-card__text {
    margin: 0;
    font-size: .83rem;
    line-height: 1.55;
    color: var(--lp-muted);
}

/* ----------------------------------------------------------------- steps */

.lp-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.6rem);
    margin: 1.6rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-step {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* the number sits on the photo instead of using a whole row */
.lp-step__num {
    position: absolute;
    top: .8rem;
    left: .8rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--lp-radius-chip);
    border: 1px solid rgb(var(--lp-accent-light-rgb) / .65);
    background: rgb(var(--lp-veil) / .82);
    backdrop-filter: blur(4px);
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
}

.lp-step__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.lp-step__text {
    margin: 0;
    font-size: .86rem;
    line-height: 1.62;
    color: var(--lp-muted);
}

.lp-note {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    margin: 1.5rem 0 0;
    padding: 1rem 1.2rem;
    border-radius: var(--lp-radius-card);
    border: 1px solid rgb(var(--lp-accent-light-rgb) / .3);
    border-left: 3px solid var(--lp-accent-light);
    background: linear-gradient(160deg, var(--lp-surface), var(--lp-surface-2));
    font-size: .87rem;
    line-height: 1.6;
    color: rgba(253, 246, 244, .86);
}

.lp-note svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: .2rem;
    color: var(--lp-accent-light);
}

.lp-note__text {
    margin: 0;
}

/* ----------------------------------------------------------------- stats */

.lp-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-stat {
    padding: .8rem .95rem;
    border-radius: calc(var(--lp-radius-card) * .9);
    border: 1px solid var(--lp-line);
    background: rgb(var(--lp-veil) / .5);
}

.lp-stat__value {
    display: block;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 600;
    color: #fff;
}

.lp-stat__label {
    display: block;
    margin-top: .2rem;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: var(--lp-label-case);
    color: rgba(253, 246, 244, .55);
}

/* ---------------------------------------------------------------- finale */

.lp-finale .lp-title {
    max-width: 24ch;
    font-size: clamp(1.7rem, 3.4vw, 2.85rem);
}

.lp-finale .lp-lead {
    max-width: 54ch;
}

.lp-finale .lp-media {
    opacity: .94;
}

.lp-finale .lp-actions {
    margin-top: 1.5rem;
}

.lp-finale .lp-links {
    margin-top: 1.7rem;
    justify-content: flex-start;
}

.lp-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 2.4rem 0 0;
    padding: 0;
    list-style: none;
}

.lp-links a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: var(--lp-radius-chip);
    border: 1px solid var(--lp-line);
    background: rgb(var(--lp-veil) / .55);
    font-size: .8rem;
    color: rgba(253, 246, 244, .78);
    text-decoration: none;
    transition: color .25s ease, border-color .25s ease, background-color .25s ease;
}

.lp-links a:hover {
    color: #fff;
    border-color: rgb(var(--lp-accent-light-rgb) / .5);
    background: rgb(var(--lp-accent-rgb) / .18);
}

.lp-links a svg {
    width: 13px;
    height: 13px;
}

/* ------------------------------------------------------------- fixed cta */

.lp-fab {
    position: fixed;
    right: clamp(14px, 2.4vw, 28px);
    bottom: 76px;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem 1.2rem;
    border-radius: var(--lp-radius-chip);
    font-size: .86rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(180deg, var(--lp-accent-light) 0%, var(--lp-accent) 72%);
    box-shadow: 0 14px 34px -12px rgb(var(--lp-accent-rgb) / var(--lp-glow)), inset 0 1px 0 rgba(255, 255, 255, .24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity .35s ease, transform .35s ease, visibility .35s;
}

.lp-fab-red {
    background: rgba(229, 62, 62, 1) !important;
}


.lp-fab.is-on {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.lp-fab svg {
    width: 16px;
    height: 16px;
}

.lp-fab:hover {
    color: #fff;
}

/* -------------------------------------------------------------- reveals */

/* Only hides content once JS is confirmed running, so no-JS still reads. */
.lp-js .lp-rv {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .8s cubic-bezier(.22, .61, .36, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
}

.lp-js .lp-rv.is-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* The stagger index (`--i`) comes from the DOM order, so the markup carries no
   inline custom properties. Anything unmatched keeps --i: 0 and reveals at once. */
.lp-inner--narrow > :nth-child(1),
.lp-split__body > :nth-child(1) { --i: 0; }
.lp-inner--narrow > :nth-child(2),
.lp-split__body > :nth-child(2) { --i: 1; }
.lp-inner--narrow > :nth-child(3),
.lp-split__body > :nth-child(3) { --i: 2; }
.lp-inner--narrow > :nth-child(4),
.lp-split__body > :nth-child(4) { --i: 3; }
.lp-inner--narrow > :nth-child(5),
.lp-split__body > :nth-child(5) { --i: 4; }
.lp-inner--narrow > :nth-child(6) { --i: 5; }

.lp-inner > .lp-title { --i: 1; }
.lp-note { --i: 2; }

.lp-cards > :nth-child(3n + 1) { --i: 0; }
.lp-cards > :nth-child(3n + 2) { --i: 1; }
.lp-cards > :nth-child(3n + 3) { --i: 2; }

.lp-steps > :nth-child(1) { --i: 1; }
.lp-steps > :nth-child(2) { --i: 2; }
.lp-steps > :nth-child(3) { --i: 3; }

/* ---------------------------------------------------------------- mobile */

@media (min-width: 1180px) {
    .lp-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .lp {
        background-position: var(--lp-bg-position-mobile, right -100px top);
    }

    .lp-section::before {
        background:
            linear-gradient(180deg,
            rgb(var(--lp-veil) / var(--lp-veil-edge)) 0%,
            rgb(var(--lp-veil) / .78) 22%,
            rgb(var(--lp-veil) / .78) 78%,
            rgb(var(--lp-veil) / var(--lp-veil-edge)) 100%);
    }

    .lp-split {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(1.6rem, 4vw, 2.4rem);
    }

    .lp-split--reverse .lp-split__media {
        order: 0;
    }

    .lp-split__media > .lp-media {
        width: min(100%, 480px);
    }

    .lp-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-media--portrait {
        aspect-ratio: 16 / 10;
    }
}

@media (max-width: 720px) {
    .lp-cards,
    .lp-steps,
    .lp-stats {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-section {
        min-height: auto;
        padding-top: clamp(52px, 8vh, 80px);
        padding-bottom: clamp(52px, 8vh, 80px);
    }

    .lp-deco,
    .lp-deco--alt {
        rotate: 0deg;
    }

    .lp-fab {
        right: 12px;
        bottom: 68px;
        padding: .7rem 1rem;
        font-size: .8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-js .lp-rv {
        opacity: 1;
        transform: none;
        transition: none;
    }

    [data-lp-parallax] {
        transform: none;
        will-change: auto;
    }

    .lp-card,
    .lp-btn,
    .lp-fab,
    .lp-deco {
        transition: none;
        rotate: 0deg;
    }
}