/* =========================================================

   EXACTSUB PUBLIC DATA PAGE

   Self-contained page CSS.

========================================================= */



:root{

    --pd-primary:#022A7B;

    --pd-primary-2:#0A4FD6;

    --pd-accent:#29BA22;

    --pd-ink:#0B1830;

    --pd-text:#34445E;

    --pd-muted:#71809A;

    --pd-white:#FFFFFF;

    --pd-bg:#F5F8FE;

    --pd-line:#DCE4F0;

    --pd-soft:#EDF3FF;

    --pd-shadow:0 24px 70px rgba(10,35,80,.10);

    --pd-radius:26px;

    --pd-nav:82px;

}



*{

    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

    scroll-padding-top:100px;

}



body.public-data-page{

    margin:0;

    background:var(--pd-white);

    color:var(--pd-ink);

    font-family:

        Inter,

        ui-sans-serif,

        system-ui,

        -apple-system,

        BlinkMacSystemFont,

        "Segoe UI",

        sans-serif;

    font-size:16px;

    line-height:1.55;

    overflow-x:hidden;

}



body.public-data-page a{

    text-decoration:none;

    color:inherit;

}



body.public-data-page button,

body.public-data-page input,

body.public-data-page select{

    font:inherit;

}



.public-data-container{

    width:min(1320px,calc(100% - 48px));

    margin-inline:auto;

}





/* =========================================================

   SCROLL PROGRESS

========================================================= */



.public-data-progress{

    position:fixed;

    top:0;

    left:0;

    width:0;

    height:3px;

    background:

        linear-gradient(

            90deg,

            var(--pd-primary),

            #2477ff,

            var(--pd-accent)

        );

    z-index:2000;

}





/* =========================================================

   HEADER

========================================================= */



.public-data-header{

    position:sticky;

    top:0;

    z-index:1000;

    background:rgba(255,255,255,.94);

    border-bottom:1px solid rgba(220,228,240,.85);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

}



.public-data-nav{

    height:var(--pd-nav);

    width:min(1440px,calc(100% - 48px));

    margin:auto;

    display:flex;

    align-items:center;

    gap:34px;

}



.public-data-brand{

    display:inline-flex;

    align-items: flex-end;

    gap:10px;

    font-weight:800;

    letter-spacing:-.03em;

    color:var(--pd-ink);

}





.public-data-footer-logo{

    display:inline-flex;

    align-items: baseline;

    gap:10px;

    font-weight:800;

    letter-spacing:-.03em;

    color:var(--pd-ink);

}



.public-data-brand img{

    width:38px;

    height:38px;

    object-fit:contain;

    border-radius:10px;

}



.public-data-brand span{

    font-size:21px;

}



.public-data-nav-links{

    display:flex;

    align-items:center;

    gap:36px;

    margin-left:auto;

}



.public-data-nav-links a{

    font-weight:700;

    color:#35445D;

    transition:.2s ease;

}



.public-data-nav-links a:hover{

    color:var(--pd-primary);

}



.public-data-nav-actions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-left:4px;

}





/* =========================================================

   BUTTONS

   Explicit link colors prevent the global

   body.public-data-page a { color: inherit; }

   rule from overriding button text colors.

========================================================= */



.public-data-btn{

    min-height:48px;

    padding:0 24px;

    border-radius:14px;

    border:1px solid transparent;



    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;



    font-weight:800;



    text-decoration:none;



    transition:

        transform .2s ease,

        box-shadow .2s ease,

        background .2s ease,

        border-color .2s ease,

        color .2s ease;

}



.public-data-btn:hover{

    transform:translateY(-2px);

}





/* PRIMARY BLUE BUTTON */



body.public-data-page a.public-data-btn-primary{

    background:var(--pd-primary);

    color:#FFFFFF;



    box-shadow:

        0 12px 28px rgba(2,42,123,.18);

}



body.public-data-page a.public-data-btn-primary:hover{

    background:var(--pd-primary-2);

    color:#FFFFFF;



    box-shadow:

        0 16px 32px rgba(2,42,123,.24);

}





/* OUTLINE BUTTON */



body.public-data-page a.public-data-btn-outline{

    background:#FFFFFF;

    color:var(--pd-primary);



    border-color:#BFD0E9;

}



body.public-data-page a.public-data-btn-outline:hover{

    background:#F7FAFF;

    color:var(--pd-primary);



    border-color:var(--pd-primary);

}





/* WHITE BUTTON ON BLUE CTA */



body.public-data-page a.public-data-btn-white{

    background:#FFFFFF;

    color:var(--pd-primary);



    border-color:#FFFFFF;

}



body.public-data-page a.public-data-btn-white:hover{

    background:#F4F7FC;

    color:var(--pd-primary);

}





/* TRANSPARENT / GHOST BUTTON ON BLUE CTA */



body.public-data-page a.public-data-btn-ghost{

    background:transparent;

    color:#FFFFFF;



    border-color:rgba(255,255,255,.55);

}



body.public-data-page a.public-data-btn-ghost:hover{

    background:rgba(255,255,255,.10);

    color:#FFFFFF;

}





/* LARGE BUTTON */



.public-data-btn-large{

    min-height:54px;

    padding-inline:28px;

    border-radius:15px;

}





/* =========================================================

   THEME / MOBILE MENU

========================================================= */



.public-data-theme-toggle,

.public-data-menu-toggle{

    width:48px;

    height:48px;

    border:1px solid var(--pd-line);

    background:#fff;

    color:var(--pd-ink);

    border-radius:14px;

    display:grid;

    place-items:center;

    cursor:pointer;

}



.public-data-theme-icon{

    font-size:22px;

    line-height:1;

}



.public-data-menu-toggle{

    display:none;

    gap:4px;

    padding:12px;

}



.public-data-menu-toggle span{

    width:19px;

    height:2px;

    background:var(--pd-ink);

    border-radius:3px;

    display:block;

}



.public-data-mobile-menu{

    display:none;

}





/* =========================================================
   SERVICES DROPDOWN
========================================================= */

.public-data-nav-dropdown{
    position:relative;
}

.public-data-services-trigger{
    appearance:none;
    border:0;
    background:transparent;
    color:#35445D;
    padding:10px 4px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    font:inherit;
    font-weight:700;
    cursor:pointer;
    transition:color .2s ease;
}

.public-data-services-trigger:hover,
.public-data-nav-dropdown.is-open .public-data-services-trigger{
    color:var(--pd-primary);
}

.public-data-services-chevron{
    font-size:16px;
    line-height:1;
    transform:translateY(-1px);
    transition:transform .22s ease;
}

.public-data-nav-dropdown.is-open .public-data-services-chevron{
    transform:rotate(180deg) translateY(1px);
}

