/* The photo keeps its people at a fixed distance from the copy column:
   it is anchored to the container's left edge and only ever grows
   (to cover wide screens) around that anchor, so the text never reaches them.
   The design draws the hero under a 63px menu bar. The site menu (header-2026) is a 164px
   bar from 1100px up: there the whole composition moves down by the difference, so the menu
   never covers her face. Under navbar-2026-v2 (the design's bar) and below 1100px (only a
   floating menu button) it sits as designed. At most 2150px wide (as the homepage hero), centred: wider
   screens show the page background beside it instead of growing the photo further. */
.ltb-hero {
    --ltb-shift: 0px;
    position: relative;
    max-width: 2150px;
    height: calc(779px + var(--ltb-shift));
    margin: 0 auto;
    overflow: hidden;
    background: #cfe4f2;
    container-type: inline-size;
}

.ltb-hero__media {
    --ltb-cl: max(24px, 50cqw - 656px);
    --ltb-w: max(1710px, 81.4286cqw + 317.57px, 129.5455cqw - 505.24px);
    position: absolute;
    top: calc(384px + var(--ltb-shift) - var(--ltb-w) * .224561);
    left: calc(var(--ltb-cl) + 461px - var(--ltb-w) * .385965 - var(--ltb-pull, 0px));
    width: var(--ltb-w);
    aspect-ratio: 1710 / 779;
    pointer-events: none;
}

/* the photo's box in % of the design frame: Travel's by default, a landing's own from its config */
.ltb-hero__img {
    position: absolute;
    top: var(--ltb-img-top, -14.1087%);
    left: var(--ltb-img-left, -1.0497%);
    display: block;
    width: var(--ltb-img-w, 102.924%);
    max-width: none;
    height: var(--ltb-img-h, 124.647%);
    object-fit: cover;
}

/* the box is the design's frame; the photo reaches 110px above it (room for the shift).
   A photo with less room above takes its own larger box for the shift (--ltb-img-s-*). */
@media (min-width: 1100px) {
    body:not(:has(.nnavbar-v2)) .ltb-hero {
        --ltb-shift: 101px;
    }

    body:not(:has(.nnavbar-v2)) .ltb-hero__img {
        top: var(--ltb-img-s-top, var(--ltb-img-top, -14.1087%));
        left: var(--ltb-img-s-left, var(--ltb-img-left, -1.0497%));
        width: var(--ltb-img-s-w, var(--ltb-img-w, 102.924%));
        height: var(--ltb-img-s-h, var(--ltb-img-h, 124.647%));
    }
}

/* the desktop photo has the light gradient baked in; the glow is mobile-only */
.ltb-hero__glow {
    display: none;
    position: absolute;
}

.ltb-hero__inner {
    position: relative;
    z-index: 1;
}

.ltb-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 641px;
    margin-left: 19px;
    padding-top: calc(127px + var(--ltb-shift));
}

.ltb-hero__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    padding-left: 13px;
}

.ltb-hero__kicker {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-left: 4px;
}

