/* ============================================================
   Mobile polish
   Every rule is gated behind a max-width media query so the
   desktop layout is untouched. Loaded last so its !important
   declarations win over the inline styles and earlier sheets.
   ============================================================ */

@media (max-width: 767.98px) {

    /* --------------------------------------------------------
       Global type scale — bring the desktop sizes down to a
       consistent, readable mobile rhythm.
       -------------------------------------------------------- */
    h2 {
        font-size: 30px !important;
        line-height: 1.15 !important;
    }

    p {
        font-size: 17px !important;
        line-height: 1.45 !important;
    }

    /* --------------------------------------------------------
       Hero — mobile stacking order:
         1. touchpoint image
         2. "Turn first-time…" heading
         3. "Live Tap & Scan…" badge
         4. paragraph
         5. buttons + reassurance
       The row and the copy column both become flex columns so the
       pieces can be reordered independently of the source order.
       -------------------------------------------------------- */
    .hero-row {
        display: flex;
        flex-direction: column;
    }

    /* Trim the large top padding so the image sits close to the header. */
    #overview .content-space-t-1 {
        padding-top: 16px !important;
    }

    .hero-media-col {
        order: 1;
        margin-bottom: 28px;
    }

    .hero-copy-col {
        order: 2;
        display: flex;
        flex-direction: column;
    }

    .hero-heading-wrap {
        order: 1;
        margin-bottom: 16px !important;
    }

    /* Badge hidden on mobile — a long sentence in a pill reads awkwardly on
       a small screen, and the heading + paragraph already carry the message.
       It still shows on desktop. */
    .hero-badge-wrap {
        display: none;
    }

    .hero-copy-col > div:not(.hero-heading-wrap):not(.hero-badge-wrap) {
        order: 3;
    }

    /* Bootstrap badges don't wrap; the kicker line was 422px wide. */
    .badge.bg-soft-dark {
        white-space: normal;
        line-height: 1.5;
        font-size: 13px !important;
        text-align: left;
        margin-bottom: 24px;
    }

    .hero-actions {
        gap: 10px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    /* Hero copy is left-aligned for a clean single left edge — headings and
       multi-line paragraphs read easiest when every line starts in the same
       place. The paragraph and chips inherit the default left alignment; the
       chips' base rule (.hero-reassurance) is already justify-content:flex-start. */
    .hero-copy-col p {
        text-align: left;
    }

    /* These short reassurance labels work as one compact group, so centre
       each wrapped row beneath the full-width action buttons. */
    .hero-reassurance {
        justify-content: center;
    }

    /* --------------------------------------------------------
       Meet TapSpot
       -------------------------------------------------------- */
    .meettapspot {
        font-size: 32px !important;
    }

    .meettapspot div[style*="background-image"] {
        width: 130px !important;
        height: 46px !important;
        margin-top: 7px !important;
    }

    /* On desktop the sketched arrows are absolutely anchored to the image
       corners. On mobile the image stacks above its label, so we drop the
       arrows into the normal flow between the image and its caption — tail
       by the caption, head by the image — so each points from the text up
       to its related image. inset/margins clear the desktop offsets. */
    /* Arrows overlap the lower area of their device image and point up
       into it (as on desktop), offset to the side rather than centred in
       the gap. Bigger than before so the connection reads clearly. */
    section[data-pg-name="Meet Tapspot"] figure.position-absolute,
    .ce-arrow {
        display: block;
        position: absolute !important;
        top: auto !important;
        margin: 0 !important;
        z-index: 3;
    }

    /* Each arrow bridges the gap: head slightly overlaps the image bottom,
       tail reaches down toward the label — so it links text to image. The
       labels get extra top margin to open up room for the arrow to live in. */
    /* Positioned by the arrow's INK bounds (the drawn path only fills
       y18–y85 of the 100-unit viewBox). Head pokes ~18px into the image,
       tail lands ~8px above the label, so the arrow truly joins the two. */
    section[data-pg-name="Meet Tapspot"] figure.position-absolute {
        left: 18px !important;
        right: auto !important;
        bottom: -78px !important;
        width: 140px !important;
    }

    .ce-arrow {
        left: auto !important;
        right: 20px !important;
        bottom: -84px !important;
        width: 150px !important;
    }

    section[data-pg-name="Meet Tapspot"] h3 {
        margin-left: 0 !important;
        text-align: center;
    }

    section[data-pg-name="Meet Tapspot"] .col-lg-7 h3 {
        margin-top: 65px !important;
    }

    .ce-text {
        margin-top: 65px !important;
    }

    section[data-pg-name="Meet Tapspot"] ul {
        font-size: 17px !important;
        line-height: 1.45;
        padding-left: 22px;
    }

    /* --------------------------------------------------------
       Left-align long body copy across the page.
       Rule: centring is fine for short headings/subtitles (<=2
       lines) but hurts readability for 3+ line paragraphs — the
       ragged left edge makes the eye hunt for each new line.
       Section headings stay centred (matches desktop). Only the
       long, currently-centred paragraphs are switched to left.
       -------------------------------------------------------- */
    section[data-pg-name="Meet Tapspot"] > .container > p {
        text-align: left !important;
    }

    #loyalty .loyalty-intro p:nth-of-type(3) {
        text-align: left !important;
    }

    .analytics-footer p {
        text-align: left;
    }

    .hiw-closing {
        text-align: left;
    }

    /* --------------------------------------------------------
       Loyalty
       -------------------------------------------------------- */
    /* QR sticker sat top-left at 150px; shrink and centre it
       above the centred heading. */
    .loyalty-intro > div:first-child {
        width: 96px !important;
        margin: 0 auto 8px;
    }

    /* Decorative cloud is scaled 2x behind the Redeem card and
       spilled 300px past the right edge. */
    .decor-cloud {
        display: none;
    }

    /* The "Reward loyalty…" arrow overlaps the bottom of the last loyalty
       card and points up into it; the heading sits below in normal flow.
       The arrow is absolute so it can overlap without adding page height. */
    .howloyalty {
        position: relative;
        flex-direction: column;
        align-items: center;
        gap: 0;
        margin: 0;
        padding-top: 69px;
        transform: none;
    }

    .howloyalty > svg {
        position: absolute;
        top: -33px;
        left: 50%;
        width: 110px;
        height: 110px;
        transform: translateX(-50%) rotate(6deg);
    }

    .howloyalty h3 {
        margin-top: 0 !important;
    }

    /* --------------------------------------------------------
       Reviews — compact the numbered steps
       -------------------------------------------------------- */
    #reviews div[style*="max-width: 600px"] {
        padding: 4px 0 !important;
    }

    #reviews div[style*="margin-bottom: 45px"] {
        margin-bottom: 26px !important;
    }

    #reviews div[style*="flex-shrink"] {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        margin-right: 14px !important;
        font-size: 1.05rem !important;
    }

    #reviews div[style*="margin-top: 20px"] p[style*="margin-bottom: 60px"] {
        margin-bottom: 28px !important;
    }

    /* The desktop CTA uses Bootstrap's negative margin to pull the button
       upward. Remove that offset when the review content stacks on mobile. */
    #reviews .review-cta-row {
        margin-top: 0 !important;
    }

    .review-device-shot {
        margin-top: 10px;
    }

    /* --------------------------------------------------------
       Multi-link pages — the 2-col option tiles
       -------------------------------------------------------- */
    .multi-link-options {
        gap: 10px !important;
    }

    .multi-link-options li {
        font-size: 19px !important;
        line-height: 1.25;
        padding: 14px 16px !important;
    }

    /* --------------------------------------------------------
       Analytics
       -------------------------------------------------------- */
    .ana-list {
        margin: 10px 4px 0 !important;
        padding-left: 20px !important;
        font-size: 17px !important;
    }

    .analytics-footer .wizard .button-subtext {
        color: #ffffff;
    }

    /* Put the questions first on mobile, where the two-column desktop FAQ
       layout becomes a single reading sequence. Keep a clear group gap
       before the supporting testimonial. */
    .faqs-right {
        order: 1;
    }

    .faqs-left {
        order: 2;
        margin-top: 10px;
    }

    /* The outgoing avatar shrinks while the incoming one grows. Without a
       fixed row height, their midpoint briefly shortens the row and makes
       every element below it jump by a few pixels. */
    #faqs .faqs-tiles {
        min-height: clamp(50px, 15.2vw, 64px);
    }

    /* Stack every testimonial in the same grid cell and hide the inactive
       ones without removing them from layout. The carousel therefore keeps
       the height of its longest quote as slides change. */
    #faqs .testimonial-carousel {
        display: grid;
    }

    #faqs .testimonial-slide,
    #faqs .testimonial-slide.active {
        grid-area: 1 / 1;
    }

    #faqs .testimonial-slide {
        display: block !important;
        visibility: hidden;
        pointer-events: none;
    }

    #faqs .testimonial-slide.active {
        visibility: visible;
        pointer-events: auto;
    }

    /* --------------------------------------------------------
       How it works — redesigned for mobile.
       Desktop uses a sticky phone that swaps per step; that phone is
       hidden on mobile, which left the steps as an undifferentiated
       wall of text. Here each step becomes a card with its own
       screenshot as a visual anchor.
       -------------------------------------------------------- */
    .hiw-steps-scroll {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .hiw-step,
    .hiw-step:first-child,
    .hiw-step:last-child {
        min-height: 0 !important;
        margin: 0;
        padding: 20px 18px 22px !important;
        background: #f7f6ff;
        border: 1px solid rgba(125, 101, 253, 0.14);
        border-radius: 20px;
    }

    .hiw-step > * {
        max-width: 100%;
    }

    /* Screenshot anchor at the top of each card. */
    .hiw-step-shot {
        display: block;
        width: 150px;
        max-width: 52%;
        height: auto;
        margin: 0 auto 16px;
        border-radius: 16px;
        border: 1px solid rgba(17, 24, 39, 0.06);
        box-shadow: 0 10px 24px rgba(125, 101, 253, 0.22);
    }

    .hiw-list {
        margin-left: 20px !important;
        font-size: 17px !important;
    }

    /* Keep the one bold takeaway line; hide the faint handwritten
       secondary notes — low-contrast margin-notes that cluttered the
       narrow cards. */
    .hiw-note:not(.hiw-note--strong) {
        display: none;
    }

    .hiw-note--strong {
        font-size: 16px !important;
        margin-top: 12px;
    }

    /* --------------------------------------------------------
       Pricing
       -------------------------------------------------------- */
    .pricing-toggle {
        flex-wrap: wrap;
    }

    .save-note {
        flex-basis: 100%;
        text-align: center;
    }

    /* --------------------------------------------------------
       FAQs
       -------------------------------------------------------- */
    .faq-q .q-text {
        font-size: 17px;
    }

    /* --------------------------------------------------------
       Repeat customers hero
       -------------------------------------------------------- */
    .rh-desc {
        width: 100% !important;
    }

    /* ========================================================
       Section spacing rhythm
       Target ~60px of breathing room between every section so the
       page has one consistent "between-sections" beat that is
       clearly larger than the spacing inside a section. Each rule
       adjusts the dominant padding/margin at that boundary.
       ======================================================== */

    /* Hero → Meet: was ~104px, trim the hero's bottom padding. */
    #overview .content-space-b-1 {
        padding-bottom: 14px !important;
    }

    /* Meet → Loyalty: the Loyalty section opens with a decorative QR
       sticker, so this margin is the real gap between "Customer
       Experience" and that sticker. ~40px keeps them from crowding. */
    section[data-pg-name="Meet Tapspot"] .col-lg-5 {
        margin-bottom: 40px !important;
    }

    /* Loyalty → Reviews: was ~23px (too tight), add room below the
       "Reward loyalty…" closing line. */
    #loyalty > .container {
        padding-bottom: 30px;
    }

    /* Reviews → Simple-to-start: was overlapping, give the CTA card
       clear separation. */
    section[data-pg-name="Simple to start"] {
        padding-top: 28px;
    }

    /* Simple-to-start → Multi-link: was ~86px, trim the multi-link
       top padding. */
    #multi-link-pages .content-space-2 {
        padding-top: 44px !important;
    }

    /* Analytics → How it works: was ~44px (a touch tight). */
    .hiw-section {
        padding-top: 40px;
    }

    /* Pricing → FAQs: was ~80px, trim the FAQ top padding. */
    .faqs-section {
        padding-top: 14px;
    }
}