.public-data-services-menu{
    position:absolute;
    top:calc(100% + 20px);
    left:50%;
    width:min(820px,calc(100vw - 48px));
    padding:22px;
    transform:translate(-50%,8px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(220,228,240,.95);
    border-radius:22px;
    box-shadow:0 28px 70px rgba(8,31,73,.16),0 8px 24px rgba(8,31,73,.07);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    transition:opacity .2s ease,transform .2s ease,visibility .2s ease;
    z-index:1200;
}

.public-data-services-menu::before{
    content:"";
    position:absolute;
    top:-7px;
    left:50%;
    width:13px;
    height:13px;
    background:#fff;
    border-left:1px solid rgba(220,228,240,.95);
    border-top:1px solid rgba(220,228,240,.95);
    transform:translateX(-50%) rotate(45deg);
}

.public-data-nav-dropdown.is-open .public-data-services-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%,0);
}

.public-data-services-head{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    padding:4px 4px 18px;
    border-bottom:1px solid var(--pd-line);
}

.public-data-services-head strong{
    display:block;
    margin-top:4px;
    color:var(--pd-ink);
    font-size:19px;
    letter-spacing:-.025em;
}

.public-data-services-head p{
    margin:5px 0 0;
    max-width:520px;
    color:var(--pd-muted);
    font-size:12.5px;
    line-height:1.55;
}

.public-data-services-kicker{
    display:block;
    color:var(--pd-primary);
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.public-data-services-badge{
    flex:none;
    padding:7px 10px;
    border-radius:999px;
    background:#EEF8ED;
    color:#21851D;
    font-size:10px;
    font-weight:800;
    white-space:nowrap;
}

.public-data-services-grid{
    display:grid;
    grid-template-columns:1.15fr .8fr 1fr;
    gap:18px;
    padding:18px 2px;
}

.public-data-services-group{
    min-width:0;
}

.public-data-services-group-title{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 4px 9px;
    color:var(--pd-ink);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.public-data-services-group-icon{
    width:27px;
    height:27px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#EDF3FF;
    color:var(--pd-primary);
    font-size:13px;
}

.public-data-service-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:50px;
    padding:8px 10px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--pd-ink);
    transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.public-data-service-link:hover{
    background:#F5F8FE;
    border-color:#E2EAF6;
    transform:translateX(2px);
}

.public-data-service-link span{
    min-width:0;
}

.public-data-service-link strong,
.public-data-service-link small{
    display:block;
}

.public-data-service-link strong{
    font-size:12.5px;
    line-height:1.3;
}

.public-data-service-link small{
    margin-top:2px;
    color:var(--pd-muted);
    font-size:10px;
    line-height:1.35;
}

.public-data-service-link > b{
    flex:none;
    color:var(--pd-primary);
    font-size:15px;
    transition:transform .18s ease;
}

.public-data-service-link:hover > b{
    transform:translateX(3px);
}

.public-data-services-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:13px 4px 1px;
    border-top:1px solid var(--pd-line);
    font-size:11px;
}

.public-data-services-footer > span{
    color:var(--pd-muted);
}

.public-data-services-footer > span b{
    color:var(--pd-accent);
    margin-right:5px;
}

.public-data-services-footer a{
    color:var(--pd-primary);
    font-weight:800;
}

.public-data-services-footer a:hover{
    color:var(--pd-primary-2);
}

.public-data-mobile-services{
    display:none;
}

html[data-theme="dark"] .public-data-services-trigger{
    color:#F4F7FD;
}

html[data-theme="dark"] .public-data-services-menu{
    background:rgba(13,29,53,.98);
    border-color:#233650;
    box-shadow:0 28px 70px rgba(0,0,0,.35);
}

html[data-theme="dark"] .public-data-services-menu::before{
    background:#0D1D35;
    border-color:#233650;
}

html[data-theme="dark"] .public-data-services-head,
html[data-theme="dark"] .public-data-services-footer{
    border-color:#233650;
}

html[data-theme="dark"] .public-data-services-head strong,
html[data-theme="dark"] .public-data-services-group-title,
html[data-theme="dark"] .public-data-service-link strong{
    color:#F0F5FC;
}

html[data-theme="dark"] .public-data-services-badge{
    background:#12371B;
    color:#79D978;
}

html[data-theme="dark"] .public-data-services-group-icon{
    background:#102A4D;
    color:#76A9FF;
}

html[data-theme="dark"] .public-data-service-link:hover{
    background:#10233D;
    border-color:#233650;
}

@media (max-width: 1050px){
    .public-data-services-menu{
        width:min(760px,calc(100vw - 36px));
    }
    .public-data-services-grid{
        grid-template-columns:1fr 1fr;
    }
    .public-data-services-group:last-child{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:4px 8px;
    }
    .public-data-services-group:last-child .public-data-services-group-title{
        grid-column:1 / -1;
    }
}

/* =========================================================

   HERO

========================================================= */



.public-data-hero{

    position:relative;

    min-height:690px;

    display:flex;

    align-items:center;

    overflow:hidden;



    background:

        radial-gradient(

            circle at 80% 40%,

            rgba(41,186,34,.08),

            transparent 30%

        ),

        radial-gradient(

            circle at 66% 45%,

            rgba(20,93,220,.10),

            transparent 32%

        ),

        linear-gradient(

            135deg,

            #fff 0%,

            #F7FAFF 56%,

            #F0F8F3 100%

        );

}



.public-data-hero:before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    right:-180px;

    top:-210px;

    background:rgba(41,186,34,.06);

}



.public-data-hero-grid{

    display:grid;

    grid-template-columns:minmax(0,1fr) 520px;

    gap:40px;

    align-items:center;

    min-height:690px;

}



.public-data-hero-copy{

    position:relative;

    z-index:2;

    padding-block:70px;

}



.public-data-eyebrow,

.public-data-section-label,

.public-data-mini-label{

    display:inline-flex;

    align-items:center;

    color:var(--pd-primary);

    font-weight:900;

    letter-spacing:.08em;

    font-size:13px;

}



.public-data-eyebrow{

    padding:9px 16px;

    border-radius:999px;

    background:#EAF1FF;

    margin-bottom:22px;

}



.public-data-hero h1{

    font-size:clamp(52px,6vw,82px);

    line-height:.99;

    letter-spacing:-.065em;

    margin:0 0 22px;

    max-width:780px;

    color:var(--pd-ink);

}



.public-data-hero h1 span{

    display:block;

    color:var(--pd-primary);

}



.public-data-hero-copy>p{

    max-width:720px;

    margin:0;

    color:#51627D;

    font-size:20px;

    line-height:1.65;

}



.public-data-hero-benefits{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin:26px 0 32px;

    color:#20344F;

    font-weight:750;

}



.public-data-hero-benefits span{

    display:inline-flex;

    align-items:center;

    gap:7px;

}



.public-data-hero-benefits b{

    color:var(--pd-primary);

    font-size:18px;

}



.public-data-hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}





/* =========================================================

   PHONE MOCKUP

========================================================= */



.public-data-phone-stage{

    position:relative;

    min-height:650px;

    display:flex;

    align-items:center;

    justify-content:center;

    perspective:1600px;

}



.public-data-phone-orb{

    position:absolute;

    border-radius:50%;

    filter:blur(1px);

    pointer-events:none;

}



