/* CODSHIPX R118-R8-R9-R4 PREMIUM ADD-ONS */

/* WhatsApp remains in Connections */
.r7-addons-page .cx-addon-whatsapp{
    display:none !important;
}

/* two premium products */
.r7-addons-page .cx-addon-grid{
    width:min(100%,1080px) !important;
    margin:22px auto 34px !important;

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

    gap:24px !important;
    align-items:stretch !important;
}

.r7-addons-page .cx-addon-grid > div{
    display:none !important;
}

/* shared card */
.r7-addons-page .cx-addon-codi,
.r7-addons-page .cx-addon-voice{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    box-sizing:border-box !important;

    width:100% !important;
    min-width:0 !important;

    min-height:595px !important;
    height:100% !important;

    display:flex !important;
    flex-direction:column !important;

    padding:29px 28px 25px !important;

    border-radius:29px !important;

    color:#fff !important;

    animation:
        cxAddOnEnter .68s
        cubic-bezier(.2,.82,.22,1)
        both !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.r7-addons-page .cx-addon-voice{
    animation-delay:.09s !important;
}

.r7-addons-page .cx-addon-codi:hover,
.r7-addons-page .cx-addon-voice:hover{
    transform:
        translateY(-6px)
        scale(1.006) !important;
}

/* Codi */
.r7-addons-page .cx-addon-codi{
    background:#05090c !important;

    border:
        1px solid rgba(160,239,91,.82) !important;

    box-shadow:
        0 27px 60px rgba(3,17,8,.27),
        0 0 0 2px rgba(154,238,81,.12),
        0 0 34px rgba(128,230,66,.16) !important;
}

/* Voice */
.r7-addons-page .cx-addon-voice{
    background:#0747bd !important;

    border:
        1px solid rgba(103,200,255,.96) !important;

    box-shadow:
        0 27px 60px rgba(0,42,137,.29),
        0 0 0 2px rgba(58,169,255,.18),
        0 0 35px rgba(41,154,255,.21) !important;
}

/* animated solid ambient forms */
.r7-addons-page .cx-addon-codi::before,
.r7-addons-page .cx-addon-voice::before{
    content:"" !important;

    position:absolute !important;

    width:345px !important;
    height:250px !important;

    top:-145px !important;
    right:-110px !important;

    border-radius:50% !important;

    background:
        rgba(255,255,255,.065) !important;

    z-index:0 !important;
    pointer-events:none !important;

    animation:
        cxAddOnAmbient
        6.4s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi::after,
.r7-addons-page .cx-addon-voice::after{
    content:"" !important;

    position:absolute !important;

    width:68px !important;
    height:820px !important;

    top:-120px !important;
    left:-180px !important;

    transform:rotate(28deg) !important;

    background:
        rgba(255,255,255,.045) !important;

    z-index:1 !important;
    pointer-events:none !important;

    animation:
        cxAddOnSweep
        8.5s ease-in-out infinite !important;
}

.r7-addons-page .cx-addon-codi > *,
.r7-addons-page .cx-addon-voice > *{
    position:relative !important;
    z-index:2 !important;
}

/* product badges */
.r7-addons-page .cx-addon-card .section-kicker{
    position:absolute !important;

    top:35px !important;
    right:28px !important;

    width:auto !important;

    display:inline-flex !important;
    align-items:center !important;

    padding:10px 18px !important;

    border-radius:999px !important;

    color:#fff !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:.075em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-codi .section-kicker{
    background:#285623 !important;

    border:
        1px solid rgba(188,255,124,.94) !important;

    box-shadow:
        0 0 19px rgba(158,242,84,.29) !important;
}

.r7-addons-page .cx-addon-voice .section-kicker{
    background:#105bd2 !important;

    border:
        1px solid rgba(164,225,255,.98) !important;

    box-shadow:
        0 0 19px rgba(72,181,255,.33) !important;
}

/* main icons */
.r7-addons-page .commerce-icon{
    width:76px !important;
    height:76px !important;
    min-width:76px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:21px !important;

    animation:
        cxAddOnIcon
        4.7s ease-in-out infinite !important;
}

/* Codi branded icon */
.r7-addons-page .cx-addon-codi .commerce-icon{
    background:#14281b !important;

    border:
        1px solid rgba(158,241,89,.56) !important;

    box-shadow:
        0 0 20px rgba(142,232,74,.16) !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-codi .commerce-icon::before{
    content:"" !important;

    width:55px !important;
    height:55px !important;

    border-radius:16px !important;

    background:
        url("/brand/codshipx-ai-icon.jpeg")
        center/cover no-repeat !important;
}

/* Voice microphone */
.r7-addons-page .cx-addon-voice .commerce-icon{
    position:relative !important;

    background:#1262d8 !important;

    border:
        1px solid rgba(145,219,255,.82) !important;

    box-shadow:
        0 0 22px rgba(67,182,255,.25) !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::before{
    content:"" !important;

    width:18px !important;
    height:31px !important;

    border:3px solid #fff !important;
    border-radius:13px !important;

    box-sizing:border-box !important;
}

.r7-addons-page
.cx-addon-voice .commerce-icon::after{
    content:"" !important;

    position:absolute !important;

    left:21px !important;
    top:28px !important;

    width:31px !important;
    height:26px !important;

    border-left:3px solid #fff !important;
    border-right:3px solid #fff !important;
    border-bottom:3px solid #fff !important;

    border-radius:0 0 17px 17px !important;
}

/* card heading */
.r7-addons-page
.cx-addon-card > .commerce-icon + div{
    padding-right:150px !important;
}

.r7-addons-page .cx-addon-card h2{
    margin:19px 0 8px !important;

    color:#fff !important;

    font-size:40px !important;
    line-height:.98 !important;

    font-weight:950 !important;
    letter-spacing:-.055em !important;

    white-space:nowrap !important;
}

.r7-addons-page .cx-addon-card p{
    width:min(100%,390px) !important;

    min-height:47px !important;

    margin:0 !important;

    color:
        rgba(255,255,255,.80) !important;

    font-size:14px !important;
    line-height:1.42 !important;
}

/* premium 2x2 features */
.r7-addons-page .cx-addon-feature-list{
    width:100% !important;

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

    gap:10px !important;

    margin:22px 0 0 !important;
}

.r7-addons-page
.cx-addon-feature-list > span{
    min-width:0 !important;
    min-height:82px !important;

    display:grid !important;

    grid-template-columns:
        42px minmax(0,1fr) !important;

    grid-template-rows:
        auto auto !important;

    column-gap:10px !important;

    align-items:center !important;
    align-content:center !important;

    padding:12px !important;

    border-radius:15px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    background:
        rgba(255,255,255,.075) !important;

    color:#fff !important;

    font-size:11px !important;
    line-height:1.15 !important;

    font-weight:850 !important;

    white-space:normal !important;

    transition:
        transform .2s ease,
        background .2s ease !important;
}

.r7-addons-page
.cx-addon-feature-list > span:hover{
    transform:
        translateY(-3px) !important;

    background:
        rgba(255,255,255,.115) !important;
}

.r7-addons-page
.cx-addon-feature-list > span i{
    grid-column:1 !important;
    grid-row:1 / 3 !important;

    width:39px !important;
    height:39px !important;

    display:grid !important;
    place-items:center !important;

    border-radius:12px !important;

    font-size:0 !important;
    font-style:normal !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span i{
    background:#214926 !important;
    color:#d6ffae !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span i{
    background:#1764d3 !important;
    color:#fff !important;
}

.r7-addons-page
.cx-addon-feature-list > span i::before{
    font-size:19px !important;
    line-height:1 !important;

    font-weight:900 !important;
}

/* Codi symbols */
.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"✦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"▦" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"▥" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"◆" !important;
}

/* Voice symbols */
.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"●" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2) i::before{
    content:"⌁" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3) i::before{
    content:"⚡" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4) i::before{
    content:"≋" !important;
}

/* secondary descriptions */
.r7-addons-page
.cx-addon-feature-list > span::after{
    grid-column:2 !important;
    grid-row:2 !important;

    margin-top:5px !important;

    color:
        rgba(255,255,255,.63) !important;

    font-size:9.4px !important;
    line-height:1.16 !important;

    font-weight:500 !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"One AI for your entire business" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Insights from your workspace data" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Turn data into decisions" !important;
}

.r7-addons-page
.cx-addon-codi
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All Codi capabilities included" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(1)::after{
    content:"Talk to your business naturally" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(2)::after{
    content:"Update, search and create by voice" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(3)::after{
    content:"Get things done faster" !important;
}

.r7-addons-page
.cx-addon-voice
.cx-addon-feature-list > span:nth-child(4)::after{
    content:"All voice features included" !important;
}

/* price panel */
.r7-addons-page .v1b4-addon-price{
    width:100% !important;

    box-sizing:border-box !important;

    display:flex !important;
    flex-direction:column !important;

    visibility:visible !important;
    opacity:1 !important;

    min-height:88px !important;

    margin:21px 0 0 !important;
    padding:17px 19px 14px !important;

    border-radius:
        18px 18px 0 0 !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-bottom:0 !important;

    background:
        rgba(255,255,255,.085) !important;
}

.r7-addons-page
.v1b4-addon-price strong{
    color:#fff !important;

    font-size:30px !important;
    line-height:1 !important;

    font-weight:950 !important;
    letter-spacing:-.04em !important;

    white-space:nowrap !important;
}

.r7-addons-page
.v1b4-addon-price small{
    margin-top:9px !important;

    color:
        rgba(255,255,255,.69) !important;

    font-size:11px !important;
}

/* status panel */
.r7-addons-page .v1b1-addon-status{
    position:relative !important;

    width:100% !important;

    box-sizing:border-box !important;

    min-height:84px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    margin:0 0 18px !important;

    padding:
        15px 84px 15px 62px !important;

    border-radius:
        0 0 18px 18px !important;

    border:
        1px solid rgba(255,255,255,.16) !important;

    border-top:
        1px solid rgba(255,255,255,.07) !important;

    background:
        rgba(255,255,255,.058) !important;
}

.r7-addons-page
.v1b1-addon-status > span{
    color:#fff !important;

    font-size:15px !important;
    font-weight:900 !important;
}

.r7-addons-page
.v1b1-addon-status > small{
    margin-top:7px !important;

    color:
        rgba(255,255,255,.67) !important;

    font-size:10px !important;
}

/* active indicator */
.r7-addons-page
.v1b1-addon-status > span::before{
    content:"" !important;

    position:absolute !important;

    left:24px !important;
    top:50% !important;

    width:18px !important;
    height:18px !important;

    transform:
        translateY(-50%) !important;

    border-radius:50% !important;
}

.r7-addons-page
.cx-addon-codi
.v1b1-addon-status > span.active::before{
    background:#baff5b !important;

    box-shadow:
        0 0 0 8px rgba(158,239,79,.11),
        0 0 19px rgba(178,255,91,.62) !important;

    animation:
        cxGreenState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.cx-addon-voice
.v1b1-addon-status > span.active::before{
    background:#79ddff !important;

    box-shadow:
        0 0 0 8px rgba(82,190,255,.12),
        0 0 19px rgba(79,195,255,.67) !important;

    animation:
        cxBlueState
        2.7s ease-in-out infinite !important;
}

.r7-addons-page
.v1b1-addon-status > span.inactive::before{
    background:#9ba7b8 !important;
}

/* Codi included badge */
.r7-addons-page
.cx-addon-codi
.v1b1-addon-status:has(> span.active)::after{
    content:"Included" !important;

    position:absolute !important;

    right:17px !important;
    top:50% !important;

    transform:
        translateY(-50%) !important;

    padding:
        9px 17px !important;

    border-radius:999px !important;

    background:#c7fa83 !important;
    color:#123b15 !important;

    font-size:10px !important;
    font-weight:900 !important;
}

/* CTA */
.r7-addons-page
.cx-addon-card .button{
    width:100% !important;

    min-height:59px !important;

    margin-top:auto !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:17px !important;

    border-radius:17px !important;

    font-size:13px !important;
    font-weight:950 !important;

    transition:
        transform .2s ease,
        filter .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after{
    content:"→" !important;

    font-size:21px !important;

    transition:
        transform .2s ease !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover::after{
    transform:
        translateX(5px) !important;
}

.r7-addons-page
.cx-addon-codi .button.primary{
    background:#a6ee20 !important;
    color:#051106 !important;

    border:
        1px solid #d9ff9e !important;

    box-shadow:
        0 0 24px rgba(155,237,43,.30) !important;
}

.r7-addons-page
.cx-addon-voice .button.primary{
    background:#fff !important;
    color:#0742ad !important;

    border:
        1px solid #fff !important;

    box-shadow:
        0 0 23px rgba(255,255,255,.17) !important;
}

.r7-addons-page
.cx-addon-card .button.primary:hover{
    transform:
        translateY(-2px) !important;

    filter:
        brightness(1.04) !important;
}

/* inactive purchase states */
.r7-addons-page
.cx-addon-codi .button.soft,
.r7-addons-page
.cx-addon-codi .button:disabled{
    background:#17261a !important;

    color:
        rgba(255,255,255,.80) !important;

    border:
        1px solid rgba(160,240,87,.28) !important;

    opacity:1 !important;
}

.r7-addons-page
.cx-addon-voice .button.soft,
.r7-addons-page
.cx-addon-voice .button:disabled{
    background:#1653bc !important;

    color:
        rgba(255,255,255,.84) !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    opacity:1 !important;
}

/* animation */
@keyframes cxAddOnEnter{
    from{
        opacity:0;
        transform:
            translateY(24px)
            scale(.977);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes cxAddOnAmbient{
    0%,100%{
        transform:
            rotate(-14deg)
            translate3d(0,0,0);

        opacity:.70;
    }

    50%{
        transform:
            rotate(-9deg)
            translate3d(-14px,12px,0);

        opacity:1;
    }
}

@keyframes cxAddOnSweep{
    0%,58%{
        transform:
            translateX(0)
            rotate(28deg);

        opacity:0;
    }

    66%{
        opacity:1;
    }

    82%,100%{
        transform:
            translateX(1450px)
            rotate(28deg);

        opacity:0;
    }
}

@keyframes cxAddOnIcon{
    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-5px);
    }
}

@keyframes cxGreenState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(158,239,79,.10),
            0 0 16px rgba(178,255,91,.50);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(158,239,79,.16),
            0 0 27px rgba(178,255,91,.80);
    }
}

@keyframes cxBlueState{
    0%,100%{
        box-shadow:
            0 0 0 8px rgba(82,190,255,.10),
            0 0 16px rgba(79,195,255,.52);
    }

    50%{
        box-shadow:
            0 0 0 11px rgba(82,190,255,.16),
            0 0 27px rgba(79,195,255,.82);
    }
}

/* responsive */
@media(max-width:1000px){

    .r7-addons-page .cx-addon-grid{
        width:min(100%,920px) !important;
        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:24px 22px 22px !important;
    }

    .r7-addons-page
    .cx-addon-card h2{
        font-size:34px !important;
    }

    .r7-addons-page
    .cx-addon-card .section-kicker{
        right:22px !important;

        padding:
            9px 13px !important;

        font-size:9px !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:120px !important;
    }
}

/* stack only on narrow screens */
@media(max-width:720px){

    .r7-addons-page .cx-addon-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        min-height:0 !important;
        height:auto !important;
    }
}

@media(max-width:520px){

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        padding:21px !important;
        border-radius:24px !important;
    }

    .r7-addons-page
    .cx-addon-feature-list{
        grid-template-columns:
            1fr !important;
    }

    .r7-addons-page
    .cx-addon-card > .commerce-icon + div{
        padding-right:0 !important;
    }
}

@media(prefers-reduced-motion:reduce){

    .r7-addons-page *,
    .r7-addons-page *::before,
    .r7-addons-page *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* CODSHIPX R118-R8-R10 USER-PROVIDED CARD BACKGROUNDS */
.r7-addons-page .cx-addon-grid{width:min(100%,1080px)!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important;align-items:stretch!important}
.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice{position:relative!important;isolation:isolate!important;overflow:hidden!important;min-height:610px!important;height:100%!important;background-repeat:no-repeat!important;background-size:116% auto!important;background-position:50% 50%!important;border-radius:29px!important}
.r7-addons-page .cx-addon-codi{background-color:#020603!important;background-image:url('/brand/addons/codi-premium-bg.webp')!important;border:1px solid rgba(169,255,69,.92)!important;box-shadow:0 26px 58px rgba(4,20,5,.30),0 0 0 2px rgba(155,240,37,.16),0 0 32px rgba(137,242,25,.25)!important;animation:cxAddOnEnter .68s cubic-bezier(.2,.82,.22,1) both,cxUserGreenBg 14s ease-in-out infinite,cxUserGreenGlow 3.8s ease-in-out infinite!important}
.r7-addons-page .cx-addon-voice{background-color:#03163f!important;background-image:url('/brand/addons/voice-premium-bg.webp')!important;border:1px solid rgba(68,203,255,.96)!important;box-shadow:0 26px 58px rgba(0,41,139,.31),0 0 0 2px rgba(25,159,255,.18),0 0 34px rgba(0,174,255,.28)!important;animation:cxAddOnEnter .68s cubic-bezier(.2,.82,.22,1) .08s both,cxUserBlueBg 14s ease-in-out infinite .08s,cxUserBlueGlow 3.8s ease-in-out infinite .08s!important}
.r7-addons-page .cx-addon-codi::before,.r7-addons-page .cx-addon-voice::before{content:""!important;position:absolute!important;inset:0!important;width:auto!important;height:auto!important;top:0!important;right:0!important;bottom:0!important;left:0!important;border-radius:inherit!important;transform:none!important;animation:none!important;pointer-events:none!important;z-index:0!important}
.r7-addons-page .cx-addon-codi::before{background:rgba(0,7,2,.24)!important}.r7-addons-page .cx-addon-voice::before{background:rgba(0,12,45,.16)!important}
.r7-addons-page .cx-addon-codi::after,.r7-addons-page .cx-addon-voice::after{content:""!important;position:absolute!important;width:62px!important;height:900px!important;top:-160px!important;left:-220px!important;right:auto!important;bottom:auto!important;border-radius:0!important;transform:rotate(28deg)!important;background:rgba(255,255,255,.035)!important;opacity:.7!important;pointer-events:none!important;z-index:1!important;animation:cxUserSheen 9s ease-in-out infinite!important}
.r7-addons-page .cx-addon-codi>*,.r7-addons-page .cx-addon-voice>*{position:relative!important;z-index:2!important}
.r7-addons-page .cx-addon-codi .cx-addon-feature-list>span{background:rgba(5,18,8,.68)!important;border-color:rgba(126,237,67,.30)!important;backdrop-filter:blur(7px)!important}
.r7-addons-page .cx-addon-voice .cx-addon-feature-list>span{background:rgba(4,45,122,.61)!important;border-color:rgba(97,203,255,.34)!important;backdrop-filter:blur(7px)!important}
.r7-addons-page .cx-addon-codi .v1b4-addon-price,.r7-addons-page .cx-addon-codi .v1b1-addon-status{background:rgba(5,20,8,.69)!important;border-color:rgba(134,239,72,.30)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-voice .v1b4-addon-price,.r7-addons-page .cx-addon-voice .v1b1-addon-status{background:rgba(4,46,125,.63)!important;border-color:rgba(101,207,255,.34)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-codi .section-kicker{background:rgba(27,76,8,.84)!important;border-color:rgba(188,255,96,.95)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-voice .section-kicker{background:rgba(10,74,187,.86)!important;border-color:rgba(137,220,255,.98)!important;backdrop-filter:blur(8px)!important}
.r7-addons-page .cx-addon-codi .commerce-icon{background:rgba(5,20,8,.78)!important;backdrop-filter:blur(8px)!important}.r7-addons-page .cx-addon-voice .commerce-icon{background:rgba(9,80,194,.82)!important;backdrop-filter:blur(8px)!important}
@keyframes cxUserGreenBg{0%,100%{background-position:48% 48%;background-size:116% auto}50%{background-position:52% 52%;background-size:121% auto}}
@keyframes cxUserBlueBg{0%,100%{background-position:50% 47%;background-size:116% auto}50%{background-position:54% 52%;background-size:121% auto}}
@keyframes cxUserGreenGlow{0%,100%{box-shadow:0 26px 58px rgba(4,20,5,.30),0 0 0 2px rgba(155,240,37,.14),0 0 28px rgba(137,242,25,.21)}50%{box-shadow:0 30px 64px rgba(4,20,5,.34),0 0 0 2px rgba(171,255,44,.24),0 0 42px rgba(146,255,24,.34)}}
@keyframes cxUserBlueGlow{0%,100%{box-shadow:0 26px 58px rgba(0,41,139,.31),0 0 0 2px rgba(25,159,255,.16),0 0 29px rgba(0,174,255,.23)}50%{box-shadow:0 30px 64px rgba(0,41,139,.36),0 0 0 2px rgba(66,205,255,.27),0 0 44px rgba(0,187,255,.38)}}
@keyframes cxUserSheen{0%,58%{transform:translateX(0) rotate(28deg);opacity:0}66%{opacity:.7}82%,100%{transform:translateX(1500px) rotate(28deg);opacity:0}}
@media(max-width:720px){.r7-addons-page .cx-addon-grid{grid-template-columns:1fr!important}.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice{background-size:cover!important}}
@media(prefers-reduced-motion:reduce){.r7-addons-page .cx-addon-codi,.r7-addons-page .cx-addon-voice,.r7-addons-page .cx-addon-codi::after,.r7-addons-page .cx-addon-voice::after{animation:none!important}}

/* =========================================================
   CODSHIPX R118-R8-R11-R1
   TRUE COMPACT FIT USING ACTUAL DOM CLASSES
   ========================================================= */

/* bring the card row closer to the page header */
.r7-addons-page .cx-addon-grid{
    width:min(100%,980px) !important;

    margin:
        8px auto 24px !important;

    gap:18px !important;

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

    align-items:stretch !important;
}

/* actual semantic cards */
.r7-addons-page .cx-addon-codi,
.r7-addons-page .cx-addon-voice{
    min-height:535px !important;
    height:535px !important;

    padding:
        17px 20px 18px !important;

    border-radius:
        25px !important;

    background-size:
        112% auto !important;

    background-position:
        center 48% !important;
}

/* kill the large empty top zone */
.r7-addons-page
.cx-addon-card > .commerce-icon{
    width:60px !important;
    height:60px !important;
    min-width:60px !important;

    margin:0 0 8px !important;

    border-radius:
        17px !important;
}

/* smaller Codi brand graphic */
.r7-addons-page
.cx-addon-codi
.commerce-icon::before{
    width:44px !important;
    height:44px !important;

    border-radius:
        12px !important;
}

/* resize Voice mic geometry with smaller icon */
.r7-addons-page
.cx-addon-voice
.commerce-icon::before{
    width:14px !important;
    height:25px !important;

    border-width:
        2.5px !important;
}

.r7-addons-page
.cx-addon-voice
.commerce-icon::after{
    left:17px !important;
    top:22px !important;

    width:25px !important;
    height:21px !important;

    border-left-width:
        2.5px !important;

    border-right-width:
        2.5px !important;

    border-bottom-width:
        2.5px !important;
}

/* badge comes higher and tighter */
.r7-addons-page
.cx-addon-card .section-kicker{
    top:19px !important;
    right:19px !important;

    padding:
        8px 14px !important;

    font-size:
        9px !important;
}

/* remove the old huge reserved header room */
.r7-addons-page
.cx-addon-card > .commerce-icon + div{
    padding-right:
        115px !important;
}

.r7-addons-page
.cx-addon-card h2{
    margin:
        7px 0 5px !important;

    font-size:
        33px !important;

    line-height:
        1 !important;
}

.r7-addons-page
.cx-addon-card p{
    min-height:
        37px !important;

    margin:
        0 !important;

    font-size:
        12.5px !important;

    line-height:
        1.30 !important;

    max-width:
        95% !important;
}

/* compact 2x2 feature area */
.r7-addons-page
.cx-addon-feature-list{
    margin:
        13px 0 0 !important;

    gap:
        8px !important;
}

.r7-addons-page
.cx-addon-feature-list > span{
    min-height:
        66px !important;

    grid-template-columns:
        35px minmax(0,1fr) !important;

    column-gap:
        8px !important;

    padding:
        8px 9px !important;

    border-radius:
        13px !important;

    font-size:
        10px !important;

    line-height:
        1.10 !important;
}

.r7-addons-page
.cx-addon-feature-list > span i{
    width:
        32px !important;

    height:
        32px !important;

    border-radius:
        10px !important;
}

.r7-addons-page
.cx-addon-feature-list > span i::before{
    font-size:
        16px !important;
}

.r7-addons-page
.cx-addon-feature-list > span::after{
    margin-top:
        3px !important;

    font-size:
        8.5px !important;

    line-height:
        1.12 !important;
}

/* price block */
.r7-addons-page
.v1b4-addon-price{
    min-height:
        68px !important;

    margin:
        13px 0 0 !important;

    padding:
        12px 15px 10px !important;

    border-radius:
        15px 15px 0 0 !important;
}

.r7-addons-page
.v1b4-addon-price strong{
    font-size:
        24px !important;
}

.r7-addons-page
.v1b4-addon-price small{
    margin-top:
        6px !important;

    font-size:
        9.5px !important;
}

/* status block */
.r7-addons-page
.v1b1-addon-status{
    min-height:
        63px !important;

    margin:
        0 0 12px !important;

    padding:
        10px 72px 10px 52px !important;

    border-radius:
        0 0 15px 15px !important;
}

.r7-addons-page
.v1b1-addon-status > span{
    font-size:
        13px !important;
}

.r7-addons-page
.v1b1-addon-status > small{
    margin-top:
        4px !important;

    font-size:
        8.5px !important;
}

.r7-addons-page
.v1b1-addon-status > span::before{
    left:
        20px !important;

    width:
        14px !important;

    height:
        14px !important;
}

.r7-addons-page
.cx-addon-codi
.v1b1-addon-status:has(> span.active)::after{
    right:
        13px !important;

    padding:
        7px 12px !important;

    font-size:
        9px !important;
}

/* compact CTA */
.r7-addons-page
.cx-addon-card .button{
    min-height:
        46px !important;

    border-radius:
        14px !important;

    font-size:
        11.5px !important;

    gap:
        10px !important;
}

.r7-addons-page
.cx-addon-card .button.primary::after{
    font-size:
        17px !important;
}

/* keep artwork visible but not oversized */
.r7-addons-page .cx-addon-codi{
    background-position:
        center 48% !important;
}

.r7-addons-page .cx-addon-voice{
    background-position:
        center 48% !important;
}

/* slightly calmer sheen on the smaller cards */
.r7-addons-page
.cx-addon-codi::after,
.r7-addons-page
.cx-addon-voice::after{
    width:
        48px !important;
}

/* mobile */
@media(max-width:720px){

    .r7-addons-page
    .cx-addon-grid{
        width:100% !important;

        grid-template-columns:
            1fr !important;

        margin-top:
            8px !important;
    }

    .r7-addons-page
    .cx-addon-codi,
    .r7-addons-page
    .cx-addon-voice{
        height:auto !important;
        min-height:0 !important;

        padding:
            18px !important;

        background-size:
            cover !important;
    }
}

/* =========================================================
   CODSHIPX R126-R1-B
   CODI DASHBOARD PREMIUM LIVE REACTOR
   ========================================================= */

/* whole visual */
.cx-dv2-codi-visual{
    isolation:isolate !important;

    transition:
        box-shadow .35s ease,
        border-color .35s ease,
        filter .35s ease !important;

    box-shadow:
        inset 0 0 0 1px rgba(111,221,255,.08),
        inset 0 0 55px rgba(10,101,182,.10),
        0 14px 36px rgba(1,31,67,.10) !important;

    animation:
        cxCodiVisualBreath
        5.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual:hover{
    box-shadow:
        inset 0 0 0 1px rgba(144,239,92,.17),
        inset 0 0 72px rgba(22,117,190,.14),
        0 18px 44px rgba(1,31,67,.14) !important;
}

/* ---------------------------------------------------------
   ORBIT SYSTEM
   No layout transforms changed.
   --------------------------------------------------------- */

.cx-dv2-codi-visual .cx-dv2-orbit{
    border-color:
        rgba(112,222,255,.18) !important;

    box-shadow:
        0 0 15px rgba(68,189,255,.06),
        inset 0 0 16px rgba(68,189,255,.04) !important;

    animation:
        cxCodiOrbitPulse
        4.6s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-b{
    animation-delay:
        -1.55s !important;

    border-color:
        rgba(157,227,31,.20) !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-c{
    animation-delay:
        -3.05s !important;
}

/* orbit points */
.cx-dv2-codi-visual .cx-dv2-orbit-dot{
    background:
        #8eea2c !important;

    box-shadow:
        0 0 0 4px rgba(142,234,44,.07),
        0 0 16px rgba(142,234,44,.68) !important;

    animation:
        cxCodiSignalDot
        2.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-b{
    animation-delay:
        -.9s !important;

    background:
        #45ccff !important;

    box-shadow:
        0 0 0 4px rgba(69,204,255,.07),
        0 0 16px rgba(69,204,255,.66) !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-c{
    animation-delay:
        -1.8s !important;
}

/* ---------------------------------------------------------
   SPARKLES
   --------------------------------------------------------- */

.cx-dv2-codi-visual .cx-dv2-codi-spark{
    color:
        #b8ff59 !important;

    filter:
        drop-shadow(0 0 7px rgba(184,255,89,.62)) !important;

    animation:
        cxCodiSpark
        2.5s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-b{
    color:
        #5dd6ff !important;

    filter:
        drop-shadow(0 0 7px rgba(93,214,255,.64)) !important;

    animation-delay:
        -1.15s !important;
}

/* ---------------------------------------------------------
   CODI CORE / LOGO
   Animate image only so existing positioning remains intact.
   --------------------------------------------------------- */

.cx-dv2-codi-core{
    box-shadow:
        0 0 0 1px rgba(158,227,31,.18),
        0 0 0 7px rgba(158,227,31,.035),
        0 0 30px rgba(93,214,255,.15) !important;

    transition:
        box-shadow .3s ease !important;
}

.cx-dv2-codi-core img{
    transform-origin:
        center center !important;

    filter:
        drop-shadow(0 5px 12px rgba(0,0,0,.22))
        drop-shadow(0 0 8px rgba(157,227,31,.14)) !important;

    animation:
        cxCodiLogoFloat
        3.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 1px rgba(175,248,67,.29),
        0 0 0 8px rgba(158,227,31,.055),
        0 0 38px rgba(122,231,48,.22) !important;
}

/* ---------------------------------------------------------
   ONLINE BADGE
   --------------------------------------------------------- */

.cx-dv2-codi-online{
    transition:
        box-shadow .25s ease,
        border-color .25s ease !important;
}

.cx-dv2-codi-online.online{
    border-color:
        rgba(160,239,48,.36) !important;

    box-shadow:
        0 8px 22px rgba(47,111,15,.12),
        0 0 20px rgba(158,227,31,.08) !important;

    animation:
        cxCodiOnlineBadge
        3.5s ease-in-out infinite !important;
}

.cx-dv2-codi-online.online i{
    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.10),
        0 0 14px rgba(157,227,31,.72) !important;

    animation:
        cxCodiLiveDot
        2.2s ease-in-out infinite !important;
}

.cx-dv2-codi-online.checking i{
    background:
        #55cfff !important;

    box-shadow:
        0 0 13px rgba(85,207,255,.62) !important;
}

.cx-dv2-codi-online.offline i{
    background:
        #9aa8b9 !important;
}

/* ---------------------------------------------------------
   STATUS GLASS CARD
   --------------------------------------------------------- */

.cx-dv2-codi-status{
    border-color:
        rgba(121,199,255,.17) !important;

    box-shadow:
        0 14px 32px rgba(1,26,55,.17),
        inset 0 0 0 1px rgba(255,255,255,.025) !important;

    transition:
        box-shadow .3s ease,
        border-color .3s ease,
        filter .3s ease !important;

    animation:
        cxCodiStatusBreath
        5.1s ease-in-out infinite !important;
}

.cx-dv2-codi-status:hover{
    border-color:
        rgba(157,227,31,.26) !important;

    box-shadow:
        0 18px 38px rgba(1,26,55,.22),
        0 0 22px rgba(157,227,31,.07),
        inset 0 0 0 1px rgba(255,255,255,.035) !important;
}

.cx-dv2-codi-status.online strong{
    color:
        #ffffff !important;

    text-shadow:
        0 0 16px rgba(158,227,31,.10) !important;
}

.cx-dv2-codi-status.online > span > i{
    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 12px rgba(157,227,31,.70) !important;

    animation:
        cxCodiLiveDot
        2.2s ease-in-out infinite !important;
}

.cx-dv2-codi-status.checking > span > i{
    background:
        #55cfff !important;

    box-shadow:
        0 0 12px rgba(85,207,255,.62) !important;
}

.cx-dv2-codi-status.offline > span > i{
    background:
        #98a5b5 !important;
}

/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes cxCodiVisualBreath{
    0%,100%{
        filter:
            brightness(1)
            saturate(1);
    }

    50%{
        filter:
            brightness(1.025)
            saturate(1.06);
    }
}

@keyframes cxCodiOrbitPulse{
    0%,100%{
        opacity:.42;

        box-shadow:
            0 0 12px rgba(68,189,255,.04),
            inset 0 0 12px rgba(68,189,255,.025);
    }

    50%{
        opacity:.85;

        box-shadow:
            0 0 22px rgba(78,202,255,.10),
            inset 0 0 18px rgba(157,227,31,.035);
    }
}

@keyframes cxCodiSignalDot{
    0%,100%{
        opacity:.48;
        filter:brightness(.92);
    }

    50%{
        opacity:1;
        filter:brightness(1.25);
    }
}

@keyframes cxCodiSpark{
    0%,100%{
        opacity:.30;
        filter:
            brightness(.95)
            drop-shadow(0 0 4px currentColor);
    }

    50%{
        opacity:1;
        filter:
            brightness(1.35)
            drop-shadow(0 0 10px currentColor);
    }
}

@keyframes cxCodiLogoFloat{
    0%,100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-4px)
            scale(1.035);
    }
}

@keyframes cxCodiOnlineBadge{
    0%,100%{
        filter:
            brightness(1);
    }

    50%{
        filter:
            brightness(1.08);
    }
}

@keyframes cxCodiLiveDot{
    0%,100%{
        opacity:.75;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.07),
            0 0 8px rgba(157,227,31,.46);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 7px rgba(157,227,31,.035),
            0 0 18px rgba(157,227,31,.90);
    }
}

@keyframes cxCodiStatusBreath{
    0%,100%{
        filter:
            brightness(1);
    }

    50%{
        filter:
            brightness(1.025);
    }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){

    .cx-dv2-codi-visual,
    .cx-dv2-codi-visual *,
    .cx-dv2-codi-visual *::before,
    .cx-dv2-codi-visual *::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-B */

/* =========================================================
   R126-R1-C — CODI AI REACTOR V2
   ========================================================= */

/* remove the cheap inner square/frame */
.cx-dv2-codi-visual{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:100% !important;
    min-height:290px !important;

    border:0 !important;
    outline:0 !important;

    background:transparent !important;

    box-shadow:none !important;

    filter:none !important;
    animation:none !important;
}

/* soft AI energy field */
.cx-dv2-codi-visual::before{
    content:"" !important;

    position:absolute !important;

    width:190px !important;
    height:190px !important;

    left:35% !important;
    top:46% !important;

    transform:translate(-50%,-50%) !important;

    border-radius:50% !important;

    background:rgba(72,202,255,.08) !important;

    box-shadow:
        0 0 38px rgba(73,205,255,.18),
        0 0 72px rgba(157,227,31,.12) !important;

    filter:blur(12px) !important;

    pointer-events:none !important;

    animation:
        cxReactorAura
        4.2s ease-in-out infinite !important;

    z-index:0 !important;
}

/* secondary glow */
.cx-dv2-codi-visual::after{
    content:"" !important;

    position:absolute !important;

    width:105px !important;
    height:105px !important;

    left:35% !important;
    top:46% !important;

    transform:translate(-50%,-50%) !important;

    border-radius:50% !important;

    background:rgba(157,227,31,.07) !important;

    box-shadow:
        0 0 34px rgba(157,227,31,.24) !important;

    pointer-events:none !important;

    animation:
        cxReactorCoreGlow
        2.8s ease-in-out infinite !important;

    z-index:0 !important;
}

/* =========================================================
   ORBIT SYSTEM
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-orbit{
    position:absolute !important;

    left:35% !important;
    top:46% !important;

    border-radius:50% !important;

    background:transparent !important;

    pointer-events:none !important;

    transform-origin:center !important;

    z-index:1 !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-a{
    width:150px !important;
    height:150px !important;

    margin-left:-75px !important;
    margin-top:-75px !important;

    border:
        1px solid rgba(105,213,255,.31) !important;

    box-shadow:
        0 0 20px rgba(73,205,255,.09) !important;

    animation:
        cxOrbitA
        8s linear infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-b{
    width:205px !important;
    height:205px !important;

    margin-left:-102.5px !important;
    margin-top:-102.5px !important;

    border:
        1px dashed rgba(157,227,31,.26) !important;

    box-shadow:
        0 0 22px rgba(157,227,31,.07) !important;

    animation:
        cxOrbitB
        12s linear infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit.orbit-c{
    width:264px !important;
    height:264px !important;

    margin-left:-132px !important;
    margin-top:-132px !important;

    border:
        1px solid rgba(89,181,255,.14) !important;

    box-shadow:
        inset 0 0 28px rgba(54,163,255,.035) !important;

    animation:
        cxOrbitC
        16s linear infinite !important;
}

/* =========================================================
   SIGNAL PARTICLES
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-orbit-dot{
    position:absolute !important;

    width:7px !important;
    height:7px !important;

    margin:0 !important;

    border-radius:50% !important;

    z-index:4 !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-a{
    left:15% !important;
    top:66% !important;

    background:#54e4ff !important;

    box-shadow:
        0 0 0 5px rgba(84,228,255,.08),
        0 0 16px rgba(84,228,255,.90) !important;

    animation:
        cxSignalA
        2.5s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-b{
    left:58% !important;
    top:18% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 5px rgba(157,227,31,.07),
        0 0 16px rgba(157,227,31,.78) !important;

    animation:
        cxSignalB
        3.1s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-orbit-dot.dot-c{
    left:61% !important;
    top:71% !important;

    background:#68d7ff !important;

    box-shadow:
        0 0 14px rgba(104,215,255,.72) !important;

    animation:
        cxSignalC
        3.6s ease-in-out infinite !important;
}

/* =========================================================
   SPARKS
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-spark{
    position:absolute !important;

    margin:0 !important;

    z-index:5 !important;

    filter:
        drop-shadow(0 0 8px currentColor) !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-a{
    left:11% !important;
    top:27% !important;

    color:#b9ff47 !important;

    animation:
        cxSparkA
        3.2s ease-in-out infinite !important;
}

.cx-dv2-codi-visual .cx-dv2-codi-spark.spark-b{
    left:62% !important;
    top:29% !important;

    color:#5fddff !important;

    animation:
        cxSparkB
        2.7s ease-in-out infinite !important;
}

/* =========================================================
   BIG CODI CORE
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-core{
    position:absolute !important;

    left:35% !important;
    top:46% !important;

    width:112px !important;
    height:112px !important;

    margin:0 !important;

    transform:
        translate(-50%,-50%) !important;

    display:grid !important;
    place-items:center !important;

    border-radius:30px !important;

    background:
        #071636 !important;

    border:
        1px solid rgba(145,232,255,.33) !important;

    box-shadow:
        0 0 0 6px rgba(76,201,255,.055),
        0 0 0 12px rgba(157,227,31,.025),
        0 15px 35px rgba(0,15,45,.30),
        0 0 40px rgba(65,205,255,.17) !important;

    animation:
        cxCoreFloat
        4s ease-in-out infinite !important;

    z-index:6 !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-core img{
    width:82px !important;
    height:82px !important;

    max-width:none !important;

    object-fit:cover !important;

    border-radius:22px !important;

    transform:none !important;

    animation:
        cxLogoEnergy
        3.4s ease-in-out infinite !important;

    filter:
        drop-shadow(0 7px 14px rgba(0,0,0,.30))
        drop-shadow(0 0 10px rgba(157,227,31,.18)) !important;
}

/* =========================================================
   ONLINE BADGE — separate from status card
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-online{
    position:absolute !important;

    left:35% !important;
    top:73% !important;

    transform:
        translateX(-50%) !important;

    margin:0 !important;

    min-width:112px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:7px !important;

    padding:
        8px 13px !important;

    border-radius:999px !important;

    background:
        rgba(4,30,51,.94) !important;

    border:
        1px solid rgba(157,227,31,.27) !important;

    box-shadow:
        0 10px 26px rgba(0,15,40,.22),
        0 0 18px rgba(157,227,31,.10) !important;

    color:#bfff55 !important;

    font-size:9px !important;
    font-weight:900 !important;
    letter-spacing:.055em !important;

    white-space:nowrap !important;

    z-index:8 !important;

    animation:
        cxOnlineFloat
        3.8s ease-in-out infinite !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-online i{
    width:8px !important;
    height:8px !important;

    margin:0 !important;

    border-radius:50% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.09),
        0 0 13px rgba(157,227,31,.92) !important;

    animation:
        cxLivePulseV2
        1.9s ease-in-out infinite !important;
}

/* =========================================================
   STATUS CARD — completely separated to the right
   ========================================================= */

.cx-dv2-codi-visual .cx-dv2-codi-status{
    position:absolute !important;

    right:4.5% !important;
    top:50% !important;

    left:auto !important;
    bottom:auto !important;

    width:184px !important;
    min-width:184px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    box-sizing:border-box !important;

    padding:
        18px 18px 16px !important;

    border-radius:
        20px !important;

    background:
        rgba(5,31,65,.94) !important;

    border:
        1px solid rgba(94,194,255,.20) !important;

    box-shadow:
        0 20px 42px rgba(0,13,35,.27),
        0 0 0 1px rgba(255,255,255,.02),
        0 0 26px rgba(71,192,255,.07) !important;

    backdrop-filter:
        blur(12px) !important;

    filter:none !important;

    z-index:9 !important;

    animation:
        cxStatusFloatV2
        4.6s ease-in-out infinite !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status small{
    display:block !important;

    margin:0 0 8px !important;

    color:
        #89a7c7 !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .11em !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status strong{
    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        18px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.02em !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status > span{
    display:flex !important;

    align-items:center !important;

    gap:8px !important;

    margin-top:12px !important;

    color:
        #bfd0e1 !important;

    font-size:
        10px !important;

    line-height:
        1.2 !important;
}

.cx-dv2-codi-visual
.cx-dv2-codi-status > span > i{
    width:8px !important;
    height:8px !important;

    flex:
        0 0 8px !important;

    border-radius:50% !important;

    background:#9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 13px rgba(157,227,31,.76) !important;

    animation:
        cxLivePulseV2
        1.9s ease-in-out infinite !important;
}

/* hover: reactor becomes more alive */
.cx-dv2-codi-visual:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 7px rgba(76,201,255,.075),
        0 0 0 14px rgba(157,227,31,.035),
        0 18px 42px rgba(0,15,45,.34),
        0 0 52px rgba(91,218,255,.24) !important;
}

.cx-dv2-codi-visual:hover
.cx-dv2-codi-status{
    border-color:
        rgba(157,227,31,.24) !important;

    box-shadow:
        0 22px 46px rgba(0,13,35,.31),
        0 0 28px rgba(157,227,31,.08) !important;
}

/* =========================================================
   ANIMATION ENGINE
   ========================================================= */

@keyframes cxReactorAura{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.92);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);

        opacity:1;
    }
}

@keyframes cxReactorCoreGlow{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.92);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.08);

        opacity:1;
    }
}

@keyframes cxOrbitA{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes cxOrbitB{
    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }
}

@keyframes cxOrbitC{
    0%,100%{
        transform:
            scale(.97);

        opacity:.36;
    }

    50%{
        transform:
            scale(1.03);

        opacity:.74;
    }
}

@keyframes cxCoreFloat{
    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-6px);
    }
}

@keyframes cxLogoEnergy{
    0%,100%{
        transform:
            scale(1);
    }

    50%{
        transform:
            scale(1.045);
    }
}

@keyframes cxOnlineFloat{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-3px);
    }
}

@keyframes cxStatusFloatV2{
    0%,100%{
        transform:
            translateY(-50%)
            translateX(0);
    }

    50%{
        transform:
            translateY(-50%)
            translateX(-4px);
    }
}

@keyframes cxLivePulseV2{
    0%,100%{
        opacity:.66;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.06),
            0 0 8px rgba(157,227,31,.48);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 7px rgba(157,227,31,.03),
            0 0 18px rgba(157,227,31,.96);
    }
}

@keyframes cxSignalA{
    0%,100%{
        transform:
            translateY(0)
            scale(.82);

        opacity:.45;
    }

    50%{
        transform:
            translateY(-7px)
            scale(1.2);

        opacity:1;
    }
}

@keyframes cxSignalB{
    0%,100%{
        transform:
            translateX(0)
            scale(.82);

        opacity:.48;
    }

    50%{
        transform:
            translateX(7px)
            scale(1.18);

        opacity:1;
    }
}

@keyframes cxSignalC{
    0%,100%{
        transform:
            translateY(0);

        opacity:.35;
    }

    50%{
        transform:
            translateY(6px);

        opacity:.88;
    }
}

@keyframes cxSparkA{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.82);

        opacity:.35;
    }

    50%{
        transform:
            translateY(-7px)
            rotate(15deg)
            scale(1.16);

        opacity:1;
    }
}