.ltb-hero__kicker-icon {
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.ltb-hero__kicker-icon img {
    display: block;
    width: 100%;
    height: 100%;
}

.ltb-hero__kicker-label {
    color: var(--ltb-carbon);
    font-size: 14px;
    font-weight: 900;
    line-height: 19.6px;
    letter-spacing: 2.66px;
    word-spacing: 1px;
    white-space: nowrap;
}

.ltb-hero__title {
    width: 641px;
    margin-top: 12px;
    color: #000;
    font-size: 60px;
    font-style: italic;
    font-weight: 900;
    line-height: 66px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ltb-hero__title .green {
    color: var(--ltb-green-muted);
}

.ltb-hero__accent {
    display: block;
    width: 80px;
    height: 4px;
    margin-top: 16px;
    border-radius: 2px;
    background: var(--ltb-green);
}

.ltb-hero__desc {
    width: 500px;
    margin-top: 24px;
    color: #000;
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.ltb-hero__desc strong {
    font-weight: 800;
}

.ltb-hero__tagline {
    width: 500px;
    margin-top: 28px;
    color: #000;
    font-size: 20px;
    font-weight: 900;
    line-height: 30px;
    text-transform: uppercase;
}

.ltb-hero__btn {
    margin-top: 40px;
}

/* config 'qr': phones keep the plain hero (no QR, no kicker lead, no note) */
.ltb-hero__row,
.ltb-hero__lead {
    display: contents;
}

.ltb-hero__qr,
.ltb-hero__kicker-lead,
.ltb-hero__kicker-dot,
.ltb-hero__note {
    display: none;
}

.ltb-hero__kicker-lead {
    color: var(--ltb-carbon);
}

.ltb-hero__kicker-dot {
    color: var(--ltb-ash);
}

.ltb-hero__note {
    color: #000;
}

/* config 'qr', desktop: "pay better • travel better", the lead under the title, then a row: the note, tagline
   and the green button in a 380px column beside the "scan and join" label and the app QR on a white tile;
   no accent under the title (Travel, Finance, Shopping) */
@media (min-width: 1024px) {
    /* the design's height; a longer translation that would reach the bottom grows the hero (24px under the
       lowest element) and the photo with it, instead of being cut off */
    .ltb-page .ltb-hero--qr {
        height: auto;
        min-height: calc(779px + var(--ltb-shift));
    }

    .ltb-page .ltb-hero--qr .ltb-hero__copy {
        padding-bottom: 24px;
    }

    .ltb-page .ltb-hero--qr .ltb-hero__media {
        min-height: calc(100% - 384px - var(--ltb-shift) + var(--ltb-w) * .224561);
    }

    .ltb-hero--qr .ltb-hero__text {
        margin-top: 0;
        padding-left: 0;
    }

    .ltb-hero--qr .ltb-hero__accent {
        display: none;
    }

    .ltb-hero--qr .ltb-hero__kicker-lead {
        display: block;
        font-size: 14px;
        font-weight: 900;
        line-height: 19.6px;
        letter-spacing: 2.66px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* both parts end on their last letter (no trailing letter-spacing), as the design's boxes */
    .ltb-hero--qr .ltb-hero__kicker-lead,
    .ltb-hero--qr .ltb-hero__kicker-label {
        margin-right: -2.66px;
        word-spacing: 0;
    }

    /* 8px on both sides (the kicker's 7px gap + 1) */
    .ltb-hero--qr .ltb-hero__kicker-dot {
        display: block;
        margin: 0 1px;
        font-size: 11px;
        font-weight: 500;
        line-height: 12px;
        letter-spacing: 1.1px;
    }

    .ltb-hero--qr .ltb-hero__desc {
        width: 100%;
        max-width: 550px;
        margin-top: 32px;
        font-size: 18px;
        line-height: 26px;
    }

    .ltb-hero__row {
        display: flex;
        gap: 16px;
        margin-top: 32px;
    }

    .ltb-hero__lead {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 380px;
    }

    .ltb-hero--qr .ltb-hero__note {
        display: block;
        width: 100%;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

    .ltb-hero--qr .ltb-hero__tagline {
        width: 100%;
        margin-top: 32px;
        font-size: 18px;
        font-weight: 800;
        line-height: 26px;
    }

    .ltb-hero--qr .ltb-hero__tagline:first-child {
        margin-top: 0;
    }

    /* 280 wide, or wider for a longer label; one longer than the column wraps instead of running under the QR */
    .ltb-hero--qr .ltb-hero__btn {
        justify-content: space-between;
        min-width: 280px;
        max-width: 100%;
        height: auto;
        min-height: 52px;
        padding: 12px 20px 12px 24px;
        font-size: 15px;
        font-weight: 900;
        letter-spacing: .45px;
        white-space: normal;
    }

    /* with the note (Travel) the button sits at the bottom of the row, level with the code; without it, it follows
       the tagline (the base 40px) */
    .ltb-hero--qr .ltb-hero__lead:has(.ltb-hero__note) .ltb-hero__btn {
        margin-top: auto;
    }

    .ltb-hero--qr .ltb-hero__btn .ltb-btn__icon {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
    }

    .ltb-hero__qr {
        display: flex;
        flex: 0 0 176px;
        flex-direction: column;
        gap: 16px;
    }

    /* the design's 42px box; it reaches 20px up, so a longer label grows upward from its last line (up to 12px
       under the lead) and only then pushes the code down, never over it */
    .ltb-hero__scan-box {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 176px;
        min-height: 62px;
        margin-top: -20px;
        padding: 0 0 .55px 6px;
    }

    /* ends before the arrow */
    .ltb-page .ltb-hero__scan {
        width: 145px;
        color: #000;
        font-size: 18px;
        font-style: italic;
        font-weight: 900;
        line-height: 20px;
        letter-spacing: -.18px;
        text-transform: uppercase;
    }

    /* the curved arrow right of the label's last line, pointing down at the code */
    .ltb-hero__scan-arrow {
        position: absolute;
        bottom: -9.6261px;
        left: 151.71px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 8.5496px;
        height: 25.0961px;
        color: var(--ltb-green-muted);
    }

    .ltb-hero__scan-arrow > span {
        position: relative;
        flex: none;
        width: 25px;
        height: 8.254px;
        transform: rotate(-89.32deg) scaleY(-1);
    }

    .ltb-hero__scan-arrow svg {
        position: absolute;
        top: -5.8224px;
        left: -1px;
        display: block;
        width: 27.0005px;
        height: 15.0768px;
        overflow: visible;
    }

    .ltb-hero__qr-tile {
        position: relative;
        width: 162px;
        height: 162px;
        border-radius: 11.215px;
        background: #fff;
    }

    /* the generated code has no quiet zone: 145px leaves the design's 8.5px white margin */
    .ltb-page .ltb-hero__qr-img {
        position: absolute;
        top: 8.5px;
        left: 8.5px;
        width: 145px;
        height: 145px;
        opacity: 0;
        transition: opacity .3s ease;
    }

    .ltb-page .ltb-hero__qr-img.is-ready {
        opacity: 1;
    }
}

/* dark: white copy on a dark gradient laid over the photo's left side (reaches up under the menu when shifted) */
.ltb-hero--dark {
    background: var(--ltb-jet);
}

.ltb-hero--dark .ltb-hero__glow {
    display: block;
    top: calc(var(--ltb-shift) * -1);
    left: -2.4415%;
    width: 80.1754%;
    height: calc(104.2362% + var(--ltb-shift));
    background: linear-gradient(124.7deg, rgba(15, 15, 15, .77) 44.986%, rgba(15, 15, 15, 0) 72.011%);
    opacity: .81;
}

.ltb-hero--dark .ltb-hero__kicker-label,
.ltb-hero--dark .ltb-hero__kicker-lead,
.ltb-hero--dark .ltb-hero__title,
.ltb-hero--dark .ltb-hero__desc,
.ltb-hero--dark .ltb-hero__note,
.ltb-hero--dark .ltb-hero__tagline,
.ltb-page .ltb-hero--dark .ltb-hero__scan {
    color: #fff;
}

.ltb-hero--dark .ltb-hero__kicker-dot {
    color: rgba(255, 255, 255, .6);
}

.ltb-hero--dark .ltb-hero__scan .green {
    color: var(--ltb-green);
}

/* the photos carry their own gradient (desktop and phone) */
.ltb-hero--no-glow .ltb-hero__glow,
.ltb-hero--dark.ltb-hero--no-glow .ltb-hero__glow {
    display: none;
}

/* Travel: her face sits further right in this photo; below ~1130px the photo slides left just enough to keep
   it on screen (the copy column ends far left of her) */
@media (min-width: 1024px) {
    .ltb-page--travel .ltb-hero__media {
        --ltb-pull: max(0px, 1130px - 100cqw);
    }
}

.ltb-page--finance .ltb-hero__title .green {
    color: var(--ltb-green);
}

/* Finance desktop without the QR hero: the copy starts 84px under the top (Travel 127) and the CTA is the
   280 × 54 primary button (15px label, the 20px arrow at its right edge) */
@media (min-width: 1024px) {
    .ltb-page--finance .ltb-hero:not(.ltb-hero--qr) .ltb-hero__copy {
        padding-top: calc(84px + var(--ltb-shift));
    }

    .ltb-page--finance .ltb-hero:not(.ltb-hero--qr) .ltb-hero__btn {
        justify-content: space-between;
        gap: 50px;
        min-width: 280px;
        height: 54px;
        padding: 0 20px 0 24px;
        font-size: 15px;
        font-weight: 900;
    }

    .ltb-page--finance .ltb-hero:not(.ltb-hero--qr) .ltb-hero__btn .ltb-btn__icon {
        flex-basis: 20px;
        width: 20px;
        height: 20px;
    }
}

/* Finance phones: the tagline keeps to the copy column, clear of her on the right */
@media (max-width: 1023px) {
    .ltb-page--finance .ltb-hero__tagline {
        max-width: calc(230 * var(--u));
    }
}

/* Up to 1023px (the desktop crop would push the face off the right edge): the whole
   composition (photo + copy) scales with one unit, so the copy keeps its place above
   her face. Past 520px the unit stops growing, the composition centres and the photo
   shows more of the coast on both sides. */
@media (max-width: 1023px) {
    .ltb-hero {
        --u: calc(min(100vw, 520px) / 440);
        --ltb-l: max(0px, (100vw - 440 * var(--u)) / 2);
        height: calc(717 * var(--u));
    }

    .ltb-hero__media {
        inset: 0;
        width: auto;
        aspect-ratio: auto;
    }

    .ltb-hero__img {
        position: absolute;
        top: calc(var(--ltb-m-top, -141.36) * var(--u));
        left: calc(var(--ltb-l) + var(--ltb-m-left, -408.63) * var(--u));
        width: calc(var(--ltb-m-w, 1173.4) * var(--u));
        height: calc(var(--ltb-m-h, 895.18) * var(--u));
    }

    /* stops in px along the gradient line, shifted by how far the box reaches left of the copy */
    .ltb-hero__glow {
        display: block;
        inset: calc(-64.48 * var(--u)) 0 auto 0;
        width: auto;
        height: calc(593.54 * var(--u));
        background: linear-gradient(125.75deg,
            rgba(255, 255, 255, .65) calc(var(--ltb-l) * .8116 + 300.04 * var(--u)),
            rgba(255, 255, 255, .07) calc(var(--ltb-l) * .8116 + 408.13 * var(--u)),
            rgba(255, 255, 255, 0) calc(var(--ltb-l) * .8116 + 495.61 * var(--u)));
    }

    /* dark: the copy on the dark band above the photo, the photo's top edge fading into it */
    .ltb-hero--dark .ltb-hero__glow {
        inset: 0;
        width: auto;
        height: auto;
        background: linear-gradient(180deg,
            var(--ltb-jet) calc(var(--ltb-m-top, 0) * var(--u)),
            rgba(15, 15, 15, .75) calc((var(--ltb-m-top, 0) + 115) * var(--u)),
            rgba(15, 15, 15, 0) calc((var(--ltb-m-top, 0) + 170) * var(--u)));
        opacity: 1;
    }

    /* light photo under white copy: one shade over the whole photo, darkest under the copy column
       (no top band - the photo starts at the top) */
    .ltb-hero--dark.ltb-hero--shade .ltb-hero__glow {
        background: linear-gradient(90deg,
            rgba(15, 15, 15, .72) calc(var(--ltb-l) + 0px),
            rgba(15, 15, 15, .55) calc(var(--ltb-l) + 200 * var(--u)),
            rgba(15, 15, 15, .45) 100%);
    }

    .ltb-hero__inner {
        height: 100%;
        max-width: none;
        padding: 0;
    }

    .ltb-hero__copy {
        width: calc(376 * var(--u));
        height: 100%;
        margin-left: calc(var(--ltb-l) + 32 * var(--u));
        /* the mobile menu bar does not scale: the copy never starts under it */
        padding: max(calc(90 * var(--u)), 84px) 0 calc(40 * var(--u));
        box-sizing: border-box;
    }

    .ltb-hero__text {
        margin-top: 0;
        padding-left: 0;
    }

    .ltb-hero__kicker {
        gap: calc(7 * var(--u));
        height: calc(16 * var(--u));
        padding-left: calc(4 * var(--u));
    }

    .ltb-hero__kicker-icon {
        flex-basis: calc(16 * var(--u));
        width: calc(16 * var(--u));
        height: calc(16 * var(--u));
    }

    .ltb-hero__kicker-label {
        font-size: calc(14 * var(--u));
        line-height: calc(19.6 * var(--u));
        letter-spacing: calc(2.66 * var(--u));
        word-spacing: calc(1 * var(--u));
    }

    .ltb-hero__title {
        width: 100%;
        margin-top: calc(16 * var(--u));
        font-size: calc(38 * var(--u));
        line-height: calc(44 * var(--u));
    }

    .ltb-hero__accent {
        width: calc(80 * var(--u));
        height: calc(4 * var(--u));
        margin-top: calc(20 * var(--u));
    }

    .ltb-hero__desc {
        width: 100%;
        max-width: calc(230 * var(--u));
        margin-top: calc(24 * var(--u));
        font-size: calc(18 * var(--u));
        line-height: calc(24 * var(--u));
    }

    .ltb-hero__tagline {
        width: 100%;
        margin-top: calc(8 * var(--u));
        font-size: calc(20 * var(--u));
        line-height: calc(30 * var(--u));
    }

    .ltb-hero__btn {
        width: 100%;
        height: calc(64 * var(--u));
        margin-top: auto;
        padding: 0 calc(32 * var(--u)) 0 calc(40 * var(--u));
        font-size: calc(16 * var(--u));
    }

    /* config 'qr' (Travel) on phones: "pay better • travel better", no accent, the lead and the note in one
       230 column (a blank line between them), the tagline in three lines, the 52px green button at the bottom;
       her photo further right under a 117.45deg light gradient */
    .ltb-hero--qr:not(.ltb-hero--dark) .ltb-hero__glow {
        height: calc(781.48 * var(--u));
        background: linear-gradient(117.45deg,
            rgba(255, 255, 255, .65) calc(var(--ltb-l) * .8874 + 395.77 * var(--u)),
            rgba(255, 255, 255, .07) calc(var(--ltb-l) * .8874 + 485.26 * var(--u)),
            rgba(255, 255, 255, 0) calc(var(--ltb-l) * .8874 + 557.68 * var(--u)));
    }

    .ltb-hero--qr .ltb-hero__copy {
        padding: max(calc(98 * var(--u)), 84px) 0 calc(32 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__kicker {
        gap: calc(6 * var(--u));
        height: calc(12 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__kicker-icon {
        flex-basis: calc(12 * var(--u));
        width: calc(12 * var(--u));
        height: calc(12 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__kicker-lead,
    .ltb-hero--qr .ltb-hero__kicker-label {
        display: block;
        margin-right: calc(-2.28 * var(--u));
        font-size: calc(12 * var(--u));
        font-weight: 900;
        line-height: calc(16.8 * var(--u));
        letter-spacing: calc(2.28 * var(--u));
        word-spacing: 0;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .ltb-hero--qr .ltb-hero__kicker-dot {
        display: block;
        font-size: calc(12 * var(--u));
        font-weight: 500;
        line-height: calc(12 * var(--u));
        letter-spacing: calc(1.2 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__title {
        margin-top: calc(8 * var(--u));
        font-size: calc(36 * var(--u));
        line-height: calc(40 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__accent {
        display: none;
    }

    .ltb-hero--qr .ltb-hero__desc,
    .ltb-hero--qr .ltb-hero__note {
        display: block;
        max-width: calc(230 * var(--u));
        font-size: calc(16 * var(--u));
        font-weight: 500;
        line-height: calc(22 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__desc {
        margin-top: calc(40 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__note {
        margin-top: calc(22 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__desc strong,
    .ltb-hero--qr .ltb-hero__note strong {
        font-weight: 700;
    }

    .ltb-hero--qr .ltb-hero__tagline {
        margin-top: calc(16 * var(--u));
        font-size: calc(18 * var(--u));
        font-weight: 900;
        line-height: calc(26 * var(--u));
    }

    /* 52 tall (main.css keeps phone buttons at least 64; a long translation still wraps and grows) */
    .ltb-hero--qr .ltb-hero__btn {
        justify-content: space-between;
        height: auto;
        min-height: calc(52 * var(--u));
        padding: 0 calc(20 * var(--u)) 0 calc(24 * var(--u));
        font-size: calc(15 * var(--u));
        font-weight: 900;
        letter-spacing: calc(.45 * var(--u));
    }

    .ltb-hero--qr .ltb-hero__btn .ltb-btn__icon {
        flex-basis: calc(20 * var(--u));
        width: calc(20 * var(--u));
        height: calc(20 * var(--u));
    }
}