/* ============================================================================
   VPAY Genesis · SHARED CHROME · 2026-07-21
   One masthead, one footer, one paper register across every page.
   All classes are .vp- prefixed and use literal colours, so this file can be
   dropped onto any page without colliding with that page's own tokens.
   Load AFTER the page's own <style> block.
   ========================================================================== */

.vp-scope{
  --vp-paper:#F7F3E8; --vp-paper2:#F1EAD7; --vp-card:#FFFDF7;
  --vp-ink:#14110C; --vp-ink2:#4A4235; --vp-ink3:#6E665A;
  --vp-line:#DCD2BB; --vp-line2:#E7E0CE;
  --vp-gold:#C9A227; --vp-gold-l:#E7C766; --vp-bronze:#6B5210;
  --vp-grn:#0A4D3A; --vp-cyan:#3FE0C8;
  --vp-s:"Newsreader",Georgia,'Iowan Old Style',serif;
  --vp-b:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --vp-m:"JetBrains Mono",ui-monospace,Menlo,monospace;
}
body.vp-scope{background:var(--vp-paper);color:var(--vp-ink)}

/* ── utility strip ───────────────────────────────────────────────────────── */
.vp-util{background:#171208;color:#B4AC98;font-family:var(--vp-m);
  font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase}
.vp-util .vp-w{display:flex;justify-content:space-between;gap:14px;height:34px;align-items:center}
.vp-util b{color:var(--vp-gold-l);font-weight:500}
.vp-util .vp-ur{display:flex;gap:24px}
.vp-util .vp-dot{color:var(--vp-cyan)}
.vp-util a{color:inherit;text-decoration:none}
@media(max-width:720px){.vp-util .vp-ur span:nth-child(2){display:none}}

/* ── masthead ────────────────────────────────────────────────────────────── */
.vp-w{max-width:1180px;margin:0 auto;padding:0 30px}
.vp-nav{position:sticky;top:0;z-index:50;background:rgba(247,243,232,.9);
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(42,34,16,.14)}
.vp-nav .vp-w{display:flex;align-items:center;justify-content:space-between;height:82px;gap:20px}
.vp-brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.vp-brand svg{width:34px;height:34px;flex:0 0 34px}
.vp-brand b{display:block;font-family:var(--vp-s);font-weight:600;font-size:20px;
  letter-spacing:.1px;color:var(--vp-ink)}
.vp-brand span{display:block;font-family:var(--vp-m);font-size:10px;letter-spacing:2.4px;
  color:var(--vp-ink3);text-transform:uppercase;margin-top:2px}
.vp-links{display:flex;align-items:center;flex:0 0 auto;gap:22px;font-family:var(--vp-m);font-size:11.5px;
  letter-spacing:1.7px;text-transform:uppercase;color:var(--vp-ink2)}
.vp-links a{color:inherit;text-decoration:none;position:relative;white-space:nowrap;transition:color .18s}
.vp-links a:hover{color:var(--vp-ink)}
.vp-links a:not(.vp-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-9px;height:2px;
  background:var(--vp-gold);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.vp-links a:not(.vp-cta):hover::after,.vp-links a.vp-on::after{transform:scaleX(1)}
.vp-links a.vp-on{color:var(--vp-ink)}
.vp-sep{width:1px;height:20px;background:rgba(20,17,12,.2);flex:0 0 1px}
.vp-links .vp-tool i{font-style:normal;font-size:9px;margin-left:4px;opacity:.6;vertical-align:2px}
.vp-cta{background:#1A1508;color:var(--vp-gold-l)!important;border-radius:3px;padding:12px 22px;
  font-family:var(--vp-b);text-transform:none;letter-spacing:.3px;font-weight:600;font-size:13.5px;
  transition:background .2s,color .2s}
.vp-cta:hover{background:var(--vp-gold);color:#1A1204!important}
@media(max-width:1080px){.vp-links{gap:18px;font-size:10.6px;letter-spacing:1.3px}}
@media(max-width:1130px){.vp-links a[href="/#ananse"]{display:none}}
@media(max-width:1010px){.vp-links a[href="/operator"]{display:none}}
@media(max-width:920px){.vp-links .vp-sep{display:none}}
@media(max-width:780px){.vp-links a:not(.vp-cta){display:none}.vp-nav .vp-w{height:68px}}

/* ── footer ──────────────────────────────────────────────────────────────── */
.vp-foot{border-top:1px solid var(--vp-line);background:var(--vp-paper2);margin-top:56px;
  font-family:var(--vp-b)}
.vp-foot .vp-w{padding-top:34px;padding-bottom:30px}
.vp-fbar{display:flex;gap:32px;flex-wrap:wrap;font-family:var(--vp-m);font-size:11.5px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--vp-ink3);
  padding-bottom:20px;border-bottom:1px solid var(--vp-line)}
.vp-fbar a{color:inherit}
.vp-fbar .vp-dot{color:var(--vp-cyan)}
.vp-fcreed{padding:20px 0;font-size:13px;color:var(--vp-ink2)}
.vp-fcreed b{color:var(--vp-bronze)}
.vp-flinks{display:flex;gap:24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--vp-line);
  font-size:13px}
