/* ============================================================
   landing-page.css — the shared landing page (/m Merchant Portal first; /w Wallet next)
   A light page for people arriving from a QR code on a phone: it does NOT load Bootstrap, style.css or jQuery.
   It builds on home.css (hm-title, hm-text, hm-btn, hm-hero-subtitle, hm-section, hm-faq) and app-page.css
   (ap-actions, ap-split, ap-steps, ap-features, ap-closing). Behaviour is assets/js/landing-page.js. Every class
   here is prefixed lp-; every colour, size and space comes from variables.css (section 26 for this page type).
   The header is <site-header variant="landing">.

   Business variant (/w?s=<id>, see landing-page.js): while the lookup runs <html> has .lp-store-pending (the hero
   text waits, hidden but keeping its space); once it resolves <html> gets .lp-store-on and the [data-lp-general] /
   [data-lp-store] elements swap.

   Page outline, in order — each section is optional:
     .lp-hero                pill, H1, lead, CTA + secondary link, micro line | sketch
     .lp-features            a grid of icon + title + text, then one wide highlighted item (.lp-feature--wide)
     .hm-section.ap-band     dark band: title + text | .ap-features tiles
     #how .ap-steps--3       numbered phases, each with a sketch, then a note
     .lp-plans               plans table (limits, no prices), one trial button, notes, then the .lp-contact box
     .lp-examples .hm-stats  figure cards (Home's), each tagged .lp-tag, then a note
     .ap-split + .hm-wallet  text | the illustrative Wallet card (Points')
     .ap-split + .hm-faq     questions: title and contact on the left, the accordion on the right
     .ap-closing             dark closing band, flush with the footer
   ============================================================ */

/* ---- Base: what style.css used to provide on the other pages. :where() keeps these resets at zero weight, so the
   shared classes' own margins and colours (hm-title, hm-btn, ap-closing-text…) still win. ---- */
.lp-page {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    -webkit-text-size-adjust: 100%;
}

:where(.lp-page) *,
:where(.lp-page) *::before,
:where(.lp-page) *::after {
    box-sizing: border-box;
}

:where(.lp-page) img {
    max-width: 100%;
}

:where(.lp-page) :is(h1, h2, h3, p) {
    margin: 0;
}

:where(.lp-page) a {
    color: inherit;
}

:where(.lp-page) [hidden] {
    display: none !important;
}

/* in-page links (See how it works -> #how) glide to their section instead of jumping, unless the visitor asks for less motion */
@media (prefers-reduced-motion: no-preference) {
    html:has(> body.lp-page) {
        scroll-behavior: smooth;
    }
}

/* the page content's width: the same steps as the other pages' Bootstrap .container */
.lp-container {
    width: 100%;
    max-width: var(--lp-container-width);
    margin: 0 auto;
    padding: 0 var(--lp-container-padding);
}

@media (max-width: 575px) {
    .lp-container {
        --lp-container-padding: var(--lp-container-padding-sm);
    }
}

@media (min-width: 576px) { .lp-container { --lp-container-width: 540px; } }
@media (min-width: 768px) { .lp-container { --lp-container-width: 720px; } }
@media (min-width: 992px) { .lp-container { --lp-container-width: 960px; } }
@media (min-width: 1200px) { .lp-container { --lp-container-width: 1000px; } }
@media (min-width: 1600px) { .lp-container { --lp-container-width: 1260px; } }

/* ---- 1. Hero: dark, the header floating over its top; text, then the sketch (beside it from 992px) ---- */
.lp-hero {
    padding: var(--lp-hero-padding-top-sm) 0 var(--lp-hero-padding-bottom);
    background: var(--gray-dark);
    color: var(--white);
}

@media (min-width: 768px) {
    .lp-hero {
        padding-top: var(--lp-hero-padding-top);
    }
}

.lp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: center;
}

@media (min-width: 992px) {
    .lp-hero-grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: var(--space-10);
    }
}

/* full desktop: the illustration gets half the row */
@media (min-width: 1200px) {
    .lp-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-8);
    }
}