@keyframes cxSparkB{
    0%,100%{
        transform:
            translateY(0)
            scale(.82);

        opacity:.30;
    }

    50%{
        transform:
            translateY(6px)
            scale(1.18);

        opacity:.92;
    }
}

/* responsive */
@media(max-width:1050px){

    .cx-dv2-codi-visual
    .cx-dv2-codi-status{
        width:165px !important;
        min-width:165px !important;

        right:2.5% !important;

        padding:
            15px !important;
    }

    .cx-dv2-codi-visual
    .cx-dv2-codi-core{
        left:33% !important;
    }

    .cx-dv2-codi-visual::before,
    .cx-dv2-codi-visual::after,
    .cx-dv2-codi-visual .cx-dv2-orbit{
        left:33% !important;
    }

    .cx-dv2-codi-visual
    .cx-dv2-codi-online{
        left:33% !important;
    }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){

    .cx-dv2-codi-visual,
    .cx-dv2-codi-visual *,
    .cx-dv2-codi-visual::before,
    .cx-dv2-codi-visual::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-C */

/* =========================================================
   R126-R1-D — CODI HOLOGRAPHIC CORE V3
   Completely isolated by .cx-codi-holo-v3
   ========================================================= */

/* HARD RESET THE OLD RECTANGULAR VISUAL */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3{
    position:relative !important;

    width:100% !important;
    max-width:none !important;

    height:100% !important;
    min-height:330px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:visible !important;

    border:0 !important;
    outline:0 !important;

    border-radius:0 !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    filter:none !important;

    isolation:isolate !important;

    animation:none !important;
}

/* Ambient holographic field — NO rectangular frame */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3::before{
    content:"" !important;

    position:absolute !important;

    left:43% !important;
    top:49% !important;

    width:350px !important;
    height:350px !important;

    transform:
        translate(-50%,-50%) !important;

    border:0 !important;
    outline:0 !important;

    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(73,214,255,.15) 0%,
            rgba(49,154,255,.075) 27%,
            rgba(157,227,31,.035) 44%,
            transparent 70%
        ) !important;

    box-shadow:none !important;

    filter:
        blur(5px) !important;

    pointer-events:none !important;

    z-index:0 !important;

    animation:
        cxHoloField
        4.8s ease-in-out infinite !important;
}

/* small LIVE AI chip */
html body
.cx-dv2-codi-visual.cx-codi-holo-v3::after{
    content:"●  CODI AI · LIVE" !important;

    position:absolute !important;

    right:-10px !important;
    top:24px !important;

    width:auto !important;
    height:auto !important;

    padding:
        8px 12px !important;

    border-radius:
        999px !important;

    background:
        rgba(3,25,55,.70) !important;

    border:
        1px solid rgba(92,211,255,.18) !important;

    color:
        #8fe8ff !important;

    font-size:
        8px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .10em !important;

    line-height:
        1 !important;

    box-shadow:
        0 10px 26px rgba(0,11,31,.20),
        0 0 18px rgba(67,204,255,.08) !important;

    backdrop-filter:
        blur(12px) !important;

    pointer-events:none !important;

    z-index:12 !important;

    animation:
        cxLiveChip
        3.2s ease-in-out infinite !important;
}

