:root {
  --ink: #111827;
  --ink-2: #253044;
  --muted: #6b7280;
  --paper: #f6f1e8;
  --surface: #fffdf8;
  --surface-2: #f0eadf;
  --line: rgba(17, 24, 39, .12);
  --lime: #b7f34a;
  --lime-deep: #8ebd25;
  --amber: #ffc94a;
  --coral: #ff806f;
  --cyan: #67d8e8;
  --success: #2c8d61;
  --warning: #b16a12;
  --danger: #c45050;
  --shadow: 0 22px 60px rgba(24, 31, 45, .10);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --max: 1240px;
  color: var(--ink);
  background: var(--paper);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); }
button, input, select { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--lime-deep); outline-offset: 3px; }

.app-shell { min-height: 100vh; overflow: hidden; }
.topbar { height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: var(--max); padding: 0 28px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.04em; }
.brand-mark { width: 38px; height: 38px; border-radius: 13px; background: var(--ink); display: grid; place-items: center; position: relative; overflow: hidden; box-shadow: 0 9px 18px rgba(17,24,39,.14); }
.brand-mark::before, .brand-mark::after { content: ''; position: absolute; bottom: 9px; width: 5px; border-radius: 5px 5px 1px 1px; background: var(--lime); }
.brand-mark::before { height: 11px; left: 10px; box-shadow: 8px -6px 0 var(--lime), 16px -13px 0 var(--lime); }
.brand-mark::after { height: 2px; width: 23px; left: 8px; bottom: 6px; background: var(--paper); opacity: .9; }
.brand-name { font-size: 17px; line-height: 1; }
.brand-name span { color: var(--lime-deep); }
.main-nav { display: flex; align-items: center; gap: 7px; }
.nav-link { border: 0; background: transparent; color: var(--muted); font-weight: 600; padding: 10px 13px; border-radius: 999px; transition: .18s ease; }
.nav-link:hover, .nav-link.active { color: var(--ink); background: rgba(255,255,255,.65); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.avatar-button { border: 0; background: var(--ink); color: var(--paper); width: 39px; height: 39px; border-radius: 50%; font-weight: 700; }
.mobile-menu { display: none; border: 0; background: transparent; color: var(--ink); font-size: 24px; }

.page { max-width: var(--max); padding: 26px 28px 72px; margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .91fr) minmax(0, 1.09fr); gap: 22px; min-height: 500px; }
.hero-copy { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(30px, 4vw, 60px); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; box-shadow: var(--shadow); }
.hero-copy::before { content: ''; position: absolute; width: 300px; height: 300px; border: 1px solid rgba(183,243,74,.38); border-radius: 50%; right: -100px; bottom: -98px; box-shadow: 0 0 0 34px rgba(183,243,74,.05), 0 0 0 68px rgba(183,243,74,.04); }
.hero-copy::after { content: ''; position: absolute; height: 1px; width: 64%; right: 15%; top: 44%; background: linear-gradient(90deg, transparent, rgba(183,243,74,.72), transparent); transform: rotate(-18deg); opacity: .65; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .13em; font-size: 11px; font-weight: 700; color: var(--lime); position: relative; z-index: 1; }
.eyebrow-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(183,243,74,.13); }
.hero-copy h1 { font-family: 'Space Grotesk', sans-serif; font-size: clamp(43px, 5vw, 72px); line-height: .98; letter-spacing: -.075em; margin: 32px 0 21px; max-width: 550px; position: relative; z-index: 1; }
.hero-copy h1 em { color: var(--lime); font-style: normal; }
.hero-copy p { max-width: 440px; line-height: 1.65; color: rgba(246,241,232,.74); margin: 0; position: relative; z-index: 1; }
.hero-foot { display: flex; align-items: end; justify-content: space-between; gap: 15px; position: relative; z-index: 1; margin-top: 35px; }
.trust-note { color: rgba(246,241,232,.68); font-size: 13px; max-width: 210px; line-height: 1.45; }
.hero-stat { display: grid; gap: 2px; text-align: right; }
.hero-stat strong { font-family: 'Space Grotesk'; font-size: 32px; color: var(--lime); letter-spacing: -.06em; }
.hero-stat span { color: rgba(246,241,232,.58); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }

