/* Developed by RegiTech (+2348038240084). Unauthorized removal does not transfer authorship. */
/* ═══════════════════════════════════════════════════════════
   iPay NG — Public homepage
   Deliberately different structure from the old page, not just a
   re-skin of it: a CSS phone mockup of the real app UI replaces
   the stock photo hero, decorative blobs/badges/shadowed chips
   are gone, feature cards are flat (icon + text, no card shell),
   and "Why us" is a plain numbered list instead of illustration
   blocks. Brand stays our own brick red — only the restraint and
   structure are borrowed from aimtoget.com.
   ═══════════════════════════════════════════════════════════ */

/* Form controls do not inherit the page font, and the pages that load this
   sheet (index.php and the public pages) do not load styles/styles.css, where
   the app's reset lives. Without this, every <button> here renders in the
   browser's default UI face beside Nunito body copy - which is exactly what
   happened to the homepage FAQ questions. Set once rather than per component,
   so the next button added does not repeat it. */
button, input, select, textarea { font-family: inherit; }

.hp-wrap { max-width: 1272px; margin: 0 auto; padding: 0 24px; }

/* ── Nav ─────────────────────────────────────────────────── */
.hp-nav {
    position: sticky; top: 0; z-index: 1000;
    background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}
.hp-nav-inner {
    max-width: 1272px; margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between;
}
.hp-nav-logo img { display: block; height: 36px; width: auto; }
.hp-nav-links { display: flex; align-items: center; gap: 4px; }
.hp-nav-link {
    font-size: 14px; font-weight: 600; color: #444; text-decoration: none;
    padding: 9px 14px; border-radius: 8px; transition: color .15s, background .15s;
}
.hp-nav-link:hover { color: var(--mp-brand); background: var(--mp-brand-soft); }
.hp-nav-divider { width: 1px; height: 20px; background: #e5e5e5; margin: 0 8px; }
.hp-nav-btn-ghost {
    font-size: 14px; font-weight: 700; color: var(--mp-text); text-decoration: none;
    padding: 9px 16px; border-radius: 999px;
}
.hp-nav-btn-ghost:hover { background: #f5f5f5; }
.hp-nav-btn-solid {
    font-size: 14px; font-weight: 800; color: #fff; text-decoration: none;
    padding: 9px 20px; border-radius: 999px;
    background: var(--mp-btn-grad);
}
.hp-nav-btn-solid:hover { background: var(--mp-btn-grad-hover); }

.hp-mob-nav { display: none; position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 4px 6px rgba(0, 0, 0, .08); }
/* Pure-CSS fallback for desktop/mobile nav switching. The homepage also sets
   this via inline style from JS (window width check) for a snappier switch
   on resize, but every page needs to work correctly before that JS runs —
   otherwise both navs, or neither, would flash on first paint. !important
   ensures this wins over any inline style either way. */
@media (max-width: 767px) { .hp-nav { display: none !important; } }
@media (min-width: 768px) { .hp-mob-nav { display: none !important; } }
/* The showing half of the pair. .hp-mob-nav's base rule is display:none and
   nothing ever undid it below 768px, so on mobile the desktop nav was hidden by
   the query above and the mobile nav by its own base rule — leaving no header
   at all. */
@media (max-width: 767px) { .hp-mob-nav { display: block !important; } }
.hp-mob-nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; }
.hp-mob-nav-inner img { display: block; height: 34px; width: auto; }
.hp-mob-icon-btn { background: none; border: none; cursor: pointer; padding: 4px; color: var(--mp-text); display: flex; }
.hp-mob-dash-btn {
    font-size: 13px; font-weight: 800; color: #fff; text-decoration: none;
    padding: 7px 15px; border-radius: 999px;
    background: var(--mp-btn-grad);
}

#hpMobDrawer { position: fixed; inset: 0; z-index: 2000; visibility: hidden; pointer-events: none; transition: visibility 0s .32s; }
#hpMobDrawer.open { visibility: visible; pointer-events: auto; transition: visibility 0s; }
#hpMobOverlay { position: absolute; inset: 0; background: rgba(20, 20, 31, .6); opacity: 0; transition: opacity .3s ease; }
#hpMobDrawer.open #hpMobOverlay { opacity: 1; }
#hpMobPanel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 78%; max-width: 300px;
    background: #fff; overflow-y: auto;
    transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}
