/* ==========================================================================
   NaijaPay website
   assets/css/styles.css

   Order of this file
   1.  Tokens
   2.  Reset and base
   3.  Layout helpers
   4.  Buttons and links
   5.  Header
   6.  Solutions mega menu, desktop
   7.  Solutions mega menu, mobile accordion
   8.  Hero
   9.  Trust strip
   10. Split sections
   11. App display mocks
   12. Card grid
   13. Accountants band
   14. Proof
   15. Pricing
   16. Closing call to action
   17. Footer
   18. Route toast
   19. Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */

:root {
  /* brand, lifted from the live naijapay.ng build */
  --np-ink:         #17211D;
  --np-deep:        #10271B;
  --np-green:       #087445;
  --np-green-dark:  #0B5B38;
  --np-lime:        #2FD07E;
  --np-gold:        #FECA21;

  /* surfaces */
  --np-paper:       #F8FBF9;
  --np-surface:     #FFFFFF;
  --np-soft:        #F6FAF8;
  --np-mint-100:    #EAF5EF;
  --np-mint-300:    #CFE1D6;
  --np-line:        #E4EBE7;
  --np-line-soft:   #EEF3F0;

  /* text */
  --np-body:        #46564D;
  --np-body-strong: #24352C;
  --np-muted:       #7B8C82;
  --np-faint:       #93A29A;

  /* on dark */
  --np-on-dark:     #A8C0B2;
  --np-on-dark-dim: #7E9488;
  --np-dark-card:   #17382A;
  --np-dark-line:   #244835;

  /* geometry */
  --np-shell:       1200px;
  --np-gutter:      120px;
  --np-radius-sm:   12px;
  --np-radius-md:   18px;
  --np-radius-lg:   22px;
  --np-pill:        999px;

  /* type */
  --np-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
             "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;

  /* motion, per the menu behaviour spec */
  --np-open-intent: 150ms;
  --np-close-delay: 200ms;
}

/* 2. Reset and base -------------------------------------------------------- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--np-paper);
  color: var(--np-ink);
  font-family: var(--np-font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3, h4 { letter-spacing: -0.022em; text-wrap: pretty; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

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

:focus-visible { outline: 2px solid var(--np-green); outline-offset: 3px; border-radius: 4px; }

.np-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 3. Layout helpers -------------------------------------------------------- */

.np-shell { max-width: var(--np-shell); margin: 0 auto; }

.np-section { padding: 96px var(--np-gutter); }
.np-section--tight { padding: 88px var(--np-gutter); }
.np-section--paper   { background: var(--np-paper); }
.np-section--surface { background: var(--np-surface); }
.np-section--deep    { background: var(--np-deep); }
.np-section--ink     { background: var(--np-ink); }

.np-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}

.np-stack   { display: flex; flex-direction: column; }
.np-gap-6   { gap: 6px; }
.np-gap-10  { gap: 10px; }
.np-gap-12  { gap: 12px; }
.np-gap-14  { gap: 14px; }
.np-gap-18  { gap: 18px; }
.np-gap-22  { gap: 22px; }
.np-gap-26  { gap: 26px; }
.np-gap-34  { gap: 34px; }

/* 4. Buttons and links ----------------------------------------------------- */

.np-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 28px;
  border-radius: var(--np-pill);
  font-size: 16px; font-weight: 600;
  transition: background-color 140ms ease, color 140ms ease, transform 140ms ease;
}
.np-btn:active { transform: translateY(1px); }

.np-btn--primary { background: var(--np-green); color: var(--np-surface); }
.np-btn--primary:hover { background: var(--np-green-dark); color: var(--np-surface); }

.np-btn--outline {
  background: var(--np-surface); color: var(--np-deep);
  border: 1.5px solid var(--np-ink);
}
.np-btn--outline:hover { background: var(--np-ink); color: var(--np-surface); }
.np-btn--outline:hover svg { stroke: var(--np-surface); }

.np-btn--lime { background: var(--np-lime); color: #06301D; font-weight: 700; padding: 15px 26px; }
.np-btn--lime:hover { background: #26B76D; color: #06301D; }

.np-btn--ghost-dark {
  border: 1.5px solid var(--np-dark-line); color: var(--np-surface); padding: 15px 26px;
}
.np-btn--ghost-dark:hover { background: var(--np-dark-card); color: var(--np-surface); }

.np-btn--sm { padding: 11px 20px; font-size: 15px; }

.np-textlink {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 600; color: var(--np-green);
  align-self: flex-start;
}
.np-textlink svg { transition: transform 140ms ease; }
.np-textlink:hover svg { transform: translateX(3px); }

.np-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--np-green);
}
.np-eyebrow--lime { color: var(--np-lime); }

.np-h2 { font-size: 44px; line-height: 1.08; font-weight: 700; color: var(--np-deep); }
.np-h2--light { color: var(--np-surface); }
.np-lede { font-size: 18px; line-height: 1.55; color: var(--np-body); }
.np-note { font-size: 11px; color: var(--np-faint); }

.np-checks { display: flex; flex-direction: column; gap: 12px; }
.np-check { display: flex; align-items: flex-start; gap: 11px; }
.np-check svg { flex-shrink: 0; margin-top: 2px; }
.np-check p { font-size: 16px; line-height: 1.45; color: var(--np-body-strong); }

/* 5. Header ---------------------------------------------------------------- */

.np-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--np-surface);
  border-bottom: 1px solid var(--np-line);
}

.np-header__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 18px var(--np-gutter);
}

.np-logo img { width: 148px; height: auto; }

.np-nav { display: flex; align-items: center; gap: 30px; }

.np-nav__item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 500; color: var(--np-body-strong);
  padding: 8px 0;
}
.np-nav__item:hover { color: var(--np-green); }
.np-nav__item svg { transition: transform 160ms ease; }
.np-nav__item[aria-expanded="true"] { color: var(--np-green); }
.np-nav__item[aria-expanded="true"] svg { transform: rotate(180deg); }

.np-header__actions { display: flex; align-items: center; gap: 14px; }
.np-signin { font-size: 15px; font-weight: 500; color: var(--np-body-strong); }

.np-burger { display: none; padding: 6px; }

/* 6. Solutions mega menu, desktop ------------------------------------------ */

.np-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--np-surface);
  border-top: 1px solid var(--np-line);
  border-bottom: 1px solid var(--np-line);
  box-shadow: 0 26px 46px rgba(16, 39, 27, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.np-mega.is-open {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}

.np-mega__inner {
  display: grid;
  grid-template-columns: 268px 1fr 300px;
  gap: 0;
  max-width: var(--np-shell);
  margin: 0 auto;
  /* the panel is capped and must never scroll, per the menu spec */
  max-height: 560px;
}

/* Zone A, the rail */
.np-rail { padding: 22px 20px 22px 0; border-right: 1px solid var(--np-line-soft); }

.np-rail__item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-align: left;
  padding: 13px 14px;
  border-radius: var(--np-radius-sm);
  font-size: 15.5px; font-weight: 600; color: var(--np-body-strong);
  transition: background-color 120ms ease, color 120ms ease;
}
.np-rail__item:hover { background: var(--np-soft); color: var(--np-deep); }
.np-rail__item.is-active { background: var(--np-mint-100); color: var(--np-green-dark); }
.np-rail__item svg { flex-shrink: 0; opacity: 0.55; }
.np-rail__item.is-active svg { opacity: 1; }

/* Zone B, the expansion */
.np-expand { padding: 22px 32px; }

.np-expand__panel { display: none; }
.np-expand__panel.is-active { display: block; animation: npFade 120ms ease; }

@keyframes npFade { from { opacity: 0; } to { opacity: 1; } }

.np-expand__title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--np-faint);
  padding-bottom: 12px;
}

.np-expand__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.np-expand__list--single { grid-template-columns: minmax(0, 1fr); }

.np-expand__link {
  display: block;
  padding: 11px 13px;
  border-radius: var(--np-radius-sm);
  transition: background-color 120ms ease;
}
.np-expand__link:hover { background: var(--np-soft); }

.np-expand__label {
  display: flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--np-deep);
}
.np-expand__hint { font-size: 13px; line-height: 1.45; color: var(--np-muted); padding-top: 3px; }

.np-tag {
  padding: 2px 7px; border-radius: 5px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.np-tag--new  { background: var(--np-mint-100); color: var(--np-green-dark); }
.np-tag--hold { background: #FFF4CC; color: #7A5C00; }

/* the rail and the drawer put a tag straight after a text node, so it needs
   its own spacing; the middle column uses flex gap and does not */
.np-rail__item .np-tag,
.np-drawer__row .np-tag { margin-left: 8px; }

/* Zone C, the fixed card */
.np-mega__card {
  padding: 24px;
  margin: 22px 0;
  background: var(--np-deep);
  border-radius: var(--np-radius-md);
  display: flex; flex-direction: column; gap: 12px; justify-content: center;
}
.np-mega__card p { color: var(--np-on-dark); font-size: 14px; line-height: 1.5; }
.np-mega__card h4 { color: var(--np-surface); font-size: 19px; font-weight: 700; }
.np-mega__card .np-tag--new { background: var(--np-dark-card); color: var(--np-lime); align-self: flex-start; }

.np-mega__card-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; color: var(--np-lime); margin-top: 4px;
}
.np-mega__card-cta:hover { color: var(--np-surface); }

.np-scrim {
  position: fixed; inset: 0; top: 73px; z-index: 40;
  background: rgba(16, 39, 27, 0.24);
  opacity: 0; visibility: hidden;
  transition: opacity 160ms ease, visibility 0s linear 160ms;
}
.np-scrim.is-open { opacity: 1; visibility: visible; transition: opacity 160ms ease, visibility 0s; }

/* 7. Solutions mega menu, mobile accordion --------------------------------- */

.np-drawer {
  position: fixed; inset: 0; top: 69px; z-index: 55;
  background: var(--np-surface);
  padding: 20px;
  overflow-y: auto;
  display: none;
}
.np-drawer.is-open { display: block; }

.np-drawer__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left;
  padding: 17px 4px;
  border-bottom: 1px solid var(--np-line-soft);
  font-size: 17px; font-weight: 600; color: var(--np-deep);
}

.np-drawer__back {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 4px;
  font-size: 15px; font-weight: 600; color: var(--np-green);
}

