/* ==========================================================
   ONYX PRICING V2.3
   CLEAN ORBIT + PRODUCT STAGE
   ========================================================== */


/* ==========================================================
   DESTROY THE OLD "PROPELLER"
   ========================================================== */

.hero-orbit{

    position:absolute!important;

    width:min(42vw,560px)!important;

    aspect-ratio:1!important;

    border:
        1px solid
        rgba(205,111,255,.12)!important;

    border-radius:50%!important;

    transform:
        rotate(-11deg)!important;

    background:
        radial-gradient(
            circle,
            rgba(159,68,218,.035),
            transparent 55%
        )!important;

    box-shadow:
        inset 0 0 90px
            rgba(130,62,215,.018),
        0 0 80px
            rgba(123,57,217,.025)!important;

}


/*
 * One clean inner orbit.
 */

.hero-orbit:before{

    content:""!important;

    position:absolute!important;

    inset:18%!important;

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

    top:18%!important;
    left:18%!important;

    border:
        1px solid
        rgba(120,137,255,.075)!important;

    border-radius:50%!important;

    background:none!important;

    box-shadow:none!important;

    transform:none!important;

}


/*
 * THREE SMALL NAVIGATION NODES.
 * No cloned giant circles anymore.
 */

.hero-orbit:after{

    content:""!important;

    position:absolute!important;

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

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

    inset:auto!important;

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

    border:0!important;

    border-radius:50%!important;

    background:#e76bcf!important;

    box-shadow:

        0 -235px 0 0
            rgba(231,107,207,.90),

        202px 116px 0 0
            rgba(111,131,255,.76),

        -202px 116px 0 0
            rgba(192,100,255,.72),

        0 -235px 18px 3px
            rgba(231,107,207,.14),

        202px 116px 18px 3px
            rgba(111,131,255,.10),

        -202px 116px 18px 3px
            rgba(192,100,255,.10)!important;

}


/* ==========================================================
   BENEFIT NODES
   ========================================================== */

.float-chip{

    z-index:8!important;

    min-width:0!important;

    padding:
        9px 13px!important;

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

    border-radius:
        999px!important;

    color:
        rgba(235,225,240,.82)!important;

    background:
        rgba(10,7,15,.58)!important;

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

    box-shadow:
        0 12px 34px
            rgba(0,0,0,.25),
        inset 0 1px 0
            rgba(255,255,255,.045)!important;

    font-size:
        7px!important;

    font-weight:
        750!important;

    letter-spacing:
        .025em!important;

    text-transform:none!important;

    white-space:nowrap;

    animation:
        pricingV23Float
        5s ease-in-out
        infinite alternate!important;

}


.float-chip:before{

    content:"";

    display:inline-block;

    width:5px;
    height:5px;

    margin-right:7px;

    border-radius:50%;

    vertical-align:1px;

    background:#db67ce;

    box-shadow:
        0 0 11px
        rgba(219,103,206,.75);

}


.float-chip b{

    display:inline!important;

    margin:0!important;

    color:inherit!important;

    font-size:inherit!important;

    font-weight:inherit!important;

}


.fc1{

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

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

    transform:
        translateX(-50%)!important;

}


.fc2{

    left:-2%!important;
    right:auto!important;

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

}


.fc3{

    left:auto!important;
    right:-3%!important;

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

}


@keyframes pricingV23Float{

    to{
        margin-top:-6px;
    }

}


/* ==========================================================
   PRODUCT STAGE — LET DETAILS BE VISIBLE
   ========================================================== */

.stage{

    background:

        radial-gradient(
            ellipse at 51% 54%,
            rgba(184,63,222,.085),
            transparent 38%
        ),

        radial-gradient(
            circle at 68% 40%,
            rgba(76,99,244,.035),
            transparent 34%
        )!important;

}


.stage canvas{

    filter:
        brightness(1.17)
        contrast(1.06)
        saturate(1.13)!important;

}


.stage:after{

    width:78%!important;

    opacity:.65!important;

}


/*
 * The old V21 label is no longer useful.
 */

.pricing-v21-quality{

    display:none!important;

}


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

@media(max-width:650px){

    .hero-orbit{

        width:min(82vw,410px)!important;

    }


    .hero-orbit:after{

        box-shadow:

            0 -170px 0 0
                rgba(231,107,207,.90),

            147px 84px 0 0
                rgba(111,131,255,.76),

            -147px 84px 0 0
                rgba(192,100,255,.72)!important;

    }


    .float-chip{

        font-size:
            6px!important;

        padding:
            7px 9px!important;

    }


    .fc1{

        top:4%!important;

    }


    .fc2{

        left:-1%!important;

        top:59%!important;

    }


    .fc3{

        right:-1%!important;

        bottom:13%!important;

    }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

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

    .float-chip{

        animation:none!important;

    }

}