.up-page {
    background: radial-gradient(ellipse at 90% 3%, #ffcc9170, transparent 25%), linear-gradient(150deg, #fff7ee 0, #fff 34%, #fff 90%, #ffe7ce)
}

.up-page .ugx-wrap {
    width: min(1240px, 94%)
}

.up-page .ugx-header {
    padding-top: 6px
}

.up-page .ugx-brand {
    width: 175px
}

.up-page .ugx-brand img {
    width: 143px;
    height: 90px
}

.up-page .ugx-nav a {
    font-size: 11px
}
/* =========================================================
   UGX PROFESSIONAL COLORFUL PLANS
   Desktop + Tablet + Mobile
========================================================= */

:root{
    --orange:#ff8a00;
    --yellow:#ffc928;
    --green:#17b26a;
    --navy:#111b35;
    --blue:#2962ff;
    --purple:#7c3aed;
    --red:#ef4444;
    --text:#172033;
    --muted:#68758a;
    --white:#ffffff;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    overflow-x:hidden;
}

.up-page{
    min-height:100vh;
    overflow:hidden;
    color:var(--text);
    background:
        radial-gradient(circle at 8% 8%,rgba(255,201,40,.20),transparent 25%),
        radial-gradient(circle at 94% 18%,rgba(23,178,106,.13),transparent 25%),
        linear-gradient(180deg,#fffaf1 0%,#f8fbff 45%,#fff 100%);
}

.up-wrap{
    width:min(1180px,calc(100% - 36px));
    margin-inline:auto;
}

/* ================= HEADER ================= */

.ugx-header{
    min-height:82px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px;
}

.ugx-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.ugx-brand img{
    width:52px;
    height:52px;
    flex:0 0 52px;
    object-fit:contain;
    padding:5px;
    background:#fff;
    border:2px solid #ffd05b;
    border-radius:15px;
    box-shadow:0 8px 22px rgba(255,138,0,.18);
}

.ugx-brand span{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.ugx-brand strong{
    max-width:250px;
    overflow:hidden;
    color:var(--navy);
    font-size:18px;
    line-height:1.2;
    font-weight:900;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ugx-brand small{
    margin-top:3px;
    color:#9a6b00;
    font-size:8px;
    font-weight:800;
    letter-spacing:.8px;
}

.ugx-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.ugx-nav a{
    padding:9px 12px;
    border-radius:9px;
    color:#4d596d;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    transition:.2s;
}

.ugx-nav a:hover,
.ugx-nav .is-current{
    color:#bd6900;
    background:#fff0cf;
}

.ugx-header-actions a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:43px;
    padding:0 20px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#152033;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 8px 20px rgba(255,138,0,.20);
}

/* ================= HERO ================= */

.up-hero{
    position:relative;
    min-height:420px;
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:40px;
    margin-top:15px;
    padding:50px;
    overflow:hidden;
    border:1px solid rgba(255,190,60,.35);
    border-radius:32px;
    background:
        radial-gradient(circle at 90% 20%,rgba(255,208,71,.36),transparent 35%),
        radial-gradient(circle at 12% 80%,rgba(23,178,106,.15),transparent 35%),
        linear-gradient(135deg,#fff6db,#fff,#effff7);
    box-shadow:0 20px 60px rgba(32,44,70,.09);
}

.up-hero::before{
    content:"";
    position:absolute;
    width:190px;
    height:190px;
    top:-100px;
    left:-80px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    opacity:.12;
}

.up-hero > div{
    position:relative;
    z-index:2;
}

.up-hero h1{
    margin:0;
    color:var(--navy);
    font-size:clamp(40px,5vw,67px);
    line-height:.98;
    font-weight:950;
    letter-spacing:-2.5px;
}

.up-hero h1 span{
    display:inline-block;
    margin-top:8px;
    background:linear-gradient(90deg,#f07800,#ffb600,#0eaa63);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.up-hero p{
    max-width:530px;
    margin:23px 0;
    color:#627087;
    font-size:16px;
    line-height:1.7;
}

.up-hero p strong{
    color:#dc7b00;
}

.up-hero > img{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    max-width:520px;
    height:auto;
    margin-left:auto;
    object-fit:contain;
    filter:drop-shadow(0 22px 25px rgba(32,44,70,.14));
}

.up-hero-benefits{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.up-hero-benefits div{
    display:flex;
    align-items:center;
    gap:7px;
    padding:10px 13px;
    border:1px solid #e7eaf0;
    border-radius:12px;
    background:rgba(255,255,255,.85);
    color:#344054;
    font-size:11px;
    font-weight:800;
    box-shadow:0 6px 15px rgba(16,24,40,.04);
}

/* ================= SECTION ================= */

.up-plans{
    padding-top:75px;
    padding-bottom:65px;
}

.ugx-section-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:25px;
    margin-bottom:28px;
}

.ugx-section-heading h2{
    margin:0 0 7px;
    color:var(--navy);
    font-size:34px;
    line-height:1.1;
    font-weight:950;
    letter-spacing:-1.2px;
}

.ugx-section-heading h2 span{
    background:linear-gradient(90deg,var(--orange),#f5b800,var(--green));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.ugx-section-heading p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}

.up-calculator-link{
    flex:0 0 auto;
    padding:13px 18px;
    border-radius:12px;
    background:var(--navy);
    color:#fff !important;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
}

/* ================= PLAN GRID ================= */

.ugx-plan-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}

/* ================= COLORFUL PLAN CARD ================= */

.ugx-plan-card{
    --card1:#ff8a00;
    --card2:#ffc928;

    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:420px;
    overflow:hidden;
    border:0 !important;
    border-radius:24px !important;
    color:#fff !important;
    background:
        radial-gradient(circle at 90% 5%,rgba(255,255,255,.24),transparent 28%),
        linear-gradient(145deg,var(--card1),var(--card2)) !important;
    box-shadow:0 18px 40px rgba(27,39,65,.15);
    transition:transform .25s ease,box-shadow .25s ease;
}

.ugx-plan-card:hover{
    transform:translateY(-7px);
    box-shadow:0 25px 55px rgba(27,39,65,.22);
}

/* Different colors automatically */

.up-tier-0{
    --card1:#ff7a00;
    --card2:#ffba08;
}

.up-tier-1{
    --card1:#10a663;
    --card2:#45d483;
}

.up-tier-2{
    --card1:#2457e6;
    --card2:#45a3ff;
}

.up-tier-3{
    --card1:#6c35d9;
    --card2:#a855f7;
}

.up-tier-4{
    --card1:#e83d60;
    --card2:#ff778f;
}

.up-tier-5{
    --card1:#057f88;
    --card2:#20c6b7;
}

.up-tier-6{
    --card1:#303b59;
    --card2:#596986;
}

.ugx-plan-card::after{
    content:"";
    position:absolute;
    right:-50px;
    top:-60px;
    width:170px;
    height:170px;
    border:25px solid rgba(255,255,255,.08);
    border-radius:50%;
}

.up-plan-badge{
    position:absolute;
    right:30px;
    bottom:90px;
    width:90px;
    height:90px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
}

.up-featured{
    position:absolute;
    z-index:3;
    top:18px;
    right:18px;
    padding:7px 10px;
    border:1px solid rgba(255,255,255,.30);
    border-radius:999px;
    background:rgba(255,255,255,.18) !important;
    backdrop-filter:blur(10px);
    color:#fff !important;
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.ugx-plan-card > h3{
    position:relative;
    z-index:2;
    margin:0 !important;
    padding:31px 24px 12px !important;
    padding-right:100px !important;
    color:#fff !important;
    font-size:20px !important;
    font-weight:900 !important;
}

.ugx-plan-body{
    position:relative;
    z-index:2;
    display:flex;
    flex:1;
    flex-direction:column;
    padding:0 24px 24px !important;
    color:#fff !important;
}

.ugx-plan-amount{
    margin:15px 0 2px !important;
    overflow-wrap:anywhere;
    color:#fff !important;
    font-size:31px !important;
    line-height:1.15;
    font-weight:950 !important;
    letter-spacing:-1px;
}

.up-investment-label{
    margin:0 0 20px !important;
    color:rgba(255,255,255,.80) !important;
    font-size:10px !important;
    font-weight:800 !important;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

/* PLAN DETAILS */

.ugx-plan-body dl{
    margin:0 0 22px;
    padding:7px 14px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:16px;
    background:rgba(0,0,0,.09);
    backdrop-filter:blur(5px);
}

.ugx-plan-body dl > div{
    display:flex !important;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:10px 0 !important;
    border-bottom:1px solid rgba(255,255,255,.13) !important;
}

.ugx-plan-body dl > div:last-child{
    border-bottom:0 !important;
}

.ugx-plan-body dt{
    color:rgba(255,255,255,.75) !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.ugx-plan-body dd{
    max-width:58%;
    margin:0 !important;
    overflow-wrap:anywhere;
    color:#fff !important;
    font-size:12px !important;
    font-weight:900 !important;
    text-align:right;
}

.up-referral-levels{
    display:flex !important;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
}

.up-referral-level,
.up-referral-level strong{
    color:#fff !important;
}

/* INVEST BUTTON */

.ugx-plan-body > .ugx-btn{
    width:100%;
    min-height:50px;
    margin-top:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,.40) !important;
    border-radius:14px !important;
    background:#fff !important;
    color:#172033 !important;
    font-size:13px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 9px 20px rgba(0,0,0,.12);
    transition:.2s;
}

.ugx-plan-body > .ugx-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 25px rgba(0,0,0,.18);
}

/* ================= INVEST MODAL ================= */

.pso-sheet{
    position:fixed;
    inset:0;
    z-index:999999;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    padding:18px;
    background:rgba(9,16,32,.68);
    backdrop-filter:blur(7px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s;
}

.pso-sheet.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.pso-sheet__box{
    width:100%;
    max-width:540px;
    max-height:90vh;
    overflow:auto;
    border-radius:25px;
    background:#fff;
    color:#172033;
    box-shadow:0 30px 90px rgba(0,0,0,.30);
    transform:translateY(30px);
    transition:.25s;
}

.pso-sheet.show .pso-sheet__box{
    transform:translateY(0);
}

.pso-sheet__head{
    position:sticky;
    top:0;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    padding:19px 21px;
    border-bottom:1px solid #edf0f4;
    background:
        linear-gradient(90deg,#fff7df,#effff6);
}

.pso-sheet__head strong{
    color:#15203a;
    font-size:18px;
    font-weight:950;
}

.pso-sheet__close{
    width:38px;
    height:38px;
    flex:0 0 38px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:50%;
    background:#172033;
    color:#fff;
    cursor:pointer;
}

.pso-sheet form{
    padding:22px;
}

.pso-sheet form > label{
    display:block;
    margin-bottom:8px;
    color:#344054;
    font-size:12px;
    font-weight:900;
}

.pso-sheet input[type="number"]{
    width:100%;
    height:51px;
    margin-bottom:20px;
    padding:0 15px;
    outline:none;
    border:1.5px solid #dce2e9;
    border-radius:13px;
    background:#f8fafc;
    color:#172033;
    font-size:15px;
    font-weight:800;
}

.pso-sheet input[type="number"]:focus{
    border-color:#ffae00;
    background:#fff;
    box-shadow:0 0 0 4px rgba(255,174,0,.12);
}

/* ================= GATEWAYS ================= */

.pso-gateway-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px;
    margin:5px 0 22px;
}

.pso-gateway{
    position:relative;
    display:block !important;
    min-width:0;
    margin:0 !important;
    cursor:pointer;
}

.pso-gateway input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.pso-gateway > span{
    min-height:76px;
    display:flex !important;
    align-items:center;
    gap:10px;
    padding:11px;
    overflow:hidden;
    border:2px solid #e6eaf0;
    border-radius:15px;
    background:linear-gradient(135deg,#fff,#f7f9fc);
    color:#344054 !important;
    font-size:11px;
    font-weight:900;
    transition:.2s;
}

.pso-gateway img{
    width:46px !important;
    height:46px !important;
    flex:0 0 46px;
    padding:4px;
    object-fit:contain;
    border-radius:11px;
    background:#fff;
    box-shadow:0 4px 12px rgba(0,0,0,.07);
}

.pso-gateway i{
    width:46px;
    height:46px;
    flex:0 0 46px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:linear-gradient(135deg,#ffebae,#ffd14c);
    color:#a85e00;
    font-size:18px;
}

.pso-gateway input:checked + span{
    border-color:#ffac00;
    background:linear-gradient(135deg,#fff8df,#effff5);
    color:#152033 !important;
    box-shadow:0 7px 20px rgba(255,160,0,.13);
}

.pso-gateway input:checked + span::after{
    content:"✓";
    width:21px;
    height:21px;
    flex:0 0 21px;
    display:grid;
    place-items:center;
    margin-left:auto;
    border-radius:50%;
    background:#16ad67;
    color:#fff;
    font-size:11px;
    font-weight:900;
}

.pso-submit{
    width:100%;
    min-height:52px;
    border:0;
    border-radius:14px;
    background:linear-gradient(90deg,#ff8500,#ffc522,#1db56d);
    color:#fff;
    font-size:13px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(255,143,0,.20);
}

/* ================= CALCULATOR ================= */

.up-calculator{
    margin-bottom:60px;
    overflow:hidden;
    border:1px solid #e5eaf0;
    border-radius:22px;
    background:
        radial-gradient(circle at 95% 0,rgba(23,178,106,.14),transparent 35%),
        linear-gradient(135deg,#fff6dc,#fff);
    box-shadow:0 15px 40px rgba(27,39,65,.08);
}

.up-calculator summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:22px 25px;
    color:var(--navy);
    font-size:17px;
    font-weight:950;
    cursor:pointer;
}

.up-calculator-body{
    padding:0 25px 25px;
    color:#667085;
}

.up-calculator-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
}

.up-calculator label{
    color:#344054;
    font-size:11px;
    font-weight:800;
}

.up-calculator select,
.up-calculator input{
    width:100%;
    min-height:48px;
    margin-top:7px;
    padding:0 13px;
    outline:none;
    border:1px solid #dce1e8;
    border-radius:12px;
    background:#fff;
    color:#172033;
}

.up-calc-results{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:17px;
}

.up-calc-results > div{
    padding:15px;
    border:1px solid #e6eaf0;
    border-radius:13px;
    background:#fff;
}

.up-calc-results small{
    display:block;
    margin-bottom:5px;
    color:#778196;
}

.up-calc-results strong{
    color:#172033;
}

/* ================= CTA ================= */

.up-cta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px;
    margin-bottom:55px;
    padding:32px 38px;
    overflow:hidden;
    border-radius:25px;
    background:
        radial-gradient(circle at 90% 20%,rgba(255,201,40,.35),transparent 30%),
        linear-gradient(135deg,#13213d,#1d3159);
    box-shadow:0 18px 45px rgba(17,27,53,.20);
}

.up-cta h2{
    margin:0 0 7px;
    color:#fff;
    font-size:27px;
    font-weight:950;
}

.up-cta p{
    margin:0;
    color:#cdd6e6;
    font-size:13px;
}

.up-cta .ugx-btn{
    flex:0 0 auto;
    padding:13px 20px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--orange),var(--yellow));
    color:#172033;
    font-weight:900;
    text-decoration:none;
}

/* ================= FOOTER ================= */

.up-footer{
    min-height:90px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    border-top:1px solid #e9edf2;
    color:#7a8495;
    font-size:11px;
}

.up-footer img{
    width:42px;
    height:42px;
    object-fit:contain;
}

.up-footer a{
    color:#515d70;
    font-weight:800;
    text-decoration:none;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1000px){

    .ugx-nav{
        display:none;
    }

    .up-hero{
        min-height:auto;
        grid-template-columns:1fr 1fr;
        padding:38px;
    }

    .up-hero h1{
        font-size:44px;
    }

    .ugx-plan-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:700px){

    .up-wrap{
        width:calc(100% - 24px);
    }

    .ugx-header{
        min-height:68px;
        gap:8px;
    }

    .ugx-brand{
        gap:8px;
        max-width:68%;
    }

    .ugx-brand img{
        width:42px;
        height:42px;
        flex-basis:42px;
        border-radius:12px;
    }

    .ugx-brand strong{
        max-width:145px;
        font-size:13px;
    }

    .ugx-brand small{
        display:none;
    }

    .ugx-header-actions a{
        min-height:38px;
        padding:0 13px;
        border-radius:10px;
        font-size:10px;
    }

    /* HERO */

    .up-hero{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:7px;
        padding:28px 20px 20px;
        border-radius:22px;
        text-align:center;
    }

    .up-hero h1{
        font-size:37px;
        line-height:1.02;
        letter-spacing:-1.5px;
    }

    .up-hero p{
        margin:16px auto;
        font-size:13px;
        line-height:1.6;
    }

    .up-hero-benefits{
        justify-content:center;
    }

    .up-hero-benefits div{
        padding:8px 9px;
        font-size:9px;
    }

    .up-hero > img{
        width:min(100%,330px);
        margin:0 auto;
    }

    /* HEADING */

    .up-plans{
        padding-top:45px;
        padding-bottom:40px;
    }

    .ugx-section-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
        margin-bottom:20px;
    }

    .ugx-section-heading h2{
        font-size:27px;
    }

    .up-calculator-link{
        width:100%;
        text-align:center;
    }

    /* PLANS */

    .ugx-plan-grid{
        grid-template-columns:1fr;
        gap:16px;
    }

    .ugx-plan-card{
        min-height:390px;
        border-radius:20px !important;
    }

    .ugx-plan-card > h3{
        padding:27px 19px 10px !important;
        padding-right:95px !important;
        font-size:18px !important;
    }

    .ugx-plan-body{
        padding:0 19px 19px !important;
    }

    .ugx-plan-amount{
        font-size:27px !important;
    }

    .ugx-plan-body dl{
        padding:5px 12px;
    }

    /* MODAL */

    .pso-sheet{
        align-items:flex-end;
        padding:0;
    }

    .pso-sheet__box{
        max-width:none;
        max-height:92vh;
        border-radius:23px 23px 0 0;
    }

    .pso-sheet__head{
        padding:16px 17px;
    }

    .pso-sheet form{
        padding:17px;
    }

    .pso-gateway-grid{
        grid-template-columns:1fr;
    }

    .pso-gateway > span{
        min-height:65px;
    }

    /* CALCULATOR */

    .up-calculator{
        margin-bottom:35px;
        border-radius:18px;
    }

    .up-calculator summary{
        padding:18px;
        font-size:14px;
    }

    .up-calculator-body{
        padding:0 18px 18px;
    }

    .up-calculator-fields,
    .up-calc-results{
        grid-template-columns:1fr;
    }

    /* CTA */

    .up-cta{
        align-items:flex-start;
        flex-direction:column;
        gap:18px;
        margin-bottom:35px;
        padding:25px 21px;
        border-radius:20px;
    }

    .up-cta h2{
        font-size:23px;
    }

    .up-cta .ugx-btn{
        width:100%;
        text-align:center;
    }

    /* FOOTER */

    .up-footer{
        min-height:120px;
        flex-direction:column;
        justify-content:center;
        gap:8px;
        padding:20px 0;
        text-align:center;
    }
}

/* Very small phones */

@media(max-width:370px){

    .up-wrap{
        width:calc(100% - 18px);
    }

    .ugx-brand strong{
        max-width:110px;
        font-size:11px;
    }

    .ugx-header-actions a{
        padding:0 9px;
        font-size:9px;
    }
    /* PLAN CARD DETAIL TEXT = BLACK */

.ugx-plan-body dl{
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(255,255,255,.75) !important;
}

.ugx-plan-body dl > div{
    border-bottom:1px solid #e6e8ec !important;
}

/* Left side text */
.ugx-plan-body dt{
    color:#111827 !important;
    font-weight:700 !important;
}

/* Right side value */
.ugx-plan-body dd{
    color:#000000 !important;
    font-weight:900 !important;
}

/* Referral details */
.up-referral-level{
    color:#111827 !important;
}
/* PLAN PRICE + INVESTMENT TEXT BLACK */

.ugx-plan-amount{
    color:#000000 !important;
    font-weight:950 !important;
    text-shadow:none !important;
}

.up-investment-label{
    color:#111827 !important;
    font-weight:800 !important;
}

/* Plan name bhi black chahiye to ye rakhein */
.ugx-plan-card > h3{
    color:#000000 !important;
    text-shadow:none !important;
}

/* Mobile */
@media(max-width:700px){
    .ugx-plan-amount,
    .up-investment-label,
    .ugx-plan-card > h3{
        color:#000000 !important;
    }
}
.up-referral-level strong{
    color:#000000 !important;
    font-weight:900 !important;
}

/* Mobile par bhi clear black */
@media(max-width:700px){
    .ugx-plan-body dt,
    .ugx-plan-body dd,
    .up-referral-level,
    .up-referral-level strong{
        color:#000000 !important;
    }
}

    .up-hero{
        padding:24px 15px 17px;
    }

    .up-hero h1{
        font-size:32px;
    }

    .up-featured{
        right:13px;
    }
}
.up-account {
    position: relative;
    min-width: 160px;
    border: 1px solid #fff;
    border-radius: 18px;
    background: #fff8eddd;
    box-shadow: 0 5px 20px #c05a1210
}

.up-account summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    cursor: pointer;
    list-style: none
}

.up-account summary::-webkit-details-marker {
    display: none
}

.up-account summary b {
    display: block;
    font-size: 12px;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis
}

.up-account summary small {
    display: block;
    font-size: 10px;
    color: #66717c
}

.up-account summary>.ugx-icon {
    width: 32px;
    height: 32px
}

.up-account nav {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    width: 200px;
    border: 1px solid #ffddc1;
    border-radius: 14px;
    background: white;
    padding: 9px;
    box-shadow: 0 8px 25px #56270d20;
    z-index: 10
}

.up-account nav a {
    display: block;
    padding: 10px;
    border-radius: 9px;
    font-size: 13px
}

.up-account nav a:hover {
    background: #fff1e4
}

.up-hero {
    display: grid;
    grid-template-columns: 51% 49%;
    align-items: center;
    min-height: 310px
}

.up-hero-copy {
    position: relative;
    z-index: 1;
    padding: 16px 0 28px 12px
}

.up-hero h1 {
    font-size: clamp(34px, 4.2vw, 54px);
    line-height: 1.04;
    letter-spacing: -1.8px
}

.up-hero-copy>p {
    font-size: 17px;
    line-height: 1.45;
    margin: 14px 0 15px;
    color: #263244
}

.up-hero>img {
    width: 100%;
    max-height: 365px;
    object-fit: contain;
    mix-blend-mode: multiply;
    align-self: end
}

.up-hero-benefits {
    display: flex;
    gap: 10px
}

.up-hero-benefits>div {
    display: flex;
    align-items: center;
    gap: 7px;
    background: #ffffffcf;
    padding: 7px 13px 7px 7px;
    border-radius: 15px;
    box-shadow: 0 5px 15px #6a49230b;
    font-size: 12px;
    line-height: 1.35
}

.up-hero-benefits .ugx-icon {
    width: 39px;
    height: 39px
}

.up-plans {
    padding: 28px 0 12px
}

.up-page .ugx-section-heading {
    margin: 0 12px 41px;
    align-items: center
}

.up-page .ugx-section-heading h2 {
    font-size: 40px
}

.up-page .ugx-section-heading p {
    font-size: 13px
}

.up-page .ugx-section-heading .ugx-btn {
    font-size: 12px;
    white-space: nowrap;
    padding-inline: 20px;
    min-height: 45px
}

.up-page .ugx-plan-grid {
    gap: 30px 18px
}

.up-page .ugx-plan-card {
    position: relative;
    border-radius: 15px;
    padding: 0 7px 7px;
    background: radial-gradient(ellipse at 50% 0, #fff8 0, transparent 50%), linear-gradient(130deg, var(--tier), var(--tint) 65%, var(--tier));
    box-shadow: 0 8px 20px #83562f15
}

.up-page .up-tier-0,
.up-page .up-tier-3 {
    --tier: #ff9b40;
    --tint: #fff0dd
}

.up-page .up-tier-1 {
    --tier: #aeb8c6;
    --tint: #f4f5f8
}

.up-page .up-tier-2,
.up-page .up-tier-7 {
    --tier: #ffbf24;
    --tint: #fff0c4
}

.up-page .up-tier-4 {
    --tier: #ff5b64;
    --tint: #ffe7e0
}

.up-page .up-tier-5 {
    --tier: #a96df3;
    --tint: #f2e8ff
}

.up-page .up-tier-6 {
    --tier: #459dff;
    --tint: #e2f1ff
}

.up-plan-badge {
    position: relative;
    z-index: 1;
    display: block;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    margin: -27px auto -3px;
    background-image: url('ugx-plan-badges.png');
    background-size: 400% 200%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 5px 6px #74491d24)
}

.up-badge-0 {
    background-position: 0 0
}

.up-badge-1 {
    background-position: 33.333333% 0
}

.up-badge-2 {
    background-position: 66.666667% 0
}

.up-badge-3 {
    background-position: 100% 0
}

.up-badge-4 {
    background-position: 0 100%
}

.up-badge-5 {
    background-position: 33.333333% 100%
}

.up-badge-6 {
    background-position: 66.666667% 100%
}

.up-badge-7 {
    background-position: 100% 100%
}

.up-page .ugx-plan-card h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 8px;
    min-height: 20px
}

.up-featured {
    position: absolute;
    right: 0;
    top: 0;
    background: #138719;
    color: #fff;
    font-size: 9px;
    font-weight: 600;
    padding: 7px 8px;
    border-radius: 0 14px 0 10px
}

.up-page .ugx-plan-body {
    padding: 10px 13px 12px;
    border-radius: 15px
}

.up-page .ugx-plan-amount {
    font-size: 27px;
    padding-bottom: 8px
}

.up-page .ugx-plan-body dl {
    font-size: 12px;
    margin-bottom: 12px
}

.up-page .ugx-plan-body dl>div {
    padding: 6px 0
}

.up-page .ugx-plan-body .ugx-btn {
    font-size: 15px;
    min-height: 44px
}

.up-feature-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 22px 0 12px;
    background: linear-gradient(120deg, #fff, #fff8ef);
    border: 1px solid white;
    border-radius: 22px;
    box-shadow: 0 6px 22px #5938100c;
    padding: 14px 8px
}

.up-feature-strip>div,
.up-feature-strip>a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 12px
}

.up-feature-strip>div+div,
.up-feature-strip>a {
    border-left: 1px solid #e5dfd9
}

.up-feature-strip strong {
    font-size: 13px;
    display: block
}

.up-feature-strip small {
    font-size: 11px;
    display: block;
    color: #5c6573
}

.up-feature-strip .ugx-icon {
    width: 43px;
    height: 43px
}

.up-cta {
    display: grid;
    grid-template-columns: 33% 29% 38%;
    align-items: center;
    background: radial-gradient(ellipse at 10% 20%, #8b3000 0, #b8510a 26%, transparent 57%), linear-gradient(110deg, #ff9c39, #fff3e4 63%, #fff);
    border-radius: 24px;
    overflow: hidden;
    margin-top: 10px;
    min-height: 225px;
    border: 1px solid #fff
}

.up-cta-copy {
    padding: 25px;
    color: white
}

.up-cta-copy h2 {
    font-size: 29px;
    color: white;
    letter-spacing: -.8px
}

.up-cta-copy p {
    font-size: 13px;
    line-height: 1.5;
    margin: 10px 0 16px
}

.up-cta-copy .ugx-btn {
    font-size: 13px;
    padding: 11px 20px;
    min-height: 43px
}

.up-cta-art {
    width: 100%;
    mix-blend-mode: multiply
}

.up-cta-brand {
    text-align: center;
    padding: 16px 15px
}

.up-cta-brand>img {
    width: 160px;
    margin: 0 auto -5px;
    mix-blend-mode: multiply
}

.up-cta-brand>p {
    font-size: 8px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.up-cta-brand i {
    height: 2px;
    width: 16px;
    background: #ff5800
}

.up-cta-brand>div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 16px
}

.up-cta-brand>div>span {
    background: #ffffffbf;
    border-radius: 12px;
    font-size: 9px;
    padding: 10px 3px;
    box-shadow: 0 3px 8px #66441208
}

.up-cta-brand b {
    font-size: 15px;
    display: block
}

.up-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0
}

.up-footer nav {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 12px
}

.up-footer>small {
    font-size: 10px;
    text-align: right;
    color: #67707d
}

.up-alert {
    background: #fff1ef;
    color: #9b231d;
    border: 1px solid #ecc0b8;
    border-radius: 14px;
    padding: 15px 20px;
    margin: 0 0 36px
}

.up-alert ul {
    padding-left: 20px;
    margin: 5px 0 0
}

.up-success {
    color: #155f2e;
    background: #effbf1;
    border-color: #b0d6bc
}

.up-calculator {
    border: 1px solid #ffd7b4;
    background: #fffbf7;
    border-radius: 20px;
    margin: 18px 0;
    scroll-margin-top: 20px
}

.up-calculator summary {
    padding: 15px 20px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #c2410c;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.up-calculator summary::-webkit-details-marker {
    display: none
}

.up-calculator summary span {
    font-size: 24px
}

.up-calculator[open] summary {
    border-bottom: 1px solid #f1dcc9
}

.up-calculator-body {
    padding: 20px
}

.up-calculator-body>p {
    font-size: 12px;
    color: #5e6671
}

.up-calc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 16px
}

.up-calc-fields label {
    font-size: 12px;
    font-weight: 600
}

.up-calc-fields select,
.up-calc-fields input {
    font: inherit;
    display: block;
    width: 100%;
    min-width: 0;
    border: 1px solid #d5c2b1;
    border-radius: 10px;
    height: 44px;
    padding: 8px 12px;
    margin-top: 6px;
    background: #fff;
    color: #172132
}

.up-calc-fields input[readonly] {
    background: #fff1e3
}

.up-calc-fields input[aria-invalid=true] {
    border-color: #c32d1c
}

.up-calculator-body .up-calc-error {
    color: #b5241c;
    min-height: 17px;
    margin-top: 8px
}

.up-calc-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 10px
}

.up-calc-results>div {
    background: #fff;
    border: 1px solid #f3dec9;
    border-radius: 13px;
    padding: 14px
}

.up-calc-results small {
    display: block;
    color: #606776;
    font-size: 12px
}

.up-calc-results strong {
    display: block;
    font-size: 21px;
    color: #d94b0e;
    overflow-wrap: anywhere;
    margin-top: 5px
}

.up-page summary:focus-visible,
.up-page select:focus-visible {
    outline: 3px solid #176db3;
    outline-offset: 3px
}

@media(max-width:1150px) {
    .up-hero h1 {
        font-size: 43px
    }
    .up-hero-copy>p {
        font-size: 15px
    }
    .up-page .ugx-section-heading h2 {
        font-size: 35px
    }
    .up-page .ugx-plan-body {
        padding-inline: 10px
    }
    .up-page .ugx-plan-body dl {
        font-size: 11px
    }
    .up-page .ugx-plan-amount {
        font-size: 24px
    }
    .up-feature-strip strong {
        font-size: 12px
    }
    .up-feature-strip small {
        font-size: 10px
    }
    .up-page .ugx-nav a {
        font-size: 10px
    }
    .up-cta-copy {
        padding: 20px
    }
    .up-cta-copy h2 {
        font-size: 25px
    }
    .up-cta-brand b {
        font-size: 13px
    }
    .up-footer nav {
        gap: 16px
    }
}

@media(max-width:980px) {
    .up-hero {
        min-height: 290px
    }
    .up-hero h1 {
        font-size: 36px
    }
    .up-hero-copy {
        padding-left: 0
    }
    .up-hero-copy>p {
        font-size: 13px
    }
    .up-hero-benefits {
        gap: 6px
    }
    .up-hero-benefits>div {
        padding: 7px;
        font-size: 10px;
        gap: 4px
    }
    .up-hero-benefits .ugx-icon {
        width: 32px;
        height: 32px
    }
    .up-page .ugx-section-heading {
        margin-inline: 0
    }
    .up-page .ugx-section-heading h2 {
        font-size: 31px
    }
    .up-page .ugx-section-heading p {
        font-size: 11px
    }
    .up-page .ugx-section-heading .ugx-btn {
        font-size: 10px;
        padding-inline: 15px
    }
    .up-page .ugx-plan-grid {
        gap: 31px 12px
    }
    .up-page .ugx-plan-card h3 {
        font-size: 13px
    }
    .up-page .ugx-plan-body {
        padding: 8px
    }
    .up-page .ugx-plan-body dl {
        font-size: 10px
    }
    .up-page .ugx-plan-amount {
        font-size: 20px
    }
    .up-page .ugx-plan-body .ugx-btn {
        font-size: 13px
    }
    .up-plan-badge {
        width: 82px;
        height: 82px;
        margin-top: -23px
    }
    .up-featured {
        font-size: 8px;
        padding: 5px 6px
    }
    .up-feature-strip>div,
    .up-feature-strip>a {
        gap: 5px;
        padding-inline: 5px
    }
    .up-feature-strip .ugx-icon {
        width: 34px;
        height: 34px
    }
    .up-feature-strip strong {
        font-size: 10px
    }
    .up-feature-strip small {
        font-size: 9px
    }
    .up-cta {
        grid-template-columns: 40% 24% 36%
    }
    .up-cta-brand {
        padding: 12px 8px
    }
    .up-cta-brand>div {
        gap: 3px
    }
    .up-cta-brand>div>span {
        font-size: 8px
    }
    .up-cta-copy p {
        font-size: 11px
    }
    .up-cta-copy .ugx-btn {
        font-size: 11px
    }
    .up-footer nav {
        gap: 13px;
        font-size: 11px
    }
    .up-page .ugx-header .ugx-nav a {
        font-size: 14px
    }
}

@media(max-width:680px) {
    .up-page .ugx-wrap {
        width: 92%
    }
    .up-page .ugx-brand {
        width: 140px
    }
    .up-page .ugx-brand img {
        width: 118px;
        height: 72px
    }
    .up-account {
        min-width: 0
    }
    .up-account summary {
        padding: 7px 9px;
        gap: 5px
    }
    .up-account summary b {
        max-width: 82px;
        font-size: 10px
    }
    .up-account summary small {
        font-size: 9px
    }
    .up-account summary>.ugx-icon {
        width: 27px;
        height: 27px
    }
    .up-hero {
        grid-template-columns: 1fr;
        min-height: 0;
        text-align: center
    }
    .up-hero-copy {
        padding: 20px 0 5px
    }
    .up-hero h1 {
        font-size: clamp(30px, 7.8vw, 44px);
        letter-spacing: -1.2px
    }
    .up-hero-copy>p {
        font-size: 14px;
        margin: 13px 0
    }
    .up-desktop-break {
        display: none
    }
    .up-hero-benefits {
        justify-content: center;
        gap: 8px
    }
    .up-hero-benefits>div {
        font-size: 10px;
        padding: 7px 9px
    }
    .up-hero>img {
        width: 100%;
        height: auto;
        max-height: 285px;
        margin: 5px auto 0
    }
    .up-plans {
        padding-top: 19px
    }
    .up-page .ugx-section-heading {
        margin-bottom: 42px;
        gap: 14px
    }
    .up-page .ugx-section-heading h2 {
        font-size: 31px
    }
    .up-page .ugx-section-heading p {
        font-size: 12px
    }
    .up-page .ugx-section-heading .ugx-btn {
        font-size: 12px;
        min-height: 41px
    }
    .up-page .ugx-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 31px 11px
    }
    .up-page .ugx-plan-card {
        padding: 0 6px 6px
    }
    .up-page .ugx-plan-card h3 {
        font-size: 12px;
        min-height: 15px
    }
    .up-page .ugx-plan-amount {
        font-size: 21px;
        letter-spacing: -.6px
    }
    .up-page .ugx-plan-body {
        padding: 8px 7px
    }
    .up-page .ugx-plan-body dl {
        font-size: 10px
    }
    .up-page .ugx-plan-body dl>div {
        gap: 4px
    }
    .up-page .ugx-plan-body .ugx-btn {
        font-size: 12px;
        min-height: 39px
    }
    .up-plan-badge {
        width: 80px;
        height: 80px
    }
    .up-featured {
        font-size: 7px;
        padding: 4px;
        top: 2px
    }
    .up-feature-strip {
        grid-template-columns: 1fr 1fr;
        gap: 15px 0;
        padding: 17px 8px
    }
    .up-feature-strip>div,
    .up-feature-strip>a {
        justify-content: flex-start;
        padding: 0 7px;
        gap: 7px
    }
    .up-feature-strip>div:nth-child(3) {
        border-left: 0
    }
    .up-feature-strip strong {
        font-size: 11px
    }
    .up-feature-strip small {
        font-size: 9px
    }
    .up-cta {
        grid-template-columns: 1fr 1fr;
        border-radius: 20px;
        background: radial-gradient(ellipse at 0 0, #913400, transparent 64%), linear-gradient(145deg, #d86808, #fff3df 75%)
    }
    .up-cta-copy {
        grid-column: 1/-1;
        padding: 24px 22px 8px;
        text-align: center
    }
    .up-cta-copy h2 {
        font-size: 29px
    }
    .up-cta-copy p {
        font-size: 13px
    }
    .up-cta-copy .ugx-btn {
        font-size: 13px
    }
    .up-cta-art {
        padding: 5px
    }
    .up-cta-brand {
        padding: 12px 6px 20px
    }
    .up-cta-brand>img {
        width: 135px
    }
    .up-cta-brand>p {
        font-size: 5.5px;
        gap: 3px
    }
    .up-cta-brand>div {
        grid-template-columns: 1fr;
        gap: 4px;
        margin-top: 10px
    }
    .up-cta-brand>div>span {
        padding: 4px;
        font-size: 8px
    }
    .up-cta-brand b {
        font-size: 10px;
        display: inline;
        margin-right: 5px
    }
    .up-footer {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        gap: 12px
    }
    .up-footer nav {
        width: 100%;
        justify-content: center;
        font-size: 11px
    }
    .up-footer>small {
        text-align: center
    }
    .up-calculator-body {
        padding: 15px
    }
    .up-calc-fields {
        grid-template-columns: 1fr;
        gap: 12px
    }
    .up-calc-results {
        grid-template-columns: 1fr;
        gap: 8px
    }
    .up-calc-results>div {
        padding: 10px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px
    }
    .up-calc-results strong {
        font-size: 18px;
        margin: 0
    }
    .up-calc-results small {
        font-size: 11px
    }
}

@media(max-width:360px) {
    .up-page .ugx-plan-amount {
        font-size: 18px
    }
    .up-page .ugx-plan-body dl {
        font-size: 9px
    }
    .up-page .ugx-plan-body {
        padding-inline: 5px
    }
    .up-page .ugx-plan-card h3 {
        font-size: 11px
    }
    .up-page .ugx-plan-grid {
        gap: 30px 8px
    }
    .up-account summary>.ugx-icon {
        display: none
    }
    .up-featured {
        font-size: 6px
    }
    .up-hero-benefits>div {
        padding: 7px 6px;
        gap: 2px
    }
    .up-hero-benefits .ugx-icon {
        width: 27px;
        height: 27px
    }
}

.up-page .ugx-plan-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 580px;
    margin-inline: auto;
    gap: 38px
}

.up-page .ugx-plan-card {
    padding: 0 10px 10px;
    border-radius: 23px
}

.up-page .up-plan-badge {
    width: 106px;
    height: 106px;
    margin-top: -27px
}

.up-page .ugx-plan-card h3 {
    font-size: 20px;
    margin-bottom: 12px
}

.up-page .up-featured {
    font-size: 10px;
    padding: 8px 12px;
    border-radius: 0 21px 0 12px
}

.up-page .ugx-plan-body {
    padding: 16px 20px 18px;
    border-radius: 19px
}

.up-page .ugx-plan-amount {
    font-size: 34px;
    padding-bottom: 0;
    line-height: 1.15
}

.up-page .up-investment-label {
    text-align: center;
    color: #6b5140;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin: 5px 0 17px
}

.up-page .ugx-plan-body dl {
    font-size: 15px;
    margin-bottom: 15px
}

.up-page .ugx-plan-body dl>div {
    padding: 12px 13px;
    gap: 12px
}

.up-page .ugx-plan-body dl>div.up-metric-profit,
.up-page .ugx-plan-body dl>div.up-metric-referral {
    background: linear-gradient(110deg, #fff0d4, #ffe1bd);
    border: 1px solid #ffc77b;
    border-radius: 11px;
    color: #9e3900;
    margin: 5px 0
}

.up-page .up-metric-profit dt,
.up-page .up-metric-referral dt {
    font-weight: 700
}

.up-page .up-metric-profit dd,
.up-page .up-metric-referral dd {
    font-size: 18px;
    font-weight: 800
}

.up-page .ugx-plan-body dl>div.up-metric-total {
    background: #eef8f1;
    border: 1px solid #c2dfcc;
    border-radius: 11px;
    color: #17613b;
    margin-top: 10px
}

.up-page .up-metric-total dt {
    font-weight: 700
}

.up-page .up-metric-total dd {
    font-size: 18px;
    font-weight: 800
}

.up-page .ugx-plan-body .ugx-btn {
    font-size: 17px;
    min-height: 49px
}

@media(max-width:680px) {
    .up-page .ugx-plan-grid {
        gap: 36px
    }
    .up-page .ugx-plan-card {
        padding: 0 8px 8px
    }
    .up-page .ugx-plan-body {
        padding: 14px 12px
    }
    .up-page .ugx-plan-amount {
        font-size: 30px
    }
    .up-page .ugx-plan-card h3 {
        font-size: 18px
    }
    .up-page .ugx-plan-body dl {
        font-size: 13px
    }
    .up-page .ugx-plan-body dl>div {
        padding: 11px 10px;
        gap: 8px
    }
    .up-page .up-metric-profit dd,
    .up-page .up-metric-referral dd,
    .up-page .up-metric-total dd {
        font-size: 16px
    }
    .up-page .ugx-plan-body .ugx-btn {
        font-size: 16px
    }
    .up-page .up-investment-label {
        font-size: 11px;
        margin-bottom: 14px
    }
}

.up-page .ugx-plan-body dl>div.up-metric-duration {
    background: linear-gradient(110deg, #edf5ff, #e1edff);
    border: 1px solid #bed4f1;
    border-radius: 11px;
    color: #254f88;
    margin: 7px 0
}

.up-page .up-metric-duration dt {
    font-weight: 700
}

.up-page .up-metric-duration dd {
    font-size: 18px;
    font-weight: 800
}

.up-page .ugx-plan-body dl>div.up-metric-referral {
    align-items: flex-start
}

.up-page .up-metric-referral dt {
    padding-top: 2px
}

.up-page .ugx-plan-body .up-referral-levels {
    display: grid;
    gap: 7px;
    min-width: 0;
    text-align: right
}

.up-page .up-referral-level {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 8px;
    line-height: 1.45
}

.up-page .up-referral-level>span {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap
}

.up-page .up-referral-level strong {
    font-size: 18px;
    font-weight: 800
}

.up-page .up-referral-level+.up-referral-level {
    border-top: 1px solid #e5b97680;
    padding-top: 6px
}

@media(max-width:680px) {
    .up-page .up-metric-duration dd,
    .up-page .up-referral-level strong {
        font-size: 16px
    }
    .up-page .up-referral-level>span {
        font-size: 12px
    }
    .up-page .up-referral-level {
        gap: 6px
    }
}

/* Keep the plans near the top of the page. */

.up-hero {
    grid-template-columns: minmax(0, 1fr) 240px;
    min-height: 0;
    padding-block: 14px;
    gap: 16px
}

.up-hero-copy {
    padding: 10px 0 10px 12px
}

.up-hero h1 {
    font-size: 34px;
    letter-spacing: -1px;
    line-height: 1.08
}

.up-hero-copy>p {
    font-size: 13px;
    line-height: 1.5;
    margin: 9px 0
}

.up-hero>img {
    width: 240px;
    height: 155px;
    max-height: 155px;
    align-self: center;
    margin: 0
}

.up-hero-benefits {
    gap: 7px
}

.up-hero-benefits>div {
    font-size: 9px;
    padding: 5px 8px;
    gap: 4px;
    border-radius: 10px
}

.up-hero-benefits .ugx-icon {
    width: 25px;
    height: 25px
}

.up-plans {
    padding-top: 12px
}

.up-page .ugx-section-heading {
    margin: 0 12px 33px;
    gap: 12px
}

.up-page .ugx-section-heading h2 {
    font-size: 29px;
    line-height: 1.15
}

.up-page .ugx-section-heading p {
    font-size: 11px;
    margin-top: 6px
}

.up-page .ugx-section-heading .ugx-btn {
    min-height: 33px;
    padding: 8px 14px;
    font-size: 10px
}

@media(max-width:680px) {
    .up-hero {
        grid-template-columns: minmax(0, 1fr) 100px;
        gap: 7px;
        text-align: left;
        padding-block: 12px
    }
    .up-hero-copy {
        padding: 4px 0
    }
    .up-hero h1 {
        font-size: 24px;
        letter-spacing: -.8px
    }
    .up-hero-copy>p {
        font-size: 10px;
        line-height: 1.45;
        margin: 8px 0 0
    }
    .up-hero>img {
        width: 100px;
        height: 105px;
        max-height: 105px;
        margin: 0;
        align-self: center
    }
    .up-hero-benefits {
        display: none
    }
    .up-plans {
        padding-top: 7px
    }
    .up-page .ugx-section-heading {
        margin: 0 0 31px;
        gap: 9px
    }
    .up-page .ugx-section-heading h2 {
        font-size: 24px;
        letter-spacing: -.8px
    }
    .up-page .ugx-section-heading p {
        font-size: 10px;
        margin-top: 5px
    }
    .up-page .ugx-section-heading .ugx-btn {
        min-height: 31px;
        font-size: 10px;
        padding: 7px 12px
    }
    .up-page .ugx-section-heading .ugx-btn span {
        font-size: 16px
    }
}


/* =========================================================
   FINAL PLAN CARD OVERRIDE
   Keep this block at the VERY END of the stylesheet.
   Fixes cascade conflicts from earlier repeated plan rules.
========================================================= */

.up-page .ugx-plan-card > h3,
.up-page .ugx-plan-card h3 {
    color: #000000 !important;
    text-shadow: none !important;
}

.up-page .ugx-plan-body .ugx-plan-amount,
.up-page .ugx-plan-amount {
    color: #000000 !important;
    font-weight: 950 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.up-page .ugx-plan-body .up-investment-label,
.up-page .up-investment-label {
    color: #111827 !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

.up-page .ugx-plan-body dl {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,.08) !important;
    border-radius: 16px !important;
    color: #111827 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.08);
}

.up-page .ugx-plan-body dl > div {
    border-bottom: 1px solid #e7e9ee !important;
    color: #111827 !important;
}

.up-page .ugx-plan-body dl > div:last-child {
    border-bottom: 0 !important;
}

.up-page .ugx-plan-body dt,
.up-page .ugx-plan-body dd {
    color: #000000 !important;
    opacity: 1 !important;
}

.up-page .ugx-plan-body dt {
    font-weight: 700 !important;
}

.up-page .ugx-plan-body dd {
    font-weight: 900 !important;
}

.up-page .up-referral-level,
.up-page .up-referral-level > span,
.up-page .up-referral-level strong {
    color: #000000 !important;
    opacity: 1 !important;
}

.up-page .up-referral-level strong {
    font-weight: 900 !important;
}

/* Preserve colorful outer cards */
.up-page .ugx-plan-card.up-tier-0 {
    background: linear-gradient(145deg,#ff7a00,#ffba08) !important;
}
.up-page .ugx-plan-card.up-tier-1 {
    background: linear-gradient(145deg,#10a663,#45d483) !important;
}
.up-page .ugx-plan-card.up-tier-2 {
    background: linear-gradient(145deg,#2457e6,#45a3ff) !important;
}
.up-page .ugx-plan-card.up-tier-3 {
    background: linear-gradient(145deg,#6c35d9,#a855f7) !important;
}
.up-page .ugx-plan-card.up-tier-4 {
    background: linear-gradient(145deg,#e83d60,#ff778f) !important;
}
.up-page .ugx-plan-card.up-tier-5 {
    background: linear-gradient(145deg,#057f88,#20c6b7) !important;
}
.up-page .ugx-plan-card.up-tier-6 {
    background: linear-gradient(145deg,#303b59,#596986) !important;
}

/* Mobile-safe final rules */
@media (max-width: 700px) {
    .up-page .ugx-plan-card > h3,
    .up-page .ugx-plan-amount,
    .up-page .up-investment-label,
    .up-page .ugx-plan-body dt,
    .up-page .ugx-plan-body dd,
    .up-page .up-referral-level,
    .up-page .up-referral-level > span,
    .up-page .up-referral-level strong {
        color: #000000 !important;
    }

    .up-page .ugx-plan-body dl {
        padding: 6px 12px !important;
        border-radius: 14px !important;
    }

    .up-page .ugx-plan-amount {
        font-size: 28px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere;
    }
}