/* ============================================================
   STEMTIDE CREDIT — design system v3 (deep-blue-banker)
   ============================================================ */

:root{
  /* Ink */
  --ink:#0a1628;
  --ink-2:#1b2b44;
  --ink-3:#3a4d68;
  --muted:#5a6b81;
  --muted-2:#7a8aa0;
  --line:#dfe6f0;
  --line-2:#c4d0e2;
  --hairline:#eef2f8;
  --soft:#f1f5fb;
  --soft-2:#e7eef8;
  --white:#fff;

  /* Brand — deeper banker-blue */
  --blue:#0a3a73;
  --blue-2:#072a55;
  --blue-3:#0f4a8c;
  --blue-soft:#e6eef9;
  --steel:#3d5878;
  --steel-soft:#eef2f8;

  /* Restrained accents — single intentional use each */
  --green:#0f7a4d;
  --green-soft:#e3f1ea;
  --gold:#b07a0e;
  --gold-soft:#f6efdc;
  --plum:#5b3a9c;
  --plum-soft:#ece6f5;
  --rose:#b03a5e;

  /* Shadows — calmer */
  --shadow-sm:0 1px 2px rgba(10,22,40,.04), 0 1px 1px rgba(10,22,40,.03);
  --shadow:0 6px 18px rgba(10,22,40,.06);
  --shadow-lg:0 18px 40px rgba(10,22,40,.10);
  --ring:0 0 0 1px var(--line);

  /* Radii — collapsed scale {12, 16, 24, 999} */
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:24px;
  --radius-pill:999px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.6;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{color:var(--muted);margin:0 0 1rem;font-size:1.02rem}
h1,h2,h3,h4{line-height:1.1;margin:0 0 1rem;color:var(--ink);letter-spacing:-.02em}
h1{font-size:clamp(2.2rem,5vw,3.6rem);letter-spacing:-.025em;font-weight:700;line-height:1.1}
h2{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.02em;font-weight:700}
h3{font-size:1.2rem;font-weight:700}
h4{font-size:1rem;font-weight:700}

.container{width:min(1200px,92vw);margin-inline:auto}
.narrow{width:min(820px,92vw);margin-inline:auto}
.skip-link{position:absolute;left:-999px;top:1rem;background:var(--ink);color:#fff;padding:.75rem 1rem;border-radius:var(--radius-pill);z-index:30}
.skip-link:focus{left:1rem}

/* Topbar — flat */
.topbar{
  background:#06182f;
  color:#a8b9d1;
  font-size:.84rem;
}
.topbar-inner{
  display:flex;gap:1.25rem;align-items:center;justify-content:flex-end;
  padding:.65rem 0;flex-wrap:wrap;
}
.topbar a{color:#fff;font-weight:600}
.topbar svg{width:14px;height:14px;vertical-align:-2px;margin-right:.35rem;color:var(--steel)}

/* Header */
.site-header{
  position:sticky;top:0;z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex;align-items:center;gap:1.25rem;min-height:78px;position:relative}
.brand{display:inline-flex;align-items:center;gap:.7rem;font-weight:800;letter-spacing:-.02em;font-size:1.02rem}
.brand-mark{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--blue);
  color:#fff;font-size:.85rem;font-weight:900;
  box-shadow:none;
}
.main-nav{
  display:flex;align-items:center;gap:.4rem;margin-left:auto;
  font-weight:600;font-size:.94rem;
}
.main-nav>a,.has-mega>a{
  padding:.65rem .85rem;color:var(--ink-3);border-radius:var(--radius-sm);
  transition:background .15s ease,color .15s ease;
}
.main-nav .active,.main-nav a:hover,.has-mega:hover>a{color:var(--blue);background:var(--blue-soft)}
.nav-cta{margin-left:.5rem}
.nav-toggle{
  display:none;margin-left:auto;border:1px solid var(--line);background:#fff;
  border-radius:var(--radius-sm);padding:.6rem .8rem;font-size:1.2rem;cursor:pointer
}

/* Mega-menu */
.has-mega{position:relative}
.mega-menu{
  position:absolute;left:50%;top:100%;
  transform:translateX(-50%) translateY(14px);
  width:min(960px,92vw);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);border-radius:var(--radius);
  padding:1.2rem;display:grid;grid-template-columns:280px 1fr;gap:1.1rem;
  opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility .18s ease;
}
.has-mega:hover .mega-menu,.has-mega:focus-within .mega-menu{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.mega-copy{
  background:var(--soft);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;
}
.mega-copy h3{margin-bottom:.5rem}
.mega-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.mega-grid a{
  display:flex;align-items:flex-start;gap:.75rem;
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem .9rem;
  transition:border-color .15s ease,background .15s ease;
}
.mega-grid a:hover{border-color:var(--blue);background:var(--blue-soft)}
.mega-grid .m-icon{
  flex:0 0 36px;height:36px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);
}
.mega-grid strong{display:block;font-size:.95rem;margin-bottom:.2rem}
.mega-grid span{display:block;color:var(--muted);font-weight:500;font-size:.83rem;line-height:1.4}

/* Buttons — flat, banker-credible */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--radius-pill);padding:.8rem 1.25rem;font-weight:700;font-size:.94rem;
  border:1px solid transparent;cursor:pointer;letter-spacing:.005em;
  transition:box-shadow .15s ease,background .15s ease,color .15s ease,border-color .15s ease;
}
.btn:hover{transform:none}
.btn-primary{background:var(--blue);color:#fff;box-shadow:none}
.btn-primary:hover{background:var(--blue-2);box-shadow:var(--shadow-sm)}
.btn-secondary{background:var(--steel-soft);color:var(--blue)}
.btn-secondary:hover{background:#e1e8f3}
.btn-light{background:#fff;color:var(--blue);box-shadow:var(--shadow-sm)}
.btn-outline{border-color:var(--line-2);color:var(--ink);background:#fff}
.btn-outline:hover{border-color:var(--blue);color:var(--blue);background:#fff}
.btn-outline-light{border-color:rgba(255,255,255,.45);color:#fff;background:transparent}
.btn-outline-light:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn-ghost{color:var(--blue);background:transparent;padding-inline:.4rem}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:var(--ink-2)}
.text-link{color:var(--blue);font-weight:700;display:inline-flex;align-items:center;gap:.3rem}
.text-link:hover{text-decoration:underline}

/* Eyebrow — neutral default + single .accent variant */
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;
  font-weight:700;color:var(--ink-2);margin-bottom:.85rem;
}
.eyebrow:before{content:"";width:24px;height:2px;background:var(--steel);border-radius:2px}
.eyebrow.accent{color:var(--green)}
.eyebrow.accent:before{background:var(--green)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(4rem,7vw,6rem) 0 clamp(5rem,8vw,7rem);
  background:linear-gradient(180deg,#fbfdff 0%,#f1f5fb 100%);
  border-bottom:1px solid var(--line);
}
.hero>*{position:relative;z-index:1}
.hero-grid{display:grid;grid-template-columns:1.05fr .85fr;gap:3.5rem;align-items:center}
.hero-copy h1{margin-bottom:1.25rem}
.hero-copy h1 em{
  font-style:normal;
  background:none;
  -webkit-background-clip:initial;background-clip:initial;
  color:var(--ink);font-weight:800;
}
.hero-copy p,.page-hero p{font-size:1.08rem;max-width:640px;color:var(--ink-2)}
.hero-actions,.inline-actions,.cta-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem}
.trust-row{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.75rem}
.trust-row span{
  display:inline-flex;align-items:center;gap:.4rem;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:.55rem .9rem;font-weight:700;color:var(--ink-3);font-size:.86rem;
  box-shadow:none;
}
.trust-row svg{width:14px;height:14px;color:var(--green)}

/* Hero panel — calm, no conic glow ring */
.hero-panel{position:relative}
.hero-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:1.5rem;
}
.hero-card .pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--green-soft);color:var(--green);font-weight:700;font-size:.78rem;
  padding:.35rem .7rem;border-radius:var(--radius-pill);letter-spacing:.06em;text-transform:uppercase;
}
.hero-card label{display:grid;gap:.4rem;margin-bottom:.85rem;font-weight:700;color:var(--ink-3);font-size:.88rem}
.hero-card input,.hero-card select{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.85rem 1rem;font:inherit;color:var(--ink);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.hero-card input:focus,.hero-card select:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,58,115,.14);
}
.calc-result{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  background:var(--ink);
  color:#fff;border-radius:var(--radius);padding:1rem 1.15rem;margin:.9rem 0 1.1rem;
}
.calc-result span{color:#c7d8ea;font-size:.85rem}
.calc-result strong{font-size:1.45rem;letter-spacing:-.02em}

/* Hub hero illustration cards — distinctly Kenyan, no people photos */
.hub-svg-card{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:1.5rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.55rem;max-width:480px;margin-inline:auto;
  font-feature-settings:"tnum";
}
.hub-svg-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ink);color:#fff;font-weight:800;font-size:.75rem;letter-spacing:.1em;
  padding:.4rem .85rem;border-radius:var(--radius-pill);align-self:flex-start;margin-bottom:.4rem;
}
.hub-svg-pill svg{width:14px;height:14px}
.hub-svg-pill.green{background:var(--green)}
.hub-svg-pill.blue{background:var(--blue)}
.hub-svg-pill.gold{background:var(--ink-2)}
.hub-svg-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.55rem 0;border-bottom:1px dashed var(--line);font-size:.92rem;
}
.hub-svg-row span{color:var(--muted);font-weight:600}
.hub-svg-row strong{color:var(--ink);font-weight:800;text-align:right}
.hub-svg-row.negative strong{color:var(--rose)}
.hub-svg-row.total{
  border-bottom:0;background:var(--soft);
  margin:.4rem -1.5rem -.5rem;padding:.85rem 1.5rem;
  font-size:1rem;
}
.hub-svg-row.total strong{color:var(--blue);font-size:1.1rem;font-weight:900}
.hub-svg-foot{
  margin-top:.6rem;font-size:.78rem;color:var(--muted-2);font-style:italic;
  border-top:1px solid var(--line);padding-top:.7rem;
}
.payslip-card .hub-svg-row.total strong{color:var(--blue)}
.landlord-card .hub-svg-row.total strong{color:var(--blue)}
.asset-card .hub-svg-row.total strong{color:var(--blue)}
.business-card .hub-svg-row.total strong{color:var(--blue)}
.mpesa-mini .hub-svg-row.total strong{color:var(--green)}