.public-data-phone-orb-one{

    width:360px;

    height:360px;

    right:0;

    top:20px;



    background:

        radial-gradient(

            circle,

            #DDEBFF 0%,

            rgba(221,235,255,.25) 62%,

            transparent 70%

        );

}



.public-data-phone-orb-two{

    width:260px;

    height:260px;

    left:15px;

    bottom:40px;



    background:

        radial-gradient(

            circle,

            #E8F9E8 0%,

            rgba(232,249,232,.20) 64%,

            transparent 72%

        );

}



.public-data-phone-shadow{

    position:absolute;

    width:310px;

    height:48px;

    bottom:55px;

    border-radius:50%;

    background:rgba(10,35,80,.20);

    filter:blur(28px);

    transform:rotate(-6deg);

}



.public-data-phone{

    position:relative;

    z-index:2;

    width:335px;

    height:665px;

    transform:rotate(4deg);

    filter:

        drop-shadow(

            0 34px 35px rgba(8,29,68,.28)

        );

    transition:transform .45s ease;

}



.public-data-phone:hover{

    transform:rotate(1deg) translateY(-7px);

}



.public-data-phone-frame{

    position:relative;

    width:100%;

    height:100%;

    padding:13px;

    border-radius:48px;



    background:

        linear-gradient(

            145deg,

            #1B2538,

            #050B17 55%,

            #253148

        );



    box-shadow:

        inset 1px 1px 2px rgba(255,255,255,.25),

        inset -2px -3px 6px rgba(0,0,0,.7);

}



.public-data-phone-speaker{

    position:absolute;

    z-index:5;

    top:17px;

    left:50%;

    width:92px;

    height:24px;

    transform:translateX(-50%);

    border-radius:20px;

    background:#070C15;



    box-shadow:

        inset 0 2px 4px rgba(255,255,255,.07);

}



.public-data-phone-camera{

    position:absolute;

    z-index:6;

    top:24px;

    left:calc(50% + 27px);

    width:8px;

    height:8px;

    border-radius:50%;

    background:#182A48;



    box-shadow:

        0 0 0 2px #0A101B;

}



.public-data-phone-screen{

    height:100%;

    overflow:hidden;

    border-radius:37px;



    background:

        linear-gradient(

            180deg,

            #F7FAFF,

            #EDF4FE

        );



    padding:26px 18px 14px;

    color:var(--pd-ink);



    display:flex;

    flex-direction:column;

}



.public-data-phone-statusbar{

    display:flex;

    justify-content:space-between;

    font-size:10px;

    font-weight:800;

    padding:0 5px 10px;

}



.public-data-phone-topbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin:2px 3px 18px;

}



.public-data-phone-brand-mini{

    display:flex;

    align-items:center;

    gap:7px;

    font-size:14px;

}



.public-data-mini-logo{

    color:#1564E8;

    letter-spacing:-3px;

    font-size:14px;

}



.public-data-phone-bell{

    width:30px;

    height:30px;

    border:1px solid #D9E3F2;

    border-radius:10px;

    display:grid;

    place-items:center;

    color:var(--pd-primary);

    font-size:15px;

    background:#fff;

}



.public-data-phone-greeting{

    display:flex;

    flex-direction:column;

    margin-bottom:13px;

}



.public-data-phone-greeting span{

    font-size:15px;

    font-weight:850;

}



.public-data-phone-greeting small{

    font-size:10px;

    color:#71809A;

}



.public-data-phone-balance-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:15px;



    border:1px solid #DCE5F2;

    border-radius:18px;



    background:rgba(255,255,255,.90);



    box-shadow:

        0 8px 20px rgba(26,62,111,.07);

}



.public-data-phone-balance-card small{

    display:block;

    color:#74839A;

    font-size:9px;

}



.public-data-phone-balance-card strong{

    display:block;

    font-size:24px;

    line-height:1.2;

    letter-spacing:-.04em;

}



.public-data-phone-balance-card span{

    font-size:8px;

    color:#63748F;

}



.public-data-phone-ring{

    width:50px;

    height:50px;

    border-radius:50%;

    display:grid;

    place-items:center;

    border:6px solid #DDE8F7;

    position:relative;

}



.public-data-phone-ring:after{

    content:"";

    position:absolute;

    inset:-6px;

    border-radius:50%;

    border:6px solid transparent;

    border-top-color:#29BA22;

    border-right-color:#29BA22;

    transform:rotate(18deg);

}



.public-data-phone-ring span{

    width:25px;

    height:25px;

    border-radius:50%;

    background:#29BA22;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:11px;

    font-weight:900;

}



.public-data-phone-network-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:7px;

    margin:14px 0;

}



.public-data-phone-network-grid button{

    border:1px solid #D9E2EF;

    background:#fff;

    border-radius:11px;

    padding:7px 2px 6px;

    cursor:pointer;

    color:#4A5B74;



    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;



    transition:.2s ease;

}



.public-data-phone-network-grid button b{

    width:28px;

    height:28px;

    border-radius:8px;

    display:grid;

    place-items:center;

    font-size:8px;

    color:#fff;

    background:#8A98AA;

}



.public-data-phone-network-grid button small{

    font-size:7px;

    font-weight:800;

}



.public-data-phone-network-grid button.is-active{

    border-color:#1B63DD;

    background:#EDF4FF;

    color:var(--pd-primary);



    box-shadow:

        0 5px 14px rgba(22,93,220,.10);

}



.public-data-phone-network-grid

button[data-phone-network="MTN"] b{

    background:#FFC800;

    color:#111;

}



.public-data-phone-network-grid

button[data-phone-network="AIRTEL"] b{

    background:#E60012;

}



.public-data-phone-network-grid

button[data-phone-network="GLO"] b{

    background:#08A957;

}



.public-data-phone-network-grid

button[data-phone-network="9MOBILE"] b{

    background:#075E36;

}



.public-data-phone-plan-card{

    padding:15px;

    border-radius:18px;

    background:#fff;

    border:1px solid #DCE5F2;



    box-shadow:

        0 10px 22px rgba(24,58,107,.06);

}



.public-data-phone-plan-label{

    font-size:8px;

    color:#647792;

    font-weight:900;

    letter-spacing:.08em;

}



.public-data-phone-plan-card>strong{

    display:block;

    font-size:29px;

    line-height:1.05;

    margin:4px 0;

}



.public-data-phone-price{

    font-size:20px;

    font-weight:950;

    color:var(--pd-primary);

    letter-spacing:-.03em;

}



.public-data-phone-plan-card>span{

    font-size:9px;

    color:#71809A;

}



.public-data-phone-quick-actions{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:7px;

    margin-top:10px;

}



.public-data-phone-quick-actions a{

    padding:9px 3px;

    border-radius:12px;

    border:1px solid #DCE5F2;

    background:#fff;



    display:flex;

    flex-direction:column;

    align-items:center;

    gap:3px;

}



