/* ── Ad landing pages (29 Sep 2026) ────────────────────────────────────────
   /virtual-card-for-ad-spend, /usd-virtual-card and
   /virtual-card-for-subscriptions. Layout modelled on e.PN's media-buying
   page: a light page, white rounded cards, numbered badges, a dark trust
   block and dark pill buttons, in ZikCards' colour (--primary-color).

   The hero h1 is a hero, like the homepage banner's, so it is deliberately
   not in custom.css's shared page-title block. Loaded only on these pages.
   ───────────────────────────────────────────────────────────────────────── */

.lp {
    --lp-ink: #16181d;
    --lp-muted: #5b6270;
    --lp-bg: #f3f4f6;
    --lp-card: #ffffff;
    --lp-radius: 24px;
    background: var(--lp-bg);
    color: var(--lp-ink);
    padding-bottom: 24px;
}

.lp h1, .lp h2, .lp h3 { color: var(--lp-ink); }

/* Buttons: dark pills, as on e.PN. */
.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 12px 28px;
    border-radius: 12px;
    background: var(--lp-ink);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: transform .15s ease, background-color .15s ease;
}
.lp-btn:hover, .lp-btn:focus-visible { background: #000; color: #fff; transform: translateY(-1px); }
.lp-btn--light { background: #fff; color: var(--lp-ink); }
.lp-btn--light:hover, .lp-btn--light:focus-visible { background: #f1f1f1; color: var(--lp-ink); }

/* Hero */
.lp-hero { padding: 64px 0 40px; }
.lp-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center;
}
.lp-eyebrow {
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
}
.lp-hero h1 {
    margin: 0 0 18px;
    font-size: 46px;
    line-height: 1.12;
    font-weight: 700;
    text-wrap: balance;
}
.lp-hero__intro {
    margin: 0 0 12px;
    max-width: 560px;
    color: var(--lp-muted);
    font-size: 16px;
    line-height: 1.6;
}
.lp-hero__copy .lp-btn { margin-top: 14px; }

/* The homepage's card faces, placed in the page's own column rather than
   hanging off the hero app panel. */
.lp-hero__visual { display: flex; justify-content: center; }
.lp-hero__visual .hero-cards {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 400px;
    margin: 0 auto 36px;
}

/* Sections */
.lp-section { padding: 48px 0; }
.lp-section--tight { padding: 24px 0; }
.lp-section__title {
    margin: 0 0 32px;
    text-align: center;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
    text-wrap: balance;
}
.lp-narrow { max-width: 820px; }
.lp-center { text-align: center; margin-top: 24px; }

/* Cards */
.lp-benefits { display: grid; gap: 20px; }
.lp-card {
    background: var(--lp-card);
    border-radius: var(--lp-radius);
    padding: 36px 38px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .04);
}
.lp-card--wide {
    display: grid;
    grid-template-columns: 1.25fr .75fr;
    gap: 32px;
    align-items: center;
}
.lp-card--flip { grid-template-columns: .75fr 1.25fr; }
.lp-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.lp-card__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}
.lp-card__title--h2 { font-size: 24px; }
.lp-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}
.lp-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 12%, #fff);
    color: var(--primary-color);
}
.lp-lead { margin: 0 0 10px; color: var(--lp-muted); line-height: 1.6; }
.lp-points { margin: 0 0 14px; padding-left: 20px; color: var(--lp-muted); }
.lp-points li { list-style: disc; margin-bottom: 6px; line-height: 1.55; }
.lp-close { margin: 0; font-weight: 600; color: var(--lp-ink); }
.lp-note {
    margin: 4px 0 0;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--lp-bg);
    color: var(--lp-muted);
    font-size: 14px;
}

/* ── Benefit pictures ─────────────────────────────────────────────────────
   Illustrations drawn in CSS, one per benefit: labelled cards fanned out
   (separate cards), a card just issued, a budget bar (prepaid control) and a
   closed card (safer trials). */

/* Hero assurances, as on the homepage banner. */
.lp-assure {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    color: var(--lp-muted);
    font-size: 14px;
    font-weight: 500;
}
.lp-assure li { display: inline-flex; align-items: center; gap: 6px; }
.lp-assure svg { color: var(--primary-color); }
.lp-assure__note { margin: 8px 0 0; color: var(--lp-muted); font-size: 13px; }

