/* ═══════════════════════════════════════════════════════════════════
   Kloudblast design system — signal ink, receipt-ledger signature
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Tokens ─────────────────────────────────────────── */
:root {
  --np-primary:      #2451ff;
  --np-primary-dark: #1636b8;
  --np-primary-50:   #eef2ff;
  --np-primary-100:  #dbe4ff;
  --np-accent:       #17c964;
  --np-cyan:         #17c964;
  --np-success:      #17c964;
  --np-warning:      #f5a524;
  --np-danger:       #c01543; /* deeper true-red; AA as text on white (6.1:1) */

  /* Text-safe semantic colors — the bright hues above are for fills/dots/borders
     only; as text on light they fail contrast, so read them from these. */
  --np-success-text: #065f46; /* 7.7:1 */
  --np-warning-text: #92400e; /* 7.1:1 */

  --np-ink:          #0a0e1a;
  --np-ink-2:        #131b30;
  --np-ink-3:        #1c2744;

  --np-bg:           #ffffff;
  --np-surface:      #faf8f3;
  --np-surface-alt:  #f4f1e9;
  --np-card-bg:      #ffffff;
  --np-border:       #e7e3d8;
  --np-border-soft:  #f0ede4;
  --np-text:         #0f1424;
  --np-text-muted:   #4b5468;
  --np-muted:        #5c6478; /* AA on warm paper (#faf8f3): 5.4:1 */

  --np-radius-sm:    0.5rem;
  --np-radius:       0.875rem;
  --np-radius-lg:    1.25rem;
  --np-radius-xl:    1.75rem;

  --np-shadow-sm:    0 1px 2px rgba(10,14,26,.07);
  --np-shadow:       0 4px 20px rgba(36,81,255,.10);
  --np-shadow-hover: 0 14px 32px rgba(36,81,255,.20);
  --np-shadow-lg:    0 20px 48px rgba(10,14,26,.14);

  --np-transition:   all .22s cubic-bezier(.4,0,.2,1);
  /* Action gradient — blue only. Green stays a success/brand colour and never
     bleeds into buttons, so blue cleanly owns "do this". */
  --np-gradient:     linear-gradient(135deg, #2451ff 0%, #1636b8 100%);
  --np-gradient-dark:linear-gradient(160deg, #0a0e1a 0%, #131b30 55%, #1c2744 100%);

  --np-font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;
  --np-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --np-font-mono:    'IBM Plex Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* ─── Base ───────────────────────────────────────────── */
html { font-size: 15px; scroll-behavior: smooth; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
  background: var(--np-bg);
  color: var(--np-text);
  font-family: var(--np-font-body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
main { flex: 1; }

/* Anchor targets clear the sticky navbar (smooth-scroll would otherwise park a
   section eyebrow underneath it). */
section[id], [id].np-section { scroll-margin-top: 4.75rem; }

h1, h2, h3, h4, h5 {
  font-family: var(--np-font-display);
  font-weight: 700; letter-spacing: -.02em; color: var(--np-text);
}

a { color: var(--np-primary); text-decoration: none; transition: var(--np-transition); }
a:hover { color: var(--np-primary-dark); }

/* Money / ledger figures — monospace everywhere a naira amount is printed */
.np-amount {
  font-family: var(--np-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ─── Focus ring ─────────────────────────────────────────
   Keyboard focus is an OUTLINE, not a box-shadow: components own their
   box-shadow (.btn-np-primary, .np-card…) and would override a shadow-based
   ring. Outline can't be overridden by those rules, so the focus state is
   always visible. :focus-visible keeps it off mouse clicks. */
a:focus-visible, .btn:focus-visible, button:focus-visible,
[role="button"]:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .form-check-input:focus-visible,
.np-contact-card:focus-visible, .np-quick-action:focus-visible,
.np-stat-link:focus-visible, .np-nav-signin:focus-visible,
.np-nav-signup:focus-visible, .navbar-brand:focus-visible,
.page-link:focus-visible {
  outline: 3px solid var(--np-primary) !important;
  outline-offset: 2px;
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--np-primary);
}
/* On ink surfaces the blue ring disappears — switch it to white there. */
.np-navbar :focus-visible, .np-hero :focus-visible, .np-cta-band :focus-visible,
.np-footer :focus-visible, .np-page-header :focus-visible, .np-ticket :focus-visible {
  outline-color: #fff !important;
}

/* ─── Navbar ─────────────────────────────────────────── */
.np-navbar {
  background: var(--np-gradient-dark);
  padding: .875rem 0;
  box-shadow: 0 2px 20px rgba(10,14,26,.35);
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.np-navbar .navbar-brand {
  font-family: var(--np-font-display);
  font-size: 1.35rem; font-weight: 700; letter-spacing: -.5px; color: #fff !important;
  display: inline-flex; align-items: center; gap: .35rem;
}
.np-navbar .navbar-brand span { color: var(--np-accent); }
.np-navbar .nav-link {
  color: rgba(255,255,255,.85) !important; font-weight: 500; font-size: .92rem;
  transition: var(--np-transition); border-radius: .5rem; padding: .4rem .85rem !important;
}
.np-navbar .nav-link:hover,
.np-navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.14); }
.np-navbar .navbar-toggler {
  border: 1px solid rgba(255,255,255,.3); border-radius: .5rem; padding: .35rem .55rem;
}
.np-navbar .navbar-toggler:focus { box-shadow: none; }
.np-navbar .navbar-toggler:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.np-navbar .navbar-toggler-icon { filter: invert(1) brightness(1.5); }

.np-nav-signin {
  border: 1px solid rgba(255,255,255,.3); border-radius: .55rem;
  padding: .35rem .95rem; font-size: .85rem; font-weight: 600; color: #fff;
  transition: var(--np-transition);
}
.np-nav-signin:hover { background: rgba(255,255,255,.14); color: #fff; }
.np-nav-signup {
  background: #fff; color: var(--np-primary-dark);
  border-radius: .55rem; padding: .4rem .95rem;
  font-size: .85rem; font-weight: 700;
  transition: var(--np-transition);
}
.np-nav-signup:hover {
  background: var(--np-accent); color: #06341c; transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(23,201,100,.35);
}

/* ─── Page header (app pages) ────────────────────────── */
.np-page-header {
  background: var(--np-gradient-dark);
  color: #fff; padding: 2rem 0 1.75rem; margin-bottom: 2rem;
}
.np-page-header h1 { font-weight: 700; font-size: 1.6rem; margin-bottom: .3rem; color: #fff; }
.np-page-header p { color: rgba(255,255,255,.8); margin: 0; font-size: .92rem; }
@media (min-width: 768px) {
  .np-page-header { padding: 2.75rem 0 2.25rem; }
  .np-page-header h1 { font-size: 1.9rem; }
}

/* ─── Landing hero ───────────────────────────────────── */
.np-hero {
  position: relative; overflow: hidden;
  background: var(--np-gradient-dark);
  color: #fff; padding: 3rem 0 4rem;
}
.np-hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(1000px 400px at 90% 0%, rgba(23,201,100,.20), transparent 50%),
    radial-gradient(700px 300px at 10% 100%, rgba(36,81,255,.40), transparent 50%);
  pointer-events: none;
}
/* Transparent hero portrait, right-anchored, seated straight on the gradient (no blend). */
.np-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('../img/hero.webp') no-repeat 76% bottom;
  background-size: auto 112%;
}
.np-hero > .container { position: relative; z-index: 1; }
/* Stacked layout (tablet/mobile): hide the portrait so text has the full width. */
@media (max-width: 991.98px) {
  .np-hero::after { display: none; }
}
.np-hero .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.1); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.2);
  padding: .35rem .85rem; border-radius: 2rem;
  font-size: .78rem; font-weight: 600; letter-spacing: .3px;
  margin-bottom: 1.25rem; color: #fff;
  font-family: var(--np-font-mono);
}
.np-hero h1 {
  font-size: clamp(1.9rem, 8.5vw, 2.15rem); font-weight: 700; letter-spacing: -.03em;
  line-height: 1.15; color: #fff; margin-bottom: 1rem;
  text-wrap: balance;
}
.np-hero h1 .np-underline {
  background: linear-gradient(120deg, #17c964 0%, #7ef0a8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  /* If the phrase wraps, each line gets the full gradient rather than a slice. */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .np-hero h1 .np-underline { -webkit-text-fill-color: #7ef0a8; color: #7ef0a8; }
}
.np-hero p.lead {
  font-size: 1.05rem; color: rgba(255,255,255,.88);
  max-width: 42rem; margin-bottom: 1.75rem;
}
.np-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.np-hero-trust {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  margin-top: 2rem; font-size: .82rem; color: rgba(255,255,255,.75);
}
.np-hero-trust > span { display: inline-flex; align-items: center; gap: .4rem; }
.np-hero-trust i { color: var(--np-accent); }
@media (min-width: 768px) {
  .np-hero { padding: 5rem 0 6rem; }
  .np-hero h1 { font-size: 3.15rem; }
  .np-hero p.lead { font-size: 1.15rem; }
}
/* Hero CTAs stack full-width on narrow phones instead of wrapping ragged. */
@media (max-width: 575.98px) {
  .np-hero-actions { flex-direction: column; align-items: stretch; }
  .np-hero-actions .btn { width: 100%; justify-content: center; }
}
/* Below lg the receipt ticket now shows (it is the product's signature —
   the mobile hero must not be text-only). Trim its density for the smaller
   column; keep all three lines, the "Queued" row included. */
@media (max-width: 991.98px) {
  .np-hero .np-ticket { max-width: 26rem; margin-inline: auto; padding: 1.15rem 1.15rem 1.85rem; }
  .np-hero .np-ticket .balance-value { font-size: 1.7rem; }
}
/* Desktop: shrink the ticket 20% and drop it to start around her mid-torso,
   leaving the tablet in her hand visible. */
@media (min-width: 992px) {
  .np-hero .np-ticket { transform: translateY(10.5rem) scale(0.8); transform-origin: top right; }
}

/* ─── Signature: the recharge receipt ────────────────── */
.np-ticket {
  position: relative;
  background: var(--np-ink-2);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--np-radius-lg);
  padding: 1.25rem 1.25rem 2rem;
  color: #fff;
  box-shadow: 0 30px 60px rgba(10,14,26,.45);
  clip-path: polygon(
    0% 0%, 100% 0%, 100% 90%,
    93.75% 100%, 87.5% 90%, 81.25% 100%, 75% 90%, 68.75% 100%,
    62.5% 90%, 56.25% 100%, 50% 90%, 43.75% 100%, 37.5% 90%,
    31.25% 100%, 25% 90%, 18.75% 100%, 12.5% 90%, 6.25% 100%, 0% 90%
  );
}
.np-ticket .ticket-stamp {
  position: absolute; top: 1.1rem; right: 1.1rem;
  border: 1.5px solid rgba(23,201,100,.6); color: #7ef0a8;
  border-radius: .4rem; padding: .2rem .55rem;
  font-family: var(--np-font-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(6deg);
}
.np-ticket .balance-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .14em;
  color: rgba(255,255,255,.65); font-family: var(--np-font-mono);
}
.np-ticket .balance-value {
  font-family: var(--np-font-mono);
  font-size: 2.15rem; font-weight: 600; letter-spacing: -.01em; margin-top: .3rem;
}
.np-ticket .np-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: .6rem 0; border-top: 1px dashed rgba(255,255,255,.18);
  font-size: .85rem;
}
.np-ticket .np-line:first-of-type { border-top: none; }
.np-ticket .np-line .np-amount { font-size: .85rem; }
.np-ticket .np-pill {
  padding: .12rem .55rem; border-radius: 1rem; font-size: .68rem;
  font-weight: 700; letter-spacing: .3px; font-family: var(--np-font-mono);
}
.np-pill-ok  { background: rgba(23,201,100,.18);  color: #7ef0a8; }
.np-pill-pen { background: rgba(245,165,36,.18);  color: #fbc978; }

/* Lighter echo of the ticket, used for in-app balance cards */
.np-balance-card {
  background: var(--np-gradient-dark); color: #fff;
  border-radius: var(--np-radius-lg); padding: 1.5rem;
  position: relative; overflow: hidden; height: 100%;
  box-shadow: 0 16px 36px rgba(10,14,26,.3);
  border-top: 3px dashed rgba(255,255,255,.3);
}
.np-balance-card::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(360px 160px at 95% 0%, rgba(23,201,100,.28), transparent 60%);
  pointer-events: none;
}
.np-balance-card > * { position: relative; }
.np-balance-card .balance-label {
  font-size: .75rem; text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.75); font-weight: 600; font-family: var(--np-font-mono);
}
.np-balance-card .balance-value {
  font-family: var(--np-font-mono);
  font-size: 2.1rem; font-weight: 600; letter-spacing: -.01em; margin-top: .25rem;
}

/* ─── Sections ───────────────────────────────────────── */
.np-section { padding: 3.5rem 0; }
.np-section-alt { background: var(--np-surface); }
.np-section .eyebrow {
  display: inline-block; color: var(--np-primary); font-weight: 700;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .75rem; font-family: var(--np-font-mono);
}
.np-section h2 {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em;
  max-width: 42rem; margin: 0 auto .75rem;
}
.np-section p.section-lead {
  color: var(--np-muted); max-width: 40rem; margin: 0 auto 2.5rem;
  font-size: 1rem;
}
@media (min-width: 768px) {
  .np-section { padding: 5rem 0; }
  .np-section h2 { font-size: 2.4rem; }
}

/* ─── Feature cards ──────────────────────────────────── */
.np-feature {
  background: #fff; border: 1px solid var(--np-border-soft);
  border-radius: var(--np-radius); padding: 1.5rem;
  height: 100%; transition: var(--np-transition);
  box-shadow: var(--np-shadow-sm);
}
.np-feature:hover {
  transform: translateY(-3px); box-shadow: var(--np-shadow-hover);
  border-color: rgba(36,81,255,.2);
}
.np-feature .icon-wrap {
  width: 44px; height: 44px; border-radius: .7rem;
  background: var(--np-primary-100); color: var(--np-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.25rem; margin-bottom: 1rem;
}
.np-feature h5 { font-size: 1.05rem; margin-bottom: .5rem; }
.np-feature p  { color: var(--np-text-muted); font-size: .92rem; margin: 0; line-height: 1.55; }

.icon-cyan    { background: #d7f7e6; color: #0e9354; }
.icon-emerald { background: #d1fae5; color: #059669; }
.icon-amber   { background: #fef3c7; color: #b45309; }
.icon-pink    { background: #fce7f3; color: #be185d; }
.icon-blue    { background: #dbe4ff; color: #2451ff; }

/* ─── Steps ──────────────────────────────────────────── */
.np-step { position: relative; padding: 1.25rem 1.5rem; }
.np-step .step-num {
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--np-gradient); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--np-font-mono); font-weight: 700; font-size: .9rem;
  box-shadow: 0 6px 18px rgba(36,81,255,.35);
  margin-bottom: 1rem;
}
.np-step h5 { font-size: 1.05rem; margin-bottom: .35rem; }
.np-step p  { color: var(--np-text-muted); font-size: .92rem; margin: 0; }

/* ─── Pricing cards ──────────────────────────────────── */
.np-pricing {
  background: #fff; border: 1px solid var(--np-border);
  border-radius: var(--np-radius-lg); padding: 2rem 1.5rem;
  height: 100%; display: flex; flex-direction: column;
  transition: var(--np-transition);
  box-shadow: var(--np-shadow-sm);
}
.np-pricing:hover { box-shadow: var(--np-shadow-hover); transform: translateY(-3px); }
/* The single price object. There is one charge, so there is one card — carrying
   the emphasis the old "popular" tier used to. No "Most popular" badge: the
   product is pre-launch and has no popularity to report (PRODUCT.md, Evidence). */
.np-pricing-solo {
  border: 2px solid var(--np-primary);
  box-shadow: 0 20px 44px rgba(36,81,255,.18);
  text-align: center; height: auto;
}
.np-pricing-solo:hover { transform: none; box-shadow: 0 20px 44px rgba(36,81,255,.18); }
.np-pricing .tier-name  {
  font-weight: 700; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase;
  font-family: var(--np-font-mono); color: var(--np-muted);
}
.np-pricing .tier-price {
  font-family: var(--np-font-mono); font-size: 3.15rem; font-weight: 600;
  letter-spacing: -.01em; line-height: 1; margin-top: .35rem;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
}
.np-pricing .tier-price small { font-family: var(--np-font-body); font-size: .95rem; font-weight: 500; color: var(--np-muted); letter-spacing: 0; }

/* Worked examples: dashed rows, echoing the receipt ticket. Showing the charge
   at both ends of the range is what turns "0.5%" into a number you can check. */
.np-price-worked, .price-worked {
  margin: 1.5rem 0 .5rem; border-top: 1px dashed var(--np-border);
}
.price-worked .price-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .7rem .25rem; border-bottom: 1px dashed var(--np-border);
  font-size: .92rem; color: var(--np-text-muted);
}
.price-worked .price-line .np-amount { color: var(--np-text); }
.np-pricing ul { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; flex: 1; }
.np-pricing ul li {
  display: flex; align-items: flex-start; gap: .55rem;
  padding: .35rem 0; font-size: .92rem;
}
.np-pricing ul li i { color: var(--np-success); margin-top: 3px; }

/* ─── CTA band ───────────────────────────────────────── */
.np-cta-band {
  background: var(--np-gradient-dark); color: #fff;
  border-radius: var(--np-radius-xl);
  padding: 2.25rem 1.5rem; text-align: center;
  position: relative; overflow: hidden;
}
.np-cta-band::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(500px 220px at 90% 0%, rgba(23,201,100,.3), transparent 60%);
}
.np-cta-band > * { position: relative; z-index: 1; }
.np-cta-band h3 { color: #fff; font-size: 1.5rem; margin-bottom: .5rem; }
.np-cta-band p  { color: rgba(255,255,255,.85); margin-bottom: 1.5rem; }
@media (min-width: 768px) {
  .np-cta-band { padding: 3.25rem 2rem; }
  .np-cta-band h3 { font-size: 2rem; }
}

/* ─── App cards ──────────────────────────────────────── */
.np-card {
  background: var(--np-card-bg); border: 1px solid var(--np-border-soft);
  border-radius: var(--np-radius); box-shadow: var(--np-shadow-sm);
  transition: var(--np-transition);
}
.np-card:hover { box-shadow: var(--np-shadow); }
.np-card-header {
  border-bottom: 1px solid var(--np-border-soft); padding: 1rem 1.25rem;
  border-radius: var(--np-radius) var(--np-radius) 0 0; background: #fff;
}
.np-card-body { padding: 1.25rem; }
@media (min-width: 768px) {
  .np-card-header { padding: 1.25rem 1.5rem; }
  .np-card-body   { padding: 1.5rem; }
}

/* ─── Drop-zone ──────────────────────────────────────── */
.np-dropzone {
  border: 2px dashed var(--np-border); border-radius: var(--np-radius);
  background: var(--np-surface); padding: 2rem 1.25rem;
  text-align: center; cursor: pointer; transition: var(--np-transition);
}
.np-dropzone:hover,
.np-dropzone.drag-over  { border-color: var(--np-primary); background: rgba(36,81,255,.04); }
.np-dropzone.has-file   { border-color: var(--np-success); background: rgba(23,201,100,.05); }
.np-dropzone .drop-icon { font-size: 2.25rem; color: var(--np-muted); margin-bottom: .75rem; display: block; }
.np-dropzone:hover .drop-icon,
.np-dropzone.drag-over .drop-icon { color: var(--np-primary); }
.np-dropzone.has-file .drop-icon  { color: var(--np-success); }
.np-dropzone .drop-label { font-weight: 600; margin-bottom: .25rem; }
.np-dropzone .drop-hint  { font-size: .85rem; color: var(--np-muted); }
.np-dropzone .file-name  { font-size: .875rem; font-weight: 600; color: var(--np-success); margin-top: .75rem; font-family: var(--np-font-mono); }

/* ─── Badges ─────────────────────────────────────────── */
.np-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .75rem; border-radius: 2rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .4px;
  background: var(--np-primary-100); color: var(--np-primary);
}
.np-badge-mtn     { background: #fef9c3; color: #854d0e; border: 1px solid #fde68a; }
.np-badge-glo     { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.np-badge-airtel  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.np-badge-9mobile { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }

/* ─── Buttons ────────────────────────────────────────── */
.btn-np-primary {
  background: var(--np-gradient); color: #fff; border: none; border-radius: .6rem;
  padding: .65rem 1.5rem; font-weight: 700; letter-spacing: .3px;
  transition: var(--np-transition);
  box-shadow: 0 6px 18px rgba(36,81,255,.3);
}
.btn-np-primary:hover {
  color: #fff; transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(36,81,255,.42);
}
.btn-np-primary.btn-lg { padding: .85rem 1.85rem; font-size: 1rem; }

.btn-np-outline {
  background: transparent; color: var(--np-primary);
  border: 2px solid var(--np-primary); border-radius: .6rem;
  padding: .6rem 1.4rem; font-weight: 700; transition: var(--np-transition);
}
.btn-np-outline:hover { background: var(--np-primary); color: #fff; transform: translateY(-1px); }

.btn-np-ghost {
  background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.28); border-radius: .6rem;
  padding: .65rem 1.4rem; font-weight: 600; transition: var(--np-transition);
  backdrop-filter: blur(4px);
}
.btn-np-ghost:hover { background: rgba(255,255,255,.24); color: #fff; }
.btn-np-ghost.btn-lg { padding: .85rem 1.85rem; }

/* ─── Stat cards ─────────────────────────────────────── */
.np-stat {
  text-align: center; padding: 1.25rem; border-radius: var(--np-radius);
  border: 1px solid var(--np-border-soft); background: #fff;
  transition: var(--np-transition);
  box-shadow: var(--np-shadow-sm);
}
.np-stat:hover { box-shadow: var(--np-shadow); }
.np-stat .stat-value { font-family: var(--np-font-mono); font-size: 1.85rem; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
/* Money tiles hold a naira figure, not a small count — scale it down so large
   sums never overflow the narrow tile, and keep it on one line. */
.np-stat-money .stat-value {
  font-size: clamp(1.1rem, 5vw, 1.35rem);
  white-space: nowrap; overflow: hidden; text-overflow: clip;
}
@media (min-width: 992px) { .np-stat-money .stat-value { font-size: 1.35rem; } }
.np-stat .stat-label {
  font-size: .78rem; color: var(--np-muted); font-weight: 600;
  margin-top: .35rem; text-transform: uppercase; letter-spacing: .6px;
}
.np-stat-success { border-top: 4px solid var(--np-success); }
.np-stat-success .stat-value { color: var(--np-success-text); }
.np-stat-warning { border-top: 4px solid var(--np-warning); }
.np-stat-warning .stat-value { color: var(--np-warning-text); }
.np-stat-primary { border-top: 4px solid var(--np-primary); }
.np-stat-primary .stat-value { color: var(--np-primary); }
.np-stat-danger  { border-top: 4px solid var(--np-danger); }
.np-stat-danger  .stat-value { color: var(--np-danger); }

/* ─── Code block ─────────────────────────────────────── */
.np-code {
  background: var(--np-ink); color: #e2e8f0; border-radius: .6rem;
  padding: 1rem 1.25rem;
  font-family: var(--np-font-mono);
  font-size: .82rem; line-height: 1.7; overflow-x: auto; margin: 0;
}

/* ─── Lists ──────────────────────────────────────────── */
.np-error-item {
  display: flex; align-items: flex-start; gap: .5rem; padding: .55rem .75rem;
  border-radius: .5rem; background: #fef2f2; border: 1px solid #fecaca;
  font-size: .875rem; color: #7f1d1d;
}
.np-info-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .5rem 0; border-bottom: 1px solid var(--np-border-soft); font-size: .875rem;
}
.np-info-item:last-child { border-bottom: none; }
.np-info-item i { color: var(--np-primary); margin-top: 2px; flex-shrink: 0; }

/* ─── Footer ─────────────────────────────────────────── */
.np-footer {
  background: var(--np-ink); color: rgba(255,255,255,.75);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 2.5rem 0 1.75rem; margin-top: auto;
}
.np-footer h6 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .85rem; font-family: var(--np-font-mono); }
.np-footer a  { color: rgba(255,255,255,.7); font-size: .9rem; display: inline-block; padding: .2rem 0; }
.np-footer a:hover { color: var(--np-accent); }
.np-footer .np-footer-about { max-width: 22rem; margin-top: .5rem; font-size: .92rem; }
.np-footer .np-footer-legal {
  max-width: 22rem; margin-top: .75rem; margin-bottom: 0;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.np-footer .brand { font-family: var(--np-font-display); font-weight: 700; font-size: 1.15rem; color: #fff; }
.np-footer .brand span { color: var(--np-accent); }
.np-footer .copy  { font-size: .82rem; color: rgba(255,255,255,.55); margin-top: 1.5rem; font-family: var(--np-font-mono); }
.np-footer .footer-inner {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem; padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ─── Transaction table ──────────────────────────────── */
.np-table { font-size: .875rem; }
.np-table thead th {
  background: var(--np-surface); border-bottom: 2px solid var(--np-border);
  padding: .75rem 1rem; font-weight: 600; color: var(--np-muted);
  text-transform: uppercase; font-size: .72rem; letter-spacing: .5px;
  white-space: nowrap;
}
.np-table tbody td { padding: .8rem 1rem; vertical-align: middle; border-bottom: 1px solid var(--np-border-soft); }
.np-table tbody tr:hover { background: var(--np-primary-50); }
.np-row-failed { background: #fef2f2 !important; }
.np-row-failed:hover { background: #fee2e2 !important; }
.np-row-success { background: #f0fdf4 !important; }
.np-row-success:hover { background: #ecfdf5 !important; }

/* ─── Status pills ───────────────────────────────────── */
.np-status {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .25rem .7rem; border-radius: 2rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .3px;
}
.np-status-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }
.np-status-failed  { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.np-status-pending { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }

/* Refund note under a failed status pill — answers "did I lose the money?" */
.np-refund-note {
  display: flex; align-items: center; gap: .3rem;
  margin-top: .3rem; font-size: .78rem; font-weight: 600;
  color: #065f46;
}
.np-refund-note .np-amount { font-size: .78rem; }
.np-refund-note.np-refund-pending { color: var(--np-muted); font-weight: 500; }

/* ─── Pagination ─────────────────────────────────────── */
.np-pagination .page-link,
.pagination .page-link {
  border: 1px solid var(--np-border); color: var(--np-primary);
  border-radius: .5rem; margin: 0 .15rem; font-weight: 600;
  font-size: .82rem; padding: .4rem .75rem;
  transition: var(--np-transition);
}
.np-pagination .page-item.active .page-link,
.pagination .page-item.active .page-link {
  background: var(--np-gradient); border-color: var(--np-primary); color: #fff;
}
.np-pagination .page-link:hover,
.pagination .page-link:hover {
  background: var(--np-primary-50); color: var(--np-primary-dark);
}

/* ─── Form controls ──────────────────────────────────── */
.form-control, .form-select {
  border-radius: .55rem; border-color: var(--np-border); padding: .55rem .85rem;
  transition: var(--np-transition);
}
.form-control:hover, .form-select:hover { border-color: #c9c2ae; }
.input-group-text {
  border-radius: .55rem 0 0 .55rem; background: var(--np-surface);
  border-color: var(--np-border); color: var(--np-muted);
}
label.form-label { color: var(--np-text); font-size: .9rem; }

/* ─── Alerts polish ──────────────────────────────────── */
.alert { border-radius: .7rem; border: 1px solid transparent; padding: .85rem 1rem; }
.alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }

/* ─── Utilities ──────────────────────────────────────── */
.np-divider { height: 1px; background: var(--np-border-soft); margin: 2rem 0; }
.np-text-gradient {
  background: var(--np-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─── Flash messages (global, _Alerts.cshtml) ────────── */
.np-flash { position: relative; z-index: 5; }
.np-flash:not(:has(.alert)) { display: none; }
.np-alert {
  display: flex; align-items: center; gap: .6rem;
  margin: 1rem 0 0; border-radius: .75rem; border: 1px solid transparent;
  padding: .8rem 2.5rem .8rem 1rem; font-weight: 600; font-size: .9rem;
  box-shadow: var(--np-shadow-sm);
}
.np-alert i { font-size: 1.05rem; flex-shrink: 0; }
.np-alert .btn-close { padding: .9rem; font-size: .7rem; }
.np-alert-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.np-alert-success i { color: var(--np-success); }
.np-alert-danger  { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.np-alert-danger i { color: var(--np-danger); }

/* ─── Navbar wallet balance chip ─────────────────────── */
.np-balance-chip {
  display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  color: #fff; border-radius: 2rem; padding: .3rem .85rem;
  font-size: .85rem; font-weight: 700; letter-spacing: .2px;
  font-family: var(--np-font-mono);
  transition: var(--np-transition);
}
.np-balance-chip:hover { background: rgba(255,255,255,.22); color: #fff; }
.np-balance-chip i { color: var(--np-accent); font-family: var(--np-font-body); }

/* ─── Quick actions (dashboard) ──────────────────────── */
.np-quick-actions {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .np-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.np-quick-action {
  display: flex; align-items: center; gap: .75rem;
  background: #fff; border: 1px solid var(--np-border-soft);
  border-radius: var(--np-radius); padding: .9rem 1rem;
  color: var(--np-text); transition: var(--np-transition);
  box-shadow: var(--np-shadow-sm);
}
.np-quick-action:hover {
  transform: translateY(-2px); box-shadow: var(--np-shadow-hover);
  border-color: rgba(36,81,255,.25); color: var(--np-text);
}
.np-quick-action .qa-icon {
  width: 40px; height: 40px; border-radius: .65rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem;
}
.qa-primary { background: var(--np-primary-100); color: var(--np-primary); }
.qa-cyan    { background: #d7f7e6; color: #0e9354; }
.qa-emerald { background: #d1fae5; color: #059669; }
.qa-amber   { background: #fef3c7; color: #b45309; }
.np-quick-action .qa-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.np-quick-action .qa-text strong { font-size: .92rem; }
.np-quick-action .qa-text small { color: var(--np-muted); font-size: .75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─── Clickable stat cards ───────────────────────────── */
a.np-stat-link { display: block; color: inherit; text-decoration: none; }
a.np-stat-link:hover { transform: translateY(-2px); box-shadow: var(--np-shadow-hover); }

/* ─── Empty states ───────────────────────────────────── */
.np-empty { text-align: center; padding: 3rem 1.25rem; }
.np-empty > i { font-size: 2.5rem; color: #cbd5e1; display: block; margin-bottom: .75rem; }
.np-empty-title { font-weight: 700; font-size: 1.05rem; margin-bottom: .35rem; color: var(--np-text); }
.np-empty-hint { color: var(--np-muted); font-size: .9rem; max-width: 26rem; margin: 0 auto 1rem; }

/* ─── Ledger type badges ─────────────────────────────── */
.np-ledger-funding  { background: #d1fae5; color: #065f46; }
.np-ledger-purchase { background: var(--np-primary-100); color: var(--np-primary-dark); }
.np-ledger-reversal { background: #fef3c7; color: #92400e; }

/* ─── Password visibility toggle ─────────────────────── */
.np-pw-toggle {
  border: 1px solid var(--np-border); border-left: 0;
  border-radius: 0 .55rem .55rem 0; background: var(--np-surface);
  color: var(--np-muted); padding: .45rem .8rem;
}
.np-pw-toggle:hover { color: var(--np-primary); background: var(--np-primary-50); }
.np-pw-toggle:focus { border-color: var(--np-border); }
.np-pw-toggle:focus-visible { outline: 3px solid var(--np-primary); outline-offset: 2px; }

/* ─── Contact cards (landing) ────────────────────────── */
.np-contact-card {
  display: flex; align-items: center; gap: 1rem;
  background: #fff; border: 1px solid var(--np-border-soft);
  border-radius: var(--np-radius); padding: 1.1rem 1.25rem;
  color: var(--np-text); transition: var(--np-transition);
  box-shadow: var(--np-shadow-sm); height: 100%;
}
.np-contact-card:hover {
  transform: translateY(-3px); box-shadow: var(--np-shadow-hover);
  border-color: rgba(36,81,255,.25); color: var(--np-text);
}
.np-contact-card .cc-icon {
  width: 48px; height: 48px; border-radius: .75rem; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem;
}
.cc-primary  { background: var(--np-primary-100); color: var(--np-primary); }
.cc-cyan     { background: #d7f7e6; color: #0e9354; }
.cc-whatsapp { background: #dcfce7; color: #16a34a; }
.np-contact-card .cc-label {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--np-muted); font-weight: 700;
}
.np-contact-card .cc-value { font-weight: 700; font-size: 1rem; color: var(--np-text); font-family: var(--np-font-mono); }

/* ─── Nav pills (entry tabs) ─────────────────────────── */
.nav-pills .nav-link {
  color: var(--np-text-muted); font-weight: 600; font-size: .9rem;
  border-radius: .6rem; border: 1px solid var(--np-border);
  padding: .5rem 1.1rem; background: #fff; transition: var(--np-transition);
}
.nav-pills .nav-link:hover { color: var(--np-primary); border-color: rgba(36,81,255,.35); }
.nav-pills .nav-link.active { background: var(--np-gradient); border-color: transparent; color: #fff; }

/* ─── Touch targets (WCAG 2.5.8) ─────────────────────── */
.form-control, .form-select { min-height: 44px; }
.np-footer a {
  padding: .35rem .1rem; margin-right: .35rem;
}
.np-footer .footer-inner a { padding: .35rem 0; }

/* ─── Skip link ──────────────────────────────────────── */
.np-skip-link {
  position: absolute; left: .5rem; top: -3rem; z-index: 2000;
  background: var(--np-primary); color: #fff;
  padding: .55rem 1rem; border-radius: var(--np-radius-sm);
  font-weight: 700; font-size: .9rem;
  transition: top .18s ease;
}
.np-skip-link:focus { top: .5rem; color: #fff; outline: 3px solid #fff; outline-offset: 2px; }

/* ─── Reduced motion ─────────────────────────────────────
   Keep color/shadow feedback; drop the travel. Smooth-scroll and the
   hover lifts (translateY) go; nothing that carries state is killed. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  .np-feature:hover, .np-pricing:hover, .np-card:hover, .np-stat:hover,
  .np-quick-action:hover, .np-contact-card:hover, .np-stat-link:hover,
  .btn-np-primary:hover, .btn-np-outline:hover, .np-nav-signup:hover {
    transform: none;
  }
}

/* ─── Legal / prose pages (Terms, Privacy) ───────────── */
.np-legal { max-width: 44rem; margin: 0 auto; padding: 0 0 3rem; }
.np-legal h2 {
  font-size: 1.25rem; margin: 2rem 0 .6rem;
}
.np-legal p, .np-legal li { color: var(--np-text-muted); line-height: 1.7; }
.np-legal-list { padding-left: 1.1rem; margin-bottom: 1rem; }
.np-legal-list li { margin-bottom: .35rem; }
.np-legal-note {
  display: flex; align-items: flex-start; gap: .5rem;
  background: var(--np-surface); border: 1px solid var(--np-border);
  border-radius: var(--np-radius); padding: .9rem 1.1rem;
  font-size: .92rem; margin: 1.5rem 0 2rem;
}
.np-legal-todo {
  background: var(--np-primary-50); color: var(--np-primary-dark);
  border-radius: var(--np-radius-sm); padding: .05rem .4rem;
  font-family: var(--np-font-mono); font-size: .82rem;
}
.np-legal-updated { margin-top: 2.5rem; font-size: .85rem; color: var(--np-muted); }

/* ═══ Batch view (transaction dashboard) ═══════════════ */

/* Recipients ↔ Batches segmented toggle */
.np-view-tabs {
  display: inline-flex; gap: .35rem;
  background: var(--np-surface); border: 1px solid var(--np-border);
  border-radius: var(--np-radius); padding: .3rem;
}
.np-view-tab {
  display: inline-flex; align-items: center;
  padding: .45rem 1rem; border-radius: var(--np-radius-sm);
  font-weight: 600; font-size: .9rem; color: var(--np-text-muted);
  transition: var(--np-transition);
}
.np-view-tab:hover:not(.active) { color: var(--np-primary); }
.np-view-tab.active { background: #fff; color: var(--np-primary); box-shadow: var(--np-shadow-sm); }

/* Batch list rows — the whole row is a click target for the batch detail */
.np-batch-row { cursor: pointer; }
.np-batch-row:hover { background: var(--np-primary-50); }
.np-batch-link { color: var(--np-text); }
.np-batch-link:hover { color: var(--np-primary); }
.np-batch-meta {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-top: .15rem; font-size: .78rem; color: var(--np-muted);
}
.np-batch-sched { color: var(--np-primary); }
.np-batch-breakdown { margin-top: .25rem; font-size: .78rem; color: var(--np-muted); }
.np-batch-failed { color: var(--np-danger); }

/* Back link on the ink page header */
.np-back-link {
  display: inline-flex; align-items: center;
  color: rgba(255,255,255,.8); font-size: .85rem; font-weight: 600;
}
.np-back-link:hover { color: #fff; }

/* Batch detail — recipient count strip */
.np-batch-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.np-batch-count { text-align: center; }
.np-batch-count .stat-value { font-family: var(--np-font-mono); font-size: 1.5rem; font-weight: 600; line-height: 1; }
.np-batch-count .stat-label {
  margin-top: .25rem; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .5px; color: var(--np-muted);
}

/* Batch detail — the "what this cost" receipt on the ink card */
.np-batch-receipt { margin-top: .5rem; }
.np-batch-line {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .5rem 0; border-top: 1px dashed rgba(255,255,255,.18);
  font-size: .9rem; color: rgba(255,255,255,.85);
}
.np-batch-line:first-child { border-top: none; }
.np-batch-total { margin-top: .15rem; border-top: 1px dashed rgba(255,255,255,.35); font-weight: 700; color: #fff; }

/* ═══ Dashboard summary redesign — balance hero + status chips ═══ */

/* Balance hero: one ink card carrying balance + sent + refunded */
.np-balance-hero {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.25rem 2rem; padding: 1.5rem 1.75rem;
}
.np-hero-primary { display: flex; align-items: flex-start; gap: 1rem; }
.np-balance-hero .balance-value { font-size: 2.4rem; margin-top: .1rem; }
.np-hero-figures { display: flex; flex-wrap: wrap; gap: 1.25rem 2.25rem; }
.np-hero-figure { display: flex; flex-direction: column; gap: .2rem; }
.np-hero-fig-label {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--np-font-mono); font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.7);
}
.np-hero-fig-value { font-size: 1.25rem; font-weight: 600; color: #fff; }

/* Filter bar: status chips (left) + search & more (right) */
.np-filter-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1rem;
}
.np-status-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.np-status-chip {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border: 1px solid var(--np-border); border-radius: 2rem;
  background: #fff; color: var(--np-text-muted); font-weight: 600; font-size: .9rem;
  box-shadow: var(--np-shadow-sm); transition: var(--np-transition);
}
.np-status-chip:hover { border-color: var(--np-primary); color: var(--np-primary); transform: translateY(-1px); }
.np-status-chip.active { background: var(--np-gradient); border-color: transparent; color: #fff; box-shadow: var(--np-shadow); }
.np-status-chip .chip-count { font-weight: 700; }
.np-status-chip .chip-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
.chip-success .chip-dot { background: var(--np-success); }
.chip-failed  .chip-dot { background: var(--np-danger); }
.chip-pending .chip-dot { background: var(--np-warning); }

/* Search + collapsible "Filters" */
.np-filter-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.np-search .input-group { width: auto; }
.np-search input { min-width: 12rem; }
.np-filter-more { position: relative; }
.np-filter-more-toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center;
  padding: .4rem .9rem; border: 1px solid var(--np-border); border-radius: var(--np-radius-sm);
  background: #fff; color: var(--np-text-muted); font-size: .85rem; font-weight: 600;
  box-shadow: var(--np-shadow-sm); transition: var(--np-transition);
}
.np-filter-more-toggle::-webkit-details-marker { display: none; }
.np-filter-more-toggle::marker { content: ""; }
.np-filter-more-toggle:hover { border-color: var(--np-primary); color: var(--np-primary); }
.np-filter-more[open] .np-filter-more-toggle { border-color: var(--np-primary); color: var(--np-primary); }
.np-filter-more-body {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30;
  display: flex; flex-direction: column; gap: .75rem;
  min-width: 20rem; max-width: min(24rem, 90vw);
  background: #fff; border: 1px solid var(--np-border); border-radius: var(--np-radius);
  padding: 1rem; box-shadow: var(--np-shadow-lg);
}
@media (max-width: 575.98px) {
  .np-balance-hero .balance-value { font-size: 2rem; }
  .np-filter-tools { width: 100%; }
  .np-search { flex: 1; }
  .np-filter-more-body { left: 0; right: auto; }
}

/* ═══ Semantic text colour + link legibility ═══════════
   Override Bootstrap's text utilities with AA-passing values (its greens/ambers
   are too light on white), and underline links that sit inside prose so they are
   not distinguished by colour alone (WCAG 1.4.1). Component links — buttons, nav,
   cards, chips — stay underline-free. */
.text-success { color: var(--np-success-text) !important; }
.text-warning { color: var(--np-warning-text) !important; }
.text-danger  { color: var(--np-danger) !important; }

/* Prose contexts only — not nav (.nav-link) or pagination (.page-link), which
   also live inside <li> but read as controls, not inline links. */
p a:not(.btn):not(.nav-link), .np-legal a, .np-legal-list a, .np-info-item a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* ─── Error page (404 / 500) ─────────────────────────── */
.np-error { padding: 4rem 0 5rem; text-align: center; }
/* No hero portrait behind an error page — keep it clean and centred. */
.np-error::after { display: none; }
.np-error-inner { max-width: 40rem; margin: 0 auto; }
.np-error-code {
  font-family: var(--np-font-mono); font-weight: 600;
  font-size: clamp(4rem, 22vw, 7rem); line-height: 1;
  margin: 0 0 .5rem; letter-spacing: -.04em;
  background: linear-gradient(120deg, #17c964 0%, #7ef0a8 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .np-error-code { color: #7ef0a8; }
}
.np-error-message {
  color: rgba(255,255,255,.85); font-size: 1.05rem;
  margin: 0 auto 2rem; max-width: 34rem;
}
.np-error .np-hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.np-error-ref {
  margin-top: 2.5rem; font-size: .82rem;
  color: rgba(255,255,255,.6); font-family: var(--np-font-mono);
}
.np-error-ref code { color: rgba(255,255,255,.85); word-break: break-all; }