.np-drawer__view { display: none; }
.np-drawer__view.is-active { display: block; }

.np-drawer__sub {
  display: block;
  padding: 15px 4px;
  border-bottom: 1px solid var(--np-line-soft);
}
.np-drawer__sub .np-expand__label { font-size: 16px; }

.np-drawer__cta { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; }

/* 8. Hero ------------------------------------------------------------------ */

.np-hero { padding: 76px var(--np-gutter) 68px; background: var(--np-surface); }

.np-badge {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  padding: 7px 14px 7px 10px;
  background: var(--np-mint-100);
  border: 1px solid var(--np-mint-300);
  border-radius: var(--np-pill);
  font-size: 13px; font-weight: 600; color: var(--np-green-dark);
}
.np-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--np-lime); }

.np-hero h1 { font-size: 62px; line-height: 1.03; font-weight: 700; color: var(--np-deep); }
.np-hero__sub { font-size: 20px; line-height: 1.5; color: var(--np-body); max-width: 540px; }
.np-hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.np-hero__micro { font-size: 14px; color: #66786D; }
.np-hero__media img { width: 100%; height: auto; border-radius: var(--np-radius-md); }
.np-hero__media .np-note { text-align: right; padding-top: 10px; }

/* 9. Trust strip ----------------------------------------------------------- */

.np-trust { padding: 34px var(--np-gutter); background: var(--np-deep); }
.np-trust__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; }
.np-trust__item h3 { font-size: 15px; font-weight: 700; color: var(--np-surface); padding-bottom: 6px; }
.np-trust__item p { font-size: 13.5px; line-height: 1.5; color: var(--np-on-dark); }

/* 10. Split sections ------------------------------------------------------- */

.np-callout {
  font-size: 16px; line-height: 1.5; color: var(--np-body-strong);
  padding: 18px 20px; background: var(--np-mint-100); border-radius: 14px;
}

/* 11. App display mocks ---------------------------------------------------- */

.np-mock {
  background: var(--np-surface);
  border: 1px solid var(--np-line);
  border-radius: var(--np-radius-lg);
  padding: 26px;
  box-shadow: 0 18px 42px rgba(16, 39, 27, 0.09);
}
.np-mock--dark {
  background: var(--np-deep); border: 0; padding: 28px;
  box-shadow: 0 18px 42px rgba(16, 39, 27, 0.16);
}

.np-mock__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; border-bottom: 1px solid var(--np-line-soft);
}
.np-mock__head h3 { font-size: 19px; font-weight: 700; color: var(--np-deep); }
.np-mock__head p { font-size: 13px; color: var(--np-muted); padding-top: 4px; }

.np-chip { padding: 6px 12px; border-radius: var(--np-pill); font-size: 12px; font-weight: 700; }
.np-chip--due   { background: #FFF4CC; color: #7A5C00; }
.np-chip--ready { background: var(--np-lime); color: #06301D; font-size: 11.5px; padding: 5px 11px; }
.np-chip--wip   { background: var(--np-gold); color: #4A3800; font-size: 11.5px; padding: 5px 11px; }
.np-chip--queued{ background: var(--np-ink); border: 1px solid #3D5A4A; color: var(--np-on-dark); font-size: 11.5px; padding: 5px 11px; }

.np-mock__figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding: 20px 0; }
.np-mock__figures span { display: block; font-size: 12px; color: var(--np-muted); padding-bottom: 5px; }
.np-mock__figures strong { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-mock__figures strong.is-green { color: var(--np-green); }

.np-mock__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: var(--np-soft); border-radius: var(--np-radius-sm);
}
.np-mock__person { display: flex; align-items: center; gap: 11px; }
.np-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--np-mint-300);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--np-deep);
}
.np-mock__row p { font-size: 14px; font-weight: 600; color: var(--np-body-strong); }
.np-mock__row strong { font-size: 14px; font-weight: 600; color: var(--np-deep); }

.np-mock__cta {
  margin-top: 20px; padding: 15px; background: var(--np-green);
  border-radius: var(--np-radius-sm); text-align: center;
  font-size: 15px; font-weight: 700; color: var(--np-surface);
}

.np-mock--dark .np-mock__head { border-bottom: 0; padding-bottom: 20px; }
.np-mock--dark .np-mock__head h3 { font-size: 17px; color: var(--np-surface); }
.np-mock__darkrow {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 17px; background: var(--np-dark-card); border-radius: 13px;
}
.np-mock__darkrow h4 { font-size: 14.5px; font-weight: 600; color: var(--np-surface); }
.np-mock__darkrow p { font-size: 12.5px; color: var(--np-on-dark); padding-top: 3px; }

.np-ratecheck {
  margin-top: 22px; padding: 16px 17px;
  background: var(--np-dark-card); border: 1px solid #2C4E3C; border-radius: 13px;
}
.np-ratecheck span {
  display: block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--np-lime); padding-bottom: 6px;
}
.np-ratecheck p { font-size: 13.5px; line-height: 1.5; color: var(--np-mint-300); }

/* payslip card */
.np-payslip {
  width: 330px; margin: 0 auto;
  background: var(--np-surface); border: 1px solid var(--np-line);
  border-radius: 30px; padding: 22px 20px 26px;
  box-shadow: 0 20px 46px rgba(16, 39, 27, 0.10);
}
.np-payslip__name { font-size: 20px; font-weight: 700; color: var(--np-deep); }
.np-payslip__meta { font-size: 13px; color: var(--np-muted); padding-bottom: 3px; }
.np-payslip__total {
  padding: 20px; background: var(--np-deep); border-radius: 16px; margin-top: 18px;
}
.np-payslip__total span { display: block; font-size: 12.5px; color: var(--np-on-dark); padding-bottom: 6px; }
.np-payslip__total strong { font-size: 30px; font-weight: 700; color: var(--np-surface); letter-spacing: -0.03em; }
.np-payslip__line {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--np-line-soft);
}
.np-payslip__line:last-of-type { border-bottom: 0; }
.np-payslip__line p { font-size: 14px; color: var(--np-body); }
.np-payslip__line strong { font-size: 14px; font-weight: 600; color: var(--np-deep); }
.np-payslip__line strong.is-green { color: var(--np-green); }
.np-payslip__cta {
  margin-top: 14px; padding: 14px; background: var(--np-mint-100);
  border-radius: var(--np-radius-sm); text-align: center;
  font-size: 14px; font-weight: 700; color: var(--np-green-dark);
}

/* freelancer card */
.np-freelance {
  padding: 40px; background: var(--np-soft);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
}
.np-freelance__icon {
  width: 44px; height: 44px; border-radius: var(--np-radius-sm); background: var(--np-deep);
  display: flex; align-items: center; justify-content: center;
}
.np-freelance__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-sm);
}
.np-freelance__row p { font-size: 14px; color: var(--np-body); }
.np-freelance__row strong { font-size: 15px; font-weight: 700; color: var(--np-deep); }
.np-freelance__row strong.is-green { color: var(--np-green); }

/* 12. Card grid ------------------------------------------------------------ */

.np-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.np-card {
  display: flex; flex-direction: column; gap: 13px;
  padding: 28px 24px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.np-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16, 39, 27, 0.08); }
.np-card h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-card p { font-size: 15px; line-height: 1.5; color: #5B6F62; }

/* 13. Accountants band ----------------------------------------------------- */

.np-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.np-tile { padding: 24px; background: var(--np-dark-card); border-radius: 16px; }
.np-tile h3 { font-size: 16px; font-weight: 700; color: var(--np-surface); padding-bottom: 8px; }
.np-tile p { font-size: 14.5px; line-height: 1.5; color: var(--np-on-dark); }

/* 14. Proof ---------------------------------------------------------------- */

.np-proof { display: grid; grid-template-columns: 1.35fr 1fr; gap: 24px; align-items: stretch; }
.np-quote {
  display: flex; flex-direction: column; gap: 22px;
  padding: 40px; background: var(--np-soft);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
}
.np-quote blockquote { margin: 0; font-size: 24px; line-height: 1.45; font-weight: 600; color: var(--np-deep); }
.np-quote figcaption { display: flex; align-items: center; gap: 13px; }
.np-quote .np-avatar { width: 42px; height: 42px; font-size: 14px; }
.np-quote cite { font-style: normal; font-size: 15px; font-weight: 700; color: var(--np-deep); display: block; }
.np-quote small { font-size: 13.5px; color: var(--np-muted); }

.np-reserved {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: 40px; background: var(--np-surface);
  border: 2px dashed #C2D3C9; border-radius: var(--np-radius-lg);
}
.np-reserved span {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--np-faint);
}
.np-reserved p { font-size: 17px; line-height: 1.5; font-weight: 600; color: var(--np-body); }
.np-reserved small { font-size: 13.5px; line-height: 1.5; color: var(--np-muted); }

/* 15. Pricing -------------------------------------------------------------- */

.np-plan {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 26px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: 16px;
}
.np-plan--free { border: 1.5px solid var(--np-green); }
.np-plan h3 { font-size: 17px; font-weight: 700; color: var(--np-deep); }
.np-plan p { font-size: 14px; color: var(--np-muted); padding-top: 4px; }
.np-plan__price { font-size: 22px; font-weight: 700; color: var(--np-green); }
.np-plan__price--tbc { font-size: 17px; color: var(--np-faint); }

/* 16. Closing call to action ----------------------------------------------- */