/* the product's name in a pill above the title, with its icon (the outlined pill of the app pages' category) */
.lp-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--app-hero-rule);
    border-radius: var(--radius-pill);
    color: var(--gray-light);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    font-weight: var(--weight-semibold);
}

.lp-pill img {
    display: block;
    width: var(--lp-pill-icon-size);
    height: var(--lp-pill-icon-size);
}

/* Sandbox preview strip (/w?s=<id>&env=sandbox): a plain full-width bar above the header, unhidden by
   landing-page.js only in sandbox mode. textContent only — it exists so a Sandbox link can't pass as a real
   business. --warning is deliberately more orange than the points gold; dark ink keeps it legible (AA). */
.lp-sandbox-banner {
    padding: var(--space-2) var(--space-4);
    background: var(--warning);
    color: var(--gray-dark);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    font-weight: var(--weight-semibold);
    text-align: center;
}

/* the business variant's chip, larger than the product pill: the business logo, then "You're at" over the name */
.lp-store-chip {
    gap: var(--space-3);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-2);
    max-width: 100%;
}

.lp-store-chip .lp-store-logo {
    flex: none;
    width: var(--lp-store-logo-size);
    height: var(--lp-store-logo-size);
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.lp-store-chip-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lp-store-chip-label {
    color: var(--home-hero-subtitle-ink);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    font-weight: var(--weight-semibold);
}

.lp-store-chip-name {
    color: var(--white);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    font-weight: var(--weight-bold);
    overflow-wrap: anywhere;
}

/* "Demo" next to the name when the store record says demo: true */
.lp-store-demo {
    margin-left: var(--space-2);
    vertical-align: middle;
    white-space: nowrap;
}

.lp-store-chip:not(:has(.lp-store-logo:not([hidden]))) {
    padding-left: var(--space-5);
}

/* the hero text waits for the business lookup (at most ~1.2 s), keeping its space so nothing jumps */
.lp-store-pending .lp-hero-grid > div:first-child {
    visibility: hidden;
}

.lp-hero-title {
    margin: var(--space-5) 0 0;
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-xl-size);
    line-height: var(--text-display-xl-line);
    color: var(--white);
    text-wrap: balance;
}

/* phones: 3-4 lines, so fill each one (balance would leave a gap on the right) and only avoid a lone last word */
@media (max-width: 767px) {
    .lp-hero-title {
        font-size: var(--lp-hero-title-size-sm);
        line-height: var(--lp-hero-title-line-sm);
        text-wrap: pretty;
    }
}

.lp-hero .hm-hero-subtitle {
    margin-top: var(--space-5);
    max-width: var(--lp-hero-lead-width);
}

/* a quiet link next to the CTA, light on the dark hero; its arrow nudges toward where it points */
.lp-link,
.lp-link:visited,
.lp-link:hover,
.lp-link:focus {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--white);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.lp-link .material-symbols-outlined {
    font-size: var(--text-body-lg-size);
    transition: transform 0.3s ease-in-out;
}

.lp-link:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

