/* Shared polished layouts for MTN Fibre, Track Order and Vendor pages. */
.flow-page{--flow-accent:#ffc400;--flow-accent-dark:#b98700}
.flow-main{padding-top:36px;padding-bottom:62px}
.flow-hero{display:flex;align-items:center;gap:20px;margin-bottom:25px}
.flow-icon{width:76px;height:76px;flex:0 0 76px;border-radius:22px;display:grid;place-items:center;font-size:32px;box-shadow:0 5px 15px rgba(26,42,64,.09)}
.mtn-fibre-icon{background:#ffcc22;color:#202b3c}
.flow-hero .service-heading h1{font-size:clamp(34px,4.1vw,48px);letter-spacing:-1.8px;margin:9px 0 7px}
.flow-hero .service-heading p{font-size:16px}
.flow-note{display:flex;align-items:center;gap:10px;margin:0 0 28px;padding:14px 17px;border:1px solid #f1e2b1;background:#fff9e7;color:#62512a;border-radius:16px;font-size:14px}
.flow-note i{color:#c09100;font-size:17px}
.flow-form{display:grid;gap:27px}
.flow-section{min-width:0}
.flow-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:15px}
.flow-section-kicker{display:block;color:#b38200;font-size:10px;font-weight:900;letter-spacing:1.2px;margin-bottom:5px}
.flow-section-heading h2,.application-heading h2{font-size:23px;font-weight:850;letter-spacing:-.65px;margin:0;line-height:1.25}
.flow-section-heading p,.application-heading p{margin:6px 0 0;color:var(--ng-muted);font-size:13px}
.flow-section-meta{display:inline-flex;align-items:center;gap:6px;color:#8a6a11;background:#fff5d5;border-radius:999px;padding:8px 12px;font-size:11px;font-weight:800;white-space:nowrap}
.fibre-volume-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.fibre-plan{position:relative;min-width:0;display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:6px;padding:18px;border:1.5px solid #e2e7ed;border-radius:19px;background:#fff;color:var(--ng-ink);cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}
.fibre-plan:hover{transform:translateY(-2px);border-color:#e7b500;box-shadow:0 10px 24px rgba(26,42,64,.07)}
.fibre-plan.selected{border-color:#e9b400;background:#fffdf4;box-shadow:0 0 0 3px rgba(255,196,0,.19)}
.plan-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.plan-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:12px;background:#fff2c7;color:#947000;font-size:18px}
.plan-check{display:none;width:23px;height:23px;border-radius:50%;align-items:center;justify-content:center;background:#ffc400;color:#1b2940;font-size:14px}
.fibre-plan.selected .plan-check{display:flex}
.plan-volume{font-size:24px;font-weight:900;letter-spacing:-.8px;line-height:1.15}
.fibre-plan small{color:#788498;font-size:12px;line-height:1.4;min-height:30px}
.fibre-plan>b{display:block;margin-top:7px;color:#f0ad19;font-size:21px;font-weight:900;letter-spacing:-.5px}
.fibre-unlimited-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.fibre-unlimited{padding:18px;min-height:125px;gap:7px}
.fibre-unlimited .unlimited-title{font-size:17px;font-weight:850}
.fibre-unlimited small{min-height:0}
.fibre-unlimited>b{font-size:20px;margin-top:2px}
.fibre-unlimited .plan-check{position:absolute;right:14px;top:14px}
.fibre-page .service-panel{padding:23px}
.fibre-page .service-summary{position:relative}
.fibre-page .service-submit:disabled{opacity:.48;cursor:not-allowed;transform:none;box-shadow:none}
/* Track order */
.track-main{padding-top:42px}
.track-intro{max-width:760px;margin-bottom:32px}
.track-intro h1{font-size:clamp(38px,5vw,54px);line-height:1.08;letter-spacing:-2.2px;font-weight:900;margin:13px 0 10px}
.track-intro>p{font-size:17px;line-height:1.7;color:#68758a;max-width:700px;margin:0}
.track-points{display:flex;flex-wrap:wrap;gap:10px;margin-top:19px}
.track-points span{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid #e3e8ee;color:#536176;font-size:12px;font-weight:700}
.track-points i{color:#b68a00}
.track-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);gap:20px;align-items:stretch;max-width:1020px}
.track-form-card,.track-side-card,.track-result{background:#fff;border:1px solid #e1e6ed;border-radius:24px;box-shadow:0 8px 25px rgba(23,41,65,.06);padding:25px}
.track-form-card .panel-heading{margin-bottom:23px}
.track-form-card .service-form{gap:18px}
.track-submit{width:100%;margin-top:2px}
.track-side-card{background:linear-gradient(145deg,#fff 0%,#fff9e6 100%)}
.track-side-icon{width:51px;height:51px;display:grid;place-items:center;border-radius:16px;background:#fff0bd;color:#9b7300;font-size:24px;margin-bottom:17px}
.track-side-card h3{font-size:22px;font-weight:850;letter-spacing:-.5px;margin:0 0 7px}
.track-side-card>p{color:#788498;font-size:13px;line-height:1.65;margin:0 0 19px}
.track-step{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid #ece9dd}
.track-step>span{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:12px;background:#fff;color:#a77c00;font-size:17px}
.track-step strong,.track-step small{display:block}
.track-step strong{font-size:13px;font-weight:800}
.track-step small{margin-top:2px;font-size:11px;color:#7b8798}
.track-result{max-width:1020px;margin-top:22px}
.result-heading{display:flex;align-items:center;gap:13px;padding-bottom:19px;border-bottom:1px solid #edf0f3}
.result-heading h2{font-size:20px;font-weight:850;margin:2px 0}
.result-heading p{font-size:12px;color:#798599;margin:0}
.result-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-top:20px}
.result-grid>div{display:flex;flex-direction:column;gap:7px;min-width:0}
.result-grid small{font-size:11px;color:#7d8899}
.result-grid strong{font-size:14px;overflow-wrap:anywhere}
.status-pill{display:inline-flex;align-self:flex-start;padding:5px 9px;border-radius:999px;background:#edf0f4;color:#465368;font-size:11px!important}
.status-paid,.status-delivered{background:#e3f7eb;color:#187647}.status-failed{background:#ffeded;color:#a72e2e}.status-processing{background:#fff2cf;color:#916800}
/* Vendor page */
.vendor-main{padding-top:30px}
.vendor-hero{position:relative;isolation:isolate;overflow:hidden;text-align:center;padding:48px 24px 39px;border-radius:28px;background:linear-gradient(125deg,#fff8e8 0%,#fff 47%,#fff1cf 100%);border:1px solid #f1e5c8;margin-bottom:22px}
.vendor-hero .service-kicker{justify-content:center}
.vendor-hero h1{position:relative;z-index:1;font-size:clamp(36px,5vw,57px);font-weight:950;letter-spacing:-2.2px;line-height:1.03;margin:16px 0 13px}
.vendor-hero h1>span{color:#1b2940}
.vendor-hero h1 em{font-style:normal;background:linear-gradient(90deg,#e9a900,#ff8c35);-webkit-background-clip:text;background-clip:text;color:transparent}
.vendor-hero>p{position:relative;z-index:1;max-width:650px;margin:0 auto;color:#68758a;font-size:15px;line-height:1.7}
.vendor-hero-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;margin-top:23px;padding:13px 22px;border-radius:999px;background:#1b2940;color:#fff!important;font-size:13px;font-weight:850;box-shadow:0 9px 20px rgba(27,41,64,.16);transition:transform .18s}
.vendor-hero-cta:hover{transform:translateY(-2px)}
.vendor-hero-orb{position:absolute;z-index:0;border-radius:50%;pointer-events:none}
.orb-one{width:210px;height:210px;right:-70px;top:-100px;background:rgba(255,196,0,.13)}
.orb-two{width:160px;height:160px;left:-55px;bottom:-100px;background:rgba(255,174,55,.13)}
.vendor-benefits-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:24px}
.vendor-benefits-grid article{padding:19px;border:1px solid #e3e8ee;border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(25,41,63,.025)}
.vendor-benefits-grid article>span{width:38px;height:38px;display:grid;place-items:center;border-radius:13px;background:#fff0cf;color:#a97800;font-size:18px;margin-bottom:12px}
.vendor-benefits-grid strong{font-size:15px;font-weight:850;display:block}
.vendor-benefits-grid p{font-size:12px;color:#788498;line-height:1.55;margin:5px 0 0}
.vendor-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:39px}
.vendor-info-card,.vendor-calculator{padding:25px;border-radius:23px;border:1px solid #e3e8ee;background:#fff}
.vendor-info-card{background:linear-gradient(140deg,#fff7e4,#fff 75%)}
.vendor-info-kicker{font-size:10px;letter-spacing:1.1px;color:#a77b00;font-weight:900}
.vendor-info-card h2,.vendor-calculator h2{font-size:23px;font-weight:900;letter-spacing:-.6px;margin:8px 0 16px}
.vendor-info-card ul{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.vendor-info-card li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#48566b}
.vendor-info-card li i{color:#26a269;margin-top:2px}
.vendor-info-note{display:flex;align-items:flex-start;gap:9px;margin-top:20px;padding:12px 13px;border-radius:13px;background:#fff;border:1px solid #f0e8d5;color:#6d634b;font-size:11px;line-height:1.55}
.vendor-info-note i{color:#bd8d00;margin-top:2px}
.vendor-calculator>p{font-size:12px;line-height:1.6;color:#788498;margin:-6px 0 18px}
.calculator-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calculator-fields label{font-size:11px;color:#7c8798;font-weight:700}
.calculator-fields input{display:block;width:100%;margin-top:7px;min-height:45px;padding:10px 12px;border:1px solid #e2e7ed;border-radius:13px;outline:none;color:#26354a;background:#fbfcfd;font-size:14px}
.calculator-fields input:focus{border-color:#e5b400;box-shadow:0 0 0 3px rgba(255,196,0,.16)}
.profit-output{margin-top:20px;padding:17px;border-radius:16px;background:#f7f8fa}
.profit-output small,.profit-output span{display:block;color:#7d8899;font-size:11px}
.profit-output strong{display:block;color:#f0ae1c;font-size:34px;letter-spacing:-1px;font-weight:950;line-height:1.2;margin:4px 0}
.profit-output strong.negative-profit{color:#c13d3d}
.vendor-application{scroll-margin-top:90px;margin-bottom:38px}
.application-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:15px}
.application-heading h2{font-size:27px;letter-spacing:-.8px;margin:4px 0 0}
.application-badge{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:#fff1c8;color:#886400;font-size:11px;font-weight:800;white-space:nowrap}
.vendor-form{display:grid;gap:21px}
.vendor-submit{justify-self:start;min-width:230px}
.service-success{display:flex;align-items:flex-start;gap:13px;padding:16px 18px;margin-bottom:16px;border:1px solid #bfe8d0;border-radius:16px;background:#eaf9f0;color:#1c7047}
.service-success>i{font-size:22px;margin-top:1px}.service-success strong{display:block;font-size:15px}.service-success p{margin:4px 0 0;font-size:12px;line-height:1.6}
.vendor-faq{padding-top:2px}
.vendor-faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vendor-faq-grid details{padding:15px 17px;border:1px solid #e1e6ed;border-radius:15px;background:#fff}
.vendor-faq-grid summary{font-size:13px;font-weight:800;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vendor-faq-grid summary::-webkit-details-marker{display:none}
.vendor-faq-grid summary:after{content:'+';font-size:20px;color:#b18300;font-weight:500}
.vendor-faq-grid details[open] summary:after{content:'−'}
.vendor-faq-grid details p{margin:10px 0 0;color:#758196;font-size:12px;line-height:1.65}
@media(max-width:1000px){.fibre-volume-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.fibre-unlimited-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.track-layout{grid-template-columns:1fr 1fr}.vendor-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.flow-main{padding-top:28px;padding-bottom:38px}.flow-hero{align-items:flex-start;gap:13px}.flow-icon{width:58px;height:58px;flex-basis:58px;border-radius:17px;font-size:25px}.flow-hero .service-heading h1{font-size:clamp(28px,7vw,38px);letter-spacing:-1.2px}.flow-hero .service-heading p{font-size:14px}.flow-note{font-size:12px;align-items:flex-start;margin-bottom:22px}.flow-section-heading h2,.application-heading h2{font-size:20px}.flow-section-meta{font-size:10px;padding:7px 9px}.fibre-volume-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fibre-plan{padding:14px;border-radius:16px}.plan-volume{font-size:21px}.fibre-plan small{font-size:11px}.fibre-plan>b{font-size:19px}.fibre-unlimited-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.fibre-unlimited{min-height:120px;padding:15px}.fibre-unlimited .unlimited-title{font-size:15px}.fibre-unlimited>b{font-size:18px}.fibre-page .service-panel{padding:17px}.flow-form{gap:23px}.fibre-page .service-summary{grid-template-columns:43px minmax(0,1fr);padding:15px;gap:10px}.fibre-page .service-summary .summary-amount{grid-column:1;grid-row:2;font-size:21px}.fibre-page .service-summary .service-submit{grid-column:2;grid-row:2;width:100%;font-size:12px;padding:0 9px}.track-main{padding-top:28px}.track-intro h1{font-size:clamp(34px,8vw,44px);letter-spacing:-1.5px}.track-intro>p{font-size:14px}.track-layout{grid-template-columns:1fr;gap:13px}.track-form-card,.track-side-card,.track-result{padding:18px;border-radius:19px}.track-points{gap:7px}.track-points span{font-size:11px;padding:7px 9px}.result-grid{gap:16px 10px}.vendor-main{padding-top:18px}.vendor-hero{padding:35px 17px 30px;border-radius:21px}.vendor-hero h1{font-size:clamp(32px,8vw,44px);letter-spacing:-1.4px}.vendor-hero>p{font-size:13px}.vendor-benefits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.vendor-benefits-grid article{padding:14px;border-radius:15px}.vendor-benefits-grid article>span{width:33px;height:33px;font-size:16px;margin-bottom:9px}.vendor-benefits-grid strong{font-size:13px}.vendor-benefits-grid p{font-size:11px}.vendor-feature-grid{grid-template-columns:1fr;gap:12px;margin-bottom:30px}.vendor-info-card,.vendor-calculator{padding:19px;border-radius:19px}.vendor-info-card h2,.vendor-calculator h2{font-size:21px}.application-heading{align-items:flex-start;flex-direction:column}.application-badge{font-size:10px}.vendor-form{padding:17px!important}.vendor-submit{width:100%;min-width:0}.vendor-faq-grid{grid-template-columns:1fr}.profit-output strong{font-size:29px}}
@media(max-width:390px){.fibre-volume-grid,.fibre-unlimited-grid{grid-template-columns:1fr}.fibre-plan small{min-height:0}.flow-section-heading{align-items:flex-start;flex-direction:column;gap:8px}.calculator-fields{grid-template-columns:1fr}.vendor-benefits-grid{grid-template-columns:1fr 1fr}}

/* Fixed vendor activation fee payment panel */
.vendor-fee-summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.45rem 1rem;margin:1.25rem 0;padding:1.15rem 1.25rem;border:1px solid rgba(255,190,55,.45);border-radius:18px;background:linear-gradient(120deg,#fff7df,#fff 72%)}
.vendor-fee-summary span{display:flex;align-items:center;gap:.5rem;font-weight:700;color:#1b2940}
.vendor-fee-summary span i{color:#d99500;font-size:1.2rem}
.vendor-fee-summary strong{font-size:clamp(1.6rem,3vw,2rem);font-weight:900;color:#f4ad26;letter-spacing:-.04em}
.vendor-fee-summary small{flex-basis:100%;color:#687386}

/* Shared naGratData image wordmark */
.service-brand{display:inline-flex;align-items:center;flex:0 0 auto;text-decoration:none!important}.service-brand .brand-logo{display:block;width:190px;max-width:100%;height:auto;max-height:48px;object-fit:contain;object-position:left center}.service-footer .service-brand .brand-logo{width:180px;max-height:46px}@media(max-width:760px){.service-brand .brand-logo{width:166px;max-height:43px}.service-footer .service-brand .brand-logo{width:174px}}