/* A focused, responsive demo surface. */
:root{--navy-0:#FFFFFF;--navy-1:#FFFFFF;--navy-2:#FFFFFF;--navy-3:#68BFE5;--dimau:#012169;--dimau-hi:#012169;--dim:#012169;--text:#012169;--silver:#012169;--ok:#012169;--line:rgba(1,33,105,.22)}
body{padding:28px 28px 96px;background:radial-gradient(ellipse at 78% 22%,#68BFE566,transparent 45%),#FFFFFF}
.wrap{max-width:1180px}header{padding-bottom:24px;border-bottom:1px solid var(--line)}
.brand .tag b{font-size:23px}.brand .tag span{font-size:12px}.tile{box-shadow:none}.tile img{height:38px}.consent{font-size:11px;background:transparent}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:58px 0 44px}.headline{margin:0}.eyebrow{font-size:10px;font-weight:500;letter-spacing:.18em;color:var(--dimau-hi)}
.headline h1{font-size:clamp(40px,4.8vw,64px);line-height:1.07;letter-spacing:-.055em;margin:18px 0 22px}.headline p{font-size:16px;line-height:1.75;font-weight:300;max-width:440px}
.play{display:flex;justify-content:space-between;gap:50px;background:#68BFE5;color:#012169;box-shadow:none;border-radius:12px;padding:17px 23px;font-size:16px;margin-top:28px;min-height:52px}.play:hover{background:#68BFE5}.play span{font-size:21px}.demo-note{display:block;font-size:10px;color:var(--dim);margin-top:12px}
.hero-proof{display:flex;gap:22px;margin-top:34px;font-size:10px;color:var(--dimau-hi)}.hero-proof b{display:block;color:var(--dim);font-size:11px;font-weight:400;margin-top:6px}
.grid{display:block;min-width:0}.panel{border-radius:24px;padding:24px;background:linear-gradient(145deg,#FFFFFF,#FFFFFF)}.panel h2{font-size:11px;letter-spacing:.1em}.stage{min-height:274px;padding:18px 0 30px;gap:44px}.phone{background:linear-gradient(150deg,#68BFE5,#68BFE5);border-color:#68BFE5;box-shadow:0 16px 34px #01216926}.phone .screen{background:#FFFFFF}.phone .who{font-size:10px;bottom:-20px}.payment-status{text-align:center;color:#012169;font-size:12px;min-height:38px;line-height:1.5;margin:16px 0 10px}
.controls{gap:8px;margin:0;display:grid;grid-template-columns:repeat(3,1fr)}.rail-btn{justify-content:center;font-size:12px;padding:13px 6px;border-radius:10px;background:#FFFFFFb3;min-height:44px}.rail-btn:hover{background:#68BFE5}.rail-btn:disabled{opacity:.55;cursor:wait}.rail-btn.active{opacity:1;border-color:var(--dimau-hi)}
.credit{margin-top:0}.credit h2{font-size:16px;letter-spacing:0;text-transform:none}.credit h2 .stat{font-family:var(--body);font-size:11px;color:var(--dim)}.credit-grid{grid-template-columns:250px 1fr;align-items:center;gap:28px}.score-card{padding:16px;background:#68BFE580;border:none}.gauge{width:105px;height:105px}.gauge svg{width:105px;height:105px}.gauge .num b{font-size:27px}.gauge .num span{font-size:9px}.band{font-size:10px!important}.kpi b{font-family:var(--disp);font-size:20px}.kpi span{font-size:9px;letter-spacing:0}.ledger table{min-width:0}.ledger th:nth-child(4),.ledger td:nth-child(4){display:none}.ledger td{font-family:var(--body);font-size:12px;padding:15px 8px}.ledger .empty{font-size:14px;line-height:1.7;padding:28px}.score-note{font-size:10px;color:var(--dim);margin:12px 0 24px}
.technical{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 28px}.technical summary{cursor:pointer;padding:18px 0;font-size:13px}.technical summary span{float:right;color:var(--dim);font-size:11px}.technical .panel{margin-bottom:20px}.technical .term{height:200px}.eco{margin-top:25px}.eco a{border:0;background:transparent;padding:5px 7px;font-size:11px}footer{margin-top:12px}footer .fine{max-width:960px;font-size:10px}.fb-open{bottom:132px;background:#012169;box-shadow:0 4px 20px #01216933;border:1px solid var(--line);font-size:12px}.fb{bottom:78px}.fb-open .n{display:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #012169;outline-offset:4px}
@media(max-width:880px){.hero{gap:28px}.headline h1{font-size:44px}.credit-grid{grid-template-columns:210px 1fr}.hero-proof{gap:14px}.stage{gap:24px}.phone{width:112px}}
@media(max-width:650px){body{padding:18px 18px 84px}header{gap:14px;padding-bottom:18px}.brand .tag b{font-size:21px}.consent{border:0;padding:0;font-size:10px}.hero{grid-template-columns:1fr;padding:30px 0 24px;gap:26px}.headline h1{font-size:46px;margin:14px 0 16px}.headline p{font-size:14px;line-height:1.65}.play{width:100%;margin-top:20px}.demo-note{text-align:center}.hero-proof{justify-content:space-between;margin-top:23px}.panel{padding:18px;border-radius:20px}.stage{min-height:250px;gap:38px}.credit-grid{grid-template-columns:1fr;gap:18px}.score-card{display:grid;grid-template-columns:108px 1fr;gap:8px 12px}.gauge{grid-row:1/4}.score-card .band,.score-card .powered{text-align:left}.kpis{margin:0;justify-content:start;gap:18px}.kpi{text-align:left}.credit h2 .stat{display:block;width:100%;font-size:10px}.ledger td{font-size:10px;padding:12px 5px}.ledger th{font-size:9px;padding:8px 5px;letter-spacing:.05em}.ledger .empty{padding:12px;font-size:12px}.technical summary span{font-size:9px}.eco{gap:4px}footer .tile{display:none}}

/* Keep the complete payment demo in the first phone viewport. */
.headline h1{color:#012169}.headline p{font-weight:400}
.term{background:#FFFFFF}.term .rail-mycash{color:#C8102E}.term .rail-mpaisa{color:#C8102E}
.checkmark{text-shadow:0 0 18px #FFFFFF}.fb textarea{color:var(--text);background:#FFFFFF}
@media(max-width:650px){
  body{padding:12px 14px 72px}
  header{gap:6px;padding-bottom:10px;margin-bottom:0}
  .tile img{height:27px}.brand{gap:9px}.brand .tag b{font-size:18px}.brand .tag span{font-size:10px}
  .consent{width:100%;font-size:9px;gap:5px}.consent .dot{width:6px;height:6px;box-shadow:none}
  .hero{padding:14px 0 20px;gap:14px}
  .eyebrow,.hero-proof{display:none}
  .headline h1{font-size:40px;margin:0 0 5px;line-height:1.05}
  .headline p{font-size:15px;line-height:1.4;margin:0}
  .play{margin-top:12px;min-height:44px;padding:10px 16px;font-size:15px}
  .demo-note{margin-top:6px;font-size:9px}
  .hero .panel{padding:12px 14px;border-radius:18px}
  .hero .panel h2{margin-bottom:4px;font-size:10px}
  .stage{min-height:208px;padding:6px 0 40px;gap:42px}
  .phone{width:96px;height:158px;border-radius:18px}
  .phone .screen{inset:19px 6px 6px;border-radius:11px;gap:5px}
  .phone .screen .amt{font-size:15px}.phone .who{bottom:-18px;font-size:9px}
  .payment-status{min-height:30px;margin:8px 0 6px;font-size:11px;line-height:1.35}
  .rail-btn{min-height:44px;padding:10px 4px;font-size:11px}
}

/* Strong type and two recognisably different handsets. */
body{font-weight:400}
.brand .tag b,.headline h1{color:#012169}
.headline p,.payment-status{color:#012169;font-weight:500}
.panel h2,.panel h2 .stat,.rail-btn,.phone .screen .lbl,.demo-note,.consent{font-weight:600}
.brand .tag span,.score-note,.kpi span,.gauge .num span{font-weight:500}
.phone .screen .amt{font-weight:700}
.phone.customer{border-color:#012169;background:linear-gradient(145deg,#68BFE5,#68BFE5)}
.phone.merchant{border-color:#012169;background:linear-gradient(145deg,#012169,#012169);border-radius:15px}
.phone.merchant .notch{width:25px;height:7px;background:#012169;border:1px solid #68BFE5}
.phone .who{bottom:-36px;font-size:11px;letter-spacing:0;text-transform:none;color:#012169;font-weight:700;line-height:1.35}
.phone .who span{display:block;text-align:center;font-size:10px;font-weight:500;color:#012169}
.stage{padding-bottom:46px}
.consent .dot{background:#012169;box-shadow:none}
.payment-receipt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:7px;background:#FFFFFF;color:#012169;text-align:center;animation:receipt-in .25s ease-out}
.payment-receipt[hidden]{display:none}
.receipt-check{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#012169;color:white;font-size:22px;font-weight:700}
.payment-receipt strong{font-size:12px;line-height:1.25;font-weight:700}
.payment-receipt b{font-family:var(--mono);font-size:13px}
.payment-receipt small{font-size:8px;font-weight:500}
@keyframes receipt-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.payment-receipt{animation:none}}
.rail-btn[data-rail="mpaisa"]{--rail-lit:#C8102E;--rail-glow:#C8102E66;--rail-ink:#FFFFFF}
.rail-btn[data-rail="mycash"]{--rail-lit:#68BFE5;--rail-glow:#C8102E77;--rail-ink:#C8102E}
.rail-btn[data-rail="visa"]{--rail-lit:#012169;--rail-glow:#68BFE577;--rail-ink:#FFFFFF}
.rail-btn.active,.rail-btn.active:hover,.rail-btn.active:disabled{
  background:var(--rail-lit);color:var(--rail-ink);border-color:var(--rail-lit);
  opacity:1;box-shadow:0 0 0 3px var(--rail-glow),0 0 22px var(--rail-glow);
  transform:translateY(-1px);animation:payment-glow 1.2s ease-in-out infinite alternate;
}
.rail-btn.active .sw{background:var(--rail-ink);box-shadow:0 0 7px var(--rail-ink)}
@keyframes payment-glow{to{box-shadow:0 0 0 4px var(--rail-glow),0 0 30px var(--rail-glow)}}
@media(prefers-reduced-motion:reduce){.rail-btn.active{animation:none}}
@media(max-width:650px){
  .brand .tag b{font-size:18px;letter-spacing:-.025em}
  .consent{font-size:10px}
  .phone .who{bottom:-34px;font-size:10px}
  .phone .who span{font-size:9px}
  .stage{padding-bottom:40px}
}

/* One shared palette: the sky blue, navy, red and white of Fiji's flag. */
.account-entry{display:flex;gap:10px;margin-top:12px}.account-entry a{flex:1;text-align:center;text-decoration:none;background:#FFFFFF;color:#012169;border:1px solid #012169;border-radius:10px;padding:12px 8px;font-size:12px;font-weight:600;min-height:44px}.account-entry a:hover{background:#012169;color:#FFFFFF}
.login-entry{padding:9px 12px;border:1px solid #012169;border-radius:9px;background:#FFFFFF;color:#012169;font-size:12px;font-weight:650;text-decoration:none}
:root{--flag-sky:#68BFE5;--flag-navy:#012169;--flag-red:#C8102E;--flag-white:#FFFFFF;
 --navy-0:var(--flag-sky);--navy-1:var(--flag-white);--navy-2:var(--flag-sky);--navy-3:var(--flag-navy);
 --dimau:var(--flag-navy);--dimau-hi:var(--flag-navy);--dim:var(--flag-navy);--text:var(--flag-navy);--silver:var(--flag-navy);
 --mpaisa:var(--flag-red);--mycash:var(--flag-sky);--visa:var(--flag-navy);--ok:var(--flag-navy);--warn:var(--flag-red)}
body{background:var(--flag-sky)}
.play,.play:hover{background:var(--flag-red);color:var(--flag-white)}
.panel,.phone .screen,.payment-receipt{background:var(--flag-white)}
.phone.customer{background:var(--flag-sky);border-color:var(--flag-navy)}
.phone.merchant{background:var(--flag-navy);border-color:var(--flag-navy)}
.phone.merchant .notch{background:var(--flag-white);border-color:var(--flag-white)}
.phone.customer .notch{background:var(--flag-navy)}
.payment-receipt{color:var(--flag-navy)}
.receipt-check{background:var(--flag-white);color:#278438;border:2px solid #278438}
.checkmark{color:#278438}
.rail-btn[data-rail="mpaisa"]{--rail-lit:var(--flag-red);--rail-glow:#C8102E66;--rail-ink:var(--flag-white)}
.rail-btn[data-rail="mycash"]{--rail-lit:var(--flag-sky);--rail-glow:#68BFE577;--rail-ink:var(--flag-navy)}
.rail-btn[data-rail="visa"]{--rail-lit:var(--flag-navy);--rail-glow:#01216966;--rail-ink:var(--flag-white)}
.term .rail-mycash,.term .rail-visa{color:var(--flag-navy)}
.rail-logo{width:32px;height:22px;object-fit:contain;background:#FFFFFF;border-radius:4px;padding:2px;flex:none}
.receipt-brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}
.receipt-brand img{width:48px;height:20px;object-fit:contain;background:#FFFFFF}
.receipt-brand span{font-size:8px;font-weight:650;line-height:1.1}
.payment-receipt{gap:4px;padding:5px}
.receipt-check{width:25px;height:25px;font-size:19px}
.payment-receipt strong{font-size:11px;line-height:1.15}
@media(max-width:650px){.rail-btn{gap:4px;font-size:10px}.rail-logo{width:28px;height:20px}.fb-open{position:static;margin:24px 72px 0 auto;width:max-content}body{padding-bottom:130px}}

.transactions{margin-top:18px}.transactions .ledger{max-height:280px}.transactions td small{display:block;font-size:10px}.transactions th,.transactions td{white-space:normal;padding:12px 10px}.transactions table{min-width:0;width:100%}@media(max-width:650px){.transactions th,.transactions td{font-size:11px;padding:10px 6px}}