/* ---------- Typeface ----------
   DM Sans, self-hosted. OFL, so free for commercial use, and derived from Poppins
   (what this site used) — same geometric skeleton, but a double-storey `a` and
   tighter proportions, which is closer to the reference design. Self-hosted rather
   than linked because the Google CSS API is a third-party render-blocking request;
   the files are preloaded in each page's <head>. */
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ============================================================
     MOCKUP v3 — verbatim replication of the supplied reference
     layout, in Mabro's colour scheme only.

     Nothing restructured: same nav, same hero, same dark band,
     same key-benefits bento, same reviews row, same safety block,
     same CTA band, same footer. Turquoise -> magenta. Poppins kept
     from the reference so the proportions read identically.
     ============================================================ */

  :root {
    /* Accent — Mabro magenta stands in for the reference turquoise. */
    --brand:      #A22483;
    --brand-600:  #8C1F71;
    --brand-400:  #C4359C;
    --brand-100:  #F9E3F2;
    --brand-50:   #FDF2F9;

    --ink:        #101828;
    --ink-2:      #475467;
    --ink-3:      #98A2B3;   /* the grey second half of every heading */

    --line:       #EAECF0;
    --line-strong:#C9CFDA;
    --bg:         #FFFFFF;
    --bg-page:    #F4F5F7;
    --surface:    #FFFFFF;
    --surface-2:  #F7F8FA;
    --surface-3:  #E9EBEF;
    --nav-bg:     #EFF0F3;
    --ph-a:       #FAFAFB;
    --ph-b:       #F1F2F5;

    --dark:       #0B1220;
    --dark-2:     #131C2E;

    --ok:         #12B76A;
    --ok-soft:    #D1FADF;
    --ok-ink:     #0A7B45;

    /* Hero headline accent, for the giftcards term. Airtime uses --brand and
       crypto uses --ok-ink, which already carry theme-correct text values; there
       is no warm accent in the palette, so this one needs its own token and its
       own dark value — a text-safe amber is much lighter on a dark page. */
    --hl-giftcards: #B45309;

    --r-card: 24px;
    --r-band: 32px;
    --r-pill: 999px;

    --sh-1: 0 4px 16px rgba(16,24,40,.06);
    --sh-2: 0 12px 40px rgba(16,24,40,.10);
    --sh-3: 0 24px 70px rgba(16,24,40,.16);
  }

  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

  body {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--ink-2);
    font-size: 15px; line-height: 1.65;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { color: var(--ink); font-weight: 500; line-height: 1.18; letter-spacing: -.01em; }
  a { color: inherit; text-decoration: none; }
  img { max-width: 100%; display: block; }
  ul { list-style: none; }

  .wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 32px; }

  .tone { color: var(--ink-3); }

  /* ---------- Pills ---------- */
  .pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    border-radius: var(--r-pill); padding: 14px 30px;
    border: 1px solid transparent; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
  }
  .pill:active { transform: translateY(1px); }
  .pill-brand { background: var(--brand); color: #fff; }
  .pill-brand:hover { background: var(--brand-600); }
  .pill-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
  .pill-outline:hover { border-color: var(--ink-3); }
  /* Sits on the magenta band in both themes, so its ink stays fixed. */
  .pill-white { background: #fff; color: #101828; }
  .pill-white:hover { background: #F9FAFB; }
  .pill-sm { padding: 11px 24px; font-size: 14px; }

  /* ---------- Nav ---------- */
  /* The rounded pill container stays — it was tried as a bare bar on 2026-10-14
     and reverted the same day, so this is the deliberate design, not an oversight.
     What DID change is that every page now wraps the nav in .wrap like the
     homepage does; 14 pages were missing it, which made their header run the full
     viewport width. */
  .nav-outer { padding: 28px 0 8px; background: var(--bg-page); }
  .nav {
    display: flex; align-items: center; gap: 28px;
    background: var(--nav-bg); border-radius: var(--r-pill);
    padding: 10px 12px 10px 30px;
    position: relative;
  }
  .nav-logo { display: flex; align-items: center; flex: none; margin-right: 8px; }
  .nav-logo img { height: 22px; }
  .nav-links { display: flex; align-items: center; gap: 30px; margin: 0 auto; }
  .nav-links a { font-size: 14px; font-weight: 400; color: var(--ink); }
  .nav-links a:hover { color: var(--brand); }
  /* Inner pages mark where you are. */
  .nav-links a[aria-current="page"] { color: var(--brand); }
  .nav-links .has-drop { display: inline-flex; align-items: center; gap: 5px; }
  .nav-actions { display: flex; align-items: center; gap: 10px; }
  .nav-burger { display: none; background: none; border: 0; padding: 10px; color: var(--ink); cursor: pointer; margin-left: auto; }

  /* ---------- Hero ---------- */
  .hero { background: var(--bg-page); padding: 40px 0 0; overflow: hidden; position: relative; }
  .hero-copy { text-align: center; max-width: 1020px; margin: 0 auto; position: relative; z-index: 2; }

  /* Colour-coded headline, home page only: one colour per product, so each term
     reads as the service card it maps to further down the page. Bolder than the
     rest of the line so the colour reads as emphasis and not as a rendering
     accident — h1 sits at 500, these at 700. */
  .hl-airtime   { color: var(--brand); font-weight: 700; }
  .hl-crypto    { color: var(--ok-ink); font-weight: 700; }
  .hl-giftcards { color: var(--hl-giftcards); font-weight: 700; }
  /* Sized so "Convert airtime, crypto and giftcards." holds one line; the
     previous 58px broke it and stranded "giftcards." on a line of its own. */
  /* Max 45px, not 47: the headline is "Crypto to Naira, Airtime to Cash and
     Giftcards." and at 47px that line needs 1034px against the 1020px column, so
     it wrapped with "Giftcards." orphaned on its own line. The vw factor comes
     down with the max so the line still fits between ~1030 and 1084px, where the
     column is narrower than its cap but the size would otherwise be pinned. */
  .hero h1 { font-size: clamp(32px, 4.2vw, 45px); font-weight: 500; color: var(--ink); }
  .hero-cta { margin-top: 30px; }

  .hero-stage { position: relative; margin-top: 56px; display: flex; justify-content: center; padding-bottom: 0; }

  /* The hero phone is drawn at 2x and clipped: the top two thirds are shown,
     the cut edge flush with the bottom of the hero so it rests on the band. */
  .phone-clip { height: 702px; overflow: hidden; position: relative; z-index: 2; }
  .hero-stage .phone-frame { width: 516px; border-radius: 80px; padding: 16px; box-shadow: var(--sh-3); }
  .hero-stage .phone-screen { border-radius: 64px; }
  .hero-stage .phone-notch { top: 17px; width: 146px; height: 21px; }
  .hero-stage .ph { font-size: 15px; }
  .hero-stage .ph span { font-size: 13px; }
  .hero-stage::before {
    content: ""; position: absolute; left: 50%; top: 44%; width: 720px; height: 560px;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, rgba(162,36,131,.10), rgba(162,36,131,0) 70%);
    pointer-events: none;
  }

  /* Phone */
  .phone { position: relative; z-index: 2; }
  .phone-frame {
    width: 268px; border-radius: 42px; padding: 10px;
    background: linear-gradient(165deg, #303A4D, #0B1220 60%);
    box-shadow: var(--sh-3);
  }
  .phone-screen {
    position: relative; border-radius: 33px; overflow: hidden;
    background: var(--surface-2); aspect-ratio: 9 / 19;
  }
  /* Positioned and explicitly stacked above the .ph placeholder, which is
     absolute. Without one of these the placeholder paints over the screen. */
  .phone-screen img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .phone-notch {
    position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 76px; height: 11px; border-radius: var(--r-pill);
    background: rgba(11,18,32,.85); z-index: 3;
  }
  .ph {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 20px;
    background: repeating-linear-gradient(135deg, var(--ph-a) 0 11px, var(--ph-b) 11px 22px);
    color: var(--ink-3); font-size: 11px; font-weight: 500;
  }
  .ph span { color: var(--line-strong); font-size: 10px; }

  /* Floating cards */
  .fl {
    position: absolute; z-index: 3; background: var(--surface);
    border-radius: 16px; box-shadow: var(--sh-2); padding: 14px 16px;
  }
  .fl-k { font-size: 11px; color: var(--ink-3); }
  .fl-v { font-size: 14px; font-weight: 500; color: var(--ink); }
  .fl-row { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
  .fl-sep { height: 1px; background: var(--line); margin: 10px 0; }

  /* Photo placeholders keep the reference geometry. */
  .photo {
    border-radius: 16px; overflow: hidden; background: var(--surface-3);
    box-shadow: var(--sh-2); position: relative;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-3); font-size: 11px; text-align: center; padding: 8px;
    border: 1px dashed var(--line-strong);
  }
  /* Filled photo slots carry an image instead of the dashed placeholder. */
  .photo.filled { padding: 0; border: 0; }
  .photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .photo-badge {
    position: absolute; right: -12px; top: -12px; width: 34px; height: 34px;
    border-radius: 10px; background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-1);
  }

  .f-photo-l { left: max(8px, calc(50% - 500px)); top: 40px; width: 196px; height: 112px; }
  .f-photo-r { right: max(8px, calc(50% - 480px)); top: 32px; width: 206px; height: 124px; }
  .f-ref     { right: max(8px, calc(50% - 430px)); top: 250px; width: 236px; }
  .f-list    { left: max(8px, calc(50% - 460px)); top: 330px; width: 260px; }
  .f-methods { right: max(8px, calc(50% - 440px)); top: 520px; width: 252px; }

  .badge-ok {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--ok-soft); color: #027A48;
    font-size: 11px; font-weight: 500; border-radius: var(--r-pill); padding: 3px 10px;
  }
  .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
  .chip {
    font-size: 11px; font-weight: 500; color: var(--ink-2);
    border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: var(--surface);
  }
  .pay-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
  .pay-dot { width: 26px; height: 18px; border-radius: 4px; flex: none; }
  .pay-name { font-size: 12px; color: var(--ink); }
  .pay-sub { font-size: 10px; color: var(--ink-3); }
  .pay-amt { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ink); }

  /* ---------- Services band — full bleed, edge to edge ---------- */
  .band {
    width: 100%;
    background: var(--dark);
    padding: 88px 0; position: relative; overflow: hidden;
  }
  .band::after {
    content: ""; position: absolute; left: 50%; top: 0; width: 760px; height: 760px;
    transform: translate(-50%, -30%);
    background: radial-gradient(closest-side, rgba(162,36,131,.28), rgba(162,36,131,0) 70%);
    pointer-events: none;
  }
  .band h2 { text-align: center; color: #fff; font-size: clamp(28px, 3.6vw, 44px); position: relative; z-index: 2; }
  .band h2 .tone { color: rgba(255,255,255,.42); }

  /* Services band — six services, three across. No phone: the hero shows one. */
  .band-services {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 22px; margin-top: 56px; align-items: stretch;
  }

  .svc {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.14);
    border-radius: 18px; padding: 28px 28px 0; text-decoration: none;
    display: flex; flex-direction: column; gap: 12px;
    transition: border-color .18s ease, background .18s ease;
  }
  /* The link and the peeking phone share the card's last row: link left,
     phone right. The card carries no bottom padding, so the phone is cut
     exactly by the card's bottom edge and reads as creeping into it. */
  .svc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
  .svc-foot .go { padding-bottom: 28px; }
  .svc-peek {
    width: 150px; height: 96px; flex: none;
    overflow: hidden; display: flex; justify-content: center;
    pointer-events: none;
  }
  .svc-peek .mini {
    width: 150px; border-radius: 24px; padding: 7px; flex: none;
    background: linear-gradient(165deg, #46536B, #0B1220 62%);
    box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  /* This ratio must match the peek image or `object-fit: cover` zooms into it. The
     peeks are cropped to just the strip the peek reveals — 136x89 on screen, so
     272x178 at 2x — instead of shipping a whole 1280px screenshot to show 96px of
     it. Change the crop in scripts/optimize_assets.py and this has to change too. */
  .svc-peek .mini-screen {
    position: relative; border-radius: 17px; overflow: hidden;
    background: var(--surface-2); aspect-ratio: 272 / 240;
  }
  .svc-peek .mini-screen img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
  .svc-peek .mini-notch {
    position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 7px; border-radius: var(--r-pill);
    background: rgba(11,18,32,.85); z-index: 2;
  }
  .svc-peek .ph { font-size: 9px; gap: 3px; padding: 8px; justify-content: flex-start; padding-top: 26px; }
  .svc-peek .ph span { display: none; }
  .svc:hover { border-color: rgba(255,255,255,.32); background: rgba(255,255,255,.06); }
  .svc-ic {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    background: rgba(162,36,131,.3); color: #F2A8DA;
    display: flex; align-items: center; justify-content: center;
  }
  .svc h3 { color: #fff; font-weight: 500; font-size: 18px; letter-spacing: -.01em; }
  .svc p { color: rgba(255,255,255,.55); font-size: 14px; flex: 1; }
  .svc .go { color: #F2A8DA; font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; }

  /* ---------- Key benefits ---------- */
  .sec { padding: 96px 0; }
  .sec-head { text-align: center; max-width: 46em; margin: 0 auto 56px; }
  .sec-head h2 { font-size: clamp(28px, 3.6vw, 44px); }

  .ben-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
  .ben { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 30px; border: 1px solid var(--line); }
  .ben-vis {
    height: 156px; border-radius: 16px; background: var(--surface-2); margin-bottom: 24px;
    display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  }
  .ben h3 { font-size: 18px; margin-bottom: 8px; }
  .ben p { font-size: 14px; color: var(--ink-2); }

  /* Benefit vignettes — each one a small moment from the app itself. */
  .cb { position: relative; width: 100%; height: 100%; }
  .cb .coin {
    position: absolute; top: 50%; left: 26px; transform: translateY(-50%);
    width: 96px; height: 96px; border-radius: var(--r-pill);
    background: var(--surface); box-shadow: var(--sh-1), inset 0 0 0 5px var(--brand-100);
    display: flex; align-items: center; justify-content: center;
    font-size: 34px; font-weight: 500; color: var(--brand);
  }
  .cb .chip {
    position: absolute; right: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap;
    border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1);
    padding: 7px 12px; font-size: 12px; font-weight: 500; color: var(--ink);
  }
  .cb .chip i { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--brand); }
  .cb .chip b { font-weight: 500; color: var(--ok-ink); }
  .cb .chip-a { top: 28px; transform: rotate(-3deg); }
  .cb .chip-b { bottom: 28px; right: 26px; transform: rotate(3deg); background: var(--dark); color: #fff; }
  .cb .chip-b i { background: var(--brand-400); }
  .cb .chip-b b { color: #fff; }

  .wc { position: relative; width: 214px; height: 118px; }
  .wc .card {
    position: absolute; left: 0; right: 0; top: 0; bottom: 26px; border-radius: 16px; padding: 13px 14px;
    background: linear-gradient(140deg, var(--brand-400), var(--brand) 52%, var(--brand-600));
    color: #fff; box-shadow: var(--sh-2);
  }
  .wc .k { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
  .wc .v { font-size: 19px; font-weight: 500; letter-spacing: .08em; margin-top: 3px; }
  .wc .logo { position: absolute; top: 12px; right: 14px; font-size: 11px; font-weight: 600; }
  .wc .chips { position: absolute; left: 10px; right: 10px; bottom: 0; display: flex; gap: 8px; }
  .bank-chip {
    display: flex; align-items: center; gap: 7px; white-space: nowrap;
    border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--sh-1);
    padding: 8px 12px; font-size: 11px; font-weight: 500; color: var(--ink);
  }
  .bank-chip i { width: 14px; height: 14px; border-radius: 4px; background: var(--brand-100); }

  .wd { width: 184px; border-radius: 16px; background: var(--surface); box-shadow: var(--sh-1); padding: 14px; }
  .wd .dot-ok {
    width: 30px; height: 30px; border-radius: var(--r-pill); background: var(--ok);
    color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
  }
  .wd .t { font-size: 12px; font-weight: 500; color: var(--ink); }
  .wd .sub { font-size: 13px; font-weight: 500; color: var(--ink); margin-top: 4px; }
  .wd .sub span { color: var(--ink-3); font-weight: 400; }
  .wd .fast {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
    border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok-ink);
    padding: 4px 9px; font-size: 10px; font-weight: 500;
  }

  .mini-list { width: 100%; max-width: 262px; background: var(--surface); border-radius: 14px; box-shadow: var(--sh-1); padding: 14px; }
  .mini-list .h { font-size: 11px; color: var(--ink-3); margin-bottom: 6px; }

  .tilt {
    position: relative;
    width: 100%; max-width: 330px; aspect-ratio: 4/3; border-radius: 14px; overflow: hidden;
    background: var(--surface-2); transform: perspective(900px) rotateY(-14deg) rotateX(6deg) rotate(3deg);
    box-shadow: var(--sh-2);
  }
  .tilt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

  .swap-badge {
    position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
    width: 40px; height: 40px; border-radius: 12px; background: var(--brand);
    color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-1);
  }

  /* ---------- Reviews ---------- */
  .reviews-wrap { padding: 0 32px 96px; }
  .reviews {
    max-width: 1180px; margin: 0 auto; background: var(--bg-page);
    border-radius: var(--r-band); padding: 64px 40px 72px;
  }
  .rev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 12px; }
  .rev-head h2 { font-size: clamp(26px, 3.2vw, 40px); }
  .arrows { display: flex; gap: 10px; }
  .arrow {
    width: 44px; height: 44px; border-radius: var(--r-pill); border: 1px solid var(--line);
    background: var(--surface); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
  }
  .arrow.solid { background: var(--brand); border-color: var(--brand); color: #fff; }

  /* Reviews ride a paged rail: three cards wide on desktop, swipeable everywhere,
     with the header arrows stepping it. Explicit template columns would win over
     the implicit ones and break the rail, so the width lives in grid-auto-columns. */
  .rev-grid {
    display: grid; grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: calc((100% - 44px) / 3);
    gap: 22px; align-items: start;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; scroll-behavior: smooth;
    scrollbar-width: none;
  }
  .rev-grid::-webkit-scrollbar { display: none; }
  .rev {
    background: var(--surface); border-radius: var(--r-card); box-shadow: var(--sh-1); padding: 26px;
    scroll-snap-align: start;
  }
  .rev:nth-child(even) { margin-top: 18px; }
  .arrow:disabled { opacity: .4; cursor: default; }
  .rev-stars { display: flex; gap: 4px; margin-bottom: 16px; }
  .rev p { font-size: 13.5px; color: var(--ink-2); }
  .rev-who { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
  .av {
    width: 40px; height: 40px; border-radius: var(--r-pill); flex: none;
    background: var(--surface-3); color: var(--ink-3); font-size: 12px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .nm { font-size: 13px; font-weight: 500; color: var(--ink); }
  .rl { font-size: 11px; color: var(--ink-3); }

  /* ---------- Safety ---------- */
  .safe { display: grid; grid-template-columns: 1fr 1.05fr; gap: 64px; align-items: center; }
  .safe-media { position: relative; }
  /* Crop of hero.png holding just the three home actions and the three recent
     transactions, so the box takes the shot's own ratio and nothing gets covered. */
  .safe-media .photo { aspect-ratio: 1242 / 866; height: auto; border-radius: 20px; }
  .safe-badge {
    position: absolute; right: -16px; top: -16px; background: var(--surface); border-radius: 14px;
    box-shadow: var(--sh-2); padding: 10px 14px; display: flex; align-items: center; gap: 10px;
  }
  .safe h2 { font-size: clamp(28px, 3.6vw, 42px); margin-bottom: 14px; }
  .safe p { font-size: 15px; color: var(--ink-2); max-width: 34em; }

  /* ---------- CTA band ---------- */
  .cta-wrap { padding: 0 32px; }
  .cta {
    max-width: 1180px; margin: 0 auto;
    background: linear-gradient(112deg, var(--brand-600), var(--brand) 48%, var(--brand-400));
    border-radius: var(--r-band); padding: 64px 56px 0;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 32px; align-items: center;
    position: relative; overflow: hidden;
  }
  .cta .eyebrow { color: rgba(255,255,255,.82); font-size: 14px; margin-bottom: 12px; }
  .cta h2 { color: #fff; font-size: clamp(28px, 3.4vw, 42px); margin-bottom: 28px; }
  .cta .watermark {
    position: absolute; left: 8%; bottom: -18%; font-size: 190px; font-weight: 600;
    color: rgba(255,255,255,.07); line-height: 1; pointer-events: none;
  }
  .cta-visual { position: relative; display: flex; justify-content: center; }
  /* Same treatment as the hero phone: 2x, clipped to two thirds, the cut edge
     flush with the bottom of the card so it rests on the next section. */
  .cta-phone-clip { height: 513px; overflow: hidden; }
  .cta-visual .phone-frame { width: 420px; border-radius: 66px; padding: 13px; }
  .cta-visual .phone-screen { border-radius: 53px; aspect-ratio: 9 / 17; }
  .cta-visual .phone-notch { top: 14px; width: 120px; height: 17px; }
  .cta-visual .ph { font-size: 13px; }

  /* ---------- Blog (/blog, WordPress) ---------- */
  /* These live here rather than in the WordPress theme on purpose: the theme
     ships no CSS, so a style added there would be invisible to every other page
     and the blog would start drifting from the site it mirrors. */
  .page-hero--plain { padding: 32px 0 72px; }
  .blog { padding: 8px 0 88px; }
  /* CSS multi-column masonry, the decided approach — no JS, no library. Reading
     order runs down each column rather than across, which suits a blog. */
  .blog-grid { columns: 3; column-gap: 24px; }
  .post-card {
    /* Stops a card being sliced across two columns. */
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    background: var(--surface); border: 1px solid var(--line); border-radius: 20px;
    overflow: hidden; margin-bottom: 24px; display: block;
  }
  .post-card:hover { border-color: var(--line-strong); }
  .post-card .thumb { background: var(--surface-3); border-bottom: 1px solid var(--line); }
  .post-card .thumb img { width: 100%; height: auto; display: block; }
  .post-card .body { padding: 20px 22px 22px; }
  .post-card .cat {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--brand); margin-bottom: 12px;
  }
  .post-card h2 { font-size: 18px; line-height: 1.35; letter-spacing: -.01em; margin-bottom: 12px; }
  .post-card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); }
  .post-card .meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 12px; color: var(--ink-3); }
  .post-card .meta i { font-style: normal; color: var(--line-strong); }
  .blog-more { display: flex; justify-content: center; margin-top: 40px; }
  .blog-more button { font-family: inherit; cursor: pointer; }
  .blog-more button[disabled] { opacity: .6; cursor: default; }

  /* ---------- Comparison table (home) ---------- */
  .cmp-sec { padding: 88px 0; background: var(--bg); }
  .cmp-head { text-align: center; max-width: 46em; margin: 0 auto 44px; }
  .cmp-head h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 14px; }
  .cmp-head p { color: var(--ink-2); }
  /* The table has six columns, so on a phone it scrolls sideways rather than
     collapsing — a stacked table loses the whole point, which is reading across. */
  .cmp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.cmp {
    width: 100%; min-width: 820px; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: var(--surface);
  }
  .cmp th, .cmp td { text-align: left; padding: 18px 20px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: top; }
  .cmp thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
  .cmp tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
  .cmp td { color: var(--ink-2); }
  .cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
  /* Our column carries the brand tint, so the eye lands on it first. */
  .cmp .ours { background: var(--brand-50); color: var(--ink); }
  .cmp thead .ours { color: var(--brand); }

  /* ---------- Footer ---------- */
  /* Four columns: brand and live support, then three link columns grouped by
     product. Theme-aware — a light panel on a light page, dark on a dark one —
     and driven entirely by the existing semantic tokens, so it stays in step with
     the rest of the theme rather than carrying fixed colours that would have to
     be kept in sync by hand. */
  .foot { background: var(--bg-page); color: var(--ink-2); padding: 76px 0 30px; }
  .foot-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.15fr; gap: 52px; }
  .foot-brand img { height: 24px; margin-bottom: 20px; }
  .foot-brand p { font-size: 13.5px; line-height: 1.7; color: var(--ink-2); max-width: 30em; }
  .foot-support { margin-top: 26px; }
  .foot-support b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; margin-bottom: 14px; }
  .foot-chan { display: flex; align-items: center; gap: 11px; margin-bottom: 13px; font-size: 13.5px; }
  .foot-chan i {
    width: 28px; height: 28px; border-radius: 999px; flex: none;
    background: var(--surface-3); color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    font-style: normal; font-size: 12px;
  }
  .foot h4 { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); font-weight: 700; margin-bottom: 20px; }
  .foot li { margin-bottom: 12px; }
  .foot a { font-size: 14px; color: var(--ink-2); }
  .foot a:hover { color: var(--brand); }
  .foot-base {
    display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
    margin-top: 58px; padding-top: 26px; border-top: 1px solid var(--line);
    font-size: 13px; color: var(--ink-2);
  }
  .foot-base a { font-size: 13px; color: var(--ink-2); }
  .foot-base a:hover { color: var(--brand); }
  .foot-social { display: flex; gap: 16px; margin-left: auto; }
  /* Outline only, so the app link reads as secondary against the legal row. */
  .pill-ghost {
    border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--r-pill);
    padding: 12px 26px; font-size: 14px; font-weight: 500; display: inline-flex; align-items: center;
  }
  .pill-ghost:hover { border-color: var(--ink-3); }

  /* ---------- Sticky mobile CTA ---------- */
  .sticky {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; display: none;
    transition: opacity .22s ease, transform .22s ease;
  }
  .sticky .pill { width: 100%; justify-content: center; box-shadow: var(--sh-2); }
  /* The CTA band carries its own "Get the app" button, so the fixed bar steps aside
     there rather than stacking a second, misaligned one on top of the card. */
  .sticky.is-aside { opacity: 0; transform: translateY(12px); pointer-events: none; }

  /* ---------- Responsive ---------- */
  /* The floating cards are part of the hero composition, so on narrow screens they
     shrink and tuck around the phone instead of disappearing. Scaling is anchored to
     the edge each card sits on, so a shrink never walks a card inward off its edge. */
  .f-photo-l, .f-list { transform-origin: top left; }
  .f-photo-r, .f-ref, .f-methods { transform-origin: top right; }

  @media (max-width: 1160px) {
    .fl { transform: scale(.72); }
  }
  @media (max-width: 960px) {
    .fl { transform: scale(.58); }
  }
  @media (max-width: 760px) {
    .fl { transform: scale(.48); }
  }
  @media (max-width: 960px) {
    .nav-links, .nav-actions { display: none; }
    /* Keep the toggle reachable once the pills collapse, parked with the burger. */
    .theme-toggle { margin-left: auto; }
    .nav-burger { display: block; margin-left: 8px; }
    .band-services { grid-template-columns: 1fr; gap: 18px; }
    .ben-top, .safe, .cta { grid-template-columns: 1fr; }
    /* One card and a peek of the next, so the rail reads as swipeable. */
    .rev-grid { grid-auto-columns: 82%; }
    .rev:nth-child(even) { margin-top: 0; }
    .cta-visual { display: none; }
    .wrap, .reviews-wrap, .cta-wrap { padding-left: 20px; padding-right: 20px; }
    .band { padding-top: 64px; padding-bottom: 64px; }
    /* The card's bottom padding is 0 so the desktop phone graphic can run off the
       edge. With .cta-visual hidden here the button becomes the last element, so it
       needs its own clearance or it lands on the edge and crosses the corner radius. */
    .cta { padding-left: 26px; padding-right: 26px; padding-bottom: 48px; border-radius: 24px; }
    .reviews { padding-left: 26px; padding-right: 26px; border-radius: 24px; }
    .sec { padding: 64px 0; }
    /* Brand takes the full width; the three link columns sit two-up under it. */
    .foot-top { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
    .foot-brand { grid-column: 1 / -1; }
    .blog-grid { columns: 2; }
  }
  @media (max-width: 620px) {
    .hero h1 { font-size: 30px; }
    .phone-clip { height: 351px; }
    /* Only ~46px of gutter either side of the 258px phone, so the cards hug the
       phone's edges and overlap it the way the reference does at full size. The tops
       keep the status bar, the greeting and the action labels clear. */
    .fl { transform: scale(.45); }
    .f-photo-l { left: 0; top: 62px; }
    .f-photo-r { right: 0; top: 44px; }
    .f-list    { left: 0; top: 132px; }
    .f-ref     { right: 0; top: 196px; }
    .f-methods { right: 2px; top: 268px; }
    .hero-stage .phone-frame { width: 258px; border-radius: 40px; padding: 8px; }
    .hero-stage .phone-screen { border-radius: 32px; }
    .hero-stage .phone-notch { top: 9px; width: 73px; height: 11px; }
    .hero-stage .ph { font-size: 12px; }
    .hero-stage .ph span { font-size: 10px; }
    .hero-stage { margin-top: 36px; padding-bottom: 0; }
    .sticky { display: block; left: 20px; right: 20px; }
    body { padding-bottom: 84px; }
    .reviews-wrap { padding-bottom: 64px; }
    /* Three link columns don't fit a phone; two up, one down. */
    .foot-top { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
    .foot-base { gap: 16px; }
    .foot-social { margin-left: 0; }
    /* Blog: three columns of cards are unreadable on a phone. */
    .blog-grid { columns: 1; }
    .page-hero--plain { padding: 20px 0 48px; }
  }

  /* ============================================================
     Dark theme. Toggled by data-theme on <html>; the head script
     applies the stored choice (or the OS preference) before paint.
     Only tokens change, plus the few surfaces that carry an
     explicit colour instead of a token.
     ============================================================ */
  html[data-theme="dark"] {
    --brand:      #C4359C;
    --brand-600:  #A22483;
    --brand-400:  #D14FAE;
    --brand-100:  #3A1430;
    --brand-50:   #2A0F23;

    --ink:        #F4F6FA;
    --ink-2:      #AEB7C6;
    --ink-3:      #78829A;

    --line:       #232C3D;
    --line-strong:#333E52;
    --bg:         #0B0F17;
    --bg-page:    #070B12;
    --surface:    #131A26;
    --surface-2:  #1B2331;
    --surface-3:  #232C3D;
    --nav-bg:     #131A26;
    --ph-a:       #161E2B;
    --ph-b:       #1B2331;

    --dark:       #05080E;
    --dark-2:     #101725;

    --ok:         #35C77E;
    --ok-soft:    #10321F;
    --ok-ink:     #35C77E;
    --hl-giftcards: #F0A44E;

    --sh-1: 0 4px 16px rgba(0,0,0,.45);
    --sh-2: 0 12px 40px rgba(0,0,0,.55);
    --sh-3: 0 24px 70px rgba(0,0,0,.65);
  }
  /* The page is dark in dark mode, so a near-black band would sit within a few
     points of the sections either side of it. Lift it into its own panel tone
     instead of deepening it — deepening has nowhere left to go. */
  html[data-theme="dark"] .band { background: #18202E; }
  html[data-theme="dark"] .band::after { background: radial-gradient(closest-side, rgba(196,53,156,.22), rgba(196,53,156,0) 70%); }
  /* On a dark page the black device bezels and card art need lifting. */
  html[data-theme="dark"] .phone-frame,
  html[data-theme="dark"] .svc-peek .mini { background: linear-gradient(165deg, #44506A, #0E1526 62%); }
  html[data-theme="dark"] .svc { background: rgba(255,255,255,.04); }
  html[data-theme="dark"] .svc-peek .mini-notch,
  html[data-theme="dark"] .phone-notch { background: rgba(6,9,15,.9); }
  html[data-theme="dark"] .badge-ok { color: #7CE3AC; }
  /* The near-black cashback chip has nothing to sit against on a dark plate. */
  html[data-theme="dark"] .cb .chip-b { background: linear-gradient(140deg, var(--brand-400), var(--brand)); }
  html[data-theme="dark"] .brand-glow { background: radial-gradient(closest-side, rgba(196,53,156,.18), rgba(196,53,156,0) 70%); }
  html[data-theme="dark"] .hero-stage::before { background: radial-gradient(closest-side, rgba(196,53,156,.20), rgba(196,53,156,0) 70%); }

  /* ---------- Theme toggle ---------- */
  .theme-toggle {
    width: 38px; height: 38px; flex: none; margin-left: 10px;
    border-radius: var(--r-pill); border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
  }
  .theme-toggle:hover { border-color: var(--ink-3); }
  .theme-toggle .ic-moon { display: none; }
  html[data-theme="dark"] .theme-toggle .ic-sun { display: none; }
  html[data-theme="dark"] .theme-toggle .ic-moon { display: block; }

  /* ---------- Logo: one asset per theme ---------- */
  .lg-dark { display: none; }
  html[data-theme="dark"] .lg-light { display: none; }
  html[data-theme="dark"] .lg-dark { display: block; }

  /* ============================================================
     Inner pages — service, support, company and legal. Everything
     below is shared by the pages under this directory; the home
     page keeps its own sections above.
     ============================================================ */

  /* ---------- Page hero ---------- */
  /* padding-bottom is 0 and overflow is hidden on purpose: the phone in the split
     hero hangs past the bottom edge and the hero does the cutting, the same way
     .hero cuts its centred phone. The text column carries its own bottom space. */
  .page-hero { background: var(--bg-page); padding: 32px 0 0; overflow: hidden; }
  .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); margin-bottom: 28px; }
  .crumbs a { color: var(--ink-3); text-decoration: none; }
  .crumbs a:hover { color: var(--brand); }
  .crumbs span[aria-hidden] { color: var(--line-strong); }
  .eyebrow { font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
  .page-hero h1 { font-size: clamp(32px, 5vw, 54px); margin-bottom: 18px; }
  .page-hero .lede { font-size: clamp(16px, 1.6vw, 18px); color: var(--ink-2); max-width: 46em; }
  .page-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

  /* ---------- Split hero: copy left, phone right ---------- */
  /* A definite height, not min-height. The phone is cut by the hero's bottom edge,
     so its position is derived from that edge — if the text could make the row
     taller, the phone would move with it. Fixing the height makes the phone's
     placement independent of how long any page's copy happens to be. */
  .hero-split { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: start; height: 470px; }
  /* Both columns hang from the same line, so the phone sits level with the copy
     rather than centred against it. Deliberately NOT .hero-copy — that name is
     already the homepage's, defined as `text-align: center; margin: 0 auto`, so
     reusing it silently centres this text. */
  .hero-split > .hero-text { padding-top: 44px; text-align: left; }
  .hero-art { padding-top: 44px; display: flex; justify-content: center; }
  /* The phone runs past the hero's bottom edge and the hero's overflow cuts it.
     Visible height is (470 - 44) = 426, so the overhang is the frame's own height
     minus that: the frame is width-driven (372px wide, screen 9/19, plus 12px
     padding) = 759px, and 759 - 426 = 333. Change the width and this moves too. */
  .hero-art .phone-frame { width: 372px; border-radius: 58px; padding: 12px; margin-bottom: -333px; }
  .hero-art .phone-screen { border-radius: 47px; }
  .hero-art .phone-notch { top: 12px; width: 112px; height: 16px; }

  /* ---------- Long-form copy ---------- */
  .prose { padding: 72px 0; }
  /* A middle setting between the old `46em` cap (which broke every paragraph early
     and left a ragged right edge) and the full container width (which ran to ~100
     characters a line). 72ch measures 763px here, against the 713px the cap gave
     and the 1116px the container gives, so lines fill the width on a normal page
     and only stop growing on a very wide one. */
  .prose > .wrap > * { max-width: 72ch; }
  .prose h2 { font-size: clamp(23px, 2.6vw, 32px); margin: 56px 0 16px; }
  .prose h2:first-child { margin-top: 0; }
  .prose h3 { font-size: 17px; margin: 32px 0 8px; }
  .prose p { font-size: 15.5px; line-height: 1.78; color: var(--ink-2); margin-bottom: 14px; }
  .prose strong { color: var(--ink); font-weight: 500; }
  .prose a { color: var(--brand); }
  /* Plain bullet lists inside prose. Scoped with :not() so the shared block does
     not reach the .steps and .ticks components, which draw their own markers. */
  .prose ul:not(.ticks) { list-style: none; margin: 0 0 18px; }
  .prose ul:not(.ticks) li { position: relative; padding-left: 22px; margin-bottom: 9px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
  .prose ul:not(.ticks) li::before {
    content: ""; position: absolute; left: 4px; top: .68em;
    width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--brand);
  }
  .prose ol:not(.steps) { list-style: none; counter-reset: prose; margin: 0 0 18px; }
  .prose ol:not(.steps) li { counter-increment: prose; position: relative; padding-left: 30px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
  .prose ol:not(.steps) li::before {
    content: counter(prose); position: absolute; left: 0; top: .1em;
    width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--brand-50);
    color: var(--brand); font-size: 11px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
  }
  .note { font-size: 13px; color: var(--ink-3); margin-top: 14px; }
  .callout {
    background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 22px 26px; margin: 24px 0;
  }
  .callout p:last-child { margin-bottom: 0; }

  /* ---------- Rate / plan grid ---------- */
  /* Kept in the `.prose > .wrap > X` form for consistency with the other component
     rules below. The `max-width: none` is now belt-and-braces — the blanket rule
     above no longer caps anything — but harmless and explicit. */
  .prose > .wrap > .rate-grid,
  .rate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; margin: 26px 0; max-width: none; }
  .rate-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    padding: 22px; box-shadow: var(--sh-1);
  }
  .rate-card h3 { font-size: 15px; margin: 0 0 6px; }
  .rate-card .rate { font-size: 30px; font-weight: 500; color: var(--brand); letter-spacing: -.01em; }
  .rate-card .rl { font-size: 12px; }

  /* ---------- Steps ---------- */
  .prose > .wrap > .steps,
  .steps { list-style: none; counter-reset: step; margin: 26px 0; max-width: none; display: grid; gap: 20px; }
  .steps li { counter-increment: step; display: flex; gap: 16px; align-items: flex-start; }
  .steps li::before {
    content: counter(step); flex: none;
    width: 34px; height: 34px; border-radius: var(--r-pill);
    background: var(--brand); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 500;
  }
  .steps h3 { font-size: 16px; margin: 3px 0 4px; }
  .steps p { margin: 0; font-size: 15px; }

  /* ---------- Checklist ---------- */
  .prose > .wrap > .ticks,
  .ticks { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px 28px; margin: 24px 0; max-width: none; }
  .ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
  .ticks svg { flex: none; margin-top: 3px; color: var(--brand); }
  .ticks strong { color: var(--ink); font-weight: 500; }

  /* ---------- FAQ ---------- */
  .prose > .wrap > .faq,
  .faq { margin: 24px 0; max-width: none; }
  .faq details { border-bottom: 1px solid var(--line); }
  .faq summary {
    cursor: pointer; list-style: none; padding: 20px 0;
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    font-size: 16px; font-weight: 500; color: var(--ink);
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after {
    content: "+"; flex: none; font-size: 22px; font-weight: 400; color: var(--brand); line-height: 1;
  }
  .faq details[open] summary::after { content: "\2212"; }
  .faq p { font-size: 15px; padding: 0 0 20px; margin: 0; max-width: 72ch; }

  /* ---------- Related services ---------- */
  .prose > .wrap > .related,
  .related { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 34px; max-width: none; }
  .related-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
    padding: 26px; box-shadow: var(--sh-1); text-decoration: none; display: block;
  }
  .related-card:hover { border-color: var(--brand-100); }
  .related-card h3 { font-size: 17px; margin-bottom: 8px; }
  .related-card p { font-size: 14px; color: var(--ink-2); margin-bottom: 14px; }
  .related-card span { font-size: 14px; font-weight: 500; color: var(--brand); }

  /* ---------- Simple CTA band (no phone art) ---------- */
  .cta-simple {
    background: linear-gradient(112deg, var(--brand-600), var(--brand) 48%, var(--brand-400));
    border-radius: var(--r-band); padding: 56px 48px; text-align: center;
    position: relative; overflow: hidden;
  }
  .cta-simple h2 { color: #fff; font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 14px; }
  .cta-simple p { color: rgba(255,255,255,.85); font-size: 16px; max-width: 38em; margin: 0 auto 28px; }
  .cta-simple .watermark {
    position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
    font-size: 170px; font-weight: 600; color: rgba(255,255,255,.07);
    line-height: 1; pointer-events: none; white-space: nowrap;
  }
  .cta-simple > * { position: relative; z-index: 2; }

  /* ---------- Inner-page responsive ---------- */
  @media (max-width: 960px) {
    /* Stacked: phone above the copy, and a shallower overhang so it does not eat
       the section below on a short screen. */
    .hero-split { grid-template-columns: 1fr; gap: 0; height: auto; }
    .hero-split > .hero-text { padding: 0 0 44px; order: 2; }
    .hero-art { order: 1; }
    .hero-art .phone-frame { width: 268px; border-radius: 42px; padding: 10px; margin-bottom: -40px; }
    .hero-art .phone-screen { border-radius: 33px; }
    .hero-art .phone-notch { top: 9px; width: 76px; height: 11px; }
    .page-hero { padding: 20px 0 0; }
    .prose { padding: 56px 0; }
    .cta-simple { padding: 44px 26px; border-radius: 24px; }
  }
  /* A media query adds no specificity, so these have to match the
     `.prose > .wrap > X` form of the base rules above or they lose to them. */
  @media (max-width: 620px) {
    .prose > .wrap > .ticks, .prose > .wrap > .related { grid-template-columns: 1fr; }
    /* Rate cards are three short lines, so two-up still reads; one-up made four
       numbers four screens tall. */
    .prose > .wrap > .rate-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .rate-card { padding: 16px 18px; border-radius: 16px; }
    .rate-card .rate { font-size: 25px; }
    .cta-simple { padding: 40px 22px; }
    .cta-simple .watermark { font-size: 110px; }
  }

  /* ---------- Mobile menu panel ---------- */
  .nav-menu {
    display: none; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
    box-shadow: var(--sh-3); padding: 10px 8px;
  }
  .nav-menu.is-open { display: block; z-index: 60; }
  .nav-menu .menu-list, .nav-menu .menu-actions { display: block; }
  .nav-menu a {
    display: block; padding: 13px 16px; border-radius: 14px;
    font-size: 15px; color: var(--ink); text-decoration: none;
  }
  .nav-menu a:hover { background: var(--surface-2); }
  .nav-menu .menu-actions { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
  .nav-menu .menu-actions .pill { display: flex; justify-content: center; margin: 6px 16px; }
  @media (min-width: 961px) { .nav-menu { display: none !important; } }

  /* ---------- Info cards (providers, and anything with a short sub-list) ---------- */
  .prose > .wrap > .info-grid,
  .info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin: 26px 0; max-width: none; }
  .info-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
    padding: 24px 26px; box-shadow: var(--sh-1);
  }
  .info-card h3 { margin: 0 0 6px; }
  .info-card > p { font-size: 14px; color: var(--ink-3); margin-bottom: 14px; }
  .info-card ul { list-style: none; margin: 0; }
  .info-card ul li {
    position: relative; padding-left: 18px; margin-bottom: 7px;
    font-size: 14.5px; color: var(--ink-2); line-height: 1.6;
  }
  .info-card ul li::before {
    content: ""; position: absolute; left: 2px; top: .62em;
    width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--brand);
  }
  @media (max-width: 620px) { .prose > .wrap > .info-grid { grid-template-columns: 1fr; } }

  /* ---------- Stats bar ---------- */
  .prose > .wrap > .stats,
  .stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px; margin: 26px 0; max-width: none;
  }
  .stat {
    background: var(--surface-2); border-radius: var(--r-card); padding: 26px 28px;
    border: 1px solid var(--line);
  }
  .stat .v { font-size: clamp(28px, 3vw, 38px); font-weight: 500; color: var(--brand); letter-spacing: -.01em; }
  .stat .k { font-size: 14px; color: var(--ink-2); margin-top: 4px; }

  /* ---------- Team ---------- */
  .person { display: flex; align-items: center; gap: 14px; }
  .person .ini {
    width: 46px; height: 46px; flex: none; border-radius: var(--r-pill);
    background: var(--brand-50); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 500;
  }
  .person .nm { font-size: 15px; }
  .person .rl { font-size: 13px; }

  /* ---------- Hours ---------- */
  .hours { margin: 24px 0; max-width: none; border-top: 1px solid var(--line); }
  .hours div {
    display: flex; justify-content: space-between; gap: 20px;
    padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15px;
  }
  .hours div span:first-child { color: var(--ink); }
  .hours div span:last-child { color: var(--ink-2); }

  /* ---------- Forms ---------- */
  .form { margin-top: 26px; max-width: 620px; }
  .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
  .field label { font-size: 13.5px; font-weight: 500; color: var(--ink); }
  .field input, .field select, .field textarea {
    font-family: inherit; font-size: 15px; color: var(--ink);
    background: var(--surface); border: 1px solid var(--line);
    border-radius: 14px; padding: 13px 16px; width: 100%;
  }
  .field textarea { min-height: 150px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--brand);
  }
  .field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
  @media (max-width: 620px) {
    .form-row { grid-template-columns: 1fr; gap: 0; }
  }

  /* Honeypot for the contact form — off-canvas, never focusable. */
  .honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
  .sent-note { color: var(--ok-ink); }

  /* Contact form outcome notes. */
  .error-note { color: var(--brand); }
  .error-note a { text-decoration: underline; }

  /* Spec lines inside a rate card — used where a rate alone isn't the whole story
     (per-transfer limits, how the network is collected). */
  .rate-card .card-specs { list-style: none; margin: 14px 0 0; padding-top: 13px; border-top: 1px solid var(--line); }
  .rate-card .card-specs li {
    position: relative; padding-left: 15px; margin-bottom: 6px;
    font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  }
  .rate-card .card-specs li:last-child { margin-bottom: 0; }
  .rate-card .card-specs li::before {
    content: ""; position: absolute; left: 2px; top: .58em;
    width: 4px; height: 4px; border-radius: var(--r-pill); background: var(--brand);
  }