.np-close { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.np-close h2 { font-size: 48px; line-height: 1.08; font-weight: 700; color: var(--np-surface); max-width: 780px; }
.np-close__lede { font-size: 19px; line-height: 1.55; color: var(--np-on-dark); max-width: 640px; }

.np-form {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 22px;
  background: var(--np-surface); border-radius: var(--np-pill);
  width: 520px; max-width: 100%;
}
.np-form input {
  flex: 1 1 auto; min-width: 0;
  border: 0; outline: 0; background: none;
  font: inherit; font-size: 16px; color: var(--np-deep);
}
.np-form input::placeholder { color: var(--np-faint); }
.np-form button { padding: 14px 26px; font-size: 15.5px; font-weight: 700; }

.np-form__done {
  display: none;
  padding: 18px 26px; background: var(--np-dark-card);
  border: 1px solid var(--np-lime); border-radius: var(--np-pill);
  font-size: 16px; font-weight: 600; color: var(--np-lime);
}
.np-form.is-done { display: none; }
.np-form__done.is-shown { display: block; }

.np-close__micro { font-size: 14px; color: var(--np-on-dark-dim); }

.np-brandline { display: flex; align-items: center; gap: 12px; padding-top: 22px; }
.np-brandline span { width: 30px; height: 1px; background: #3D5A4A; }
.np-brandline p { font-size: 20px; font-weight: 700; color: var(--np-lime); }

/* 17. Footer --------------------------------------------------------------- */

.np-footer { padding: 64px var(--np-gutter) 40px; background: var(--np-deep); }
.np-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; }
.np-footer img { width: 138px; }
.np-footer h3 { font-size: 13px; font-weight: 700; color: var(--np-surface); letter-spacing: 0.04em; padding-bottom: 4px; }
.np-footer a, .np-footer p { font-size: 14px; color: var(--np-on-dark); }
.np-footer a:hover { color: var(--np-surface); }
.np-footer__about { font-size: 14px; line-height: 1.55; max-width: 260px; }
.np-footer__base {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--np-dark-line);
}
.np-footer__base p, .np-footer__base a { font-size: 13px; color: var(--np-on-dark-dim); }
.np-footer__legal { display: flex; align-items: center; gap: 22px; }

/* 18. Route toast ---------------------------------------------------------- */
/* Prototype only. Every nav link reports the route it is meant to open,
   and says so when that page has not been built yet. Delete this block
   and the matching handler in nav.js once the real routes exist. */

.np-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 16px);
  z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 20px;
  background: var(--np-ink); border-radius: var(--np-pill);
  box-shadow: 0 14px 34px rgba(16, 39, 27, 0.28);
  color: var(--np-surface); font-size: 14.5px;
  opacity: 0; visibility: hidden;
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}
.np-toast.is-shown {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity 180ms ease, transform 180ms ease, visibility 0s;
}
.np-toast code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--np-lime); }
.np-toast em { font-style: normal; color: var(--np-gold); }

/* 19. Responsive ----------------------------------------------------------- */

@media (max-width: 1200px) {
  :root { --np-gutter: 56px; }
  .np-hero h1 { font-size: 52px; }
  .np-h2 { font-size: 38px; }
}

