/* ═══════════════════════════════════════════════════════════════════════════
   NILFPAY.COM — the marketing site's shared sheet.

   /start (the campaign funnel) does NOT use this file: that page inlines
   everything on purpose and must keep working in any in-app WebView untouched.

   The system is the funnel's, turned up: every page opens on the same
   near-black STAGE with one lit object or one oversized statement on it, then
   drops over a single hard magenta hairline onto PAPER. ONE saturated colour —
   the brand magenta — and it belongs to the primary CTA, the stage's hairline
   edge, and nothing else that competes with either. Emphasis elsewhere is done
   with size and value, not hue.

   SPACING SCALE — the only vertical values used here are
       4  8  12  16  20  26  32  44  56  72  96
   plus 1px hairlines. If a gap wants 13 or 18, the gap is wrong.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Paper (light scheme) ── */
  --bg:#f8f6f8;
  --ink:#161318;
  --ink-2:#5a545e;
  --line:#e4dfe6;
  --accent:#A02468;       /* links + quiet emphasis: 6.4:1 on paper */

  /* ── The brand CTA ── */
  --brand:#C02A7E;
  --brand-hi:#D94A97;
  --brand-ink:#ffffff;    /* white on magenta — 5.1:1 */

  /* ── Stage constants (NOT theme-driven — it is a stage, not a panel) ── */
  --d-bg:#0a0a0c;
  --d-ink:#f4f2f4;
  --d-dim:#a39ca6;
  --d-line:#241f26;
  --d-line-2:#4a424e;

  /* ── The listing card / the receipt. Always light: lit objects. ── */
  --c-bg:#fcfcf9;
  --c-ink:#14170e;
  --c-ink-2:#575d4c;
  --c-ink-3:#5f6552;
  --c-line:#e2e5d8;
  --c-bar:#eef0e6;
  --c-skel:#e8eade;   /* skeleton blocks: the card with its words taken out */
  --c-olive:#A02468;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#151219;
    --ink:#f0eef1;
    --ink-2:#a9a2ad;
    --line:#2a2431;
    --accent:#D94A97;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.5;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* One measure, one gutter — identical to the funnel. */
.frame{max-width:560px;margin:0 auto;padding:0 20px}
@media (min-width:720px){.frame{padding:0 32px}}
@media (min-width:940px){.frame{max-width:1120px}}

/* ══ THE STAGE ═════════════════════════════════════════════════════════════
   Every page opens here. Closed by the single hard magenta hairline. */
.deck{
  position:relative;
  background:var(--d-bg);color:var(--d-ink);overflow:hidden;
  box-shadow:inset 0 -1px 0 rgba(192,42,126,.5);
}
/* No corner-clipped paint: half a starburst shoved against the wordmark read
   as a blob. The splash appears WHOLE — behind the hero card (.spot::after)
   and beside the inner-page headers (.stagehead::after). */
.deck>.frame{position:relative;z-index:1}
.deck ::selection{background:rgba(192,42,126,.4)}
.deck :focus-visible{outline:3px solid var(--brand-hi)}

/* ── Nav: always on the stage. ── */
.nav{display:flex;align-items:center;gap:20px;padding:20px 0;min-height:44px}
.nav .mark{display:flex;flex:none;align-items:center}
.nav .mark img{height:48px;width:auto;display:block}
@media (min-width:940px){.nav .mark img{height:60px}}
.nav .links{display:none;align-items:center;gap:20px;margin-left:auto}
.nav .links a{font-size:.9375rem;font-weight:600;color:var(--d-dim);text-decoration:none;padding:8px 0}
.nav .links a:hover{color:var(--d-ink)}
.nav .links a[aria-current=page]{color:var(--d-ink);box-shadow:0 2px 0 var(--brand)}
.nav .in{
  margin-left:auto;flex:none;display:inline-flex;align-items:center;min-height:44px;
  padding:8px 16px;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--d-line-2);
  font-size:.9375rem;font-weight:700;color:var(--d-ink);text-decoration:none;
}
.nav .in:hover{box-shadow:inset 0 0 0 1.5px var(--d-dim)}
@media (min-width:720px){
  .nav .links{display:flex}
  .nav .in{margin-left:0}
}

/* ── Mobile menu: below 720px the inline links are hidden, so the pages carry a
   hamburger opening a small drawer. <details>, no JS — the same primitive as the
   FAQ accordions, and it closes itself on navigation. Hidden on desktop. ── */