/* =========================================================
   CORE
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-core{
    position:absolute !important;

    left:42% !important;
    top:49% !important;

    width:136px !important;
    height:136px !important;

    margin:0 !important;
    padding:0 !important;

    transform:
        translate(-50%,-50%) !important;

    display:grid !important;
    place-items:center !important;

    border-radius:
        38px !important;

    background:
        rgba(4,18,45,.88) !important;

    border:
        1px solid rgba(106,223,255,.38) !important;

    outline:0 !important;

    box-shadow:
        0 0 0 7px rgba(76,203,255,.055),
        0 0 0 14px rgba(157,227,31,.028),
        0 22px 46px rgba(0,12,37,.34),
        0 0 50px rgba(68,210,255,.20) !important;

    z-index:8 !important;

    animation:
        cxHoloCoreFloat
        4.1s ease-in-out infinite !important;
}

/* rotating luminous ring */
html body
.cx-codi-holo-v3
.cx-dv2-codi-core::before{
    content:"" !important;

    position:absolute !important;

    inset:-19px !important;

    border-radius:
        47px !important;

    border:
        1px solid transparent !important;

    border-top-color:
        rgba(92,226,255,.88) !important;

    border-right-color:
        rgba(157,227,31,.74) !important;

    border-bottom-color:
        rgba(80,163,255,.20) !important;

    box-shadow:
        0 0 22px rgba(77,214,255,.11) !important;

    pointer-events:none !important;

    animation:
        cxCoreRingSpin
        7.5s linear infinite !important;
}

/* pulse halo */
html body
.cx-codi-holo-v3
.cx-dv2-codi-core::after{
    content:"" !important;

    position:absolute !important;

    inset:-40px !important;

    border-radius:50% !important;

    border:
        1px solid rgba(157,227,31,.13) !important;

    box-shadow:
        0 0 34px rgba(157,227,31,.08) !important;

    pointer-events:none !important;

    animation:
        cxCoreHalo
        3.2s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-core img{
    width:94px !important;
    height:94px !important;

    max-width:none !important;

    object-fit:cover !important;

    border-radius:
        28px !important;

    transform:none !important;

    box-shadow:
        0 10px 26px rgba(0,0,0,.24) !important;

    filter:
        drop-shadow(0 0 11px rgba(157,227,31,.20))
        drop-shadow(0 0 18px rgba(74,206,255,.12)) !important;

    animation:
        cxLogoAlive
        3s ease-in-out infinite !important;
}

/* =========================================================
   ORBITS
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-orbit{
    position:absolute !important;

    left:42% !important;
    top:49% !important;

    margin:0 !important;

    border-radius:50% !important;

    background:
        transparent !important;

    box-shadow:none !important;

    pointer-events:none !important;

    transform-origin:
        center !important;

    z-index:2 !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-a{
    width:190px !important;
    height:190px !important;

    border:
        1px solid rgba(87,215,255,.27) !important;

    animation:
        cxOrbitOne
        8s linear infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-b{
    width:250px !important;
    height:250px !important;

    border:
        1px dashed rgba(157,227,31,.24) !important;

    animation:
        cxOrbitTwo
        13s linear infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit.orbit-c{
    width:318px !important;
    height:318px !important;

    border:
        1px solid rgba(95,171,255,.105) !important;

    animation:
        cxOrbitThree
        5s ease-in-out infinite !important;
}

/* =========================================================
   MOVING SIGNAL POINTS
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot{
    position:absolute !important;

    width:7px !important;
    height:7px !important;

    margin:0 !important;

    border-radius:50% !important;

    z-index:6 !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-a{
    left:15% !important;
    top:66% !important;

    background:
        #59e5ff !important;

    box-shadow:
        0 0 0 5px rgba(89,229,255,.07),
        0 0 18px rgba(89,229,255,.95) !important;

    animation:
        cxDataNodeA
        2.8s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-b{
    left:56% !important;
    top:18% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 5px rgba(157,227,31,.07),
        0 0 18px rgba(157,227,31,.88) !important;

    animation:
        cxDataNodeB
        3.2s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-orbit-dot.dot-c{
    left:69% !important;
    top:70% !important;

    background:
        #69cfff !important;

    box-shadow:
        0 0 16px rgba(105,207,255,.80) !important;

    animation:
        cxDataNodeC
        3.8s ease-in-out infinite !important;
}

/* =========================================================
   SPARKLES
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark{
    position:absolute !important;

    margin:0 !important;

    z-index:7 !important;

    filter:
        drop-shadow(0 0 9px currentColor) !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark.spark-a{
    left:11% !important;
    top:27% !important;

    color:#bcff4f !important;

    animation:
        cxHoloSparkA
        2.8s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-spark.spark-b{
    left:67% !important;
    top:29% !important;

    color:#66ddff !important;

    animation:
        cxHoloSparkB
        3.3s ease-in-out infinite !important;
}

/* =========================================================
   CODI ONLINE CHIP
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-online{
    position:absolute !important;

    left:42% !important;
    top:78% !important;

    transform:
        translateX(-50%) !important;

    margin:0 !important;

    min-width:
        118px !important;

    padding:
        8px 14px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:8px !important;

    border-radius:
        999px !important;

    background:
        rgba(3,27,48,.83) !important;

    border:
        1px solid rgba(157,227,31,.26) !important;

    color:
        #baff4c !important;

    font-size:
        9px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .055em !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 12px 26px rgba(0,12,32,.23),
        0 0 20px rgba(157,227,31,.08) !important;

    backdrop-filter:
        blur(12px) !important;

    z-index:10 !important;

    animation:
        cxOnlineHover
        3.6s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-online i{
    width:8px !important;
    height:8px !important;

    margin:0 !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.08),
        0 0 13px rgba(157,227,31,.90) !important;

    animation:
        cxOnlinePulse
        1.8s ease-in-out infinite !important;
}

/* =========================================================
   CONNECTED STATUS — compact capsule, not a big box
   ========================================================= */

html body
.cx-codi-holo-v3
.cx-dv2-codi-status{
    position:absolute !important;

    right:-28px !important;
    top:50% !important;

    left:auto !important;
    bottom:auto !important;

    width:172px !important;
    min-width:172px !important;

    min-height:72px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    box-sizing:
        border-box !important;

    padding:
        14px 16px 14px 43px !important;

    border-radius:
        24px !important;

    background:
        rgba(4,27,60,.72) !important;

    border:
        1px solid rgba(101,211,255,.17) !important;

    outline:0 !important;

    box-shadow:
        0 18px 40px rgba(0,10,30,.28),
        0 0 25px rgba(66,200,255,.06) !important;

    backdrop-filter:
        blur(18px) !important;

    filter:none !important;

    z-index:11 !important;

    animation:
        cxStatusCapsule
        4.4s ease-in-out infinite !important;
}

/* remove the bulky CODI STATUS label */
html body
.cx-codi-holo-v3
.cx-dv2-codi-status > small{
    display:none !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > strong{
    display:block !important;

    margin:0 !important;

    color:#fff !important;

    font-size:
        15px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.015em !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span{
    display:block !important;

    margin-top:
        6px !important;

    color:
        #b7cce0 !important;

    font-size:
        9px !important;

    line-height:
        1.1 !important;
}

/* large glowing status node */
html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span > i{
    position:absolute !important;

    left:17px !important;
    top:50% !important;

    width:12px !important;
    height:12px !important;

    transform:
        translateY(-50%) !important;

    margin:0 !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 6px rgba(157,227,31,.075),
        0 0 18px rgba(157,227,31,.90) !important;

    animation:
        cxOnlinePulse
        1.8s ease-in-out infinite !important;
}

/* =========================================================
   INTERACTION
   ========================================================= */

html body
.cx-codi-holo-v3:hover
.cx-dv2-codi-core{
    box-shadow:
        0 0 0 8px rgba(76,203,255,.075),
        0 0 0 16px rgba(157,227,31,.035),
        0 25px 52px rgba(0,12,37,.38),
        0 0 62px rgba(68,210,255,.28) !important;
}

html body
.cx-codi-holo-v3:hover
.cx-dv2-codi-status{
    border-color:
        rgba(157,227,31,.27) !important;

    box-shadow:
        0 20px 44px rgba(0,10,30,.31),
        0 0 28px rgba(157,227,31,.07) !important;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes cxHoloField{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.88);

        opacity:.55;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.12);

        opacity:1;
    }
}

@keyframes cxLiveChip{
    0%,100%{
        opacity:.68;
        transform:translateY(0);
    }

    50%{
        opacity:1;
        transform:translateY(-2px);
    }
}

@keyframes cxHoloCoreFloat{
    0%,100%{
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50%{
        transform:
            translate(-50%,-50%)
            translateY(-7px);
    }
}

@keyframes cxCoreRingSpin{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

@keyframes cxCoreHalo{
    0%,100%{
        transform:scale(.90);
        opacity:.35;
    }

    50%{
        transform:scale(1.10);
        opacity:.90;
    }
}

@keyframes cxLogoAlive{
    0%,100%{
        transform:scale(1);
        filter:
            drop-shadow(0 0 8px rgba(157,227,31,.18));
    }

    50%{
        transform:scale(1.055);
        filter:
            drop-shadow(0 0 17px rgba(157,227,31,.31));
    }
}

@keyframes cxOrbitOne{
    from{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }
}

@keyframes cxOrbitTwo{
    from{
        transform:
            translate(-50%,-50%)
            rotate(360deg);
    }

    to{
        transform:
            translate(-50%,-50%)
            rotate(0deg);
    }
}

@keyframes cxOrbitThree{
    0%,100%{
        transform:
            translate(-50%,-50%)
            scale(.96);

        opacity:.28;
    }

    50%{
        transform:
            translate(-50%,-50%)
            scale(1.05);

        opacity:.68;
    }
}

@keyframes cxDataNodeA{
    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(.75);

        opacity:.35;
    }

    50%{
        transform:
            translate3d(11px,-9px,0)
            scale(1.25);

        opacity:1;
    }
}

@keyframes cxDataNodeB{
    0%,100%{
        transform:
            translate3d(0,0,0)
            scale(.80);

        opacity:.42;
    }

    50%{
        transform:
            translate3d(9px,7px,0)
            scale(1.20);

        opacity:1;
    }
}

@keyframes cxDataNodeC{
    0%,100%{
        transform:
            translate3d(0,0,0);

        opacity:.30;
    }

    50%{
        transform:
            translate3d(-9px,9px,0);

        opacity:.90;
    }
}

@keyframes cxHoloSparkA{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);

        opacity:.25;
    }

    50%{
        transform:
            translateY(-10px)
            rotate(25deg)
            scale(1.25);

        opacity:1;
    }
}

@keyframes cxHoloSparkB{
    0%,100%{
        transform:
            translateY(0)
            rotate(0deg)
            scale(.75);

        opacity:.20;
    }

    50%{
        transform:
            translateY(9px)
            rotate(-20deg)
            scale(1.20);

        opacity:.90;
    }
}

@keyframes cxOnlineHover{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-4px);
    }
}

@keyframes cxOnlinePulse{
    0%,100%{
        opacity:.65;

        box-shadow:
            0 0 0 3px rgba(157,227,31,.06),
            0 0 8px rgba(157,227,31,.48);
    }

    50%{
        opacity:1;

        box-shadow:
            0 0 0 8px rgba(157,227,31,.025),
            0 0 20px rgba(157,227,31,1);
    }
}

@keyframes cxStatusCapsule{
    0%,100%{
        transform:
            translateY(-50%)
            translateX(0);
    }

    50%{
        transform:
            translateY(-50%)
            translateX(-5px);
    }
}

