/* ============================================================================
   payibex.com — stylesheet
   ----------------------------------------------------------------------------
   Modern payments-SaaS: white and pale blue grounds, rounded cards with real
   depth, a blue-to-cyan gradient carried through the graphics, generous space.

   Two rules that are not style preferences:

   1. EVERY @media BLOCK LIVES AT THE END OF THIS FILE. A media query adds no
      specificity, so a later plain rule of equal specificity beats it. That
      exact mistake shipped twice on the product site and once rendered every
      page in ~110px on a phone.
   2. THE CYAN #0CD8D8 IS 1.78:1 ON WHITE. It is unreadable as text and fails
      WCAG at any size. It lives in gradients, glows and graphics. The colour
      that carries text and buttons is #0B63B8.
   ========================================================================== */

@font-face {
  font-family: 'Manrope Variable';
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/assets/fonts/manrope-latin-wght-normal.woff2?v=a30ddcd349") format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal; font-display: swap; font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2?v=3100e775e8") format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root {
  /* Brand */
  --blue:      #0B63B8;
  --blue-deep: #084B8D;
  --blue-lift: #1C93D6;
  --cyan:      #0CD8D8;   /* gradients and graphics ONLY */
  --ink:       #0C1730;
  --body:      #4A5570;
  --muted:     #6E7893;

  /* Grounds */
  --white:  #FFFFFF;
  --tint:   #F3F8FD;
  --tint-2: #EAF3FB;
  --line:   #E3ECF6;
  --line-2: #D5E4F2;

  --ok:  #12A150;
  --bad: #E2483D;
  --warn:#E9A23B;

  /* The gradient, one definition. The mid stop keeps it from going muddy
     through the teal midpoint; oklab keeps the middle from greying out. */
  --grad: linear-gradient(120deg, #0B63B8 0%, #1C93D6 52%, #0CD8D8 100%);
  --grad: linear-gradient(120deg in oklab, #0B63B8 0%, #1C93D6 52%, #0CD8D8 100%);
  --grad-soft: linear-gradient(135deg, #EAF3FB 0%, #F3F8FD 100%);

  /* Depth. Layered rather than one blurry drop, so cards read as lifted
     rather than smudged. */
  --sh-1: 0 1px 2px rgba(12,23,48,.06), 0 2px 8px rgba(12,23,48,.04);
  --sh-2: 0 2px 4px rgba(12,23,48,.05), 0 12px 28px -8px rgba(12,23,48,.10);
  --sh-3: 0 4px 8px rgba(12,23,48,.05), 0 24px 48px -12px rgba(12,23,48,.16);
  --sh-blue: 0 8px 24px -6px rgba(11,99,184,.35);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --display: 'Manrope Variable','Manrope',system-ui,-apple-system,sans-serif;
  --text:    'Inter Variable','Inter',system-ui,-apple-system,sans-serif;
  --mono:    ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --shell: 1200px;
  --pad: 24px;
  --header-h: 76px;

  --e-out: cubic-bezier(.22,.68,.35,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
}

/* ---- base ---------------------------------------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
html { scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--body);
  font-family: var(--text); font-size: 1rem; line-height: 1.65;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1,h2,h3,h4 { font-family: var(--display); color: var(--ink); margin: 0; line-height: 1.15; letter-spacing: -.02em; }
p { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
[id] { scroll-margin-top: 100px; }
::selection { background: var(--tint-2); color: var(--blue); }

:where(button.btn,button.tab,button.faq__q,button.nav__toggle,button.mkt) {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
:focus-visible { outline: 3px solid rgba(11,99,184,.45); outline-offset: 2px; border-radius: 6px; }

.vh { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path: inset(50%); white-space:nowrap; }
.skip {
  position:absolute; left:16px; top:-100px; z-index:100;
  background: var(--blue); color:#fff; padding:12px 20px; border-radius: var(--r-sm);
  font-weight:600; font-size:.875rem; transition: top .2s var(--e-out);
}
.skip:focus { top:16px; }

/* ---- layout -------------------------------------------------------------- */
.shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.sec { padding-block: 112px; }
.sec--tight { padding-block: 80px; }
.tint { background: var(--tint); }
.tint-2 { background: var(--tint-2); }

.head { max-width: 720px; margin-bottom: 56px; }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 10px; border-radius: var(--r-pill);
  background: var(--tint-2); color: var(--blue);
  font-size: .8125rem; font-weight: 600; letter-spacing: .01em;
  margin-bottom: 20px;
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--grad); }

h2.h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 3rem); font-weight: 800; letter-spacing: -.03em; }
.lede { margin-top: 18px; font-size: 1.0625rem; color: var(--muted); line-height: 1.7; }
.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding-inline: 26px; border-radius: var(--r-pill);
  font-weight: 600; font-size: .9375rem; white-space: nowrap;
  transition: transform .18s var(--e-out), box-shadow .18s var(--e-out), background .18s var(--e-out);
}
.btn--primary { background: var(--blue); color:#fff; box-shadow: var(--sh-blue); }
.btn--primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 12px 30px -6px rgba(11,99,184,.45); }
.btn--ghost { background: var(--white); color: var(--ink); box-shadow: var(--sh-1); }
.btn--ghost:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.btn--sm { height: 42px; padding-inline: 20px; font-size: .875rem; }
.btn--lg { height: 58px; padding-inline: 32px; font-size: 1rem; }
.btn--white { background:#fff; color: var(--blue); }
.btn--white:hover { background:#fff; transform: translateY(-2px); box-shadow: 0 12px 30px -6px rgba(0,0,0,.25); }
.btn__ico { width: 16px; height: 16px; flex: 0 0 auto; transition: transform .18s var(--e-out); }
.btn:hover .btn__ico { transform: translateX(3px); }

/* ---- header -------------------------------------------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--e-out), background .2s var(--e-out);
}
.hdr--stuck { border-bottom-color: var(--line); background: rgba(255,255,255,.92); }
.hdr__in { display:flex; align-items:center; gap: 32px; height: var(--header-h); }
.brand { display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.brand__mark { height: 30px; width: auto; }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.1875rem; color: var(--ink); letter-spacing: -.02em; }
.nav { display:flex; align-items:center; gap: 4px; margin-left: auto; }
.nav__link {
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: .9rem; font-weight: 500; color: var(--body);
  transition: background .16s var(--e-out), color .16s var(--e-out);
}
.nav__link:hover { background: var(--tint-2); color: var(--blue); }
.hdr__cta { flex:0 0 auto; }
.nav__toggle { display:none; }

.sheet { display:none; }
.sheet[data-open="true"] {
  display:flex; flex-direction:column; position:fixed; inset:0; z-index:60;
  background:#fff; padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  overflow-y:auto; overscroll-behavior:contain;
}
.sheet__top { display:flex; align-items:center; height:56px; }
.sheet__link { display:block; padding: 16px 0; border-bottom:1px solid var(--line); font-family: var(--display); font-weight:700; font-size:1.25rem; color: var(--ink); }
.sheet__cta { margin-top: auto; padding-top: 24px; }
.sheet__cta .btn { width:100%; }

/* ---- hero ---------------------------------------------------------------- */
.hero { position: relative; padding-top: 72px; padding-bottom: 96px; overflow: hidden; }
/* The glow. Two soft radial washes, no image, no blur filter on a huge box. */
.hero::before {
  content:""; position:absolute; z-index:-1; inset:-20% -10% auto -10%; height: 780px;
  background:
    radial-gradient(46% 42% at 78% 18%, rgba(12,216,216,.22) 0%, rgba(12,216,216,0) 70%),
    radial-gradient(50% 46% at 18% 4%, rgba(11,99,184,.16) 0%, rgba(11,99,184,0) 72%);
  pointer-events:none;
}
.hero__grid { display:grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.hero h1 {
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4rem);
  font-weight: 800; letter-spacing: -.035em; line-height: 1.06;
}
.hero__lede { margin-top: 22px; font-size: 1.125rem; line-height: 1.65; color: var(--muted); max-width: 34em; }
.hero__cta { display:flex; gap:14px; margin-top: 34px; flex-wrap: wrap; }
.hero__trust { display:flex; gap: 26px; margin-top: 40px; flex-wrap: wrap; }
.hero__trust div { display:flex; flex-direction:column; }
.hero__trust b { font-family: var(--display); font-size: 1.5rem; font-weight: 800; color: var(--ink); }
.hero__trust span { font-size: .8125rem; color: var(--muted); }

/* ---- hero art ------------------------------------------------------------ */
.art { position: relative; min-height: 460px; }
.art__orb {
  position:absolute; inset: 6% 4% auto auto; width: 340px; height: 340px;
  border-radius: 50%; background: var(--grad); opacity: .92;
  box-shadow: 0 30px 80px -20px rgba(11,99,184,.5);
}
.art__ring {
  position:absolute; top: 2%; right: 1%; width: 400px; height: 400px;
  border-radius: 50%; border: 1px solid rgba(11,99,184,.18);
}
.art__ring::after {
  content:""; position:absolute; top:-5px; left: 50%; width: 10px; height: 10px;
  border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(12,216,216,.22);
}
.card {
  position: relative; background:#fff; border-radius: var(--r);
  box-shadow: var(--sh-3); padding: 18px;
}
.art__pay { position:absolute; left: 0; top: 12%; width: 268px; z-index: 2; }
.art__row { position:absolute; left: 8%; bottom: 6%; width: 300px; z-index: 3; }
.pay__top { display:flex; align-items:center; justify-content:space-between; }
.pay__label { font-size:.75rem; color: var(--muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase; }
.pay__amt { font-family: var(--display); font-size: 2rem; font-weight: 800; color: var(--ink); margin-top: 6px; letter-spacing:-.03em; }
.pay__meta { display:flex; align-items:center; gap:8px; margin-top: 12px; font-size:.8125rem; color: var(--muted); }
.chipdot { width:8px; height:8px; border-radius:50%; background: var(--ok); flex:0 0 auto; }
.pay__bar { height:6px; border-radius:99px; background: var(--tint-2); margin-top:16px; overflow:hidden; }
.pay__bar i { display:block; height:100%; width:72%; border-radius:99px; background: var(--grad); }
.mini { display:flex; align-items:center; gap:12px; padding: 10px 0; }
.mini + .mini { border-top: 1px solid var(--line); }
.mini__ico { width:34px; height:34px; border-radius: 10px; background: var(--tint-2); display:grid; place-items:center; flex:0 0 auto; color: var(--blue); font-weight:700; font-size:.75rem; }
.mini__n { font-size:.875rem; color: var(--ink); font-weight:600; }
.mini__s { margin-left:auto; font-size:.75rem; font-weight:600; }
.mini__s--ok { color: var(--ok); }
.mini__s--wait { color: var(--warn); }

/* ---- marquee ------------------------------------------------------------- */
.mq { overflow: hidden; padding-block: 28px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq__track { display:flex; width: max-content; gap: 14px; }
.mq__i {
  display:flex; align-items:center; height: 44px; padding-inline: 20px;
  border-radius: var(--r-pill); background:#fff; border:1px solid var(--line);
  font-size:.875rem; font-weight:600; color: var(--body); white-space:nowrap;
}

/* ---- stat band ----------------------------------------------------------- */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.stat { background:#fff; border-radius: var(--r); padding: 28px; box-shadow: var(--sh-1); border:1px solid var(--line); }
.stat b { display:block; font-family: var(--display); font-size: clamp(2rem,1.4rem+1.6vw,2.75rem); font-weight:800; color: var(--ink); letter-spacing:-.03em; line-height:1; }
.stat span { display:block; margin-top:10px; font-size:.875rem; color: var(--muted); }
.stat i { display:block; width:40px; height:4px; border-radius:99px; background: var(--grad); margin-top:16px; }

/* ---- feature cards ------------------------------------------------------- */
.grid-3 { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-2 { display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }
.fcard {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px; box-shadow: var(--sh-1);
  transition: transform .2s var(--e-out), box-shadow .2s var(--e-out), border-color .2s var(--e-out);
}
.fcard:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.fcard__ico {
  width: 52px; height: 52px; border-radius: 14px; background: var(--grad);
  display:grid; place-items:center; color:#fff; margin-bottom: 20px;
  box-shadow: var(--sh-blue);
}
.fcard__ico svg { width: 24px; height: 24px; }
.fcard h3 { font-size: 1.1875rem; font-weight: 700; }
.fcard p { margin-top: 10px; font-size: .9375rem; color: var(--muted); line-height:1.65; }

/* ---- coverage ------------------------------------------------------------ */
.cov { display:grid; grid-template-columns: 1fr 1.15fr; gap: 40px; align-items:start; }
.rcard { background:#fff; border:1px solid var(--line); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--sh-1); }
.rcard + .rcard { margin-top: 14px; }
.rcard__top { display:flex; align-items:center; gap:12px; }
.rcard__n { font-weight:600; color: var(--ink); }
.rcard__live { margin-left:auto; display:inline-flex; align-items:center; gap:7px; font-size:.75rem; font-weight:600; color: var(--ok); background: rgba(18,161,80,.09); padding: 5px 11px; border-radius: var(--r-pill); }
.rcard__bar { height:7px; border-radius:99px; background: var(--tint-2); margin-top:14px; overflow:hidden; }
.rcard__bar i { display:block; height:100%; border-radius:99px; background: var(--grad); width:0; transition: width 1.1s var(--e-out); }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 22px; }
.tab { padding: 9px 16px; border-radius: var(--r-pill); font-size:.875rem; font-weight:600; color: var(--muted); background: var(--white); border:1px solid var(--line); transition: all .16s var(--e-out); }
.tab:hover { color: var(--blue); border-color: var(--line-2); }
.tab[aria-selected="true"] { background: var(--blue); border-color: var(--blue); color:#fff; box-shadow: var(--sh-blue); }
.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip {
  padding: 9px 15px; border-radius: var(--r-pill); background:#fff;
  border:1px solid var(--line); font-size:.8125rem; font-weight:600; color: var(--body);
  transition: transform .16s var(--e-out), border-color .16s var(--e-out), color .16s var(--e-out);
}
.chip:hover { transform: translateY(-2px); border-color: var(--blue); color: var(--blue); }

/* ---- steps --------------------------------------------------------------- */
.steps { display:grid; grid-template-columns: repeat(3,1fr); gap: 28px; position:relative; }
.step { background:#fff; border:1px solid var(--line); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-1); position:relative; }
.step__n {
  width:44px; height:44px; border-radius: 50%; display:grid; place-items:center;
  background: var(--grad); color:#fff; font-family: var(--display); font-weight:800; font-size:1rem;
  margin-bottom: 20px; box-shadow: var(--sh-blue);
}
.step h3 { font-size:1.125rem; font-weight:700; }
.step p { margin-top:10px; font-size:.9375rem; color: var(--muted); }

/* ---- developers ---------------------------------------------------------- */
.dev { background: linear-gradient(160deg,#0C1730 0%, #12224A 100%); border-radius: var(--r-lg); padding: 56px; color:#C7D3E8; position:relative; overflow:hidden; }
.dev::before { content:""; position:absolute; inset:auto -10% -40% auto; width:520px; height:420px; background: radial-gradient(50% 50% at 50% 50%, rgba(12,216,216,.18), transparent 70%); pointer-events:none; }
.dev__grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 44px; align-items:center; position:relative; }
.dev h2 { color:#fff; }
.dev .lede { color:#9FB0CC; }
.dev__list { margin-top: 26px; display:grid; gap: 14px; }
.dev__list li { display:flex; gap:12px; font-size:.9375rem; color:#B6C4DC; }
.dev__tick { width:20px; height:20px; border-radius:50%; background: rgba(12,216,216,.16); display:grid; place-items:center; flex:0 0 auto; margin-top:2px; }
.dev__tick svg { width:11px; height:11px; color: var(--cyan); }
.code { background: rgba(3,9,22,.62); border:1px solid rgba(255,255,255,.09); border-radius: var(--r); overflow:hidden; }
.code__bar { display:flex; align-items:center; gap:8px; padding: 12px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.code__dot { width:11px; height:11px; border-radius:50%; background: rgba(255,255,255,.16); }
.code__f { margin-left:8px; font-family: var(--mono); font-size:.75rem; color:#7E90B0; }
.code pre { margin:0; padding: 20px; overflow-x:auto; font-family: var(--mono); font-size:.8125rem; line-height:1.8; color:#DCE6F5; }
.t-k { color:#7FD1FF; } .t-s { color: var(--cyan); } .t-c { color:#6C7C9C; } .t-ok { color:#57D98A; }

/* ---- industries ---------------------------------------------------------- */
.inds { display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.ind {
  background:#fff; border:1px solid var(--line); border-radius: var(--r);
  padding: 22px; box-shadow: var(--sh-1);
  transition: transform .18s var(--e-out), box-shadow .18s var(--e-out), border-color .18s var(--e-out);
}
.ind:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue); }
.ind b { display:block; font-family: var(--display); font-size:1rem; font-weight:700; color: var(--ink); }
.ind span { display:block; margin-top:6px; font-size:.8125rem; color: var(--muted); }

/* ---- cta ----------------------------------------------------------------- */
.cta { background: var(--grad); border-radius: var(--r-lg); padding: 72px 40px; text-align:center; color:#fff; position:relative; overflow:hidden; }
.cta::before { content:""; position:absolute; inset:-50% 40% auto -20%; height:420px; background: radial-gradient(50% 50% at 50% 50%, rgba(255,255,255,.22), transparent 70%); pointer-events:none; }
.cta h2 { color:#fff; position:relative; font-size: clamp(1.875rem,1.2rem+2.2vw,2.75rem); }
.cta p { position:relative; margin: 16px auto 0; max-width: 46ch; color: rgba(255,255,255,.9); font-size:1.0625rem; }
.cta__row { position:relative; margin-top: 32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta__meta { position:relative; margin-top:20px; font-size:.8125rem; color: rgba(255,255,255,.75); }

/* ---- faq ----------------------------------------------------------------- */
.faq { max-width: 820px; margin-inline:auto; }
.faq__item { background:#fff; border:1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; box-shadow: var(--sh-1); transition: border-color .18s var(--e-out), box-shadow .18s var(--e-out); }
.faq__item[data-open="true"] { border-color: var(--line-2); box-shadow: var(--sh-2); }
.faq__q { display:flex; align-items:center; gap:20px; width:100%; padding: 22px 24px; font-family: var(--display); font-weight:700; font-size:1.0625rem; color: var(--ink); }
.faq__ico { margin-left:auto; width:28px; height:28px; border-radius:50%; background: var(--tint-2); display:grid; place-items:center; flex:0 0 auto; transition: background .18s var(--e-out), transform .18s var(--e-out); }
.faq__item[data-open="true"] .faq__ico { background: var(--blue); transform: rotate(45deg); }
.faq__ico svg { width:13px; height:13px; color: var(--blue); }
.faq__item[data-open="true"] .faq__ico svg { color:#fff; }
.faq__panel { display:grid; grid-template-rows: 0fr; transition: grid-template-rows .28s var(--e-soft); }
.faq__item[data-open="true"] .faq__panel { grid-template-rows: 1fr; }
.faq__inner { overflow:hidden; }
.faq__a { padding: 0 24px 24px; color: var(--muted); font-size:.9375rem; line-height:1.7; }

/* ---- footer -------------------------------------------------------------- */
.foot { background: var(--ink); color:#93A2BE; padding-block: 64px 32px; }
.foot__grid { display:grid; grid-template-columns: 1.4fr repeat(3,1fr); gap: 40px; }
.foot__mark { height:34px; width:auto; }
.foot__brand p { margin-top:16px; font-size:.9375rem; color:#8A99B6; max-width: 34ch; }
.foot h4 { color:#fff; font-size:.8125rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin-bottom:16px; }
.foot a { font-size:.9375rem; color:#93A2BE; transition: color .16s var(--e-out); display:inline-block; padding-block:5px; }
.foot a:hover { color:#fff; }
.foot__bar { margin-top:48px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); display:flex; gap:16px; flex-wrap:wrap; align-items:center; font-size:.8125rem; }

/* ---- unconfirmed facts ---------------------------------------------------
   A visible blank, never a plausible-looking guess. `bash deploy/build.sh`
   lists every one before each deploy. */
/* A blank to be filled in an unexecuted draft, which is what the legal pages
   are. Rendered as a ruled space rather than the word "TBC": a placeholder a
   reader can see is a bug, a blank line is obviously a form field. */
.tbc { display:inline-block; min-width:7ch; border-bottom:1px solid var(--line-2); }
.cta .tbc, .dev .tbc, .foot .tbc { color: inherit; opacity:.85; }

/* ---- legal / error pages -------------------------------------------------- */
.doc { max-width: 760px; padding-block: 72px 96px; }
.doc h1 { font-size: clamp(2rem,1.4rem+2vw,2.75rem); font-weight:800; }
.doc__meta { margin-top:14px; font-size:.875rem; color: var(--muted); }
.doc h2 { font-size:1.375rem; font-weight:700; margin-top:48px; }
.doc p { margin-top:14px; line-height:1.75; }
.doc ul { margin-top:14px; }
.doc li { position:relative; padding-left:22px; margin-top:10px; line-height:1.7; }
.doc li::before { content:""; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background: var(--blue); }
.doc a { color: var(--blue); font-weight:500; }
.doc a:hover { text-decoration: underline; }
.doc__notice { margin-top:28px; padding:22px 24px; background: var(--tint-2); border-left:4px solid var(--blue); border-radius: var(--r-sm); font-size:.9375rem; }
.doc__notice p + p { margin-top:10px; }
.err { padding-block: 120px; text-align:center; max-width:600px; margin-inline:auto; }
.err__n { font-family: var(--display); font-size: 6rem; font-weight:800; line-height:1; background: var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.err h1 { margin-top:16px; font-size:1.75rem; font-weight:800; }
.err p { margin-top:14px; color: var(--muted); }
.err__row { margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

.hdr__signin { font-size:.875rem; font-weight:500; color: var(--body); padding: 9px 12px; transition: color .16s var(--e-out); }
.hdr__signin:hover { color: var(--blue); }

/* Inline link with a trailing icon, used to finish a section with its page. */
.lnk { display:inline-flex; align-items:center; gap:7px; color: var(--blue); font-weight:600; }
.lnk__i { width:15px; height:15px; transition: transform .18s var(--e-out); }
.lnk:hover .lnk__i { transform: translateX(3px); }

.mt-md { margin-top: 20px; }
.mt-lg { margin-top: 48px; }

.foot__tm { margin-top: 44px; font-size:.75rem; line-height:1.7; color:#7A88A6; max-width: 92ch; }

/* Region teaser list on the home page. */
.rlist { display:grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.rlist .rcard { margin-top:0; transition: transform .18s var(--e-out), box-shadow .18s var(--e-out), border-color .18s var(--e-out); }
.rlist .rcard:hover { transform: translateY(-3px); box-shadow: var(--sh-2); border-color: var(--blue); }
.rlist .rcard__top { flex-direction: column; align-items:flex-start; gap:10px; }
.rlist .rcard__live { margin-left:0; background: var(--tint); color: var(--muted); }

.ctrygrid { display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; }

/* ---- page hero (secondary pages) ----------------------------------------- */
.phero { background: var(--grad-soft); border-bottom:1px solid var(--line); padding-block: 64px 72px; position:relative; overflow:hidden; }
.phero::before {
  content:""; position:absolute; inset:-40% -10% auto 55%; height:520px; pointer-events:none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(12,216,216,.16), transparent 70%);
}
.phero h1 { font-size: clamp(2.25rem,1.5rem+2.6vw,3.25rem); font-weight:800; letter-spacing:-.035em; max-width: 18ch; }
.phero p { margin-top:18px; font-size:1.0625rem; color: var(--muted); max-width: 58ch; }
.crumb { display:flex; align-items:center; gap:8px; font-size:.8125rem; color: var(--muted); margin-bottom:18px; }
.crumb a:hover { color: var(--blue); }
.crumb svg { width:12px; height:12px; opacity:.5; }

/* ---- country cards -------------------------------------------------------- */
.ctry {
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 28px; box-shadow: var(--sh-1);
  transition: transform .2s var(--e-out), box-shadow .2s var(--e-out), border-color .2s var(--e-out);
}
.ctry:hover { transform: translateY(-4px); box-shadow: var(--sh-3); border-color: var(--line-2); }
.ctry__top { display:flex; align-items:center; gap:14px; }
/* The market's own flag. contain, not cover: Nepal's flag is the only
   non-rectangular national flag in the world and cover would crop it to a
   meaningless blue wedge. */
.ctry__flag {
  width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  background:#fff; border:1px solid var(--line); padding:5px;
  display:grid; place-items:center; box-shadow: var(--sh-1);
}
.ctry__flag img { width:100%; height:100%; object-fit:contain; display:block; }
.ctry__n { font-family: var(--display); font-size:1.1875rem; font-weight:700; color: var(--ink); }
.ctry__cur { font-size:.8125rem; color: var(--muted); }
.ctry__sum { margin-top:16px; font-size:.9375rem; color: var(--muted); line-height:1.65; }
.ctry__list { margin-top:18px; display:grid; gap:2px; }
/* A fixed 64px first column, wide enough for a wordmark acceptance mark. Grid
   rather than flex so square tiles and wide wordmarks still line the method
   names up with each other down the whole list. */
.mrow { display:grid; grid-template-columns:64px 1fr auto; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line); }
.mrow__ico { width:32px; height:32px; border-radius:9px; background: var(--tint-2); color: var(--blue); display:grid; place-items:center; flex:0 0 auto; justify-self:center; }
.mrow__ico svg { width:17px; height:17px; }
/* A supplied logo sits on white, not on the tinted icon plate: most payment
   marks are designed for a white background and several are illegible on a
   colour. object-fit keeps a wordmark from being squashed into the square. */

/* A wordmark tile per method. Text, set in the display face, tinted by
   category so the five payment types stay distinguishable across a long list.
   Replaced automatically by an official logo if one is added to
   assets/img/methods/ (see the README there). */
.mrow__ico--mark {
  font-family: var(--display); font-weight: 800; letter-spacing: -.02em;
  font-size: 12px; line-height: 1;
}
.mrow__ico--mark[data-len="3"] { font-size: 10.5px; }
.mrow__ico--mark[data-len="4"] { font-size: 9px; letter-spacing: -.03em; }
.mrow__ico--twallet { background:#EAF3FB; color:#0B63B8; }
.mrow__ico--tbank   { background:#ECEEFB; color:#3A45A8; }
.mrow__ico--tqr     { background:#E2F4F4; color:#0D6E6E; }
.mrow__ico--tcard   { background:#EEF0F4; color:#4A5570; }
.mrow__ico--tcash   { background:#FBF2E4; color:#8A5D14; }
.mrow__ico--tcarrier{ background:#F3ECFA; color:#6B3FA0; }
.mini__ico--logo { background:#fff; border:1px solid var(--line); padding:3px; }
.mini__ico--logo img { width:100%; height:100%; object-fit:contain; }
.mrow__ico--logo { background:#fff; border:1px solid var(--line); padding:4px; }
.mrow__ico--logo img { width:100%; height:100%; object-fit:contain; }
/* Wordmarks (aspect >= 1.9) take the whole column; squashing one into a 24px
   square renders it a few pixels tall and unreadable. */
.mrow__ico--wide { width:64px; }
/* Some scheme owners publish only a white-on-transparent mark (PayNet's FPX,
   MyDebit and DuitNow). Flip the plate rather than recolour their artwork. */
.mrow__ico--dark { background:#1D2733; border-color:#1D2733; }
/* A method with no official mark gets no icon. These hold the grid column so
   names stay aligned; they are deliberately invisible, not a styled tile. */
.mrow__slot { width:32px; height:32px; justify-self:center; }
/* Several networks named in one row: each mark shown separately, side by side. */
.mrow__ico--multi { display:flex; align-items:center; justify-content:center; gap:4px; padding:4px 5px; }
.mrow__ico--multi img { width:auto; height:auto; max-width:16px; max-height:14px; object-fit:contain; }
.mini__slot { width:34px; height:34px; flex:0 0 auto; }
.mini__ico--wide { width:60px; }
.mrow__n { font-size:.9375rem; font-weight:600; color: var(--ink); }
.mrow__t { justify-self:end; font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--muted); background: var(--tint); padding:4px 9px; border-radius: var(--r-pill); white-space:nowrap; }
.ctry__note { margin-top:16px; font-size:.8125rem; color: var(--muted); }

/* A factual restriction the merchant must know. Not a disclaimer to bury. */
.note {
  display:flex; gap:12px; margin-top:16px; padding:14px 16px;
  background: #FFF8EC; border:1px solid #F5E2BE; border-radius: var(--r-sm);
  font-size:.8438rem; color:#7A5A1E; line-height:1.6;
}
.note svg { width:17px; height:17px; flex:0 0 auto; margin-top:1px; color:#C9881B; }
.note--info { background: var(--tint-2); border-color: var(--line-2); color: var(--body); }
.note--info svg { color: var(--blue); }

/* The Solutions area and its header dropdown were removed; the
   .drop*, .nav__item/__btn/__caret and .sheet__sub rules went with it. */

/* ---- prose / detail blocks ------------------------------------------------ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.split--rev > *:first-child { order: 2; }
.plist { display:grid; gap:18px; margin-top:26px; }
.plist li { display:flex; gap:14px; }
.plist__ico { width:38px; height:38px; border-radius:11px; background: var(--tint-2); color: var(--blue); display:grid; place-items:center; flex:0 0 auto; }
.plist__ico svg { width:19px; height:19px; }
.plist b { display:block; font-family: var(--display); font-size:1rem; font-weight:700; color: var(--ink); }
.plist__d { display:block; margin-top:4px; font-size:.9375rem; color: var(--muted); line-height:1.6; }

.tablewrap { overflow-x:auto; border:1px solid var(--line); border-radius: var(--r); background:#fff; box-shadow: var(--sh-1); }
table.t { width:100%; border-collapse:collapse; min-width: 560px; }
table.t th, table.t td { padding: 15px 18px; text-align:left; font-size:.9375rem; border-bottom:1px solid var(--line); }
table.t th { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted); font-weight:700; background: var(--tint); }
table.t tr:last-child td { border-bottom:0; }
table.t td:first-child { font-weight:600; color: var(--ink); }

/* ============================================================================
   MOTION
   ----------------------------------------------------------------------------
   Reveals are scoped to `html.js` AND `prefers-reduced-motion: no-preference`.
   With JS unavailable or motion reduced the hiding rules never apply at all, so
   there is no reveal step that can fail and leave the page blank. That is a
   structural guarantee, not a careful one.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.js .rv { opacity: 0; transform: translateY(18px); }
  html.js .rv-in, html.js .rv-in .rv {
    opacity: 1; transform: none;
    transition: opacity .6s var(--e-out), transform .6s var(--e-out);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  html.js .rv { transition: opacity .6s var(--e-out), transform .6s var(--e-out); transition-delay: calc(var(--i, 0) * 80ms); }

  /* Continuous motion, deliberately limited to two places: the hero art and the
     method marquee. Both are away from running text and neither claims to be
     live data. */
  @keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
  @keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
  @keyframes breathe { 0%,100% { transform: scale(1); opacity:.92 } 50% { transform: scale(1.045); opacity:1 } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes slide { to { transform: translateX(-50%); } }

  .art__pay { animation: float-a 7s var(--e-soft) infinite; }
  .art__row { animation: float-b 8.5s var(--e-soft) infinite .6s; }
  .art__orb { animation: breathe 9s var(--e-soft) infinite; }
  .art__ring { animation: spin 26s linear infinite; }
  .mq__track { animation: slide 42s linear infinite; }
  .mq:hover .mq__track, .mq__track:focus-within { animation-play-state: paused; }
}

/* ============================================================================
   RESPONSIVE — every media query below this line, and nothing after them.
   ========================================================================== */
@media (max-width: 1023px) {
  :root { --header-h: 64px; }
  .sec { padding-block: 80px; }
  .nav, .hdr__cta { display:none; }
  .nav__toggle { display:grid; place-items:center; width:44px; height:44px; margin-left:auto; }
  .nav__toggle span { display:block; width:20px; height:2px; background: var(--ink); border-radius:2px; position:relative; }
  .nav__toggle span::before, .nav__toggle span::after { content:""; position:absolute; left:0; width:20px; height:2px; background: var(--ink); border-radius:2px; }
  .nav__toggle span::before { top:-6px; } .nav__toggle span::after { top:6px; }
  .hdr--doc .nav { display:flex; margin-left:auto; }
  .hdr--doc .nav__toggle { display:none; }
  .hero__grid, .cov, .dev__grid, .split { grid-template-columns: 1fr; }
  .split { gap: 36px; }
  /* Reverse-order layouts must NOT stay reversed once stacked, or the image
     ends up above the heading it belongs to. */
  .split--rev > *:first-child { order: 0; }
  .phero { padding-block: 44px 52px; }
  /* THE TWO ART CARDS STOP BEING ABSOLUTE THE MOMENT THE HERO STACKS.
     They overlap on purpose on the wide hero, where the art column is tall
     enough for the overlap to read as depth. Single-column, the column is
     short, both cards keep their fixed offsets from opposite edges, and they
     land on each other: .art__row sits at a higher z-index and cut the balance
     figure in half on a phone. In normal flow they cannot collide at any
     width, and the float animations only ever move them apart -- float-a is
     negative-only, float-b positive-only. */
  .art {
    min-height: 0; margin-top: 44px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
  }
  .art__pay, .art__row {
    position: static; width: 100%; max-width: 320px; left: auto; top: auto; bottom: auto;
  }
  /* THE GLOBE KEEPS ITS OWN LOOK; IT STOPS SHARING SPACE WITH THE CARDS.
     Pinned to the top-right corner of what is now a stacked card column, the
     orb had nowhere to sit: it poked out past the card edges and showed
     through the gap as a hard shape wedged between them. Rather than dimming
     or blurring it, it takes the top of the stack as its own row. Same
     gradient, same size relationship, same breathing animation, same ring
     around it -- and nothing to overlap, because everything is in flow. */
  .art__orb {
    position: static; width: 190px; height: 190px; inset: auto; margin: 0;
    filter: none; opacity: .92;
  }
  .art__ring {
    width: 230px; height: 230px;
    top: -20px; left: 50%; margin-left: -115px; right: auto;
  }
  .stats, .inds { grid-template-columns: repeat(2,1fr); }
  .rlist { grid-template-columns: repeat(3,1fr); }
  .ctrygrid { grid-template-columns: 1fr; }
  .grid-3, .steps { grid-template-columns: repeat(2,1fr); }
  .foot__grid { grid-template-columns: repeat(2,1fr); }
  .dev { padding: 40px 28px; }

  /* TAP TARGETS.
     A pointer lands where it is aimed; a thumb lands within about 44px of it.
     These three were 31px, 41px and 35px tall — comfortably over the 24px
     WCAG floor, and comfortably under the size that makes a tap reliable
     one-handed. Padding only, so nothing moves on a desktop. */
  .brand { min-height: 44px; }
  .hdr__signin { padding-block: 12px; }
  .foot li a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
  /* The rows grew, so the gap between them can shrink and the column keeps
     roughly the height it had. */
  .foot li + li { margin-top: -2px; }
  /* 21px, which is under the 24px floor, and a breadcrumb is navigation
     rather than prose so it does not get the inline-text exemption. Padding
     on an inline-block: the hit area grows, the text does not move. */
  .crumb a { display: inline-block; padding-block: 12px; }

  /* READS AT ARM'S LENGTH — on a tablet in portrait as much as on a phone,
     which is why this sits with the tap targets and not in the phone-only
     block below.
     .ctry__note is not a caption, it is the substance of the coverage page,
     twenty of them, and 13px is a size for fine print. .note is the callout
     that says which methods are actually live for your account — the last
     thing on the site that should be the smallest text on the screen.
     The footer's trademark line stays at 12px: that one IS fine print. */
  .ctry__note, .ctry__cur, .note { font-size: .90625rem; }
}
@media (max-width: 767px) {
  :root { --pad: 18px; }
  .sec { padding-block: 64px; }
  .head { margin-bottom: 36px; }
  .hero { padding-top: 44px; padding-bottom: 64px; }
  .hero__cta .btn { width:100%; }
  .grid-3, .grid-2, .steps, .stats, .inds, .rlist { grid-template-columns: 1fr; }
  .art__orb { width: 170px; height: 170px; }
  .art__ring { width: 208px; height: 208px; margin-left: -104px; top: -19px; }
    .phero h1 { max-width: none; }
  .ctry { padding: 22px; }
  .cta { padding: 48px 22px; }
  .cta__row .btn { width:100%; }
  .foot__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__q { padding: 18px; font-size:1rem; gap:12px; }
  .faq__a { padding: 0 18px 20px; }
  .dev { padding: 32px 20px; }
  .code pre { font-size:.75rem; }

  /* THE PRICING TABLE STOPS BEING A SIDEWAYS SCROLL.
     table.t carries min-width:560px inside a 339px screen, so a third of it
     was always past the right edge with nothing on screen to say so — the
     wrapper scrolls, but a scrollbar it never shows is not an affordance.
     The three columns are a term, its description and its rate: a definition
     list, not a numeric matrix, so stacking each row costs no comparison and
     reads the way the sentence already reads.
     Note the trade: display:block drops the implicit table semantics, so a
     screen reader gets six plain blocks instead of a grid. For THIS content
     that is no loss — nobody navigates these by column — and the generated
     "Rate" label below restores the one piece of context the hidden header
     was carrying. */
  .tablewrap { overflow-x: visible; border: 0; background: none; box-shadow: none; }
  table.t { min-width: 0; }
  table.t, table.t tbody, table.t tr, table.t td { display: block; width: auto; }
  table.t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.t tr {
    background: #fff; border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-1); padding: 16px 18px; margin-bottom: 12px;
  }
  table.t tr:last-child { margin-bottom: 0; }
  table.t td { border-bottom: 0; padding: 0; }
  table.t td:first-child { font-weight: 700; color: var(--ink); font-size: 1rem; margin-bottom: 4px; }
  table.t td:nth-child(2) { color: var(--muted); line-height: 1.55; }
  table.t td:last-child { margin-top: 12px; font-weight: 600; color: var(--ink); }
  table.t td:last-child::before {
    content: "Rate"; display: block; margin-bottom: 2px;
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--muted); font-weight: 700;
  }

}
@media (max-width: 374px) {
  :root { --pad: 14px; }
  .art__orb { width: 150px; height: 150px; }
  .art__ring { width: 184px; height: 184px; margin-left: -92px; top: -17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}