.public-data-phone-quick-actions span{

    font-size:14px;

    color:#1263DE;

}



.public-data-phone-quick-actions small{

    font-size:7px;

    font-weight:800;

    color:#50617A;

}



.public-data-phone-ussd{

    margin-top:10px;

    padding:10px 11px;

    border-radius:14px;

    background:#EAF2FF;



    display:grid;

    grid-template-columns:27px 1fr 12px;

    align-items:center;

    gap:7px;

}



.public-data-phone-ussd-icon{

    width:27px;

    height:27px;

    border-radius:9px;

    background:#1263DE;

    color:#fff;

    display:grid;

    place-items:center;

    font-size:12px;

}



.public-data-phone-ussd b{

    display:block;

    font-size:10px;

    color:var(--pd-primary);

}



.public-data-phone-ussd small{

    display:block;

    font-size:7px;

    color:#71809A;

}



.public-data-phone-bottom-nav{

    margin-top:auto;

    padding-top:11px;

    border-top:1px solid #DFE6F0;



    display:grid;

    grid-template-columns:repeat(4,1fr);

    text-align:center;

}



.public-data-phone-bottom-nav span{

    font-size:13px;

    color:#71809A;



    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

}



.public-data-phone-bottom-nav span.is-active{

    color:var(--pd-primary);

}



.public-data-phone-bottom-nav small{

    font-size:6px;

    font-weight:800;

}





/* =========================================================

   SHARED SECTIONS

========================================================= */



.public-data-subscription,

.public-data-current,

.public-data-how-to,

.public-data-overview,

.public-data-balance{

    padding:95px 0;

}



.public-data-subscription{

    background:var(--pd-bg);

}



.public-data-current{

    background:#fff;

}



.public-data-how-to{

    background:var(--pd-bg);

}



.public-data-overview{

    background:#fff;

}



.public-data-balance{

    background:var(--pd-bg);

}



.public-data-section-heading{

    margin-bottom:30px;

}



.public-data-section-heading h2{

    font-size:clamp(32px,4vw,50px);

    line-height:1.08;

    letter-spacing:-.045em;

    margin:7px 0 10px;

    color:var(--pd-ink);

}



.public-data-section-heading p{

    margin:0;

    color:var(--pd-muted);

    font-size:17px;

    max-width:780px;

}



.public-data-heading-center{

    text-align:center;

}



.public-data-heading-center p{

    margin-inline:auto;

}





/* =========================================================

   DATA SUBSCRIPTION

========================================================= */



.public-data-subscription-card{

    display:grid;

    grid-template-columns:43% 57%;

    background:#fff;

    border:1px solid #DCE4F0;

    border-radius:30px;

    box-shadow:var(--pd-shadow);

    overflow:hidden;

}



.public-data-network-area{

    padding:42px;

    border-right:1px solid #E2E8F1;

}



.public-data-plan-area{

    padding:42px;

}



.public-data-step-heading{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-bottom:28px;

}



.public-data-step-number{

    flex:0 0 auto;

    width:50px;

    height:50px;

    border-radius:16px;

    background:#EAF1FF;

    color:var(--pd-primary);



    display:grid;

    place-items:center;



    font-weight:950;

    font-size:14px;

}



.public-data-step-heading h3{

    margin:2px 0 3px;

    font-size:23px;

    letter-spacing:-.03em;

}



.public-data-step-heading p{

    margin:0;

    color:var(--pd-muted);

    font-size:14px;

}



.public-data-network-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}



.public-data-network-card{

    position:relative;

    min-height:155px;



    border:1px solid #D8E1ED;

    background:#fff;

    border-radius:20px;



    padding:22px 15px;



    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:10px;



    cursor:pointer;

    color:#34445E;



    transition:.22s ease;

}



.public-data-network-card:hover{

    transform:translateY(-3px);

    border-color:#B5C9E8;



    box-shadow:

        0 12px 28px rgba(18,53,100,.08);

}



.public-data-network-card[aria-pressed="true"]{

    border-color:#2866D9;

    background:#F0F5FF;



    box-shadow:

        0 0 0 1px #2866D9,

        0 12px 30px rgba(28,92,207,.10);



    color:var(--pd-primary);

}



.public-data-network-logo{

    width:56px;

    height:56px;

    border-radius:15px;



    display:grid;

    place-items:center;



    font-size:15px;

    font-weight:950;

    letter-spacing:-.04em;



    box-shadow:

        inset 0 -4px 0 rgba(0,0,0,.08);

}



.public-data-mtn{

    background:#FFC800;

    color:#111;

}



.public-data-airtel{

    background:#E60012;

    color:#fff;

}



.public-data-glo{

    background:#08A957;

    color:#fff;

}



.public-data-9mobile{

    background:#075E36;

    color:#FFE500;

    font-size:26px;

}



.public-data-network-card strong{

    font-size:14px;

}



.public-data-network-check{

    position:absolute;

    right:12px;

    bottom:12px;



    width:24px;

    height:24px;



    border-radius:50%;



    display:grid;

    place-items:center;



    background:var(--pd-primary);

    color:#fff;



    font-size:13px;



    opacity:0;

    transform:scale(.7);



    transition:.2s;

}



.public-data-network-card[aria-pressed="true"]

.public-data-network-check{

    opacity:1;

    transform:scale(1);

}



.public-data-balance-strip{

    display:flex;

    align-items:center;

    gap:12px;



    margin-top:22px;

    padding:13px 15px;



    border:1px solid #D7E4F8;

    border-radius:16px;



    background:#EEF5FF;

}



.public-data-balance-icon{

    width:35px;

    height:35px;

    border-radius:11px;



    background:var(--pd-primary);

    color:#fff;



    display:grid;

    place-items:center;

}



.public-data-balance-strip strong{

    display:block;

    font-size:12px;

    color:var(--pd-primary);

}



.public-data-balance-strip small{

    display:block;

    color:#71809A;

    font-size:10px;

}



.public-data-field-label{

    display:block;

    font-size:13px;

    font-weight:850;

    margin:18px 0 8px;

    color:#33445F;

}



.public-data-select,

.public-data-input{

    width:100%;

    height:60px;



    border:1px solid #D7E0EC;

    border-radius:17px;



    background:#fff;

    color:#263852;



    padding:0 17px;

    outline:none;

}



.public-data-select:focus,

.public-data-input:focus{

    border-color:#4B78C7;



    box-shadow:

        0 0 0 4px rgba(39,101,210,.10);

}



.public-data-select:disabled{

    background:#F4F7FB;

    color:#A1AFC2;

}



.public-data-live-header{

    display:flex;

    justify-content:space-between;

    align-items:end;

    margin:22px 0 10px;

}



.public-data-live-header span:first-child{

    display:block;

    font-size:12px;

    color:var(--pd-primary);

    font-weight:950;

    letter-spacing:.08em;

}



.public-data-live-header strong{

    display:block;

    font-size:16px;

    margin-top:3px;

}



.public-data-live-header>span:last-child{

    font-size:12px;

    color:#71809A;

}