.mnav{position:relative;display:block;flex:none}
.mnav summary{
  list-style:none;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:10px;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px var(--d-line-2);color:var(--d-ink);
}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{box-shadow:inset 0 0 0 1.5px var(--d-dim)}
.mnav .sheet{
  position:absolute;right:0;top:calc(100% + 10px);z-index:50;min-width:230px;
  padding:8px;border-radius:14px;background:var(--d-bg);
  box-shadow:0 0 0 1.5px var(--d-line-2),0 24px 48px -18px rgba(0,0,0,.8);
}
.mnav .sheet a{
  display:block;padding:12px 16px;border-radius:9px;
  font-size:1rem;font-weight:600;color:var(--d-ink);text-decoration:none;
}
.mnav .sheet a:hover{background:rgba(255,255,255,.06)}
@media (min-width:720px){.mnav{display:none}}

/* ── Homepage hero ── */
.hero{padding:44px 0 56px}
.hero h1{
  font-size:clamp(2.625rem,11.5vw,6rem);
  line-height:.93;letter-spacing:-.045em;font-weight:800;text-wrap:balance;
}
/* The one word that earns colour. Gradient ink where the browser can clip a
   background to glyphs; solid brand-high where it can't. */
.hero h1 em{font-style:normal;color:var(--brand-hi)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero h1 em{
    background:linear-gradient(92deg,#E1619F 0%,#C02A7E 78%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}
.hero .sub{
  margin-top:20px;font-size:1.125rem;line-height:1.5;color:var(--d-dim);
  max-width:28rem;text-wrap:pretty;
}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;max-width:30rem}
/* Filled in from /api/shop-count and hidden until it has a real number — see the script
   at the bottom of index.html. [hidden] needs saying because nothing else here is block. */
.proofline{
  margin-top:20px;max-width:30rem;font-size:.9375rem;line-height:1.5;
  color:var(--d-dim);text-wrap:pretty;
}
.proofline[hidden]{display:none}
.proofline b{color:var(--d-ink);font-weight:750;font-variant-numeric:tabular-nums}
.deck .proofline .qlink{color:var(--brand-hi)}
.hero .steps{margin-top:44px;border-top:1px solid var(--d-line);max-width:30rem}
.hero .steps li{
  display:flex;gap:12px;align-items:baseline;min-width:0;
  padding:12px 0;border-bottom:1px solid var(--d-line);
}
.hero .steps b{
  flex:none;width:16px;font-size:.75rem;font-weight:800;color:var(--d-dim);
  font-variant-numeric:tabular-nums;
}
.hero .steps span{min-width:0;font-size:1rem;line-height:1.45;color:var(--d-ink);text-wrap:pretty}
@media (min-width:940px){
  .hero{
    display:grid;grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
    column-gap:clamp(44px,5.6vw,72px);align-items:center;padding:56px 0 72px;
  }
}

/* ── Inner-page stage header ── */
.stagehead{position:relative;padding:44px 0 56px}
.stagehead>*{position:relative;z-index:1}
/* The whole starburst, floating in the header's empty right side. Only when
   there IS an empty right side — on a phone it would sit on the headline. */
@media (min-width:720px){
  .stagehead::after{
    content:"";position:absolute;z-index:0;pointer-events:none;
    right:-4%;top:50%;width:min(34vw,340px);aspect-ratio:464/458;
    transform:translateY(-50%);
    background:url(/splat.svg) no-repeat center/contain;
    opacity:.95;
  }
}
.stagehead h1{
  font-size:clamp(2.25rem,9.5vw,4.5rem);
  line-height:.95;letter-spacing:-.04em;font-weight:800;text-wrap:balance;max-width:14em;
}
.stagehead .lede{margin-top:20px;color:var(--d-dim);max-width:36em;font-size:1.125rem;text-wrap:pretty}
@media (min-width:940px){.stagehead{padding:72px 0 96px}}

/* Kicker label — magenta on the stage, accent on paper. */
.kicker{
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  line-height:1;color:var(--accent);margin-bottom:16px;
}
.deck .kicker{color:var(--brand-hi)}

/* ── Buttons: ONE magenta pill per screen; everything else is outline. ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:58px;padding:16px 28px;border:0;border-radius:12px;
  font:inherit;font-size:1.0625rem;font-weight:700;letter-spacing:-.012em;line-height:1.25;
  text-align:center;text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;white-space:normal;
}
.btn.pri{
  background:var(--brand);color:var(--brand-ink);
  box-shadow:0 14px 34px -16px rgba(192,42,126,.6);
}
.btn.pri:hover{background:var(--brand-hi)}
.btn.pri:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px var(--d-line-2)}
.paper .btn.ghost{box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px currentColor}

/* ── The spotlight + the listing card (the funnel's object, alive again) ── */
.spot{position:relative;margin-top:44px}
@media (min-width:940px){.spot{margin-top:0}}
.spot::before{
  content:"";position:absolute;inset:-32px -26px -20px;pointer-events:none;z-index:0;
  background:radial-gradient(64% 56% at 50% 42%,rgba(255,255,255,.13),rgba(255,255,255,.03) 46%,transparent 72%);
  animation:glow 8s ease-in-out infinite;
}
@keyframes glow{0%,100%{opacity:.8}50%{opacity:1}}
/* No paint in the hero — the spotlight card holds the fold alone. The splash
   lives on the inner-page headers, the shout bands, and the footer. */
.spot>*{position:relative;z-index:1}
.cue{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
  font-size:.8125rem;font-weight:600;line-height:1.35;color:var(--d-dim);
}
.card{
  position:relative;
  overflow:hidden;border-radius:16px;background:var(--c-bg);color:var(--c-ink);
  box-shadow:0 2px 6px rgba(0,0,0,.35),0 34px 64px -26px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.07);
}
.card .bar{
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:8px 12px;background:var(--c-bar);border-bottom:1px solid var(--c-line);
  font-size:12px;line-height:1.35;color:var(--c-ink-3);
}
.card .bar i{width:6px;height:6px;border-radius:50%;background:#9aa286;flex:none}
.card .shotwrap{position:relative;overflow:hidden;background:#1a1e14}
.card .shot{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:#1a1e14}
/* The slow specular pass, confined to the photograph — same 8s period as the
   glow so the two loops phase-align. */
.card .shotwrap::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(102deg,transparent 38%,rgba(255,255,255,.3) 50%,transparent 62%);
  background-size:250% 100%;background-repeat:no-repeat;background-position:180% 0;
  animation:pass 8s cubic-bezier(.45,0,.5,1) 1.6s infinite;
}
@keyframes pass{0%{background-position:180% 0}24%{background-position:-90% 0}100%{background-position:-90% 0}}
.card .cbody{padding:16px}
.card .wrote{
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  line-height:1;color:var(--c-olive);margin-bottom:4px;
}
.card .cname{font-size:1.3125rem;font-weight:750;letter-spacing:-.022em;line-height:1.2}
.card .crow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:12px}
.card .cprice{font-size:1.5rem;line-height:1.05;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.card .crange{font-size:.8125rem;color:var(--c-ink-3)}
.card .paybar{
  margin-top:12px;padding:12px;border-radius:10px;background:var(--c-ink);color:var(--c-bg);
  text-align:center;font-weight:700;font-size:.9375rem;line-height:1.35;
}
.card .cdetail{margin-top:16px;padding-top:16px;border-top:1px solid var(--c-line)}
.card .cdesc{font-size:.9375rem;line-height:1.45;color:var(--c-ink-2)}
.card .cfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;font-size:.8125rem;color:var(--c-ink-3)}
.card .chip{
  padding:4px 8px;border-radius:999px;border:1px solid var(--c-line);color:var(--c-ink-2);
  font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;
}

/* The whole card is the link, but only once it holds a real listing — the JS
   unhides it (see index.html). Over everything, including the Pay bar, because
   that bar is a picture of a button: a click there must open the shop, not look
   like a payment that didn't happen. */
.card .cardgo{position:absolute;inset:0;z-index:2;border-radius:inherit}
.card.live{transition:transform .16s ease,box-shadow .16s ease}
.card.live:hover{transform:translateY(-2px)}
.card .cardgo:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* ── The card's other two states: writing, and theirs ──────────────────────
   Lifted from /start, where this sequence is proven, with one change: the pulse
   and the scan are magenta here because there is no lime on this site. The
   skeleton is deliberately the finished card with its words removed — same
   block order, same heights — so nothing reflows when the words arrive. ── */
.cue.live{color:var(--d-ink)}
.cue .pulse{
  width:8px;height:8px;flex:none;border-radius:50%;background:var(--brand-hi);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.78)}50%{opacity:1;transform:scale(1)}}