.vp-flinks a{color:var(--vp-ink2);text-decoration:none;transition:color .18s}
.vp-flinks a:hover{color:var(--vp-bronze)}
.vp-fnote{margin-top:16px;font-size:11.6px;line-height:1.6;color:var(--vp-ink3);max-width:90ch}
.vp-sig{margin-top:12px;font:italic 13px/1.4 var(--vp-s);color:var(--vp-grn)}

/* ── CAPTURE · the one conversion component, used on every page ──────────── */
.vp-cap{position:relative;overflow:hidden;border-radius:16px;margin:26px 0;
  background:radial-gradient(120% 150% at 8% 0%,#241D14 0%,#140F09 55%,#070503 100%);
  border:1px solid rgba(201,162,39,.26);color:#F3EEDF;
  box-shadow:0 30px 60px -38px rgba(20,17,12,.9)}
.vp-cap::after{content:'';position:absolute;right:-90px;top:-90px;width:280px;height:280px;
  border-radius:50%;border:1px solid rgba(201,162,39,.16);box-shadow:0 0 0 28px rgba(201,162,39,.04)}
.vp-cap-in{position:relative;z-index:1;padding:30px 32px}
.vp-cap-k{display:inline-flex;align-items:center;gap:8px;font-family:var(--vp-m);font-size:9.5px;
  letter-spacing:2.2px;text-transform:uppercase;color:#7FE9C6;background:rgba(63,224,200,.1);
  border:1px solid rgba(63,224,200,.3);border-radius:30px;padding:7px 13px}
.vp-cap h3{font-family:var(--vp-s);font-weight:400;font-size:clamp(23px,3vw,31px);line-height:1.22;
  color:#fff;margin-top:15px;max-width:23ch}
.vp-cap h3 em{font-style:italic;color:var(--vp-gold-l)}
.vp-cap p{font-size:14px;line-height:1.6;color:rgba(243,238,223,.7);margin-top:12px;max-width:60ch}
.vp-cap p b{color:#fff}
.vp-cf{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;align-items:flex-end}
.vp-cf .f{display:flex;flex-direction:column;gap:6px;flex:1 1 190px;min-width:0}
.vp-cf label{font-family:var(--vp-m);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(243,238,223,.5)}
.vp-cf input,.vp-cf select{font-family:var(--vp-b);font-size:14.5px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(201,162,39,.28);border-radius:8px;
  padding:13px 14px;width:100%;transition:.16s}
.vp-cf input::placeholder{color:rgba(243,238,223,.34)}
.vp-cf input:focus,.vp-cf select:focus{outline:0;border-color:var(--vp-gold-l);
  background:rgba(255,255,255,.1);box-shadow:0 0 0 3px rgba(201,162,39,.18)}
.vp-cf select option{background:#140F09;color:#F3EEDF}
.vp-cf button{flex:0 0 auto;font-family:var(--vp-b);font-weight:700;font-size:14px;color:#1A1204;
  background:linear-gradient(180deg,#E7C766,#C9A227);border:0;border-radius:8px;padding:14px 26px;
  cursor:pointer;transition:transform .18s,box-shadow .18s;
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 26px -14px rgba(140,110,25,.9)}
.vp-cf button:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 20px 34px -14px rgba(140,110,25,1)}
.vp-cap-t{margin-top:15px;font-size:11.8px;line-height:1.6;color:rgba(243,238,223,.45)}
.vp-cap-t b{color:rgba(243,238,223,.72)}
.vp-cap-t a{color:var(--vp-gold-l);text-decoration:none;border-bottom:1px solid rgba(231,199,102,.4)}
.vp-cap-t a:hover{border-bottom-color:var(--vp-gold-l)}
.vp-hp{position:absolute;left:-9999px}
@media(max-width:640px){.vp-cap-in{padding:24px 20px}.vp-cf .f{flex:1 0 100%}.vp-cf button{flex:1 0 100%}}

/* compact inline variant, for mid-page */
.vp-cap.vp-slim .vp-cap-in{padding:22px 24px}
.vp-cap.vp-slim h3{font-size:clamp(19px,2.3vw,23px);margin-top:11px;max-width:30ch}
.vp-cap.vp-slim p{font-size:13px;margin-top:9px}

/* ── kente rule, kept as the one ornamental constant ─────────────────────── */
.vp-kente{height:9px;background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.2) 0 1px,rgba(255,255,255,.1) 1px 2px),
  repeating-linear-gradient(90deg,#16110B 0 5px,#C9A227 5px 13px,#16110B 13px 17px,
   #0A4D3A 17px 29px,#16110B 29px 33px,#C9A227 33px 41px,#16110B 41px 45px,#8E2318 45px 57px)}