:root{
  --orange:#F97316; --green:#16A34A; --dark:#0F172A; --muted:#64748B;
  --bg:#F8FAFC; --card:#FFFFFF; --danger:#DC2626; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--dark);line-height:1.55}
a{color:var(--orange);text-decoration:none}
h1{font-size:1.9rem;margin:1.2rem 0 .8rem}
h2{font-size:1.3rem;margin:1.5rem 0 .8rem}
main{max-width:1060px;margin:0 auto;padding:1rem}
main.narrow{max-width:640px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;background:var(--dark);color:#fff;position:sticky;top:0;z-index:10}
.topbar .brand{color:#fff;font-size:1.15rem}
.topbar nav a{color:#CBD5E1;margin-left:1rem;font-size:.95rem}
.topbar nav a.active,.topbar nav a:hover{color:#fff}
.hero{text-align:center;padding:2.5rem 1rem}
.hero .hl{color:var(--orange)}
.hero p{max-width:680px;margin:.6rem auto;color:var(--muted)}
.cta-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}
.btn{display:inline-block;padding:.7rem 1.3rem;border-radius:999px;font-weight:600;cursor:pointer;border:0;font-size:.95rem}
.btn-primary{background:var(--orange);color:#fff}
.btn-primary:hover{background:#EA580C}
.btn-ghost{background:#E2E8F0;color:var(--dark)}
.btn-danger{background:var(--danger);color:#fff}
.grid4{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem}
.card{background:var(--card);border:1px solid #E2E8F0;border-radius:var(--radius);padding:1.2rem;box-shadow:0 1px 3px rgba(15,23,42,.06);margin-bottom:1rem}
.num{width:36px;height:36px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:.5rem}
.card h3{margin-bottom:.3rem}
.card p{color:var(--muted);font-size:.92rem}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.pay{border-radius:var(--radius);padding:1.2rem;color:#fff;display:flex;flex-direction:column;gap:.2rem;cursor:pointer;border:0;font-family:inherit;text-align:left}
.pay span{font-size:.85rem;opacity:.9}
.pay.wave{background:linear-gradient(135deg,#1DC4F2,#0EA5E9)}
.pay.om{background:linear-gradient(135deg,#FF7900,#F97316)}
.pay.mtn{background:linear-gradient(135deg,#FACC15,#EAB308);color:#1F2937}
.pay.moov{background:linear-gradient(135deg,#0072BC,#0284C7)}
.note{margin-top:.8rem;color:var(--muted);font-size:.9rem}
.ticks{list-style:none;margin-top:.5rem}
.ticks li{padding:.35rem 0}
.form label{display:block;margin-bottom:.9rem;font-weight:600;font-size:.92rem}
.form input,.form select,.form textarea{width:100%;padding:.65rem .8rem;border:1px solid #CBD5E1;border-radius:10px;font-size:.95rem;margin-top:.3rem;font-family:inherit}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.fee-box{background:#FFF7ED;border:1px solid #FDBA74;color:#9A3412;border-radius:10px;padding:.6rem .9rem;margin-bottom:1rem;font-size:.9rem}
.msg{margin-top:.8rem;font-size:.92rem}
.amount{font-size:1.4rem;font-weight:700;color:var(--dark)!important}
.amount small{font-size:.8rem;font-weight:400;color:var(--muted)}
.badge{display:inline-block;padding:.2rem .7rem;border-radius:999px;font-size:.8rem;font-weight:700}
.st-created{background:#E0E7FF;color:#3730A3}
.st-funded{background:#FEF3C7;color:#92400E}
.st-delivered{background:#DBEAFE;color:#1D4ED8}
.st-released{background:#DCFCE7;color:#166534}
.st-disputed{background:#FEE2E2;color:#B91C1C}
.st-refunded,.st-cancelled{background:#E2E8F0;color:#475569}
.timeline{display:flex;align-items:center;flex-wrap:wrap;gap:.4rem;margin:.8rem 0}
.step{background:#E2E8F0;border-radius:8px;padding:.3rem .6rem;font-size:.8rem}
.step.done{background:var(--green);color:#fff}
.arrow{color:var(--muted)}
.log{list-style:none;font-size:.88rem}
.log li{padding:.3rem 0;border-bottom:1px dashed #E2E8F0;color:var(--muted)}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
.tbl th,.tbl td{padding:.7rem .9rem;text-align:left;border-bottom:1px solid #E2E8F0;font-size:.9rem}
.tbl th{background:var(--dark);color:#fff;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em}
.ussd{background:#0F172A;color:#A5F3FC;border-radius:10px;padding:.8rem 1rem;font-family:monospace;margin:.6rem 0}
.code-card pre{background:#0F172A;color:#E2E8F0;border-radius:10px;padding:1rem;overflow-x:auto;font-size:.85rem;line-height:1.5}
.code-card code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
code{background:#F1F5F9;border-radius:6px;padding:.1rem .4rem;font-size:.88em}
.code-card code{background:transparent;padding:0}
.api-route{border-left:4px solid var(--orange);padding:.6rem 1rem;margin:.8rem 0;background:#fff;border-radius:0 10px 10px 0}
.api-route .method{font-weight:700;color:var(--orange);font-family:monospace}
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:2rem 1rem}
@media(max-width:600px){.row2{grid-template-columns:1fr}.topbar nav a{margin-left:.6rem;font-size:.85rem}}