/* M-Pesa SMS phone mockup — distinctly Kenyan hero centerpiece */
.mpesa-mock{position:relative;max-width:420px;margin-inline:auto}
.mpesa-mock:before{
  content:"";position:absolute;inset:-30px -10px -10px -10px;border-radius:48px;
  background:conic-gradient(from 140deg,rgba(11,92,173,.22),rgba(22,163,107,.22),rgba(242,165,26,.22),rgba(11,92,173,.22));
  filter:blur(28px);opacity:.25;
}
.mpesa-phone{
  position:relative;background:#0a1628;border-radius:42px;padding:14px 10px;
  box-shadow:0 18px 50px rgba(10,22,40,.28),inset 0 0 0 2px rgba(255,255,255,.04);
  border:6px solid #1a2a44;
}
.mpesa-notch{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);
  width:88px;height:18px;border-radius:14px;background:#0a1628;z-index:2;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}
.mpesa-screen{
  background:linear-gradient(180deg,#f4f6f9 0%,#e8edf3 100%);
  border-radius:28px;padding:38px 14px 14px;min-height:540px;
  display:flex;flex-direction:column;gap:10px;
}
.mpesa-statusbar{
  display:flex;justify-content:space-between;align-items:center;font-size:.7rem;font-weight:700;color:#0a1628;
  padding:0 6px;
}
.mpesa-statusbar .dots{color:#0a7a4f;letter-spacing:-.05em}
.mpesa-statusbar .dots b{color:#0a7a4f;margin-left:.3rem;letter-spacing:.04em}
.mpesa-sms{display:flex;flex-direction:column;gap:8px;flex:1}
.mpesa-sms-from{
  display:flex;align-items:center;gap:.55rem;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:.55rem .7rem;
}
.mpesa-avatar{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#16a36b,#0a7a4f);color:#fff;font-weight:900;font-size:.95rem;
}
.mpesa-sms-from strong{display:block;font-size:.85rem;color:#0a1628}
.mpesa-sms-from .mpesa-time{font-size:.72rem;color:#5a6b81}
.mpesa-bubble{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.7rem .85rem;
  font-size:.78rem;line-height:1.45;color:#1b2b44;
  box-shadow:0 6px 16px rgba(10,22,40,.05);
}
.mpesa-bubble b{color:#0a7a4f;font-weight:800}
.mpesa-bubble strong{color:#0a1628;font-weight:900}
.mpesa-bubble.outgoing{
  background:#dcf8c6;border-color:#bce3a4;color:#0d3b1f;align-self:flex-end;max-width:88%;
}
.mpesa-bubble .mpesa-link{color:#0b5cad;font-weight:700}
.mpesa-cta-bar{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:.6rem;
  display:flex;justify-content:center;
}
.mpesa-cta-bar .btn-light{font-size:.85rem;padding:.55rem 1rem;width:100%;background:linear-gradient(135deg,var(--blue),var(--blue-3));color:#fff}
.mpesa-cta-bar .btn-light:hover{filter:brightness(1.08)}

/* Protected: green sticker per user request — do not flatten */
.mpesa-badge{
  position:absolute;top:18px;right:-22px;z-index:3;
  transform:rotate(8deg);
}
.mpesa-badge .pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,#16a36b,#0a7a4f);color:#fff;font-weight:800;font-size:.74rem;
  padding:.45rem .8rem;border-radius:999px;letter-spacing:.04em;text-transform:uppercase;
  box-shadow:0 14px 30px rgba(10,90,55,.4);
}
@media (max-width:980px){
  .mpesa-mock{max-width:340px}
  .mpesa-screen{min-height:480px}
  .mpesa-badge{right:auto;left:50%;top:-8px;transform:translateX(-50%) rotate(-2deg)}
}

/* Hero image card (replaces calculator on homepage) */
.hero-image-card{
  position:relative;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--line);
  background:#0a1628;aspect-ratio:4/5;max-width:520px;margin-inline:auto;
}
.hero-image-card img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.02);
}
.hero-image-card:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,19,40,0) 35%,rgba(6,19,40,.55) 65%,rgba(6,19,40,.92) 100%);
}
.hero-image-overlay{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem 1.6rem 1.8rem;color:#fff;z-index:1;
}
.hero-image-overlay h3{color:#fff;font-size:1.35rem;margin:.6rem 0 .5rem;letter-spacing:-.02em}
.hero-image-overlay p{color:#cfdcef;font-size:.95rem;margin:0 0 1rem;max-width:38ch}
.hero-image-overlay .pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:rgba(15,122,77,.92);color:#fff;font-weight:700;font-size:.78rem;
  padding:.4rem .85rem;border-radius:var(--radius-pill);letter-spacing:.06em;text-transform:uppercase;
  backdrop-filter:blur(8px);
}
.hero-image-overlay .btn-light{font-size:.92rem;padding:.7rem 1.1rem}
@media (max-width:980px){
  .hero-image-card{aspect-ratio:5/4;max-width:none}
}

/* Stats ribbon */
.stats-ribbon{
  position:relative;margin-top:-3.5rem;z-index:2;
}
.stats-card{
  background:var(--ink);color:#fff;border-radius:var(--radius-lg);
  padding:2rem clamp(1.25rem,3vw,2.5rem);
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;
  box-shadow:var(--shadow);
}
.stat strong{display:block;font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;color:#fff;letter-spacing:-.02em}
.stat span{display:block;color:#a3b6cf;font-size:.88rem;margin-top:.2rem}
@media (max-width:780px){.stats-card{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}}

/* Marquee partner row */
.partners{padding:2.5rem 0;background:#fff;border-bottom:1px solid var(--line)}
.partners-track{
  display:flex;align-items:center;gap:3rem;flex-wrap:wrap;justify-content:center;
  color:#a4b0c2;font-weight:700;letter-spacing:.04em;font-size:.92rem;
}
.partners-track span{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:#fff;color:var(--muted);
}

/* Section primitives */
.section{padding:clamp(4rem,8vw,6.5rem) 0;position:relative}
.section.muted{background:var(--soft)}
.section.dark{background:#06182f;color:#cdd9ec}
.section.dark h2,.section.dark h3{color:#fff}
.section.dark p{color:#9eb0c8}
.section-head{text-align:center;max-width:760px;margin:0 auto 2.4rem}
.section-head.left{text-align:left;margin-left:0}
.section-head h2{margin-bottom:.6rem}

/* Loan family cards */
.loan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.1rem}
.loan-card{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:0;overflow:hidden;
  box-shadow:none;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  display:flex;flex-direction:column;
}
.loan-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--line-2)}
.loan-card.compact{padding:1.5rem}
/* Loan card photo + theme overlay (deep-blue mono) */
.loan-card-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;border-bottom:1px solid var(--line);background:var(--soft);
}
.loan-card-image{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease;
}
.loan-card:hover .loan-card-image{transform:scale(1.04)}
.loan-card-media-overlay{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:space-between;
  padding:1rem 1.15rem;color:#fff;
}
.loan-card-media-overlay:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,22,40,0) 35%,rgba(10,22,40,.55) 75%,rgba(10,22,40,.85) 100%);
}
.loan-card-media.theme-personal:after,
.loan-card-media.theme-property:after,
.loan-card-media.theme-business:after,
.loan-card-media.theme-asset:after,
.loan-card-media.theme-checkoff:after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,22,40,.10) 0%,rgba(10,22,40,.30) 100%);
  mix-blend-mode:multiply;pointer-events:none;
}
.loan-card-icon{
  position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius-sm);
  background:rgba(255,255,255,.18);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.30);
  z-index:1;
}
.loan-card-icon svg{width:24px;height:24px;color:#fff}
.loan-card-num{
  position:relative;z-index:1;font-family:Inter,system-ui;font-weight:900;font-size:2.4rem;
  letter-spacing:-.04em;color:rgba(255,255,255,.85);line-height:1;text-shadow:0 2px 8px rgba(0,0,0,.25);
}
/* Themes — all deep-blue family; identity carried by photo + eyebrow microcopy */
.theme-personal{background:linear-gradient(135deg,#0a3a73 0%,#072a55 100%)}
.theme-property{background:linear-gradient(135deg,#1b3a64 0%,#0a2244 100%)}
.theme-business{background:linear-gradient(135deg,#0f3a60 0%,#0a1628 100%)}
.theme-asset{background:linear-gradient(135deg,#1c3457 0%,#0a1628 100%)}
.theme-checkoff{background:linear-gradient(135deg,#243a5c 0%,#0a1628 100%)}
.loan-card-body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.loan-card .card-icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:var(--radius-sm);
  background:var(--blue-soft);color:var(--blue);font-weight:900;
  margin-bottom:.4rem;
}
.loan-card h3{margin:0}
.loan-card ul{padding-left:1.1rem;color:var(--muted);margin:.2rem 0 .6rem;font-size:.93rem}
.loan-card a.text-link{margin-top:auto}

/* Need-routing strip */
.need-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.9rem}
.need-grid a{
  display:flex;flex-direction:column;justify-content:space-between;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem 1.2rem;min-height:170px;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.need-grid a:hover{transform:translateY(-2px);border-color:var(--blue);box-shadow:var(--shadow-sm)}
.need-grid .n-icon{
  width:46px;height:46px;border-radius:var(--radius-sm);display:grid;place-items:center;
  background:var(--blue-soft);color:var(--blue);margin-bottom:.8rem;
}
.need-grid span{display:block;color:var(--muted);font-size:.88rem}
.need-grid strong{display:block;margin-top:.4rem;font-size:1.05rem;line-height:1.2}

/* Why / feature grid */
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:3rem;align-items:start}
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.feature-grid div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem;box-shadow:none;
}
.feature-grid .f-icon{width:42px;height:42px;border-radius:var(--radius-sm);display:grid;place-items:center;background:var(--blue-soft);color:var(--blue);margin-bottom:.7rem}
.feature-grid strong{display:block;font-size:1.05rem;margin-bottom:.25rem}
.feature-grid span{color:var(--muted);font-size:.92rem;line-height:1.5}

/* Benefit grid */
.benefit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.benefit-grid div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:none;position:relative;overflow:hidden;
}
.benefit-grid .b-num{
  position:relative;display:inline-grid;place-items:center;width:38px;height:38px;
  background:var(--blue);color:#fff;
  border-radius:var(--radius-sm);font-weight:900;font-size:.88rem;margin-bottom:.7rem;
}
.benefit-grid strong{display:block;font-size:1.05rem;margin-bottom:.3rem;position:relative}
.benefit-grid span{display:block;color:var(--muted);font-size:.92rem;line-height:1.55;position:relative}

/* Check list */
.check-list{list-style:none;padding:0;margin:0;display:grid;gap:.8rem}
.check-list li{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:.95rem 1rem .95rem 2.7rem;color:var(--ink-3);font-weight:600;
}
.check-list li:before{
  content:"";position:absolute;left:.95rem;top:1rem;
  width:22px;height:22px;border-radius:50%;
  background:var(--green-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f7a4d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='5 12 10 17 19 7'/></svg>") center/14px no-repeat;
}

/* Process grid */
.process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:step}
.process-grid div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;position:relative;
}
.process-grid div:before{
  counter-increment:step;content:"0" counter(step);
  position:absolute;top:1rem;right:1rem;
  font-weight:900;color:var(--line-2);font-size:1.05rem;letter-spacing:-.02em;
}
.step{
  display:inline-grid;place-items:center;width:46px;height:46px;
  background:var(--ink);color:#fff;
  border-radius:var(--radius-sm);font-weight:900;margin-bottom:.85rem;
}

/* Channel grid */
.channel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.channel-grid a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:none;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.channel-grid a:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);border-color:var(--blue)}
.channel-grid .channel-icon{
  display:grid;place-items:center;width:48px;height:48px;border-radius:var(--radius-sm);
  background:var(--blue-soft);color:var(--blue);
  margin-bottom:.95rem;
}
.channel-grid strong{display:block;font-size:1.08rem;margin-bottom:.25rem}
.channel-grid span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5}

/* Trust grid — green accent earned here */
.trust-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.trust-grid div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.4rem;box-shadow:none;
}
.trust-grid .badge-icon{
  display:grid;place-items:center;width:42px;height:42px;border-radius:var(--radius-sm);
  background:var(--green-soft);color:var(--green);margin-bottom:.75rem;
}
.trust-grid strong{display:block;margin-bottom:.3rem;font-size:1.02rem}
.trust-grid span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5}

/* Quick facts */
.quick-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
.quick-facts div{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.05rem 1.15rem;box-shadow:none;
}
.quick-facts span{display:block;color:var(--muted);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.quick-facts strong{display:block;margin-top:.35rem;font-size:1.03rem}

/* Tables */
.table-wrap{overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
table{width:100%;border-collapse:collapse;min-width:760px}
th,td{text-align:left;padding:1rem 1.15rem;border-bottom:1px solid var(--line)}
th{background:var(--soft);color:var(--ink-3);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
td{color:var(--ink-3);font-weight:600}
td:first-child{font-weight:700;color:var(--ink)}
td a{color:var(--blue);font-weight:700}
tbody tr:hover{background:var(--hairline)}

/* FAQ accordion */
.faq-list{display:grid;gap:.7rem;max-width:880px}
.faq-list details{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.1rem 1.25rem;transition:border-color .15s ease,box-shadow .15s ease;
}
.faq-list details[open]{border-color:var(--blue);box-shadow:var(--shadow-sm)}
.faq-list summary{
  cursor:pointer;font-weight:700;color:var(--ink);
  list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{
  content:"";width:22px;height:22px;border-radius:50%;
  background:var(--blue-soft) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a3a73' stroke-width='3' stroke-linecap='round'><line x1='6' y1='12' x2='18' y2='12'/><line x1='12' y1='6' x2='12' y2='18'/></svg>") center/14px no-repeat;
  flex-shrink:0;transition:transform .2s ease;
}
.faq-list details[open] summary:after{transform:rotate(45deg)}
.faq-list p{margin:.7rem 0 0}

/* Related products */
.related-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.related-row a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem;transition:border-color .15s ease,transform .15s ease;
}
.related-row a:hover{border-color:var(--blue);transform:translateY(-2px)}
.related-row .r-icon{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:.7rem}
.related-row strong{display:block;font-size:.98rem;margin-bottom:.25rem}
.related-row span{display:block;color:var(--muted);font-size:.85rem;line-height:1.45}

/* App + USSD promo */
.app-block{
  background:#0a1628;
  border-radius:var(--radius-lg);color:#fff;
  padding:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:center;overflow:hidden;position:relative;
}
.app-block h2,.app-block h3{color:#fff}
.app-block p{color:#b9c8df}
.app-stores{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.2rem}
.app-stores a{
  display:inline-flex;align-items:center;gap:.6rem;padding:.7rem 1.05rem;border-radius:var(--radius-sm);
  background:#fff;color:var(--ink);font-weight:700;font-size:.92rem;
  border:1px solid rgba(255,255,255,.14);
}
.app-stores a:hover{background:#f3f7fc}
.app-mock{
  position:relative;justify-self:center;width:240px;aspect-ratio:9/19;
  border-radius:32px;background:#0d2a52;border:6px solid #1a3661;box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.app-mock:before{
  content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);
  width:80px;height:14px;border-radius:8px;background:#0a1628;
}
.app-mock-screen{
  position:absolute;inset:24px 6px 6px;border-radius:24px;
  background:linear-gradient(180deg,#fff 0%,#eaf3fd 100%);
  padding:14px;display:flex;flex-direction:column;gap:8px;
}
.app-mock-row{height:34px;border-radius:10px;background:#dbe9f9}
.app-mock-row.tall{height:80px;background:var(--blue);position:relative}
.app-mock-row.tall:after{content:"KES 25,116";position:absolute;left:12px;bottom:10px;color:#fff;font-weight:800}
.app-mock-row.short{width:60%}
.ussd-block{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center;
}
.ussd-code{
  display:inline-flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;
  padding:.85rem 1.3rem;border-radius:var(--radius-sm);font-weight:900;font-size:1.2rem;letter-spacing:.04em;
}
.ussd-steps{display:grid;gap:.7rem}
.ussd-steps div{
  display:flex;align-items:flex-start;gap:.8rem;background:var(--soft);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:.85rem 1rem;
}
.ussd-steps strong{display:grid;place-items:center;width:30px;height:30px;border-radius:var(--radius-sm);background:var(--blue);color:#fff;font-weight:900;font-size:.85rem;flex-shrink:0}
.ussd-steps span{color:var(--ink-2);font-weight:600;font-size:.95rem}

/* Testimonials */
.testimonial-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.testimonial{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;
  box-shadow:none;position:relative;
}
.testimonial:before{
  content:"\201C";position:absolute;top:.4rem;right:1.1rem;font-size:4rem;
  font-family:Georgia,serif;color:var(--blue-soft);line-height:1;
}
.testimonial p{font-style:italic;color:var(--ink-2);margin-bottom:1rem;font-weight:500}
.testimonial-meta{display:flex;align-items:center;gap:.7rem}
.testimonial-meta .avatar{width:42px;height:42px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:900}
.testimonial-meta strong{display:block;font-size:.95rem}
.testimonial-meta span{color:var(--muted);font-size:.83rem}

/* CTA band */
.cta-band{
  background:var(--blue);
  color:#fff;
}
.cta-inner{display:flex;justify-content:space-between;gap:2rem;align-items:center}
.cta-band p,.cta-band .eyebrow{color:#dcecff}
.cta-band .eyebrow:before{background:#dcecff}

/* Page hero */
.page-hero{
  position:relative;overflow:hidden;
  padding:clamp(4rem,7.5vw,6.5rem) 0 clamp(4rem,7vw,6rem);
  background:linear-gradient(180deg,#fbfdff,#f1f5fb);
  border-bottom:1px solid var(--line);
}
.page-hero>*{position:relative;z-index:1}
.product-hero{padding-bottom:clamp(5rem,8vw,7rem)}
/* Per-product hero tints — desaturated to deep-blue family */
.hero-personal{background:linear-gradient(180deg,#fbfdff,#e6eef9)}
.hero-property{background:linear-gradient(180deg,#fbfdff,#e7eef8)}
.hero-business{background:linear-gradient(180deg,#fbfdff,#e6eef9)}
.hero-asset{background:linear-gradient(180deg,#fbfdff,#e7eef8)}
.hero-checkoff{background:linear-gradient(180deg,#fbfdff,#e6eef9)}

.product-visual{grid-column:2;grid-row:1 / span 2;position:relative}
.product-visual img{
  position:relative;border-radius:var(--radius-lg);border:1px solid var(--line);
  box-shadow:var(--shadow);background:#fff;
}
.product-hero .quick-facts{grid-column:2}

/* Static form */
.static-form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);padding:1.75rem;
}
.static-form label{display:grid;gap:.4rem;margin-bottom:1.05rem;font-weight:700;color:var(--ink-3);font-size:.88rem}
.static-form input,.static-form select,.static-form textarea{
  width:100%;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.9rem 1rem;font:inherit;color:var(--ink);background:#fff;
}
.static-form input:focus,.static-form select:focus,.static-form textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(10,58,115,.14);
}

/* Support hero image */
.support-hero-image{
  max-width:560px;margin:2rem auto 0;border-radius:var(--radius-lg);
  border:1px solid var(--line);box-shadow:var(--shadow);background:#fff;
}

/* Footer — flat dark */
.site-footer{
  background:#06182f;
  color:#a8b9d1;padding:4rem 0 1.5rem;position:relative;overflow:hidden;
}
.footer-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:2.2rem}
.site-footer h3{color:#fff;font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;margin-bottom:.9rem}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.site-footer a{color:#cdd9ec;font-size:.92rem}
.site-footer a:hover{color:#fff}
.footer-brand{color:#fff;margin-bottom:1rem}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:3rem;padding-top:1.4rem;color:#8aa2bf;font-size:.86rem;
}
.footer-socials{display:flex;gap:.5rem;margin-top:1rem}
.footer-socials a{
  width:36px;height:36px;border-radius:var(--radius-sm);background:rgba(255,255,255,.06);
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.10);
}
.footer-socials a:hover{background:rgba(255,255,255,.12)}

/* Floating calc on hero panel */
.floating-calc{margin:-3.5rem 1.5rem 0 auto;width:min(420px,92%)}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:1024px){
  .loan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .channel-grid,.trust-grid,.feature-grid,.benefit-grid,.related-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testimonial-grid{grid-template-columns:1fr}
  .ussd-block{grid-template-columns:1fr}
}
@media (max-width:980px){
  .nav-toggle{display:block}
  .main-nav,.nav-cta{display:none}
  .nav-wrap.open .main-nav{
    display:grid;position:absolute;left:4vw;right:4vw;top:78px;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1rem;box-shadow:var(--shadow);
  }
  .nav-wrap.open .nav-cta{display:inline-flex;position:absolute;right:8vw;top:calc(78px + 1rem)}
  .mega-menu{position:static;transform:none;width:auto;display:none;box-shadow:none;margin-top:.5rem;grid-template-columns:1fr}
  .has-mega:hover .mega-menu,.has-mega:focus-within .mega-menu{display:grid;transform:none}
  .hero-grid,.split{grid-template-columns:1fr;gap:2rem}
  .product-visual,.product-hero .quick-facts{grid-column:auto;grid-row:auto}
  .floating-calc{margin:1rem 0 0;width:100%}
  .stats-card{grid-template-columns:repeat(2,1fr);row-gap:1.4rem}
  .need-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .app-block{grid-template-columns:1fr}
  .app-mock{margin-inline:auto}
}
@media (max-width:640px){
  h1{font-size:2.1rem}
  .topbar-inner{justify-content:flex-start}
  /* The topbar carries five items and wraps to four rows on a phone, pushing the logo and
     the whole page below the fold before the visitor has seen anything. Keep the two that
     are actions (call, WhatsApp) and drop the rest — Calculator and FAQs are both in the
     nav, and the email address is in the footer, so nothing becomes unreachable. */
  .topbar-inner > *:nth-child(n+3){display:none}
  .loan-grid,.need-grid,.process-grid,.feature-grid,.quick-facts,.footer-grid,.mega-grid,.channel-grid,.trust-grid,.benefit-grid,.related-row,.testimonial-grid{grid-template-columns:1fr}
  .cta-inner{display:block}
  .footer-bottom{display:block}
  .nav-wrap.open .nav-cta{position:static;margin:1rem 0 0}
  .stats-card{grid-template-columns:1fr}
}

/* Image utilities */
.hero-image{
  position:relative;border-radius:var(--radius-lg);
  box-shadow:var(--shadow);border:1px solid var(--line);background:#fff;
}
@media (max-width:640px){.hero-image{border-radius:var(--radius)}.support-hero-image{border-radius:var(--radius)}}

/* ---------------------------------------------------------------------------
   Callback form status + footer trust lines            (added 2026-08-28)
   --------------------------------------------------------------------------- */

/* The status line is the ONLY place the callback form reports an outcome, so it has to
   read as a result rather than as decoration. Three states, visually distinct: a neutral
   "sending", a green confirmation and a red failure. It starts [hidden] and is revealed
   by main.js — never pre-rendered, because a success message present in the HTML is a
   success message that can appear without a request ever succeeding. */
.form-status{
  margin:.85rem 0 0;padding:.7rem .9rem;border-radius:10px;
  font-size:.9rem;font-weight:600;line-height:1.45;
}
.form-status--pending{background:var(--steel-soft,#eef2f7);color:var(--muted)}
.form-status--success{background:var(--green-soft);color:var(--green)}
.form-status--error{background:#fdecec;color:#a32020}

.form-fineprint{margin:.75rem 0 0;font-size:.8rem;color:var(--muted-2);line-height:1.5}
.form-fineprint a{color:var(--blue);font-weight:600}

.static-form button[disabled]{opacity:.6;cursor:progress}

.footer-tagline{font-style:italic;font-weight:600;opacity:.9;margin:.35rem 0 .6rem}
/* align-items:flex-start, not center: the licence line wraps to two lines in the footer
   column, and centring pins the shield to the vertical middle of the block so it floats
   between the two lines instead of sitting with the first word. */
.footer-licence{
  display:flex;align-items:flex-start;gap:.5rem;
  font-size:.82rem;font-weight:600;opacity:.9;margin:0;line-height:1.45;
}
.footer-licence svg{width:15px;height:15px;flex:0 0 15px;margin-top:.15rem}

/* An inert store button. Deliberately NOT styled to look identical to a live one — it
   must not read as clickable — but not hidden either, because the apps are a real part
   of the offer. Give it the shape of the button it will become once a store URL exists. */
.app-store-chip{
  display:inline-flex;flex-direction:column;gap:.05rem;
  padding:.55rem .95rem;border-radius:10px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.95rem;line-height:1.25;
}
.is-inert{opacity:.62;cursor:default;box-shadow:none}

/* The core values are FIVE, and .trust-grid is a four-column grid — so the fifth card
   orphaned onto its own row with three empty columns beside it. auto-fit lets the row
   carry all five across at desktop width and reflow to 3/2 and 2/1 as it narrows,
   instead of hard-coding a count that only ever suits one breakpoint. */
.values-grid{grid-template-columns:repeat(auto-fit,minmax(195px,1fr))}