/* Payments — intro hero, the five info columns, and the closing trust band.

   This page runs a brighter, more saturated pink than the site's default
   tokens, so the palette is declared as custom properties on the .pay
   wrapper (payments.php) rather than reaching for the global ones — that
   keeps it to this page. Type is the site's own Manrope throughout. */

.pay {
    --pay-heading: #14141a;
    --pay-text:    #55555c;
    --pay-pink:    #ef4b93; /* strapline, card icons */
    --pay-green:   #6cbe88; /* intro CTA button */
    --pay-band:    #6cbe88; /* trust banner */
    --pay-line:    #f7dfe6; /* card borders */
    --pay-card:    #ffffff;

    background: linear-gradient(180deg, #fdf3f6 0%, #fdf6f8 46%, #fdf9fa 100%);
}

/* ── Intro hero ──────────────────────────────────────────────────────────── */
/* Full-bleed: the photo runs to the viewport edge, so the section drops the
   container's own gutter and the text column carries its own instead.
   The band also runs up behind the fixed header the way .page-hero does on
   every other inner page (main.css) — body's top padding would otherwise cut
   it off and leave a white strip around the floating header. */
.pay-intro {
    --pay-header-space: calc(var(--topbar-height) + var(--header-height) + var(--header-offset));

    padding:    0;
    margin-top: calc(-1 * var(--pay-header-space));
}
.pay-intro .container { max-width: none; padding: 0; }

.pay-intro__grid {
    display:               grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
    align-items:           stretch;
    /* Puts the content back below the header, whatever it measures */
    padding-top:           var(--pay-header-space);
    min-height:            calc(460px + var(--pay-header-space));
    background:            linear-gradient(115deg, #fdeef3 0%, #fdf2f5 48%, #fbe6ee 100%);
}
.pay-intro__grid--text-only {
    grid-template-columns: minmax(0, 1fr);
}

.pay-intro__content {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            14px;
    /* Lines the copy up with the site container on a wide screen without
       boxing the photo out of the bleed. */
    padding:        36px 40px 60px max(40px, calc((100vw - var(--container-width)) / 2));
}
.pay-intro__grid--text-only .pay-intro__content {
    align-items: center;
    text-align:  center;
    padding:     60px 24px;
}

.pay-intro__title {
    margin:         0;
    font-size:      68px;
    line-height:    76px;
    font-weight:    700;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color:          var(--pay-heading);
}

.pay-intro__subtitle {
    margin:         0;
    font-size:      19px;
    line-height:    26px;
    font-weight:    600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color:          var(--pay-pink);
}

.pay-intro__rule {
    display:    block;
    width:      88px;
    height:     2px;
    background: var(--pay-pink);
    opacity:    0.45;
}

.pay-intro__text {
    max-width:   500px;
    font-size:   15px;
    line-height: 25px;
    color:       var(--pay-text);
}
.pay-intro__text p { margin: 0 0 14px; }
.pay-intro__text p:last-child { margin-bottom: 0; }

/* The processor logos sit on their own white card, as on the reference —
   the strip is a dark-on-light PNG and needs the plain ground. */
.pay-intro__methods {
    margin-top:    8px;
    padding:       14px 24px;
    border-radius: 14px;
    background:    #ffffff;
    box-shadow:    0 4px 18px rgba(239, 75, 147, 0.09);
}
.pay-intro__methods img {
    display:    block;
    width:      auto;
    max-width:  100%;
    max-height: 40px;
    height:     auto;
}

/* Contact icons and the CTA button share one row — same pairing as the
   How It Works intro (.hiw-intro__row, css/pages/how-it-works.css). */
.pay-intro__row {
    display:         flex;
    flex-wrap:       wrap;
    align-items:     center;
    justify-content: space-between;
    gap:             16px;
    width:           100%;
    margin-top:      14px;
}

.pay-intro__btn {
    flex-shrink: 0;
    height:      46px;
    padding:     0 26px;
    background:  var(--pay-green);
    border:      none;
    font-size:   14px;
}
.pay-intro__btn:hover { background: var(--pay-heading); }

.pay-intro__contacts {
    display:    flex;
    flex-wrap:  wrap;
    gap:        10px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.pay-intro__contacts a {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           40px;
    height:          40px;
    border-radius:   50%;
    background:      var(--pay-line);
    color:           var(--pay-pink);
    transition:      background var(--transition), color var(--transition);
}
.pay-intro__contacts a:hover {
    background: var(--pay-pink);
    color:      #ffffff;
}

/* The photo fills whatever height the copy sets rather than driving it —
   pinned so a portrait upload can't stretch the band to its own aspect.
   The default upload is a square cutout with the subject's face around a
   third of the way down — object-position: center top crops flush from the
   very top of the frame, which is fine at the tall desktop ratio but on the
   short, wide tablet/mobile bands (media height capped well below its width)
   it crops off the face entirely and leaves only hair. Anchoring at 32% down
   instead keeps the face+cat in frame at every ratio this band renders at. */
.pay-intro__media { position: relative; }
.pay-intro__media > img:first-child {
    position:        absolute;
    inset:           0;
    display:         block;
    width:           100%;
    height:          100%;
    object-fit:      cover;
    object-position: center 32%;
}
.pay-intro__badge {
    position: absolute;
    top:      28px;
    right:    34px;
    width:    96px;
    height:   auto;
}

/* ── Info grid ───────────────────────────────────────────────────────────── */
.pay-info { padding: 24px 0 0; }

.pay-info__grid {
    display:               grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap:                   16px;
    align-items:           stretch;
}

.pay-info__card {
    display:        flex;
    flex-direction: column;
    gap:            14px;
    padding:        22px 20px 26px;
    border:         1px solid var(--pay-line);
    border-radius:  14px;
    background:     var(--pay-card);
}

/* Icon beside the title rather than stacked above it */
.pay-info__head {
    display:     flex;
    align-items: center;
    gap:         10px;
}
.pay-info__icon {
    flex-shrink: 0;
    display:     flex;
    color:       var(--pay-pink);
}

.pay-info__title {
    margin:         0;
    font-size:      12px;
    line-height:    17px;
    font-weight:    700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--pay-heading);
}

.pay-info__text {
    font-size:   12px;
    line-height: 19px;
    color:       var(--pay-text);
}
.pay-info__text p { margin: 0 0 12px; }
.pay-info__text p:last-child { margin-bottom: 0; }

/* Labels rather than sentences — set like the card title, a step down */
.pay-info__list {
    display:        flex;
    flex-direction: column;
    gap:            7px;
    margin:         0;
    padding:        0;
    list-style:     none;
}
.pay-info__list li {
    font-size:      13px;
    line-height:    18px;
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          var(--pay-heading);
}

/* ── Trust band ──────────────────────────────────────────────────────────── */
.pay-trust { padding: 40px 0 60px; }

.pay-trust__grid {
    display:               grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items:           center;
    padding:               26px 10px;
    border-radius:         16px;
    background:            var(--pay-band);
}

.pay-trust__item {
    position:    relative;
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     4px 26px;
}
/* Hairline between neighbours, never after the last one */
.pay-trust__item + .pay-trust__item::before {
    content:    '';
    position:   absolute;
    top:        50%;
    left:       0;
    width:      1px;
    height:     46px;
    margin-top: -23px;
    background: rgba(255, 255, 255, 0.55);
}

.pay-trust__icon {
    flex-shrink: 0;
    display:     flex;
    color:       #ffffff;
    opacity:     0.95;
}

.pay-trust__body { min-width: 0; }
.pay-trust__title {
    margin:         0 0 3px;
    font-size:      15px;
    line-height:    20px;
    font-weight:    600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color:          #ffffff;
}
.pay-trust__text {
    margin:      0;
    font-size:   13px;
    line-height: 18px;
    color:       rgba(255, 255, 255, 0.92);
}

/* ── Laptop ──────────────────────────────────────────────────────────────── */
@media (max-width: 1300px) {
    .pay-intro__title { font-size: 54px; line-height: 62px; }

    /* Five columns of body copy get too narrow to read here */
    .pay-info__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pay-intro__grid { grid-template-columns: minmax(0, 1fr); }
    .pay-intro__content {
        align-items: center;
        text-align:  center;
        padding:     44px 24px 40px;
    }
    .pay-intro__title { font-size: 42px; line-height: 50px; }
    .pay-intro__subtitle { font-size: 16px; line-height: 23px; }
    .pay-intro__row { flex-direction: column; justify-content: center; }
    .pay-intro__contacts { justify-content: center; }
    /* Stacked: the photo is back in flow, so it needs a height of its own.
       The header offset stays — it is the photo that now sits under it. */
    .pay-intro__grid { min-height: 0; }
    .pay-intro__media { order: -1; height: 400px; }
    .pay-intro__badge { top: 18px; right: 18px; width: 76px; }

    .pay-info { padding-top: 30px; }
    .pay-info__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pay-trust { padding: 30px 0 50px; }
    .pay-trust__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap:                   22px 0;
        padding:               24px 8px;
    }
    /* The single-column rule above only knows about neighbours in source
       order — on a two-up grid the third item starts a new row, so its
       divider has to go. */
    .pay-trust__item:nth-child(odd)::before { display: none; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .pay-intro__content { padding: 32px 16px 30px; gap: 12px; }
    .pay-intro__title { font-size: 33px; line-height: 40px; }
    .pay-intro__subtitle { font-size: 14px; line-height: 20px; }
    .pay-intro__text { font-size: 14px; line-height: 23px; }
    .pay-intro__methods { padding: 12px 16px; }
    .pay-intro__media { height: 320px; }

    .pay-info__grid { grid-template-columns: minmax(0, 1fr); }
    .pay-info__card { padding: 20px 18px 22px; }
    .pay-info__text { font-size: 13px; line-height: 20px; }

    .pay-trust { padding: 24px 0 40px; }
    .pay-trust__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .pay-trust__item { padding: 0 20px; }
    .pay-trust__item::before { display: none; }
}