@media (hover: hover) {
    .lp-link:hover > span:first-child {
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .lp-link:hover .material-symbols-outlined {
        transform: translateY(var(--space-1));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-link .material-symbols-outlined {
        transition: none;
    }
}

.lp-micro {
    margin-top: var(--space-4);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    color: var(--home-hero-subtitle-ink);
}

/* The CTA keeps the button look on the dark hero: hm-btn's hover fills it with --surface (white). */
.lp-hero .hm-btn:focus-visible,
.ap-closing .hm-btn:focus-visible {
    outline-color: var(--white);
}

/* ---- Sketch placeholder: a dashed box for an illustration still to come (the coming-soon look of .ap-soon).
   --dark on a dark ground (the art will be white strokes), the default on a light one (dark strokes). ---- */
.lp-sketch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    aspect-ratio: var(--lp-sketch-ratio);
    padding: var(--space-5);
    border: 1.5px dashed var(--gray-medium);
    border-radius: var(--radius-lg);
    color: var(--ink-muted);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    text-align: center;
}

.lp-sketch .material-symbols-outlined {
    font-size: var(--lp-sketch-icon-size);
}

.lp-sketch--dark {
    color: var(--home-hero-subtitle-ink);
}

.lp-hero .lp-sketch {
    aspect-ratio: var(--lp-sketch-ratio-hero);
}

/* the hero's illustration (its ground is the hero's --gray-dark, so it blends in), at its own proportions */
.lp-hero-art {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .lp-hero-art,
    .lp-hero-grid > .lp-sketch {
        max-width: var(--lp-hero-art-width-sm);
        margin: 0 auto;
    }
}

/* phones and tablets: the illustration between the lead and the CTA. The text column dissolves into the grid (display: contents)
   so its children and the image can be reordered; the grid gap goes, the elements keep their own margins. */
@media (max-width: 991px) {
    .lp-hero-grid {
        row-gap: 0;
    }

    .lp-hero-grid > div:first-child {
        display: contents;
    }

    .lp-hero-grid .lp-pill {
        justify-self: start;
    }

    .lp-hero-art,
    .lp-hero-grid > .lp-sketch {
        order: 1;
        margin-top: var(--space-6);
    }

    .lp-hero-grid .ap-actions,
    .lp-hero-grid .lp-micro {
        order: 2;
    }
}

/* stacked (below 992px): a wide, shallower placeholder under the text, so the hero stays short */
@media (max-width: 991px) {
    .lp-hero .lp-sketch {
        aspect-ratio: var(--lp-sketch-ratio-hero-sm);
    }
}

/* phones: the CTA across the width, the secondary link centred under it, so neither wraps */
@media (max-width: 575px) {
    .lp-hero .ap-actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-4);
    }

    .lp-hero .ap-actions .hm-btn {
        text-align: center;
    }

    .lp-hero .lp-link {
        justify-content: center;
    }

    .lp-micro {
        text-align: center;
    }
}

/* ---- 2. Features: icon + title + text in a grid (1 column, 2 from 576px, 3 from 992px), then a wide one ---- */
.lp-features {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 576px) {
    .lp-features {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .lp-features {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-8);
    }
}

.lp-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lp-feature-icon {
    width: var(--lp-feature-icon-size);
    height: var(--lp-feature-icon-size);
    font-size: var(--lp-feature-icon-size);
    line-height: 1;
    color: var(--accent);
    font-variation-settings: 'FILL' 1;
    margin-bottom: var(--space-1);
}