.public-data-live-plans{

    max-height:310px;

    overflow:auto;



    padding-right:5px;



    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:10px;

}



.public-data-live-plans::-webkit-scrollbar{

    width:7px;

}



.public-data-live-plans::-webkit-scrollbar-thumb{

    background:#C7D4E8;

    border-radius:10px;

}



.public-data-live-plan{

    border:1px solid #DCE4EF;

    border-radius:15px;

    background:#fff;



    padding:14px;



    cursor:pointer;

    text-align:left;



    transition:.18s;

}



.public-data-live-plan:hover,

.public-data-live-plan.is-selected{

    border-color:#2866D9;



    box-shadow:

        0 8px 20px rgba(27,91,197,.09);



    background:#F8FBFF;

}



.public-data-live-plan strong{

    display:block;

    font-size:14px;

}



.public-data-live-plan span{

    display:block;

    font-size:11px;

    color:#78869B;

    margin-top:3px;

}



.public-data-live-plan b{

    display:block;

    margin-top:7px;

    color:var(--pd-primary);

    font-size:14px;

}



.public-data-empty-plan{

    grid-column:1/-1;

    border:1px dashed #C8D4E5;

    border-radius:16px;

    padding:25px;

    text-align:center;

    color:#7A879A;

}



.public-data-empty-plan strong{

    display:block;

    color:#40516A;

}



.public-data-empty-plan span{

    font-size:13px;

}



.public-data-continue-btn{

    margin-top:17px;

    min-height:56px;

    border-radius:16px;



    background:var(--pd-primary);

    color:#fff;



    display:flex;

    align-items:center;

    justify-content:space-between;



    padding:0 20px;



    font-weight:900;



    box-shadow:

        0 12px 25px rgba(2,42,123,.18);

}



.public-data-continue-btn:hover{

    background:#0A4FD6;

}



.public-data-login-note{

    margin:9px 0 0;

    color:#7A879A;

    font-size:12px;

}



.public-data-login-note a{

    color:var(--pd-primary);

    font-weight:800;

}





/* =========================================================

   CURRENT DATA PLANS

========================================================= */



.public-data-catalogue{

    border:1px solid #DCE4EF;

    border-radius:28px;

    background:#fff;

    overflow:hidden;



    box-shadow:

        0 18px 50px rgba(14,40,83,.07);

}



.public-data-catalogue-tabs{

    display:grid;

    grid-template-columns:repeat(4,1fr);



    border-bottom:1px solid #E2E8F0;



    background:#F8FAFD;



    padding:10px;

    gap:8px;

}



.public-data-catalogue-tabs button{

    border:0;

    background:transparent;

    color:#6C7B91;



    border-radius:14px;

    padding:14px;



    font-weight:900;

    cursor:pointer;

}



.public-data-catalogue-tabs button.is-active{

    background:var(--pd-primary);

    color:#fff;



    box-shadow:

        0 9px 20px rgba(2,42,123,.17);

}



.public-data-catalogue-panels{

    padding:30px;

}



.public-data-catalogue-panel{

    display:none;

}



.public-data-catalogue-panel.is-active{

    display:block;

}



.public-data-type-block+.public-data-type-block{

    margin-top:34px;

    padding-top:30px;

    border-top:1px solid #E4EAF2;

}



.public-data-type-heading{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:15px;

}



.public-data-type-heading h3{

    margin:0;

    font-size:20px;

}



.public-data-type-heading span{

    font-size:12px;

    color:#71809A;

}



.public-data-plan-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:12px;

}



.public-data-plan-card{

    min-height:145px;



    border:1px solid #DFE6EF;

    border-radius:17px;



    padding:17px;



    background:#fff;



    display:flex;

    flex-direction:column;

    justify-content:space-between;



    transition:.18s ease;

}



.public-data-plan-card:hover{

    transform:translateY(-3px);

    border-color:#BFD0E9;



    box-shadow:

        0 10px 25px rgba(22,55,101,.07);

}



.public-data-plan-card strong{

    font-size:15px;

    line-height:1.3;

}



.public-data-plan-card span{

    display:block;

    font-size:11px;

    color:#75839A;

    margin-top:4px;

}



.public-data-plan-card>b{

    display:block;

    color:var(--pd-primary);

    font-size:18px;

    margin-top:12px;

}



.public-data-plan-card>a{

    display:inline-flex;

    align-items:center;

    gap:6px;



    color:var(--pd-primary);

    font-weight:900;

    font-size:11px;



    margin-top:10px;

}



.public-data-no-plans{

    padding:30px;

    text-align:center;

    color:#75839A;

    background:#F7F9FC;

    border-radius:16px;

}





/* =========================================================

   HOW TO BUY

========================================================= */



.public-data-steps{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:14px;

}



.public-data-steps article{

    background:#fff;

    border:1px solid #DCE4EF;

    border-radius:20px;



    padding:24px;

    min-height:220px;

}



.public-data-steps article>span{

    display:grid;

    place-items:center;



    width:44px;

    height:44px;



    border-radius:14px;



    background:#EAF1FF;

    color:var(--pd-primary);



    font-weight:950;

    font-size:13px;



    margin-bottom:24px;

}



.public-data-steps h3{

    font-size:17px;

    margin:0 0 9px;

}



.public-data-steps p{

    font-size:13px;

    color:#75839A;

    margin:0;

}



.public-data-centered-action{

    text-align:center;

    margin-top:30px;

}





/* =========================================================

   OVERVIEW

========================================================= */



.public-data-overview-card{

    display:grid;

    grid-template-columns:150px 1fr;

    gap:38px;

    align-items:start;



    border:1px solid #DCE4EF;

    border-radius:28px;



    padding:42px;



    background:#fff;



    box-shadow:

        0 16px 50px rgba(18,49,94,.06);

}



.public-data-overview-icon{

    width:110px;

    height:110px;

    border-radius:28px;



    background:

        linear-gradient(

            145deg,

            #0A4FD6,

            var(--pd-primary)

        );



    color:#fff;



    display:grid;

    place-items:center;



    font-weight:950;



    box-shadow:

        0 20px 30px rgba(2,42,123,.18);

}



.public-data-overview-card h2{

    font-size:38px;

    line-height:1.1;

    letter-spacing:-.04em;

    margin:8px 0 15px;

}



.public-data-overview-card p{

    color:#687991;

    margin:8px 0;

    max-width:900px;

}





/* =========================================================

   BALANCE

========================================================= */



.public-data-balance-card{

    background:#fff;

    border:1px solid #DCE4EF;

    border-radius:28px;



    padding:42px;



    box-shadow:

        0 18px 50px rgba(18,49,94,.06);

}



.public-data-balance-card h2{

    font-size:40px;

    line-height:1.1;

    letter-spacing:-.04em;

    margin:7px 0 10px;

}



.public-data-balance-card>div:first-child p{

    color:#687991;

    max-width:850px;

}



.public-data-balance-codes{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;



    margin:28px 0;

}