.hero-market { border-radius: var(--radius-lg); background: var(--surface); padding: 29px; box-shadow: var(--shadow); border: 1px solid rgba(255,255,255,.75); display: flex; flex-direction: column; }
.market-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 23px; }
.market-head h2, .section-head h2 { font-family: 'Space Grotesk'; font-size: 25px; letter-spacing: -.05em; margin: 0; }
.market-head p, .section-head p { color: var(--muted); margin: 7px 0 0; font-size: 14px; line-height: 1.5; }
.mode-pill { white-space: nowrap; color: var(--success); background: #e9f7eb; border: 1px solid #c8e7cd; border-radius: 999px; padding: 8px 11px; font-size: 11px; font-weight: 700; }
.mode-pill::before { content: '●'; margin-right: 6px; font-size: 9px; }
.network-tabs { display: flex; gap: 9px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.network-tab { flex: 1; border: 1px solid var(--line); background: var(--surface); border-radius: 13px; padding: 11px 10px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-weight: 700; transition: .18s ease; }
.network-tab:hover { transform: translateY(-2px); color: var(--ink); }
.network-tab.active { color: var(--ink); border-color: var(--ink); box-shadow: 0 6px 0 var(--ink); transform: translateY(-2px); }
.network-swatch { width: 9px; height: 9px; border-radius: 50%; }
.swatch-mtn { background: var(--amber); } .swatch-airteltigo { background: var(--coral); } .swatch-telecel { background: var(--cyan); }
.offer-list { display: grid; gap: 10px; margin-top: 20px; }
.offer-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 15px; border: 1px solid var(--line); background: #fffefa; border-radius: 14px; padding: 14px 15px; transition: .18s ease; }
.offer-row:hover { border-color: rgba(17,24,39,.3); transform: translateX(3px); }
.offer-main { display: grid; gap: 3px; }
.offer-main strong { font-family: 'Space Grotesk'; font-size: 16px; letter-spacing: -.03em; }
.offer-main span { font-size: 12px; color: var(--muted); }
.offer-price { font-family: 'Space Grotesk'; font-size: 20px; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; }
.offer-price small { font: 500 11px 'DM Sans'; color: var(--muted); letter-spacing: 0; }
.mini-btn, .primary-btn, .secondary-btn, .text-btn { border: 0; transition: .18s ease; font-weight: 700; }
.mini-btn { background: var(--ink); color: var(--paper); padding: 10px 12px; border-radius: 10px; font-size: 12px; }
.mini-btn:hover { background: #2b374c; transform: translateY(-1px); }

.section { margin-top: 58px; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.text-btn { background: transparent; color: var(--ink); padding: 7px 0; border-bottom: 1px solid var(--ink); }
.text-btn:hover { color: var(--lime-deep); border-color: var(--lime-deep); }
.value-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.value-card { min-height: 142px; background: var(--surface); border: 1px solid rgba(255,255,255,.8); border-radius: 18px; padding: 21px; display: flex; flex-direction: column; justify-content: space-between; }
.value-card.accent { background: var(--lime); }
.value-icon { font-size: 20px; line-height: 1; }
.value-card strong { font-family: 'Space Grotesk'; font-size: 18px; letter-spacing: -.04em; }
.value-card span { font-size: 12px; line-height: 1.4; color: var(--muted); max-width: 240px; }
.value-card.accent span { color: rgba(17,24,39,.68); }

.network-section { display: grid; grid-template-columns: 1fr 1.35fr; gap: 19px; align-items: stretch; }
.network-intro { background: var(--surface); border-radius: 22px; padding: 27px; border: 1px solid rgba(255,255,255,.75); display: flex; flex-direction: column; justify-content: space-between; min-height: 235px; }
.network-intro p { font-size: 14px; color: var(--muted); line-height: 1.6; max-width: 360px; }
.network-intro .network-name { display: flex; align-items: center; gap: 10px; font: 700 20px 'Space Grotesk'; }
.network-intro .network-name .network-swatch { width: 12px; height: 12px; }
.network-intro .network-foot { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.network-offers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.bundle-card { background: var(--ink); color: var(--paper); min-height: 235px; border-radius: 22px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.bundle-card::after { content: ''; width: 120px; height: 120px; border: 1px solid rgba(183,243,74,.3); position: absolute; border-radius: 50%; right: -54px; top: -35px; }
.bundle-card > * { position: relative; z-index: 1; }
.bundle-card:nth-child(2) { background: #29364a; }
.bundle-card .bundle-meta { display: flex; justify-content: space-between; color: rgba(246,241,232,.58); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.bundle-size { font: 700 clamp(30px, 4vw, 46px) 'Space Grotesk'; letter-spacing: -.08em; margin-top: 19px; }
.bundle-size span { font-size: 16px; letter-spacing: -.02em; }
.bundle-bottom { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.bundle-price { font: 700 21px 'Space Grotesk'; letter-spacing: -.06em; }
.bundle-price small { font: 500 11px 'DM Sans'; color: rgba(246,241,232,.58); letter-spacing: 0; }
.arrow-btn { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--lime); color: var(--ink); font-weight: 900; }
.arrow-btn:hover { transform: translate(2px, -2px); }

.support-card { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 24px 27px; margin-top: 58px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.support-card h3 { font: 700 20px 'Space Grotesk'; letter-spacing: -.04em; margin: 0 0 5px; }
.support-card p { color: rgba(246,241,232,.62); margin: 0; font-size: 13px; }
.support-links { display: flex; flex-wrap: wrap; gap: 8px; }
.support-link { border: 1px solid rgba(246,241,232,.2); border-radius: 999px; padding: 10px 13px; color: var(--paper); font-size: 12px; font-weight: 700; transition: .18s ease; }
.support-link:hover { background: var(--lime); color: var(--ink); border-color: var(--lime); }

.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 28px 0 28px; }
.page-heading h1 { font: 700 clamp(35px, 5vw, 56px) 'Space Grotesk'; letter-spacing: -.075em; margin: 0; }
.page-heading p { color: var(--muted); line-height: 1.6; max-width: 480px; margin: 8px 0 0; }
.page-heading .eyebrow { color: var(--lime-deep); }
.catalog-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.filter-panel { background: var(--surface); border-radius: 20px; padding: 19px; position: sticky; top: 15px; border: 1px solid rgba(255,255,255,.8); }
.filter-panel h3 { font: 700 15px 'Space Grotesk'; margin: 0 0 14px; }
.filter-option { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px 9px; border: 0; background: transparent; text-align: left; color: var(--muted); border-radius: 10px; font-size: 13px; }
.filter-option:hover, .filter-option.selected { color: var(--ink); background: var(--surface-2); font-weight: 700; }
.catalog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.catalog-card { background: var(--surface); border: 1px solid rgba(255,255,255,.8); border-radius: 20px; padding: 20px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; }
.catalog-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.catalog-network { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); font-weight: 700; }
.catalog-size { font: 700 34px 'Space Grotesk'; letter-spacing: -.07em; margin: 21px 0 2px; }
.catalog-duration { color: var(--muted); font-size: 12px; }
.catalog-card-foot { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.catalog-card-price { font: 700 20px 'Space Grotesk'; letter-spacing: -.05em; }
.catalog-card-price small { font: 500 11px 'DM Sans'; color: var(--muted); letter-spacing: 0; }

.surface-card { background: var(--surface); border-radius: 22px; border: 1px solid rgba(255,255,255,.78); padding: clamp(22px, 3vw, 35px); box-shadow: 0 10px 28px rgba(24,31,45,.04); }
.checkout-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: start; }
.stepper { display: flex; align-items: center; margin-bottom: 30px; }
.step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.step-number { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); }
.step.active { color: var(--ink); } .step.active .step-number { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.step-line { height: 1px; background: var(--line); flex: 1; margin: 0 10px; }
.form-stack { display: grid; gap: 19px; }
.form-group { display: grid; gap: 7px; }
.form-group label { font-size: 12px; font-weight: 700; }
.form-group input, .form-group select { width: 100%; border: 1px solid var(--line); background: #fffefa; border-radius: 11px; padding: 13px 14px; color: var(--ink); }
.form-group input::placeholder { color: #9ca3af; }
.form-help { font-size: 12px; color: var(--muted); line-height: 1.45; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.primary-btn, .secondary-btn { padding: 13px 17px; border-radius: 11px; font-size: 13px; }
.primary-btn { background: var(--ink); color: var(--paper); }
.primary-btn:hover { background: #2b374c; transform: translateY(-1px); }
.primary-btn.lime { background: var(--lime); color: var(--ink); }
.primary-btn.lime:hover { background: #c5ff60; }
.secondary-btn { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.secondary-btn:hover { background: var(--surface-2); }
.receipt { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 23px; position: sticky; top: 15px; }
.receipt .receipt-label { display: flex; justify-content: space-between; color: rgba(246,241,232,.55); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.receipt h2 { font: 700 38px 'Space Grotesk'; letter-spacing: -.08em; margin: 23px 0 2px; }
.receipt p { color: rgba(246,241,232,.65); font-size: 13px; line-height: 1.5; }
.receipt-rule { border-top: 1px dashed rgba(246,241,232,.25); margin: 21px 0; }
.receipt-line { display: flex; justify-content: space-between; gap: 15px; font-size: 13px; margin: 11px 0; }
.receipt-line span:first-child { color: rgba(246,241,232,.58); }
.receipt-line.total { font-weight: 700; font-size: 16px; }
.receipt-line.total span:first-child { color: var(--paper); }

.auth-layout { display: grid; grid-template-columns: .75fr 1.25fr; min-height: 570px; gap: 22px; }
.auth-poster { background: var(--ink); border-radius: var(--radius-lg); padding: 31px; color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-poster h1 { font: 700 48px 'Space Grotesk'; letter-spacing: -.08em; line-height: .98; margin: 50px 0 16px; }
.auth-poster p { color: rgba(246,241,232,.67); line-height: 1.6; font-size: 14px; max-width: 320px; }
.auth-poster-quote { display: none; }
.auth-card { align-self: center; max-width: 500px; width: 100%; padding: 38px; }
.auth-card h2 { font: 700 29px 'Space Grotesk'; letter-spacing: -.06em; margin: 0; }
.auth-card .subcopy { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 8px 0 27px; }
.auth-switch { font-size: 13px; color: var(--muted); margin-top: 22px; }
.auth-switch a { color: var(--ink); text-decoration: underline; font-weight: 700; }

.profile-grid, .agent-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.profile-card { text-align: center; }
.profile-avatar { width: 72px; height: 72px; border-radius: 24px; background: var(--lime); display: grid; place-items: center; font: 700 25px 'Space Grotesk'; margin: 0 auto 15px; }
.profile-card h2 { font: 700 22px 'Space Grotesk'; letter-spacing: -.05em; margin: 0; }
.profile-card > p { color: var(--muted); font-size: 13px; margin: 7px 0 22px; }
.account-meta { border-top: 1px solid var(--line); text-align: left; padding-top: 15px; display: grid; gap: 11px; }
.account-meta div { display: flex; justify-content: space-between; gap: 16px; font-size: 12px; }
.account-meta span:first-child { color: var(--muted); }
.order-list { display: grid; gap: 11px; }
.order-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 15px; }
.order-row strong { font: 700 15px 'Space Grotesk'; }
.order-row p { color: var(--muted); font-size: 12px; margin: 4px 0 0; }
.status { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 10px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.success { background: #e7f6ec; color: var(--success); } .status.pending { background: #fff3dc; color: var(--warning); } .status.neutral { background: #edf0f4; color: var(--muted); } .status.danger { background: #ffebea; color: var(--danger); }

.agent-hero { background: var(--ink); color: var(--paper); border-radius: 22px; padding: 29px; min-height: 270px; display: flex; flex-direction: column; justify-content: space-between; }
.agent-hero h2 { font: 700 31px 'Space Grotesk'; line-height: 1; letter-spacing: -.07em; max-width: 330px; margin: 20px 0 10px; }
.agent-hero p { color: rgba(246,241,232,.65); line-height: 1.55; font-size: 13px; max-width: 360px; margin: 0; }
.agent-fee { color: var(--lime); font: 700 34px 'Space Grotesk'; letter-spacing: -.08em; }
.timeline { display: grid; gap: 0; }
.timeline-item { display: grid; grid-template-columns: 29px 1fr; gap: 13px; min-height: 73px; }
.timeline-node { position: relative; display: flex; justify-content: center; }
.timeline-node::after { content: ''; position: absolute; top: 23px; bottom: -2px; width: 1px; background: var(--line); }
.timeline-item:last-child .timeline-node::after { display: none; }
.timeline-dot { width: 17px; height: 17px; border-radius: 50%; border: 4px solid var(--surface); background: #d6dbe2; box-shadow: 0 0 0 1px var(--line); position: relative; z-index: 1; }
.timeline-item.current .timeline-dot { background: var(--lime); box-shadow: 0 0 0 1px var(--lime-deep); }
.timeline-item.complete .timeline-dot { background: var(--success); box-shadow: 0 0 0 1px var(--success); }
.timeline-copy strong { display: block; font-size: 13px; }
.timeline-copy span { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin-top: 4px; }

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th { text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 0 12px 12px; }
.admin-table td { border-top: 1px solid var(--line); padding: 15px 12px; font-size: 13px; vertical-align: middle; }
.admin-table td:first-child, .admin-table th:first-child { padding-left: 0; }
.admin-table td:last-child, .admin-table th:last-child { padding-right: 0; text-align: right; }
.table-actions { display: flex; justify-content: end; gap: 6px; }
.table-actions button { padding: 7px 9px; font-size: 11px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-weight: 700; }
.table-actions button:hover { background: var(--surface-2); }

.notice { border-radius: 13px; padding: 13px 15px; background: #eef7db; color: #48660d; font-size: 12px; line-height: 1.5; margin-bottom: 18px; }
.notice strong { color: var(--ink); }
.empty-state { text-align: center; padding: 45px 20px; color: var(--muted); }
.empty-state strong { display: block; color: var(--ink); font: 700 20px 'Space Grotesk'; margin-bottom: 8px; }
.footer { max-width: var(--max); padding: 0 28px 28px; margin: 0 auto; color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; gap: 20px; }
.toast { position: fixed; right: 22px; bottom: 22px; max-width: 330px; background: var(--ink); color: var(--paper); border-radius: 13px; padding: 14px 16px; box-shadow: var(--shadow); font-size: 13px; z-index: 10; animation: toast-in .24s ease-out; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

@media (max-width: 940px) {
  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .hero-grid, .checkout-layout, .auth-layout, .profile-grid, .agent-grid { grid-template-columns: 1fr; }
  .hero-copy { min-height: 430px; }
  .auth-poster { min-height: 260px; }
  .auth-poster h1 { margin: 28px 0 10px; font-size: 39px; }
  .auth-card { max-width: none; }
  .receipt { position: static; }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; display: flex; gap: 8px; overflow-x: auto; padding: 10px; }
  .filter-panel h3 { display: none; }
  .filter-option { width: auto; white-space: nowrap; }
}
@media (max-width: 620px) {
  .topbar { height: 67px; padding: 0 16px; }
  .page { padding: 18px 16px 55px; }
  .footer { padding: 0 16px 22px; flex-direction: column; }
  .hero-copy, .hero-market { padding: 22px; border-radius: 21px; }
  .hero-copy { min-height: 460px; }
  .hero-copy h1 { font-size: 47px; }
  .hero-foot { align-items: start; flex-direction: column; }
  .hero-stat { text-align: left; }
  .market-head { flex-direction: column; }
  .mode-pill { align-self: start; }
  .network-tabs { overflow-x: auto; }
  .network-tab { min-width: 116px; }
  .offer-row { grid-template-columns: 1fr auto; }
  .offer-row .mini-btn { grid-column: 1 / -1; width: 100%; }
  .value-strip, .network-section, .catalog-grid, .network-offers { grid-template-columns: 1fr; }
  .section-head, .page-heading, .support-card { align-items: start; flex-direction: column; }
  .support-card { padding: 22px; }
  .support-links { width: 100%; }
  .support-link { flex: 1; text-align: center; min-width: 98px; }
  .page-heading { margin: 21px 0; }
  .stepper { overflow-x: auto; padding-bottom: 4px; }
  .step { min-width: max-content; }
  .step-line { min-width: 25px; }
  .surface-card { padding: 21px; border-radius: 19px; }
  .order-row { grid-template-columns: 1fr auto; }
  .order-row .status { grid-column: 1 / -1; justify-self: start; }
  .admin-table { min-width: 670px; }
  .surface-card.table-wrap { overflow-x: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Reference-inspired Billy Data visual layer */
:root{--bg1:#171046;--bg2:#0a0720;--glow1:#5b3df066;--glow2:#ff5fa233;--text:#f6f3ff;--muted:#a9a3cf;--card:rgba(255,255,255,.06);--card2:rgba(255,255,255,.11);--line:rgba(255,255,255,.14);--input:#0d0a2b;--panel:#120c36;--panel2:#1a1250;--bar:rgba(20,14,60,.82);--grad:linear-gradient(135deg,#7c5cff,#ff5fa2);--gt:linear-gradient(135deg,#9d86ff,#ff7fb6);--hl:#ffc857;--ring:#7c5cff;--glow-btn:#7c5cff55;--sh:rgba(0,0,0,.5);--max:1100px;color:var(--text);background:var(--bg2);font-family:Inter,"Segoe UI",Arial,sans-serif}
html{scroll-behavior:auto}body{min-height:100vh;color:var(--text);background:radial-gradient(900px 500px at 85% -10%,var(--glow1),transparent 60%),radial-gradient(700px 500px at -10% 20%,var(--glow2),transparent 60%),linear-gradient(180deg,var(--bg1),var(--bg2) 60%);background-attachment:fixed;padding-bottom:120px}a{color:inherit}.topbar{width:92%;max-width:var(--max);height:70px;padding:0;margin:auto}.brand{font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:22px;letter-spacing:-1px}.brand-name span,.page-title em,.page-heading h1 em{background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}.pill,.mode-pill{color:var(--muted);background:var(--card);border-color:var(--line);font-size:12px}.page{width:92%;max-width:var(--max);padding:14px 0 40px}.page-title{font-size:clamp(34px,6.5vw,60px);letter-spacing:-2.5px}.lead,.page-heading p{color:var(--muted)}.eyebrow{color:var(--hl)}.eyebrow-dot{background:var(--hl);box-shadow:0 0 0 5px rgba(255,200,87,.12)}
.network-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 28px}.network-tab{min-height:184px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:14px;padding:26px 20px 20px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:30px}.network-tab:hover,.network-tab.active{transform:translateY(-6px);background:var(--card2);box-shadow:0 24px 50px var(--sh)}.network-tab.active{border-color:var(--hl);box-shadow:0 0 0 1px var(--hl),0 24px 50px var(--sh)}.network-tab>span:last-child{color:var(--muted);font-size:13px}.network-logo{width:82%;min-height:86px;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 12px 22px var(--sh))}.logo-mtn{border-radius:50%;background:#ffcc00;color:#004f9f;font:900 clamp(32px,5vw,56px)/1 Arial Black,Arial,sans-serif}.logo-airteltigo{border-radius:22px;background:#fff;flex-direction:column;color:#e4002b;font:800 clamp(20px,3vw,31px)/.95 Arial,sans-serif}.logo-airteltigo b:last-child{color:#0057b8}.logo-telecel{border-radius:22px;background:#e60000;color:#fff;font:800 clamp(25px,4vw,42px)/1 Arial,sans-serif}.actions{gap:14px}.action{color:var(--text);background:var(--card);border-color:var(--line);border-radius:20px}.action:hover{background:var(--card2);transform:translateY(-3px)}.action span{color:var(--muted)}.featured-strip{margin-top:28px;padding:24px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(255,95,162,.08))}.featured-strip h2{margin:11px 0 6px;font-size:24px}.featured-strip p{color:var(--muted);margin:0;font-size:13px}.featured-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.quick-card{position:relative;overflow:hidden;display:grid;gap:8px;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--card)}.quick-card small,.catalog-network{color:var(--hl);font-size:10px;letter-spacing:1.4px;font-weight:800;text-transform:uppercase}.quick-card strong{font-size:28px}.quick-card>span{color:var(--muted)}
.buy,.mini-btn,.primary-btn,.btn{background:var(--grad);color:#fff;border:0;border-radius:12px;box-shadow:0 10px 24px var(--glow-btn)}.buy:hover,.mini-btn:hover,.primary-btn:hover,.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.surface-card,.catalog-card,.filter-panel,.card-form,.order,.empty,.value-card,.network-intro{background:var(--card);border-color:var(--line);box-shadow:none}.catalog-card{position:relative;overflow:hidden;border-radius:22px}.filter-option:hover,.filter-option.selected{color:var(--text);background:var(--card2)}.catalog-duration,.offer-main span,.form-help,.support-card p,.section-head p{color:var(--muted)}.catalog-card-foot{border-color:var(--line)}.form-group input,.form-group select,.card-form input{background:var(--input);color:var(--text);border-color:var(--line)}.secondary-btn{background:transparent;color:#d9d0ff;border-color:#7c5cff88}.receipt,.auth-poster,.agent-hero,.bundle-card{background:linear-gradient(145deg,#20145d,#0e092a);color:var(--text)}.notice{background:#7c5cff1c;border:1px solid #7c5cff55;color:#d9d0ff}.support-card{background:var(--card);border:1px solid var(--line)}.support-link{border-color:var(--line);color:var(--text)}.support-link:hover{background:var(--grad);border-color:transparent}.status{background:var(--card2);color:var(--muted)}.status.success{color:#58dc93}.status.pending{color:var(--hl)}.status.danger{color:#ff7f9d}.footer{width:92%;max-width:var(--max);padding:0 0 28px;color:var(--muted)}
.taskbar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:50;width:min(520px,94%);display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:7px;background:var(--bar);backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:26px;box-shadow:0 20px 60px var(--sh)}.task-tab{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px;color:var(--muted);font-size:11px;font-weight:700;border-radius:20px;transition:.18s}.task-tab:hover{color:var(--text)}.task-tab.active{background:var(--grad);color:#fff;box-shadow:0 8px 22px var(--glow-btn)}.task-icon{font-size:22px;line-height:1}
@media(max-width:900px){.checkout-layout,.auth-layout,.profile-grid,.agent-grid,.network-section{grid-template-columns:1fr}.receipt{position:static}.auth-card{max-width:none}.catalog-layout{grid-template-columns:1fr}.filter-panel{position:static;display:flex;gap:8px;overflow-x:auto}.filter-panel h3{display:none}.filter-option{width:auto;white-space:nowrap}}
@media(max-width:700px){.network-tabs{grid-template-columns:1fr;gap:12px}.network-tab{min-height:150px}.featured-picks,.value-strip,.catalog-grid,.network-offers{grid-template-columns:1fr 1fr}.section-head,.page-heading,.support-card{align-items:start;flex-direction:column}.support-links{width:100%}.support-link{flex:1;text-align:center}.order-row{grid-template-columns:1fr auto}.order-row .status{grid-column:1/-1;justify-self:start}}
@media(max-width:480px){.topbar,.page,.footer{width:calc(100% - 32px)}.featured-picks,.value-strip,.catalog-grid,.network-offers{grid-template-columns:1fr}.taskbar{bottom:10px}.task-tab{font-size:10px}.task-icon{font-size:19px}.footer{flex-direction:column}}

/* smoke-check correction: keep support actions as full reference-style cards */
.action{display:block;text-align:left;width:100%;padding:20px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:20px;transition:.2s}.action i{font-style:normal;font-size:26px;display:block;margin-bottom:12px}.action b{display:block;font-size:16px;margin-bottom:4px}.action span{display:block;color:var(--muted);font-size:13px;line-height:1.5}

.offer-network-tabs{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}.offer-network-tabs .network-tab{width:124px;min-height:72px;height:72px;padding:0;border:2px solid transparent;border-radius:18px;opacity:.62;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}.offer-network-tabs .network-tab:hover,.offer-network-tabs .network-tab.active{opacity:1;transform:translateY(-2px);border-color:var(--hl);box-shadow:0 10px 30px var(--glow-btn)}.offer-network-tabs .network-logo{width:100%;min-height:100%;font-size:24px}.offer-network-tabs .logo-mtn{font-size:28px}.offer-network-tabs .logo-airteltigo{font-size:17px;line-height:.9}.offer-network-tabs .logo-telecel{font-size:22px}.offer-network-tabs .network-tab>span:last-child{font-size:0}.all-network-control{margin:0 0 18px}.all-network-control .filter-option{display:inline-flex;width:auto;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}

/* Authentic network color themes from the reference storefront */
body[data-theme="mtn"]{--bg1:#fffbe0;--bg2:#ffee94;--glow1:#ffd60077;--glow2:#ffb34744;--text:#2b2200;--muted:#7a6a25;--card:rgba(255,255,255,.72);--card2:#fff;--line:rgba(140,100,0,.22);--input:#fffef5;--panel:#fffbe6;--bar:rgba(255,250,215,.9);--grad:linear-gradient(135deg,#ffd500,#ffb000);--gt:linear-gradient(135deg,#e39500,#a85a00);--hl:#a86a00;--ring:#e6a400;--glow-btn:#ffb00066;--sh:rgba(120,90,0,.3)}
body[data-theme="airteltigo"]{--bg1:#0d2a78;--bg2:#050f33;--glow1:#0a63d677;--glow2:#e4002b55;--text:#f4f7ff;--muted:#aebde8;--card:rgba(255,255,255,.07);--card2:rgba(255,255,255,.13);--line:rgba(255,255,255,.16);--input:#06143d;--panel:#081a4d;--bar:rgba(7,22,66,.85);--grad:linear-gradient(135deg,#0a63d6,#e4002b);--gt:linear-gradient(135deg,#6aaeff,#ff5470);--hl:#ff93a6;--ring:#3d8bff;--glow-btn:#e4002b55;--sh:rgba(0,0,0,.55)}
body[data-theme="telecel"]{--bg1:#fff;--bg2:#ffd9d9;--glow1:#ff4d4d44;--glow2:#ff000022;--text:#2a0707;--muted:#8a4b4b;--card:rgba(255,255,255,.88);--card2:#fff;--line:rgba(200,0,0,.2);--input:#fff;--panel:#fff5f5;--bar:rgba(255,255,255,.92);--grad:linear-gradient(135deg,#e60000,#ff5252);--gt:linear-gradient(135deg,#e60000,#a80000);--hl:#d40000;--ring:#e60000;--glow-btn:#e6000055;--sh:rgba(150,0,0,.3)}
body[data-theme="mtn"] .catalog-card{background:rgba(255,255,255,.8);color:#2b2200}.bundle-mtn .mini-btn{background:linear-gradient(135deg,#ffd500,#ffb000);color:#2b2200}.bundle-mtn .catalog-network{color:#a86a00}
body[data-theme="airteltigo"] .catalog-card{background:rgba(255,255,255,.1);color:#f4f7ff}.bundle-airteltigo .mini-btn{background:linear-gradient(135deg,#0a63d6,#e4002b);color:#fff}.bundle-airteltigo .catalog-network{color:#ff93a6}
body[data-theme="telecel"] .catalog-card{background:rgba(255,255,255,.9);color:#2a0707}.bundle-telecel .mini-btn{background:linear-gradient(135deg,#e60000,#ff5252);color:#fff}.bundle-telecel .catalog-network{color:#d40000}
body[data-theme="mtn"] .catalog-card-foot,body[data-theme="airteltigo"] .catalog-card-foot,body[data-theme="telecel"] .catalog-card-foot{border-color:var(--line)}

/* Final reference parity: offers grid, bundle glow, and assistant */
.catalog-grid{grid-template-columns:repeat(4,1fr);gap:16px}.catalog-card{min-height:132px;padding:18px;border-radius:16px;background:var(--card);border-color:var(--line)}.catalog-card::after{content:"";position:absolute;right:-40px;top:-40px;width:110px;height:110px;border-radius:50%;background:var(--grad);opacity:.2}.catalog-card-head{margin:0}.catalog-network{color:var(--hl);font-size:10px;letter-spacing:1.5px;font-weight:800;text-transform:uppercase}.catalog-size{font-size:27px;letter-spacing:-1px;margin:11px 0 2px}.catalog-duration{color:var(--muted);font-size:11px}.catalog-card .mini-btn{display:block;width:100%;margin-top:18px;padding:11px 8px;font-size:12px;background:var(--grad);color:#fff}.ai-fab{position:fixed;right:16px;bottom:100px;z-index:60;display:flex;align-items:center;gap:7px;border:0;color:#fff;background:var(--grad);padding:9px 15px 9px 11px;border-radius:999px;font-weight:700;font-size:12px;box-shadow:0 8px 22px var(--glow-btn),inset 0 0 0 1px #ffffff30}.ai-fab b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#ffffff30;font-size:11px}.ai-panel{position:fixed;right:16px;bottom:148px;z-index:70;width:316px;height:432px;max-width:calc(100vw - 20px);max-height:calc(100vh - 176px);display:flex;flex-direction:column;overflow:hidden;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:20px;box-shadow:0 18px 50px var(--sh);transform-origin:bottom right;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(10px) scale(.92);transition:.18s ease}.ai-panel.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}.ai-head{display:flex;align-items:center;gap:9px;padding:11px 12px;background:var(--grad);color:#fff}.ai-av{width:30px;height:30px;border-radius:50%;background:#ffffff35;display:grid;place-items:center;font-size:15px}.ai-head div{flex:1;line-height:1.25}.ai-head b,.ai-head small{display:block}.ai-head b{font-size:13px}.ai-head small{opacity:.85;font-size:10px}.ai-x{width:24px;height:24px;border:0;border-radius:50%;background:#ffffff35;color:#fff;font-size:16px;line-height:1}.ai-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:9px 10px 0;padding:3px;background:var(--card);border-radius:11px}.ai-tabs button{padding:7px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-weight:700;font-size:11px}.ai-tabs button.on{background:var(--card2);color:var(--text)}.ai-pane{flex:1;min-height:0;display:flex;flex-direction:column}.ai-msgs{flex:1;overflow:auto;padding:11px 10px;display:flex;flex-direction:column;gap:7px}.msg{max-width:88%;padding:8px 11px;border-radius:14px;font-size:12px;line-height:1.5}.msg.bot{align-self:flex-start;background:var(--card2);border:1px solid var(--line);border-bottom-left-radius:4px}.chips{display:flex;gap:5px;overflow-x:auto;padding:0 10px 8px}.chips button{flex:none;border:1px solid #7c5cff88;background:#7c5cff1f;color:#d9d0ff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;white-space:nowrap}.ai-in{display:flex;gap:6px;padding:8px 10px;border-top:1px solid var(--line)}.ai-in input{flex:1;min-width:0;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--input);color:var(--text);outline:0}.ai-in button{width:34px;height:34px;border:0;border-radius:50%;background:var(--grad);color:#fff}.human{padding:14px 12px;overflow:auto}.human h3{margin:0 0 4px;font-size:16px}.human p{color:var(--muted);font-size:12px;line-height:1.5;margin:0 0 12px}.h-btn{display:flex;align-items:center;gap:10px;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:13px;padding:9px 10px;margin-bottom:7px}.h-btn i{font-style:normal;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff}.h-btn b,.h-btn span{display:block}.h-btn b{font-size:12px}.h-btn span{color:var(--muted);font-size:11px}.h-wa i{background:#25d366}.h-call i{background:#4f7cff}.h-mail i{background:#ff5fa2}
@media(max-width:900px){.catalog-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.catalog-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.catalog-grid{grid-template-columns:1fr}.ai-panel{right:10px;width:min(330px,calc(100vw - 20px))}.ai-fab{right:12px;bottom:96px}}

/* Auth parity: remove the legacy green CTA and use the reference gradient */
.primary-btn.lime{background:var(--grad);color:#fff}.primary-btn.lime:hover{background:var(--grad);filter:brightness(1.08)}.auth-layout{gap:18px}.auth-poster,.auth-card{border:1px solid var(--line);box-shadow:0 18px 50px var(--sh)}.auth-poster h1{background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}.auth-card{background:var(--card)}.auth-card h2{background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}.auth-card .subcopy{color:var(--muted)}

/* API feature surfaces */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.narrow-card{max-width:680px}.api-result{margin-top:18px}.api-result pre{margin:0;max-height:360px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:var(--input);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:14px;font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,monospace}.wallet-hero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;border-radius:24px;background:var(--grad);color:#fff;box-shadow:0 20px 50px var(--glow-btn)}.wallet-hero div{display:grid;gap:5px}.wallet-hero span,.wallet-hero small{font-size:12px;opacity:.8}.wallet-hero strong{font:700 42px/1 'Space Grotesk';letter-spacing:-.07em}.endpoint-list{display:grid;gap:0}.endpoint-row{display:flex;justify-content:space-between;gap:18px;padding:15px 0;border-top:1px solid var(--line);font-size:13px}.endpoint-row strong{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace}.endpoint-row span{color:var(--muted);text-align:right}.check-row{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)}.check-row input{accent-color:var(--ring)}textarea{font:inherit;resize:vertical}
/* Compact dashboard network choices */
.dashboard-view .network-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 18px}.dashboard-view .network-tab{min-height:78px;height:78px;flex-direction:row;justify-content:flex-start;gap:10px;padding:10px 12px;border-radius:16px}.dashboard-view .network-logo{width:48px;min-width:48px;min-height:48px;height:48px;filter:none}.dashboard-view .logo-mtn{font-size:19px}.dashboard-view .logo-airteltigo{font-size:11px;line-height:.92;border-radius:12px}.dashboard-view .logo-telecel{font-size:15px;border-radius:12px}.dashboard-view .network-tab>span:last-child{font-size:11px;line-height:1.25;text-align:left;color:var(--muted)}
.taskbar{grid-template-columns:repeat(6,1fr)}
@media(max-width:700px){.feature-grid{grid-template-columns:1fr}.wallet-hero{align-items:flex-start;flex-direction:column}.wallet-hero strong{font-size:36px}.endpoint-row{align-items:flex-start;flex-direction:column;gap:5px}.endpoint-row span{text-align:left}.taskbar{width:min(620px,96%)}.task-tab{font-size:10px}.task-icon{font-size:19px}}
@media(max-width:430px){.dashboard-view .network-tabs{gap:6px}.dashboard-view .network-tab{min-height:64px;height:64px;padding:7px 8px;gap:6px}.dashboard-view .network-logo{width:36px;min-width:36px;height:36px;min-height:36px}.dashboard-view .logo-mtn{font-size:14px}.dashboard-view .logo-airteltigo{font-size:8px}.dashboard-view .logo-telecel{font-size:11px}.dashboard-view .network-tab>span:last-child{font-size:9px}.task-tab{padding:8px 1px}.task-icon{font-size:17px}}

/* Final storefront cleanup */
.dashboard-view .network-tabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:10px 0 24px}.dashboard-view .network-tab{min-height:118px;height:118px;flex-direction:column;justify-content:space-between;gap:8px;padding:15px 12px;border-radius:20px;transform:none}.dashboard-view .network-tab:hover,.dashboard-view .network-tab.active{transform:none}.dashboard-view .network-logo{width:82%;min-width:0;min-height:64px;height:64px}.dashboard-view .logo-mtn{font-size:28px}.dashboard-view .logo-airteltigo{font-size:16px}.dashboard-view .logo-telecel{font-size:23px}.dashboard-view .network-tab>span:last-child{font-size:12px;text-align:center}.checkout-simple{max-width:760px;margin:0 auto}.checkout-summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:22px;margin-bottom:24px;border-bottom:1px solid var(--line)}.checkout-summary div{display:grid;gap:5px}.summary-label{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.checkout-summary strong{font:700 24px 'Space Grotesk';letter-spacing:-.05em}.checkout-summary small{color:var(--muted);font-size:12px}.checkout-total{color:var(--hl);white-space:nowrap}.auth-switch a{color:var(--hl)!important;text-decoration:underline;font-weight:800;display:inline-block;margin-left:4px}.auth-switch a:hover{color:var(--text)!important}.auth-poster-quote{display:none}.footer{justify-content:center}.mode-pill{display:none}
@media(max-width:700px){.dashboard-view .network-tabs{gap:8px;margin-bottom:20px}.dashboard-view .network-tab{min-height:100px;height:100px;padding:11px 8px}.dashboard-view .network-logo{min-height:54px;height:54px}.dashboard-view .logo-mtn{font-size:23px}.dashboard-view .logo-airteltigo{font-size:13px}.dashboard-view .logo-telecel{font-size:19px}.dashboard-view .network-tab>span:last-child{font-size:10px}.checkout-summary{align-items:flex-start;flex-direction:column;gap:7px}}

/* Offers-only network styling and square bundle cards */
.offers-page .catalog-card{aspect-ratio:1 / 1;min-height:0;border-radius:20px}.offers-page .catalog-grid{align-items:stretch}.offers-page.network-mtn .network-tab.active{border-color:#e6a400;box-shadow:0 0 0 1px #e6a400,0 10px 30px rgba(255,176,0,.28)}.offers-page.network-mtn .catalog-card{background:rgba(255,255,255,.86);color:#2b2200;border-color:rgba(140,100,0,.22)}.offers-page.network-mtn .catalog-card .mini-btn{background:linear-gradient(135deg,#ffd500,#ffb000);color:#2b2200}.offers-page.network-mtn .catalog-network{color:#a86a00}.offers-page.network-airteltigo .network-tab.active{border-color:#ff5470;box-shadow:0 0 0 1px #ff5470,0 10px 30px rgba(228,0,43,.28)}.offers-page.network-airteltigo .catalog-card{background:rgba(255,255,255,.1);color:#f4f7ff;border-color:rgba(255,255,255,.16)}.offers-page.network-airteltigo .catalog-card .mini-btn{background:linear-gradient(135deg,#0a63d6,#e4002b);color:#fff}.offers-page.network-airteltigo .catalog-network{color:#ff93a6}.offers-page.network-telecel .network-tab.active{border-color:#e60000;box-shadow:0 0 0 1px #e60000,0 10px 30px rgba(230,0,0,.25)}.offers-page.network-telecel .catalog-card{background:rgba(255,255,255,.9);color:#2a0707;border-color:rgba(200,0,0,.2)}.offers-page.network-telecel .catalog-card .mini-btn{background:linear-gradient(135deg,#e60000,#ff5252);color:#fff}.offers-page.network-telecel .catalog-network{color:#d40000}
@media(max-width:700px){.offers-page .catalog-card{border-radius:18px}}
/* Square network selector on the offers page */
.offers-page .offer-network-tabs{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}.offers-page .offer-network-tabs .network-tab{width:118px;min-width:118px;min-height:118px;height:118px;flex-direction:column;justify-content:space-between;gap:8px;padding:14px 10px;border-radius:20px;opacity:1}.offers-page .offer-network-tabs .network-logo{width:82%;min-height:68px;height:68px}.offers-page .offer-network-tabs .logo-mtn{font-size:27px}.offers-page .offer-network-tabs .logo-airteltigo{font-size:15px}.offers-page .offer-network-tabs .logo-telecel{font-size:22px}.offers-page .offer-network-tabs .network-tab>span:last-child{font-size:11px!important;line-height:1.2;text-align:center;color:var(--muted)}
@media(max-width:480px){.offers-page .offer-network-tabs{gap:8px}.offers-page .offer-network-tabs .network-tab{width:calc((100vw - 64px)/3);min-width:0;height:auto;min-height:100px;aspect-ratio:1 / 1;padding:10px 7px}.offers-page .offer-network-tabs .network-logo{min-height:54px;height:54px}.offers-page .offer-network-tabs .logo-mtn{font-size:21px}.offers-page .offer-network-tabs .logo-airteltigo{font-size:11px}.offers-page .offer-network-tabs .logo-telecel{font-size:17px}.offers-page .offer-network-tabs .network-tab>span:last-child{font-size:9px!important}}

/* Restore the original compact Offers network selector */
.offers-page .offer-network-tabs{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:16px}.offers-page .offer-network-tabs .network-tab{width:124px;min-width:124px;min-height:72px;height:72px;flex-direction:row;justify-content:center;gap:8px;padding:0;border-radius:18px;opacity:.62}.offers-page .offer-network-tabs .network-tab:hover,.offers-page .offer-network-tabs .network-tab.active{opacity:1;transform:translateY(-2px)}.offers-page .offer-network-tabs .network-logo{width:100%;min-height:100%;height:auto}.offers-page .offer-network-tabs .logo-mtn{font-size:28px}.offers-page .offer-network-tabs .logo-airteltigo{font-size:17px;line-height:.9}.offers-page .offer-network-tabs .logo-telecel{font-size:22px}.offers-page .offer-network-tabs .network-tab>span:last-child{font-size:0!important}.auth-layout{display:block;max-width:620px;margin:40px auto 0;min-height:0}.auth-layout .auth-card{max-width:none;margin:0}.auth-layout .auth-card h1{font:700 36px 'Space Grotesk';letter-spacing:-.07em;margin:0 0 9px;background:var(--gt);-webkit-background-clip:text;background-clip:text;color:transparent}.auth-layout .auth-card .subcopy{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 27px}
/* Match the reference storefront proportions: compact network pills and wide bundle cards */
.offers-page .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.offers-page .catalog-card{aspect-ratio:auto;min-height:132px;height:auto;padding:18px;border-radius:16px}.offers-page .catalog-card .catalog-size{font-size:27px;margin:11px 0 2px;letter-spacing:-1px}.offers-page .catalog-card .catalog-duration{font-size:11px}.offers-page .catalog-card .mini-btn{margin-top:18px;padding:11px 8px;border-radius:10px}.offers-page .offer-network-tabs .network-tab{width:124px;min-width:124px;height:72px;min-height:72px;border-radius:18px}
@media(max-width:900px){.offers-page .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.offers-page .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.offers-page .catalog-card{min-height:132px;padding:15px}}
@media(max-width:480px){.offers-page .catalog-grid{grid-template-columns:1fr}.offers-page .catalog-card{min-height:132px}}

/* Voucher type cards and account balance */
.voucher-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.voucher-card{position:relative;display:grid;gap:6px;text-align:left;padding:15px;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);transition:.18s ease}.voucher-card:hover{transform:translateY(-2px);border-color:var(--hl);background:var(--card2)}.voucher-card.selected{border-color:var(--hl);box-shadow:0 0 0 2px color-mix(in srgb,var(--hl) 30%,transparent);background:var(--card2)}.voucher-card strong{font:700 21px 'Space Grotesk';letter-spacing:-.05em}.voucher-card span{color:var(--muted);font-size:11px;line-height:1.35}.voucher-card em{font-style:normal;color:var(--hl);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.voucher-balance{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--card2)}.voucher-balance span,.voucher-balance small{color:var(--muted);font-size:11px}.voucher-balance strong{margin-left:auto;font:700 18px 'Space Grotesk';letter-spacing:-.04em;color:var(--hl)}
@media(max-width:520px){.voucher-choice-grid{grid-template-columns:1fr}.voucher-balance{align-items:flex-start;flex-direction:column;gap:4px}.voucher-balance strong{margin-left:0}}

/* Compact tappable network cards in checkout */
.checkout-network-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.checkout-network-card{display:flex;align-items:center;justify-content:center;gap:7px;min-height:62px;padding:8px;border:1px solid var(--line);border-radius:13px;background:var(--card);color:var(--text);font-weight:700;font-size:11px;transition:.18s ease}.checkout-network-card:hover{transform:translateY(-1px);border-color:var(--hl);background:var(--card2)}.checkout-network-card.selected{border-color:var(--hl);box-shadow:0 0 0 2px color-mix(in srgb,var(--hl) 30%,transparent);background:var(--card2)}.checkout-network-card .network-logo{width:34px;min-width:34px;height:34px;min-height:34px;filter:none}.checkout-network-card .logo-mtn{font-size:11px}.checkout-network-card .logo-airteltigo{font-size:7px;line-height:.9;border-radius:8px}.checkout-network-card .logo-telecel{font-size:9px;border-radius:8px}@media(max-width:480px){.checkout-network-card{flex-direction:column;gap:4px;min-height:70px;font-size:10px}.checkout-network-card .network-logo{width:38px;min-width:38px;height:38px;min-height:38px}}

/* Account choice, guest checkout, and order confirmation */
.guest-option{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}.guest-option a{color:var(--hl);font-weight:800;text-decoration:underline}.guest-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:28px 0}.guest-heading h1{font:700 clamp(35px,5vw,56px) 'Space Grotesk';letter-spacing:-.075em;margin:0}.guest-heading p{color:var(--muted);margin:8px 0 0}.guest-page .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.guest-page .catalog-card{min-height:132px}.order-confirmation{margin:0 auto 18px;max-width:760px}.order-confirmation h2{font:700 27px 'Space Grotesk';letter-spacing:-.06em;margin:8px 0 18px}.confirmation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.confirmation-grid div{display:grid;gap:5px;padding:12px;border-radius:12px;background:var(--card2);border:1px solid var(--line)}.confirmation-grid span{color:var(--muted);font-size:11px}.confirmation-grid strong{font:700 13px ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-word}@media(max-width:900px){.guest-page .catalog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.guest-heading{align-items:flex-start;flex-direction:column}.guest-page .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.confirmation-grid{grid-template-columns:1fr}}@media(max-width:480px){.guest-page .catalog-grid{grid-template-columns:1fr}}
/* Prominent guest entry and modal reminders */
.auth-layout{max-width:620px;margin:30px auto 0}.guest-hero{display:grid;gap:7px;margin-bottom:16px;padding:24px 26px;border:1px solid color-mix(in srgb,var(--hl) 55%,var(--line));border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--hl) 22%,var(--card)),var(--card2));color:var(--text);box-shadow:0 18px 48px rgba(0,0,0,.16);transition:.18s ease}.guest-hero:hover{transform:translateY(-3px);border-color:var(--hl)}.guest-hero-kicker{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.guest-hero strong{font:700 clamp(29px,5vw,43px) 'Space Grotesk';letter-spacing:-.075em}.guest-hero span:not(.guest-hero-kicker){color:var(--muted);font-size:13px;line-height:1.5;max-width:470px}.guest-hero b{color:var(--hl);font-size:13px;margin-top:5px}.auth-shell .auth-card{margin:0}.modal-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(5,7,20,.72);backdrop-filter:blur(8px)}.modal-card{position:relative;width:min(100%,460px);padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 24px 80px rgba(0,0,0,.35)}.modal-card h2{font:700 32px 'Space Grotesk';letter-spacing:-.07em;margin:10px 0}.modal-card p{color:var(--muted);line-height:1.55;margin:0 0 20px}.modal-close{position:absolute;top:13px;right:15px;border:0;background:transparent;color:var(--muted);font-size:26px;cursor:pointer}.modal-actions{display:flex;gap:10px;flex-wrap:wrap}.verify-number-chip{margin:0 0 20px;padding:13px 15px;border-radius:13px;background:var(--card2);border:1px solid var(--line);font:700 18px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}