/* Match the supplied phone recording, excluding the phone's operating-system chrome. */
:root{--app-width:416px;--nav-height:94px;--teal:#5bc1c4}
body{background:#111;font-family:Arial,Helvetica,sans-serif;font-weight:400}
.app{background:#111;padding-bottom:calc(var(--nav-height) + var(--safe-bottom));min-height:100dvh}
.header{height:38px;font-size:14px;padding:0 17px 0 28px;border-bottom:1px solid #191919;gap:13px}
.header #heading{flex:1;min-width:0}.header .qr{gap:21px;align-items:center}.header svg{width:23px;height:23px}.header-back{padding:0;border:0;background:none;color:#eee;display:flex}.header:has(.header-back){padding-left:10px}
.bottom{height:calc(94px + var(--safe-bottom));padding-bottom:calc(20px + var(--safe-bottom));background:#2b2b2b}.bottom-inner{align-items:start}.nav,.nav.active{padding:8px 1px 4px;font-size:12px}.nav b{height:32px;margin-bottom:5px}.nav svg{width:32px;height:32px}.nav.active:before{height:3px}.nav:nth-child(3) b:after{background:#ffb45c;top:7px;width:10px;height:10px}
.notice{font-size:9px;margin:15px 0 0;padding:12px;color:#939393}
.banner{aspect-ratio:384/210}.search{margin:16px 7.2% 21px;height:47px;border-color:#ddd;border-radius:13px}.search span{width:46px;padding:8px}.search input{font-size:14px}.tiles{padding:0 6.5%;column-gap:6.5%;row-gap:45px}.symbol{max-width:none;border:2px solid #2c2c2c;border-radius:15px;margin-bottom:13px}.symbol svg{width:66%;height:66%;color:#278e8d}.tile label{font-size:14px;line-height:1.2;min-height:2.4em;margin:0 -10px;overflow-wrap:normal}.tile:nth-child(1) .symbol{color:#278e8d!important}.tile:nth-child(3) .symbol,.tile:nth-child(8) .symbol{color:#f58215!important}.tile:nth-child(5) label{margin:0 -5px}.badge{background:#ffb251;right:-7px;top:-9px;min-width:27px;height:27px;font-size:14px}
.account-banner{display:block;width:100%;height:auto;aspect-ratio:384/152;padding:0;object-fit:cover}.quickbar{margin:-53px 4% 0;border-radius:10px;background:#2b2b2b;padding:16px 0 12px;min-height:79px}.quickbar svg{width:26px;height:26px;margin-bottom:8px}.quickbar button{font-size:12px}.accounts{padding:0 3.1%}.add-account{margin:42px 16px 36px;gap:21px;font-size:14px;padding:0}.add-account span{width:42px;height:42px;border:1.5px solid #e68b33;border-radius:50%;display:grid;place-items:center;font-size:35px;font-weight:200;line-height:1;color:#e68b33}.account-group{margin:0 15px 23px;color:#78c6c6;font-size:14px}.account-row{padding:13px 16px;border-radius:12px;background:#2b2b2b;min-height:65px;margin-bottom:24px;font-size:12px}.account-row small{font-size:12px;line-height:1.8;color:#d7d7d7}.accounts .account-row:last-child{margin-bottom:9px}
body[data-screen='Bank'] .notice,body[data-screen='Accounts'] .notice,body[data-screen='Account Details'] .notice,body[data-screen='Buy + Gift'] .notice,body[data-screen='Airtime & Bundles'] .notice,body[data-screen='Prepaid details'] .notice{display:none}
body[data-screen='Account Details'] .subhead,body[data-screen='Buy + Gift'] .subhead,body[data-screen='Airtime & Bundles'] .subhead,body[data-screen='Prepaid details'] .subhead{display:none}
.tabbar{height:58px;border-bottom:2px solid #191919}.tabbar button{font-size:14px;color:#eee;padding:15px 4px;border-bottom-width:5px}.tabbar .selected{font-weight:600;color:#76cbcb;border-bottom-color:#69c5c5}.transaction-list{padding:0 3.1%}.date-label{font-size:14px;color:#7ac7c6;margin:12px 16px 13px}.date-label.previous-days{margin-top:22px}.transaction-list .account-row{padding:12px 16px;min-height:64px;margin-bottom:11px;font-size:13px}.transaction-list .account-row small{font-size:12px;margin-top:3px}.transaction-list .account-row>span:last-child{white-space:nowrap;font-size:14px}.history-screen .bottom{display:none}.history-screen .app{padding-bottom:20px}.account-summary{padding:13px 7.2% 0;font-size:14px}.reference-card{display:block;width:110px;height:72px;object-fit:contain;margin:0 auto 13px}.account-summary>b{display:block;font-size:17px;margin-bottom:8px}.account-summary .detail-line{margin:0;color:#ddd;line-height:17px;gap:4px}.option-grid{margin:16px 0 0;row-gap:45px;padding:0 7.2%;column-gap:7%}.option-grid label{font-size:14px;margin:0 -12px;line-height:1.2}.option-grid .symbol{margin-bottom:12px}.option-grid .tile:nth-child(2) .symbol{color:#f58215!important}.option-grid .tile:nth-child(3) .symbol{color:#278e8d!important}
.buy-gift{background:#181818;padding-bottom:12px}.connect-banner{display:block;width:86%;aspect-ratio:330/99;margin:0 auto 10px}.purchase-card{background:#111;border-radius:14px;overflow:hidden;margin:0 3.1% 22px}.provider-strip{width:100%;height:auto;display:block}.purchase-copy{padding:0 16px 10px}.purchase-copy h2{font-size:17px;font-weight:600;margin:15px 0 16px}.purchase-copy p{font-size:13px;color:#eee;margin:0 0 18px;line-height:1.4}.orange-action{border:1px solid #ffb368;border-radius:25px;background:#ff6900;color:white;padding:12px;width:100%;font-size:14px;min-height:43px}.voucher-strip{display:block;width:91%;height:auto;margin:4px auto 0}.voucher-card{margin-bottom:16px}.voucher-card .purchase-copy h2{margin-top:12px}.voucher-card .purchase-copy{padding-bottom:16px}.purchase-small{display:flex;align-items:center;gap:16px;background:#2b2b2b;border-radius:12px;margin:10px 3.1%;padding:12px 15px;font-size:13px;min-height:65px}.purchase-small small{display:block;color:#ddd;margin-top:5px}.purchase-small>.teal-pill{margin-left:auto;white-space:nowrap}.purchase-round{border:1px solid #555;border-radius:50%;width:46px;height:46px;color:#278e8d;flex-shrink:0}.purchase-round svg{width:100%;height:100%}.lottery-mark{height:46px;width:46px;display:grid;place-items:center;border-radius:50%;color:#ffc900;background:conic-gradient(#009c42 0 25%,#ed3129 25% 50%,#0574bb 50% 75%,#111 75%);border:3px solid #111;font-size:32px;flex-shrink:0}.teal-pill{border:0;background:#5bc1c4;color:#071b1b;padding:7px 14px;border-radius:22px;font-size:14px;line-height:18px;flex-shrink:0}
body[data-screen='Airtime & Bundles'] .bottom,body[data-screen='Prepaid details'] .bottom{display:none}body[data-screen='Airtime & Bundles'] .app,body[data-screen='Prepaid details'] .app{padding-bottom:0}.airtime-numbers section{border-bottom:1px solid #ccc}.airtime-numbers h2{font-size:17px;color:#78c7c7;margin:5px 28px 12px;font-weight:600}.airtime-number{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 27px 17px 28px;font-size:14px;line-height:17px;min-height:70px}.airtime-number small{display:block;font-size:13px;color:#ccc;line-height:15px;margin-top:6px}.last-purchased .airtime-number{min-height:87px}.airtime-numbers .last-purchased{border-bottom:4px solid #ccc;padding-bottom:8px}.travel-esim{margin:31px 12px 20px;padding:12px 15px;background:#ffa74c;color:#111;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:11px;font-size:14px;line-height:21px}
.prepaid-details{padding:0 7.2% 92px;min-height:calc(100dvh - 38px);position:relative}.prepaid-details h2{font-size:23px;font-weight:400;margin:5px 0 39px}.prepaid-details label{font-size:13px;color:#ddd;display:block;margin-bottom:7px}.prepaid-number-wrap{border:1px solid #ccc;background:#202020;border-radius:12px;height:37px;display:flex;align-items:center;overflow:hidden}.prepaid-number-wrap input{width:100%;min-width:0;border:0;color:white;background:none;padding:8px 12px;outline:none;font-size:16px}.prepaid-number-wrap button{border:0;background:none;color:#ddd;font-size:25px;padding:0 9px}.prepaid-continue{position:absolute;bottom:35px;left:7.2%;width:85.6%;min-height:43px;border:0;border-radius:24px;background:#fafafa;color:#111;font-size:14px}
@media(min-width:650px){body{background:#1b2022}}@media(max-width:350px){.tile label,.option-grid label{font-size:12px}.airtime-number{padding-left:18px;padding-right:18px;font-size:12px}.teal-pill{font-size:12px;padding:7px 10px}.accounts .account-group{font-size:13px}.nav,.nav.active{font-size:10px}}
.symbol svg{color:inherit}.option-grid .tile:nth-child(n) .symbol{color:#278e8d!important}.option-grid .tile:nth-child(2) .symbol{color:#f58215!important}.reference-search{padding:15px 28px}
@font-face{font-family:ReferenceSans;src:url('assets/reference-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}@font-face{font-family:ReferenceSans;src:url('assets/reference-600.ttf') format('truetype');font-style:normal;font-weight:500 900;font-display:swap}
:root,body{font-family:ReferenceSans,-apple-system,BlinkMacSystemFont,Arial,sans-serif}.purchase-copy p{font-size:12px}.orange-action{font-weight:400}.option-grid{column-gap:6%;row-gap:28px}.add-account span{font-size:0;position:relative}.add-account span:before,.add-account span:after{content:'';position:absolute;background:#e68b33;left:8px;right:8px;top:19px;height:1px}.add-account span:after{transform:rotate(90deg)}
body[data-screen='Home'] .tiles{row-gap:35px}.accounts .account-row small{font-size:11px}.option-grid{column-gap:5.5%;row-gap:31px}.purchase-copy p{margin-bottom:15px}.purchase-copy h2{margin-bottom:15px}.airtime-numbers section:first-child .airtime-number,.airtime-numbers section:nth-child(2) .airtime-number{min-height:64px}.airtime-numbers section:nth-child(2) h2{margin-bottom:6px}.airtime-numbers .last-purchased h2{margin-bottom:2px}.last-purchased .airtime-number{min-height:80px}
/* Login and profile selection shown in the latest recording. */
body[data-screen='Login'] .bottom,body[data-screen='Choose a profile'] .bottom{display:none}
body[data-screen='Login'] .app,body[data-screen='Choose a profile'] .app{padding-bottom:0}
.password-login{padding:0 7.2% 28px}
.password-login .login-mark{width:72px;height:72px;margin:7px auto 39px}
.password-login .login-mark svg{width:72px;height:72px}
.password-login .login-text{font-size:12px;color:#80c2c1;margin-bottom:39px;line-height:1.4}
.password-login .field-label{font-size:12px;color:#ddd;margin-bottom:7px}
.password-wrap{height:37px;border-color:#ccc;border-radius:12px;background:#202020}
.password-login .action{min-height:40px;font-size:14px;margin-top:35px}
.password-login .secondary{margin-top:20px;background:#292929;border-color:#ddd;color:#eee}
body[data-screen='Choose a profile'] .profile-list{padding:0}
.profile-title{margin:7px 28px 14px;font-size:16px;line-height:1.35;font-weight:600;color:#78c7c7}
.profile-card{padding:15px 28px;min-height:92px;gap:12px;font-size:14px;line-height:1.35;border-bottom:1px solid #777}
.profile-card>span:last-child{text-align:right;white-space:nowrap;line-height:1.8}
.profile-card small{font-size:14px;color:#ddd}
.profile-card+.profile-title{margin-top:31px;margin-bottom:18px}
.profile-card.selected{background:#777;color:#111;border:1px solid #ccc;border-radius:5px}
.profile-card.selected small{color:#222}
.profile-list>.demo-note{padding:16px 28px;font-size:11px;color:#aaa}
body[data-screen='Home'] .tile:first-child .symbol{color:#b86624!important}

/* Home screen proportions from the supplied still; other screens retain their layout. */
body[data-screen='Home'] .app{container-type:inline-size}
body[data-screen='Home'] .header{height:11.47cqw;padding:0 4.6cqw 0 7.45cqw;font-size:3.82cqw;align-items:center}
body[data-screen='Home'] .header svg{width:5.7cqw;height:5.7cqw}
body[data-screen='Home'] .banner{aspect-ratio:523/280;object-fit:cover}
body[data-screen='Home'] .search{margin:4cqw 7.45% 5.15cqw;height:12.05cqw;border-radius:3.05cqw;border:1.5px solid #ccc;background:#202020}
body[data-screen='Home'] .search span{width:12.05cqw;padding:2cqw;border-radius:2.8cqw 0 2.8cqw 2.8cqw;background:#65c8cc}
body[data-screen='Home'] .search span svg{width:8cqw;height:8cqw}
body[data-screen='Home'] .search input{font-size:3.82cqw;padding:2cqw 2.65cqw}
body[data-screen='Home'] .tiles{padding:0 6.5%;column-gap:5.6%;row-gap:13.1cqw}
body[data-screen='Home'] .symbol{aspect-ratio:1;height:auto;border:2px solid #323232;border-radius:3.5cqw;margin-bottom:3.6cqw}
body[data-screen='Home'] .symbol svg{width:66%;height:66%;stroke-width:1.5}
body[data-screen='Home'] .tile label{font-size:3.63cqw;line-height:1.15;margin-left:-14px;margin-right:-14px}
body[data-screen='Home'] .badge{height:6.9cqw;min-width:6.9cqw;top:-2.5cqw;right:-2.3cqw;font-size:3.8cqw}
body[data-screen='Home'] .header:after{content:'Interactive demo';font-size:10px;color:#aaa;margin-left:auto;margin-right:14px}
body[data-screen='Home'] .qr{order:1}