#hpMobDrawer.open #hpMobPanel { transform: translateX(0); }
.hp-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0; }
.hp-drawer-head img { height: 30px; width: auto; }
.hp-drawer-cta { padding: 14px 20px 4px; }
.hp-drawer-link { display: block; font-size: 15px; font-weight: 700; color: var(--mp-text); text-decoration: none; line-height: 2.6; border-bottom: 1px solid #f0f0f0; }
.hp-drawer-link.is-brand { color: var(--mp-brand); }
.hp-drawer-explore { background: #fafafa; padding: 14px 20px; margin-top: 8px; }
.hp-drawer-kicker { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: #aaa; margin: 0 0 8px; }
.hp-drawer-sub { display: block; font-size: 14px; font-weight: 500; color: #555; text-decoration: none; line-height: 2.5; }
.hp-drawer-sub:hover, .hp-drawer-link:hover { color: var(--mp-brand); }

/* ── Hero ─────────────────────────────────────────────────
   Deliberately plain, matching aimtoget's actual restraint: a contained
   (not full-viewport) hero, no decorative blobs, no badge/kicker pill, no
   stock photo. The one new device is a CSS phone mockup of the real app UI
   in place of a generic image — the old page never had this at all. */
.hp-hero { background: #fff; padding: 48px 0 56px; }
.hp-hero-grid {
    display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center;
}
@media (min-width: 900px) {
    .hp-hero-grid { grid-template-columns: 1fr .86fr; gap: 40px; }
}
.hp-hero h1 {
    margin: 0 0 14px;
    font-size: 32px; font-weight: 800; line-height: 1.18; letter-spacing: -.5px;
    color: var(--mp-text);
}
@media (min-width: 640px) { .hp-hero h1 { font-size: 42px; } }
.hp-hero p.lead {
    margin: 0 0 26px; max-width: 460px;
    font-size: 16px; line-height: 1.7; color: #6b6b76;
}
.hp-hero-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hp-hero-cta {
    display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 8px;
    background: var(--mp-brand); color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700;
}
.hp-hero-cta:hover { background: var(--mp-brand-2); }
.hp-hero-secondary {
    font-size: 14px; font-weight: 600; color: var(--mp-text); text-decoration: underline;
    text-underline-offset: 3px;
}

/* Phone mockup — a small, self-contained rendition of the real dashboard UI,
   built from markup/CSS only (no screenshot asset exists to crop from). */
.hp-phone-wrap { display: flex; justify-content: center; }
.hp-phone {
    width: 100%; max-width: 280px;
    background: #14141A; border-radius: 34px; padding: 12px;
    box-shadow: 0 30px 60px -24px rgba(20, 20, 31, .35);
}
.hp-phone-screen { background: #fff; border-radius: 24px; overflow: hidden; }
.hp-phone-bar {
    background: linear-gradient(160deg, #C93A33 0%, var(--mp-brand) 55%, var(--mp-brand-2) 100%);
    padding: 20px 18px 26px;
    display: flex; align-items: center; justify-content: space-between;
}
.hp-phone-bar span { font-size: 13px; font-weight: 700; color: #fff; }
.hp-phone-bar i { color: rgba(255, 255, 255, .85); font-size: 15px; }
.hp-phone-balance {
    background: #fff; margin: -16px 14px 0; padding: 14px 16px; border-radius: 14px;
    box-shadow: 0 8px 20px -10px rgba(20, 20, 31, .2);
    position: relative; z-index: 1;
}
.hp-phone-balance span { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #9a9aa2; }
.hp-phone-balance strong {
    display: block; margin-top: 4px; font-family: "Nunito", sans-serif;
    font-size: 19px; font-weight: 800; color: var(--mp-text);
}
.hp-phone-actions { display: flex; justify-content: space-between; padding: 18px 18px 6px; }
.hp-phone-action { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hp-phone-action-ico {
    width: 38px; height: 38px; border-radius: 12px; background: var(--mp-brand-soft);
    color: var(--mp-brand); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.hp-phone-action span { font-size: 9px; font-weight: 700; color: #6b6b76; }
.hp-phone-tx { padding: 8px 18px 20px; }
.hp-phone-tx-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 9px 0; border-bottom: 1px solid #f2f2f3; font-size: 11.5px;
}
.hp-phone-tx-row:last-child { border-bottom: none; }
.hp-phone-tx-row span { color: #6b6b76; font-weight: 600; }
.hp-phone-tx-row b { color: var(--mp-text); font-weight: 800; font-family: "Nunito", sans-serif; }
.hp-phone-tx-row b.in { color: #1a9c5c; }

/* ── Trust bar ─────────────────────────────────────────────
   A plain text line + a plain logo row — no cards, no shadows, no chips.
   The billers strip used to sit in its own tinted band with circular,
   shadowed chips; this is deliberately flatter. */
.hp-trust { padding: 40px 0; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; }
.hp-trust p {
    text-align: center; margin: 0 0 22px;
    font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    color: #9a9aa2;
}
.hp-trust-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 28px; }
.hp-trust-row img { height: 26px; width: auto; object-fit: contain; opacity: .8; }

/* ── Feature grid ─────────────────────────────────────────
   Flat: icon over label over one line of copy, no card shell, no border,
   no hover shadow — text-forward like aimtoget's own cards, not
   "designed" tiles. */
.hp-features { padding: 64px 0 8px; }
.hp-section-head { max-width: 560px; margin: 0 0 36px; }
.hp-section-head h2 {
    margin: 0 0 8px; font-size: 26px; font-weight: 800; color: var(--mp-text); letter-spacing: -.4px;
}
@media (min-width: 640px) { .hp-section-head h2 { font-size: 30px; } }
.hp-section-head p { margin: 0; font-size: 14.5px; color: #6b6b76; }

.hp-feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
@media (min-width: 640px) { .hp-feature-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } }
.hp-feature-card { display: block; text-decoration: none; }
.hp-feature-ico {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.hp-feature-ico img { width: 32px; height: 32px; object-fit: contain; }
.hp-feature-card h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 700; color: var(--mp-text); }
.hp-feature-card p { margin: 0; font-size: 12.5px; line-height: 1.55; color: #8a8a92; }

/* ── Why us ─────────────────────────────────────────────────
   A plain numbered/text list instead of big illustration blocks on tinted
   cards — closer to how aimtoget actually presents this (action links,
   not oversized artwork competing with the copy). */
.hp-value { padding: 64px 0 8px; }
.hp-value-list { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 720px) { .hp-value-list { grid-template-columns: 1fr 1fr; gap: 32px 40px; } }
.hp-value-row { display: flex; gap: 16px; }
.hp-value-num {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--mp-brand-soft); color: var(--mp-brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; font-family: "Nunito", sans-serif;
}
.hp-value-row h3 { margin: 0 0 5px; font-size: 15.5px; font-weight: 700; color: var(--mp-text); }
.hp-value-row p { margin: 0; font-size: 13px; line-height: 1.65; color: #6b6b76; }

/* ── FAQ (kept, lightly retoned) ─────────────────────────── */
.hp-faq { padding: 56px 0 8px; }
.hp-faq h2 { margin: 0 0 8px; font-size: 22px; font-weight: 800; color: var(--mp-text); }
.hp-faq-item { border-bottom: 1px solid #e8e8e8; }
/* font-family: inherit is the fix for the FAQ questions rendering in the
   browser's default UI face while everything around them is Nunito. Buttons do
   NOT inherit the page font, and index.php does not load styles/styles.css
   (where the app's reset lives), so nothing was setting it here. */
.hp-faq-btn {
    display: flex; width: 100%; align-items: center; justify-content: space-between;
    padding: 18px 0; gap: 12px;
    background: none; border: none; cursor: pointer; text-align: left;
    font-family: inherit;
}
.hp-faq-btn span.q { font-size: 15px; font-weight: 600; color: var(--mp-text); line-height: 1.4; }
.hp-faq-icon {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--mp-page-bg); color: var(--mp-text-muted);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease, color .2s ease;
}
.hp-faq-btn.open .hp-faq-icon { background: var(--mp-brand); color: #fff; }
.hp-faq-icon svg { transition: transform .25s; }
.hp-faq-btn.open .hp-faq-icon svg { transform: rotate(45deg); }
.hp-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0; font-size: 14px; line-height: 1.75; color: #555; }
.hp-faq-answer.open { max-height: 300px; padding-bottom: 18px; }
.hp-faq-more { padding: 20px 0 8px; }
.hp-faq-more a { color: var(--mp-brand); font-size: 14px; font-weight: 700; text-decoration: none; }

/* ── App download CTA ───────────────────────────────────── */
.hp-appcta-wrap { padding: 56px 0 64px; }
.hp-appcta {
    position: relative; display: flex; border-radius: 24px; overflow: hidden;
    background: var(--mp-text);
}
.hp-appcta-text { flex: 1; padding: 40px; display: flex; flex-direction: column; justify-content: center; max-width: 560px; position: relative; z-index: 1; }
.hp-appcta-kicker { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--mp-brand-on-dark); margin: 0 0 8px; }
.hp-appcta-text h3 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 6px; line-height: 1.3; }
.hp-appcta-text h3 span { color: var(--mp-brand-on-dark); }
.hp-appcta-text > p { font-size: 13px; color: #999; margin: 0; }
.hp-appcta-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.hp-appcta-btn-wrap { position: relative; display: inline-block; }
.hp-appcta-btn { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--mp-text); border-radius: 10px; padding: 10px 20px; font-size: 13px; font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.hp-appcta-btn:hover { background: var(--mp-brand); color: #fff; }
.hp-appcta-soon { position: absolute; top: -10px; right: -10px; background: var(--mp-brand); color: #fff; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 20px; white-space: nowrap; pointer-events: none; }
.hp-appcta-note { margin: 12px 0 0; font-size: 11px; color: #666; }
.hp-appcta-phone { position: absolute; right: 50px; bottom: 0; z-index: 0; pointer-events: none; }
.hp-appcta-phone img { width: 240px; height: auto; border-radius: 20px; display: block; }

@media (max-width: 760px) {
    .hp-appcta { flex-direction: column; }
    .hp-appcta-phone { position: static; display: flex; justify-content: center; padding: 0 24px 24px; }
    .hp-appcta-phone img { width: 180px; }
    .hp-appcta-text { padding: 28px 24px 4px; max-width: none; }
}


/* ── Hero accent ──────────────────────────────────────────────
   One phrase of the headline carries the brand colour, so the line has a focal
   point without the whole heading turning red. */
.hp-hero-accent { color: var(--mp-brand); }


/* ── Store-style action buttons ───────────────────────────────
   The two-line pattern app-store badges use: a quiet qualifying line over the
   action itself. It lets the pair state what happens next without a paragraph
   of supporting copy, and gives sign-up and sign-in equal, scannable weight.

   width:auto is load-bearing — styles.css sets `button { width: 100% }` and
   these sit in a flex row. */
.hp-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.hp-store-btn {
    width: auto; flex: 0 1 auto;
    display: inline-flex; align-items: center; gap: 11px;
    padding: 11px 20px 11px 17px;
    border-radius: 12px;
    background: var(--mp-card-bg);
    box-shadow: 0 0 0 1px var(--mp-border);
    color: var(--mp-text); text-decoration: none;
    transition: box-shadow .18s ease, transform .12s ease, background .18s ease;
}
.hp-store-btn i { font-size: 19px; color: var(--mp-brand); flex-shrink: 0; }
.hp-store-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.hp-store-sm { font-size: 10.5px; font-weight: 500; color: var(--mp-text-muted); }
.hp-store-lg { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }

.hp-store-btn:hover { box-shadow: 0 0 0 1px var(--mp-brand); color: var(--mp-text); }
.hp-store-btn:active { transform: scale(.98); }

/* The primary of the pair. color restated on :hover because styles.css has a
   global `button:hover { color: #AB2923 }` that would otherwise put brand red
   on the brand fill. */
.hp-store-btn.is-solid {
    background: var(--mp-btn-grad);
    box-shadow: none;
    color: #fff;
}
.hp-store-btn.is-solid i,
.hp-store-btn.is-solid .hp-store-sm { color: rgba(255, 255, 255, .82); }
.hp-store-btn.is-solid:hover { background: var(--mp-btn-grad-hover); color: #fff; }

/* Demoted below the pair now, so it needs its own top margin. */
.hp-hero-actions + .hp-hero-secondary { display: inline-block; margin-top: 18px; }

@media (max-width: 420px) {
    .hp-store-btn { flex: 1 1 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
    .hp-store-btn { transition: none; }
    .hp-store-btn:active { transform: none; }
}


/* ═══════════════════════════════════════════════════════════════
   Landing page ("lp-") — rebuilt layout
   ───────────────────────────────────────────────────────────────
   Deliberately inverted from the previous version: the hero is dark
   rather than light, centred rather than left-aligned, and the
   product sits BELOW the copy instead of beside it. The services
   grid is a bento (uneven tiles) rather than six identical cards.
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.lp-hero {
    position: relative; overflow: hidden;
    background: var(--mp-page-bg);
    padding: 46px 0 0;
}
/* Ambient brand light behind the copy. Sits under everything and never
   intercepts a tap. */
.lp-hero-glow {
    position: absolute; left: 50%; top: -230px;
    width: 760px; height: 560px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(171, 41, 35, .13), transparent 72%);
    pointer-events: none; z-index: 0;
}
.lp-hero-inner { position: relative; z-index: 1; text-align: center; }

.lp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 15px 6px 11px; border-radius: 999px;
    background: var(--mp-card-bg);
    box-shadow: inset 0 0 0 1px var(--mp-border);
    font-size: 12.5px; font-weight: 600; color: var(--mp-text);
}
.lp-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
    background: #46D17F;
    box-shadow: 0 0 0 3px rgba(70, 209, 127, .22);
}

.lp-h1 {
    margin: 22px auto 0; max-width: 15ch;
    font-size: clamp(34px, 7.4vw, 60px); font-weight: 800;
    line-height: 1.08; letter-spacing: -1.6px; color: var(--mp-text);
}
/* One phrase carries the brand so the headline has a focal point without the
   whole line turning red. */
/* Brand red reads on the light sheet; the previous #FF7A72 was picked for a
   dark panel and is far too pale here. */
.lp-h1-accent { color: var(--mp-brand); }

.lp-lead {
    margin: 18px auto 0; max-width: 52ch;
    font-size: clamp(14.5px, 2.1vw, 16.5px); line-height: 1.7;
    color: var(--mp-text-muted);
}

.lp-cta-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 11px;
    margin-top: 30px;
}
/* width:auto is load-bearing — styles.css sets `button { width: 100% }`. */
.lp-btn {
    width: auto;
    display: inline-flex; align-items: center; gap: 9px;
    padding: 14px 24px; border: 0; border-radius: var(--mp-btn-radius, 12px);
    font-size: 14.5px; font-weight: 700; letter-spacing: -.1px;
    text-decoration: none; cursor: pointer;
    transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
}
.lp-btn:active { transform: scale(.98); }
.lp-btn.is-solid { background: var(--mp-btn-grad); color: #fff; }
/* color restated: styles.css has a global `button:hover { color: #AB2923 }`
   which would otherwise put brand red on the brand fill. */
.lp-btn.is-solid:hover { background: var(--mp-btn-grad-hover); color: #fff; }
.lp-btn.is-ghost {
    background: rgba(255, 255, 255, .08); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}
.lp-btn.is-ghost:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.lp-btn.is-light { background: #fff; color: #14141F; }
.lp-btn.is-light:hover { background: rgba(255, 255, 255, .88); color: #14141F; }
.lp-btn.is-onbrand {
    background: rgba(255, 255, 255, .14); color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.lp-btn.is-onbrand:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.lp-hero-note {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 18px 0 0; font-size: 12.5px; color: var(--mp-text-muted);
}
.lp-hero-note i { color: var(--mp-green); }

/* The phone sits below the copy and is clipped by the section's foot, so it
   reads as rising out of the hero into the page. */
.lp-stage {
    display: flex; justify-content: center;
    margin-top: 46px;
    padding-bottom: 0;
}
.lp-stage .hp-phone-wrap { margin: 0; }

/* ── Ticker ── */
.lp-ticker {
    overflow: hidden;
    padding: 22px 0;
    background: var(--mp-card-bg);
    border-bottom: 1px solid var(--mp-border);
    /* Logos fade out into the page at both edges instead of being sliced off by
       the overflow clip. A mask, not a gradient overlay: an overlay would have
       to hardcode the page colour and would break the moment the section sits
       on a different background or in dark mode. */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0, #000 12%, #000 88%, transparent 100%);
}
/* Narrow screens: a 12% fade either side eats most of a phone's width, so the
   feathering tightens to a fixed edge instead of a proportion. */
@media (max-width: 600px) {
    .lp-ticker {
        -webkit-mask-image: linear-gradient(to right,
            transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
                mask-image: linear-gradient(to right,
            transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    }
}
.lp-ticker-track {
    display: flex; align-items: center;
    width: max-content;
    /* justify-content:center so that if the row ever IS narrower than the
       viewport it sits centred rather than pinned left with a hole beside it. */
    justify-content: center;
    animation: lpTicker 26s linear infinite;
    /* NO `gap` here - that is what broke the loop. With the list rendered twice,
       flex gap puts (2n - 1) gaps between 2n logos, so half the track is
       n items + n-0.5 gaps and a -50% shift lands half a gap out of register:
       the seam shows as an oversized hole sliding past. Spacing now rides on
       each item, making every copy exactly n x (logo + spacing) wide and -50%
       exact. */
}
.lp-ticker-track img {
    height: 30px; width: auto; flex-shrink: 0;
    margin-right: 54px;
    opacity: .55; filter: grayscale(1);
    transition: opacity .2s ease, filter .2s ease;
}
.lp-ticker:hover .lp-ticker-track { animation-play-state: paused; }
.lp-ticker-track img:hover { opacity: 1; filter: none; }
/* -50% exactly. The list is rendered four times, so half the track is two
   complete copies and the reset lands on an identical frame. Any other value
   would visibly snap. */
@keyframes lpTicker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .lp-ticker-track { animation: none; }
}

/* ── Section heads ── */
.lp-head { text-align: center; margin-bottom: 38px; }
.lp-kicker {
    display: inline-block; margin-bottom: 10px;
    font-size: 11.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: var(--mp-brand);
}
.lp-head h2 {
    margin: 0; font-size: clamp(24px, 4.2vw, 34px); font-weight: 800;
    letter-spacing: -.9px; color: var(--mp-text); line-height: 1.2;
}


/* ══ How it works — one red block ═══════════════════════════════
   Replaces the light "steps" section and the near-black "stats" band, which
   stacked into a hard seam. Now a single brand-red field carrying both: copy
   and CTA left, the numbered steps right, the proof figures across the foot.

   Red is the field here, not an accent, so nothing inside it needs to be red
   to be on-brand — the steps are plain white type on the colour, which is why
   this reads as designed rather than decorated.
   ══════════════════════════════════════════════════════════════ */
.lp-hiw {
    position: relative; overflow: hidden;
    padding: 84px 0 0;
    background: var(--mp-brand);
    color: #fff;
}
/* Slight lift toward the top-left so the field is not a flat slab of colour.
   Two stops of the same hue — no second colour is introduced. */
.lp-hiw::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 8% 0%, rgba(255,255,255,.14), transparent 58%);
    pointer-events: none;
}
.lp-hiw > * { position: relative; z-index: 1; }

.lp-hiw-grid {
    display: grid; gap: 56px;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
}
@media (max-width: 940px) { .lp-hiw-grid { grid-template-columns: 1fr; gap: 34px; } }

.lp-hiw-kicker {
    display: inline-block; margin-bottom: 14px;
    font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: rgba(255, 255, 255, .72);
}
.lp-hiw-h2 {
    margin: 0;
    font-family: var(--mp-font-num);
    font-size: clamp(28px, 4.6vw, 44px); font-weight: 800;
    line-height: 1.14; letter-spacing: -1.4px; color: #fff;
}
.lp-hiw-lead {
    margin: 18px 0 0; max-width: 34ch;
    font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .82);
}

/* White button on the red field — the inverse of every other CTA on the page,
   which is what makes this section the page's loudest call. */
.lp-hiw-cta {
    display: inline-flex; align-items: center; gap: 9px;
    margin-top: 28px; padding: 14px 26px;
    border-radius: var(--mp-btn-radius, 12px);
    background: #fff; color: var(--mp-brand);
    font-size: 14.5px; font-weight: 700; text-decoration: none;
    transition: transform .14s ease, box-shadow .18s ease;
}
/* color restated — styles.css has a global `button:hover { color: #AB2923 }`,
   and this must stay brand-on-white in both states regardless. */
.lp-hiw-cta:hover {
    color: var(--mp-brand); background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .45);
}
.lp-hiw-cta i { font-size: 15px; }

/* Steps as rows, not cards. Cards on a coloured field mean punching three
   white boxes into the colour, which loses the point of having a field. */
.lp-hiw-steps { list-style: none; margin: 0; padding: 0; }
.lp-hiw-step {
    display: flex; align-items: baseline; gap: 22px;
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
}
.lp-hiw-step:first-child { border-top: 0; padding-top: 0; }
.lp-hiw-step:last-child { padding-bottom: 4px; }

/* Outlined numeral — large enough to structure the column, hollow so it never
   competes with the step's own title. */
.lp-hiw-num {
    flex-shrink: 0; width: 62px;
    font-family: var(--mp-font-num); font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55);
}
/* text-stroke is unsupported in a few older WebViews, where transparent text
   would vanish outright. Fall back to a solid translucent numeral. */
@supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) {
    .lp-hiw-num { color: rgba(255, 255, 255, .5); }
}

.lp-hiw-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.lp-hiw-title { font-size: 17px; font-weight: 700; letter-spacing: -.3px; color: #fff; }
.lp-hiw-body { font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .78); }

/* Proof figures across the foot of the same block, divided off by a hairline
   rather than by a change of background. */
.lp-hiw-figs {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 24px 18px;
    margin-top: 64px; padding: 30px 0 34px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.lp-hiw-fig { display: flex; flex-direction: column; gap: 6px; }
.lp-hiw-fig-n {
    font-family: var(--mp-font-num); font-variant-numeric: tabular-nums;
    font-size: clamp(26px, 5vw, 38px); font-weight: 800;
    letter-spacing: -1px; line-height: 1.1; color: #fff;
}
.lp-hiw-fig-c { font-size: 12.5px; color: rgba(255, 255, 255, .72); }

@media (max-width: 600px) {
    .lp-hiw { padding-top: 52px; }
    .lp-hiw-step { gap: 16px; padding: 18px 0; }
    .lp-hiw-num { width: 46px; font-size: 26px; }
    .lp-hiw-figs { margin-top: 40px; padding: 24px 0 28px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-hiw-cta { transition: none; }
    .lp-hiw-cta:hover { transform: none; }
}

/* ── Bento ── */
.lp-bento-wrap { padding: 68px 0; background: var(--mp-card-bg); }
.lp-bento {
    display: grid; gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
/* The two products we lead with break the uniform rhythm — that unevenness is
   the point of a bento, and it is what stops six identical cards reading as a
   spreadsheet. Both collapse to a single column on small screens. */
.lp-tile.is-tall { grid-row: span 2; }
.lp-tile.is-wide { grid-column: span 2; }
@media (max-width: 620px) {
    .lp-tile.is-tall { grid-row: auto; }
    .lp-tile.is-wide { grid-column: auto; }
}

.lp-tile {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 24px 22px;
    border-radius: 20px;
    background: var(--mp-page-bg);
    text-decoration: none; color: var(--mp-text);
    transition: transform .16s ease, box-shadow .16s ease;
}
.lp-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -16px rgba(16, 24, 40, .28);
    color: var(--mp-text);
}
.lp-tile-ico {
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 14px; margin-bottom: 16px;
    background: var(--mp-card-bg); color: var(--mp-brand);
    font-size: 20px;
    box-shadow: 0 0 0 1px var(--mp-border);
}
.lp-tile h3 {
    margin: 0 0 7px; font-size: 17px; font-weight: 700;
    letter-spacing: -.3px; color: inherit;
}
.lp-tile p {
    margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--mp-text-muted);
}
.lp-tile-go {
    display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
    padding-top: 18px;
    font-size: 13px; font-weight: 700; color: var(--mp-brand);
}
.lp-tile:hover .lp-tile-go i { transform: translateX(3px); }
.lp-tile-go i { transition: transform .16s ease; }

/* The one brand-filled tile, so the grid has a single accent rather than six. */
.lp-tile.is-brand {
    background: var(--mp-glass-brand),
                linear-gradient(148deg, #AB2923 0%, #94211C 52%, #6E1512 100%);
    color: #fff;
}
.lp-tile.is-brand p { color: rgba(255, 255, 255, .82); }
.lp-tile.is-brand .lp-tile-ico {
    background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none;
}
.lp-tile.is-brand .lp-tile-go { color: #fff; }
.lp-tile.is-brand:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
    .lp-tile, .lp-tile-go i { transition: none; }
    .lp-tile:hover { transform: none; }
}

/* ── Closing CTA ── */
.lp-close { padding: 68px 0; background: var(--mp-page-bg); }
.lp-close-card {
    position: relative; overflow: hidden;
    padding: 52px 28px;
    border-radius: 26px;
    background: var(--mp-glass-brand),
                linear-gradient(148deg, #AB2923 0%, #94211C 52%, #6E1512 100%);
    text-align: center;
    box-shadow: 0 22px 48px -24px rgba(110, 21, 18, .6);
}
.lp-close-glow {
    position: absolute; right: -90px; top: -120px;
    width: 340px; height: 340px; border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    pointer-events: none;
}
.lp-close-body { position: relative; z-index: 1; }
.lp-close-body h2 {
    margin: 0; font-size: clamp(24px, 4.4vw, 34px); font-weight: 800;
    letter-spacing: -.9px; color: #fff;
}
.lp-close-body p {
    margin: 12px auto 0; max-width: 46ch;
    font-size: 14.5px; line-height: 1.7; color: rgba(255, 255, 255, .84);
}


/* ── Small screens ────────────────────────────────────────────
   The rebuilt sections were laid out desktop-first; these bring the vertical
   rhythm and the hero stage back inside a phone viewport. */
@media (max-width: 600px) {
    .lp-hero { padding-top: 30px; }
    .lp-h1 { max-width: 100%; letter-spacing: -1px; }
    .lp-lead { font-size: 14.5px; }
    .lp-stage { margin-top: 32px; }
    /* The mockup is a fixed-width element; without this it forces a horizontal
       scrollbar on narrow screens. */
    .lp-stage .hp-phone-wrap { max-width: 100%; }
    .lp-stage .hp-phone { max-width: 100%; }

    .lp-bento-wrap,
    .lp-close { padding: 46px 0; }

    .lp-head { margin-bottom: 26px; }
    .lp-close-card { padding: 38px 20px; border-radius: 20px; }
    .lp-tile { padding: 20px 18px; }

    /* Stack the hero actions so neither button is squeezed to two lines. */
    .lp-cta-row { flex-direction: column; align-items: stretch; }
    .lp-cta-row .hp-store-btn { justify-content: flex-start; }
}

/* Belt and braces: nothing on this page may cause sideways scroll. */
.lp-hero,
.lp-ticker,
.lp-hiw,
.lp-bento-wrap,
.lp-close { max-width: 100%; overflow-x: clip; }


/* ═══ Public footer ══════════════════════════════════════════════
   Dark, so the page closes against the light content above it instead of
   fading out. Brand column left, link columns right, legal strip below a
   divider. Shared by the homepage and all five public pages.
   ═══════════════════════════════════════════════════════════════ */
.pf {
    background: #14141F;
    color: rgba(255, 255, 255, .68);
    padding: 56px 0 26px;
}
.pf-inner { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

.pf-top {
    display: grid; gap: 40px;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr);
}
@media (max-width: 860px) { .pf-top { grid-template-columns: 1fr; gap: 34px; } }

/* Column wrapper — needed so the brand block stacks its own children rather
   than inheriting the grid. */
.pf-brand { display: flex; flex-direction: column; align-items: flex-start; }
.pf-logo {
    display: inline-block;
    font-size: 20px; font-weight: 800; letter-spacing: 1.6px;
    text-transform: uppercase; color: #fff; text-decoration: none;
}
.pf-blurb {
    margin: 12px 0 0; max-width: 34ch;
    font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .6);
}

.pf-contact { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.pf-contact-row {
    display: inline-flex; align-items: center; gap: 11px;
    text-decoration: none; color: inherit;
}
.pf-contact-ico {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 15px;
    transition: background .18s ease;
}
.pf-contact-row:hover .pf-contact-ico { background: var(--mp-brand); }
.pf-contact-cap {
    display: block; font-size: 11px; color: rgba(255, 255, 255, .5);
}
.pf-contact-val {
    display: block; font-size: 13.5px; font-weight: 600; color: #fff;
}

.pf-cols {
    display: grid; gap: 28px 20px;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
.pf-col-title {
    margin: 0 0 14px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #fff;
}
.pf-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pf-ul a {
    font-size: 13.5px; color: rgba(255, 255, 255, .62);
    text-decoration: none;
    transition: color .16s ease;
}
.pf-ul a:hover { color: #fff; }

.pf-bar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px;
    margin-top: 42px; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}
.pf-copy { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .5); }
/* Secondary line, not a second sentence competing with the copyright notice —
   a narrow space before it on wide screens, its own line once it wraps. */
.pf-credit { display: inline-block; margin-left: 10px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .18); }
@media (max-width: 480px) { .pf-credit { display: block; margin: 4px 0 0; padding: 0; border: 0; } }
.dev-credit-wa { color: rgba(255, 255, 255, .7); text-decoration: underline; text-underline-offset: 2px; }
.dev-credit-wa:hover { color: #fff; }
.pf-social { display: flex; gap: 9px; }
.pf-social a {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .8); font-size: 14px;
    text-decoration: none;
    transition: background .18s ease, color .18s ease;
}
.pf-social a:hover { background: var(--mp-brand); color: #fff; }

@media (max-width: 600px) {
    .pf { padding: 40px 0 22px; }
    .pf-bar { margin-top: 30px; }
}


/* ═══ Hero, v2 — copy left, product preview right ═══════════════
   Replaces the centred hero with a two-column split. The right column is a
   mock of the signed-in dashboard rather than a phone frame: it shows what the
   product actually looks like, which a device outline does not.
   ═══════════════════════════════════════════════════════════════ */
.lp-hero-grid {
    display: grid; gap: 48px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    /* Longhand, not `padding: 56px 0 64px`. This element also carries .hp-wrap,
       whose `padding: 0 24px` is the page's side gutter; an equal-specificity
       shorthand declared later reset those sides to 0, which is why the hero
       copy and the preview card sat flush against the viewport edge. */
    padding-top: 56px; padding-bottom: 64px;
}
.lp-hero-copy { text-align: left; }

/* Stacks under 940px — below that the preview card gets too narrow for its
   transaction rows to stay on one line. */
@media (max-width: 940px) {
    .lp-hero-grid {
        grid-template-columns: 1fr; gap: 38px;
        padding-top: 34px; padding-bottom: 44px;
    }
    .lp-hero-copy { text-align: center; }
    .lp-hero-copy .lp-cta-row,
    .lp-hero-copy .lp-trust { justify-content: center; }
    .lp-h1 { margin-inline: auto; }
    .lp-lead { margin-inline: auto; }
}

.lp-hero-copy .lp-h1 {
    margin: 20px 0 0; max-width: 14ch;
    font-size: clamp(38px, 6.4vw, 62px);
    line-height: 1.06; letter-spacing: -2px;
}
.lp-hero-copy .lp-lead { margin: 20px 0 0; max-width: 46ch; }
.lp-hero-copy .lp-cta-row { justify-content: flex-start; margin-top: 32px; }

/* Outlined secondary, matching the solid's height exactly. */
.lp-btn.is-outline {
    background: var(--mp-card-bg); color: var(--mp-text);
    box-shadow: inset 0 0 0 1px var(--mp-border);
}
.lp-btn.is-outline:hover {
    background: var(--mp-page-bg); color: var(--mp-text);
    box-shadow: inset 0 0 0 1px var(--mp-brand);
}

/* ── Trust row ── */
.lp-trust {
    list-style: none; margin: 26px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px 22px;
}
.lp-trust li {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--mp-text-muted);
}
.lp-trust i { color: var(--mp-brand); font-size: 14px; }

/* -- Dashboard preview --
   A faithful reduction of the real signed-in dashboard: red masthead carrying
   the greeting, balance and the two primary actions, then the light sheet
   overlapping it with quick links and grouped transactions. Built from spans
   and aria-hidden, so it illustrates the product without being announced as a
   real dashboard or landing in the tab order.

   Kept as a flat panel rather than a phone frame - a device outline would add
   bezel and shrink the very UI it exists to show. */
.lp-preview {
    overflow: hidden;
    border-radius: 26px;
    background: var(--mp-page-bg);
    box-shadow: 0 30px 64px -32px rgba(16, 24, 40, .45),
                0 0 0 1px var(--mp-border);
}
@media (max-width: 940px) { .lp-preview { max-width: 420px; margin: 0 auto; } }

/* -- Red masthead -- */
.lp-pv-top {
    position: relative; overflow: hidden;
    padding: 20px 20px 34px;
    background: var(--mp-btn-grad);
    color: #fff;
}
/* The soft arc the real masthead carries in its top-right corner. */
.lp-pv-top::after {
    content: ''; position: absolute; right: -70px; top: -110px;
    width: 240px; height: 240px; border-radius: 50%;
    background: rgba(255, 255, 255, .07);
}
.lp-pv-top > * { position: relative; z-index: 1; }

.lp-pv-user { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.lp-pv-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: rgba(255, 255, 255, .18);
    font-size: 13px; font-weight: 800; letter-spacing: .5px; color: #fff;
}
.lp-pv-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-pv-greet { font-size: 11px; color: rgba(255, 255, 255, .8); }
.lp-pv-name {
    display: flex; align-items: center; gap: 7px;
    font-size: 15px; font-weight: 700; color: #fff;
}
.lp-pv-tier {
    padding: 2px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .2);
    font-size: 8.5px; font-weight: 800; letter-spacing: .6px;
}
.lp-pv-icons { display: flex; gap: 8px; margin-left: auto; }
.lp-pv-ico {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    font-size: 14px; color: #fff;
}
.lp-pv-dot {
    position: absolute; top: -3px; right: -3px;
    min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: #fff; color: var(--mp-brand);
    font-size: 9px; font-weight: 800;
}

.lp-pv-cap {
    display: flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.lp-pv-fig {
    display: block; margin-top: 6px;
    font-family: var(--mp-font-num); font-variant-numeric: tabular-nums;
    font-size: 34px; font-weight: 800; letter-spacing: -1.4px;
    color: #fff; line-height: 1.1;
}
/* Kobo stepped down - on a balance the naira is what is being read. */
.lp-pv-dec { font-size: 20px; font-weight: 700; color: rgba(255, 255, 255, .78); }
.lp-pv-cash {
    display: inline-block; margin-top: 14px;
    padding: 6px 13px; border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 11.5px; color: rgba(255, 255, 255, .9);
}
.lp-pv-cash b { font-weight: 800; color: #fff; }

.lp-pv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.lp-pv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 0; border-radius: 999px;
    font-size: 13.5px; font-weight: 700; color: #fff;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
}
/* Deeper than the field it sits on, not lighter - the primary action reads as
   pressed into the masthead, which is how the real dashboard does it. The
   gradient runs dark-to-light left to right, against the masthead's own
   light-to-dark, so the button separates from the field behind it instead of
   dissolving into whichever part of the gradient it happens to cover. */
.lp-pv-btn.is-solid {
    background: linear-gradient(100deg, #6E0F0B 0%, #8E1C16 55%, #A82720 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* -- Light sheet, overlapping the masthead -- */
.lp-pv-sheet {
    position: relative;
    margin-top: -18px; padding: 18px 16px 20px;
    border-radius: 20px 20px 0 0;
    background: var(--mp-page-bg);
}
.lp-pv-sec {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
    font-size: 14px; font-weight: 700; color: var(--mp-text);
}
.lp-pv-tiles + .lp-pv-sec { margin-top: 20px; }
.lp-pv-more { font-size: 11.5px; font-weight: 600; color: var(--mp-brand); }

.lp-pv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.lp-pv-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 13px 4px 11px; border-radius: 14px;
    background: var(--mp-card-bg);
    box-shadow: 0 4px 12px -8px rgba(16, 24, 40, .3);
    font-size: 10px; font-weight: 600; color: var(--mp-text);
    text-align: center; min-width: 0;
}
.lp-pv-tile-ico {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--mp-brand-soft); color: var(--mp-brand); font-size: 14px;
}
/* One tile filled, as on the dashboard, so the row has a focal point. */
.lp-pv-tile-ico.is-fill { background: var(--mp-brand); color: #fff; }

.lp-pv-recent {
    padding: 4px 14px; border-radius: 16px;
    background: var(--mp-card-bg);
    box-shadow: 0 4px 12px -8px rgba(16, 24, 40, .3);
}
.lp-pv-day {
    display: block; padding: 12px 0 6px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .9px;
    text-transform: uppercase; color: var(--mp-text-muted);
}
.lp-pv-row {
    display: flex; align-items: center; gap: 11px;
    padding: 11px 0;
    border-top: 1px solid var(--mp-border);
}
/* A row opening a day group already has that heading above it, so a rule there
   would double up with the group spacing. */
.lp-pv-day + .lp-pv-row { border-top: 0; }
.lp-pv-row-ico {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    background: var(--mp-brand-soft); color: var(--mp-brand); font-size: 13px;
}
.lp-pv-row-ico.is-in { background: var(--mp-green-bg); color: var(--mp-green); }
.lp-pv-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.lp-pv-row-title {
    font-size: 12.5px; font-weight: 600; color: var(--mp-brand);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-pv-row-sub {
    display: flex; align-items: center; gap: 5px;
    font-size: 10.5px; color: var(--mp-text-muted);
}
.lp-pv-ok {
    width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
    background: var(--mp-green);
}
.lp-pv-amt {
    flex-shrink: 0;
    font-family: var(--mp-font-num); font-variant-numeric: tabular-nums;
    font-size: 12.5px; font-weight: 700; color: var(--mp-text);
}
.lp-pv-amt.is-in { color: var(--mp-green); }

/* The centred-hero rules from the previous version no longer apply. */
.lp-hero-inner, .lp-stage, .lp-hero-note { display: none !important; }


/* ═══ Nunito for display type ═══════════════════════════════════
   --mp-font-num is the app's Nunito (theme-mp.css). It already carries every
   figure in the product, so using it for the landing page's display type is
   what makes the marketing site and the app read as one brand rather than two.
   Body copy stays on the base family — Nunito at paragraph size is looser and
   costs readability. */
.lp-h1,
.lp-head h2,
.lp-tile h3,
.lp-close-body h2,
.lp-pv-fig,
.pf-logo { font-family: var(--mp-font-num); }

/* Nunito runs a touch wider than the base face, so the big sizes need their
   tracking pulled back in to hold the same optical weight. */
.lp-h1 { letter-spacing: -2.4px; }
.lp-head h2, .lp-close-body h2 { letter-spacing: -1.1px; }


/* ═══ Services — heading with a brand rule, then a flat card grid ═══
   Cards are a flat tinted fill with no border and no shadow. That is the whole
   point of this treatment: the page already carries depth in the hero preview
   and the closing card, so making six more surfaces float competes with them.
   Here the grid should read as calm reference material.
   ═══════════════════════════════════════════════════════════════ */
.lp-sv-wrap {
    position: relative; overflow: hidden;
    padding: 78px 0;
    background: var(--mp-card-bg);
}

/* Concentric arcs bleeding off the bottom-right, brand-tinted and very faint.
   pointer-events:none so it can never intercept a tap on the cards. */
.lp-sv-deco {
    position: absolute; right: -180px; bottom: -260px;
    width: 620px; height: 620px; border-radius: 50%;
    border: 1px solid var(--mp-brand-soft);
    box-shadow: 0 0 0 60px transparent,
                inset 0 0 0 60px transparent,
                0 0 0 1px transparent;
    pointer-events: none;
}
.lp-sv-deco::before,
.lp-sv-deco::after {
    content: ''; position: absolute; border-radius: 50%;
    border: 1px solid var(--mp-brand-soft);
}
.lp-sv-deco::before { inset: 70px; }
.lp-sv-deco::after  { inset: 150px; }
@media (max-width: 860px) { .lp-sv-deco { display: none; } }

/* The rule is a border on the heading, not a pseudo-element, so it always
   matches the heading's own height however many lines it wraps to. */
.lp-sv-head {
    position: relative; z-index: 1;
    border-left: 4px solid var(--mp-brand);
    padding-left: 20px;
    margin-bottom: 46px;
}
.lp-sv-head h2 {
    margin: 0;
    font-family: var(--mp-font-num);
    font-size: clamp(24px, 4.4vw, 36px); font-weight: 800;
    line-height: 1.28; letter-spacing: -1px; color: var(--mp-text);
}
.lp-sv-accent { color: var(--mp-brand); }

.lp-sv-grid {
    position: relative; z-index: 1;
    display: grid; gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
}

.lp-sv {
    display: block;
    padding: 28px 26px 30px;
    border-radius: 10px;
    background: var(--mp-page-bg);
    text-decoration: none; color: inherit;
    transition: background .16s ease, transform .16s ease;
}
.lp-sv:hover { background: var(--mp-brand-soft); transform: translateY(-2px); color: inherit; }

.lp-sv-ico {
    display: block; margin-bottom: 22px;
    font-size: 26px; color: var(--mp-text);
    line-height: 1;
}
.lp-sv:hover .lp-sv-ico { color: var(--mp-brand); }

.lp-sv-title {
    margin: 0 0 12px;
    font-size: 14.5px; font-weight: 700; letter-spacing: -.1px;
    color: var(--mp-brand);
}
.lp-sv-body {
    margin: 0;
    font-size: 13.5px; line-height: 1.75; color: var(--mp-text-muted);
}

@media (max-width: 600px) {
    .lp-sv-wrap { padding: 48px 0; }
    .lp-sv-head { margin-bottom: 30px; padding-left: 16px; }
    .lp-sv { padding: 22px 20px 24px; }
    .lp-sv-grid { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-sv { transition: none; }
    .lp-sv:hover { transform: none; }
}


/* ── Page canvas ──────────────────────────────────────────────
   styles/styles.css sets `body, html { background-color: #ddd !important }`
   globally. On the app that grey frames the 480px phone column on desktop, but
   on the public pages it shows as a band around the whole layout.

   Overriding html would change the app too, so this raises body instead and
   gives it min-height:100vh — html keeps its own background, and body's now
   covers the visible area. .pub-body is on the shared public header; the
   homepage carries .bg-bg-body from its own <body>. */
body.bg-bg-body,
body.pub-body {
    background-color: var(--mp-card-bg) !important;
    min-height: 100vh;
}


/* ═══ Hero responsive — must stay LAST in this file ═════════════
   The desktop rules (.lp-hero-copy .lp-h1, .lp-hero-copy .lp-cta-row …) are
   two-class selectors declared earlier but AFTER the first @media block, so at
   equal specificity they won on source order and the mobile rules never
   applied. These repeat that specificity and sit at the end of the file, so
   they win on order. Anything hero-responsive belongs here.

   The copy stays LEFT-aligned when the layout stacks. Centring a three-line
   display heading and a full paragraph on a phone makes every line start at a
   different x, which is harder to read than a clean left edge.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 940px) {
    .lp-hero-copy { text-align: left; }
    .lp-hero-copy .lp-h1     { margin-left: 0; margin-right: 0; max-width: 100%; }
    .lp-hero-copy .lp-lead   { margin-left: 0; margin-right: 0; max-width: 100%; }
    .lp-hero-copy .lp-cta-row { justify-content: flex-start; margin-top: 28px; }
    .lp-hero-copy .lp-trust   { justify-content: flex-start; }

    /* Full width, not the 460px centred cap — on a phone the card should use
       the column it is given. */
    .lp-preview { max-width: 100%; margin: 0; }
}

@media (max-width: 600px) {
    /* Side by side, not stacked. Dropping the qualifying line is what makes
       that fit: the two-line label is the reason the pair was wider than a
       phone. The line is only supporting copy, so losing it on small screens
       costs nothing the button does not already say. */
    .lp-hero-copy .lp-cta-row {
        flex-direction: row; flex-wrap: nowrap; gap: 10px;
    }
    .lp-hero-copy .lp-cta-row .hp-store-btn {
        flex: 1 1 0; min-width: 0; width: auto;
        justify-content: center;
        gap: 8px; padding: 14px 12px;
    }
    .lp-hero-copy .hp-store-sm { display: none; }
    .lp-hero-copy .hp-store-lg {
        font-size: 13.5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    .lp-hero-copy .lp-h1 { font-size: clamp(32px, 9.4vw, 44px); letter-spacing: -1.4px; }
    .lp-hero-copy .lp-lead { font-size: 14.5px; }
    .lp-hero-copy .lp-trust { gap: 10px 18px; font-size: 12px; }

    /* No outer padding — the masthead and sheet carry their own, and an inset
       here would pull the red away from the card edge. */
    .lp-preview { border-radius: 20px; }
    .lp-pv-top { padding: 16px 16px 30px; }
    .lp-pv-sheet { padding: 16px 13px 18px; }
    .lp-pv-fig { font-size: 27px; }
    .lp-pv-tiles { gap: 4px; }
    .lp-pv-tile { font-size: 9.5px; }
    .lp-pv-tile-ico { width: 34px; height: 34px; }
}


/* ═══ Mobile drawer, rebuilt ════════════════════════════════════
   Slides in from the LEFT as a fixed-width panel rather than covering the
   screen, so the page stays visible behind the dim and the drawer reads as a
   layer over it. Links carry icons; identity and the auth actions are pinned
   to the foot so they sit at thumb height rather than at the top.
   ═══════════════════════════════════════════════════════════════ */
#hpMobDrawer { position: fixed; inset: 0; z-index: 1200; visibility: hidden; }
#hpMobDrawer.open { visibility: visible; }

#hpMobOverlay {
    position: absolute; inset: 0;
    background: rgba(16, 24, 40, .5);
    opacity: 0; transition: opacity .25s ease;
}
#hpMobDrawer.open #hpMobOverlay { opacity: 1; }

#hpMobPanel {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 290px; max-width: 86vw;
    display: flex; flex-direction: column;
    background: var(--mp-card-bg);
    box-shadow: 0 0 60px -12px rgba(16, 24, 40, .45);
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
#hpMobDrawer.open #hpMobPanel { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) {
    #hpMobOverlay, #hpMobPanel { transition: none; }
}

.hp-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px;
    border-bottom: 1px solid var(--mp-border);
}
.hp-drawer-head img { height: 30px; width: auto; display: block; }
/* width:auto is load-bearing — styles.css sets `button { width: 100% }`. */
.hp-drawer-x {
    width: auto; padding: 6px; border: 0; background: none;
    font-size: 16px; color: var(--mp-text-muted); cursor: pointer; line-height: 1;
}
.hp-drawer-x:hover { color: var(--mp-brand); background: none; }

/* flex:1 pushes the foot down, so the auth block sits at the bottom of the
   panel however few links there are. */
.hp-drawer-nav {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 14px 10px;
}
.hp-drawer-item {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 12px; border-radius: 10px;
    font-size: 14.5px; font-weight: 600; color: var(--mp-text);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.hp-drawer-item i { font-size: 16px; color: var(--mp-text-muted); width: 18px; flex-shrink: 0; }
.hp-drawer-item:hover { background: var(--mp-brand-soft); color: var(--mp-brand); }
.hp-drawer-item:hover i { color: var(--mp-brand); }

.hp-drawer-foot {
    flex-shrink: 0;
    display: flex; flex-direction: column; gap: 9px;
    padding: 14px 14px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--mp-border);
}
.hp-drawer-who { display: flex; align-items: center; gap: 11px; padding: 2px 2px 8px; }
.hp-drawer-avatar {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    background: var(--mp-brand-soft); color: var(--mp-brand);
    font-size: 14px; font-weight: 800;
}
.hp-drawer-avatar.is-guest { background: var(--mp-page-bg); color: var(--mp-text-muted); }
.hp-drawer-who-txt { display: flex; flex-direction: column; min-width: 0; }
.hp-drawer-who-name {
    font-size: 14px; font-weight: 700; color: var(--mp-text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hp-drawer-who-sub { font-size: 11.5px; color: var(--mp-text-muted); }

.hp-drawer-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 0; border-radius: var(--mp-btn-radius, 12px);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    background: var(--mp-card-bg); color: var(--mp-text);
    box-shadow: inset 0 0 0 1px var(--mp-border);
}
.hp-drawer-btn.is-solid {
    background: var(--mp-btn-grad); color: #fff; box-shadow: none;
}
/* color restated — styles.css has a global `button:hover { color: #AB2923 }`
   that would otherwise put brand red on the brand fill. */
.hp-drawer-btn.is-solid:hover { background: var(--mp-btn-grad-hover); color: #fff; }
.hp-drawer-btn:hover { background: var(--mp-page-bg); color: var(--mp-text); }

/* Header icon buttons, now carrying Bootstrap Icons rather than nioicon. */
.hp-mob-icon-btn {
    width: auto;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 8px; border: 0; background: none;
    font-size: 22px; line-height: 1; color: var(--mp-text);
    cursor: pointer; text-decoration: none;
}
.hp-mob-icon-btn:hover { color: var(--mp-brand); background: none; }


/* -- Phone frame around the dashboard preview --
   The preview is a mobile app UI; as a bare panel it read as a screenshot of a
   website. The frame supplies the context. Bezel and screen are separate
   elements: the screen clips its own corners, so the preview inside can scroll
   past them without the bezel being clipped too. */
.lp-phone {
    position: relative;
    width: 100%; max-width: 340px; margin: 0 auto;
    padding: 12px;
    border-radius: 46px;
    background: linear-gradient(150deg, #2C2C36 0%, #14141F 60%, #1E1E28 100%);
    /* Inner hairline reads as the polished edge of the case; the outer spread
       is the drop shadow of a device held above the page. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1),
                0 34px 70px -30px rgba(16, 24, 40, .55);
}
.lp-phone-screen {
    position: relative; overflow: hidden;
    border-radius: 36px;
    background: var(--mp-page-bg);
}

/* Inside the frame the preview is the screen content: no radius of its own, no
   shadow, and no outline - the frame provides all three. */
.lp-phone .lp-preview {
    border-radius: 0;
    box-shadow: none;
    max-width: none; margin: 0;
}
/* Clears the notch. */
.lp-phone .lp-pv-top { padding-top: 46px; }

@media (max-width: 940px) { .lp-phone { max-width: 320px; } }


/* -- Phone frame, detailed --
   Replaces the plain bezel-and-notch with the details that actually sell a
   device: a status bar over the app, hardware buttons on the rails, a home
   indicator, and a glare across the glass. Every part is decorative and lives
   inside the aria-hidden preview, so none of it is announced. */
.lp-phone {
    padding: 11px;
    border-radius: 52px;
    /* Three stops across the case: lit top-left, body, then a lifted edge
       bottom-right, which is what stops it reading as a flat dark rectangle. */
    background: linear-gradient(145deg, #3A3A46 0%, #14141F 42%, #0C0C14 72%, #2A2A34 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14),
                inset 0 0 0 8px #0A0A11,
                0 40px 80px -34px rgba(16, 24, 40, .6),
                0 8px 24px -12px rgba(16, 24, 40, .35);
}
/* Hardware buttons, drawn on the rails. Two pseudo-elements: volume pair left,
   power right - no extra markup for something purely decorative. */
.lp-phone::before,
.lp-phone::after {
    content: ''; position: absolute; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, #3A3A46, #1A1A24);
}
.lp-phone::before { left: -3px; top: 122px; height: 108px; }
.lp-phone::after  { right: -3px; top: 150px; height: 74px; }

.lp-phone-screen {
    border-radius: 42px;
    /* Hairline between glass and case. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
/* Glare: a single soft diagonal band across the upper glass. Sits above the
   app but below nothing else, and never intercepts a pointer. */
.lp-phone-screen::after {
    content: ''; position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(122deg,
                rgba(255, 255, 255, .13) 0%,
                rgba(255, 255, 255, .05) 26%,
                transparent 46%);
    pointer-events: none;
}

/* -- Status bar, sitting over the red masthead -- */
.lp-phone-status {
    position: absolute; z-index: 2; top: 0; left: 0; right: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 24px 0;
    color: #fff;
}
.lp-phone-time {
    font-family: var(--mp-font-num); font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 700; letter-spacing: .2px;
}
/* Dynamic-island pill, centred between the time and the system icons. */
.lp-phone-island {
    width: 78px; height: 22px; border-radius: 999px;
    background: #07070C;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
.lp-phone-sys { display: flex; align-items: center; gap: 5px; font-size: 11px; }

/* -- Home indicator -- */
.lp-phone-home {
    position: absolute; z-index: 2; bottom: 7px; left: 50%;
    transform: translateX(-50%);
    width: 108px; height: 4px; border-radius: 999px;
    background: rgba(16, 24, 40, .32);
}

/* Clears the status bar rather than the old notch, and leaves room at the foot
   for the home indicator so the last transaction row is not sitting under it. */
.lp-phone .lp-pv-top { padding-top: 44px; }
.lp-phone .lp-pv-sheet { padding-bottom: 24px; }

/* -- Device runs off the bottom of the hero --
   Cropped rather than fully contained: a whole phone floating in white space
   reads as a product shot, while one running past the section edge reads as
   the page continuing behind it. The negative margin does the cropping and the
   hero clips it, so the phone never adds height or creates a scrollbar. */
.lp-hero { overflow: hidden; }
.lp-hero-grid { align-items: end; }
.lp-phone { margin-bottom: -132px; }

@media (max-width: 940px) {
    /* Stacked, the phone is the last thing on screen, so crop it harder - the
       masthead and quick links are the part worth showing. */
    .lp-phone { margin-bottom: -180px; }
    .lp-hero-grid { align-items: start; }
}