/* =========================================================
   CODSHIPX R118-R8-R8
   EXACT REFERENCE PREMIUM CARDS
   FRESH VISUAL LAYER
   ========================================================= */

.r7-addons-page .cx-addon-whatsapp{
    display:none !important;
}

.r7-addons-page .cx-addon-grid{
    width:min(100%,1080px) !important;
    margin:18px auto 30px !important;

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

    align-items:stretch !important;
}

/* =========================================================
   CARD SHELL
   ========================================================= */

.r7-addons-page .cx-addon-grid > .cx-addon-card{
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;

    box-sizing:border-box !important;

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

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

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

    padding:30px 28px 25px !important;

    border-radius:28px !important;

    color:#fff !important;

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

.r7-addons-page .cx-addon-grid > .cx-addon-card:hover{
    transform:translateY(-4px) !important;
}

/* Codi */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1){
    background:
        radial-gradient(
            circle at 87% 6%,
            rgba(77,170,57,.34) 0,
            rgba(77,170,57,.13) 22%,
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #05080b 0%,
            #05090b 58%,
            #0a1710 100%
        ) !important;

    border:1px solid rgba(155,239,93,.70) !important;

    box-shadow:
        0 24px 50px rgba(8,22,13,.24),
        0 0 0 2px rgba(151,237,82,.14),
        0 0 24px rgba(133,234,75,.16) !important;
}

/* Voice */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2){
    background:
        radial-gradient(
            circle at 88% 3%,
            rgba(26,106,255,.75) 0,
            rgba(26,106,255,.24) 32%,
            transparent 53%
        ),
        linear-gradient(
            145deg,
            #062b84 0%,
            #0847be 53%,
            #07389d 100%
        ) !important;

    border:1px solid rgba(95,188,255,.90) !important;

    box-shadow:
        0 24px 50px rgba(0,52,155,.26),
        0 0 0 2px rgba(57,164,255,.18),
        0 0 26px rgba(36,145,255,.20) !important;
}

/* decorative corner shape */

.r7-addons-page
.cx-addon-grid > .cx-addon-card::before{
    content:"" !important;

    position:absolute !important;

    width:330px !important;
    height:230px !important;

    top:-125px !important;
    right:-100px !important;

    border-radius:50% !important;

    transform:rotate(-12deg) !important;

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

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

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

/* =========================================================
   REMOVE OLD GREY PAID BADGE
   ========================================================= */

.r7-addons-page
.cx-addon-card .section-kicker{
    display:none !important;
}

/* =========================================================
   REFERENCE TOP BADGE
   ========================================================= */

.r7-addons-page
.cx-addon-grid > .cx-addon-card::after{
    position:absolute !important;

    top:34px !important;
    right:27px !important;

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

    padding:10px 18px !important;

    border-radius:999px !important;

    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.07em !important;

    color:#fff !important;

    z-index:5 !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)::after{
    content:"✦  AI ADD-ON" !important;

    background:
        linear-gradient(
            180deg,
            rgba(47,105,31,.95),
            rgba(21,52,21,.95)
        ) !important;

    border:1px solid rgba(173,255,104,.90) !important;

    box-shadow:
        0 0 18px rgba(138,243,73,.28),
        inset 0 0 12px rgba(168,255,110,.10) !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)::after{
    content:"≋  VOICE ADD-ON" !important;

    background:
        linear-gradient(
            180deg,
            #145dd4,
            #083aa6
        ) !important;

    border:1px solid rgba(145,214,255,.95) !important;

    box-shadow:
        0 0 18px rgba(71,177,255,.32),
        inset 0 0 10px rgba(255,255,255,.10) !important;
}

/* =========================================================
   TOP PRODUCT ICON
   ========================================================= */

.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;

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

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

    box-shadow:
        inset 0 0 18px rgba(255,255,255,.025) !important;
}

