.mobile-apps-payments-page {
  --mobile-ink: #171627;
  --mobile-muted: #666478;
  --mobile-paper: #f8f7f3;
  --mobile-white: #fff;
  --mobile-violet: #5c43e8;
  --mobile-pink: #f43f78;
  --mobile-lime: #c9f36b;
  color: var(--mobile-ink);
  background: var(--mobile-paper);
  overflow: clip;
}

.mobile-apps-payments-page *,
.mobile-apps-payments-page *::before,
.mobile-apps-payments-page *::after { box-sizing: border-box; }

.mobile-apps-container {
  width: min(1200px, 100%);
  margin: 0 auto;
  padding-right: 32px;
  padding-left: 32px;
}

.mobile-apps-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: var(--mobile-violet);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .17em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mobile-apps-eyebrow > span {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--mobile-pink);
}

.mobile-apps-eyebrow--dark { justify-content: center; color: #d8d5ec; }
.mobile-apps-eyebrow--dark > span { background: var(--mobile-lime); }
.mobile-apps-eyebrow--light { color: #d6d0ff; }
.mobile-apps-eyebrow--light > span { background: var(--mobile-lime); }

.mobile-apps-hero {
  position: relative;
  isolation: isolate;
  min-height: 682px;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(ellipse at 78% 32%, rgba(137, 118, 255, .38), transparent 38%),
    linear-gradient(118deg, #19172c 0%, #262044 50%, #3b2a77 100%);
}

.mobile-apps-hero::before,
.mobile-apps-hero::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.mobile-apps-hero::before { width: 710px; height: 710px; top: -380px; right: -120px; }
.mobile-apps-hero::after { width: 540px; height: 540px; bottom: -420px; left: 37%; }

.mobile-apps-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(390px, 1.08fr);
  align-items: center;
  gap: 34px;
  width: min(1200px, 100%);
  min-height: 682px;
  margin: 0 auto;
  padding: 58px 32px 72px;
}

.mobile-apps-hero__copy { position: relative; z-index: 2; max-width: 560px; }
.mobile-apps-hero .mobile-apps-eyebrow { color: #d7d3f1; }
.mobile-apps-hero .mobile-apps-eyebrow > span { background: var(--mobile-lime); }

.mobile-apps-hero h1 {
  max-width: 650px;
  margin: 0;
  color: #fff;
  font-size: clamp(48px, 5vw, 70px);
  font-weight: 750;
  letter-spacing: -.055em;
  line-height: .99;
}

.mobile-apps-hero__lead {
  max-width: 530px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .79);
  font-size: 17px;
  line-height: 1.75;
}

.mobile-apps-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 30px; }
.mobile-apps-actions button,
.mobile-apps-actions a,
.mobile-apps-scope__actions button,
.mobile-apps-scope__actions a {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 11px;
  border-radius: 999px;
  padding: 0 22px;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.mobile-apps-actions button,
.mobile-apps-scope__actions button { border: 0; background: var(--mobile-lime); color: #211d32; cursor: pointer; }
.mobile-apps-actions button:hover,
.mobile-apps-scope__actions button:hover { background: #d8ff83; box-shadow: 0 10px 28px rgba(201, 243, 107, .2); }
.mobile-apps-actions button svg,
.mobile-apps-scope__actions button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mobile-apps-actions a,
.mobile-apps-scope__actions a { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.mobile-apps-actions a.mobile-apps-action--primary,
.mobile-apps-scope__actions a.mobile-apps-action--primary { border: 0; background: var(--mobile-lime); color: #211d32; }
.mobile-apps-actions a:hover,
.mobile-apps-scope__actions a:hover { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .08); }
.mobile-apps-actions a img,
.mobile-apps-scope__actions a img { width: 19px; height: 19px; }
.mobile-apps-actions a:focus-visible,
.mobile-apps-actions button:focus-visible,
.mobile-apps-scope__actions a:focus-visible,
.mobile-apps-scope__actions button:focus-visible,
.mobile-apps-text-link:focus-visible { outline: 3px solid var(--mobile-lime); outline-offset: 4px; }

.mobile-apps-hero__note { margin: 19px 0 0; color: rgba(255, 255, 255, .56); font-size: 11px; letter-spacing: .04em; }
.mobile-apps-hero__visual { position: relative; min-height: 505px; }
.mobile-apps-hero__photo { position: absolute; top: 27px; right: 0; width: 78%; height: 405px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .22); border-radius: 28px; box-shadow: 0 35px 90px rgba(8, 6, 28, .35); transform: rotate(2deg); }
.mobile-apps-hero__photo::after { position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(18, 14, 40, .74)); content: ""; }
.mobile-apps-hero__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.mobile-apps-hero__photo > span { position: absolute; z-index: 1; right: 20px; bottom: 20px; left: 20px; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }

.mobile-apps-phone {
  position: absolute;
  z-index: 2;
  width: 190px;
  height: 365px;
  border: 6px solid #181721;
  border-radius: 30px;
  background: #181721;
  box-shadow: 0 24px 58px rgba(10, 8, 29, .38);
}

.mobile-apps-phone--back { top: 71px; left: 2px; transform: rotate(-9deg); }
.mobile-apps-phone--front { top: 145px; right: 8px; width: 202px; height: 375px; transform: rotate(7deg); }
.mobile-apps-phone__speaker { position: absolute; z-index: 1; top: 7px; left: 50%; width: 53px; height: 13px; border-radius: 10px; background: #181721; transform: translateX(-50%); }
.mobile-apps-phone__screen { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: 22px; background: #fbfaf7; padding: 37px 15px 17px; color: #201e32; }
.mobile-apps-phone__tiny { color: #79768b; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.mobile-apps-phone__screen > b { margin-top: 18px; font-size: 17px; line-height: 1.2; }
.mobile-apps-phone--back .mobile-apps-phone__screen > i { height: 72px; margin-top: 13px; border: 1px solid #e6e3ee; border-radius: 9px; background: linear-gradient(135deg, #f1edff, #fff 72%); }
.mobile-apps-phone--back .mobile-apps-phone__screen > i:nth-of-type(2) { height: 50px; background: linear-gradient(90deg, #e8e4f4 68%, #fbfaf7 68%); }
.mobile-apps-phone--back .mobile-apps-phone__screen > i:nth-of-type(3) { height: 50px; background: linear-gradient(90deg, #e8e4f4 51%, #fbfaf7 51%); }
.mobile-apps-phone__amount { margin-top: 19px; border-bottom: 1px solid #e8e5ee; padding-bottom: 15px; color: #77748a; font-size: 10px; }
.mobile-apps-phone__amount strong { display: block; margin-top: 5px; color: #201e32; font-size: 25px; }
.mobile-apps-phone__method { display: flex; align-items: center; gap: 8px; margin-top: 16px; border: 1px solid #e3e0e9; border-radius: 9px; padding: 10px 8px; font-size: 9px; font-weight: 800; }
.mobile-apps-phone__method > span { display: grid; width: 21px; height: 21px; place-items: center; border-radius: 7px; background: #d6f17e; color: #25582c; font-size: 12px; }
.mobile-apps-phone__method small { display: grid; width: 14px; height: 14px; margin-left: auto; place-items: center; }
.mobile-apps-phone__method small svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mobile-apps-phone__pay { margin-top: auto; border-radius: 8px; background: #6048e9; padding: 11px 8px; color: #fff; font-size: 9px; font-weight: 750; text-align: center; }
.mobile-apps-phone__pay svg { width: 11px; height: 11px; margin-left: 4px; vertical-align: middle; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mobile-apps-hero__caption { position: absolute; right: 0; bottom: 1px; margin: 0; color: rgba(255, 255, 255, .54); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; }
.mobile-apps-hero__scroll { position: absolute; right: max(32px, calc((100vw - 1136px) / 2)); bottom: 21px; display: inline-flex; min-height: 36px; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,.38); border-radius: 999px; background: rgba(20,18,38,.24); padding: 0 12px; color: rgba(255, 255, 255, .86); font-size: 11px; font-weight: 700; text-decoration: none; transition: background-color .2s ease,border-color .2s ease; }
.mobile-apps-hero__scroll:hover { border-color: var(--mobile-lime); background: rgba(20,18,38,.5); }
.mobile-apps-hero__scroll svg { width: 14px; height: 14px; fill: none; stroke: var(--mobile-lime); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }

.mobile-apps-journey { position: relative; padding: 99px 0 88px; color: #fff; background: #211e36; }
.mobile-apps-section-heading { max-width: 660px; }
.mobile-apps-section-heading--platforms { max-width: none; }
.mobile-apps-section-heading--center { margin: 0 auto; text-align: center; }
.mobile-apps-section-heading h2,
.mobile-apps-experience__copy h2,
.mobile-apps-mpesa__copy h2,
.mobile-apps-after__intro h2,
.mobile-apps-faq__heading h2 {
  margin: 0;
  color: var(--mobile-ink);
  font-size: clamp(34px, 4vw, 49px);
  font-weight: 740;
  letter-spacing: -.045em;
  line-height: 1.08;
}

.mobile-apps-journey .mobile-apps-section-heading h2 { color: #fff; }
.mobile-apps-section-heading > p:last-child { margin: 17px 0 0; color: var(--mobile-muted); font-size: 15px; line-height: 1.8; }
.mobile-apps-journey .mobile-apps-section-heading > p:last-child { color: #b8b4cc; }

.mobile-apps-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: 66px 0 0;
  padding: 0;
  list-style: none;
}

.mobile-apps-flow::before { position: absolute; top: 34px; right: 10%; left: 10%; height: 1px; background: linear-gradient(90deg, #8a72f2, #c9f36b); content: ""; }
.mobile-apps-flow li { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; padding: 0 11px; text-align: center; }
.mobile-apps-flow__number { position: absolute; top: -26px; color: #8c88a3; font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.mobile-apps-flow__icon { z-index: 1; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: #211e36; color: var(--mobile-lime); }
.mobile-apps-flow__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }
.mobile-apps-flow li:nth-child(3) .mobile-apps-flow__icon { border-color: transparent; background: var(--mobile-violet); color: #fff; box-shadow: 0 0 0 9px rgba(92, 67, 232, .13); }
.mobile-apps-flow li strong { margin-top: 19px; color: #fff; font-size: 13px; line-height: 1.4; }
.mobile-apps-flow li small { max-width: 145px; margin-top: 6px; color: #aaa6bf; font-size: 11px; line-height: 1.55; }
.mobile-apps-flow-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin: 35px 0 0; color: #aaa6bf; font-size: 11px; line-height: 1.6; text-align: center; }
.mobile-apps-flow-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; fill: none; stroke: var(--mobile-lime); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; }

.mobile-apps-experience { padding: 113px 0 118px; background: var(--mobile-paper); }
.mobile-apps-experience__grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: clamp(55px, 8vw, 115px); }
.mobile-apps-experience__visual { position: relative; display: grid; min-height: 460px; place-items: center; overflow: hidden; border-radius: 32px; background: #e6e0ff; }
.mobile-apps-experience__visual::before { position: absolute; top: -75px; left: -45px; width: 245px; height: 245px; border: 1px solid rgba(92, 67, 232, .15); border-radius: 50%; content: ""; }
.mobile-apps-experience__visual img { position: relative; z-index: 1; width: 90%; height: 385px; object-fit: contain; }
.mobile-apps-experience__label { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(255, 255, 255, .68); border-radius: 15px; background: rgba(255, 255, 255, .84); padding: 13px 16px; backdrop-filter: blur(14px); }
.mobile-apps-experience__label > span:first-child { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 50%; background: var(--mobile-violet); color: #fff; font-size: 10px; font-weight: 800; }
.mobile-apps-experience__label > span:last-child { color: #77748a; font-size: 10px; line-height: 1.45; }
.mobile-apps-experience__label strong { color: #26243a; font-size: 12px; }
.mobile-apps-experience__orbit { position: absolute; z-index: 0; border: 1px solid rgba(92, 67, 232, .18); border-radius: 50%; }
.mobile-apps-experience__orbit--one { width: 330px; height: 330px; }
.mobile-apps-experience__orbit--two { width: 455px; height: 455px; }
.mobile-apps-experience__copy h2 em { color: var(--mobile-violet); font-style: normal; }
.mobile-apps-experience__copy > p:not(.mobile-apps-eyebrow):not(.mobile-apps-honesty) { margin: 21px 0 0; color: var(--mobile-muted); font-size: 15px; line-height: 1.85; }
.mobile-apps-checklist { display: grid; gap: 18px; margin: 29px 0 0; padding: 0; list-style: none; }
.mobile-apps-checklist li { display: flex; align-items: flex-start; gap: 13px; }
.mobile-apps-checklist li > svg { display: block; width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; background: #e9e5ff; padding: 5px; color: var(--mobile-violet); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.mobile-apps-checklist li strong { display: block; color: var(--mobile-ink); font-size: 13px; }
.mobile-apps-checklist li small { display: block; margin-top: 4px; color: var(--mobile-muted); font-size: 12px; line-height: 1.6; }
.mobile-apps-honesty { margin: 25px 0 0; border-left: 2px solid var(--mobile-pink); padding-left: 13px; color: var(--mobile-muted); font-size: 11px; line-height: 1.65; }

.mobile-apps-payments { padding: 102px 0 94px; background: #f0eef9; }
.mobile-apps-payments .mobile-apps-section-heading h2 { max-width: 760px; }
.mobile-apps-payment-service__details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.mobile-apps-payment-service__details article { border: 1px solid #dcd9e8; border-radius: 14px; background: rgba(255, 255, 255, .55); padding: 22px; }
.mobile-apps-payment-service__details article > span { color: #77748b; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.mobile-apps-payment-service__details h3 { margin: 13px 0 0; color: var(--mobile-ink); font-size: 17px; line-height: 1.3; }
.mobile-apps-payment-service__details p { margin: 9px 0 0; color: var(--mobile-muted); font-size: 12px; line-height: 1.75; }
.mobile-apps-payment-lanes { margin-top: 52px; border-top: 1px solid #dcd9e8; }
.mobile-apps-payment-lane { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 83px; border-bottom: 1px solid #dcd9e8; }
.mobile-apps-payment-lane__index { color: #77748b; font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.mobile-apps-payment-lane p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.mobile-apps-payment-lane p b { color: var(--mobile-ink); font-size: 12px; font-weight: 700; }
.mobile-apps-payment-lane p i { color: var(--mobile-violet); font-size: 17px; font-style: normal; }
.mobile-apps-provider-line { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 24px; margin-top: 36px; }
.mobile-apps-provider-line > span { color: #77748b; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mobile-apps-provider-line__logos { display: flex; align-items: center; gap: 19px; }
.mobile-apps-provider-line__logos img { width: auto; max-width: 68px; height: 27px; object-fit: contain; }
.mobile-apps-provider-line > p { grid-column: 1/-1; margin: 0; color: #77748b; font-size: 10px; }

.mobile-apps-pos { padding: 102px 0 94px; background: #fff; }
.mobile-apps-pos .mobile-apps-section-heading h2 { max-width: 720px; }
.mobile-apps-pos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 48px; border-top: 1px solid #e5e2eb; }
.mobile-apps-pos__grid article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 13px; padding: 24px 22px 0 0; }
.mobile-apps-pos__grid article + article { border-left: 1px solid #e5e2eb; padding-left: 22px; }
.mobile-apps-pos__number { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #eeeaff; color: var(--mobile-violet); font-size: 10px; font-weight: 800; }
.mobile-apps-pos__grid h3 { margin: 1px 0 0; color: var(--mobile-ink); font-size: 15px; line-height: 1.35; }
.mobile-apps-pos__grid p { margin: 9px 0 0; color: var(--mobile-muted); font-size: 12px; line-height: 1.75; }
.mobile-apps-pos__note { margin: 28px 0 0; border-left: 2px solid var(--mobile-pink); padding-left: 13px; color: var(--mobile-muted); font-size: 11px; line-height: 1.7; }

.mobile-apps-mpesa { position: relative; overflow: hidden; padding: 104px 0; color: #fff; background: #171626; }
.mobile-apps-mpesa::after { position: absolute; top: -250px; right: -190px; width: 580px; height: 580px; border: 1px solid rgba(201, 243, 107, .14); border-radius: 50%; content: ""; }
.mobile-apps-mpesa__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: clamp(55px, 8vw, 108px); }
.mobile-apps-mpesa__visual { position: relative; display: flex; min-height: 416px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .11); border-radius: 26px; background: radial-gradient(circle at 52% 42%, #39315f, #222039 62%, #1c1a2f); }
.mobile-apps-mpesa__visual img { width: 100%; height: 100%; max-height: 390px; object-fit: contain; }
.mobile-apps-mpesa__stamp { position: absolute; top: 18px; left: 18px; display: flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 255, 255, .17); border-radius: 30px; background: rgba(21, 19, 38, .65); padding: 8px 11px; color: #d0ccdf; font-size: 8px; font-weight: 800; letter-spacing: .12em; }
.mobile-apps-mpesa__stamp b { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: var(--mobile-lime); color: #242037; font-size: 8px; }
.mobile-apps-mpesa__visual-caption { position: absolute; right: 16px; bottom: 15px; left: 16px; color: rgba(255, 255, 255, .67); font-size: 10px; text-align: center; }
.mobile-apps-mpesa__copy { max-width: 490px; }
.mobile-apps-mpesa__copy h2 { color: #fff; }
.mobile-apps-mpesa__copy > p:not(.mobile-apps-eyebrow) { margin: 20px 0 0; color: #c2bfd0; font-size: 14px; line-height: 1.85; }
.mobile-apps-mpesa__details { display: grid; gap: 16px; margin-top: 28px; }
.mobile-apps-mpesa__details p { margin: 0; border-left: 1px solid rgba(201, 243, 107, .65); padding-left: 14px; }
.mobile-apps-mpesa__details strong,
.mobile-apps-mpesa__details span { display: block; }
.mobile-apps-mpesa__details strong { color: #fff; font-size: 12px; }
.mobile-apps-mpesa__details span { margin-top: 5px; color: #aaa6bb; font-size: 11px; line-height: 1.65; }
.mobile-apps-text-link { display: inline-flex; min-height: 40px; align-items: center; gap: 8px; margin-top: 26px; border: 1px solid rgba(92,67,232,.3); border-radius: 999px; background: rgba(92,67,232,.035); padding: 0 14px; color: var(--mobile-violet); font-size: 11px; font-weight: 800; text-decoration: none; transition: background-color .2s ease,border-color .2s ease; }
.mobile-apps-text-link:hover { border-color: var(--mobile-violet); background: rgba(92,67,232,.08); }
.mobile-apps-mpesa .mobile-apps-text-link { color: var(--mobile-lime); }
.mobile-apps-mpesa .mobile-apps-text-link { border-color: rgba(201,243,107,.35); background: rgba(201,243,107,.04); }
.mobile-apps-text-link svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; transition: transform .2s ease; }
.mobile-apps-text-link:hover svg { transform: translate(2px,-2px); }

.mobile-apps-after { padding: 112px 0; background: var(--mobile-paper); }
.mobile-apps-after__grid { display: grid; grid-template-columns: .78fr 1.22fr; align-items: center; gap: clamp(60px, 9vw, 128px); }
.mobile-apps-after__intro > p:not(.mobile-apps-eyebrow) { margin: 19px 0 0; color: var(--mobile-muted); font-size: 14px; line-height: 1.8; }
.mobile-apps-after__flow { position: relative; padding: 10px 0 10px 28px; }
.mobile-apps-after__flow > div { position: relative; display: flex; align-items: center; gap: 15px; min-height: 67px; }
.mobile-apps-after__node { z-index: 1; display: grid; width: 37px; height: 37px; flex: 0 0 37px; place-items: center; border: 1px solid #d9d5ed; border-radius: 50%; background: var(--mobile-paper); color: var(--mobile-violet); font-size: 9px; font-weight: 800; }
.mobile-apps-after__flow > i { display: block; width: 1px; height: 19px; margin-left: 18px; background: #c8c2e3; }
.mobile-apps-after__flow > div b,
.mobile-apps-after__flow > div small { display: block; }
.mobile-apps-after__flow > div b { color: var(--mobile-ink); font-size: 13px; }
.mobile-apps-after__flow > div small { margin-top: 4px; color: var(--mobile-muted); font-size: 11px; }
.mobile-apps-after__flow > p { max-width: 380px; margin: 17px 0 0 52px; color: #77748b; font-size: 10px; line-height: 1.65; }

.mobile-apps-process { padding: 100px 0 110px; background: #efedf8; }
.mobile-apps-process .mobile-apps-section-heading { max-width: 720px; }
.mobile-apps-process__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 55px 0 0; padding: 0; border-top: 1px solid #d5d1e4; list-style: none; }
.mobile-apps-process__steps li { position: relative; display: grid; grid-template-columns: 39px 1fr; align-content: start; gap: 7px 9px; min-height: 119px; border-bottom: 1px solid #d5d1e4; padding: 21px 14px 18px 0; }
.mobile-apps-process__steps li:nth-child(4n+1)::before { position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--mobile-violet); content: ""; }
.mobile-apps-process__steps li > span { grid-row: 1/3; color: var(--mobile-violet); font-size: 10px; font-weight: 800; }
.mobile-apps-process__steps li b { color: var(--mobile-ink); font-size: 12px; }
.mobile-apps-process__steps li small { color: var(--mobile-muted); font-size: 10px; line-height: 1.5; }

.mobile-apps-scope { position: relative; overflow: hidden; padding: 77px 0; color: #fff; background: linear-gradient(108deg, #5140d3, #31265d 68%, #24203d); }
.mobile-apps-scope::after { position: absolute; top: -160px; right: 16%; width: 380px; height: 380px; border: 1px solid rgba(255, 255, 255, .11); border-radius: 50%; content: ""; }
.mobile-apps-scope__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 45px; }
.mobile-apps-scope__inner > div:first-child { max-width: 660px; }
.mobile-apps-scope h2 { margin: 0; color: #fff; font-size: clamp(32px, 4vw, 45px); font-weight: 740; letter-spacing: -.045em; line-height: 1.08; }
.mobile-apps-scope__inner > div:first-child > p:last-child { max-width: 620px; margin: 16px 0 0; color: #d2cfee; font-size: 13px; line-height: 1.75; }
.mobile-apps-scope__actions { display: flex; flex: 0 0 auto; flex-direction: column; align-items: stretch; gap: 10px; }
.mobile-apps-scope__actions button,
.mobile-apps-scope__actions a { min-width: 190px; }

.mobile-apps-faq { padding: 108px 0 114px; background: var(--mobile-paper); }
.mobile-apps-faq__grid { display: grid; grid-template-columns: .74fr 1.26fr; gap: clamp(55px, 9vw, 130px); }
.mobile-apps-faq__heading { align-self: start; }
.mobile-apps-faq__heading > p:last-child { max-width: 330px; margin: 18px 0 0; color: var(--mobile-muted); font-size: 13px; line-height: 1.8; }
.mobile-apps-faq__list { border-top: 1px solid #dedce5; }
.mobile-apps-faq__list details { border-bottom: 1px solid #dedce5; }
.mobile-apps-faq__list summary { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 19px 0; color: var(--mobile-ink); cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.5; list-style: none; }
.mobile-apps-faq__list summary::-webkit-details-marker { display: none; }
.mobile-apps-faq__list summary > svg { display: block; width: 24px; height: 24px; flex: 0 0 24px; border-radius: 50%; background: #ece9fa; padding: 5px; color: var(--mobile-violet); fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.6; transition: transform .2s ease; }
.mobile-apps-faq__list details[open] summary > svg { transform: rotate(45deg); }
.mobile-apps-faq__list summary:focus-visible { outline: 2px solid var(--mobile-violet); outline-offset: 4px; }
.mobile-apps-faq__list details > p { max-width: 680px; margin: -4px 34px 20px 0; color: var(--mobile-muted); font-size: 12px; line-height: 1.8; }

.mobile-apps-closing { position: relative; isolation: isolate; overflow: hidden; padding: 94px 0 99px; color: #fff; background: #171626; text-align: center; }
.mobile-apps-closing__shape { position: absolute; z-index: -1; border: 1px solid rgba(255, 255, 255, .1); border-radius: 50%; }
.mobile-apps-closing__shape--one { top: -480px; left: calc(50% - 430px); width: 860px; height: 860px; }
.mobile-apps-closing__shape--two { top: -405px; left: calc(50% - 355px); width: 710px; height: 710px; border-color: rgba(201, 243, 107, .14); }
.mobile-apps-closing__inner { max-width: 820px; }
.mobile-apps-closing .mobile-apps-eyebrow { justify-content: center; }
.mobile-apps-closing h2 { max-width: 760px; margin: 0 auto; color: #fff; font-size: clamp(38px, 5vw, 58px); font-weight: 750; letter-spacing: -.05em; line-height: 1.02; }
.mobile-apps-closing__inner > p:not(.mobile-apps-eyebrow) { max-width: 550px; margin: 20px auto 0; color: #bcb9cd; font-size: 14px; line-height: 1.75; }
.mobile-apps-actions--center { justify-content: center; }

.mobile-apps-payments-page [id] { scroll-margin-top: 112px; }
.mobile-apps-payments-page :where(a, button, summary):focus-visible { outline: 2px solid var(--mobile-violet); outline-offset: 4px; }

[data-theme='dark'] .mobile-apps-payments-page {
  --mobile-ink: #f4f2fc;
  --mobile-muted: #b8b4c9;
  --mobile-paper: #1e1c2d;
  --mobile-white: #262438;
  background: var(--mobile-paper);
}

[data-theme='dark'] .mobile-apps-journey,
[data-theme='dark'] .mobile-apps-mpesa,
[data-theme='dark'] .mobile-apps-closing { background-color: #151421; }
[data-theme='dark'] .mobile-apps-payments { background: #28263b; }
[data-theme='dark'] .mobile-apps-pos { background: #1e1c2d; }
[data-theme='dark'] .mobile-apps-payment-service__details article { border-color: #454258; background: #252338; }
[data-theme='dark'] .mobile-apps-pos__grid { border-color: #454258; }
[data-theme='dark'] .mobile-apps-pos__grid article + article { border-color: #454258; }
[data-theme='dark'] .mobile-apps-pos__number { background: #37324d; color: #d0c8ff; }
[data-theme='dark'] .mobile-apps-experience__visual { background: #302b4b; }
[data-theme='dark'] .mobile-apps-experience__label { border-color: rgba(255, 255, 255, .12); background: rgba(35, 33, 52, .9); }
[data-theme='dark'] .mobile-apps-experience__label strong,
[data-theme='dark'] .mobile-apps-checklist li strong,
[data-theme='dark'] .mobile-apps-payment-lane p b,
[data-theme='dark'] .mobile-apps-after__flow > div b,
[data-theme='dark'] .mobile-apps-process__steps li b,
[data-theme='dark'] .mobile-apps-faq__list summary { color: #f4f2fc; }
[data-theme='dark'] .mobile-apps-payment-lane,
[data-theme='dark'] .mobile-apps-payment-lanes,
[data-theme='dark'] .mobile-apps-process__steps,
[data-theme='dark'] .mobile-apps-process__steps li,
[data-theme='dark'] .mobile-apps-faq__list,
[data-theme='dark'] .mobile-apps-faq__list details { border-color: #454258; }
[data-theme='dark'] .mobile-apps-flow::before { opacity: .75; }
[data-theme='dark'] .mobile-apps-after__node { border-color: #514b70; background: var(--mobile-paper); }
[data-theme='dark'] .mobile-apps-faq__list summary > svg { background: #393451; }
[data-theme='dark'] .mobile-apps-process { background: #28263b; }

@media (max-width: 980px) {
  .mobile-apps-hero__inner { grid-template-columns: minmax(0, .92fr) minmax(330px, 1.08fr); gap: 12px; }
  .mobile-apps-hero h1 { font-size: clamp(45px, 6vw, 61px); }
  .mobile-apps-phone { width: 168px; height: 330px; }
  .mobile-apps-phone--front { width: 180px; height: 348px; }
  .mobile-apps-phone--front .mobile-apps-phone__screen { padding-right: 12px; padding-left: 12px; }
  .mobile-apps-experience__grid,
  .mobile-apps-mpesa__grid { gap: 45px; }
  .mobile-apps-after__grid,
  .mobile-apps-faq__grid { gap: 55px; }
}

@media (max-width: 840px) {
  .mobile-apps-hero__inner { grid-template-columns: 1fr 1fr; min-height: 650px; padding-top: 48px; }
  .mobile-apps-hero { min-height: 650px; }
  .mobile-apps-hero__visual { min-height: 440px; }
  .mobile-apps-hero__photo { width: 83%; height: 340px; }
  .mobile-apps-phone { width: 145px; height: 294px; border-width: 5px; }
  .mobile-apps-phone--front { top: 135px; width: 158px; height: 310px; }
  .mobile-apps-phone__screen { padding: 30px 10px 12px; }
  .mobile-apps-phone__screen > b { margin-top: 12px; font-size: 14px; }
  .mobile-apps-phone__amount strong { font-size: 20px; }
  .mobile-apps-phone__method { padding: 7px 5px; }
  .mobile-apps-phone__pay { padding: 8px 5px; font-size: 8px; }
  .mobile-apps-flow { grid-template-columns: 1fr; gap: 0; margin-top: 44px; }
  .mobile-apps-flow::before { top: 22px; bottom: 22px; left: 33px; width: 1px; height: auto; background: linear-gradient(#8a72f2, #c9f36b); }
  .mobile-apps-flow li { display: grid; grid-template-columns: 68px 1fr; grid-template-rows: auto auto; justify-items: start; gap: 3px 16px; padding: 11px 0; text-align: left; }
  .mobile-apps-flow__number { position: static; grid-column: 2; grid-row: 1; align-self: end; }
  .mobile-apps-flow__icon { grid-column: 1; grid-row: 1/3; }
  .mobile-apps-flow li strong { grid-column: 2; grid-row: 2; margin: 0; }
  .mobile-apps-flow li small { grid-column: 2; grid-row: 3; max-width: none; margin: 0; }
  .mobile-apps-flow-note { justify-content: flex-start; text-align: left; }
  .mobile-apps-experience__grid,
  .mobile-apps-mpesa__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .mobile-apps-experience__visual { min-height: 390px; }
  .mobile-apps-experience__visual img { height: 320px; }
  .mobile-apps-experience__copy h2,
  .mobile-apps-mpesa__copy h2,
  .mobile-apps-after__intro h2,
  .mobile-apps-faq__heading h2 { font-size: 38px; }
  .mobile-apps-payment-lane { grid-template-columns: 130px minmax(0, 1fr); gap: 15px; }
  .mobile-apps-payment-lane p { gap: 7px; }
  .mobile-apps-payment-lane p b { font-size: 10px; }
  .mobile-apps-payment-lane p i { font-size: 14px; }
  .mobile-apps-payment-service__details { gap: 13px; }
  .mobile-apps-payment-service__details article { padding: 18px; }
  .mobile-apps-pos__grid { grid-template-columns: 1fr; }
  .mobile-apps-pos__grid article { padding: 19px 0; }
  .mobile-apps-pos__grid article + article { border-top: 1px solid #e5e2eb; border-left: 0; padding-left: 0; }
  .mobile-apps-mpesa__visual { min-height: 360px; }
  .mobile-apps-after__grid { grid-template-columns: .85fr 1.15fr; }
  .mobile-apps-faq__grid { grid-template-columns: .78fr 1.22fr; }
  .mobile-apps-scope__inner { gap: 26px; }
  .mobile-apps-scope__actions button,
  .mobile-apps-scope__actions a { min-width: 166px; padding: 0 15px; font-size: 12px; }
}

@media (max-width: 680px) {
  .mobile-apps-container { padding-right: 23px; padding-left: 23px; }
  .mobile-apps-hero { min-height: 0; }
  .mobile-apps-hero__inner { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 56px 23px 62px; }
  .mobile-apps-hero__copy { max-width: 550px; }
  .mobile-apps-hero h1 { max-width: 520px; font-size: clamp(44px, 11vw, 61px); }
  .mobile-apps-hero__lead { margin-top: 18px; font-size: 15px; }
  .mobile-apps-actions { align-items: stretch; gap: 9px; margin-top: 24px; }
  .mobile-apps-actions button,
  .mobile-apps-actions a { min-height: 48px; padding: 0 15px; font-size: 12px; }
  .mobile-apps-hero__note { max-width: 330px; font-size: 10px; line-height: 1.6; }
  .mobile-apps-hero__visual { width: min(100%, 430px); min-height: 348px; margin: 0 auto; }
  .mobile-apps-hero__photo { top: 15px; right: 3px; width: 78%; height: 280px; border-radius: 22px; }
  .mobile-apps-hero__photo > span { right: 12px; bottom: 13px; left: 12px; font-size: 10px; }
  .mobile-apps-phone { top: 54px; left: 0; width: 127px; height: 248px; }
  .mobile-apps-phone--front { top: 111px; right: 6px; left: auto; width: 139px; height: 269px; }
  .mobile-apps-phone__speaker { top: 5px; width: 42px; height: 10px; }
  .mobile-apps-phone__screen { border-radius: 19px; padding: 25px 8px 10px; }
  .mobile-apps-phone__tiny { font-size: 7px; }
  .mobile-apps-phone__screen > b { margin-top: 10px; font-size: 12px; }
  .mobile-apps-phone--back .mobile-apps-phone__screen > i { height: 47px; margin-top: 9px; }
  .mobile-apps-phone--back .mobile-apps-phone__screen > i:nth-of-type(2),
  .mobile-apps-phone--back .mobile-apps-phone__screen > i:nth-of-type(3) { height: 36px; }
  .mobile-apps-phone__amount { margin-top: 13px; padding-bottom: 9px; font-size: 8px; }
  .mobile-apps-phone__amount strong { font-size: 17px; }
  .mobile-apps-phone__method { gap: 5px; margin-top: 10px; font-size: 7px; }
  .mobile-apps-phone__method > span { width: 17px; height: 17px; }
  .mobile-apps-phone__pay { font-size: 7px; }
  .mobile-apps-hero__caption { right: 3px; bottom: 0; font-size: 8px; }
  .mobile-apps-hero__scroll { right: 23px; bottom: 16px; font-size: 10px; }
  .mobile-apps-journey { padding: 76px 0 70px; }
  .mobile-apps-section-heading h2,
  .mobile-apps-experience__copy h2,
  .mobile-apps-mpesa__copy h2,
  .mobile-apps-after__intro h2,
  .mobile-apps-faq__heading h2 { font-size: 35px; }
  .mobile-apps-section-heading > p:last-child { font-size: 13px; }
  .mobile-apps-flow { margin-top: 38px; }
  .mobile-apps-flow__icon { width: 56px; height: 56px; }
  .mobile-apps-flow::before { left: 27px; }
  .mobile-apps-flow li { grid-template-columns: 56px 1fr; column-gap: 14px; }
  .mobile-apps-flow li strong { font-size: 12px; }
  .mobile-apps-experience,
  .mobile-apps-after,
  .mobile-apps-faq { padding: 76px 0; }
  .mobile-apps-experience__grid,
  .mobile-apps-mpesa__grid,
  .mobile-apps-after__grid,
  .mobile-apps-faq__grid { grid-template-columns: 1fr; gap: 35px; }
  .mobile-apps-experience__visual { min-height: 345px; }
  .mobile-apps-experience__visual img { height: 285px; }
  .mobile-apps-experience__copy > p:not(.mobile-apps-eyebrow):not(.mobile-apps-honesty) { font-size: 13px; }
  .mobile-apps-payments { padding: 76px 0; }
  .mobile-apps-pos { padding: 76px 0; }
  .mobile-apps-payment-lanes { margin-top: 32px; }
  .mobile-apps-payment-service__details { grid-template-columns: 1fr; margin-top: 29px; }
  .mobile-apps-payment-lane { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  .mobile-apps-payment-lane p { gap: 7px; }
  .mobile-apps-payment-lane p b { font-size: 10px; }
  .mobile-apps-provider-line { grid-template-columns: 1fr; gap: 14px; margin-top: 25px; }
  .mobile-apps-provider-line__logos { gap: 17px; }
  .mobile-apps-provider-line > p { grid-column: auto; line-height: 1.6; }
  .mobile-apps-mpesa { padding: 76px 0; }
  .mobile-apps-mpesa__grid { gap: 31px; }
  .mobile-apps-mpesa__visual { min-height: 305px; }
  .mobile-apps-mpesa__visual img { max-height: 288px; }
  .mobile-apps-mpesa__stamp { top: 12px; left: 12px; font-size: 7px; }
  .mobile-apps-mpesa__copy > p:not(.mobile-apps-eyebrow) { font-size: 13px; }
  .mobile-apps-after__grid { gap: 30px; }
  .mobile-apps-after__flow { padding-left: 2px; }
  .mobile-apps-after__flow > p { margin-left: 52px; }
  .mobile-apps-process { padding: 76px 0; }
  .mobile-apps-process__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 35px; }
  .mobile-apps-process__steps li { min-height: 105px; padding-right: 8px; }
  .mobile-apps-process__steps li:nth-child(4n+1)::before { display: none; }
  .mobile-apps-process__steps li:nth-child(2n+1)::before { position: absolute; top: -4px; left: 0; display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--mobile-violet); content: ""; }
  .mobile-apps-process__steps li b { font-size: 11px; }
  .mobile-apps-process__steps li small { font-size: 9px; }
  .mobile-apps-scope { padding: 67px 0; }
  .mobile-apps-scope__inner { align-items: flex-start; flex-direction: column; gap: 24px; }
  .mobile-apps-scope h2 { font-size: 36px; }
  .mobile-apps-scope__inner > div:first-child > p:last-child { font-size: 12px; }
  .mobile-apps-scope__actions { width: 100%; flex-direction: row; }
  .mobile-apps-scope__actions button,
  .mobile-apps-scope__actions a { min-width: 0; flex: 1; padding: 0 12px; }
  .mobile-apps-faq__grid { gap: 29px; }
  .mobile-apps-faq__heading > p:last-child { font-size: 12px; }
  .mobile-apps-faq__list summary { padding: 16px 0; font-size: 12px; }
  .mobile-apps-faq__list details > p { font-size: 11px; }
  .mobile-apps-closing { padding: 74px 0 78px; }
  .mobile-apps-closing h2 { font-size: 42px; }
  .mobile-apps-closing__inner > p:not(.mobile-apps-eyebrow) { font-size: 12px; }
  .mobile-apps-actions--center { align-items: center; }
}

@media (max-width: 390px) {
  .mobile-apps-hero__inner,
  .mobile-apps-container { padding-right: 19px; padding-left: 19px; }
  .mobile-apps-hero h1 { font-size: 43px; }
  .mobile-apps-actions button,
  .mobile-apps-actions a { gap: 7px; padding: 0 11px; font-size: 11px; }
  .mobile-apps-flow li { column-gap: 10px; }
  .mobile-apps-flow-note { font-size: 10px; }
  .mobile-apps-provider-line__logos { gap: 13px; }
  .mobile-apps-provider-line__logos img { max-width: 57px; }
  .mobile-apps-scope__actions { flex-direction: column; }
  .mobile-apps-scope__actions button,
  .mobile-apps-scope__actions a { width: 100%; }
  .mobile-apps-closing h2 { font-size: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-apps-payments-page *,
  .mobile-apps-payments-page *::before,
  .mobile-apps-payments-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.mobile-apps-platform-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 38px; }
.mobile-apps-platform-grid article { display: flex; min-height: 250px; flex-direction: column; align-items: flex-start; border: 1px solid #e1dee9; border-radius: 18px; background: var(--mobile-white); padding: 28px; }
.mobile-apps-platform-grid article > span { color: var(--mobile-violet); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.mobile-apps-platform-grid h3 { margin: 18px 0 0; color: var(--mobile-ink); font-size: 23px; line-height: 1.2; letter-spacing: -.035em; }
.mobile-apps-platform-grid article > p { max-width: 480px; margin: 12px 0 22px; color: var(--mobile-muted); font-size: 13px; line-height: 1.75; }
.mobile-apps-platform-grid a { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--mobile-violet); font-size: 12px; font-weight: 750; text-decoration: none; }
.mobile-apps-platform-grid a svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.mobile-apps-platform-grid a:focus-visible { outline: 2px solid var(--mobile-violet); outline-offset: 4px; }
[data-theme='dark'] .mobile-apps-platform-grid article { border-color: #454258; background: #262438; }

@media (max-width: 680px) {
  .mobile-apps-platform-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 28px; }
  .mobile-apps-platform-grid article { min-height: 0; padding: 22px; }
  .mobile-apps-platform-grid h3 { margin-top: 13px; font-size: 21px; }
}