/* Card-network marks, drawn rather than loaded. */
.lp-visa { font-weight: 800; font-style: italic; letter-spacing: .5px; font-size: 15px; color: #fff; }
.lp-visa--light { color: #fff; }
.lp-mc { display: inline-flex; }
.lp-mc em { width: 20px; height: 20px; border-radius: 50%; background: #eb001b; display: block; }
.lp-mc em + em { background: #f79e1b; margin-left: -8px; mix-blend-mode: multiply; }

/* 01: separate cards, fanned so every label shows. */
.lp-stack { position: relative; height: 300px; }
.lp-stack__card {
    position: absolute;
    left: 50%;
    width: min(300px, 86%);
    aspect-ratio: 1.586 / 1;
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    box-shadow: 0 16px 34px rgba(16, 24, 40, .16);
}
.lp-stack__card--0 { top: 0; transform: translateX(-58%) rotate(-7deg); background: linear-gradient(135deg, #3a3f4b, #16181d); }
.lp-stack__card--1 { top: 52px; transform: translateX(-50%) rotate(-2deg); background: linear-gradient(135deg, #4b5563, #1f2937); }
.lp-stack__card--2 { top: 104px; transform: translateX(-42%) rotate(3deg); background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 55%, #000)); }
.lp-stack__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.lp-stack__top b { font-size: 15px; }
.lp-stack__top span { font-size: 14px; font-weight: 600; opacity: .9; font-variant-numeric: tabular-nums; }
.lp-stack__foot { display: flex; justify-content: space-between; align-items: center; }
.lp-stack__foot i { font-style: normal; letter-spacing: 1px; font-size: 13px; opacity: .85; }

/* 02: a card just issued. */
.lp-issued {
    background: #fff;
    border: 1px solid #e7e9ee;
    border-radius: 20px;
    padding: 18px;
    max-width: 340px;
    margin: 0 auto;
    box-shadow: 0 18px 40px rgba(16, 24, 40, .1);
}
.lp-issued__head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; }
.lp-issued__head b { color: var(--lp-ink); }
.lp-issued__head span:last-child { margin-left: auto; color: var(--lp-muted); font-size: 12px; }
.lp-issued__tick {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--primary-color); color: #fff;
}
.lp-issued__card {
    position: relative;
    aspect-ratio: 1.586 / 1;
    border-radius: 14px;
    padding: 14px 16px;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 50%, #000));
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}
.lp-issued__brand { font-weight: 700; font-size: 14px; letter-spacing: .5px; }
.lp-issued__chip { width: 30px; height: 22px; margin-top: 10px; border-radius: 5px; background: linear-gradient(135deg, #fcebA4, #d6a73a 45%, #fbf0b9 70%, #a57a1e); }
.lp-issued__pan { align-self: end; font-size: 15px; letter-spacing: 1.5px; font-variant-numeric: tabular-nums; }
.lp-issued__meta { font-size: 10px; letter-spacing: .5px; opacity: .8; margin-top: 4px; }
.lp-issued .lp-visa { position: absolute; right: 16px; top: 12px; }
.lp-issued__row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding: 10px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--primary-color) 10%, #fff);
    color: var(--primary-color); font-weight: 600; font-size: 14px;
}
.lp-issued__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--primary-color); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color) 25%, transparent); }

/* 03: a budget bar. */
.lp-budget {
    border: 1px solid #e7e9ee;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var(--lp-bg);
}
.lp-budget__top, .lp-budget__foot { display: flex; justify-content: space-between; font-size: 13px; }
.lp-budget__top b { color: var(--lp-ink); }
.lp-budget__top span, .lp-budget__foot { color: var(--lp-muted); font-variant-numeric: tabular-nums; }
.lp-budget__bar { height: 10px; border-radius: 99px; background: #e2e5ea; margin: 10px 0 8px; overflow: hidden; }
.lp-budget__bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary-color); }

/* 04: a closed card. */
.lp-closed {
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid #e7e9ee;
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
    background: var(--lp-bg);
}
.lp-closed__card {
    position: relative;
    flex: 0 0 132px;
    aspect-ratio: 1.586 / 1;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background: linear-gradient(135deg, #9aa1ad, #6b7280);
    filter: saturate(.6);
}
.lp-closed__card b { font-size: 12px; }
.lp-closed__card i { font-style: normal; font-size: 10px; letter-spacing: 1px; }
.lp-closed__badge {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    padding: 3px 10px; border: 2px solid #fff; border-radius: 6px;
    font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(22, 24, 29, .35);
}
.lp-closed__log { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--lp-ink); font-weight: 500; }
.lp-closed__log li { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.lp-closed__ok { width: 16px; height: 16px; border-radius: 50%; background: var(--primary-color); position: relative; flex: 0 0 auto; }
.lp-closed__ok::after { content: ''; position: absolute; left: 5px; top: 3px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Coverage: the networks beside the globe. */
.lp-globe { position: relative; }
.lp-globe__pill {
    position: absolute;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 58px; height: 34px; padding: 0 12px;
    border-radius: 99px; background: #fff;
    box-shadow: 0 8px 20px rgba(16, 24, 40, .12);
    font-weight: 700; font-size: 13px; color: var(--lp-ink);
}
.lp-globe__pill .lp-visa { color: #1a1f71; }
.lp-globe__pill--visa { top: 12%; left: 6%; }
.lp-globe__pill--mc { bottom: 14%; right: 4%; }
.lp-globe__pill--usd { top: 8%; right: 10%; color: var(--primary-color); }

/* Coverage */
.lp-globe { display: flex; justify-content: center; color: var(--primary-color); }

/* Trust: the dark block */
.lp-trust {
    background: #1b1d22;
    border-radius: 28px;
    padding: 52px 40px;
    text-align: center;
    color: #fff;
}
.lp-trust h2 { color: #fff; margin: 16px 0 10px; font-size: 32px; font-weight: 700; }
.lp-trust > p { max-width: 620px; margin: 0 auto 28px; color: rgba(255, 255, 255, .72); }
.lp-trust__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-color);
    color: #fff;
}
.lp-trust__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-trust__tile {
    background: rgba(255, 255, 255, .07);
    border-radius: 18px;
    padding: 24px 20px;
}
.lp-trust__tile span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    margin-bottom: 12px;
}
.lp-trust__tile p { margin: 0; color: rgba(255, 255, 255, .8); font-size: 14px; line-height: 1.55; }

/* Platform compliance note (ad-spend page) */
.lp-use {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: var(--lp-card);
    border: 1px solid #e7e9ee;
    border-radius: 18px;
    padding: 22px 24px;
}
.lp-use__title { margin: 0 0 6px; font-size: 17px; font-weight: 700; }
.lp-use p { margin: 0; color: var(--lp-muted); font-size: 14px; line-height: 1.65; }
.lp-use a { color: var(--primary-color); font-weight: 600; }

/* FAQ */
.lp-faq {
    background: var(--lp-card);
    border-radius: 16px;
    padding: 0 22px;
    margin-bottom: 12px;
}
.lp-faq summary {
    cursor: pointer;
    padding: 18px 0;
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--primary-color); }
.lp-faq[open] summary::after { content: '\2212'; }
.lp-faq p { margin: 0; padding: 0 0 18px; color: var(--lp-muted); line-height: 1.6; }

/* Final call to action */
.lp-final {
    border-radius: 28px;
    padding: 56px 40px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 50%, #000));
}
.lp-final h2 { color: #fff; margin: 0 0 12px; font-size: 32px; font-weight: 700; text-wrap: balance; }
.lp-final p { margin: 0 0 24px; color: rgba(255, 255, 255, .85); }
.lp-final__lead { max-width: 720px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 14px !important; }
.lp-final__points {
    display: inline-block;
    margin: 0 auto 20px;
    padding-left: 20px;
    text-align: left;
    color: rgba(255, 255, 255, .9);
}
.lp-final__points li { list-style: disc; margin-bottom: 6px; }
.lp-final__actions { display: flex; justify-content: center; align-items: center; gap: 22px; flex-wrap: wrap; }
.lp-final__alt { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.lp-final__alt:hover { color: #fff; opacity: .85; }

/* Tablet */
@media (max-width: 991px) {
    .lp-hero__grid, .lp-card--wide, .lp-card--flip, .lp-pair { grid-template-columns: 1fr; }
    .lp-card--flip .lp-issued { order: 2; }
    .lp-hero h1 { font-size: 38px; }
    .lp-trust__tiles { grid-template-columns: 1fr; }
}

/* Phone */
@media (max-width: 575px) {
    .lp-hero { padding: 36px 0 16px; }
    .lp-hero h1 { font-size: 30px; }
    .lp-section { padding: 32px 0; }
    .lp-section__title { font-size: 26px; margin-bottom: 22px; }
    .lp-card { padding: 26px 22px; border-radius: 20px; }
    .lp-card__title { font-size: 19px; }
    .lp-trust, .lp-final { padding: 36px 22px; border-radius: 22px; }
    .lp-trust h2, .lp-final h2 { font-size: 25px; }
    .lp-hero__copy .lp-btn { width: 100%; }
    /* Rotated faces overhang their box; keep them inside a phone screen. */
    .lp-hero__visual .hero-cards { max-width: 280px; margin-bottom: 20px; }
}