/* branded Codi */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.commerce-icon{
    border-color:rgba(152,242,91,.48) !important;

    background:
        linear-gradient(
            145deg,
            rgba(41,82,37,.50),
            rgba(10,17,15,.85)
        ) !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.commerce-icon > *{
    opacity:0 !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.commerce-icon::before{
    content:"" !important;

    width:54px !important;
    height:54px !important;

    border-radius:15px !important;

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

    box-shadow:
        0 0 14px rgba(133,235,73,.14) !important;
}

/* proper Voice microphone icon */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.commerce-icon{
    position:relative !important;

    background:
        linear-gradient(
            145deg,
            #1766dc,
            #0a44bd
        ) !important;

    border-color:rgba(130,211,255,.72) !important;

    box-shadow:
        0 0 18px rgba(73,180,255,.22) !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.commerce-icon > *{
    display:none !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.commerce-icon::before{
    content:"" !important;

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

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

    box-sizing:border-box !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.commerce-icon::after{
    content:"" !important;

    position:absolute !important;

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

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

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

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

/* =========================================================
   NAME + DESCRIPTION
   ========================================================= */

.r7-addons-page .cx-addon-card h2{
    margin:20px 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:49px !important;

    margin:0 !important;

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

    font-size:15px !important;
    line-height:1.42 !important;

    font-weight:500 !important;
}

/* =========================================================
   FEATURE GRID
   ========================================================= */

.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{
    position:relative !important;

    min-width:0 !important;
    min-height:84px !important;

    display:grid !important;

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

    grid-template-rows:
        auto auto !important;

    column-gap:11px !important;

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

    padding:12px 13px !important;

    border-radius:16px !important;

    color:#fff !important;

    font-size:12px !important;
    line-height:1.16 !important;
    font-weight:850 !important;

    white-space:normal !important;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.040)
        ) !important;
}

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

    width:42px !important;
    height:42px !important;

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

    border-radius:13px !important;

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

    color:#fff !important;
}

/* Codi tile icons */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.cx-addon-feature-list > span i{
    background:
        linear-gradient(
            145deg,
            #234d27,
            #123218
        ) !important;

    border:1px solid rgba(133,239,79,.24) !important;
}

/* Voice tile icons */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.cx-addon-feature-list > span i{
    background:
        linear-gradient(
            145deg,
            #1a69d8,
            #1151bd
        ) !important;

    border:1px solid rgba(132,211,255,.28) !important;
}

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

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.cx-addon-feature-list > span:nth-child(1) i::before{
    content:"✦" !important;
}

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

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

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

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

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

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

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

/* feature subtitle */

.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:10px !important;
    line-height:1.16 !important;

    font-weight:500 !important;
}

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

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

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

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

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

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

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

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

/* =========================================================
   PRICE BLOCK
   ========================================================= */

.r7-addons-page .v1b4-addon-price{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;

    flex-direction:column !important;

    width:100% !important;
    box-sizing:border-box !important;

    min-height:92px !important;

    margin:22px 0 0 !important;
    padding:17px 20px 14px !important;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.045)
        ) !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-bottom:0 !important;
}

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

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

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

    white-space:nowrap !important;
}

.r7-addons-page .v1b4-addon-price small{
    display:block !important;

    margin-top:9px !important;

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

    font-size:12px !important;
    line-height:1.2 !important;
}

/* =========================================================
   STATUS BLOCK
   ========================================================= */

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

    width:100% !important;
    box-sizing:border-box !important;

    min-height:91px !important;

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

    margin:0 0 18px !important;
    padding:16px 80px 16px 64px !important;

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

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.035)
        ) !important;

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

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

    font-size:16px !important;
    line-height:1 !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:10.5px !important;
    line-height:1.15 !important;
}

/* large glowing state dot */

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

    position:absolute !important;

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

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

    transform:translateY(-50%) !important;

    border-radius:50% !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.v1b1-addon-status > span::before{
    background:#b7ff59 !important;

    box-shadow:
        0 0 0 9px rgba(158,238,81,.11),
        0 0 18px rgba(173,255,91,.60) !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.v1b1-addon-status > span::before{
    background:#7bdcff !important;

    box-shadow:
        0 0 0 9px rgba(86,190,255,.12),
        0 0 18px rgba(86,190,255,.65) !important;
}

/* included pill - Codi active only */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.v1b1-addon-status:has(> span.active)::after{
    content:"Included" !important;

    position:absolute !important;

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

    transform:translateY(-50%) !important;

    padding:9px 17px !important;

    border-radius:999px !important;

    background:
        linear-gradient(
            180deg,
            #d4ff9d,
            #b9f56f
        ) !important;

    color:#123914 !important;

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

    font-weight:900 !important;

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

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

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

    min-height:62px !important;

    margin-top:auto !important;

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

    border-radius:17px !important;

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

    font-weight:950 !important;
}

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

    font-size:21px !important;
    font-weight:900 !important;

    line-height:1 !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.button.primary{
    background:
        linear-gradient(
            180deg,
            #c4ff62 0%,
            #96ea17 100%
        ) !important;

    color:#041006 !important;

    border:1px solid #d9ff9b !important;

    box-shadow:
        0 0 22px rgba(157,236,37,.28) !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.button.primary{
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #eef7ff 100%
        ) !important;

    color:#0642ac !important;

    border:1px solid #fff !important;

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

/* purchase/unavailable variants */

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.button.soft,
.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(1)
.button:disabled{
    background:#18261a !important;
    color:rgba(255,255,255,.76) !important;
    border:1px solid rgba(156,237,90,.28) !important;
    opacity:1 !important;
}

.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.button.soft,
.r7-addons-page
.cx-addon-grid > .cx-addon-card:nth-child(2)
.button:disabled{
    background:#1650b8 !important;
    color:rgba(255,255,255,.82) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    opacity:1 !important;
}

.r7-addons-page .v1b4-addon-sub{
    margin-top:10px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:1100px){

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

    .r7-addons-page .cx-addon-grid > .cx-addon-card{
        padding:24px !important;
    }

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

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

@media(max-width:760px){

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

        grid-template-columns:1fr !important;

        gap:18px !important;
    }

    .r7-addons-page
    .cx-addon-grid > .cx-addon-card{
        min-height:0 !important;
        height:auto !important;
    }
}

@media(max-width:520px){

    .r7-addons-page
    .cx-addon-grid > .cx-addon-card{
        padding:21px !important;

        border-radius:24px !important;
    }

    .r7-addons-page
    .cx-addon-grid > .cx-addon-card::after{
        top:23px !important;
        right:20px !important;

        padding:8px 12px !important;

        font-size:9px !important;
    }

    .r7-addons-page .commerce-icon{
        width:60px !important;
        height:60px !important;
        min-width:60px !important;
    }

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

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

/* no DOM observer / no JS visual override */