.card .scan{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 42%,rgba(217,74,151,.55) 50%,transparent 58%);
  animation:scan 1.6s ease-in-out infinite;
}
@keyframes scan{0%{transform:translateY(-56%)}100%{transform:translateY(56%)}}
.skel{background-color:var(--c-skel);border-radius:6px}
.sweep{
  background-image:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.9) 46%,transparent 72%);
  background-size:200% 100%;background-repeat:no-repeat;
  animation:sweep 1.15s linear infinite;
}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}

/* ── The try-it control, under the card ──────────────────────────────────────
   Outline, never the magenta pill: there is exactly one saturated button in
   this hero and it belongs to Start now. The input is visually hidden but
   still focusable, so the label's ring has to be drawn from its focus. ── */
.tryrow{position:relative;margin-top:14px}
.tryrow .file{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0)}
.tryrow .btn.try{width:100%;font-size:1rem;min-height:52px}
.tryrow .file:focus-visible+.btn.try{outline:3px solid var(--brand-hi);outline-offset:3px}
.trynote{
  margin-top:12px;font-size:.875rem;line-height:1.45;color:var(--d-dim);text-wrap:pretty;
}
.trynote[hidden]{display:none}
.trynote b{color:var(--d-ink);font-weight:750}
.trynote .qlink{color:var(--brand-hi)}

