.ltb-pay {
    background: var(--ltb-light-beige);
}

.ltb-pay__panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.ltb-pay__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.ltb-pay__img {
    display: block;
    max-width: none;
    object-fit: cover;
}

.ltb-pay__shade {
    position: absolute;
}

/* the card's shade as its own layer (desktop, config 'mask') */
.ltb-pay__fade {
    display: none;
}

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

/* overline + title on top, the description on the bottom edge */
.ltb-pay__intro {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.ltb-page .ltb-pay__kicker {
    padding-left: 4px;
    color: var(--ltb-light-grey);
}

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

.ltb-pay__kicker .green,
.ltb-pay__title .green {
    color: var(--ltb-green);
}

.ltb-pay__content {
    display: contents;
}

.ltb-pay__title {
    color: #fff;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
    text-wrap: balance;
    text-box: normal;
}

.ltb-pay__accent {
    display: none;
}

.ltb-pay__desc {
    margin-top: auto;
    color: #FAFAFA;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-wrap: balance;
}

.ltb-pay__desc strong {
    color: #fff;
}

.ltb-pay--large .ltb-pay__desc .green {
    color: var(--ltb-green);
}

/* the four items: white cards, copy on top and the render under it; longer copy makes
   the row taller instead of being cut off */
.ltb-pay .ltb-pay__item {
    display: flex;
    flex-direction: column;
    min-height: 541px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
}

/* the description 32px under the title */
.ltb-pay__item-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 32px;
    min-height: 0;
    padding: 32px 32px 0;
}

.ltb-pay__item-title {
    color: var(--ltb-carbon);
    font-size: 28px;
    font-style: italic;
    font-weight: 900;
    line-height: 30px;
    text-transform: uppercase;
}

@supports (text-box: trim-both cap alphabetic) {
    .ltb-pay__item-title {
        text-box: trim-both cap alphabetic;
    }
}

.ltb-pay__item-desc {
    max-width: 250px;
    color: var(--ltb-ash);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
}

.ltb-pay__item-desc strong {
    color: var(--ltb-anthracite);
}

/* Travel: these two descriptions are balanced in its design, and sit on the bottom edge of the copy area */
@media (min-width: 1024px) {
    .ltb-page--travel .ltb-pay__item-text {
        justify-content: space-between;
    }

    .ltb-page--travel .ltb-pay__item--coin .ltb-pay__item-desc,
    .ltb-page--travel .ltb-pay__item--atm .ltb-pay__item-desc {
        text-wrap: balance;
    }
}

/* Finance: the whole description in anthracite; on desktop 502px cards with 34px title lines,
   a taller intro and a 400px description on the photo */
.ltb-page--finance .ltb-pay__item-desc {
    color: var(--ltb-anthracite);
    text-wrap: pretty;
}

@media (min-width: 1024px) {
    .ltb-page--finance .ltb-pay .ltb-pay__item {
        min-height: 502px;
    }

    .ltb-page--finance .ltb-pay__item-title {
        line-height: 34px;
    }

    .ltb-page--finance .ltb-pay__intro {
        height: 531px;
    }

    .ltb-page--finance .ltb-pay__desc {
        max-width: 400px;
    }
}

.ltb-pay__item-media {
    order: 1;
    flex: none;
    aspect-ratio: 307.5 / 307;
    overflow: hidden;
    border-radius: 12px;
}

.ltb-pay__item-img {
    display: block;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
}

/* Desktop: a 1500 × 650 photo card (the page gutter below that width) with the copy
   on its dark left side, and the four cards pulled 116px up over its bottom edge. */