.public-data-balance-codes div{

    border:1px solid #DCE4EF;

    border-radius:17px;



    padding:18px;



    background:#F9FBFE;

}



.public-data-balance-codes span{

    display:block;

    font-weight:850;

    font-size:12px;

    color:#687991;

}



.public-data-balance-codes strong{

    display:block;

    color:var(--pd-primary);

    font-size:22px;

    margin-top:5px;

}



.public-data-balance-note{

    display:flex;

    gap:8px;



    padding:16px 18px;

    border-radius:16px;



    background:#EEF5FF;



    color:#51627D;

    font-size:13px;

}



.public-data-balance-note strong{

    color:var(--pd-primary);

}





/* =========================================================

   CTA

========================================================= */



.public-data-cta{

    padding:90px 0;

    background:var(--pd-primary);

}



.public-data-cta-card{

    text-align:center;

    color:#fff;

}



.public-data-cta-card .public-data-section-label{

    color:#CFE0FF;

}



.public-data-cta-card h2{

    font-size:clamp(35px,5vw,58px);

    letter-spacing:-.05em;

    line-height:1.05;

    margin:8px 0 12px;

}



.public-data-cta-card p{

    max-width:650px;

    margin:0 auto 25px;



    color:#C7D6EF;

    font-size:17px;

}



.public-data-cta-card>div{

    display:flex;

    justify-content:center;

    gap:12px;

}



.public-data-btn-white{

    background:#fff;

    color:var(--pd-primary);

}



.public-data-btn-ghost{

    border-color:rgba(255,255,255,.55);

    color:#fff;

    background:transparent;

}



.public-data-btn-ghost:hover{

    background:rgba(255,255,255,.10);

}





/* =========================================================

   FOOTER

========================================================= */



.public-data-footer{

    background:#07172F;

    color:#AEBBD0;

    padding:65px 0 22px;

}



.public-data-footer-main{

    display:grid;

    grid-template-columns:1.7fr repeat(4,1fr);

    gap:42px;



    padding-bottom:48px;

}



.public-data-footer-logo{

    color:#fff;

    font-size:20px;

}



.public-data-footer-logo img{

    width:34px;



}



.public-data-footer-brand p{

    max-width:330px;

    margin:12px 0 0;



    color:#9DACC2;

    font-size:13px;

}



.public-data-footer-column h3{

    color:#fff;

    font-size:14px;

    margin:0 0 15px;

}



.public-data-footer-column a{

    display:block;

    font-size:13px;

    margin:11px 0;

    color:#AEBBD0;

}



.public-data-footer-column a:hover{

    color:#fff;

}



.public-data-footer-bottom{

    border-top:1px solid rgba(255,255,255,.10);



    padding-top:20px;



    display:flex;

    align-items:center;

    justify-content:space-between;



    gap:15px;



    font-size:12px;

}



.public-data-footer-bottom p{

    margin:0;

}



.public-data-footer-bottom span{

    color:#8494AD;

}





/* =========================================================

   BACK TO TOP

========================================================= */



.public-data-back-top{

    position:fixed;



    right:22px;

    bottom:22px;



    width:52px;

    height:52px;



    border:0;

    border-radius:50%;



    background:var(--pd-primary);

    color:#fff;



    box-shadow:

        0 14px 30px rgba(2,42,123,.30);



    font-size:24px;



    display:grid;

    place-items:center;



    cursor:pointer;



    z-index:1100;



    opacity:0;

    visibility:hidden;



    transform:translateY(12px);



    transition:.25s ease;

}