/* ── The ticker: what sellers make, drifting along the stage's bottom edge.
      Duplicated content scrolled -50% = a seamless loop. Decorative, so it is
      aria-hidden and simply stands still for reduced motion. ── */
.ticker{overflow:hidden;padding:20px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker .rail{display:inline-flex;white-space:nowrap;animation:drift 42s linear infinite}
.ticker span{
  padding:0 16px;font-size:.9375rem;font-weight:600;color:var(--d-dim);
}
.ticker span::after{content:"·";padding-left:32px;color:var(--d-line-2)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══ THE SHOUT — full-bleed magenta statement band ═════════════════════════ */
.shout{position:relative;overflow:hidden;background:var(--brand);color:var(--brand-ink)}
/* The white splash exploding off the band's corner — the tee, as a section. */
.shout::after{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-170px;right:-170px;width:520px;height:513px;
  background:url(/splat-white.svg) no-repeat center/contain;
  opacity:.45;
}
.shout .frame{position:relative;z-index:1;padding-top:72px;padding-bottom:72px}
.shout p{
  font-size:clamp(1.875rem,7.4vw,3.375rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.02;text-wrap:balance;max-width:15em;
}
.shout p small{
  display:block;margin-top:16px;font-size:1.0625rem;font-weight:600;
  letter-spacing:-.01em;line-height:1.45;color:rgba(255,255,255,.82);max-width:36em;
}
.shout ::selection{background:rgba(10,10,12,.4)}


/* ── THE WRITING. The one band that is neither a product door nor an argument,
     and the only one that must not look like the hairline grids around it: on
     paper, in a three-up, a piece of reporting reads as a fourth feature tile.
     So it takes the STAGE's ground instead. Two reasons that is the right break
     rather than a new invention — the system already owns near-black, and a
     photograph of an empty street in Mississippi has depth on it that it does
     not have on paper.
     Asymmetric on purpose. A section front has a lead and a second, not two
     equal tiles, and the lead is the piece we want read. The magenta hairline
     top and bottom is the same edge the stage carries, so the band reads as a
     chapter rather than a panel that wandered in. ── */
.reads{
  position:relative;margin-top:96px;
  background:var(--d-bg);color:var(--d-ink);
  box-shadow:inset 0 1px 0 rgba(192,42,126,.5),inset 0 -1px 0 rgba(192,42,126,.5);
}
.reads>.frame{padding-top:72px;padding-bottom:72px}
.reads .kicker{color:var(--d-dim)}
.reads h2{
  font-size:clamp(1.875rem,7vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;text-wrap:balance;max-width:24em;
}
.reads ::selection{background:rgba(192,42,126,.4)}
.reads :focus-visible{outline:3px solid var(--brand-hi)}
.rgrid{display:grid;gap:32px;margin-top:44px}
@media (min-width:940px){ .rgrid{grid-template-columns:1.35fr 1fr;gap:44px;align-items:start} }
.read{display:block;text-decoration:none;color:inherit;min-width:0}
.read figure{position:relative;margin:0;overflow:hidden;border-radius:14px;background:var(--d-line)}
.read img{
  display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  transition:transform .4s ease;
}
.read:hover img,.read:focus-visible img{transform:scale(1.03)}
/* The category, over the photograph, which is the one magazine cue this site
   does not already use anywhere else. */
.read .tag{
  position:absolute;left:12px;bottom:12px;padding:5px 12px;border-radius:999px;
  background:rgba(10,10,12,.72);
  font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.read h3{margin-top:16px;font-size:1.25rem;font-weight:750;letter-spacing:-.025em;line-height:1.14;text-wrap:balance}
.read.lead h3{font-size:clamp(1.5rem,3.4vw,2rem);letter-spacing:-.032em;line-height:1.06}
.read p{margin-top:8px;color:var(--d-dim);font-size:.9375rem;text-wrap:pretty}
.read .go{
  display:inline-block;margin-top:12px;font-size:.9375rem;font-weight:600;
  color:var(--brand-hi);border-bottom:1px solid transparent;padding-bottom:2px;
}
.read:hover .go,.read:focus-visible .go{border-bottom-color:currentColor}
/* The second column is shorter than the lead by the height of a photograph, so it
   carries the two section doors instead of dead-ending in black. They say what each
   section IS, which the nav labels cannot. */
.rgrid .col{display:grid;gap:32px;align-content:start;min-width:0}
.sections{border-top:1px solid var(--d-line)}
.sections a{
  display:block;padding:12px 0;border-bottom:1px solid var(--d-line);
  text-decoration:none;color:inherit;
}
.sections b{font-size:.9375rem;font-weight:750;letter-spacing:-.01em}
.sections span{display:block;margin-top:2px;font-size:.875rem;color:var(--d-dim)}
.sections a:hover b,.sections a:focus-visible b{color:var(--brand-hi)}
/* Both photographs are somebody else's, under licences that require the credit
   wherever the picture is used, which includes a thumbnail on a homepage. */
.reads .credit{margin-top:20px;font-size:.75rem;line-height:1.5;color:var(--d-dim)}
.reads .credit a{color:inherit}

/* ══ PAPER ═════════════════════════════════════════════════════════════════ */
.band{padding:72px 0 0}
.band h2{
  font-size:clamp(1.875rem,7vw,2.75rem);font-weight:800;letter-spacing:-.035em;
  line-height:1.05;text-wrap:balance;
}
.lede{margin-top:16px;max-width:36em;font-size:1.0625rem;color:var(--ink-2);text-wrap:pretty}

/* Hairline N-up — flush gutters, generalised from the funnel. */
.hgrid{margin-top:32px;border-top:1px solid var(--line)}
.hgrid>*{padding:20px 0;border-bottom:1px solid var(--line);min-width:0}
.hgrid .ico{display:block;width:24px;height:24px;margin-bottom:12px;color:var(--accent)}
.hgrid h3{font-size:1.0625rem;font-weight:750;letter-spacing:-.015em;line-height:1.3}
.hgrid p{margin-top:4px;color:var(--ink-2);font-size:.9375rem;text-wrap:pretty}
.hgrid b.big{
  display:block;font-size:clamp(1.25rem,5.2vw,1.5rem);font-weight:800;
  letter-spacing:-.03em;line-height:1.15;text-wrap:balance;
}
.hgrid b.big+p{margin-top:6px}
@media (min-width:940px){
  .hgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
  .hgrid>*{padding:26px 26px 32px;border-bottom:0}
  .hgrid>*+*{border-left:1px solid var(--line)}
  .hgrid>*:first-child{padding-left:0}
  .hgrid>*:last-child{padding-right:0}
  .hgrid>*:nth-child(3n+1){border-left:0;padding-left:0}
  .hgrid>*:nth-child(n+4){border-top:1px solid var(--line)}
}

/* ── Signposts: an hgrid cell that IS a link to another page. The homepage
     stopped re-arguing /how-it-works, /pricing and /shops and hands them over
     instead, so the cell has to be as clickable as it looks — whole box, not
     just the arrow. Cells are <a>, which is why .hgrid addresses > * . ── */
.hgrid .sign{display:block;text-decoration:none;color:inherit}
.hgrid .sign h3{transition:color .12s ease}
.hgrid .sign .go{
  display:inline-block;margin-top:12px;font-size:.9375rem;font-weight:600;
  color:var(--accent);border-bottom:1px solid transparent;padding-bottom:2px;
}
.hgrid .sign:hover h3,.hgrid .sign:focus-visible h3{color:var(--accent)}
.hgrid .sign:hover .go,.hgrid .sign:focus-visible .go{border-bottom-color:currentColor}
.hgrid .sign p b{font-weight:800;color:var(--ink)}

/* ── The walk: numbered long-form steps, mock beside the words on desktop. ── */
.walk{margin-top:32px;border-top:1px solid var(--line);counter-reset:step}
.walk li{padding:32px 0;border-bottom:1px solid var(--line);min-width:0}
.walk li::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:clamp(2.25rem,8vw,3.375rem);line-height:1;
  font-weight:800;letter-spacing:-.04em;color:transparent;
  -webkit-text-stroke:1.5px var(--ink-2);margin-bottom:12px;
}
@supports not (-webkit-text-stroke:1px black){
  .walk li::before{color:var(--line)}
}
.walk h3{font-size:1.3125rem;font-weight:750;letter-spacing:-.02em;line-height:1.3}
.walk p{margin-top:8px;color:var(--ink-2);text-wrap:pretty;max-width:38em}
.walk .aside{
  margin-top:12px;padding-left:12px;border-left:2px solid var(--accent);
  font-size:.9375rem;color:var(--ink-2);max-width:36em;
}
.walk .mock{margin-top:20px}
@media (min-width:940px){
  .walk li.has-mock{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:72px;align-items:center}
  .walk li.has-mock .mock{margin-top:0;grid-column:2;grid-row:1}
  .walk li.has-mock>div:first-of-type{grid-column:1}
}

/* ── Mocks: small true-to-app objects, drawn in CSS. ── */
/* A new-order notification. */
.mock-note{
  display:flex;gap:12px;align-items:flex-start;max-width:300px;
  padding:16px;border-radius:16px;background:var(--d-bg);color:var(--d-ink);
  box-shadow:0 2px 6px rgba(0,0,0,.25),0 26px 44px -24px rgba(0,0,0,.55);
}
.mock-note .dot{
  flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand);
  display:flex;align-items:center;justify-content:center;color:#fff;
}
.mock-note .dot svg{width:16px;height:16px}
.mock-note b{display:block;font-size:.9375rem;letter-spacing:-.01em}
.mock-note span{display:block;margin-top:2px;font-size:.8125rem;color:var(--d-dim)}
/* The four pickup-code cells, mid-entry — exactly the app's sign-in cells. */
.mock-code{display:flex;gap:8px;max-width:300px}
.mock-code i{
  flex:1;aspect-ratio:.82;display:flex;align-items:center;justify-content:center;
  border-radius:12px;border:1.5px solid var(--line);background:var(--c-bg);color:var(--c-ink);
  font-style:normal;font-size:1.75rem;font-weight:700;font-variant-numeric:tabular-nums;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.mock-code i.on{border-color:var(--brand)}
.mock-code i.off{color:transparent}
/* The shop link, as a pill. */
.mock-link{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;
  padding:12px 16px;border-radius:999px;border:1.5px solid var(--line);
  font-size:.9375rem;font-weight:600;color:var(--ink-2);
  font-variant-ligatures:none;
}
.mock-link i{width:6px;height:6px;border-radius:50%;background:var(--brand);flex:none;font-style:normal}
.mock-link b{color:var(--ink)}

/* ── FAQ accordions — native <details>, no JS. ── */
.faq{margin-top:20px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:20px 0;cursor:pointer;list-style:none;
  font-size:1.0625rem;font-weight:700;letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font-size:1.25rem;font-weight:600;color:var(--accent)}
.faq details[open] summary::after{content:"–"}
.faq details>p{padding:0 0 20px;color:var(--ink-2);max-width:44em;text-wrap:pretty}
.faq details>p+p{margin-top:-8px}

/* ══ THE RECEIPT — the pricing math as the object it describes ═════════════
   Always light, like the card: it is a piece of paper under the light. */
.receipt{
  position:relative;max-width:26rem;margin-top:32px;
  padding:26px 26px 32px;border-radius:12px 12px 0 0;
  background:var(--c-bg);color:var(--c-ink);
  font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9375rem;font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(0,0,0,.14),0 26px 48px -28px rgba(0,0,0,.4);
}
.receipt::after{ /* the tear */
  content:"";position:absolute;top:100%;left:0;width:100%;height:12px;
  background:
    linear-gradient(45deg,var(--c-bg) 6px,transparent 0) 0 0/12px 12px repeat-x,
    linear-gradient(-45deg,var(--c-bg) 6px,transparent 0) 6px 0/12px 12px repeat-x;
}
.receipt .head{
  text-align:center;font-size:.8125rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--c-ink-3);
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px dashed var(--c-line);
}
.receipt .row{display:flex;justify-content:space-between;gap:16px;padding:8px 0}
.receipt .row span:first-child{color:var(--c-ink-2)}
.receipt .row.total{border-top:1px dashed var(--c-line);margin-top:8px;padding-top:16px;font-weight:700}
.receipt .row.you{font-weight:700;color:var(--c-olive)}
.receipt .stamp{
  position:absolute;right:16px;top:44px;transform:rotate(9deg);
  padding:4px 10px;border:3px solid var(--brand);border-radius:8px;
  color:var(--brand);font-family:inherit;font-size:.8125rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;opacity:.9;
}

/* ── Comparison table. ── */
.compare{margin-top:32px;width:100%;border-collapse:collapse;font-size:.9375rem}
.compare th,.compare td{padding:16px 16px 16px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.compare thead th{font-size:.8125rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.compare .us{font-weight:800}
.compare .us th{color:var(--accent)}
.tablewrap{overflow-x:auto}

/* ── Final CTA band. ── */
.cta{margin-top:96px;padding:56px 0 0;border-top:1px solid var(--line);text-align:center}
.cta h2{font-size:clamp(2rem,8vw,3.375rem);font-weight:800;letter-spacing:-.04em;line-height:1.02;text-wrap:balance}
.cta p{margin:16px auto 0;max-width:32em;color:var(--ink-2);text-wrap:balance}
.cta .btn{margin-top:32px}
.cta .small{margin-top:16px;font-size:.8125rem;color:var(--ink-2)}

/* Quiet link. */
.qlink{font-weight:600;color:var(--accent);text-decoration:none}
.qlink span{border-bottom:1px solid currentColor;padding-bottom:2px}

/* ══ FOOTER — closed by the wordmark at architectural scale ════════════════ */
footer{margin-top:96px;padding:26px 0 0;border-top:1px solid var(--line)}
footer .cols{display:flex;flex-wrap:wrap;gap:12px 26px}
footer a{font-size:.9375rem;font-weight:600;color:var(--ink-2);text-decoration:none;padding:4px 0}
footer a:hover{color:var(--ink)}
/* NILFPAY ELSEWHERE. Four brand marks on their own row, first in the footer. 24px glyphs in 44px
   targets, and the row is pulled 10px left so the first glyph's own edge lines up with the links
   under it rather than its padding sitting on the margin. */
footer .social{display:flex;gap:4px;margin:0 0 10px -10px}
footer .social a{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border-radius:12px;color:var(--ink-2);
}
footer .social a:hover{color:var(--accent);background:var(--line)}
footer .social svg{display:block}
footer .fine{margin-top:20px;font-size:.8125rem;line-height:1.6;color:var(--ink-2);max-width:44em;text-wrap:pretty}
/* The REAL wordmark as a pure outline, at architectural scale. Painted through
   a CSS mask so it takes the theme's hairline colour in both schemes; the
   stroke SVG's own colour only supplies the alpha. */
footer .colossus{position:relative;margin-top:32px;display:flex;justify-content:center}
footer .colossus i{
  display:none;width:min(92%,1000px);aspect-ratio:140.3/61.8;
  background:var(--line);
}
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  footer .colossus i{
    display:block;
    -webkit-mask:url(/nilfpay-stroke.svg) no-repeat center/contain;
    mask:url(/nilfpay-stroke.svg) no-repeat center/contain;
  }
}
/* A small splash BESIDE the sign, not on it — up by the wordmark's right
   shoulder. Desktop only: on a phone there is no beside. */
@media (min-width:720px){
  footer .colossus::before{
    content:"";position:absolute;z-index:0;pointer-events:none;
    right:0;top:0;width:min(15vw,190px);aspect-ratio:464/458;
    transform:translateY(-45%) rotate(10deg);
    background:url(/splat.svg) no-repeat center/contain;
    opacity:.35;
  }
  footer .colossus i{position:relative;z-index:1}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .card .shotwrap::after{display:none}
  .card .scan{display:none}
  .sweep{background-image:none}
  .btn.pri:active{transform:none}
}