/* the menu becomes an accordion below 1024px, never three columns */
@media (max-width: 1023px) {
  :root { --np-gutter: 24px; }

  .np-nav, .np-signin { display: none; }
  .np-burger { display: inline-flex; }
  .np-mega, .np-scrim { display: none; }

  .np-header__bar { padding: 12px var(--np-gutter); gap: 12px; min-height: 68px; }
  .np-logo img { width: 118px; }
  .np-header__actions { gap: 8px; }
  .np-header__actions .np-btn { padding: 10px 16px; font-size: 14px; white-space: nowrap; }
  .np-drawer { top: 68px; }

  .np-section, .np-section--tight { padding: 56px var(--np-gutter); }
  .np-hero { padding: 40px var(--np-gutter) 44px; }
  .np-split { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .np-split--flip > *:first-child { order: 2; }

  .np-hero h1 { font-size: 38px; }
  .np-hero__sub { font-size: 17px; }
  .np-h2 { font-size: 31px; }
  .np-close h2 { font-size: 32px; }
  .np-lede { font-size: 16.5px; }

  .np-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .np-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-proof { grid-template-columns: minmax(0, 1fr); }
  .np-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .np-footer__base { flex-direction: column; align-items: flex-start; gap: 14px; }
  .np-payslip { width: 100%; max-width: 360px; }
  .np-freelance { padding: 26px; }
  .np-mock, .np-mock--dark { padding: 20px; }
  .np-mock__figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .np-trust__grid, .np-cards, .np-tiles, .np-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .np-hero__actions .np-btn { width: 100%; }
  .np-form { flex-direction: column; align-items: stretch; padding: 10px; gap: 8px; }
  .np-form input { padding: 12px 14px; }
  .np-form button { width: 100%; }
  .np-quote { padding: 26px; }
  .np-quote blockquote { font-size: 20px; }
}

/* ==========================================================================
   20. TYPE SYSTEM
   Added September 2026. Three faces, each with one job.

     Bricolage Grotesque   headlines and display. Characterful, variable,
                           institutional without being anonymous.
     Public Sans           body, navigation, everything you read in a line.
     IBM Plex Mono         every number, every schedule, every eyebrow.
                           Figures are the proof object, so they get their
                           own face and they line up in columns.

   Loaded from Google Fonts in the head of every page. Fallback stacks are
   metric-close, so a page with no network still holds its layout.
   ========================================================================== */

:root {
  --np-font-display: "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --np-font:         "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --np-font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

body { font-family: var(--np-font); }

h1, h2, h3, h4,
.np-h2, .np-hero h1, .np-pagehero h1, .np-close h2 {
  font-family: var(--np-font-display);
  font-optical-sizing: auto;
  letter-spacing: -0.028em;
}

.np-hero h1, .np-pagehero h1, .np-close h2 { font-weight: 800; }
.np-h2 { font-weight: 700; }

/* the eyebrow is a label on a machine, so it is set in mono */
.np-eyebrow, .np-tag, .np-pill, .np-step__no, .np-crumb {
  font-family: var(--np-font-mono);
}
.np-eyebrow { font-weight: 600; letter-spacing: 0.1em; font-size: 12px; }

/* every figure lines up and is set in mono */
.np-num,
.np-mock__figures strong,
.np-mock__row strong,
.np-payslip__total strong,
.np-payslip__line strong,
.np-calc__headline strong,
.np-calc__stat strong,
.np-band strong,
.np-plan__price,
.np-price strong,
.np-freelance__row strong,
.np-stat__value {
  font-family: var(--np-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.np-logo img { width: 148px; }

/* ==========================================================================
   21. FOOTER, six column version
   ========================================================================== */

.np-footer__brand {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px;
  padding-bottom: 44px; margin-bottom: 40px;
  border-bottom: 1px solid var(--np-dark-line);
}
.np-footer__brand .np-footer__about { max-width: 520px; font-size: 15px; line-height: 1.6; }
.np-footer__contact { display: flex; flex-direction: column; gap: 16px; }
.np-footer__contact p { font-size: 14.5px; line-height: 1.6; color: var(--np-on-dark); }
.np-footer__contact strong {
  color: var(--np-surface); font-family: var(--np-font-mono);
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
}
.np-footer__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 30px; }
.np-footer h3 {
  font-family: var(--np-font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-lime);
  padding-bottom: 4px;
}
.np-footer a, .np-footer p { font-size: 14px; }

@media (max-width: 1200px) {
  .np-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 24px; }
}
@media (max-width: 1023px) {
  .np-footer__brand { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .np-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-nav { gap: 22px; }
}
@media (max-width: 620px) {
  .np-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* the top bar carries six items now, so it needs a little more room */
@media (min-width: 1024px) and (max-width: 1400px) {
  :root { --np-gutter: 40px; }
  .np-nav { gap: 20px; }
  .np-nav__item { font-size: 14.5px; }
}

/* ==========================================================================
   22. DESIGN SYSTEM REFINEMENT
   September 2026. Three things this section fixes.

   1. CONTRAST. The muted and faint greys failed WCAG AA on white
      (3.55:1 and 2.67:1 against a 4.5:1 requirement). Every small grey
      on this site is now at or above 4.5:1, verified.
   2. TOKENS. Semantic colour, one shadow scale, one icon scale, one
      radius scale. Components stop carrying raw hex and one off shadows.
   3. MOTION AND TOUCH. Reduced motion is respected, and every tap
      target on a phone reaches 44px.
   ========================================================================== */

:root {
  /* --- brand ramp, so borders, fills and states come from one scale --- */
  --np-green-50:  #EAF5EF;
  --np-green-100: #CFE1D6;
  --np-green-200: #A9C9B7;
  --np-green-400: #2FD07E;
  --np-green-600: #087445;
  --np-green-700: #0B5B38;
  --np-green-900: #10271B;

  /* --- neutrals, all AA on their own ground --- */
  --np-body:        #3C4C43;   /* 9.10:1 on white */
  --np-body-strong: #24352C;
  --np-muted:       #5E6F66;   /* 5.33:1 on white */
  --np-faint:       #66786E;   /* 4.69:1 on white */
  --np-on-dark:     #B8CFC2;   /* 9.59:1 on the deep green */
  --np-on-dark-dim: #93AC9E;   /* 6.50:1 on the deep green */
  --np-line-strong: #CBD8D1;

  /* --- semantic, never a raw hex in a component again --- */
  --np-success:    #087445;
  --np-success-bg: #EAF5EF;
  --np-warning:    #8A6A00;
  --np-warning-bg: #FFF6DC;
  --np-danger:     #A33B22;
  --np-danger-bg:  #FDF1EE;
  --np-info:       #0E5A7A;
  --np-info-bg:    #E8F3F8;

  /* --- one shadow scale --- */
  --np-shadow-xs: 0 1px 2px rgba(16, 39, 27, 0.05);
  --np-shadow-sm: 0 2px 6px rgba(16, 39, 27, 0.06);
  --np-shadow-md: 0 10px 24px rgba(16, 39, 27, 0.08);
  --np-shadow-lg: 0 20px 48px rgba(16, 39, 27, 0.12);
  --np-shadow-xl: 0 32px 70px rgba(16, 39, 27, 0.16);

  /* --- icons --- */
  --np-icon-sm: 16px;
  --np-icon-md: 20px;
  --np-icon-lg: 24px;
  --np-icon-xl: 32px;
}

/* ==========================================================================
   23. ICONS
   One family, Phosphor, injected as a sprite by assets/js/icons.js.
   Fill based rather than stroke based, which is why every icon on the
   site now has the same visual weight. There is no second icon family
   and no emoji anywhere.
   ========================================================================== */

.np-i {
  width: var(--np-icon-md); height: var(--np-icon-md);
  fill: currentColor; flex-shrink: 0;
  display: inline-block; vertical-align: -0.15em;
}
.np-i--sm { width: var(--np-icon-sm); height: var(--np-icon-sm); }
.np-i--lg { width: var(--np-icon-lg); height: var(--np-icon-lg); }
.np-i--xl { width: var(--np-icon-xl); height: var(--np-icon-xl); }

.np-check .np-i     { color: var(--np-success); margin-top: 2px; }
.np-card .np-i      { color: var(--np-green-600); }
.np-notice .np-i    { color: var(--np-success); }
.np-notice--warn .np-i { color: var(--np-warning); }
.np-textlink .np-i, .np-btn .np-i { transition: transform 160ms ease; }
.np-textlink:hover .np-i { transform: translateX(3px); }

/* the icon that leads a card gets a plate, so it reads as an object */
.np-card > .np-i:first-child,
.np-iconplate {
  width: 44px; height: 44px; padding: 10px;
  border-radius: 12px;
  background: var(--np-green-50);
  color: var(--np-green-600);
  box-sizing: border-box;
}

/* ==========================================================================
   24. THE RECEIPT
   The visual signature of this site. NaijaPay is a tax compliance company,
   and the object it produces is a dated, referenced remittance receipt.
   So the receipt is the motif: tear lines, dot leaders, mono references
   and a stamp. It is used on anything that is proof, and nowhere else.
   ========================================================================== */

.np-receipt {
  --np-tear-bg: var(--np-paper);
  background: var(--np-surface);
  border: 1px solid var(--np-line);
  border-radius: 8px;
  box-shadow: var(--np-shadow-md);
}
.np-receipt--onwhite { --np-tear-bg: var(--np-surface); }
.np-receipt--dark { background: var(--np-green-900); border-color: #24483A; }

.np-receipt__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 22px 24px 18px;
}
.np-receipt__head h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-receipt--dark .np-receipt__head h3 { color: var(--np-surface); }
.np-receipt__head p {
  font-family: var(--np-font-mono); font-size: 12px;
  color: var(--np-muted); padding-top: 5px;
  letter-spacing: 0.02em;
}
.np-receipt--dark .np-receipt__head p { color: var(--np-on-dark-dim); }

/* the tear line. Two notches punched out of the section behind it. */
.np-tear { position: relative; height: 0; margin: 0 -1px; border-top: 1px dashed var(--np-line-strong); }
.np-receipt--dark .np-tear { border-top-color: #2C5342; }
.np-tear::before, .np-tear::after {
  content: ""; position: absolute; top: -10px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--np-tear-bg);
}
.np-tear::before { left: -10px; }
.np-tear::after  { right: -10px; }

.np-receipt__body { padding: 20px 24px 24px; }

/* label, dot leader, value. The line every receipt in the world uses. */
.np-line { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.np-line__k {
  font-family: var(--np-font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-muted);
  white-space: nowrap;
}
.np-receipt--dark .np-line__k { color: var(--np-on-dark-dim); }
.np-line__dots {
  flex: 1 1 auto; min-width: 18px;
  border-bottom: 1px dotted var(--np-line-strong);
  transform: translateY(-4px);
}
.np-receipt--dark .np-line__dots { border-bottom-color: #2C5342; }
.np-line__v {
  font-family: var(--np-font-mono); font-size: 14px; font-weight: 600;
  color: var(--np-deep); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.np-receipt--dark .np-line__v { color: var(--np-surface); }
.np-line__v--ok { color: var(--np-success); }
.np-receipt--dark .np-line__v--ok { color: var(--np-lime); }

/* the stamp. Only ever on something that is actually true. */
.np-stamp {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px;
  border: 2px solid currentColor; border-radius: 7px;
  font-family: var(--np-font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transform: rotate(-5deg);
  color: var(--np-success);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.np-stamp--gold  { color: #8A6A00; }
.np-stamp--lime  { color: var(--np-lime); box-shadow: inset 0 0 0 1px rgba(16, 39, 27, 0.35); }
.np-stamp--muted { color: var(--np-faint); transform: rotate(-3deg); }
.np-stamp .np-i { width: 14px; height: 14px; }

/* ledger paper, used once or twice as a section ground */
.np-ledger {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 35px, rgba(16, 39, 27, 0.045) 35px 36px);
}
.np-ledger--dark {
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 35px, rgba(255, 255, 255, 0.055) 35px 36px);
}

/* a perforated rule between two sections */
.np-perf {
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--np-line-strong) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  opacity: 0.85;
}

/* ==========================================================================
   25. AVATARS
   Six grounds, all harmonised with the brand, all AA against their own
   text colour. Deterministic per person so the same initials always get
   the same colour.
   ========================================================================== */

.np-avatar {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  font-family: var(--np-font-mono); font-weight: 600; letter-spacing: 0.02em;
}
.np-avatar--a { background: #10271B; color: #7FE3AE; }
.np-avatar--b { background: #087445; color: #E6F6EE; }
.np-avatar--c { background: #0E4C6B; color: #CDE9F7; }
.np-avatar--d { background: #7A3E1D; color: #FBE3CF; }
.np-avatar--e { background: #4A2E63; color: #EADCF7; }
.np-avatar--f { background: #B98A00; color: #2A2000; }

/* ==========================================================================
   26. IMAGE SLOTS
   A designed frame rather than an empty box, so a page with no photograph
   yet still looks finished. Each one states what belongs in it.
   ========================================================================== */

.np-figure {
  position: relative; overflow: hidden;
  border-radius: var(--np-radius-lg);
  background:
    radial-gradient(120% 100% at 12% 8%, #1B4A33 0%, transparent 58%),
    radial-gradient(100% 90% at 92% 96%, #0B5B38 0%, transparent 55%),
    linear-gradient(140deg, #10271B 0%, #17392A 100%);
  box-shadow: var(--np-shadow-md);
  display: flex; align-items: center; justify-content: center;
  min-height: 240px;
}
.np-figure::after {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    135deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 9px);
  pointer-events: none;
}
.np-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-figure--wide  { aspect-ratio: 16 / 9; }
.np-figure--photo { aspect-ratio: 4 / 3; }
.np-figure--tall  { aspect-ratio: 3 / 4; }

.np-figure__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 32px; text-align: center; max-width: 380px;
}
.np-figure__inner .np-i { width: 40px; height: 40px; color: var(--np-lime); opacity: 0.9; }
.np-figure__inner h4 { font-size: 17px; font-weight: 700; color: var(--np-surface); }
.np-figure__inner p { font-size: 14px; line-height: 1.55; color: var(--np-on-dark); }
.np-figure__spec {
  font-family: var(--np-font-mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--np-on-dark-dim);
  padding-top: 4px;
}

/* ==========================================================================
   27. MOTION AND TOUCH
   ========================================================================== */

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

@media (max-width: 1023px) {
  /* every tap target reaches 44px on a phone */
  .np-btn, .np-drawer__row, .np-drawer__back, .np-drawer__sub,
  .np-faq summary, .np-toggle button, .np-nav__item, .np-burger {
    min-height: 44px;
  }
  .np-footer a { display: inline-block; padding: 5px 0; }
  .np-burger { min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* icon colour helpers, used where an icon carries meaning */
.np-i--lime   { color: var(--np-lime); }
.np-i--danger { color: var(--np-danger); }
.np-i--warn   { color: var(--np-warning); }
.np-i--green  { color: var(--np-success); }
.np-i--muted  { color: var(--np-muted); }
.np-btn--outline:hover .np-i { color: var(--np-surface); }

/* ==========================================================================
   28. ACCESSIBILITY AND PERFORMANCE PASS
   Every item here is a rule from the ui-ux-pro-max Quick Reference that the
   site was failing when it was audited across all 49 pages. The audit script
   is re run after every change and has to come back clean.
   ========================================================================== */

/* 2.8 tap delay */
body { touch-action: manipulation; }

/* 2.6 anything you can click says so */
button, summary, [role="button"], a[href], label.np-checkline, .np-rail__item {
  cursor: pointer;
}

/* 1.2 the focus ring has to be visible on dark grounds too */
.np-section--deep :focus-visible,
.np-section--ink :focus-visible,
.np-footer :focus-visible,
.np-mega__card :focus-visible,
.np-panel--deep :focus-visible,
.np-receipt--dark :focus-visible,
.np-figure :focus-visible {
  outline-color: var(--np-lime);
}

/* 1.7 skip link, first thing in the tab order on every page */
.np-skip {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  padding: 12px 20px; border-radius: var(--np-pill);
  background: var(--np-green); color: var(--np-surface);
  font-size: 15px; font-weight: 600;
  transition: top 140ms ease;
}
.np-skip:focus { top: 16px; color: var(--np-surface); }

/* 9.8 the current section of the site is marked in the top bar */
.np-nav__item { position: relative; }
.np-nav__item.is-current { color: var(--np-green); font-weight: 600; }
.np-nav__item.is-current::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -19px;
  height: 2px; background: var(--np-green); border-radius: 2px;
}

/* 1.1 contrast repairs found by the audit */
:root { --np-faint: #63756B; }                        /* 4.5:1 on the soft ground too */
.np-section--deep .np-note,
.np-section--ink .np-note,
.np-receipt--dark .np-note,
.np-panel--deep .np-note { color: var(--np-on-dark-dim); }
.np-code .c { color: #8AA995; }

/* a gradient has no background-color, so text over it has nothing to fall back
   to and a contrast checker cannot resolve it. Give the figure a real ground. */
.np-figure { background-color: var(--np-deep); }

/* 6.2 measure. Long form text stops at a readable line length rather than
   running the full width of a column. */
.np-lede, .np-pagehero__lede, .np-hero__sub, .np-close__lede,
.np-prose p, .np-prose li, .np-faq details p, .np-notice p,
.np-figure__inner p { max-width: min(100%, 68ch); }
.np-close__lede { margin-left: auto; margin-right: auto; }

/* headings that were only ever titles, not levels in the document outline */
.np-notice__t {
  font-family: var(--np-font-display);
  font-size: 15px; font-weight: 700; color: var(--np-deep); padding-bottom: 5px;
}
.np-figure__t {
  font-family: var(--np-font-display);
  font-size: 17px; font-weight: 700; color: var(--np-surface);
}

/* ==========================================================================
   NaijaPay website
   assets/css/pages.css

   Patterns used on the inner Solutions pages only. styles.css carries the
   tokens, the header, the mega menu and everything the home page needs.
   Load pages.css after styles.css.

   1.  Page hero and breadcrumb
   2.  Prose
   3.  Notice
   4.  Compare, today against with us
   5.  Numbered steps
   6.  Panels and tables
   7.  FAQ
   8.  Calculators
   9.  Coverage status
   10. Message preview
   11. Price list
   12. Related pages
   13. Responsive
   ========================================================================== */

/* 1. Page hero and breadcrumb --------------------------------------------- */

.np-pagehero { padding: 56px var(--np-gutter) 64px; background: var(--np-surface); }
.np-pagehero--deep { background: var(--np-deep); }

.np-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--np-muted); padding-bottom: 18px;
}
.np-crumb a { color: var(--np-muted); }
.np-crumb a:hover { color: var(--np-green); }
.np-crumb span { color: var(--np-faint); }
.np-pagehero--deep .np-crumb, .np-pagehero--deep .np-crumb a { color: var(--np-on-dark-dim); }

.np-pagehero h1 { font-size: 50px; line-height: 1.05; font-weight: 700; color: var(--np-deep); }
.np-pagehero--deep h1 { color: var(--np-surface); }
.np-pagehero__lede { font-size: 19px; line-height: 1.55; color: var(--np-body); max-width: 560px; }
.np-pagehero--deep .np-pagehero__lede { color: var(--np-on-dark); }
.np-pagehero__media img { width: 100%; height: auto; border-radius: var(--np-radius-md); }

/* 2. Prose ---------------------------------------------------------------- */

.np-prose { max-width: 720px; }
.np-prose p { font-size: 17px; line-height: 1.62; color: var(--np-body); }
.np-prose p + p { margin-top: 16px; }
.np-prose h3 {
  font-size: 22px; font-weight: 700; color: var(--np-deep);
  margin-top: 34px; margin-bottom: 12px;
}
.np-prose strong { color: var(--np-deep); }
.np-prose ul { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.np-prose li {
  position: relative; padding-left: 20px;
  font-size: 17px; line-height: 1.55; color: var(--np-body);
}
.np-prose li::before {
  content: ""; position: absolute; left: 0; top: 11px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--np-green);
}

/* 3. Notice --------------------------------------------------------------- */

.np-notice {
  display: flex; gap: 14px;
  padding: 20px 22px; border-radius: 14px;
  background: var(--np-mint-100); border: 1px solid var(--np-mint-300);
}
.np-notice--warn { background: #FFF9E6; border-color: #F0E2B0; }
.np-notice--plain { background: var(--np-soft); border-color: var(--np-line); }
.np-notice h4 { font-size: 15px; font-weight: 700; color: var(--np-deep); padding-bottom: 5px; }
.np-notice p { font-size: 15px; line-height: 1.55; color: var(--np-body); }
.np-notice svg { flex-shrink: 0; margin-top: 2px; }

/* 4. Compare -------------------------------------------------------------- */

.np-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.np-compare__col {
  display: flex; flex-direction: column; gap: 14px;
  padding: 30px; border-radius: var(--np-radius-lg);
}
.np-compare__col--now  { background: var(--np-soft); border: 1px solid var(--np-line); }
.np-compare__col--next { background: var(--np-deep); }
.np-compare__col h3 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.np-compare__col--now h3  { color: var(--np-muted); }
.np-compare__col--next h3 { color: var(--np-lime); }
.np-compare__line { display: flex; align-items: flex-start; gap: 11px; }
.np-compare__line p { font-size: 16px; line-height: 1.5; }
.np-compare__col--now p  { color: var(--np-body); }
.np-compare__col--next p { color: #DCEAE1; }
.np-compare__line svg { flex-shrink: 0; margin-top: 3px; }

/* 5. Numbered steps ------------------------------------------------------- */

.np-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.np-steps--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.np-step {
  display: flex; flex-direction: column; gap: 11px;
  padding-top: 20px; border-top: 2px solid var(--np-mint-300);
}
.np-step__no { font-size: 13px; font-weight: 700; color: var(--np-green); letter-spacing: 0.06em; }
.np-step h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-step p { font-size: 15px; line-height: 1.55; color: #5B6F62; }

/* 6. Panels and tables ---------------------------------------------------- */

.np-panel {
  padding: 32px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
}
.np-panel--soft { background: var(--np-soft); }
.np-panel--deep { background: var(--np-deep); border: 0; }
.np-panel--deep h3, .np-panel--deep h2 { color: var(--np-surface); }
.np-panel--deep p { color: var(--np-on-dark); }

.np-tablewrap { overflow-x: auto; border: 1px solid var(--np-line); border-radius: var(--np-radius-md); }
.np-table { width: 100%; border-collapse: collapse; background: var(--np-surface); }
.np-table th {
  text-align: left; padding: 14px 18px;
  background: var(--np-deep); color: var(--np-surface);
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  white-space: nowrap;
}
.np-table td {
  padding: 14px 18px; border-bottom: 1px solid var(--np-line-soft);
  font-size: 15px; color: var(--np-body);
}
.np-table tr:last-child td { border-bottom: 0; }
.np-table td strong { color: var(--np-deep); font-weight: 700; }
.np-table .np-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 7. FAQ ------------------------------------------------------------------ */

.np-faq { display: flex; flex-direction: column; gap: 0; max-width: 820px; }
.np-faq details { border-bottom: 1px solid var(--np-line); }
.np-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; color: var(--np-deep);
}
.np-faq summary::-webkit-details-marker { display: none; }
.np-faq summary::after {
  content: ""; flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2.4px solid var(--np-green); border-bottom: 2.4px solid var(--np-green);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 160ms ease;
}
.np-faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.np-faq details p { padding: 0 4px 24px; font-size: 16px; line-height: 1.6; color: var(--np-body); max-width: 680px; }

/* 8. Calculators ---------------------------------------------------------- */

.np-calc { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

.np-calc__inputs {
  display: flex; flex-direction: column; gap: 20px;
  padding: 32px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
}
.np-field { display: flex; flex-direction: column; gap: 7px; }
.np-field label { font-size: 14px; font-weight: 600; color: var(--np-body-strong); }
.np-field small { font-size: 13px; color: var(--np-muted); }
.np-input {
  display: flex; align-items: center; gap: 8px;
  padding: 0 14px;
  background: var(--np-soft); border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.np-input:focus-within { border-color: var(--np-green); background: var(--np-surface); }
.np-input span { font-size: 17px; font-weight: 600; color: var(--np-muted); }
.np-input input {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 0; border: 0; outline: 0; background: none;
  font: inherit; font-size: 17px; font-weight: 600; color: var(--np-deep);
  font-variant-numeric: tabular-nums;
}
.np-toggle { display: flex; gap: 8px; }
.np-toggle button {
  flex: 1 1 0; padding: 11px 10px;
  background: var(--np-soft); border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  font-size: 14px; font-weight: 600; color: var(--np-body);
}
.np-toggle button.is-on { background: var(--np-mint-100); border-color: var(--np-green); color: var(--np-green-dark); }

.np-calc__out {
  display: flex; flex-direction: column; gap: 18px;
  padding: 32px; background: var(--np-deep); border-radius: var(--np-radius-lg);
}
.np-calc__headline span { font-size: 13.5px; color: var(--np-on-dark); display: block; padding-bottom: 8px; }
.np-calc__headline strong {
  font-size: 42px; font-weight: 700; color: var(--np-surface);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.np-calc__pair {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
}
.np-calc__stat { padding: 16px 18px; background: var(--np-dark-card); border-radius: 13px; }
.np-calc__stat span { display: block; font-size: 12.5px; color: var(--np-on-dark); padding-bottom: 5px; }
.np-calc__stat strong { font-size: 20px; font-weight: 700; color: var(--np-surface); font-variant-numeric: tabular-nums; }
.np-calc__stat strong.is-lime { color: var(--np-lime); }

.np-bands { display: flex; flex-direction: column; gap: 8px; }
.np-band {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; background: var(--np-dark-card); border-radius: 10px;
  font-size: 13.5px; color: var(--np-on-dark);
}
.np-band strong { color: var(--np-surface); font-variant-numeric: tabular-nums; }
.np-band.is-empty { opacity: 0.45; }

/* 9. Coverage status ------------------------------------------------------ */

.np-states { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.np-state {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-sm);
  font-size: 15px; color: var(--np-body-strong);
}
.np-pill {
  padding: 4px 10px; border-radius: var(--np-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  white-space: nowrap;
}
.np-pill--live    { background: var(--np-mint-100); color: var(--np-green-dark); }
.np-pill--progress{ background: #FFF4CC; color: #7A5C00; }
.np-pill--planned { background: var(--np-soft); color: var(--np-muted); }

/* 10. Message preview ----------------------------------------------------- */

.np-message {
  max-width: 520px;
  padding: 20px 22px;
  background: var(--np-surface);
  border: 1px solid var(--np-line); border-left: 3px solid var(--np-green);
  border-radius: 4px 14px 14px 4px;
}
.np-message p { font-size: 15.5px; line-height: 1.6; color: var(--np-body-strong); }
.np-message p + p { margin-top: 12px; }

/* 11. Price list ---------------------------------------------------------- */

.np-prices { display: flex; flex-direction: column; gap: 0; }
.np-price {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 17px 0; border-bottom: 1px solid var(--np-line-soft);
}
.np-price:last-child { border-bottom: 0; }
.np-price h4 { font-size: 16px; font-weight: 600; color: var(--np-deep); }
.np-price p { font-size: 14px; color: var(--np-muted); padding-top: 3px; }
.np-price strong { font-size: 17px; font-weight: 700; color: var(--np-green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.np-price strong.is-free { color: var(--np-green); }
.np-price strong.is-tbc { color: var(--np-faint); }

/* 12. Related pages ------------------------------------------------------- */

.np-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.np-related a {
  display: flex; flex-direction: column; gap: 9px;
  padding: 24px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.np-related a:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(16, 39, 27, 0.08); }
.np-related h3 { font-size: 17px; font-weight: 700; color: var(--np-deep); }
.np-related p { font-size: 14.5px; line-height: 1.5; color: #5B6F62; }

/* 13. Responsive ---------------------------------------------------------- */

@media (max-width: 1023px) {
  .np-pagehero { padding: 32px var(--np-gutter) 40px; }
  .np-pagehero h1 { font-size: 33px; }
  .np-pagehero__lede { font-size: 17px; }
  .np-compare, .np-calc, .np-related { grid-template-columns: minmax(0, 1fr); }
  .np-steps, .np-steps--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-panel { padding: 24px; }
  .np-calc__inputs, .np-calc__out { padding: 24px; }
  .np-calc__headline strong { font-size: 34px; }
}

@media (max-width: 620px) {
  .np-steps, .np-steps--three, .np-states { grid-template-columns: minmax(0, 1fr); }
  .np-faq summary { font-size: 16.5px; }
}

/* ==========================================================================
   14. Anchor sub navigation
   ========================================================================== */

.np-anchors {
  position: sticky; top: 73px; z-index: 40;
  background: var(--np-surface); border-bottom: 1px solid var(--np-line);
  padding: 0 var(--np-gutter);
}
.np-anchors__inner { display: flex; gap: 28px; overflow-x: auto; }
.np-anchors a {
  padding: 16px 0; white-space: nowrap;
  font-size: 14.5px; font-weight: 600; color: var(--np-body);
  border-bottom: 2px solid transparent;
}
.np-anchors a:hover { color: var(--np-green); border-bottom-color: var(--np-green); }

/* ==========================================================================
   15. Market stat band
   Market data with a named source. Never our own traction.
   ========================================================================== */

.np-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.np-stat__value {
  display: block; font-size: 40px; font-weight: 600; color: var(--np-lime);
  line-height: 1.05; padding-bottom: 10px;
}
.np-stat--light .np-stat__value { color: var(--np-green); }
.np-stat p { font-size: 14.5px; line-height: 1.5; color: var(--np-on-dark); }
.np-stat--light p { color: var(--np-body); }
.np-stat cite {
  display: block; font-style: normal; font-size: 12px;
  color: var(--np-on-dark-dim); padding-top: 8px;
  font-family: var(--np-font-mono);
}
.np-stat--light cite { color: var(--np-faint); }

/* ==========================================================================
   16. Pricing table
   ========================================================================== */

.np-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.np-planbox {
  display: flex; flex-direction: column; gap: 16px;
  padding: 30px 26px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
}
.np-planbox--featured { border: 2px solid var(--np-green); box-shadow: 0 16px 40px rgba(8, 116, 69, 0.10); }
.np-planbox__tag {
  align-self: flex-start; padding: 4px 10px; border-radius: var(--np-pill);
  background: var(--np-mint-100); color: var(--np-green-dark);
  font-family: var(--np-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.np-planbox h3 { font-size: 22px; font-weight: 700; color: var(--np-deep); }
.np-planbox__for { font-size: 14px; color: var(--np-muted); }
.np-planbox__price {
  font-family: var(--np-font-mono); font-size: 34px; font-weight: 600;
  color: var(--np-deep); letter-spacing: -0.03em; line-height: 1.1;
}
.np-planbox__unit { font-size: 13.5px; color: var(--np-muted); font-family: var(--np-font); }
.np-planbox ul { display: flex; flex-direction: column; gap: 9px; flex-grow: 1; }
.np-planbox li {
  position: relative; padding-left: 22px;
  font-size: 14.5px; line-height: 1.5; color: var(--np-body);
}
.np-planbox li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--np-green); border-bottom: 2px solid var(--np-green);
  transform: rotate(-45deg);
}

.np-matrix th:first-child, .np-matrix td:first-child { min-width: 260px; }
.np-matrix td { text-align: center; }
.np-matrix td:first-child { text-align: left; font-weight: 500; color: var(--np-body-strong); }
.np-matrix .np-yes { color: var(--np-green); font-weight: 700; }
.np-matrix .np-no { color: var(--np-faint); }
.np-matrix .np-sub { display: block; font-size: 12.5px; color: var(--np-muted); font-weight: 400; }

/* ==========================================================================
   17. Accountant directory
   ========================================================================== */

.np-dir { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }

.np-dir__filters {
  display: flex; flex-direction: column; gap: 22px;
  padding: 26px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-lg);
  position: sticky; top: 100px;
}
.np-dir__filters h3 {
  font-family: var(--np-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-muted);
}
.np-select, .np-search {
  width: 100%; padding: 13px 14px;
  background: var(--np-soft); border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  font: inherit; font-size: 15px; color: var(--np-deep);
}
.np-select:focus, .np-search:focus { outline: 0; border-color: var(--np-green); background: var(--np-surface); }

.np-checkline { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--np-body); cursor: pointer; }
.np-checkline input { width: 17px; height: 17px; accent-color: var(--np-green); }

.np-dir__results { display: flex; flex-direction: column; gap: 14px; }
.np-dir__count {
  font-family: var(--np-font-mono); font-size: 13px; color: var(--np-muted);
  padding-bottom: 4px;
}
.np-firm {
  display: grid; grid-template-columns: 52px 1fr auto; gap: 18px; align-items: start;
  padding: 22px 24px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.np-firm:hover { box-shadow: 0 12px 28px rgba(16, 39, 27, 0.08); transform: translateY(-2px); }
.np-firm__mark {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--np-deep); color: var(--np-lime);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--np-font-mono); font-size: 17px; font-weight: 600;
}
.np-firm h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-firm__meta {
  display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 6px;
  font-size: 13.5px; color: var(--np-muted);
}
.np-firm__meta span { display: inline-flex; align-items: center; gap: 6px; }
.np-firm__blurb { font-size: 14.5px; line-height: 1.5; color: var(--np-body); padding-top: 10px; }
.np-firm__tags { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.np-firm__tags span {
  padding: 4px 10px; border-radius: var(--np-pill);
  background: var(--np-mint-100); color: var(--np-green-dark);
  font-size: 12px; font-weight: 600;
}
.np-firm__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }

.np-dir__empty {
  padding: 46px 30px; text-align: center;
  background: var(--np-soft); border: 2px dashed var(--np-mint-300);
  border-radius: var(--np-radius-lg);
}
.np-dir__empty h3 { font-size: 20px; font-weight: 700; color: var(--np-deep); padding-bottom: 8px; }
.np-dir__empty p { font-size: 15.5px; line-height: 1.55; color: var(--np-body); max-width: 460px; margin: 0 auto 18px; }

/* ==========================================================================
   18. Learning paths and modules
   ========================================================================== */

.np-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.np-path {
  display: flex; flex-direction: column; gap: 12px;
  padding: 28px 26px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
  transition: border-color 150ms ease, transform 150ms ease;
}
.np-path:hover { border-color: var(--np-green); transform: translateY(-3px); }
.np-path__level {
  align-self: flex-start; font-family: var(--np-font-mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--np-green-dark); background: var(--np-mint-100);
  padding: 4px 10px; border-radius: var(--np-pill);
}
.np-path h3 { font-size: 20px; font-weight: 700; color: var(--np-deep); }
.np-path p { font-size: 14.5px; line-height: 1.55; color: #5B6F62; flex-grow: 1; }
.np-path__meta { font-family: var(--np-font-mono); font-size: 12.5px; color: var(--np-muted); }

.np-modules { display: flex; flex-direction: column; gap: 14px; }
.np-module {
  padding: 26px 28px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
}
.np-module__head { display: flex; align-items: baseline; gap: 14px; padding-bottom: 16px; }
.np-module__no { font-family: var(--np-font-mono); font-size: 13px; font-weight: 600; color: var(--np-green); }
.np-module__head h3 { font-size: 20px; font-weight: 700; color: var(--np-deep); }
.np-module__head span { font-family: var(--np-font-mono); font-size: 12.5px; color: var(--np-muted); margin-left: auto; }
.np-lessons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 22px; }
.np-lesson {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; font-size: 15px; color: var(--np-body);
  border-bottom: 1px solid var(--np-line-soft);
}
.np-lesson svg { flex-shrink: 0; }

/* ==========================================================================
   19. Articles, jobs, timeline, integrations
   ========================================================================== */

.np-articles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.np-article {
  display: flex; flex-direction: column; gap: 11px;
  padding: 26px 24px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
}
.np-article__kicker {
  font-family: var(--np-font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--np-green);
}
.np-article h3 { font-size: 19px; font-weight: 700; color: var(--np-deep); line-height: 1.25; }
.np-article p { font-size: 14.5px; line-height: 1.55; color: #5B6F62; flex-grow: 1; }
.np-article__meta { font-family: var(--np-font-mono); font-size: 12px; color: var(--np-faint); }

.np-jobs { display: flex; flex-direction: column; gap: 12px; }
.np-job {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 22px 26px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
}
.np-job h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-job__meta {
  display: flex; gap: 16px; padding-top: 6px;
  font-family: var(--np-font-mono); font-size: 12.5px; color: var(--np-muted);
}

.np-timeline { display: flex; flex-direction: column; gap: 0; }
.np-tl {
  display: grid; grid-template-columns: 130px 1fr; gap: 26px;
  padding: 22px 0; border-top: 1px solid var(--np-line);
}
.np-tl__when {
  font-family: var(--np-font-mono); font-size: 13px; font-weight: 600;
  color: var(--np-green); padding-top: 3px;
}
.np-tl h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); padding-bottom: 6px; }
.np-tl p { font-size: 15.5px; line-height: 1.55; color: var(--np-body); }

.np-integrations { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.np-int {
  display: flex; flex-direction: column; gap: 8px;
  padding: 22px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-md);
}
.np-int__name { font-size: 16px; font-weight: 700; color: var(--np-deep); }
.np-int p { font-size: 13.5px; line-height: 1.5; color: #5B6F62; }

/* ==========================================================================
   20. Forms
   ========================================================================== */

.np-formgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.np-formgrid .np-field--wide { grid-column: 1 / -1; }
.np-textarea {
  width: 100%; min-height: 120px; padding: 13px 14px; resize: vertical;
  background: var(--np-soft); border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm); font: inherit; font-size: 15px; color: var(--np-deep);
}
.np-textarea:focus { outline: 0; border-color: var(--np-green); background: var(--np-surface); }
.np-formdone {
  display: none; padding: 18px 22px; border-radius: var(--np-radius-sm);
  background: var(--np-mint-100); border: 1px solid var(--np-green);
  font-size: 15.5px; font-weight: 600; color: var(--np-green-dark);
}
.np-formdone.is-shown { display: block; }

/* ==========================================================================
   21. Responsive for the new blocks
   ========================================================================== */

@media (max-width: 1023px) {
  .np-anchors { top: 68px; padding: 0 var(--np-gutter); }
  .np-stats, .np-plans, .np-integrations { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-paths, .np-articles { grid-template-columns: minmax(0, 1fr); }
  .np-dir { grid-template-columns: minmax(0, 1fr); }
  .np-dir__filters { position: static; }
  .np-lessons { grid-template-columns: minmax(0, 1fr); }
  .np-firm { grid-template-columns: 44px 1fr; }
  .np-firm__cta { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .np-tl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .np-job { flex-direction: column; align-items: flex-start; gap: 14px; }
  .np-formgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .np-stats, .np-plans, .np-integrations { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   22. App store buttons
   Plain buttons, not the official badge artwork.
   ========================================================================== */

.np-stores { display: flex; gap: 12px; flex-wrap: wrap; }
.np-store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px 11px 17px;
  background: var(--np-ink); color: var(--np-surface);
  border-radius: 12px;
  transition: background-color 150ms ease;
}
.np-store:hover { background: #000000; color: var(--np-surface); }
.np-store span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.15; }
.np-store small {
  font-family: var(--np-font-mono); font-size: 9.5px; font-weight: 400;
  letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.72;
}
.np-section--deep .np-store, .np-pagehero--deep .np-store { background: var(--np-dark-card); }
.np-section--deep .np-store:hover, .np-pagehero--deep .np-store:hover { background: #1E4433; }

/* ==========================================================================
   23. Practice quiz, glossary, help
   ========================================================================== */

.np-quiz {
  max-width: 780px; padding: 34px;
  background: var(--np-surface); border: 1px solid var(--np-line);
  border-radius: var(--np-radius-lg);
}
.np-quiz__no {
  font-family: var(--np-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--np-green);
}
.np-quiz__q { font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--np-deep); padding: 12px 0 22px; }
.np-quiz__options { display: flex; flex-direction: column; gap: 10px; }
.np-quiz__option {
  text-align: left; padding: 15px 18px;
  background: var(--np-soft); border: 1.5px solid var(--np-line);
  border-radius: var(--np-radius-sm);
  font-size: 16px; color: var(--np-body-strong);
  transition: border-color 140ms ease, background-color 140ms ease;
}
.np-quiz__option:hover:enabled { border-color: var(--np-green); background: var(--np-surface); }
.np-quiz__option.is-right { border-color: var(--np-green); background: var(--np-mint-100); color: var(--np-green-dark); font-weight: 600; }
.np-quiz__option.is-wrong { border-color: #E4B7AE; background: #FDF3F1; color: #8A5646; }
.np-quiz__option:disabled { cursor: default; }
.np-quiz__why {
  display: none; margin-top: 20px; padding: 18px 20px;
  background: var(--np-deep); border-radius: var(--np-radius-sm);
  font-size: 15.5px; line-height: 1.6; color: var(--np-mint-300);
}
.np-quiz__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.np-quiz__score { font-family: var(--np-font-mono); font-size: 13px; color: var(--np-muted); }

.np-glossary { display: flex; flex-direction: column; gap: 0; }
.np-gterm { padding: 20px 0; border-bottom: 1px solid var(--np-line); }
.np-gterm h3 { font-size: 18px; font-weight: 700; color: var(--np-deep); }
.np-gterm__pidgin {
  display: block; font-family: var(--np-font-mono); font-size: 12px;
  color: var(--np-green); padding-top: 6px;
}
.np-gterm p { font-size: 15.5px; line-height: 1.6; color: var(--np-body); padding-top: 8px; max-width: 760px; }

/* ==========================================================================
   24. Status board
   ========================================================================== */

.np-status { display: flex; flex-direction: column; gap: 10px; }
.np-statusrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; background: var(--np-surface);
  border: 1px solid var(--np-line); border-radius: var(--np-radius-sm);
}
.np-statusrow p { font-size: 15.5px; font-weight: 500; color: var(--np-body-strong); }
.np-statusrow small { display: block; font-size: 13px; color: var(--np-muted); padding-top: 3px; font-weight: 400; }
.np-dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--np-green-dark); }
.np-dot::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--np-lime); }

/* ==========================================================================
   25. Code block
   ========================================================================== */

.np-code {
  overflow-x: auto; padding: 24px 26px;
  background: var(--np-deep); border-radius: var(--np-radius-md);
}
.np-code pre { margin: 0; }
.np-code code {
  font-family: var(--np-font-mono); font-size: 13.5px; line-height: 1.75;
  color: var(--np-mint-300); white-space: pre;
}
.np-code .k { color: var(--np-lime); }
.np-code .s { color: #FECA21; }
.np-code .c { color: #6E8A78; }

/* a plan whose price is words rather than a figure is set in the display face */
.np-planbox__price--text {
  font-family: var(--np-font-display);
  font-size: 28px; letter-spacing: -0.02em;
}

/* ==========================================================================
   28. The signature, applied
   A perforated rule closes every page hero. It is the tear line at the top
   of a receipt, and it is the one detail that repeats on all 49 pages.
   ========================================================================== */

.np-pagehero { position: relative; padding-bottom: 74px; }
.np-pagehero::after {
  content: ""; position: absolute; left: var(--np-gutter); right: var(--np-gutter); bottom: 26px;
  height: 14px;
  background-image: radial-gradient(circle at 7px 7px, var(--np-line-strong) 1.6px, transparent 1.7px);
  background-size: 14px 14px;
  opacity: 0.9;
}
.np-pagehero--deep::after {
  background-image: radial-gradient(circle at 7px 7px, #2C5342 1.6px, transparent 1.7px);
}

/* a card that leads with an icon gets a plate, and the plate sets the rhythm */
.np-card { padding-top: 26px; }
.np-card .np-i:first-child {
  width: 44px; height: 44px; padding: 10px; box-sizing: border-box;
  border-radius: 12px; background: var(--np-green-50); color: var(--np-green-600);
  margin-bottom: 2px;
}
.np-card:hover .np-i:first-child { background: var(--np-green-100); }

/* a figure that is waiting for a photograph */
.np-figure--slot { border: 1px solid rgba(255, 255, 255, 0.08); }

/* a figure sitting at the top of an article card */
.np-article { padding: 0 0 24px; overflow: hidden; }
.np-article > .np-figure {
  min-height: 0; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none;
  margin-bottom: 14px;
}
.np-article > .np-figure .np-figure__inner { padding: 16px; gap: 8px; }
.np-article > .np-figure .np-figure__inner .np-i { width: 26px; height: 26px; }
.np-article > .np-figure .np-figure__inner h4 { font-size: 13px; }
.np-article > .np-figure .np-figure__spec { font-size: 10px; }
.np-article > *:not(.np-figure) { margin-left: 24px; margin-right: 24px; }

/* two figures side by side */
.np-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .np-figures { grid-template-columns: minmax(0, 1fr); } }

/* the sector plate at the top of an industry page hero */
.np-pagehero .np-iconplate { align-self: flex-start; }

/* ==========================================================================
   29. Audit repairs
   pages.css loads after styles.css, so a few of these have to live here to
   win the cascade. Each one closes a rule the audit was failing.
   ========================================================================== */

/* 1.1 the background shorthand above resets background-color to transparent,
   which leaves white text over a gradient with nothing to fall back to */
.np-figure { background-color: #10271B; }

/* 1.1 comment colour in the code sample */
.np-code .c { color: #8AA995; }

/* 5.6 the figure caption was forcing 380px inside a 327px column at 375 wide */
.np-figure__inner { max-width: min(380px, 100%); }
@media (max-width: 620px) { .np-figure__inner { padding: 20px; } }

/* 6.2 measure. Paragraphs written with an inline style carry no class, so
   they need catching by shape rather than by name. */
main p:not([class]) { max-width: min(100%, 60ch, 560px); }
.np-close__lede { max-width: min(100%, 62ch); }
.np-figure__inner p, .np-figure__spec { max-width: 100%; }

/* 1.1 the figure inside an article card was inheriting the card's muted
   body colour, which is tuned for white and fails on the dark figure ground */
.np-article > .np-figure .np-figure__t { color: var(--np-surface); }
.np-article > .np-figure .np-figure__inner p,
.np-article > .np-figure .np-figure__spec { color: var(--np-on-dark); }

/* 5.6 a figure is a grid child; without these it keeps its intrinsic width
   and pushes the page wider than the viewport at 375 */
.np-figure { max-width: 100%; }
.np-figures > *, .np-grid > * { min-width: 0; }

/* 6.2 measure, second pass. ch resolves against the fallback face when the
   webfont has not arrived, so these caps are set from the real character
   count rather than from the nominal figure. */
.np-note { max-width: min(100%, 60ch, 560px); }
.np-lede { max-width: min(100%, 58ch, 620px); }
.np-prose p, .np-prose li { max-width: min(100%, 60ch, 560px); }
.np-calc__note, .np-calc p, .np-panel > p { max-width: min(100%, 60ch, 560px); }


/* ==========================================================================
   30. TERRITORY ACCENTS
   The site had one hue and 49 pages. A visitor three levels deep had no
   colour cue telling her which part of NaijaPay she was standing in.

   Six territories, each with its own accent ramp. Green stays the brand and
   keeps the core product pages. The accents are wayfinding, not decoration:
   they touch the eyebrow, the receipt rule, the icon plate, the step number
   and the card hairline, and nothing else.

   indigo   adire, the Yoruba indigo dye. Tax learning and reference.
   teal     the running system. Employee surfaces, status, security, API.
   clay     terracotta. The self employed individual.
   plum     partners, accountants and the directory.
   gold     already the second brand colour. Pricing and company.

   Every ink is at or above 4.5:1 on white and on its own tint, and every
   solid takes white text at or above 4.5:1. Verified, not eyeballed.
   ========================================================================== */

:root {
  /* core */
  --np-core-tint: #EAF5EF;
  --np-core-tint2: #CFE1D6;
  --np-core-line: #A9C9B7;
  --np-core-ink: #087445;
  --np-core-solid: #087445;
  --np-core-deep: #10271B;
  /* system */
  --np-system-tint: #F2F7F8;
  --np-system-tint2: #D6E8EB;
  --np-system-line: #B0D7DD;
  --np-system-ink: #296F7A;
  --np-system-solid: #296F7A;
  --np-system-deep: #1A383C;
  /* personal */
  --np-personal-tint: #F8F4F2;
  --np-personal-tint2: #EBDCD6;
  --np-personal-line: #DDBEB0;
  --np-personal-ink: #9B5131;
  --np-personal-solid: #9B5131;
  --np-personal-deep: #3C251A;
  /* partners */
  --np-partners-tint: #F7F2F8;
  --np-partners-tint2: #E7D6EB;
  --np-partners-line: #D4B0DD;
  --np-partners-ink: #7B4389;
  --np-partners-solid: #7B4389;
  --np-partners-deep: #322036;
  /* learning */
  --np-learning-tint: #F2F3F8;
  --np-learning-tint2: #D6D9EB;
  --np-learning-line: #B0B6DD;
  --np-learning-ink: #374495;
  --np-learning-solid: #374495;
  --np-learning-deep: #1C203A;
  /* company */
  --np-company-tint: #F8F6F2;
  --np-company-tint2: #EBE5D6;
  --np-company-line: #DDD1B0;
  --np-company-ink: #896A1A;
  --np-company-solid: #896A1A;
  --np-company-deep: #433514;
}

/* default territory is core, so anything unmapped stays on brand green */
.np-page {
  --np-accent-tint: var(--np-core-tint);
  --np-accent-tint2: var(--np-core-tint2);
  --np-accent-line: var(--np-core-line);
  --np-accent-ink: var(--np-core-ink);
  --np-accent-solid: var(--np-core-solid);
  --np-accent-deep: var(--np-core-deep);
}
.np-page[data-territory="system"] {
  --np-accent-tint: var(--np-system-tint);
  --np-accent-tint2: var(--np-system-tint2);
  --np-accent-line: var(--np-system-line);
  --np-accent-ink: var(--np-system-ink);
  --np-accent-solid: var(--np-system-solid);
  --np-accent-deep: var(--np-system-deep);
}
.np-page[data-territory="personal"] {
  --np-accent-tint: var(--np-personal-tint);
  --np-accent-tint2: var(--np-personal-tint2);
  --np-accent-line: var(--np-personal-line);
  --np-accent-ink: var(--np-personal-ink);
  --np-accent-solid: var(--np-personal-solid);
  --np-accent-deep: var(--np-personal-deep);
}
.np-page[data-territory="partners"] {
  --np-accent-tint: var(--np-partners-tint);
  --np-accent-tint2: var(--np-partners-tint2);
  --np-accent-line: var(--np-partners-line);
  --np-accent-ink: var(--np-partners-ink);
  --np-accent-solid: var(--np-partners-solid);
  --np-accent-deep: var(--np-partners-deep);
}
.np-page[data-territory="learning"] {
  --np-accent-tint: var(--np-learning-tint);
  --np-accent-tint2: var(--np-learning-tint2);
  --np-accent-line: var(--np-learning-line);
  --np-accent-ink: var(--np-learning-ink);
  --np-accent-solid: var(--np-learning-solid);
  --np-accent-deep: var(--np-learning-deep);
}
.np-page[data-territory="company"] {
  --np-accent-tint: var(--np-company-tint);
  --np-accent-tint2: var(--np-company-tint2);
  --np-accent-line: var(--np-company-line);
  --np-accent-ink: var(--np-company-ink);
  --np-accent-solid: var(--np-company-solid);
  --np-accent-deep: var(--np-company-deep);
}

/* --- where the accent is allowed to show ---------------------------------
   Six places, and nowhere else. Colour that appears everywhere stops being
   information and becomes noise. */

/* 1. the eyebrow, the small mono label that opens a section */
.np-page .np-eyebrow { color: var(--np-accent-ink); }

/* 2. the page hero carries a wash of its territory, so the ground itself
      tells you where you are before you read a word */
.np-page .np-pagehero:not(.np-pagehero--deep) {
  background: linear-gradient(180deg,
    var(--np-accent-tint2) 0%,
    var(--np-accent-tint) 46%,
    var(--np-surface) 94%);
}

/* 3. the receipt tear line under every page hero picks up the territory */
.np-page .np-pagehero:not(.np-pagehero--deep)::after {
  background-image: radial-gradient(circle at 7px 7px, var(--np-accent-line) 1.6px, transparent 1.7px);
  opacity: 1;
}

/* 4. the icon plate on a card and in a hero */
.np-page .np-iconplate,
.np-page .np-card .np-i:first-child {
  background: var(--np-accent-tint);
  color: var(--np-accent-ink);
}
.np-page .np-card:hover .np-i:first-child { background: var(--np-accent-tint2); }

/* 5. the step number in a numbered sequence */
.np-page .np-step__no { color: var(--np-accent-ink); }

/* 6. a hairline across the top of a card, which thickens on hover.
      This is the one that gives a grid of cards its rhythm. */
.np-page .np-card {
  border-top: 2px solid var(--np-accent-line);
  transition: border-top-color 160ms ease;
}
.np-page .np-card:hover { border-top-color: var(--np-accent-solid); }

/* the breadcrumb tells you the territory on the way in */
.np-page .np-crumb { color: var(--np-accent-ink); }

/* a tag or pill sitting inside a territory */
.np-page .np-tag, .np-page .np-pill {
  background: var(--np-accent-tint);
  color: var(--np-accent-ink);
  border-color: var(--np-accent-line);
}

/* on a deep band the accent has to lighten or it disappears */
.np-page .np-pagehero--deep .np-eyebrow,
.np-page .np-band .np-eyebrow { color: var(--np-lime); }

/* respect a reader who has asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .np-page .np-card { transition: none; }
}

/* the accent has to lighten on a deep ground or it vanishes. The audit
   caught this on four pages: a green eyebrow at 2.71:1 on the deep band. */
:root {
  --np-core-ondark: #A9C9B7;
  --np-system-ondark: #B0D7DD;
  --np-personal-ondark: #DDBEB0;
  --np-partners-ondark: #D4B0DD;
  --np-learning-ondark: #B0B6DD;
  --np-company-ondark: #DDD1B0;
}
.np-page { --np-accent-ondark: var(--np-core-ondark); }
.np-page[data-territory="system"] { --np-accent-ondark: var(--np-system-ondark); }
.np-page[data-territory="personal"] { --np-accent-ondark: var(--np-personal-ondark); }
.np-page[data-territory="partners"] { --np-accent-ondark: var(--np-partners-ondark); }
.np-page[data-territory="learning"] { --np-accent-ondark: var(--np-learning-ondark); }
.np-page[data-territory="company"] { --np-accent-ondark: var(--np-company-ondark); }

.np-page .np-section--deep .np-eyebrow,
.np-page .np-pagehero--deep .np-eyebrow,
.np-page .np-band .np-eyebrow,
.np-page .np-section--deep .np-step__no { color: var(--np-accent-ondark); }

/* --- two more places the territory earns its keep ------------------------- */

/* the section that follows the hero gets a hairline in its territory, so the
   colour carries past the fold instead of stopping at the hero */
.np-page .np-section + .np-section:not(.np-section--deep) {
  border-top: 1px solid var(--np-accent-line);
}

/* the soft ground alternates with a faint territory tint, which is what
   gives a long page its rhythm on the way down */
.np-page .np-section--soft { background: var(--np-accent-tint); }

/* the top nav marks which territory you are standing in */
.np-nav__item[aria-current="page"],
.np-nav__item.is-current { color: var(--np-green-600); }

/* ==========================================================================
   31. TYPOGRAPHY, SEPTEMBER REVISION
   Bricolage Grotesque and Public Sans out, Instrument Serif and Inter in.

   A grotesque headline reads like software. A serif headline reads like an
   institution, and NaijaPay is asking small businesses to trust it with a
   statutory obligation. That is the whole argument for the change.

   Instrument Serif ships ONE weight, 400. Every display rule that asked for
   700 or 800 has to come off, or the browser synthesises a bold and the
   headline smears. Size and line height carry the emphasis instead.
   ========================================================================== */

.np-hero h1, .np-pagehero h1, .np-close h2, .np-h2,
h1, h2, h3, h4 { font-family: var(--np-font-display); }

.np-hero h1, .np-pagehero h1, .np-close h2 {
  font-weight: 400;
  letter-spacing: -0.014em;
  line-height: 1.02;
}
.np-hero h1   { font-size: clamp(44px, 5.6vw, 78px); }
.np-pagehero h1 { font-size: clamp(40px, 4.8vw, 66px); }
.np-close h2  { font-size: clamp(38px, 4.4vw, 60px); }

.np-h2 {
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
  font-size: clamp(30px, 3.2vw, 44px);
}

/* h3 and h4 stay on the sans. A serif at 18px in a card is illegible mush,
   and the card title is a label, not a statement. */
h3, h4, .np-card h3, .np-plan h3, .np-gterm h2, .np-gterm h3 {
  font-family: var(--np-font);
  font-weight: 600;
  letter-spacing: -0.006em;
}

/* Inter needs its optical sizing and a touch of tracking at body size */
body {
  font-family: var(--np-font);
  font-feature-settings: "cv11", "ss01";
  font-optical-sizing: auto;
  letter-spacing: -0.003em;
}
.np-lede { letter-spacing: -0.005em; }

/* the serif sets a larger optical size, so the lede needs to grow with it */
.np-hero .np-lede, .np-pagehero .np-lede { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; }

/* figures stay mono and tabular, which is the one thing that must not change:
   a naira column that does not line up reads as a mistake */
.np-num, .np-plan__price, .np-stat__value, .np-line__v {
  font-family: var(--np-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   32. DRAWN ASSETS
   ========================================================================== */

/* an avatar is now a drawn portrait rather than two letters */
.np-avatar--art { padding: 0; background: none; overflow: hidden; border-radius: 999px; line-height: 0; }
.np-avatar--art .np-avatar__art { display: block; width: 100%; height: 100%; border-radius: 999px; }

/* a figure slot is now a drawn scene with the brief kept in the corner */
.np-figure { position: relative; overflow: hidden; }
.np-figure__art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.np-figure__tag {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(16, 39, 27, 0.72);
  backdrop-filter: blur(6px);
  font-family: var(--np-font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: #FFFFFF;
}
.np-figure__tag em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.72; font-size: 10px; }
@media (max-width: 620px) { .np-figure__tag { display: none; } }