.lp-feature-title {
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

.lp-feature-text {
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    color: var(--ink);
}

/* the highlighted one, across the whole width: a card on the alternate surface, its icon beside the text from 576px */
.lp-feature--wide {
    margin-top: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

@media (min-width: 576px) {
    .lp-feature--wide {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: var(--space-5);
        align-items: start;
    }

    .lp-feature--wide .lp-feature-icon {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}

/* ---- 3. Dark band (.ap-band): white title, light text; the tiles are .ap-features, three across ---- */
.lp-band-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
    color: var(--white);
}

.lp-band-text {
    margin-top: var(--space-4);
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    color: var(--gray-light);
}

/* the band's text link (Learn more about Points): white with a gold arrow, since the accent blue is too dark here */
.lp-band .ap-more,
.lp-band .ap-more:visited,
.lp-band .ap-more:hover,
.lp-band .ap-more:active,
.lp-band .ap-more:focus {
    color: var(--white);
}

.lp-band .ap-more .material-symbols-outlined {
    color: var(--token-points);
}

.lp-band .ap-more:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

.lp-band .ap-split {
    align-items: center;
}

.lp-band .ap-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.lp-band .ap-feature {
    align-items: center;
    text-align: center;
}

.lp-band .ap-feature img {
    display: block;
    width: var(--lp-app-icon-size);
    height: var(--lp-app-icon-size);
    border-radius: var(--radius-md);
    object-fit: contain;
}

.lp-band .ap-feature-title {
    overflow-wrap: anywhere;
}

/* a tile that opens the app's store listing (/w): the whole card is the link */
.lp-tile-link,
.lp-tile-link:visited {
    height: 100%;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

.lp-tile-link:focus-visible {
    outline: 2px solid var(--white);
    outline-offset: 3px;
}

@media (hover: hover) {
    .lp-tile-link[href]:hover {
        border-color: var(--white);
        background: var(--header-surface);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp-tile-link {
        transition: none;
    }
}

.lp-store-on .lp-band .ap-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 575px) {
    .lp-band .ap-feature {
        padding: var(--space-4) var(--space-2);
    }
}

/* ---- 4. How it works: .ap-steps--3 cards, each ending in its sketch; a note under them.
   Between 576 and 991px each card is a row (text | sketch), one card per line. ---- */
.lp-steps .ap-step {
    display: flex;
    flex-direction: column;
}

@media (min-width: 576px) and (max-width: 991px) {
    .lp-steps.ap-steps--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .lp-steps .ap-step {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto auto 1fr;
        column-gap: var(--space-6);
    }

    .lp-steps .ap-step::before,
    .lp-steps .ap-step-title,
    .lp-steps .ap-step-text {
        grid-column: 1;
    }

    .lp-steps .lp-step-art {
        grid-column: 2;
        grid-row: 1 / span 3;
        margin-top: 0;
        align-self: center;
    }

    .lp-steps .ap-step-text {
        margin-bottom: 0;
    }
}

/* a step's illustration (transparent, dark strokes): at the bottom of the card, at its own proportions */
.lp-steps .lp-step-art {
    display: block;
    width: 100%;
    height: auto;
    margin-top: auto;
}

.lp-steps .ap-step-text {
    margin-bottom: var(--space-5);
}

.lp-note {
    margin-top: var(--space-6);
    font-family: var(--font-sans);
    font-size: var(--text-body-lg-size);
    line-height: var(--text-body-lg-line);
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

/* ---- 4b. Plans (/m): one table — rows are the limits, columns the plans, the recommended column tinted — then one
   trial button, the notes and the contact box. No prices on purpose. Below 576px each limit becomes a label line over
   its three values (and a shared value spans all three), so nothing has to squeeze into a fourth column. ---- */
.lp-plans-head {
    max-width: 46rem;
}

.lp-plans-table {
    width: 100%;
    margin-top: var(--space-8);
    border-collapse: separate;
    border-spacing: 0;
}

.lp-plans-table th,
.lp-plans-table td {
    padding: var(--space-4) var(--space-3);
    border-bottom: 1px solid var(--border);
    text-align: center;
    vertical-align: middle;
}

.lp-plans-table thead th,
.lp-plans-table thead td {
    vertical-align: bottom;
    border-bottom-width: 2px;
}

.lp-plans-table tbody th {
    text-align: left;
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    font-weight: var(--weight-regular);
    color: var(--ink-muted);
}

.lp-plans-table td {
    font-family: var(--font-display);
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
    font-weight: var(--weight-bold);
    color: var(--ink);
    white-space: nowrap;
}

.lp-plans-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
    font-weight: var(--weight-bold);
    color: var(--ink);
}

.lp-plans-for {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    font-weight: var(--weight-regular);
    color: var(--ink-muted);
}

.lp-plans-badge {
    display: inline-block;
    margin-bottom: var(--space-2);
    padding: 2px var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--ink-on-accent);
    font-size: var(--text-caption-size);
    line-height: var(--text-caption-line);
    font-weight: var(--weight-semibold);
}

.lp-plans-hl {
    background: var(--lp-plans-tint);
}

.lp-plans-table thead .lp-plans-hl {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.lp-plans-hl--last {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* a value's second line: "more by quote" under Premium's locations, "fair use" under unlimited staff */
.lp-plans-sub {
    display: block;
    margin-top: 2px;
    font-family: var(--font-sans);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    font-weight: var(--weight-regular);
    color: var(--ink-muted);
    white-space: normal;
}

a.lp-plans-sub,
a.lp-plans-sub:visited {
    color: var(--lp-link);
    font-weight: var(--weight-semibold);
}

.lp-plans-cta {
    margin-top: var(--space-6);
}

.lp-plans-notes {
    display: grid;
    gap: var(--space-2);
    max-width: 52rem;
    margin-top: var(--space-6);
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    color: var(--ink-muted);
}

.lp-plans-notes p {
    margin: 0;
}

.lp-plans-notes strong {
    font-weight: var(--weight-semibold);
    color: var(--ink);
}

@media (max-width: 575px) {
    .lp-plans-table,
    .lp-plans-table thead,
    .lp-plans-table tbody {
        display: block;
    }

    .lp-plans-table tr {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .lp-plans-table .lp-plans-corner {
        display: none;
    }

    /* plan names line up under Pro's badge */
    .lp-plans-table thead th {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .lp-plans-table th,
    .lp-plans-table td {
        padding: var(--space-3) var(--space-1);
    }

    .lp-plans-table tbody th {
        grid-column: 1 / -1;
        padding: var(--space-4) 0 0;
        border-bottom: 0;
    }

    .lp-plans-table td {
        font-size: var(--text-body-lg-size);
        line-height: var(--text-body-lg-line);
    }

    .lp-plans-table td[colspan] {
        grid-column: 1 / -1;
    }

    .lp-plans-name {
        font-size: var(--text-body-lg-size);
        line-height: var(--text-body-lg-line);
    }

    .lp-plans-for {
        display: none;
    }

    .lp-plans-badge {
        padding: 1px var(--space-2);
    }

    .lp-plans-table .lp-plans-hl,
    .lp-plans-table .lp-plans-hl--last {
        border-radius: 0;
    }

    .lp-plans-cta .hm-btn {
        width: 100%;
    }
}

/* the contact box under the plans: title + text | WhatsApp button, the number (a backup for desktops without
   WhatsApp) and the e-mail address */
.lp-contact {
    display: grid;
    gap: var(--space-5);
    align-items: center;
    margin-top: var(--space-8);
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-alt);
}

@media (min-width: 768px) {
    .lp-contact {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: var(--space-8);
    }
}

.lp-contact-title {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-display-sm-size);
    line-height: var(--text-display-sm-line);
    font-weight: var(--weight-bold);
    color: var(--ink);
}

.lp-contact-text {
    margin: 0;
    color: var(--ink-muted);
}

.lp-contact-side {
    display: grid;
    justify-items: start;
    gap: var(--space-2);
}

.lp-contact-line {
    font-size: var(--text-body-sm-size);
    line-height: var(--text-body-sm-line);
    color: var(--ink-muted);
}

.lp-contact-line a,
.lp-contact-line a:visited {
    color: var(--lp-link);
    font-weight: var(--weight-semibold);
}

/* WhatsApp's green with dark ink, so it reads as WhatsApp at a glance */
.lp-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-3) var(--space-6);
    border: 2px solid var(--lp-wa);
    border-radius: var(--radius-pill);
    background: var(--lp-wa);
    color: var(--lp-wa-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.lp-wa:visited,
.lp-wa:hover,
.lp-wa:focus {
    color: var(--lp-wa-ink);
    text-decoration: none;
}

.lp-wa .fa-whatsapp {
    font-size: var(--lp-wa-icon-size);
}

.lp-wa:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ---- Examples: Home's figure cards (.hm-stats, two by two from 768px), each with its label and an "Example" tag ---- */
.lp-stat-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.lp-tag {
    padding: 0 var(--space-2);
    border: 1px solid var(--app-hero-rule);
    border-radius: var(--radius-pill);
    color: var(--gray-light);
    font-size: var(--text-label-size);
    line-height: var(--text-label-line);
    font-weight: var(--weight-semibold);
}

/* ---- Your Wallet: text | the Wallet card, centred against each other ---- */
.lp-wallet .ap-split {
    align-items: center;
}

/* ---- 5. Questions: the e-mail address in the intro is a link ---- */
.lp-faq-intro a,
.lp-faq-intro a:visited {
    color: var(--accent);
    font-weight: var(--weight-semibold);
}

.lp-faq .hm-faq-list {
    margin-top: 0;
}

/* ---- 6. Closing (.ap-closing): the CTA under the text ---- */
.ap-closing .lp-closing-cta {
    margin-top: var(--space-6);
}