.public-data-back-top.is-visible{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.public-data-back-top:hover{

    background:#0A4FD6;

}



.public-data-back-top span{

    position:absolute;



    right:0;

    bottom:-29px;



    background:#0B1830;

    color:#fff;



    padding:4px 8px;



    border-radius:6px;



    font-size:9px;



    white-space:nowrap;



    opacity:0;

    pointer-events:none;



    transition:.2s;

}



.public-data-back-top:hover span{

    opacity:1;

}





/* =========================================================

   DARK MODE

========================================================= */



html[data-theme="dark"]

body.public-data-page{

    background:#071225;

    color:#F2F6FD;

}



html[data-theme="dark"]

.public-data-header{

    background:rgba(7,18,37,.94);

    border-color:#1C2B43;

}



html[data-theme="dark"]

.public-data-brand,

html[data-theme="dark"]

.public-data-nav-links a{

    color:#F4F7FD;

}



html[data-theme="dark"]

.public-data-theme-toggle,

html[data-theme="dark"]

.public-data-menu-toggle,

html[data-theme="dark"]

.public-data-btn-outline{

    background:#0D1D35;

    color:#F4F7FD;

    border-color:#2A3C59;

}



html[data-theme="dark"]

.public-data-hero{

    background:

        radial-gradient(

            circle at 75% 35%,

            rgba(41,186,34,.08),

            transparent 30%

        ),

        linear-gradient(

            135deg,

            #071225,

            #0A1B32

        );

}



html[data-theme="dark"]

.public-data-hero h1,

html[data-theme="dark"]

.public-data-section-heading h2,

html[data-theme="dark"]

.public-data-step-heading h3,

html[data-theme="dark"]

.public-data-overview-card h2,

html[data-theme="dark"]

.public-data-balance-card h2{

    color:#F4F7FD;

}



html[data-theme="dark"]

.public-data-hero-copy>p,

html[data-theme="dark"]

.public-data-section-heading p,

html[data-theme="dark"]

.public-data-step-heading p,

html[data-theme="dark"]

.public-data-overview-card p,

html[data-theme="dark"]

.public-data-balance-card>div:first-child p{

    color:#AAB8CC;

}



html[data-theme="dark"]

.public-data-subscription,

html[data-theme="dark"]

.public-data-how-to,

html[data-theme="dark"]

.public-data-balance{

    background:#09182D;

}



html[data-theme="dark"]

.public-data-current,

html[data-theme="dark"]

.public-data-overview{

    background:#071225;

}



html[data-theme="dark"]

.public-data-subscription-card,

html[data-theme="dark"]

.public-data-catalogue,

html[data-theme="dark"]

.public-data-overview-card,

html[data-theme="dark"]

.public-data-balance-card,

html[data-theme="dark"]

.public-data-steps article,

html[data-theme="dark"]

.public-data-plan-card,

html[data-theme="dark"]

.public-data-network-card,

html[data-theme="dark"]

.public-data-live-plan,

html[data-theme="dark"]

.public-data-phone-plan-card,

html[data-theme="dark"]

.public-data-phone-balance-card{

    background:#0D1D35;

    border-color:#233650;

    color:#F0F5FC;

}



html[data-theme="dark"]

.public-data-network-area{

    border-color:#233650;

}



html[data-theme="dark"]

.public-data-catalogue-tabs{

    background:#0A192D;

    border-color:#233650;

}



html[data-theme="dark"]

.public-data-catalogue-tabs button{

    color:#9EADC2;

}



html[data-theme="dark"]

.public-data-field-label,

html[data-theme="dark"]

.public-data-type-heading h3{

    color:#EAF0F9;

}



html[data-theme="dark"]

.public-data-select,

html[data-theme="dark"]

.public-data-input{

    background:#09182D;

    color:#EAF0F9;

    border-color:#2A3C59;

}



html[data-theme="dark"]

.public-data-balance-strip,

html[data-theme="dark"]

.public-data-balance-note{

    background:#0D274B;

    border-color:#24456E;

}



html[data-theme="dark"]

.public-data-balance-codes div{

    background:#0D1D35;

    border-color:#233650;

}



html[data-theme="dark"]

.public-data-phone-screen{

    background:

        linear-gradient(

            180deg,

            #101F34,

            #0A1728

        );

    color:#F4F7FD;

}





/* =========================================================

   RESPONSIVE

========================================================= */



@media(max-width:1100px){



    .public-data-hero-grid{

        grid-template-columns:minmax(0,1fr) 430px;

    }



    .public-data-phone{

        width:300px;

        height:595px;

    }



    .public-data-phone-stage{

        min-height:620px;

    }



    .public-data-plan-grid{

        grid-template-columns:repeat(3,1fr);

    }



    .public-data-footer-main{

        grid-template-columns:1.5fr repeat(2,1fr);

    }



    .public-data-steps{

        grid-template-columns:repeat(3,1fr);

    }



}





@media(max-width:850px){



    .public-data-nav{

        height:74px;

    }



    .public-data-nav-links,

    .public-data-nav-actions>.public-data-btn{

        display:none;

    }



    .public-data-nav-actions{

        margin-left:auto;

    }



    .public-data-menu-toggle{

        display:grid;

    }



    .public-data-mobile-menu{

        display:none;

        background:#fff;

        border-top:1px solid var(--pd-line);

        padding:18px 24px 24px;

    }



    .public-data-mobile-menu.is-open{

        display:block;

    }



    .public-data-mobile-menu>a{

        display:block;

        padding:13px 0;

        font-weight:750;

        color:#34445E;

    }



    .public-data-mobile-actions{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:10px;

        margin-top:8px;

    }



    .public-data-hero{

        min-height:auto;

    }



    .public-data-hero-grid{

        grid-template-columns:1fr;

        min-height:auto;

    }



    .public-data-hero-copy{

        padding:75px 0 30px;

    }



    .public-data-hero h1{

        font-size:clamp(48px,11vw,70px);

    }



    .public-data-phone-stage{

        min-height:640px;

    }



    .public-data-phone{

        width:315px;

        height:625px;

        transform:rotate(2deg);

    }



    .public-data-subscription-card{

        grid-template-columns:1fr;

    }



    .public-data-network-area{

        border-right:0;

        border-bottom:1px solid #E2E8F1;

    }



    .public-data-plan-area,

    .public-data-network-area{

        padding:30px;

    }



    .public-data-plan-grid{

        grid-template-columns:repeat(2,1fr);

    }



    .public-data-footer-main{

        grid-template-columns:1.5fr 1fr 1fr;

    }



    .public-data-balance-codes{

        grid-template-columns:repeat(2,1fr);

    }



}





@media(max-width:600px){



    .public-data-container{

        width:min(100% - 28px,1320px);

    }



    .public-data-nav{

        width:calc(100% - 28px);

    }



    .public-data-brand span{

        font-size:19px;

    }



    .public-data-theme-toggle,

    .public-data-menu-toggle{

        width:44px;

        height:44px;

    }



    .public-data-hero-copy{

        padding-top:55px;

    }



    .public-data-hero-copy>p{

        font-size:16px;

    }



    .public-data-hero-benefits{

        display:grid;

        gap:10px;

        font-size:14px;

    }



    .public-data-hero-actions{

        display:grid;

        grid-template-columns:1fr;

    }



    .public-data-hero-actions .public-data-btn{

        width:100%;

    }



    .public-data-phone-stage{

        min-height:600px;

    }



    .public-data-phone{

        width:285px;

        height:565px;

    }



    .public-data-subscription,

    .public-data-current,

    .public-data-how-to,

    .public-data-overview,

    .public-data-balance{

        padding:65px 0;

    }



    .public-data-section-heading h2{

        font-size:34px;

    }



    .public-data-section-heading p{

        font-size:15px;

    }



    .public-data-network-area,

    .public-data-plan-area{

        padding:22px;

    }



    .public-data-network-grid{

        gap:9px;

    }



    .public-data-network-card{

        min-height:132px;

        padding:14px 8px;

    }



    .public-data-network-logo{

        width:50px;

        height:50px;

    }



    .public-data-live-plans{

        grid-template-columns:1fr;

        max-height:330px;

    }



    .public-data-catalogue-tabs{

        grid-template-columns:repeat(2,1fr);

    }



    .public-data-catalogue-panels{

        padding:18px;

    }



    .public-data-plan-grid{

        grid-template-columns:1fr;

    }



    .public-data-steps{

        grid-template-columns:1fr;

    }



    .public-data-steps article{

        min-height:auto;

    }



    .public-data-overview-card{

        grid-template-columns:1fr;

        padding:25px;

        gap:22px;

    }



    .public-data-overview-icon{

        width:82px;

        height:82px;

        border-radius:22px;

    }



    .public-data-overview-card h2,

    .public-data-balance-card h2{

        font-size:31px;

    }



    .public-data-balance-card{

        padding:25px;

    }



    .public-data-balance-codes{

        grid-template-columns:1fr 1fr;

    }



    .public-data-balance-note{

        display:block;

    }



    .public-data-balance-note span{

        display:block;

        margin-top:4px;

    }



    .public-data-cta{

        padding:70px 0;

    }



    .public-data-cta-card>div{

        display:grid;

        grid-template-columns:1fr;

    }



    .public-data-footer{

        padding-top:48px;

    }



    .public-data-footer-main{

        grid-template-columns:1fr 1fr;

        gap:30px;

    }



    .public-data-footer-brand{

        grid-column:1/-1;

    }



    .public-data-footer-bottom{

        flex-direction:column;

        align-items:flex-start;

    }



    .public-data-back-top{

        right:14px;

        bottom:14px;

        width:48px;

        height:48px;

    }



}





@media(max-width:380px){



    .public-data-phone{

        width:270px;

        height:540px;

    }



    .public-data-phone-stage{

        min-height:570px;

    }



    .public-data-phone-screen{

        padding-inline:14px;

    }



    .public-data-network-grid{

        grid-template-columns:1fr 1fr;

    }



    .public-data-balance-codes{

        grid-template-columns:1fr;

    }



    .public-data-footer-main{

        grid-template-columns:1fr;

    }



}



/* =========================================================

   DATA PURCHASE CONTINUE BUTTON

   ========================================================= */



body.public-data-page a.public-data-continue-btn {

    background: #022A7B;

    color: #FFFFFF;

    border: 1px solid #022A7B;

    text-decoration: none;

}



body.public-data-page a.public-data-continue-btn:hover {

    background: #063A9F;

    color: #FFFFFF;

    border-color: #063A9F;

}



.data-breadcrumb {

    max-width: 1200px;

    margin: 0 auto;

    padding: 18px 24px 0;

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px;

}



.data-breadcrumb a {

    text-decoration: none;

}



.data-breadcrumb span:last-child {

    font-weight: 600;

}



/* =========================================================

   DATA PAGE FAQ

========================================================= */



.public-data-faq {

    padding: 100px 0;

    background: var(--public-data-section-bg, #f7f9fc);

}



.public-data-faq-list {

    width: min(900px, 100%);

    margin: 42px auto 0;

    display: grid;

    gap: 16px;

}



.public-data-faq-list article {

    background: #ffffff;

    border: 1px solid rgba(2, 42, 123, 0.09);

    border-radius: 18px;

    padding: 24px 28px;

    box-shadow: 0 8px 30px rgba(15, 35, 75, 0.05);

    transition:

        transform 0.25s ease,

        box-shadow 0.25s ease,

        border-color 0.25s ease;

}



.public-data-faq-list article:hover {

    transform: translateY(-2px);

    border-color: rgba(2, 42, 123, 0.16);

    box-shadow: 0 14px 35px rgba(15, 35, 75, 0.08);

}



.public-data-faq-list h3 {

    margin: 0;

    color: #022A7B;

    font-size: 18px;

    line-height: 1.45;

    font-weight: 700;

}



.public-data-faq-list p {

    margin: 10px 0 0;

    color: #5f6b7a;

    font-size: 15px;

    line-height: 1.75;

}



/* Dark mode */

html[data-theme="dark"] .public-data-faq {

    background: #0b1220;

}



html[data-theme="dark"] .public-data-faq-list article {

    background: #111b2e;

    border-color: rgba(255, 255, 255, 0.08);

    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);

}



html[data-theme="dark"] .public-data-faq-list article:hover {

    border-color: rgba(255, 255, 255, 0.14);

}



html[data-theme="dark"] .public-data-faq-list h3 {

    color: #ffffff;

}



html[data-theme="dark"] .public-data-faq-list p {

    color: #aeb8c7;

}



/* Tablet */

@media (max-width: 768px) {



    .public-data-faq {

        padding: 75px 0;

    }



    .public-data-faq-list {

        margin-top: 32px;

        gap: 14px;

    }



    .public-data-faq-list article {

        padding: 21px 22px;

        border-radius: 16px;

    }



    .public-data-faq-list h3 {

        font-size: 17px;

    }



    .public-data-faq-list p {

        font-size: 14px;

        line-height: 1.7;

    }

}



/* Mobile */

@media (max-width: 480px) {



    .public-data-faq {

        padding: 60px 0;

    }



    .public-data-faq-list {

        margin-top: 26px;

        gap: 12px;

    }



    .public-data-faq-list article {

        padding: 18px 18px;

        border-radius: 14px;

    }



    .public-data-faq-list h3 {

        font-size: 16px;

        line-height: 1.5;

    }



    .public-data-faq-list p {

        margin-top: 8px;

        font-size: 14px;

        line-height: 1.65;

    }

}



/* =========================================================

   DATA BREADCRUMB

   Floats visually inside the hero without affecting layout

   ========================================================= */



.data-hero {

    position: relative;

}



.data-breadcrumb {

    position: absolute;

    top: 20px;

    left: 50%;

    transform: translateX(-50%);



    width: min(1200px, calc(100% - 48px));



    display: flex;

    align-items: center;

    gap: 9px;



    margin: 0;

    padding: 0;



    font-size: 14px;

    line-height: 1.4;



    z-index: 10;

}



.data-breadcrumb a {

    color: #6b778c;

    text-decoration: none;

    font-weight: 500;



    transition:

        color 0.2s ease,

        opacity 0.2s ease;

}



.data-breadcrumb a:hover {

    color: #022A7B;

}



.data-breadcrumb span[aria-hidden="true"] {

    color: #a7b0bd;

    font-weight: 400;

}



.data-breadcrumb span:last-child {

    color: #022A7B;

    font-weight: 700;

}





/* =========================================================

   DARK MODE

   ========================================================= */



html[data-theme="dark"] .data-breadcrumb a {

    color: #aeb8c7;

}



html[data-theme="dark"] .data-breadcrumb a:hover {

    color: #ffffff;

}



html[data-theme="dark"] .data-breadcrumb span[aria-hidden="true"] {

    color: #667085;

}



html[data-theme="dark"] .data-breadcrumb span:last-child {

    color: #ffffff;

}





/* =========================================================

   TABLET

   ========================================================= */



@media (max-width: 768px) {



    .data-breadcrumb {

        top: 16px;

        width: min(100% - 32px, 1200px);

        font-size: 13px;

    }



}





/* =========================================================

   MOBILE

   ========================================================= */



@media (max-width: 480px) {



    .data-breadcrumb {

        top: 13px;

        width: calc(100% - 28px);

        font-size: 12px;

        gap: 7px;

    }



}

/* =========================================================
   SERVICES DROPDOWN — MOBILE
========================================================= */

@media (max-width: 850px){
    .public-data-mobile-services{
        display:block;
    }

    .public-data-mobile-services-trigger{
        width:100%;
        min-height:50px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        padding:0 2px;
        border:0;
        background:transparent;
        color:inherit;
        font:inherit;
        font-weight:800;
        cursor:pointer;
    }

    .public-data-mobile-chevron{
        color:var(--pd-primary);
        font-size:18px;
        transition:transform .2s ease;
    }

    .public-data-mobile-services.is-open .public-data-mobile-chevron{
        transform:rotate(180deg);
    }

    .public-data-mobile-services-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:8px;
        max-height:0;
        overflow:hidden;
        opacity:0;
        transition:max-height .3s ease,opacity .2s ease,padding .3s ease;
    }

    .public-data-mobile-services.is-open .public-data-mobile-services-list{
        max-height:700px;
        opacity:1;
        padding:5px 0 10px;
    }

    .public-data-mobile-services-list a{
        min-height:48px;
        display:flex;
        align-items:center;
        gap:8px;
        padding:8px 10px;
        border:1px solid var(--pd-line);
        border-radius:12px;
        background:var(--pd-white);
        color:var(--pd-ink);
        font-size:11px;
    }

    .public-data-mobile-services-list a > span{
        width:25px;
        height:25px;
        flex:none;
        display:grid;
        place-items:center;
        border-radius:8px;
        background:var(--pd-soft);
        color:var(--pd-primary);
        font-size:12px;
    }

    html[data-theme="dark"] .public-data-mobile-services-list a{
        background:#0D1D35;
        border-color:#233650;
        color:#F0F5FC;
    }

    html[data-theme="dark"] .public-data-mobile-services-list a > span{
        background:#102A4D;
        color:#76A9FF;
    }
}

@media (max-width: 420px){
    .public-data-mobile-services-list{
        grid-template-columns:1fr;
    }
}