@media (min-width: 1024px) {
    .ltb-pay__band {
        padding: 0 24px;
    }

    .ltb-pay__panel {
        max-width: 1500px;
        height: 650px;
        margin: 0 auto;
        border-radius: 24px;
    }

    /* the photo carries its own dark gradient behind the copy: a narrower card
       loses the right side of the photo, never that left edge */
    .ltb-pay__img {
        width: 100%;
        height: 100%;
        object-position: 0 50%;
    }

    .ltb-pay__shade {
        display: none;
    }

    /* config 'mask': the card is a window (clip-path) over the whole photo layer, which keeps its place and size;
       the shade is drawn over the photo instead of baked into it. At rest the window is the card. */
    .ltb-pay--mask .ltb-pay__panel {
        overflow: visible;
        border-radius: 0;
    }

    .ltb-pay--mask .ltb-pay__media {
        clip-path: inset(0 round 24px);
    }

    .ltb-pay--mask .ltb-pay__img,
    .ltb-pay--mask .ltb-pay__fade {
        position: absolute;
        top: var(--ltb-pay-pt);
        left: var(--ltb-pay-pl);
        display: block;
        width: var(--ltb-pay-pw);
        height: var(--ltb-pay-ph);
    }

    .ltb-pay--mask .ltb-pay__img {
        object-fit: fill;
    }

    .ltb-pay--mask .ltb-pay__fade {
        background: var(--ltb-pay-fade);
    }

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

    .ltb-pay__intro {
        width: 602px;
        height: 499px;
        margin-left: 18px;
        padding: 80px 80px 64px;
    }

    .ltb-pay__title {
        margin-top: 16px;
        font-size: 48px;
        line-height: 48px;
    }

    .ltb-pay__desc {
        max-width: 300px;
    }

    /* large head (section.header at the H2 size): 56px title lines and a 20/30 description,
       the description's bottom edge 32px lower */
    .ltb-pay--large .ltb-pay__intro {
        height: 531px;
    }

    .ltb-pay--large .ltb-pay__title {
        line-height: 56px;
    }

    .ltb-pay--large .ltb-pay__desc {
        max-width: 400px;
        font-size: 20px;
        line-height: 30px;
    }

    .ltb-pay__slider {
        position: relative;
        z-index: 1;
        margin-top: -116px;
    }

    .ltb-pay__grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
        width: calc(100% + 14px);
        margin-left: -7px;
    }
}

/* config 'mask' with motion: the panel holds in the middle of the screen over the band's runway while the window
   closes from the full screen width to the card (pay-mask.js). The band's top padding is the photo's room above the card;
   the photo no longer zooms in on reveal (the closing window is the animation). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .ltb-pay--mask {
        --ltb-pay-run: 600px;
    }

    .ltb-pay--mask .ltb-pay__band {
        box-sizing: content-box;
        height: calc(650px + var(--ltb-pay-run));
        padding-top: var(--ltb-pay-ext);
    }

    .ltb-pay--mask .ltb-pay__panel {
        position: sticky;
        top: max(0px, 50vh - 325px);
    }

    /* screens wider than the photo: it starts grown or moved to reach both edges */
    .ltb-pay--mask .ltb-pay__img,
    .ltb-pay--mask .ltb-pay__fade {
        transform-origin: 0 0;
        will-change: transform;
    }

    .ltb-anim .ltb-pay--mask [data-ltb-reveal="photo"] {
        transform: none;
        transition: none;
    }
}

/* below 1280px the four cards no longer fit at their design width: the row becomes a slider */
@media (min-width: 1024px) and (max-width: 1279px) {
    .ltb-pay .ltb-pay__grid {
        display: flex;
        gap: 0;
        width: auto;
        margin: 0;
    }

    .ltb-pay .ltb-pay__item {
        flex: 0 0 auto;
        width: 316.5px;
    }

    .ltb-pay .ltb-nav {
        margin-top: 32px;
    }
}

/* Up to 1023px: photo + copy scale with one unit so the copy stays clear of her face.
   Past 520px the unit stops and the composition centres; the photo is wide enough
   to cover the band on both sides. The cards keep their size and slide. */