/* responsive */
@media(max-width:1050px){

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-core,

    html body
    .cx-codi-holo-v3
    .cx-dv2-orbit,

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::before{
        left:39% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-online{
        left:39% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-status{
        right:-14px !important;

        width:160px !important;
        min-width:160px !important;
    }
}

@media(prefers-reduced-motion:reduce){

    html body
    .cx-codi-holo-v3,
    html body
    .cx-codi-holo-v3 *,
    html body
    .cx-codi-holo-v3::before,
    html body
    .cx-codi-holo-v3::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-D */

/* =========================================================
   R126-R1-H-R1
   ORDERED CODI STATUS COMPOSITION
   HERO / COPY / CORE DESIGN UNTOUCHED
   ========================================================= */

/* ---------------------------------------------------------
   TOP: CODI AI LIVE
   directly above core, compact
   --------------------------------------------------------- */

html body
.cx-dv2-codi-visual.cx-codi-holo-v3::after{
    content:"●  CODI AI · LIVE" !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    position:absolute !important;

    left:42% !important;
    right:auto !important;

    top:11% !important;
    bottom:auto !important;

    width:118px !important;
    min-width:118px !important;
    max-width:118px !important;

    height:28px !important;

    margin:0 !important;
    padding:0 !important;

    transform:
        translateX(-50%) !important;

    border-radius:
        999px !important;

    background:
        rgba(3,28,58,.88) !important;

    border:
        1px solid rgba(100,215,255,.18) !important;

    color:
        #91e7ff !important;

    font-size:
        7.5px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        .075em !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 8px 18px rgba(0,10,28,.17),
        0 0 14px rgba(87,210,255,.05) !important;

    backdrop-filter:
        blur(14px) !important;

    pointer-events:none !important;

    z-index:
        12 !important;

    animation:
        cxHR1TopFloat
        4.5s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   RIGHT: CONNECTED STATUS
   aligned beside core, smaller and cleaner
   --------------------------------------------------------- */

html body
.cx-codi-holo-v3
.cx-dv2-codi-status{
    position:absolute !important;

    left:auto !important;
    right:4.5% !important;

    top:49% !important;
    bottom:auto !important;

    width:160px !important;
    min-width:160px !important;
    max-width:160px !important;

    height:78px !important;
    min-height:78px !important;
    max-height:78px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    box-sizing:
        border-box !important;

    padding:
        12px 13px 12px 40px !important;

    border-radius:
        20px !important;

    background:
        rgba(4,28,59,.90) !important;

    border:
        1px solid rgba(104,210,255,.16) !important;

    box-shadow:
        0 15px 30px rgba(0,10,28,.22),
        inset 0 0 0 1px rgba(255,255,255,.014),
        0 0 18px rgba(73,199,255,.04) !important;

    backdrop-filter:
        blur(16px) !important;

    filter:none !important;

    z-index:
        11 !important;

    animation:
        cxHR1ConnectedFloat
        4.8s ease-in-out infinite !important;
}

/* connector line between core and status */
html body
.cx-codi-holo-v3
.cx-dv2-codi-status::before{
    content:"" !important;

    display:block !important;

    position:absolute !important;

    left:-22px !important;
    top:50% !important;

    width:21px !important;
    height:1px !important;

    transform:
        translateY(-50%) !important;

    background:
        rgba(94,211,255,.24) !important;

    box-shadow:
        0 0 8px rgba(94,211,255,.10) !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > small{
    display:block !important;

    margin:
        0 0 5px !important;

    color:
        #829fbc !important;

    font-size:
        7px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .105em !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > strong{
    display:block !important;

    margin:0 !important;

    color:
        #ffffff !important;

    font-size:
        15.5px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.012em !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span{
    display:block !important;

    margin-top:
        5px !important;

    color:
        #b3c7da !important;

    font-size:
        8px !important;

    line-height:
        1.1 !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-status > span > i{
    position:absolute !important;

    left:15px !important;
    top:50% !important;

    width:9px !important;
    height:9px !important;

    margin:0 !important;

    transform:
        translateY(-50%) !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 5px rgba(157,227,31,.055),
        0 0 13px rgba(157,227,31,.72) !important;

    animation:
        cxHR1LiveDot
        2.25s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   BOTTOM: CODI ONLINE
   directly below core
   --------------------------------------------------------- */

html body
.cx-codi-holo-v3
.cx-dv2-codi-online{
    position:absolute !important;

    left:42% !important;
    right:auto !important;

    top:77% !important;
    bottom:auto !important;

    width:116px !important;
    min-width:116px !important;
    max-width:116px !important;

    height:29px !important;

    margin:0 !important;
    padding:0 !important;

    transform:
        translateX(-50%) !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    gap:
        7px !important;

    border-radius:
        999px !important;

    background:
        rgba(3,25,45,.92) !important;

    border:
        1px solid rgba(157,227,31,.20) !important;

    color:
        #b9ff4b !important;

    font-size:
        7.8px !important;

    font-weight:
        900 !important;

    line-height:
        1 !important;

    letter-spacing:
        .05em !important;

    white-space:
        nowrap !important;

    box-shadow:
        0 9px 20px rgba(0,10,27,.18),
        0 0 13px rgba(157,227,31,.05) !important;

    backdrop-filter:
        blur(14px) !important;

    z-index:
        10 !important;

    animation:
        cxHR1OnlineFloat
        4.2s ease-in-out infinite !important;
}

html body
.cx-codi-holo-v3
.cx-dv2-codi-online i{
    width:7px !important;
    height:7px !important;

    margin:0 !important;

    border-radius:
        50% !important;

    background:
        #9de31f !important;

    box-shadow:
        0 0 0 4px rgba(157,227,31,.05),
        0 0 11px rgba(157,227,31,.70) !important;

    animation:
        cxHR1LiveDot
        2.25s ease-in-out infinite !important;
}


/* ---------------------------------------------------------
   ONLY ALIGN THE VISUAL ANCHOR
   No hero box / left copy changes
   --------------------------------------------------------- */

html body
.cx-dv2-codi-visual.cx-codi-holo-v3::before,

html body
.cx-codi-holo-v3
.cx-dv2-codi-core,

html body
.cx-codi-holo-v3
.cx-dv2-orbit{
    left:42% !important;
    top:49% !important;
}


/* ---------------------------------------------------------
   MICRO MOTION ONLY
   --------------------------------------------------------- */

@keyframes cxHR1TopFloat{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-1.5px);
    }
}

@keyframes cxHR1ConnectedFloat{
    0%,100%{
        transform:
            translateY(-50%)
            translateX(0);
    }

    50%{
        transform:
            translateY(-50%)
            translateX(-1.5px);
    }
}

@keyframes cxHR1OnlineFloat{
    0%,100%{
        transform:
            translateX(-50%)
            translateY(0);
    }

    50%{
        transform:
            translateX(-50%)
            translateY(-1.5px);
    }
}

@keyframes cxHR1LiveDot{
    0%,100%{
        opacity:.65;
    }

    50%{
        opacity:1;
    }
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media(max-width:1000px){

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::after,

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::before,

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-core,

    html body
    .cx-codi-holo-v3
    .cx-dv2-orbit,

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-online{
        left:39% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-status{
        right:2.5% !important;

        width:150px !important;
        min-width:150px !important;
        max-width:150px !important;
    }
}

@media(max-width:720px){

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::after,

    html body
    .cx-dv2-codi-visual.cx-codi-holo-v3::before,

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-core,

    html body
    .cx-codi-holo-v3
    .cx-dv2-orbit,

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-online{
        left:50% !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-status{
        left:50% !important;
        right:auto !important;

        top:auto !important;
        bottom:7px !important;

        width:160px !important;
        min-width:160px !important;
        max-width:160px !important;

        transform:
            translateX(-50%) !important;

        animation:none !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-status::before{
        display:none !important;
    }

    html body
    .cx-codi-holo-v3
    .cx-dv2-codi-online{
        top:69% !important;
    }
}

@media(prefers-reduced-motion:reduce){

    html body
    .cx-codi-holo-v3,
    html body
    .cx-codi-holo-v3 *,
    html body
    .cx-codi-holo-v3::before,
    html body
    .cx-codi-holo-v3::after{
        animation:none !important;
        transition:none !important;
    }
}

/* END R126-R1-H-R1 */

/* =========================================================
   R126-R3
   CODSHIPX AI FULL SIDEBAR BRAND LOGO
   ========================================================= */

img[src="/brand/codshipx-ai-sidebar-logo.png"]{
    display:block !important;

    width:215px !important;
    max-width:calc(100% - 6px) !important;
    height:auto !important;
    max-height:58px !important;

    object-fit:contain !important;
    object-position:left center !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    filter:
        drop-shadow(0 3px 8px rgba(0,0,0,.16)) !important;
}

span:has(> img[src="/brand/codshipx-ai-sidebar-logo.png"]),
div:has(> img[src="/brand/codshipx-ai-sidebar-logo.png"]){
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    flex:1 1 auto !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    overflow:visible !important;
}

div:has(> span > img[src="/brand/codshipx-ai-sidebar-logo.png"]){
    width:100% !important;
    max-width:100% !important;

    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;

    gap:0 !important;

    padding:3px 4px 5px !important;

    overflow:visible !important;
}

div:has(> span > img[src="/brand/codshipx-ai-sidebar-logo.png"]) > span:not(:has(img)){
    display:none !important;
}

@media(max-width:1100px){
    img[src="/brand/codshipx-ai-sidebar-logo.png"]{
        width:196px !important;
        max-height:54px !important;
    }
}

/* END R126-R3 */

/* =========================================================
   R126-R4
   SIDEBAR SCROLL CONTAINMENT
   HEADER / WORKSPACE / FOOTER STABLE
   MIDDLE NAV ONLY SCROLLS
   ========================================================= */

@media (min-width:901px){

    /*
     * Exact sidebar shell identified by its direct rail-footer.
     * Do not change sidebar position, width, background or visual design.
     */
    .r7-crm
    :is(aside,nav,div):has(> .rail-footer){
        display:flex !important;
        flex-direction:column !important;

        height:100dvh !important;
        max-height:100dvh !important;
        min-height:0 !important;

        overflow:hidden !important;

        overscroll-behavior:
            none !important;
    }


    /*
     * Only the direct child containing the real data-nav buttons
     * becomes the scrollable area.
     */
    .r7-crm
    :is(aside,nav,div):has(> .rail-footer)
    > :is(nav,div):has(> button[data-nav]){
        flex:
            1 1 auto !important;

        min-height:
            0 !important;

        overflow-x:
            hidden !important;

        overflow-y:
            auto !important;

        overscroll-behavior-y:
            contain !important;

        overscroll-behavior-x:
            none !important;

        scrollbar-gutter:
            stable !important;

        -webkit-overflow-scrolling:
            touch !important;
    }


    /*
     * Footer never travels upward with navigation scroll.
     */
    .r7-crm
    :is(aside,nav,div):has(> .rail-footer)
    > .rail-footer{
        flex:
            0 0 auto !important;

        min-height:
            0 !important;

        position:
            relative !important;

        z-index:
            3 !important;
    }


    /*
     * Brand logo remains part of the fixed/non-scroll section.
     */
    .r7-crm
    :is(aside,nav,div):has(> .rail-footer)
    .brand-lockup{
        flex-shrink:
            0 !important;
    }
}

/* END R126-R4 */

/* =========================================================
   R126-R5-R2
   COMMAND DASHBOARD EXCESS BOTTOM SCROLL TRIM
   DESKTOP ONLY
   ========================================================= */

@media (min-width:901px){

    .command-page.cx-dashboard-v2{
        padding-bottom:
            24px !important;
    }

}

/* END R126-R5-R2 */

/* =========================================================
   R126-R6
   NEEDS ATTENTION ACTION LABEL BALANCE
   ========================================================= */

.command-page.cx-dashboard-v2
.cx-r123-attention
button:has(> b){

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;

    display:grid !important;
    grid-template-columns:
        minmax(0,1fr) auto !important;

    align-items:center !important;
    column-gap:14px !important;

    padding-left:16px !important;
    padding-right:12px !important;

    overflow:hidden !important;
}


/* Keep action label fully inside the rounded row */
.command-page.cx-dashboard-v2
.cx-r123-attention
button:has(> b) > b{

    position:static !important;

    justify-self:end !important;
    align-self:center !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    flex:none !important;

    min-width:78px !important;
    height:30px !important;

    box-sizing:border-box !important;

    margin:0 !important;
    padding:0 11px !important;

    border-radius:999px !important;

    border:
        1px solid rgba(86,104,126,.11) !important;

    background:
        rgba(255,255,255,.72) !important;

    color:
        #526176 !important;

    font-size:10px !important;
    line-height:1 !important;
    font-weight:850 !important;

    text-align:center !important;
    white-space:nowrap !important;

    transform:none !important;

    box-shadow:
        0 2px 5px rgba(23,39,63,.035) !important;
}


/* highlighted/attention row keeps the same geometry */
.command-page.cx-dashboard-v2
.cx-r123-attention
button.attention:has(> b) > b,
.command-page.cx-dashboard-v2
.cx-r123-attention
button.active:has(> b) > b{

    background:
        rgba(255,248,229,.90) !important;

    border-color:
        rgba(221,165,42,.22) !important;
}


/* Prevent text on the left from pushing the action outside */
.command-page.cx-dashboard-v2
.cx-r123-attention
button:has(> b) > :not(b){

    min-width:0 !important;
}


/* Smaller screens: same clean inset */
@media(max-width:900px){

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    button:has(> b){
        column-gap:10px !important;
        padding-left:13px !important;
        padding-right:10px !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    button:has(> b) > b{
        min-width:70px !important;
        height:28px !important;
        padding:0 9px !important;
        font-size:9.5px !important;
    }
}

/* END R126-R6 */

/* =========================================================
   R127-R1-R2
   CODI LOADER + NEEDS ATTENTION NUMBER COLUMN
   ========================================================= */

.cx-nav-transition-logo.cx-r127-codi-loader-logo{
    width:92px !important;
    height:92px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:visible !important;
}

.cx-nav-transition-logo.cx-r127-codi-loader-logo > img{
    width:58px !important;
    height:58px !important;

    display:block !important;
    object-fit:cover !important;

    border-radius:17px !important;

    position:relative !important;
    z-index:2 !important;

    background:#071426 !important;

    box-shadow:
        0 10px 28px rgba(17,38,67,.14),
        0 0 0 1px rgba(139,223,29,.18) !important;
}


/* label | number | explanation | action */
@media(min-width:901px){

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b){

        display:grid !important;

        grid-template-columns:
            minmax(145px,.82fr)
            72px
            minmax(185px,1fr)
            88px !important;

        align-items:center !important;
        column-gap:14px !important;

        padding-left:16px !important;
        padding-right:12px !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > span{

        grid-column:1 !important;

        min-width:0 !important;
        text-align:left !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > strong{

        grid-column:2 !important;

        width:72px !important;

        margin:0 !important;

        justify-self:end !important;

        text-align:right !important;

        font-variant-numeric:
            tabular-nums !important;

        white-space:nowrap !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > small{

        grid-column:3 !important;

        min-width:0 !important;

        margin:0 !important;

        text-align:left !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > b{

        grid-column:4 !important;

        min-width:78px !important;

        margin:0 !important;

        justify-self:end !important;
        transform:none !important;
    }
}


/* Mobile/tablet clean two-line composition */
@media(max-width:900px){

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b){

        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            auto !important;

        row-gap:7px !important;
        column-gap:10px !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > span{
        grid-column:1 !important;
        grid-row:1 !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > strong{
        grid-column:2 !important;
        grid-row:1 !important;

        width:auto !important;

        justify-self:end !important;

        font-variant-numeric:
            tabular-nums !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > small{
        grid-column:1 !important;
        grid-row:2 !important;

        white-space:normal !important;
    }

    .command-page.cx-dashboard-v2
    .cx-r123-attention
    .cx-r123-signal-list
    > button:has(> b)
    > b{
        grid-column:2 !important;
        grid-row:2 !important;
    }
}

/* END R127-R1-R2 */

/* =========================================================
   R127-R3-R4
   PREMIUM CRM ONBOARDING TYPOGRAPHY
   ========================================================= */

.r72-onboarding{
    -webkit-font-smoothing:antialiased !important;
    text-rendering:optimizeLegibility !important;
}


/* ---------- BRAND ---------- */

.r72-onboarding .r72-brand strong{
    color:#102b49 !important;

    font-size:15.5px !important;
    line-height:1.08 !important;

    font-weight:840 !important;

    letter-spacing:-.025em !important;
}

.r72-onboarding .r72-brand small{
    margin-top:4px !important;

    color:#7b8da2 !important;

    font-size:10.5px !important;
    line-height:1.25 !important;

    font-weight:560 !important;

    letter-spacing:0 !important;
}


/* ---------- PROGRESS ---------- */

.r72-onboarding .r72-onboarding-progress{
    gap:10px !important;
}

.r72-onboarding .r72-onboarding-progress > span{
    min-height:48px !important;

    padding:0 13px !important;

    border-radius:13px !important;

    font-size:10.5px !important;
    line-height:1.15 !important;

    font-weight:720 !important;

    letter-spacing:-.008em !important;
}

.r72-onboarding
.r72-onboarding-progress
> span
> i{
    width:28px !important;
    height:28px !important;

    font-size:9.5px !important;

    font-weight:850 !important;
}


/* ---------- LEFT COPY ---------- */

.r72-onboarding .r72-onboarding-copy{
    max-width:610px !important;
}

.r72-onboarding
.r72-onboarding-copy
.section-kicker{
    margin-bottom:17px !important;

    color:#71970d !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:850 !important;

    letter-spacing:.15em !important;
}


.r72-onboarding
.r72-onboarding-copy
h1{
    max-width:590px !important;

    margin:0 !important;

    color:#102641 !important;

    font-size:
        clamp(39px,3.75vw,54px) !important;

    line-height:1.035 !important;

    font-weight:790 !important;

    letter-spacing:-.048em !important;

    text-wrap:balance !important;
}


.r72-onboarding
.r72-onboarding-copy
> p{
    max-width:565px !important;

    margin:
        22px 0 0 !important;

    color:#687c92 !important;

    font-size:14px !important;
    line-height:1.67 !important;

    font-weight:470 !important;

    letter-spacing:-.005em !important;
}


/* ---------- BENEFITS ---------- */

.r72-onboarding
.r72-onboarding-copy
ul{
    display:grid !important;

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

    gap:9px !important;

    margin:
        27px 0 0 !important;

    padding:0 !important;
}


.r72-onboarding
.r72-onboarding-copy
li{
    min-width:0 !important;
    min-height:44px !important;

    display:flex !important;
    align-items:center !important;

    padding:
        0 13px !important;

    border:
        1px solid rgba(208,220,230,.82) !important;

    border-radius:
        12px !important;

    background:
        rgba(255,255,255,.68) !important;

    color:#4e637a !important;

    font-size:11px !important;
    line-height:1.32 !important;

    font-weight:690 !important;

    letter-spacing:-.004em !important;
}


/* ---------- ACCOUNT CARD ---------- */

.r72-onboarding
.r72-onboarding-card{
    padding:
        29px 29px 27px !important;

    border-radius:
        24px !important;

    box-shadow:
        0 20px 56px rgba(18,43,70,.085) !important;
}


.r72-onboarding
.r72-onboarding-card
> .section-kicker{
    margin-bottom:
        9px !important;

    color:#798a9e !important;

    font-size:9.5px !important;
    line-height:1 !important;

    font-weight:850 !important;

    letter-spacing:.145em !important;
}


.r72-onboarding
.r72-onboarding-card
h2{
    margin:
        0 0 21px !important;

    color:#102641 !important;

    font-size:25px !important;
    line-height:1.08 !important;

    font-weight:820 !important;

    letter-spacing:-.035em !important;
}


/* ---------- FORM LABELS ---------- */

.r72-onboarding
.r72-onboarding-card
label{
    gap:7px !important;

    margin-bottom:
        14px !important;
}


.r72-onboarding
.r72-onboarding-card
label
> span{
    color:#425870 !important;

    font-size:11px !important;
    line-height:1.2 !important;

    font-weight:720 !important;

    letter-spacing:-.004em !important;
}


/* ---------- INPUT / SELECT ---------- */

.r72-onboarding
.r72-onboarding-card
input,
.r72-onboarding
.r72-onboarding-card
select{
    min-height:
        50px !important;

    padding:
        0 14px !important;

    border-radius:
        13px !important;

    color:#162c45 !important;

    font-size:13.5px !important;

    font-weight:540 !important;

    letter-spacing:-.009em !important;
}


.r72-onboarding
.r72-onboarding-card
label
> small{
    margin-top:-1px !important;

    color:#8998a9 !important;

    font-size:10px !important;
    line-height:1.35 !important;

    font-weight:520 !important;
}


/* ---------- PRIMARY CTA ---------- */

.r72-onboarding
.r72-onboarding-card
.button.primary{
    min-height:51px !important;

    margin-top:7px !important;

    border-radius:
        13px !important;

    font-size:11.5px !important;

    font-weight:850 !important;

    letter-spacing:-.008em !important;
}


/* ---------- MESSAGE TYPOGRAPHY ---------- */

.r72-onboarding .crm-error,
.r72-onboarding .r72-success{
    border-radius:12px !important;

    font-size:11px !important;
    line-height:1.45 !important;

    font-weight:610 !important;

    letter-spacing:-.002em !important;
}


/* ---------- DESKTOP BALANCE ---------- */

@media(min-width:1000px){

    .r72-onboarding
    .r72-onboarding-grid{
        column-gap:
            54px !important;

        align-items:
            start !important;
    }
}


/* ---------- TABLET ---------- */

@media(max-width:900px){

    .r72-onboarding
    .r72-onboarding-copy
    h1{
        font-size:
            clamp(35px,7vw,47px) !important;

        line-height:
            1.04 !important;
    }

    .r72-onboarding
    .r72-onboarding-copy
    ul{
        grid-template-columns:
            minmax(0,1fr) !important;
    }
}


/* ---------- MOBILE ---------- */

@media(max-width:600px){

    .r72-onboarding
    .r72-onboarding-copy
    h1{
        font-size:
            clamp(33px,9.5vw,41px) !important;
    }

    .r72-onboarding
    .r72-onboarding-copy
    > p{
        font-size:
            13.5px !important;
    }

    .r72-onboarding
    .r72-onboarding-card{
        padding:
            23px 18px 21px !important;

        border-radius:
            20px !important;
    }
}

/* END R127-R3-R4 */

/* =========================================================
   R127-R4-R3-R2
   PASSWORD CONFIRM + SHOW/HIDE
   ========================================================= */

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-field{
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
}

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-wrap{
    position:relative !important;

    display:flex !important;
    align-items:center !important;

    width:100% !important;
}

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-wrap
input{
    width:100% !important;
    padding-right:78px !important;
}

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-toggle{
    position:absolute !important;

    top:50% !important;
    right:9px !important;

    transform:
        translateY(-50%) !important;

    min-width:55px !important;
    height:34px !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 10px !important;

    border:
        1px solid #d5e0e9 !important;

    border-radius:10px !important;

    background:
        rgba(255,255,255,.95) !important;

    color:#405870 !important;

    font-size:10px !important;
    line-height:1 !important;

    font-weight:820 !important;

    cursor:pointer !important;

    box-shadow:
        0 3px 10px rgba(16,42,68,.05) !important;

    transition:
        border-color .16s ease,
        background .16s ease,
        color .16s ease !important;
}

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-toggle:hover{
    border-color:#9ddd27 !important;
    background:#f7ffea !important;
    color:#517a08 !important;
}

.r72-onboarding
.r72-onboarding-card
.cx-r127-password-toggle:focus-visible{
    outline:
        2px solid #9ddd27 !important;

    outline-offset:2px !important;
}

/* END R127-R4-R3-R2 */

/* =========================================================
   CODSHIPX_R129_R3_SINGLE_PAGE
   ========================================================= */

.r72-onboarding-grid:has(.cx-r129-plan-field){
    width:min(100%,1280px) !important;
    max-width:1280px !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    gap:25px !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy{
    max-width:860px !important;

    margin:0 auto !important;

    text-align:center !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy h1{
    max-width:820px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy p{
    max-width:680px !important;

    margin-left:auto !important;
    margin-right:auto !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field){
    width:100% !important;
    max-width:none !important;

    box-sizing:border-box !important;

    display:grid !important;

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

    gap:
        16px 18px !important;

    padding:
        30px !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> .section-kicker,

.r72-onboarding-card:has(.cx-r129-plan-field)
> h2,

.r72-onboarding-card:has(.cx-r129-plan-field)
> .cx-r129-plan-field,

.r72-onboarding-card:has(.cx-r129-plan-field)
> .button.primary{
    grid-column:
        1 / -1 !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> h2{
    margin-bottom:
        4px !important;
}

.cx-r129-plan-field{
    width:100%;

    box-sizing:border-box;

    margin:
        3px 0 8px;

    padding:
        4px 0 27px;

    border-bottom:
        1px solid #e8edf2;
}

.cx-r129-plan-head{
    display:flex;

    justify-content:space-between;
    align-items:flex-end;

    gap:15px;

    margin-bottom:
        16px;
}

.cx-r129-plan-head > span{
    color:#0a315b;

    font-size:15px;
    font-weight:900;

    letter-spacing:-.02em;
}

.cx-r129-plan-head > small{
    color:#8192a5;

    font-size:10.5px;
    font-weight:650;
}

.cx-r129-plan-grid{
    width:100%;

    display:grid;

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

    gap:13px;
}

.cx-r129-plan-card{
    --accent:#668cf1;
    --soft:#edf2ff;
    --ink:#0a315b;
    --muted:#708399;

    position:relative;

    min-width:0;
    min-height:415px;

    overflow:hidden;

    box-sizing:border-box;

    display:flex;
    flex-direction:column;

    padding:
        20px 18px 17px;

    border:
        1px solid #dfe7ee;

    border-radius:
        22px;

    background:
        linear-gradient(
            160deg,
            #fff,
            #fbfcfe
        );

    color:var(--ink);

    cursor:pointer;

    box-shadow:
        0 15px 35px
        rgba(10,47,83,.065);

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}

.cx-r129-plan-card::before{
    content:"";

    position:absolute;

    top:-90px;
    right:-62px;

    width:155px;
    height:155px;

    border-radius:50%;

    background:var(--soft);

    pointer-events:none;
}

.cx-r129-plan-card:hover{
    transform:
        translateY(-3px);

    box-shadow:
        0 21px 44px
        rgba(10,47,83,.10);
}

.cx-r129-plan-card.is-selected{
    border:
        2px solid
        var(--accent);

    transform:
        translateY(-2px);

    box-shadow:
        0 22px 50px
        rgba(98,161,19,.16);
}

.cx-r129-plan-card input{
    position:absolute !important;

    width:1px !important;
    height:1px !important;

    opacity:0 !important;

    pointer-events:none !important;
}

.cx-r129-plan-card:focus-within{
    outline:
        3px solid
        rgba(141,207,29,.24);

    outline-offset:3px;
}

.cx-r129-plan-top{
    position:relative;
    z-index:1;

    min-height:29px;

    display:flex;

    justify-content:space-between;
    align-items:flex-start;

    gap:7px;
}

.cx-r129-plan-no{
    color:#8c9dad;

    font-size:8.5px;
    font-weight:900;

    letter-spacing:.16em;
}

.cx-r129-plan-badge{
    padding:
        6px 8px;

    border-radius:999px;

    background:var(--soft);

    color:var(--accent);

    font-size:7.5px;
    font-weight:950;

    line-height:1;

    letter-spacing:.05em;
}

.cx-r129-plan-title{
    position:relative;
    z-index:1;

    display:block;

    margin:
        18px 0 10px;

    color:var(--ink);

    font-size:26px;
    font-weight:950;

    line-height:1;

    letter-spacing:-.045em;
}

.cx-r129-plan-card del{
    position:relative;
    z-index:1;

    color:#91a0af;

    font-size:10px;
    font-weight:800;
}

.cx-r129-plan-price{
    position:relative;
    z-index:1;

    display:flex;

    align-items:baseline;

    gap:5px;

    margin-top:5px;
}

.cx-r129-plan-price em{
    color:var(--ink);

    font-size:24px;
    font-style:normal;
    font-weight:950;

    line-height:1;

    letter-spacing:-.04em;
}

.cx-r129-plan-price small{
    color:var(--muted);

    font-size:9px;
    font-weight:800;
}

.cx-r129-save{
    position:relative;
    z-index:1;

    width:fit-content;

    margin-top:12px;

    padding:7px 9px;

    border-radius:9px;

    background:var(--soft);

    color:var(--accent);

    font-size:8.5px;
    font-weight:900;
}

.cx-r129-plan-card > p{
    position:relative;
    z-index:1;

    min-height:48px;

    margin:
        16px 0 13px !important;

    color:
        var(--muted) !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;

    line-height:
        1.48 !important;
}

.cx-r129-plan-card ul{
    position:relative;
    z-index:1;

    display:grid;

    gap:8px;

    margin:
        0 0 17px;

    padding:
        13px 0 0;

    border-top:
        1px solid
        rgba(130,150,170,.18);

    list-style:none;
}

.cx-r129-plan-card li{
    display:grid;

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

    gap:7px;

    align-items:start;

    color:var(--muted);

    font-size:9.3px;
    font-weight:760;

    line-height:1.3;
}

.cx-r129-plan-card li i{
    width:19px;
    height:19px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:var(--soft);

    color:var(--accent);

    font-size:9px;
    font-style:normal;
    font-weight:950;
}

.cx-r129-plan-action{
    position:relative;
    z-index:1;

    min-height:42px;

    margin-top:auto;

    box-sizing:border-box;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:0 10px;

    border-radius:12px;

    background:#f1f5f9;

    color:var(--ink);

    font-size:9.5px;
    font-weight:900;
}

.cx-r129-plan-card.is-selected
.cx-r129-plan-action{
    background:
        linear-gradient(
            135deg,
            #a4e91d,
            #82d307
        );

    color:#173700;

    box-shadow:
        0 10px 22px
        rgba(129,198,15,.20);
}


/* Starter */

.cx-r129-plan-starter{
    --accent:#668cf1;
    --soft:#edf2ff;
}


/* Growth */

.cx-r129-plan-growth{
    --accent:#68a900;
    --soft:#edf9d8;

    background:
        linear-gradient(
            160deg,
            #fff,
            #fbfff3
        );
}


/* Business */

.cx-r129-plan-business{
    --accent:#8759e8;
    --soft:#f1eaff;

    background:
        linear-gradient(
            160deg,
            #fff,
            #fcf9ff
        );
}


/* Pro */

.cx-r129-plan-pro{
    --accent:#9ee82f;
    --soft:rgba(157,230,48,.15);
    --ink:#fff;
    --muted:#c4d5e5;

    background:
        linear-gradient(
            155deg,
            #0a2e50,
            #123f66
        );

    border-color:
        rgba(137,205,39,.30);

    box-shadow:
        0 18px 40px
        rgba(5,38,67,.18);
}

.cx-r129-plan-pro::before{
    background:
        rgba(151,224,41,.16);
}

.cx-r129-plan-pro
.cx-r129-plan-no{
    color:#c3d5e6;
}

.cx-r129-plan-pro del{
    color:#90a9c0;
}

.cx-r129-plan-pro ul{
    border-top-color:
        rgba(255,255,255,.13);
}

.cx-r129-plan-pro
.cx-r129-plan-action{
    background:
        rgba(255,255,255,.10);

    color:#fff;
}

.cx-r129-plan-loading{
    grid-column:1/-1;

    min-height:90px;

    display:flex;

    align-items:center;
    justify-content:center;

    border:
        1px dashed #d8e2e9;

    border-radius:15px;

    color:#7c8fa3;

    font-size:11px;
    font-weight:750;
}


@media(max-width:1100px){

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


@media(max-width:700px){

    .r72-onboarding-card:has(.cx-r129-plan-field){
        grid-template-columns:
            minmax(0,1fr) !important;

        padding:
            20px 15px !important;
    }

    .r72-onboarding-card:has(.cx-r129-plan-field)
    > *{
        grid-column:
            1 !important;
    }

    .cx-r129-plan-head{
        flex-direction:column;
        align-items:flex-start;

        gap:5px;
    }

    .cx-r129-plan-grid{
        grid-template-columns:
            minmax(0,1fr);

        gap:12px;
    }

    .cx-r129-plan-card{
        min-height:auto;
    }
}

/* END CODSHIPX_R129_R3_SINGLE_PAGE */

/* =========================================================
   CODSHIPX_R129_R4_PREMIUM_CHECKOUT_POLISH
   VISUAL ONLY
   ========================================================= */


/* ---------- OVERALL PAGE DENSITY ---------- */

.r72-onboarding{
    padding-bottom:
        44px !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field){
    width:
        min(1180px,calc(100% - 40px)) !important;

    max-width:
        1180px !important;

    margin:
        0 auto !important;

    display:grid !important;

    grid-template-columns:
        minmax(0,1fr) !important;

    align-items:start !important;

    gap:
        20px !important;
}


/* ---------- HERO ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy{
    width:100% !important;

    max-width:
        800px !important;

    min-height:
        0 !important;

    margin:
        0 auto !important;

    padding:
        10px 0 4px !important;

    text-align:center !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy
.section-kicker{
    margin-bottom:
        8px !important;

    font-size:
        9px !important;

    letter-spacing:
        .13em !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy h1{
    max-width:
        760px !important;

    margin:
        0 auto 11px !important;

    font-size:
        clamp(
            34px,
            4vw,
            48px
        ) !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.045em !important;

    font-weight:
        850 !important;
}

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > p{
    max-width:
        640px !important;

    margin:
        0 auto 15px !important;

    font-size:
        12.5px !important;

    line-height:
        1.6 !important;
}


/* ---------- ACCOUNT CARD ---------- */

.r72-onboarding-card:has(.cx-r129-plan-field){
    width:100% !important;

    max-width:none !important;

    margin:
        0 !important;

    padding:
        28px !important;

    box-sizing:
        border-box !important;

    display:grid !important;

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

    column-gap:
        18px !important;

    row-gap:
        15px !important;

    border:
        1px solid
        rgba(210,222,232,.88) !important;

    border-radius:
        26px !important;

    background:
        rgba(255,255,255,.985) !important;

    box-shadow:
        0 24px 60px
        rgba(18,48,78,.09) !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> .section-kicker,

.r72-onboarding-card:has(.cx-r129-plan-field)
> h2,

.r72-onboarding-card:has(.cx-r129-plan-field)
> .cx-r129-plan-field,

.r72-onboarding-card:has(.cx-r129-plan-field)
> .button.primary{
    grid-column:
        1 / -1 !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> .section-kicker{
    margin-bottom:
        -5px !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> h2{
    margin:
        0 0 4px !important;

    font-size:
        25px !important;

    line-height:
        1.1 !important;

    letter-spacing:
        -.035em !important;
}


/* ---------- PLAN AREA ---------- */

.cx-r129-plan-field{
    margin:
        3px 0 5px !important;

    padding:
        0 0 22px !important;
}

.cx-r129-plan-head{
    margin-bottom:
        14px !important;
}

.cx-r129-plan-head > span{
    font-size:
        14px !important;
}

.cx-r129-plan-grid{
    gap:
        12px !important;
}


/* ---------- CARDS ---------- */

.cx-r129-plan-card{
    min-height:
        355px !important;

    padding:
        18px 16px 15px !important;

    border-radius:
        20px !important;

    box-shadow:
        0 12px 30px
        rgba(9,43,77,.055) !important;
}

.cx-r129-plan-card:hover{
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 18px 38px
        rgba(9,43,77,.095) !important;
}

.cx-r129-plan-card.is-selected{
    transform:
        translateY(-1px) !important;

    box-shadow:
        0 18px 40px
        rgba(102,170,13,.13) !important;
}

.cx-r129-plan-card::before{
    width:
        132px !important;

    height:
        132px !important;

    top:
        -78px !important;

    right:
        -54px !important;
}

.cx-r129-plan-top{
    min-height:
        26px !important;
}

.cx-r129-plan-title{
    margin:
        14px 0 8px !important;

    font-size:
        23px !important;
}

.cx-r129-plan-card del{
    font-size:
        9px !important;
}

.cx-r129-plan-price{
    margin-top:
        3px !important;
}

.cx-r129-plan-price em{
    font-size:
        22px !important;
}

.cx-r129-save{
    margin-top:
        10px !important;

    padding:
        6px 8px !important;
}

.cx-r129-plan-card > p{
    min-height:
        39px !important;

    margin:
        13px 0 11px !important;

    font-size:
        9.5px !important;

    line-height:
        1.42 !important;
}

.cx-r129-plan-card ul{
    gap:
        6px !important;

    margin:
        0 0 13px !important;

    padding-top:
        10px !important;
}

.cx-r129-plan-card li{
    grid-template-columns:
        19px minmax(0,1fr) !important;

    gap:
        6px !important;

    font-size:
        8.8px !important;
}

.cx-r129-plan-card li i{
    width:
        17px !important;

    height:
        17px !important;

    font-size:
        8px !important;
}

.cx-r129-plan-action{
    min-height:
        38px !important;

    border-radius:
        10px !important;

    font-size:
        9px !important;
}


/* ---------- FORM ---------- */

.r72-onboarding-card:has(.cx-r129-plan-field)
> label{
    margin:
        0 !important;

    gap:
        6px !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> label > span{
    font-size:
        10px !important;

    font-weight:
        850 !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> label input,

.r72-onboarding-card:has(.cx-r129-plan-field)
> label select{
    min-height:
        48px !important;

    border-radius:
        12px !important;

    font-size:
        12.5px !important;
}

.r72-onboarding-card:has(.cx-r129-plan-field)
> label small{
    margin-top:
        2px !important;

    font-size:
        9px !important;

    line-height:
        1.4 !important;
}


/* ---------- PASSWORD BUTTON ---------- */

.r72-onboarding-card
.cx-r127-password-toggle{
    min-width:
        52px !important;

    height:
        31px !important;

    right:
        8px !important;

    border-radius:
        9px !important;

    font-size:
        9px !important;
}


/* ---------- PRIMARY CTA ---------- */

.r72-onboarding-card:has(.cx-r129-plan-field)
> .button.primary{
    min-height:
        50px !important;

    margin-top:
        3px !important;

    border-radius:
        13px !important;

    font-size:
        11px !important;

    font-weight:
        900 !important;

    box-shadow:
        0 12px 26px
        rgba(133,206,14,.16) !important;
}


/* ---------- PRO CARD ---------- */

.cx-r129-plan-pro{
    box-shadow:
        0 15px 34px
        rgba(5,38,67,.16) !important;
}


/* ---------- TABLET ---------- */

@media(max-width:1050px){

    .cx-r129-plan-grid{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            ) !important;
    }

    .cx-r129-plan-card{
        min-height:
            330px !important;
    }
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

    .r72-onboarding-grid:has(.cx-r129-plan-field){
        width:
            calc(100% - 20px) !important;

        gap:
            15px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy{
        padding:
            5px 5px 2px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy h1{
        font-size:
            clamp(
                30px,
                10vw,
                40px
            ) !important;
    }

    .r72-onboarding-card:has(.cx-r129-plan-field){
        grid-template-columns:
            minmax(0,1fr) !important;

        padding:
            18px 14px !important;

        border-radius:
            21px !important;
    }

    .r72-onboarding-card:has(.cx-r129-plan-field)
    > *{
        grid-column:
            1 !important;
    }

    .cx-r129-plan-head{
        align-items:
            flex-start !important;

        flex-direction:
            column !important;

        gap:
            4px !important;
    }

    .cx-r129-plan-grid{
        grid-template-columns:
            minmax(0,1fr) !important;

        gap:
            11px !important;
    }

    .cx-r129-plan-card{
        min-height:
            auto !important;
    }
}

/* END CODSHIPX_R129_R4_PREMIUM_CHECKOUT_POLISH */

/* =========================================================
   CODSHIPX_R129_R5_PREMIUM_HERO
   ONBOARDING HERO + BENEFITS ONLY
   ========================================================= */


/* ---------- HERO SURFACE ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy{
    position:relative !important;

    width:100% !important;
    max-width:1040px !important;

    box-sizing:border-box !important;

    margin:
        2px auto 1px !important;

    padding:
        31px 34px 29px !important;

    overflow:hidden !important;

    border:
        1px solid
        rgba(207,224,203,.78) !important;

    border-radius:
        28px !important;

    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(159,224,56,.13),
            transparent 31%
        ),
        radial-gradient(
            circle at 92% 86%,
            rgba(40,104,165,.065),
            transparent 34%
        ),
        rgba(255,255,255,.79) !important;

    box-shadow:
        0 22px 52px
        rgba(19,50,78,.065) !important;

    backdrop-filter:
        blur(10px);
}


/* small decorative accent */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy::before{
    content:"";

    position:absolute;

    top:0;
    left:50%;

    width:132px;
    height:3px;

    transform:
        translateX(-50%);

    border-radius:
        0 0 999px 999px;

    background:
        linear-gradient(
            90deg,
            #b5ed50,
            #78c807
        );
}


/* ---------- KICKER ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy
.section-kicker{
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    min-height:27px !important;

    box-sizing:border-box !important;

    margin:
        0 auto 13px !important;

    padding:
        0 11px !important;

    border:
        1px solid
        rgba(126,189,27,.17) !important;

    border-radius:
        999px !important;

    background:
        rgba(239,249,222,.9) !important;

    color:
        #609a12 !important;

    font-size:
        8.5px !important;

    font-weight:
        950 !important;

    letter-spacing:
        .15em !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.78) !important;
}


/* ---------- HEADING ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy h1{
    max-width:
        870px !important;

    margin:
        0 auto 13px !important;

    color:
        #0a2f59 !important;

    font-size:
        clamp(
            35px,
            3.65vw,
            51px
        ) !important;

    line-height:
        1.015 !important;

    font-weight:
        830 !important;

    letter-spacing:
        -.046em !important;

    text-wrap:
        balance;
}


/* ---------- SUBCOPY ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > p{
    max-width:
        720px !important;

    margin:
        0 auto 23px !important;

    color:
        #647c94 !important;

    font-size:
        12.7px !important;

    line-height:
        1.68 !important;

    font-weight:
        540 !important;

    text-wrap:
        balance;
}


/* ---------- BENEFIT GRID ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > ul{
    width:100% !important;

    max-width:
        930px !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    display:flex !important;

    flex-wrap:
        wrap !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    list-style:
        none !important;
}


/* ---------- BENEFIT ITEM ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > ul > li{
    position:relative !important;

    flex:
        1 1 270px !important;

    max-width:
        300px !important;

    min-height:
        50px !important;

    box-sizing:border-box !important;

    margin:
        0 !important;

    padding:
        10px 13px 10px 44px !important;

    display:flex !important;

    align-items:center !important;

    border:
        1px solid
        rgba(215,225,234,.92) !important;

    border-radius:
        14px !important;

    background:
        rgba(255,255,255,.88) !important;

    color:
        #294b6a !important;

    font-size:
        10.2px !important;

    line-height:
        1.35 !important;

    font-weight:
        780 !important;

    text-align:
        left !important;

    box-shadow:
        0 7px 18px
        rgba(15,47,78,.035) !important;

    transition:
        transform .16s ease,
        border-color .16s ease,
        box-shadow .16s ease;
}


.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > ul > li:hover{
    transform:
        translateY(-1px);

    border-color:
        rgba(142,202,45,.30) !important;

    box-shadow:
        0 10px 23px
        rgba(15,47,78,.055) !important;
}


/* check icon */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > ul > li::before{
    content:"✓";

    position:absolute;

    left:13px;

    width:22px;
    height:22px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    border-radius:
        8px;

    background:
        linear-gradient(
            145deg,
            #effbd9,
            #e2f7bb
        );

    color:
        #66a40c;

    font-size:
        11px !important;

    font-weight:
        950 !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(117,178,25,.10);
}


/* Codi item gets subtle AI treatment */

.r72-onboarding-grid:has(.cx-r129-plan-field)
.r72-onboarding-copy > ul > li:last-child{
    border-color:
        rgba(118,186,19,.20) !important;

    background:
        linear-gradient(
            135deg,
            rgba(248,253,239,.95),
            rgba(255,255,255,.95)
        ) !important;

    color:
        #3f651b !important;
}


/* ---------- REDUCE GAP TO ACCOUNT FORM ---------- */

.r72-onboarding-grid:has(.cx-r129-plan-field){
    gap:
        16px !important;
}


/* ---------- TABLET ---------- */

@media(max-width:1000px){

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy{
        max-width:
            900px !important;

        padding:
            28px 24px 25px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy > ul > li{
        flex:
            1 1 42% !important;

        max-width:
            none !important;
    }
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy{
        padding:
            23px 15px 18px !important;

        border-radius:
            21px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy h1{
        font-size:
            clamp(
                29px,
                10vw,
                39px
            ) !important;

        line-height:
            1.02 !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy > p{
        margin-bottom:
            17px !important;

        font-size:
            11.7px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy > ul{
        gap:
            7px !important;
    }

    .r72-onboarding-grid:has(.cx-r129-plan-field)
    .r72-onboarding-copy > ul > li{
        flex:
            1 1 100% !important;

        max-width:
            none !important;

        min-height:
            46px !important;
    }
}

/* END CODSHIPX_R129_R5_PREMIUM_HERO */

/* =========================================================
   CODSHIPX_R129_R6_R4_PAYMENT_UI
   PAYMENT SCREEN VISUAL HIERARCHY ONLY
   ========================================================= */

.r72-onboarding-card.centered:has(.plan-price){
    width:min(690px,100%) !important;

    box-sizing:border-box !important;

    padding:
        35px 40px 32px !important;

    border:
        1px solid rgba(215,225,234,.95) !important;

    border-radius:
        28px !important;

    background:
        rgba(255,255,255,.985) !important;

    box-shadow:
        0 25px 62px
        rgba(12,45,75,.095) !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.section-kicker{
    margin-bottom:
        13px !important;
}


.r72-onboarding-card.centered:has(.plan-price)
h2{
    margin:
        0 !important;

    color:
        #0a2f59 !important;

    font-size:
        29px !important;

    line-height:
        1.05 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.04em !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price{
    margin:
        27px 0 21px !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price strong{
    color:
        #102e51 !important;

    font-size:
        clamp(
            30px,
            3.25vw,
            36px
        ) !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        -.045em !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price small{
    margin-left:
        3px !important;

    color:
        #8797a9 !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;
}


.r72-onboarding-card.centered:has(.plan-price)
> p{
    width:
        min(545px,100%) !important;

    margin:
        0 auto !important;

    color:
        #587087 !important;

    font-size:
        12.25px !important;

    line-height:
        1.62 !important;

    text-align:
        center !important;

    text-wrap:
        balance;
}


/* Stack actions instead of side-by-side */

.r72-onboarding-card.centered:has(.plan-price)
.plan-actions{
    width:
        min(390px,100%) !important;

    margin:
        26px auto 0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    justify-content:
        center !important;

    gap:
        9px !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions .button{
    width:
        100% !important;

    box-sizing:
        border-box !important;

    margin:
        0 !important;
}


/* Primary payment CTA */

.r72-onboarding-card.centered:has(.plan-price)
.plan-actions .button.primary{
    min-height:
        55px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border-radius:
        14px !important;

    font-size:
        11px !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.01em !important;

    box-shadow:
        0 15px 31px
        rgba(131,205,13,.23) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions .button.primary:hover{
    transform:
        translateY(-1px) !important;

    box-shadow:
        0 18px 35px
        rgba(131,205,13,.28) !important;
}


/* Secondary activation check */

.r72-onboarding-card.centered:has(.plan-price)
.plan-actions .button.soft{
    min-height:
        44px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid #dde6ed !important;

    border-radius:
        13px !important;

    background:
        #f7f9fb !important;

    color:
        #607489 !important;

    font-size:
        10px !important;

    font-weight:
        820 !important;

    box-shadow:
        none !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions .button.soft:hover{
    border-color:
        #ccd8e2 !important;

    background:
        #f1f5f8 !important;

    color:
        #173b5e !important;
}


@media(max-width:700px){

    .r72-onboarding-card.centered:has(.plan-price){
        padding:
            27px 17px 24px !important;

        border-radius:
            22px !important;
    }

    .r72-onboarding-card.centered:has(.plan-price)
    .plan-actions{
        width:
            100% !important;
    }
}

/* END CODSHIPX_R129_R6_R4_PAYMENT_UI */


/* =========================================================
   CODSHIPX_R129_R8_R1_R1_PAYMENT_READY_PREMIUM
   ========================================================= */


/* PAYMENT CARD */

.r72-onboarding-card.centered:has(.plan-price){
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:min(760px,calc(100vw - 32px)) !important;

    padding:
        34px
        clamp(22px,4vw,48px)
        31px !important;

    border:
        1px solid rgba(207,223,212,.94) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(250,255,246,.99)
        ) !important;

    box-shadow:
        0 30px 78px rgba(17,58,43,.13),
        0 5px 18px rgba(17,58,43,.04),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    animation:
        cx-r129-r8-r1-r1-enter
        .5s cubic-bezier(.2,.75,.2,1)
        both !important;
}


.r72-onboarding-card.centered:has(.plan-price)::before{
    content:"";

    display:block;

    width:86px;
    height:86px;

    margin:
        0 auto 19px;

    border-radius:
        28px;

    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M3 9h18M7 15h4'/%3E%3C/svg%3E")
        center/38px 38px
        no-repeat,

        linear-gradient(
            145deg,
            #a9f057,
            #61d51d 46%,
            #18a832
        );

    box-shadow:
        0 17px 36px rgba(58,181,43,.26),
        0 0 0 9px rgba(116,220,48,.07),
        0 0 0 18px rgba(116,220,48,.035),
        inset 0 1px 0 rgba(255,255,255,.48);

    animation:
        cx-r129-r8-r1-r1-payicon
        3.2s ease-in-out
        infinite;
}


.r72-onboarding-card.centered:has(.plan-price)::after{
    content:"";

    position:absolute;

    width:320px;
    height:320px;

    right:-160px;
    top:-170px;

    z-index:-1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(155,234,84,.25),
            rgba(199,246,158,.11) 46%,
            transparent 72%
        );
}


.r72-onboarding-card.centered:has(.plan-price)
> *{
    position:relative;
    z-index:2;
}


.r72-onboarding-card.centered:has(.plan-price)
.section-kicker{
    width:max-content !important;
    max-width:100% !important;

    margin:
        0 auto 12px !important;

    padding:
        7px 12px !important;

    border:
        1px solid rgba(105,197,66,.20) !important;

    border-radius:
        999px !important;

    background:
        #f2ffe7 !important;

    color:
        #4b8258 !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .18em !important;
}


.r72-onboarding-card.centered:has(.plan-price)
h2{
    margin:
        0 !important;

    color:
        #102c4e !important;

    font-size:
        clamp(31px,4.2vw,43px) !important;

    line-height:
        1.03 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.048em !important;

    text-align:
        center !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price{
    width:
        min(500px,100%) !important;

    margin:
        23px auto 19px !important;

    padding:
        18px 16px 17px !important;

    border:
        1px solid rgba(164,210,143,.48) !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            145deg,
            #fbfff8,
            #f3fbea
        ) !important;

    box-shadow:
        0 10px 27px rgba(55,112,53,.055),
        inset 0 1px 0 white !important;

    text-align:
        center !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price::before{
    content:"YOUR PLAN";

    display:block;

    margin-bottom:
        8px;

    color:
        #78907d;

    font-size:
        8px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        .18em;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price strong{
    color:
        #102d4d !important;

    font-size:
        clamp(32px,4.3vw,44px) !important;

    line-height:
        1 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.05em !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-price small{
    margin-left:
        4px !important;

    color:
        #8a9aaa !important;

    font-size:
        10px !important;

    font-weight:
        700 !important;
}


.r72-onboarding-card.centered:has(.plan-price)
> p{
    width:
        min(585px,100%) !important;

    margin:
        0 auto !important;

    color:
        #61778e !important;

    font-size:
        12.5px !important;

    line-height:
        1.65 !important;

    text-align:
        center !important;
}


/* PAYMENT ACTION AREA */

.r72-onboarding-card.centered:has(.plan-price)
.plan-actions{
    width:
        min(470px,100%) !important;

    margin:
        24px auto 0 !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        stretch !important;

    gap:
        10px !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions::before{
    content:
        "✓ Email verified   •   Payment pending   •   Instant activation";

    display:block;

    margin-bottom:
        5px;

    padding:
        11px 12px;

    border:
        1px solid rgba(163,208,144,.44);

    border-radius:
        13px;

    background:
        linear-gradient(
            90deg,
            #fbfff7,
            #f3fcea
        );

    color:
        #607d67;

    font-size:
        9px;

    font-weight:
        820;

    line-height:
        1.4;

    text-align:
        center;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions::after{
    content:
        "🔒 Secure payment processed through PayHere";

    display:block;

    margin-top:
        1px;

    color:
        #879791;

    font-size:
        9px;

    font-weight:
        650;

    text-align:
        center;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button{
    width:
        100% !important;

    margin:
        0 !important;

    box-sizing:
        border-box !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background .18s ease !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.primary{
    position:
        relative !important;

    overflow:
        hidden !important;

    min-height:
        58px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        9px !important;

    border:
        0 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            105deg,
            #91e510,
            #61d313 34%,
            #2cba25 69%,
            #159b31
        ) !important;

    color:
        #092117 !important;

    font-size:
        11.5px !important;

    font-weight:
        950 !important;

    box-shadow:
        0 18px 36px rgba(67,188,39,.27),
        inset 0 1px 0 rgba(255,255,255,.44) !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.primary::before{
    content:"🔒";

    font-size:
        13px;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.primary::after{
    content:"";

    position:absolute;

    width:58px;
    height:145px;

    top:-44px;
    left:-85px;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.43),
            transparent
        );

    animation:
        cx-r129-r8-r1-r1-shine
        4s ease-in-out
        infinite;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.primary:hover:not(:disabled){
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 22px 43px rgba(62,181,39,.33),
        inset 0 1px 0 rgba(255,255,255,.48) !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.soft{
    min-height:
        45px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        7px !important;

    border:
        1px solid #d9e4dc !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            180deg,
            #fff,
            #f7faf8
        ) !important;

    color:
        #607689 !important;

    font-size:
        10px !important;

    font-weight:
        850 !important;

    box-shadow:
        0 6px 16px rgba(34,72,55,.035) !important;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.soft::before{
    content:"↻";

    display:inline-grid;

    place-items:center;

    width:
        18px;

    height:
        18px;

    border-radius:
        50%;

    background:
        #eef9e9;

    color:
        #34a23a;

    font-size:
        12px;

    font-weight:
        900;
}


.r72-onboarding-card.centered:has(.plan-price)
.plan-actions
.button.soft:hover:not(:disabled){
    transform:
        translateY(-1px) !important;

    border-color:
        #bcd5c0 !important;

    background:
        #fbfefb !important;

    color:
        #244b40 !important;
}


/* READY CARD */

.r7-r24-ready-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:
        min(760px,calc(100vw - 32px)) !important;

    padding:
        36px
        clamp(22px,4vw,47px)
        30px !important;

    border:
        1px solid rgba(207,223,212,.94) !important;

    border-radius:
        30px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(250,255,246,.99)
        ) !important;

    box-shadow:
        0 30px 78px rgba(17,58,43,.13),
        0 5px 18px rgba(17,58,43,.04),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    animation:
        cx-r129-r8-r1-r1-enter
        .5s cubic-bezier(.2,.75,.2,1)
        both !important;
}


.r7-r24-ready-card::before{
    content:"";

    position:absolute;

    width:325px;
    height:325px;

    right:-160px;
    top:-170px;

    z-index:-1;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(155,234,84,.27),
            rgba(199,246,158,.11) 47%,
            transparent 72%
        );
}


.r7-r24-ready-card
> *{
    position:relative;
    z-index:2;
}


.r7-r24-ready-card
.r7-r24-ready-orb{
    width:
        92px !important;

    height:
        92px !important;

    margin:
        0 auto 20px !important;

    border:
        1px solid rgba(99,199,54,.22) !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle at 38% 32%,
            #ccfa91,
            #83df39 38%,
            #32b735 68%,
            #16952c
        ) !important;

    box-shadow:
        0 18px 38px rgba(65,181,43,.25),
        0 0 0 10px rgba(109,216,51,.065),
        0 0 0 20px rgba(109,216,51,.03) !important;

    animation:
        cx-r129-r8-r1-r1-ready
        3.1s ease-in-out
        infinite !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb
span{
    color:
        white !important;
}


.r7-r24-ready-card
.section-kicker{
    width:
        max-content !important;

    max-width:
        100% !important;

    margin:
        0 auto 13px !important;

    padding:
        7px 12px !important;

    border:
        1px solid rgba(105,197,66,.20) !important;

    border-radius:
        999px !important;

    background:
        #f2ffe7 !important;

    color:
        #4b8258 !important;

    font-size:
        9px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .18em !important;
}


.r7-r24-ready-card
h2{
    width:
        min(600px,100%) !important;

    margin:
        0 auto !important;

    color:
        #102c4e !important;

    font-size:
        clamp(35px,5vw,50px) !important;

    font-weight:
        950 !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -.052em !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
> p{
    width:
        min(590px,100%) !important;

    margin:
        17px auto 0 !important;

    color:
        #687d93 !important;

    font-size:
        12.5px !important;

    line-height:
        1.65 !important;

    text-align:
        center !important;
}


/* READY STATUS TILES */

.r7-r24-ready-card
.r7-r24-ready-status{
    width:
        100% !important;

    margin:
        27px auto 0 !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:
        11px !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span{
    min-height:
        84px !important;

    padding:
        15px 10px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    border:
        1px solid rgba(181,213,168,.58) !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            145deg,
            #fdfffb,
            #f6fcef
        ) !important;

    color:
        #355d3b !important;

    font-size:
        9px !important;

    font-weight:
        850 !important;

    line-height:
        1.35 !important;

    text-align:
        center !important;

    box-shadow:
        0 7px 19px rgba(56,100,55,.04) !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:hover{
    transform:
        translateY(-2px) !important;

    border-color:
        rgba(105,198,69,.72) !important;

    box-shadow:
        0 12px 27px rgba(54,126,53,.09) !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
i{
    width:
        26px !important;

    height:
        26px !important;

    margin:
        0 !important;

    display:
        inline-grid !important;

    place-items:
        center !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #ddffc5,
            #bdf28b
        ) !important;

    color:
        #37a63b !important;

    font-size:
        12px !important;

    font-style:
        normal !important;

    font-weight:
        950 !important;

    box-shadow:
        0 4px 11px rgba(64,165,52,.13) !important;
}


/* READY CTA */

.r7-r24-ready-card
.r7-r24-codi-start{
    position:
        relative !important;

    overflow:
        hidden !important;

    width:
        min(400px,100%) !important;

    min-height:
        57px !important;

    margin:
        27px auto 0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        12px !important;

    border:
        0 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            105deg,
            #91e510,
            #61d313 34%,
            #2cba25 69%,
            #159b31
        ) !important;

    color:
        #092117 !important;

    font-size:
        11.5px !important;

    font-weight:
        950 !important;

    box-shadow:
        0 18px 36px rgba(67,188,39,.27),
        inset 0 1px 0 rgba(255,255,255,.44) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}


.r7-r24-ready-card
.r7-r24-codi-start:hover{
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 22px 43px rgba(62,181,39,.33),
        inset 0 1px 0 rgba(255,255,255,.48) !important;
}


.r7-r24-ready-card
.r7-r24-codi-start
span{
    font-size:
        16px !important;

    transition:
        transform .18s ease !important;
}


.r7-r24-ready-card
.r7-r24-codi-start:hover
span{
    transform:
        translateX(3px) !important;
}


.r7-r24-ready-card
.r7-r24-ready-note{
    width:
        min(510px,100%) !important;

    margin:
        17px auto 0 !important;

    display:
        block !important;

    color:
        #8292a5 !important;

    font-size:
        9.5px !important;

    font-weight:
        600 !important;

    line-height:
        1.5 !important;

    text-align:
        center !important;
}


/* ANIMATIONS */

@keyframes cx-r129-r8-r1-r1-enter{
    from{
        opacity:0;

        transform:
            translateY(13px)
            scale(.986);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes cx-r129-r8-r1-r1-payicon{
    0%,
    100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-5px)
            scale(1.025);
    }
}


@keyframes cx-r129-r8-r1-r1-ready{
    0%,
    100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-4px)
            scale(1.035);
    }
}


@keyframes cx-r129-r8-r1-r1-shine{
    0%,
    57%{
        left:-85px;
        opacity:0;
    }

    63%{
        opacity:1;
    }

    83%,
    100%{
        left:110%;
        opacity:0;
    }
}


/* MOBILE */

@media(max-width:700px){

    .r72-onboarding-card.centered:has(.plan-price),
    .r7-r24-ready-card{
        width:
            calc(100vw - 24px) !important;

        padding:
            27px 16px 24px !important;

        border-radius:
            24px !important;
    }


    .r72-onboarding-card.centered:has(.plan-price)::before{
        width:
            72px;

        height:
            72px;

        margin-bottom:
            16px;

        border-radius:
            23px;

        background-size:
            31px 31px,
            auto;
    }


    .r72-onboarding-card.centered:has(.plan-price)
    h2{
        font-size:
            30px !important;
    }


    .r72-onboarding-card.centered:has(.plan-price)
    .plan-actions{
        width:
            100% !important;
    }


    .r72-onboarding-card.centered:has(.plan-price)
    .plan-actions::before{
        content:
            "✓ Email verified   •   Payment pending";
    }


    .r7-r24-ready-card
    .r7-r24-ready-status{
        grid-template-columns:
            1fr !important;

        gap:
            8px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status
    span{
        min-height:
            60px !important;

        flex-direction:
            row !important;

        justify-content:
            flex-start !important;

        padding:
            12px 14px !important;

        text-align:
            left !important;
    }


    .r7-r24-ready-card
    .r7-r24-codi-start{
        width:
            100% !important;
    }

}


/* REDUCED MOTION */

@media(prefers-reduced-motion:reduce){

    .r72-onboarding-card.centered:has(.plan-price),
    .r72-onboarding-card.centered:has(.plan-price)::before,
    .r72-onboarding-card.centered:has(.plan-price)
    .button.primary::after,
    .r7-r24-ready-card,
    .r7-r24-ready-card
    .r7-r24-ready-orb{
        animation:
            none !important;
    }

}


/* CODSHIPX_R129_R8_R3_READY_PROFESSIONAL */

body:has(.r7-r24-ready-card){
    background:
        radial-gradient(circle at 16% 18%, rgba(188,246,139,.19), transparent 28%),
        radial-gradient(circle at 84% 26%, rgba(140,233,82,.14), transparent 23%),
        radial-gradient(circle at 50% 100%, rgba(210,248,181,.20), transparent 32%),
        linear-gradient(135deg,#f8fcf7 0%,#f3f7fd 54%,#fbfff7 100%) !important;
}

/* old top ready ui remove / suppress */
body:has(.r7-r24-ready-card) div:has(> .r7-r24-ready-card) > :not(.r7-r24-ready-card):not(style):not(script){
    display:none !important;
}

body:has(.r7-r24-ready-card) div:has(> div > .r7-r24-ready-card) > :not(:has(.r7-r24-ready-card)):not(style):not(script){
    display:none !important;
}

body:has(.r7-r24-ready-card) [role="status"]:not(.r7-r24-ready-card [role="status"]),
body:has(.r7-r24-ready-card) [aria-live="polite"]:not(.r7-r24-ready-card [aria-live="polite"]){
    display:none !important;
}

body:has(.r7-r24-ready-card) main,
body:has(.r7-r24-ready-card) [data-nextjs-scroll-focus-boundary]{
    background:transparent !important;
}

/* focus card */
.r7-r24-ready-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:min(880px,calc(100vw - 32px)) !important;
    min-height:auto !important;

    margin:58px auto 30px !important;
    padding:42px clamp(24px,4vw,56px) 34px !important;

    border:1px solid rgba(206,222,212,.94) !important;
    border-radius:34px !important;

    background:
        linear-gradient(145deg,rgba(255,255,255,.995),rgba(250,255,246,.985)) !important;

    box-shadow:
        0 34px 90px rgba(18,60,45,.14),
        0 10px 26px rgba(18,60,45,.05),
        inset 0 1px 0 rgba(255,255,255,.98) !important;

    animation:cx-r129-r8-r3-card-in .52s cubic-bezier(.2,.75,.2,1) both !important;
}

.r7-r24-ready-card::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:
        radial-gradient(circle at 89% 7%, rgba(178,242,116,.20), transparent 20%),
        radial-gradient(circle at 9% 16%, rgba(188,245,144,.12), transparent 19%);
}

.r7-r24-ready-card::after{
    content:"";
    position:absolute;
    width:440px;
    height:440px;
    right:-225px;
    top:-225px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(168,240,99,.18), rgba(226,250,205,.06) 45%, transparent 70%);
    pointer-events:none;
    z-index:-1;
}

.r7-r24-ready-card > *{
    position:relative;
    z-index:2;
}

.r7-r24-ready-card .r7-r24-ready-orb{
    position:relative !important;
    width:110px !important;
    height:110px !important;
    margin:0 auto 22px !important;
    border:1px solid rgba(110,201,62,.22) !important;
    border-radius:50% !important;
    background:
        radial-gradient(circle at 35% 30%, #d9fcb1, #9ae64c 36%, #39bf34 66%, #13972f 100%) !important;
    box-shadow:
        0 24px 46px rgba(72,185,48,.24),
        0 0 0 12px rgba(124,223,57,.07),
        0 0 0 24px rgba(124,223,57,.03) !important;
    animation:cx-r129-r8-r3-orb 3.1s ease-in-out infinite !important;
}

.r7-r24-ready-card .r7-r24-ready-orb::before{
    content:"";
    position:absolute;
    inset:-11px;
    border-radius:50%;
    border:1px solid rgba(108,207,56,.22);
    opacity:.9;
    animation:cx-r129-r8-r3-ring 3s ease-in-out infinite;
}

.r7-r24-ready-card .r7-r24-ready-orb::after{
    content:"";
    position:absolute;
    inset:-24px;
    border-radius:50%;
    border:1px dashed rgba(108,207,56,.16);
    animation:cx-r129-r8-r3-rotate 14s linear infinite;
}

.r7-r24-ready-card .r7-r24-ready-orb span{
    color:#fff !important;
    filter:drop-shadow(0 2px 5px rgba(18,92,26,.20)) !important;
}

.r7-r24-ready-card .section-kicker{
    width:max-content !important;
    max-width:100% !important;
    margin:0 auto 14px !important;
    padding:8px 14px !important;
    border:1px solid rgba(112,199,73,.22) !important;
    border-radius:999px !important;
    background:rgba(241,255,229,.92) !important;
    color:#557a67 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    text-transform:uppercase !important;
}

.r7-r24-ready-card h2{
    width:min(620px,100%) !important;
    margin:0 auto !important;
    color:#0f2d4f !important;
    font-size:clamp(40px,5vw,58px) !important;
    font-weight:950 !important;
    line-height:1.02 !important;
    letter-spacing:-.058em !important;
    text-align:center !important;
    text-wrap:balance !important;
}

.r7-r24-ready-card > p{
    width:min(620px,100%) !important;
    margin:18px auto 0 !important;
    color:#6b8098 !important;
    font-size:15px !important;
    line-height:1.72 !important;
    text-align:center !important;
    text-wrap:balance !important;
}

.r7-r24-ready-card .r7-r24-ready-status{
    width:100% !important;
    margin:31px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:14px !important;
}

.r7-r24-ready-card .r7-r24-ready-status span{
    position:relative !important;
    min-height:112px !important;
    padding:18px 14px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:10px !important;
    border:1px solid rgba(184,216,170,.62) !important;
    border-radius:22px !important;
    background:
        linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,253,241,.95)) !important;
    color:#32583a !important;
    font-size:11px !important;
    font-weight:850 !important;
    line-height:1.45 !important;
    text-align:center !important;
    box-shadow:0 10px 24px rgba(54,108,53,.05) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}

.r7-r24-ready-card .r7-r24-ready-status span:hover{
    transform:translateY(-3px) !important;
    border-color:rgba(102,194,67,.78) !important;
    box-shadow:0 18px 34px rgba(54,126,53,.10) !important;
}

.r7-r24-ready-card .r7-r24-ready-status i{
    position:relative !important;
    width:34px !important;
    height:34px !important;
    margin:0 !important;
    display:inline-grid !important;
    place-items:center !important;
    border-radius:50% !important;
    background:linear-gradient(145deg,#e4ffcd,#bef28c) !important;
    color:transparent !important;
    font-size:0 !important;
    font-style:normal !important;
    box-shadow:0 6px 15px rgba(67,166,52,.16) !important;
}

.r7-r24-ready-card .r7-r24-ready-status span:nth-child(1) i::before,
.r7-r24-ready-card .r7-r24-ready-status span:nth-child(2) i::before,
.r7-r24-ready-card .r7-r24-ready-status span:nth-child(3) i::before{
    content:"";
    width:16px;
    height:16px;
    background:#31a438;
    display:block;
    -webkit-mask:center/contain no-repeat;
    mask:center/contain no-repeat;
}

.r7-r24-ready-card .r7-r24-ready-status span:nth-child(1) i::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l8 5.5 8-5.5V7H4Zm16 10V9.9l-7.43 5.11a1 1 0 0 1-1.14 0L4 9.9V17h16Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l8 5.5 8-5.5V7H4Zm16 10V9.9l-7.43 5.11a1 1 0 0 1-1.14 0L4 9.9V17h16Z'/%3E%3C/svg%3E");
}

.r7-r24-ready-card .r7-r24-ready-status span:nth-child(2) i::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v5c0 5.25 3.4 10.16 8 11.5 4.6-1.34 8-6.25 8-11.5V6l-8-4Zm0 2.18L18 7v4c0 4.27-2.66 8.18-6 9.36C8.66 19.18 6 15.27 6 11V7l6-2.82Zm-1.02 9.95-2.47-2.48-1.42 1.42 3.89 3.89 6.01-6.02-1.41-1.41-4.6 4.6Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 6v5c0 5.25 3.4 10.16 8 11.5 4.6-1.34 8-6.25 8-11.5V6l-8-4Zm0 2.18L18 7v4c0 4.27-2.66 8.18-6 9.36C8.66 19.18 6 15.27 6 11V7l6-2.82Zm-1.02 9.95-2.47-2.48-1.42 1.42 3.89 3.89 6.01-6.02-1.41-1.41-4.6 4.6Z'/%3E%3C/svg%3E");
}

.r7-r24-ready-card .r7-r24-ready-status span:nth-child(3) i::before{
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 3 4 14h6v7l10-12h-6l-1-6Z'/%3E%3C/svg%3E");
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 3 4 14h6v7l10-12h-6l-1-6Z'/%3E%3C/svg%3E");
}

.r7-r24-ready-card .r7-r24-codi-start{
    position:relative !important;
    overflow:hidden !important;
    width:min(440px,100%) !important;
    min-height:62px !important;
    margin:32px auto 0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:12px !important;
    border:0 !important;
    border-radius:20px !important;
    background:
        linear-gradient(106deg,#9bef12 0%,#6dd50e 29%,#2abd25 67%,#12972f 100%) !important;
    color:#082016 !important;
    font-size:16px !important;
    font-weight:950 !important;
    letter-spacing:-.02em !important;
    box-shadow:
        0 22px 44px rgba(64,186,38,.29),
        inset 0 1px 0 rgba(255,255,255,.46) !important;
    transition:transform .2s ease, box-shadow .2s ease !important;
}

.r7-r24-ready-card .r7-r24-codi-start::before{
    content:"";
    width:18px;
    height:18px;
    background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.2-4-4 1.8-1.8 2.2 2.2 7-7L18 7.4l-8.8 8.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.2 16.2-4-4 1.8-1.8 2.2 2.2 7-7L18 7.4l-8.8 8.8Z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.r7-r24-ready-card .r7-r24-codi-start::after{
    content:"";
    position:absolute;
    width:68px;
    height:160px;
    top:-50px;
    left:-90px;
    transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
    animation:cx-r129-r8-r3-shine 4s ease-in-out infinite;
}

.r7-r24-ready-card .r7-r24-codi-start:hover{
    transform:translateY(-2px) !important;
    box-shadow:
        0 28px 52px rgba(64,186,38,.35),
        inset 0 1px 0 rgba(255,255,255,.52) !important;
}

.r7-r24-ready-card .r7-r24-codi-start span{
    font-size:18px !important;
    transition:transform .18s ease !important;
}

.r7-r24-ready-card .r7-r24-codi-start:hover span{
    transform:translateX(3px) !important;
}

.r7-r24-ready-card .r7-r24-ready-note{
    width:min(560px,100%) !important;
    margin:18px auto 0 !important;
    display:block !important;
    color:#7e90a4 !important;
    font-size:11px !important;
    line-height:1.6 !important;
    text-align:center !important;
}

@keyframes cx-r129-r8-r3-card-in{
    from{opacity:0;transform:translateY(14px) scale(.985);}
    to{opacity:1;transform:translateY(0) scale(1);}
}

@keyframes cx-r129-r8-r3-orb{
    0%,100%{transform:translateY(0) scale(1);}
    50%{transform:translateY(-5px) scale(1.035);}
}

@keyframes cx-r129-r8-r3-ring{
    0%,100%{transform:scale(.95);opacity:.65;}
    50%{transform:scale(1.03);opacity:1;}
}

@keyframes cx-r129-r8-r3-rotate{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

@keyframes cx-r129-r8-r3-shine{
    0%,58%{left:-90px;opacity:0;}
    63%{opacity:1;}
    84%,100%{left:110%;opacity:0;}
}

@media (max-width:760px){
    .r7-r24-ready-card{
        width:calc(100vw - 20px) !important;
        margin:26px auto 18px !important;
        padding:28px 16px 24px !important;
        border-radius:26px !important;
    }

    .r7-r24-ready-card .r7-r24-ready-orb{
        width:88px !important;
        height:88px !important;
    }

    .r7-r24-ready-card h2{
        font-size:38px !important;
    }

    .r7-r24-ready-card > p{
        font-size:14px !important;
    }

    .r7-r24-ready-card .r7-r24-ready-status{
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .r7-r24-ready-card .r7-r24-ready-status span{
        min-height:74px !important;
        flex-direction:row !important;
        justify-content:flex-start !important;
        text-align:left !important;
        padding:14px 16px !important;
    }

    .r7-r24-ready-card .r7-r24-codi-start{
        width:100% !important;
        min-height:58px !important;
    }

    .r7-r24-ready-card .r7-r24-codi-start span{
        font-size:16px !important;
    }
}

@media (prefers-reduced-motion:reduce){
    .r7-r24-ready-card,
    .r7-r24-ready-card .r7-r24-ready-orb,
    .r7-r24-ready-card .r7-r24-ready-orb::before,
    .r7-r24-ready-card .r7-r24-ready-orb::after,
    .r7-r24-ready-card .r7-r24-codi-start::after{
        animation:none !important;
    }
}

/* CODSHIPX_R129_R8_R3_R1_COMPACT_PREMIUM_READY */


/* =========================================================
   Compact premium canvas
   ========================================================= */

body:has(.r7-r24-ready-card){
    min-height:100vh !important;

    background:
        radial-gradient(
            circle at 18% 12%,
            rgba(168,239,113,.18),
            transparent 29%
        ),
        radial-gradient(
            circle at 83% 17%,
            rgba(186,245,139,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f8fcf7 0%,
            #f5f8fc 52%,
            #fbfff7 100%
        ) !important;
}


/* =========================================================
   Card – reference-style compact proportions
   ========================================================= */

.r7-r24-ready-card{
    width:
        min(650px,calc(100vw - 28px)) !important;

    min-height:
        0 !important;

    margin:
        34px auto 22px !important;

    padding:
        31px 30px 23px !important;

    border:
        1px solid
        rgba(209,224,213,.96) !important;

    border-radius:
        27px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(250,255,246,.99)
        ) !important;

    box-shadow:
        0 28px 68px rgba(17,58,43,.12),
        0 6px 18px rgba(17,58,43,.035),
        inset 0 1px 0 rgba(255,255,255,.99) !important;
}


/* decorative premium corner shape */

.r7-r24-ready-card::before{
    content:"" !important;

    position:absolute !important;

    width:
        210px !important;

    height:
        210px !important;

    right:
        -110px !important;

    top:
        -112px !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle,
            rgba(184,244,123,.25),
            rgba(220,250,194,.10) 48%,
            transparent 72%
        ) !important;

    pointer-events:
        none !important;
}


.r7-r24-ready-card::after{
    content:"" !important;

    position:absolute !important;

    width:
        160px !important;

    height:
        160px !important;

    left:
        -100px !important;

    bottom:
        -105px !important;

    border-radius:
        50% !important;

    background:
        radial-gradient(
            circle,
            rgba(192,244,148,.14),
            transparent 70%
        ) !important;

    pointer-events:
        none !important;
}


/* =========================================================
   Success icon with sparkle treatment
   ========================================================= */

.r7-r24-ready-card
.r7-r24-ready-orb{
    width:
        82px !important;

    height:
        82px !important;

    margin:
        2px auto 18px !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #ecffd7 0%,
            #c9f795 50%,
            #a9eb66 100%
        ) !important;

    box-shadow:
        0 13px 28px rgba(67,178,51,.18),
        0 0 0 8px rgba(115,219,55,.065),
        0 0 0 16px rgba(115,219,55,.025) !important;

    animation:
        cx-r129-r8-r3-r1-icon
        3.2s ease-in-out infinite !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb::before{
    content:
        "✦" !important;

    position:absolute !important;

    width:auto !important;
    height:auto !important;

    left:
        -31px !important;

    top:
        11px !important;

    inset-block-end:
        auto !important;

    border:
        0 !important;

    color:
        #50ca32 !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    opacity:
        .9 !important;

    animation:
        cx-r129-r8-r3-r1-spark
        2.3s ease-in-out infinite !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb::after{
    content:
        "✦" !important;

    position:absolute !important;

    width:auto !important;
    height:auto !important;

    right:
        -32px !important;

    top:
        2px !important;

    inset-inline-start:
        auto !important;

    border:
        0 !important;

    color:
        #40bf28 !important;

    font-size:
        23px !important;

    line-height:
        1 !important;

    opacity:
        .92 !important;

    animation:
        cx-r129-r8-r3-r1-spark
        2.6s ease-in-out
        -.8s infinite !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb
span{
    color:
        #ffffff !important;

    font-size:
        27px !important;

    filter:
        drop-shadow(
            0 2px 3px
            rgba(48,142,38,.18)
        ) !important;
}


/* =========================================================
   Typography
   ========================================================= */

.r7-r24-ready-card
.section-kicker{
    margin:
        0 auto 11px !important;

    padding:
        6px 11px !important;

    border:
        1px solid
        rgba(112,199,73,.21) !important;

    border-radius:
        999px !important;

    background:
        rgba(243,255,232,.94) !important;

    color:
        #64816f !important;

    font-size:
        8.5px !important;

    line-height:
        1 !important;

    font-weight:
        900 !important;

    letter-spacing:
        .19em !important;
}


.r7-r24-ready-card
h2{
    width:
        min(520px,100%) !important;

    margin:
        0 auto !important;

    color:
        #102c4d !important;

    font-size:
        clamp(31px,4.2vw,39px) !important;

    line-height:
        1.02 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.055em !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
> p{
    width:
        min(480px,100%) !important;

    margin:
        14px auto 0 !important;

    color:
        #75879d !important;

    font-size:
        12.5px !important;

    line-height:
        1.58 !important;

    font-weight:
        520 !important;

    text-align:
        center !important;
}


/* =========================================================
   Compact feature/status cards
   ========================================================= */

.r7-r24-ready-card
.r7-r24-ready-status{
    width:
        100% !important;

    margin:
        23px auto 0 !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:
        9px !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span{
    min-height:
        103px !important;

    padding:
        14px 9px !important;

    gap:
        8px !important;

    border:
        1px solid
        rgba(223,233,220,.96) !important;

    border-radius:
        17px !important;

    background:
        rgba(255,255,255,.82) !important;

    color:
        #425e4b !important;

    font-size:
        9.3px !important;

    line-height:
        1.35 !important;

    font-weight:
        820 !important;

    box-shadow:
        0 7px 19px rgba(55,105,55,.035) !important;
}


/* Highlight final/current ready step */

.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(3){
    border:
        1px solid
        rgba(83,201,66,.72) !important;

    background:
        linear-gradient(
            145deg,
            #fbfff7,
            #f1fce9
        ) !important;

    box-shadow:
        0 10px 24px rgba(66,177,52,.10) !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(3)::after{
    content:
        "READY";

    position:absolute;

    right:
        9px;

    top:
        8px;

    padding:
        3px 5px;

    border-radius:
        999px;

    background:
        #e8ffd7;

    color:
        #36a137;

    font-size:
        6px;

    line-height:
        1;

    font-weight:
        950;

    letter-spacing:
        .1em;
}


.r7-r24-ready-card
.r7-r24-ready-status
i{
    width:
        30px !important;

    height:
        30px !important;

    background:
        linear-gradient(
            145deg,
            #e3ffc9,
            #c4f291
        ) !important;

    box-shadow:
        0 5px 12px
        rgba(63,163,52,.13) !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:hover{
    transform:
        translateY(-2px) !important;
}


/* =========================================================
   Main CTA – reference style
   ========================================================= */

.r7-r24-ready-card
.r7-r24-codi-start{
    width:
        min(365px,100%) !important;

    min-height:
        53px !important;

    margin:
        21px auto 0 !important;

    border-radius:
        17px !important;

    background:
        linear-gradient(
            103deg,
            #87e90b 0%,
            #54cf18 34%,
            #24b92a 69%,
            #159c34 100%
        ) !important;

    color:
        #092218 !important;

    font-size:
        12px !important;

    font-weight:
        950 !important;

    box-shadow:
        0 16px 32px
        rgba(59,180,41,.24),
        inset 0 1px 0
        rgba(255,255,255,.45) !important;
}


.r7-r24-ready-card
.r7-r24-codi-start::before{
    width:
        15px !important;

    height:
        15px !important;
}


.r7-r24-ready-card
.r7-r24-codi-start:hover{
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 20px 38px
        rgba(59,180,41,.30),
        inset 0 1px 0
        rgba(255,255,255,.5) !important;
}


.r7-r24-ready-card
.r7-r24-codi-start
span{
    font-size:
        14px !important;
}


/* secure note */

.r7-r24-ready-card
.r7-r24-ready-note{
    width:
        min(455px,100%) !important;

    margin:
        11px auto 0 !important;

    color:
        #84968e !important;

    font-size:
        8.5px !important;

    line-height:
        1.5 !important;

    font-weight:
        620 !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
.r7-r24-ready-note::before{
    content:
        "🔒  ";

    font-size:
        8px;
}


/* =========================================================
   Animations
   ========================================================= */

@keyframes cx-r129-r8-r3-r1-icon{
    0%,
    100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-3px)
            scale(1.025);
    }
}


@keyframes cx-r129-r8-r3-r1-spark{
    0%,
    100%{
        opacity:.35;
        transform:scale(.72);
    }

    50%{
        opacity:1;
        transform:scale(1.12);
    }
}


/* =========================================================
   Mobile
   ========================================================= */

@media(max-width:700px){

    .r7-r24-ready-card{
        width:
            calc(100vw - 20px) !important;

        margin:
            18px auto 14px !important;

        padding:
            25px 14px 21px !important;

        border-radius:
            23px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-orb{
        width:
            72px !important;

        height:
            72px !important;

        margin-bottom:
            16px !important;
    }


    .r7-r24-ready-card
    h2{
        font-size:
            31px !important;
    }


    .r7-r24-ready-card
    > p{
        font-size:
            12px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status{
        grid-template-columns:
            1fr !important;

        gap:
            7px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status
    span{
        min-height:
            61px !important;

        flex-direction:
            row !important;

        justify-content:
            flex-start !important;

        padding:
            10px 13px !important;

        text-align:
            left !important;
    }


    .r7-r24-ready-card
    .r7-r24-codi-start{
        width:
            100% !important;
    }

}


@media(prefers-reduced-motion:reduce){

    .r7-r24-ready-card
    .r7-r24-ready-orb,

    .r7-r24-ready-card
    .r7-r24-ready-orb::before,

    .r7-r24-ready-card
    .r7-r24-ready-orb::after{
        animation:
            none !important;
    }

}

/* END R129-R8-R3-R1 */

/* CODSHIPX_R129_R8_R3_R2_REFERENCE_READY */


/* =========================================================
   CANVAS
   ========================================================= */

body:has(.r7-r24-ready-card){
    min-height:100vh !important;

    background:
        radial-gradient(
            circle at 15% 14%,
            rgba(187,244,144,.20),
            transparent 27%
        ),
        radial-gradient(
            circle at 88% 15%,
            rgba(198,247,159,.17),
            transparent 29%
        ),
        linear-gradient(
            135deg,
            #f9fcf7 0%,
            #f4f8fc 52%,
            #fbfff7 100%
        ) !important;
}


/* old page/footer noise */
body:has(.r7-r24-ready-card) footer{
    display:none !important;
}


/* =========================================================
   EXACT COMPACT CARD RESET
   ========================================================= */

.r7-r24-ready-card{
    box-sizing:border-box !important;

    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    width:
        min(520px,calc(100vw - 26px)) !important;

    min-width:
        0 !important;

    max-width:
        520px !important;

    min-height:
        0 !important;

    height:
        auto !important;

    margin:
        25px auto 18px !important;

    padding:
        24px 21px 19px !important;

    border:
        1px solid
        rgba(210,226,214,.96) !important;

    border-radius:
        23px !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(250,255,247,.99)
        ) !important;

    box-shadow:
        0 24px 58px rgba(27,70,49,.115),
        0 5px 16px rgba(27,70,49,.035),
        inset 0 1px 0 rgba(255,255,255,.99) !important;

    transform:none !important;

    animation:
        cx-r129-r8-r3-r2-card
        .42s cubic-bezier(.2,.75,.2,1)
        both !important;
}


.r7-r24-ready-card::before{
    content:"" !important;

    position:absolute !important;

    width:175px !important;
    height:175px !important;

    right:-92px !important;
    top:-96px !important;

    left:auto !important;
    bottom:auto !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(190,247,132,.28),
            rgba(226,252,200,.10) 50%,
            transparent 73%
        ) !important;

    pointer-events:none !important;
}


.r7-r24-ready-card::after{
    content:"" !important;

    position:absolute !important;

    width:120px !important;
    height:120px !important;

    left:-73px !important;
    bottom:-76px !important;

    right:auto !important;
    top:auto !important;

    border:0 !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            circle,
            rgba(191,245,151,.15),
            transparent 70%
        ) !important;

    pointer-events:none !important;
}


.r7-r24-ready-card > *{
    position:relative !important;
    z-index:2 !important;
}


/* =========================================================
   HERO SUCCESS ICON — reference proportions
   ========================================================= */

.r7-r24-ready-card
.r7-r24-ready-orb{
    position:relative !important;

    box-sizing:border-box !important;

    width:67px !important;
    height:67px !important;

    min-width:67px !important;
    min-height:67px !important;

    margin:
        0 auto 13px !important;

    padding:
        0 !important;

    display:grid !important;
    place-items:center !important;

    border:
        1px solid
        rgba(103,207,55,.22) !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #f0ffdd 0%,
            #d2faa5 50%,
            #a9ec6a 100%
        ) !important;

    box-shadow:
        0 11px 23px rgba(66,176,48,.17),
        0 0 0 7px rgba(111,215,55,.055),
        0 0 0 13px rgba(111,215,55,.022) !important;

    animation:
        cx-r129-r8-r3-r2-float
        3s ease-in-out
        infinite !important;
}


/* left sparkle */
.r7-r24-ready-card
.r7-r24-ready-orb::before{
    content:
        "✦  ·" !important;

    position:absolute !important;

    inset:
        auto !important;

    left:
        -38px !important;

    top:
        9px !important;

    width:
        auto !important;

    height:
        auto !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    color:
        #54ce34 !important;

    background:
        none !important;

    font-size:
        15px !important;

    line-height:
        1 !important;

    letter-spacing:
        4px !important;

    opacity:
        .95 !important;

    animation:
        cx-r129-r8-r3-r2-spark
        2.1s ease-in-out infinite !important;
}


/* right sparkle */
.r7-r24-ready-card
.r7-r24-ready-orb::after{
    content:
        "✦  ✧" !important;

    position:absolute !important;

    inset:
        auto !important;

    right:
        -45px !important;

    top:
        3px !important;

    width:
        auto !important;

    height:
        auto !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    color:
        #42bf2d !important;

    background:
        none !important;

    font-size:
        17px !important;

    line-height:
        1 !important;

    letter-spacing:
        5px !important;

    opacity:
        .95 !important;

    animation:
        cx-r129-r8-r3-r2-spark
        2.4s ease-in-out
        -.7s infinite !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb
span{
    width:
        38px !important;

    height:
        38px !important;

    display:
        grid !important;

    place-items:
        center !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            145deg,
            #7bdd27,
            #2dbd30
        ) !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        0 7px 15px rgba(48,163,44,.21),
        inset 0 1px 0 rgba(255,255,255,.42) !important;
}


.r7-r24-ready-card
.r7-r24-ready-orb
span::before{
    content:"" !important;

    width:
        20px !important;

    height:
        20px !important;

    display:block !important;

    background:
        #ffffff !important;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 16.6-4.1-4.1 1.65-1.65 2.45 2.45 7.7-7.7 1.65 1.65-9.35 9.35Z'/%3E%3C/svg%3E")
        center / contain no-repeat !important;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m9.3 16.6-4.1-4.1 1.65-1.65 2.45 2.45 7.7-7.7 1.65 1.65-9.35 9.35Z'/%3E%3C/svg%3E")
        center / contain no-repeat !important;
}


/* =========================================================
   TEXT HIERARCHY
   ========================================================= */

/* Reference image uses plain letterspaced kicker, not pill */
.r7-r24-ready-card
.section-kicker{
    width:
        auto !important;

    max-width:
        none !important;

    margin:
        0 auto 8px !important;

    padding:
        0 !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    background:
        transparent !important;

    color:
        #5e956a !important;

    font-size:
        7.2px !important;

    font-weight:
        950 !important;

    line-height:
        1.2 !important;

    letter-spacing:
        .30em !important;

    text-align:
        center !important;

    text-transform:
        uppercase !important;

    box-shadow:
        none !important;
}


.r7-r24-ready-card
h2{
    width:
        min(440px,100%) !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    color:
        #0e2a4a !important;

    font-size:
        27px !important;

    line-height:
        1.05 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.048em !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
> p{
    width:
        min(410px,100%) !important;

    margin:
        9px auto 0 !important;

    padding:
        0 !important;

    color:
        #74879d !important;

    font-size:
        10px !important;

    line-height:
        1.48 !important;

    font-weight:
        520 !important;

    text-align:
        center !important;
}


/* =========================================================
   THREE REFERENCE-LIKE STATUS CARDS
   ========================================================= */

.r7-r24-ready-card
.r7-r24-ready-status{
    width:
        100% !important;

    margin:
        17px auto 0 !important;

    padding:
        0 !important;

    display:
        grid !important;

    grid-template-columns:
        repeat(3,minmax(0,1fr)) !important;

    gap:
        7px !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span{
    box-sizing:border-box !important;

    position:relative !important;

    min-width:
        0 !important;

    min-height:
        91px !important;

    height:
        91px !important;

    margin:
        0 !important;

    padding:
        11px 6px 9px !important;

    display:
        flex !important;

    flex-direction:
        column !important;

    align-items:
        center !important;

    justify-content:
        flex-start !important;

    gap:
        0 !important;

    border:
        1px solid
        #e5eee2 !important;

    border-radius:
        13px !important;

    background:
        rgba(255,255,255,.84) !important;

    color:
        #183b2b !important;

    font-size:
        8.3px !important;

    line-height:
        1.15 !important;

    font-weight:
        850 !important;

    text-align:
        center !important;

    box-shadow:
        0 5px 14px rgba(45,91,51,.028) !important;

    transform:none !important;

    transition:
        transform .18s ease,
        border-color .18s ease,
        box-shadow .18s ease !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:hover{
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 9px 19px rgba(48,123,53,.07) !important;
}


/* current/final card */
.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(3){
    border:
        1px solid
        #64cf61 !important;

    background:
        linear-gradient(
            145deg,
            #fbfff8,
            #f1fce9
        ) !important;

    box-shadow:
        0 8px 18px rgba(67,179,51,.085) !important;
}


/* Icons */
.r7-r24-ready-card
.r7-r24-ready-status
i{
    position:relative !important;

    width:
        32px !important;

    height:
        32px !important;

    min-width:
        32px !important;

    min-height:
        32px !important;

    margin:
        0 0 7px !important;

    padding:
        0 !important;

    display:
        grid !important;

    place-items:
        center !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        linear-gradient(
            145deg,
            #e6ffd2,
            #c6f593
        ) !important;

    color:
        transparent !important;

    font-size:
        0 !important;

    box-shadow:
        0 5px 11px rgba(67,163,52,.12) !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
i::before{
    width:
        16px !important;

    height:
        16px !important;

    display:
        block !important;

    background:
        #2daf3a !important;
}


/* subtext matching reference density */
.r7-r24-ready-card
.r7-r24-ready-status
span::after{
    display:block !important;

    width:
        94% !important;

    margin:
        4px auto 0 !important;

    color:
        #819184 !important;

    font-size:
        6.5px !important;

    line-height:
        1.28 !important;

    font-weight:
        520 !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(1)::after{
    content:
        "Your account email is confirmed." !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(2)::after{
    content:
        "Your secure CRM workspace is active." !important;
}


.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(3)::after{
    content:
        "You can continue to secure CRM sign-in." !important;
}


/* replace old READY badge with tiny current-dot treatment */
.r7-r24-ready-card
.r7-r24-ready-status
span:nth-child(3)::before{
    content:"" !important;

    position:absolute !important;

    width:
        6px !important;

    height:
        6px !important;

    right:
        7px !important;

    top:
        7px !important;

    border:
        0 !important;

    border-radius:
        50% !important;

    background:
        #4cc842 !important;

    box-shadow:
        0 0 0 4px
        rgba(76,200,66,.09) !important;
}


/* =========================================================
   CTA — compact like reference
   ========================================================= */

.r7-r24-ready-card
.r7-r24-codi-start{
    box-sizing:border-box !important;

    position:relative !important;

    width:
        min(310px,100%) !important;

    min-width:
        0 !important;

    max-width:
        310px !important;

    min-height:
        43px !important;

    height:
        43px !important;

    margin:
        13px auto 0 !important;

    padding:
        0 18px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    border:
        0 !important;

    border-radius:
        14px !important;

    background:
        linear-gradient(
            103deg,
            #79dd11 0%,
            #50cc20 33%,
            #25b92c 69%,
            #129b35 100%
        ) !important;

    color:
        #072116 !important;

    font-size:
        9.5px !important;

    line-height:
        1 !important;

    font-weight:
        950 !important;

    letter-spacing:
        -.01em !important;

    box-shadow:
        0 13px 27px rgba(53,180,42,.22),
        inset 0 1px 0 rgba(255,255,255,.45) !important;

    transform:none !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}


.r7-r24-ready-card
.r7-r24-codi-start::before{
    width:
        13px !important;

    height:
        13px !important;

    min-width:
        13px !important;

    min-height:
        13px !important;
}


.r7-r24-ready-card
.r7-r24-codi-start::after{
    content:"" !important;

    position:absolute !important;

    width:
        46px !important;

    height:
        100px !important;

    top:
        -29px !important;

    left:
        -58px !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.42),
            transparent
        ) !important;

    transform:
        rotate(18deg) !important;

    animation:
        cx-r129-r8-r3-r2-shine
        4.2s ease-in-out
        infinite !important;
}


.r7-r24-ready-card
.r7-r24-codi-start:hover{
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 17px 32px rgba(53,180,42,.29),
        inset 0 1px 0 rgba(255,255,255,.5) !important;
}


.r7-r24-ready-card
.r7-r24-codi-start
span{
    font-size:
        11px !important;

    line-height:
        1 !important;
}


/* =========================================================
   Tiny secure note like reference
   ========================================================= */

.r7-r24-ready-card
.r7-r24-ready-note{
    width:
        min(350px,100%) !important;

    margin:
        8px auto 0 !important;

    padding:
        0 !important;

    display:
        block !important;

    color:
        #8a9b92 !important;

    font-size:
        6.9px !important;

    line-height:
        1.35 !important;

    font-weight:
        580 !important;

    text-align:
        center !important;
}


.r7-r24-ready-card
.r7-r24-ready-note::before{
    content:
        "🔒 " !important;

    font-size:
        6px !important;
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes cx-r129-r8-r3-r2-card{
    from{
        opacity:0;
        transform:
            translateY(8px)
            scale(.989);
    }

    to{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes cx-r129-r8-r3-r2-float{
    0%,
    100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-3px)
            scale(1.025);
    }
}


@keyframes cx-r129-r8-r3-r2-spark{
    0%,
    100%{
        opacity:.30;
        transform:scale(.72);
    }

    50%{
        opacity:1;
        transform:scale(1.08);
    }
}


@keyframes cx-r129-r8-r3-r2-shine{
    0%,
    60%{
        left:-58px;
        opacity:0;
    }

    65%{
        opacity:1;
    }

    84%,
    100%{
        left:110%;
        opacity:0;
    }
}


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

@media(max-width:620px){

    .r7-r24-ready-card{
        width:
            calc(100vw - 18px) !important;

        max-width:
            none !important;

        margin:
            12px auto !important;

        padding:
            22px 13px 18px !important;

        border-radius:
            20px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-orb{
        width:
            62px !important;

        height:
            62px !important;

        min-width:
            62px !important;

        min-height:
            62px !important;
    }


    .r7-r24-ready-card
    h2{
        font-size:
            25px !important;
    }


    .r7-r24-ready-card
    > p{
        width:
            min(330px,100%) !important;

        font-size:
            9.3px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status{
        grid-template-columns:
            1fr !important;

        gap:
            6px !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status
    span{
        height:
            64px !important;

        min-height:
            64px !important;

        display:
            grid !important;

        grid-template-columns:
            38px 1fr !important;

        grid-template-rows:
            auto auto !important;

        column-gap:
            8px !important;

        align-items:
            center !important;

        justify-items:
            start !important;

        padding:
            8px 11px !important;

        text-align:
            left !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status
    i{
        grid-column:
            1 !important;

        grid-row:
            1 / 3 !important;

        margin:
            0 !important;
    }


    .r7-r24-ready-card
    .r7-r24-ready-status
    span::after{
        grid-column:
            2 !important;

        width:
            100% !important;

        margin:
            0 !important;

        text-align:
            left !important;
    }


    .r7-r24-ready-card
    .r7-r24-codi-start{
        width:
            100% !important;

        max-width:
            100% !important;
    }

}


@media(prefers-reduced-motion:reduce){

    .r7-r24-ready-card,
    .r7-r24-ready-card
    .r7-r24-ready-orb,
    .r7-r24-ready-card
    .r7-r24-ready-orb::before,
    .r7-r24-ready-card
    .r7-r24-ready-orb::after,
    .r7-r24-ready-card
    .r7-r24-codi-start::after{
        animation:
            none !important;
    }

}

/* END R129-R8-R3-R2 */


/* =========================================================
   CODSHIPX_R129_R8_R4_R1_NEW_READY_DOM
   Completely new Ready markup.
   ========================================================= */


/* READY CANVAS */

body:has(.cx-ready-v2){
    background:
        radial-gradient(
            circle at 14% 15%,
            rgba(178,239,128,.20),
            transparent 27%
        ),
        radial-gradient(
            circle at 86% 13%,
            rgba(203,248,167,.18),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(209,248,179,.16),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #f9fcf7 0%,
            #f5f8fc 52%,
            #fbfff6 100%
        ) !important;
}


body:has(.cx-ready-v2)
.r72-onboarding{
    min-height:
        100vh !important;

    padding:
        28px 16px !important;

    display:
        grid !important;

    place-items:
        center !important;

    background:
        transparent !important;
}


body:has(.cx-ready-v2)
.r72-onboarding-shell{
    width:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


/* REMOVE OLD ONBOARDING CHROME ONLY ON READY */

body:has(.cx-ready-v2)
.r72-onboarding-shell
> header,

body:has(.cx-ready-v2)
.r72-onboarding-progress,

body:has(.cx-ready-v2)
.r72-success,

body:has(.cx-ready-v2)
.r72-onboarding-shell
> footer{
    display:
        none !important;
}


/* NEW PREMIUM READY CARD */

.cx-ready-v2{
    position:
        relative;

    isolation:
        isolate;

    overflow:
        hidden;

    box-sizing:
        border-box;

    width:
        min(650px,calc(100vw - 28px));

    margin:
        0 auto;

    padding:
        34px
        clamp(20px,4vw,38px)
        27px;

    border:
        1px solid
        rgba(209,226,213,.96);

    border-radius:
        28px;

    background:
        radial-gradient(
            circle at 91% 4%,
            rgba(212,250,174,.30),
            transparent 24%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.995),
            rgba(250,255,247,.985)
        );

    box-shadow:
        0 30px 80px
        rgba(24,68,45,.14),

        0 7px 20px
        rgba(24,68,45,.04),

        inset 0 1px 0
        rgba(255,255,255,.98);

    text-align:
        center;

    animation:
        cx-ready-v2-enter
        .5s cubic-bezier(.2,.75,.2,1)
        both;
}


.cx-ready-v2::before{
    content:"";

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    right:
        -130px;

    top:
        -135px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(179,241,117,.22),
            transparent 70%
        );

    pointer-events:
        none;

    z-index:
        -1;
}


.cx-ready-v2::after{
    content:"";

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    left:
        -120px;

    bottom:
        -125px;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(195,244,157,.14),
            transparent 70%
        );

    pointer-events:
        none;

    z-index:
        -1;
}


/* HERO */

.cx-ready-v2__hero{
    position:
        relative;

    width:
        98px;

    height:
        98px;

    margin:
        0 auto 17px;

    display:
        grid;

    place-items:
        center;
}


.cx-ready-v2__ring{
    position:
        absolute;

    inset:
        7px;

    border:
        1px solid
        rgba(90,196,48,.22);

    border-radius:
        50%;

    box-shadow:
        0 0 0 9px
        rgba(113,215,53,.055),

        0 0 0 18px
        rgba(113,215,53,.025);

    animation:
        cx-ready-v2-pulse
        3.1s ease-in-out
        infinite;
}


.cx-ready-v2__hero-icon{
    position:
        relative;

    z-index:
        3;

    width:
        62px;

    height:
        62px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        21px;

    background:
        linear-gradient(
            145deg,
            #a3ed51,
            #61d126 48%,
            #20a934
        );

    color:
        #ffffff;

    box-shadow:
        0 15px 31px
        rgba(55,178,43,.27),

        inset 0 1px 0
        rgba(255,255,255,.50);

    animation:
        cx-ready-v2-float
        3s ease-in-out
        infinite;
}


.cx-ready-v2__spark{
    position:
        absolute;

    width:
        9px;

    height:
        9px;

    z-index:
        4;

    transform:
        rotate(45deg);

    border-radius:
        2px;

    background:
        #54ce34;

    animation:
        cx-ready-v2-spark
        2.3s ease-in-out
        infinite;
}


.cx-ready-v2__spark-a{
    left:
        2px;

    top:
        29px;
}


.cx-ready-v2__spark-b{
    right:
        3px;

    top:
        19px;

    width:
        12px;

    height:
        12px;

    animation-delay:
        -.8s;
}


.cx-ready-v2__spark-c{
    right:
        13px;

    bottom:
        18px;

    width:
        5px;

    height:
        5px;

    animation-delay:
        -1.4s;
}


/* TYPOGRAPHY */

.cx-ready-v2__eyebrow{
    display:
        block;

    margin:
        0 0 10px;

    color:
        #60936b;

    font-size:
        9px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        .27em;
}


.cx-ready-v2__title{
    margin:
        0;

    color:
        #102c4d;

    font-size:
        clamp(34px,5vw,46px);

    font-weight:
        950;

    line-height:
        1.02;

    letter-spacing:
        -.055em;

    text-wrap:
        balance;
}


.cx-ready-v2__lead{
    width:
        min(500px,100%);

    margin:
        15px auto 0;

    color:
        #74879d;

    font-size:
        13.5px;

    font-weight:
        520;

    line-height:
        1.58;

    text-wrap:
        balance;
}


/* STATUS GRID */

.cx-ready-v2__steps{
    margin:
        28px 0 0;

    display:
        grid;

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

    gap:
        10px;
}


.cx-ready-v2__step{
    position:
        relative;

    min-width:
        0;

    min-height:
        142px;

    padding:
        17px 12px 14px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        flex-start;

    border:
        1px solid
        #e2ebe0;

    border-radius:
        18px;

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

    box-shadow:
        0 8px 22px
        rgba(47,94,50,.035);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.cx-ready-v2__step:hover{
    transform:
        translateY(-3px);

    border-color:
        #c7dec1;

    box-shadow:
        0 14px 28px
        rgba(51,121,53,.08);
}


.cx-ready-v2__step-ready{
    border-color:
        #70d367;

    background:
        linear-gradient(
            145deg,
            #fcfff9,
            #f0fbe9
        );

    box-shadow:
        0 12px 27px
        rgba(63,178,50,.10);
}


.cx-ready-v2__step-icon{
    width:
        43px;

    height:
        43px;

    margin:
        0 0 12px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        linear-gradient(
            145deg,
            #e8ffd7,
            #c6f496
        );

    box-shadow:
        0 7px 15px
        rgba(64,162,52,.12);
}


.cx-ready-v2__step-icon::before{
    content:"";

    width:
        21px;

    height:
        21px;

    display:
        block;

    background:
        #2eaf3c;

    -webkit-mask:
        center / contain
        no-repeat;

    mask:
        center / contain
        no-repeat;
}


/* EMAIL ICON */

.cx-ready-v2__mail::before{
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l9 5.8 9-5.8V7H3Zm18 10V9.9l-8.46 5.45a1 1 0 0 1-1.08 0L3 9.9V17h18Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5h18a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Zm0 2v.5l9 5.8 9-5.8V7H3Zm18 10V9.9l-8.46 5.45a1 1 0 0 1-1.08 0L3 9.9V17h18Z'/%3E%3C/svg%3E");
}


/* SHIELD ICON */

.cx-ready-v2__shield::before{
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.5V11c0 5.2 3.4 9.8 8 11 4.6-1.2 8-5.8 8-11V5.5L12 2Zm0 3 5.5 2.4V11c0 3.8-2.3 7.3-5.5 8.4C8.8 18.3 6.5 14.8 6.5 11V7.4L12 5Zm-1.1 8.9-2.3-2.3-1.5 1.5 3.8 3.8 6.1-6.1-1.5-1.5-4.6 4.6Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5.5V11c0 5.2 3.4 9.8 8 11 4.6-1.2 8-5.8 8-11V5.5L12 2Zm0 3 5.5 2.4V11c0 3.8-2.3 7.3-5.5 8.4C8.8 18.3 6.5 14.8 6.5 11V7.4L12 5Zm-1.1 8.9-2.3-2.3-1.5 1.5 3.8 3.8 6.1-6.1-1.5-1.5-4.6 4.6Z'/%3E%3C/svg%3E");
}


/* BOLT ICON */

.cx-ready-v2__bolt::before{
    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.2 2 4 14h6.2L9 22l11-13h-6.3L13.2 2Z'/%3E%3C/svg%3E");

    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13.2 2 4 14h6.2L9 22l11-13h-6.3L13.2 2Z'/%3E%3C/svg%3E");
}


.cx-ready-v2__step
strong{
    color:
        #193d2c;

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1.25;
}


.cx-ready-v2__step
small{
    margin:
        7px 0 0;

    color:
        #7d8e83;

    font-size:
        9px;

    font-weight:
        520;

    line-height:
        1.4;
}


.cx-ready-v2__ready-badge{
    position:
        absolute;

    right:
        9px;

    top:
        8px;

    padding:
        4px 6px;

    border-radius:
        999px;

    background:
        #e7ffd5;

    color:
        #35a13b;

    font-size:
        6px;

    font-weight:
        950;

    line-height:
        1;

    letter-spacing:
        .12em;
}


/* CTA */

.cx-ready-v2__cta{
    position:
        relative;

    overflow:
        hidden;

    width:
        min(390px,100%);

    min-height:
        56px;

    margin:
        24px auto 0;

    padding:
        0 20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        0;

    border-radius:
        17px;

    background:
        linear-gradient(
            105deg,
            #8ee80c 0%,
            #57d11b 33%,
            #27b92a 67%,
            #139c34 100%
        );

    color:
        #082116;

    font-size:
        13px;

    font-weight:
        950;

    cursor:
        pointer;

    box-shadow:
        0 18px 36px
        rgba(55,181,40,.26),

        inset 0 1px 0
        rgba(255,255,255,.45);

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}


.cx-ready-v2__cta::after{
    content:"";

    position:
        absolute;

    width:
        55px;

    height:
        135px;

    top:
        -40px;

    left:
        -75px;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.43),
            transparent
        );

    animation:
        cx-ready-v2-shine
        4.1s ease-in-out
        infinite;
}


.cx-ready-v2__cta:hover{
    transform:
        translateY(-2px);

    box-shadow:
        0 23px 43px
        rgba(55,181,40,.32),

        inset 0 1px 0
        rgba(255,255,255,.50);
}


.cx-ready-v2__cta
b{
    margin-left:
        2px;

    font-size:
        17px;

    transition:
        transform .18s ease;
}


.cx-ready-v2__cta:hover
b{
    transform:
        translateX(3px);
}


.cx-ready-v2__lock{
    width:
        15px;

    height:
        15px;

    background:
        currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 10V8a5 5 0 0 1 10 0v2h1a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h1Zm2 0h6V8a3 3 0 0 0-6 0v2Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


/* SECURE NOTE */

.cx-ready-v2__secure{
    margin:
        13px auto 0;

    display:
        block;

    color:
        #84968d;

    font-size:
        9px;

    font-weight:
        600;

    line-height:
        1.45;
}


.cx-ready-v2__secure
span{
    margin-right:
        5px;

    color:
        #37b73c;

    font-size:
        8px;
}


/* ANIMATIONS */

@keyframes cx-ready-v2-enter{
    from{
        opacity:0;

        transform:
            translateY(12px)
            scale(.986);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


@keyframes cx-ready-v2-float{
    0%,
    100%{
        transform:
            translateY(0)
            scale(1);
    }

    50%{
        transform:
            translateY(-4px)
            scale(1.025);
    }
}


@keyframes cx-ready-v2-pulse{
    0%,
    100%{
        transform:
            scale(.96);

        opacity:
            .72;
    }

    50%{
        transform:
            scale(1.04);

        opacity:
            1;
    }
}


@keyframes cx-ready-v2-spark{
    0%,
    100%{
        opacity:
            .28;

        transform:
            rotate(45deg)
            scale(.72);
    }

    50%{
        opacity:
            1;

        transform:
            rotate(45deg)
            scale(1.12);
    }
}


@keyframes cx-ready-v2-shine{
    0%,
    58%{
        left:
            -75px;

        opacity:
            0;
    }

    64%{
        opacity:
            1;
    }

    84%,
    100%{
        left:
            110%;

        opacity:
            0;
    }
}


/* MOBILE */

@media(max-width:680px){

    body:has(.cx-ready-v2)
    .r72-onboarding{
        padding:
            14px 10px !important;
    }


    .cx-ready-v2{
        width:
            100%;

        padding:
            27px 15px 22px;

        border-radius:
            23px;
    }


    .cx-ready-v2__hero{
        width:
            82px;

        height:
            82px;

        margin-bottom:
            14px;
    }


    .cx-ready-v2__hero-icon{
        width:
            54px;

        height:
            54px;

        border-radius:
            18px;
    }


    .cx-ready-v2__title{
        font-size:
            33px;
    }


    .cx-ready-v2__lead{
        font-size:
            12px;
    }


    .cx-ready-v2__steps{
        grid-template-columns:
            1fr;

        gap:
            8px;

        margin-top:
            21px;
    }


    .cx-ready-v2__step{
        min-height:
            75px;

        padding:
            12px 14px;

        display:
            grid;

        grid-template-columns:
            46px 1fr;

        grid-template-rows:
            auto auto;

        column-gap:
            10px;

        justify-items:
            start;

        text-align:
            left;
    }


    .cx-ready-v2__step-icon{
        grid-column:
            1;

        grid-row:
            1 / 3;

        margin:
            0;

        align-self:
            center;
    }


    .cx-ready-v2__step
    strong{
        align-self:
            end;
    }


    .cx-ready-v2__step
    small{
        margin:
            3px 0 0;

        align-self:
            start;
    }


    .cx-ready-v2__cta{
        width:
            100%;
    }

}


@media(prefers-reduced-motion:reduce){

    .cx-ready-v2,
    .cx-ready-v2__hero-icon,
    .cx-ready-v2__ring,
    .cx-ready-v2__spark,
    .cx-ready-v2__cta::after{
        animation:
            none !important;
    }

}


/* END CODSHIPX_R129_R8_R4_R1_NEW_READY_DOM */


/* =========================================================
   CODSHIPX_R129_R8_R5_R1_PASSWORD_SHOW_HIDE
   ========================================================= */

.cx-auth-form
.cx-auth-password-field{
    position:
        relative;
}


.cx-auth-form
.cx-auth-password-wrap{
    position:
        relative;

    width:
        100%;
}


.cx-auth-form
.cx-auth-password-wrap
input[name="password"]{
    width:
        100% !important;

    padding-right:
        94px !important;
}


.cx-auth-form
.cx-auth-password-toggle{
    position:
        absolute;

    top:
        50%;

    right:
        9px;

    z-index:
        5;

    min-width:
        74px;

    height:
        34px;

    padding:
        0 10px;

    transform:
        translateY(-50%);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        rgba(176,199,183,.85);

    border-radius:
        10px;

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

    color:
        #51677a;

    font-family:
        inherit;

    font-size:
        10px;

    font-weight:
        850;

    line-height:
        1;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px
        rgba(32,67,48,.055),

        inset 0 1px 0
        rgba(255,255,255,.98);

    transition:
        border-color .16s ease,
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;

    -webkit-tap-highlight-color:
        transparent;
}


.cx-auth-form
.cx-auth-password-toggle:hover{
    border-color:
        rgba(109,196,75,.75);

    background:
        #fbfff8;

    color:
        #269139;

    box-shadow:
        0 6px 15px
        rgba(45,135,47,.10);

    transform:
        translateY(-50%)
        translateY(-1px);
}


.cx-auth-form
.cx-auth-password-toggle:focus-visible{
    outline:
        2px solid
        rgba(126,216,49,.60);

    outline-offset:
        2px;
}


.cx-auth-form
.cx-auth-password-toggle
i{
    width:
        15px;

    height:
        15px;

    display:
        block;

    flex:
        0 0 15px;

    background:
        currentColor;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6C21.5 13.6 17.5 19 12 19S2.5 13.6 2.3 13.3a2 2 0 0 1 0-2.6C2.5 10.4 6.5 5 12 5Zm0 2c-4.1 0-7.4 3.8-8.1 5 .7 1.2 4 5 8.1 5s7.4-3.8 8.1-5c-.7-1.2-4-5-8.1-5Zm0 2.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6C21.5 13.6 17.5 19 12 19S2.5 13.6 2.3 13.3a2 2 0 0 1 0-2.6C2.5 10.4 6.5 5 12 5Zm0 2c-4.1 0-7.4 3.8-8.1 5 .7 1.2 4 5 8.1 5s7.4-3.8 8.1-5c-.7-1.2-4-5-8.1-5Zm0 2.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


.cx-auth-form
.cx-auth-password-toggle
span::before{
    content:
        "Show";
}


.cx-auth-form
.cx-auth-password-toggle[data-visible="1"]{
    border-color:
        rgba(101,192,69,.64);

    background:
        #f3ffe9;

    color:
        #258d34;
}


.cx-auth-form
.cx-auth-password-toggle[data-visible="1"]
i{
    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.3 2 18.7 18.7-1.3 1.3-3.4-3.4A10.4 10.4 0 0 1 12 20C6.5 20 2.5 14.6 2.3 14.3a2 2 0 0 1 0-2.6 19 19 0 0 1 3.4-3.8L2 4.3 3.3 2Zm3.8 7.3A17 17 0 0 0 3.9 13c.7 1.2 4 5 8.1 5 1.4 0 2.7-.4 3.8-1L14 15.2a3.3 3.3 0 0 1-4.2-4.2L7.1 9.3ZM12 6c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6 18 18 0 0 1-2.2 2.6l-1.4-1.4c1-1 1.7-1.9 2-2.5-.7-1.2-4-5-8.1-5-.6 0-1.2.1-1.8.2L8.5 6.5A11 11 0 0 1 12 6Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m3.3 2 18.7 18.7-1.3 1.3-3.4-3.4A10.4 10.4 0 0 1 12 20C6.5 20 2.5 14.6 2.3 14.3a2 2 0 0 1 0-2.6 19 19 0 0 1 3.4-3.8L2 4.3 3.3 2Zm3.8 7.3A17 17 0 0 0 3.9 13c.7 1.2 4 5 8.1 5 1.4 0 2.7-.4 3.8-1L14 15.2a3.3 3.3 0 0 1-4.2-4.2L7.1 9.3ZM12 6c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6 18 18 0 0 1-2.2 2.6l-1.4-1.4c1-1 1.7-1.9 2-2.5-.7-1.2-4-5-8.1-5-.6 0-1.2.1-1.8.2L8.5 6.5A11 11 0 0 1 12 6Z'/%3E%3C/svg%3E")
        center / contain
        no-repeat;
}


.cx-auth-form
.cx-auth-password-toggle[data-visible="1"]
span::before{
    content:
        "Hide";
}


@media(max-width:520px){

    .cx-auth-form
    .cx-auth-password-wrap
    input[name="password"]{
        padding-right:
            80px !important;
    }


    .cx-auth-form
    .cx-auth-password-toggle{
        right:
            7px;

        min-width:
            64px;

        height:
            32px;

        padding:
            0 8px;

        font-size:
            9px;
    }

}


@media(prefers-reduced-motion:reduce){

    .cx-auth-form
    .cx-auth-password-toggle{
        transition:
            none !important;
    }

}


/* END CODSHIPX_R129_R8_R5_R1_PASSWORD_SHOW_HIDE */


/* =========================================================
   CODSHIPX_R130_R4_R1_R2_REGISTER_V2
   ========================================================= */

.cx-r132-register-page{
    min-height:100vh;
    padding:28px 20px 52px!important;

    background:
        radial-gradient(circle at 10% 6%,rgba(128,218,74,.14),transparent 28%),
        radial-gradient(circle at 91% 13%,rgba(84,155,255,.09),transparent 26%),
        linear-gradient(180deg,#fbfdfb 0%,#f5f8f6 56%,#fafcfb 100%)!important;
}


.cx-r132-register-page .r72-onboarding-shell{
    width:min(1220px,100%)!important;
    max-width:1220px!important;
    margin:0 auto!important;
    padding:0!important;
}


.cx-r132-register-page .r72-onboarding-shell>header{
    min-height:68px;
    padding:11px 15px!important;
    margin-bottom:17px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:1px solid rgba(212,222,215,.84);
    border-radius:19px;

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

    box-shadow:
        0 13px 38px rgba(32,62,45,.05);

    backdrop-filter:blur(16px);
}


.cx-r132-register-page .r72-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
}


.cx-r132-register-page .r72-brand img{
    width:41px!important;
    height:41px!important;
    border-radius:12px!important;
}


.cx-r132-register-page .r72-onboarding-progress{
    width:fit-content;
    max-width:100%;

    margin:0 auto 20px!important;
    padding:7px!important;

    display:flex;
    align-items:center;
    gap:4px;

    overflow:auto;

    border:1px solid #e0e7e2;
    border-radius:17px;

    background:rgba(255,255,255,.82);
}


.cx-r132-register-page .r72-onboarding-progress span{
    min-height:35px;

    padding:0 11px!important;

    display:inline-flex;
    align-items:center;
    gap:7px;

    border-radius:11px;

    color:#87938b;

    font-size:9px;
    font-weight:760;

    white-space:nowrap;
}


.cx-r132-register-page .r72-onboarding-progress span.active{
    background:#f0f9ec;
    color:#2b7b35;
}


.cx-r132-register-page .r72-onboarding-progress span i{
    width:21px;
    height:21px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:7px;

    background:#edf1ee;

    font-size:9px;
    font-style:normal;
    font-weight:900;
}


.cx-r132-register-page .r72-onboarding-progress span.active i{
    color:#fff;

    background:
        linear-gradient(135deg,#8cde4e,#4eb93a);
}


/* NEW ROOT */

.cx-r132-register{
    position:relative;
    isolation:isolate;

    width:min(1120px,100%);

    margin:0 auto;
    padding:34px;

    overflow:hidden;

    border:1px solid #dce5de;
    border-radius:28px;

    background:
        linear-gradient(
            155deg,
            rgba(255,255,255,.99),
            rgba(250,253,250,.98)
        );

    box-shadow:
        0 28px 72px
        rgba(28,57,40,.09);

    animation:
        cxR132In .46s
        cubic-bezier(.2,.8,.2,1)
        both;
}


.cx-r132-register::before{
    content:"";

    position:absolute;

    width:300px;
    height:300px;

    right:-145px;
    top:-170px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(139,221,73,.20),
            transparent 69%
        );

    pointer-events:none;
    z-index:-1;
}


.cx-r132-register-intro{
    max-width:820px;

    margin:0 auto 29px;

    text-align:center;
}


.cx-r132-register-kicker{
    min-height:28px;

    padding:0 11px;

    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    gap:7px;

    border:1px solid rgba(106,184,67,.22);
    border-radius:999px;

    background:#f4faef;

    color:#3b8b3a!important;

    font-size:8.5px!important;
    font-weight:900!important;
    letter-spacing:.14em;
}


.cx-r132-register-kicker::before{
    content:"";

    width:7px;
    height:7px;

    border-radius:50%;

    background:#71c947;

    box-shadow:
        0 0 0 5px
        rgba(113,201,71,.11);
}


.cx-r132-register-intro h1{
    margin:15px 0 10px!important;

    color:#17261e;

    font-size:clamp(31px,4vw,46px)!important;
    font-weight:900!important;

    letter-spacing:-.047em;
    line-height:1.04;
}


.cx-r132-register-intro>p{
    max-width:680px;

    margin:0 auto;

    color:#748079;

    font-size:12.5px;
    line-height:1.72;
}


.cx-r132-register-intro ul{
    margin:20px auto 0!important;
    padding:0!important;

    display:flex!important;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:8px;

    list-style:none!important;
}


.cx-r132-register-intro li{
    min-height:32px;

    padding:0 11px;

    display:inline-flex!important;
    align-items:center;
    gap:6px;

    border:1px solid #e2eae4;
    border-radius:10px;

    background:#fbfcfb;

    color:#65736b;

    font-size:9px;
    font-weight:730;
}


.cx-r132-register-intro li::before{
    content:"✓";

    width:17px;
    height:17px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:6px;

    background:#eef8ea;

    color:#48a33e;

    font-size:9px;
    font-weight:950;
}


/* FORM */

.cx-r132-register-form{
    width:100%;

    padding:26px;

    display:grid;

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

    gap:18px 20px;

    border:1px solid #e1e8e3;
    border-radius:22px;

    background:#fff;

    box-shadow:
        0 14px 38px
        rgba(29,61,42,.045);
}


.cx-r132-owner-kicker,
.cx-r132-register-form>h2,
.cx-r132-register-form .cx-r129-plan-field,
.cx-r132-register-form .cx-r129-qa-plan-lock,
.cx-r132-register-submit{
    grid-column:1/-1;
}


.cx-r132-owner-kicker{
    margin-bottom:-7px;

    color:#55805f!important;

    font-size:8.5px!important;
    font-weight:900!important;
    letter-spacing:.14em;
}


.cx-r132-register-form>h2{
    margin:-3px 0 2px!important;

    color:#1c2b22;

    font-size:23px!important;
    font-weight:860!important;

    letter-spacing:-.025em;
}


.cx-r132-register-form>label{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:7px;
}


.cx-r132-register-form>label>span{
    color:#53635a;

    font-size:10px;
    font-weight:820;
}


.cx-r132-register-form input[type="text"],
.cx-r132-register-form input[type="email"],
.cx-r132-register-form input[type="password"]{
    width:100%;
    min-height:47px;

    padding:0 13px;

    border:1px solid #dbe4dd!important;
    border-radius:12px!important;

    outline:none;

    background:#fff!important;

    color:#223128;

    font-family:inherit;
    font-size:12px;

    transition:
        border-color .16s ease,
        box-shadow .16s ease;
}


.cx-r132-register-form input:focus{
    border-color:#84c866!important;

    box-shadow:
        0 0 0 4px
        rgba(107,195,67,.10)!important;
}


/* PLAN CARDS */

.cx-r132-register .cx-r129-plan-field{
    margin:5px 0 2px;
    padding:18px;

    border:1px solid #e2eae4;
    border-radius:18px;

    background:#fafcfa;
}


.cx-r132-register .cx-r129-plan-grid{
    display:grid!important;

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

    gap:10px!important;
}


.cx-r132-register .cx-r129-plan-card{
    position:relative;

    min-width:0;
    min-height:248px;

    padding:15px!important;

    display:flex!important;
    flex-direction:column;

    border:1px solid #dce5df!important;
    border-radius:16px!important;

    background:#fff!important;

    cursor:pointer;

    box-shadow:
        0 7px 20px
        rgba(28,58,39,.035);

    transition:
        transform .17s ease,
        border-color .17s ease,
        box-shadow .17s ease;
}


.cx-r132-register .cx-r129-plan-card:hover{
    transform:translateY(-3px);

    border-color:
        rgba(111,196,70,.55)!important;

    box-shadow:
        0 13px 28px
        rgba(55,111,61,.09);
}


.cx-r132-register .cx-r129-plan-card.is-selected{
    border-color:#7dce55!important;

    background:
        linear-gradient(
            180deg,
            #fcfff9,
            #f6fcf3
        )!important;

    box-shadow:
        0 0 0 3px
        rgba(126,204,83,.11),
        0 13px 29px
        rgba(55,111,61,.08);
}


.cx-r132-register
.cx-r129-plan-card>input[type="radio"]{
    position:absolute;

    opacity:0;
    pointer-events:none;
}


.cx-r132-register
.cx-r129-plan-action{
    margin-top:auto;

    min-height:34px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:#f1f4f2;

    color:#66736b;

    font-size:9px;
    font-weight:850;
}


.cx-r132-register
.cx-r129-plan-card.is-selected
.cx-r129-plan-action{
    background:
        linear-gradient(
            135deg,
            #88db4d,
            #5ebd3d
        );

    color:#fff;
}


/* REGISTER PASSWORD SHOW/HIDE */

.cx-r132-register .cx-r127-password-wrap{
    position:relative!important;

    width:100%!important;
}


.cx-r132-register
.cx-r127-password-wrap input{
    padding-right:78px!important;
}


.cx-r132-register
button.cx-r127-password-toggle{
    position:absolute!important;

    top:50%!important;
    right:8px!important;
    z-index:20!important;

    min-width:58px!important;
    height:31px!important;

    margin:0!important;
    padding:0 9px!important;

    transform:
        translateY(-50%)!important;

    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;

    border:1px solid #d6e1d8!important;
    border-radius:9px!important;

    background:#fafcfa!important;

    color:#53645a!important;

    font-size:9px!important;
    font-weight:850!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
}


/* SUBMIT */

.cx-r132-register-submit{
    min-height:51px!important;

    margin-top:3px;

    border:0!important;
    border-radius:13px!important;

    background:
        linear-gradient(
            135deg,
            #8dde4d,
            #61bf3e
        )!important;

    color:#fff!important;

    font-size:11px!important;
    font-weight:900!important;

    box-shadow:
        0 12px 25px
        rgba(80,169,56,.21)!important;
}


/* =========================================================
   LOGIN PASSWORD SHOW/HIDE — HARD VISIBILITY
   ========================================================= */

.cx-v2-login-card
.cx-auth-form
.cx-auth-password-wrap{
    position:relative!important;

    width:100%!important;

    display:block!important;

    overflow:visible!important;
}


.cx-v2-login-card
.cx-auth-form
.cx-auth-password-wrap
input[name="password"]{
    width:100%!important;

    padding-right:94px!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle{
    position:absolute!important;

    top:50%!important;
    right:8px!important;

    z-index:100!important;

    min-width:73px!important;
    width:auto!important;

    height:34px!important;
    min-height:34px!important;

    margin:0!important;
    padding:0 10px!important;

    transform:
        translateY(-50%)!important;

    display:inline-flex!important;

    align-items:center!important;
    justify-content:center!important;

    gap:6px!important;

    border:1px solid #d4e0d7!important;
    border-radius:10px!important;

    background:#fff!important;

    color:#4e6257!important;

    font-family:inherit!important;
    font-size:9px!important;
    font-weight:850!important;

    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;

    cursor:pointer!important;

    appearance:none!important;
    -webkit-appearance:none!important;

    box-shadow:
        0 4px 12px
        rgba(35,67,47,.07)!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle i{
    width:15px!important;
    height:15px!important;

    display:block!important;

    flex:0 0 15px!important;

    background:currentColor!important;

    -webkit-mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6C21.5 13.6 17.5 19 12 19S2.5 13.6 2.3 13.3a2 2 0 0 1 0-2.6C2.5 10.4 6.5 5 12 5Zm0 2c-4.1 0-7.4 3.8-8.1 5 .7 1.2 4 5 8.1 5s7.4-3.8 8.1-5c-.7-1.2-4-5-8.1-5Zm0 2.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E")
        center/contain
        no-repeat!important;

    mask:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5c5.5 0 9.5 5.4 9.7 5.7a2 2 0 0 1 0 2.6C21.5 13.6 17.5 19 12 19S2.5 13.6 2.3 13.3a2 2 0 0 1 0-2.6C2.5 10.4 6.5 5 12 5Zm0 2c-4.1 0-7.4 3.8-8.1 5 .7 1.2 4 5 8.1 5s7.4-3.8 8.1-5c-.7-1.2-4-5-8.1-5Zm0 2.2a2.8 2.8 0 1 1 0 5.6 2.8 2.8 0 0 1 0-5.6Z'/%3E%3C/svg%3E")
        center/contain
        no-repeat!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle span{
    display:inline-flex!important;

    min-width:26px!important;

    opacity:1!important;
    visibility:visible!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle
span::before{
    content:"Show"!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle[data-visible="1"]
span::before{
    content:"Hide"!important;
}


.cx-v2-login-card
.cx-auth-form
button.cx-auth-password-toggle:hover{
    border-color:#8dca6d!important;

    background:#f9fff6!important;

    color:#348d38!important;
}


/* RESPONSIVE */

@media(max-width:980px){

    .cx-r132-register
    .cx-r129-plan-grid{
        grid-template-columns:
            repeat(2,minmax(0,1fr))!important;
    }
}


@media(max-width:700px){

    .cx-r132-register-page{
        padding:
            14px 10px 34px!important;
    }


    .cx-r132-register{
        padding:
            21px 14px;

        border-radius:
            20px;
    }


    .cx-r132-register-intro h1{
        font-size:
            31px!important;
    }


    .cx-r132-register-form{
        padding:
            16px;

        grid-template-columns:
            1fr;

        gap:
            15px;

        border-radius:
            17px;
    }


    .cx-r132-register-form>label,
    .cx-r132-register-form
    .cx-r129-plan-field,
    .cx-r132-register-form
    .cx-r129-qa-plan-lock,
    .cx-r132-register-submit{
        grid-column:
            1;
    }


    .cx-r132-register
    .cx-r129-plan-grid{
        grid-template-columns:
            1fr!important;
    }


    .cx-r132-register
    .cx-r129-plan-card{
        min-height:
            auto;
    }
}


@media(max-width:480px){

    .cx-v2-login-card
    .cx-auth-form
    .cx-auth-password-wrap
    input[name="password"]{
        padding-right:
            81px!important;
    }


    .cx-v2-login-card
    .cx-auth-form
    button.cx-auth-password-toggle{
        right:
            7px!important;

        min-width:
            64px!important;

        height:
            32px!important;
    }
}


@media(prefers-reduced-motion:reduce){

    .cx-r132-register,
    .cx-r132-register *{
        animation:
            none!important;

        transition:
            none!important;
    }
}


@keyframes cxR132In{

    from{
        opacity:0;

        transform:
            translateY(10px)
            scale(.995);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* END CODSHIPX_R130_R4_R1_R2_REGISTER_V2 */