@media (max-width: 1023px) {
    .ltb-pay {
        padding-bottom: 16px;
    }

    .ltb-pay__band {
        --u: calc(min(100vw, 520px) / 440);
        --ltb-l: max(0px, (100vw - 440 * var(--u)) / 2);
    }

    .ltb-pay__panel {
        height: calc(625 * var(--u));
        background: #000;
    }

    /* Travel's numbers by default, a landing's own photo box from its config */
    .ltb-pay__img {
        position: absolute;
        top: calc(var(--ltb-m-top, -11) * var(--u));
        left: calc(var(--ltb-l) + var(--ltb-m-left, -415) * var(--u));
        width: calc(var(--ltb-m-w, 1085) * var(--u));
        height: calc(var(--ltb-m-h, 641) * var(--u));
    }

    .ltb-pay__shade {
        inset: 0 0 auto;
        height: calc(229.21 * var(--u));
        background: linear-gradient(174.4deg, rgba(15, 15, 15, .74) 34.549%, rgba(15, 15, 15, 0) 82.537%);
    }

    .ltb-pay__shade--bottom {
        top: calc(322.63 * var(--u));
        height: calc(307.01 * var(--u));
        background: linear-gradient(22.31deg, rgba(15, 15, 15, .74) 29.88%, rgba(15, 15, 15, 0) 73.226%);
    }

    /* Shopping, Finance: the shadow runs across the whole bottom edge, under the description and the cards */
    .ltb-page--shopping .ltb-pay__shade--bottom,
    .ltb-page--finance .ltb-pay__shade--bottom {
        top: auto;
        bottom: 0;
        height: calc(330 * var(--u));
        background: linear-gradient(0deg, rgba(15, 15, 15, .85) 15%, rgba(15, 15, 15, 0) 100%);
    }

    .ltb-pay__inner {
        max-width: none;
        padding: 0;
    }

    .ltb-pay__intro {
        width: calc(440 * var(--u));
        height: calc(519 * var(--u));
        margin-left: var(--ltb-l);
        padding: calc(40 * var(--u));
    }

    .ltb-page .ltb-pay__kicker {
        gap: calc(7 * var(--u));
        min-height: calc(28 * var(--u));
        padding: 0 0 calc(12 * var(--u)) calc(4 * var(--u));
        font-size: calc(12 * var(--u));
        line-height: calc(16.8 * var(--u));
        letter-spacing: calc(2.52 * var(--u));
    }

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

    .ltb-pay__title {
        margin-top: calc(8 * var(--u));
        font-size: calc(30 * var(--u));
        line-height: calc(32 * var(--u));
    }

    .ltb-pay__desc {
        font-size: calc(16 * var(--u));
        line-height: calc(22 * var(--u));
    }

    .ltb-pay__slider {
        position: relative;
        z-index: 1;
        margin-top: -106px;
        padding: 0 32px;
    }

    .ltb-pay .ltb-pay__grid {
        display: flex;
        gap: 0;
    }

    /* 350 × 541 as designed; a narrower card keeps the copy area and shrinks with its render */
    .ltb-pay .ltb-pay__item {
        --ltb-cw: min(350px, 100vw - 64px);
        flex: 0 0 auto;
        width: var(--ltb-cw);
        min-height: calc(224px + var(--ltb-cw) * 317 / 350);
    }

    .ltb-pay__item-title {
        font-size: 30px;
        line-height: 32px;
    }

    .ltb-pay__item-media {
        aspect-ratio: 350 / 317;
    }

    .ltb-pay .ltb-nav {
        margin-top: 26px;
    }
}

/* the narrowest phones: the card headlines keep their words on one line */
@media (max-width: 379px) {
    .ltb-pay__item-title {
        font-size: 24px;
        line-height: 26px;
    }
}

/* config 'item_size' => 'small': the card titles at that size on every width */
.ltb-pay--items-small .ltb-pay__item-title {
    font-size: 24px;
    line-height: 26px;
}