/* ==========================================================
   ONYX PRICING V2.1
   PRODUCT RENDERING PASS
   ========================================================== */


/* ==========================================================
   HERO PRICE — FIX ₽ ONCE AND FOR ALL
   ========================================================== */

.hero-art,
.hero-price,
.hero-price strong{
    overflow:visible!important;
}


.hero-price strong{

    display:inline-flex!important;

    align-items:baseline!important;

    justify-content:center!important;

    width:max-content!important;

    max-width:none!important;

    margin:
        7px auto
        0!important;

    padding:
        .035em
        .15em
        .14em
        .06em!important;

    line-height:.95!important;

    letter-spacing:0!important;

    background:none!important;

    filter:
        drop-shadow(
            0 20px 60px
            rgba(177,73,224,.10)
        );

}


.hero-number{

    display:inline-block;

    padding-bottom:.025em;

    color:transparent;

    background:
        linear-gradient(
            125deg,
            #fff,
            #e4beef 37%,
            #d45ac2 68%,
            #8870ff
        );

    -webkit-background-clip:text;
    background-clip:text;

    font:inherit;

    line-height:1!important;

    letter-spacing:
        -.075em;

}


.hero-ruble{

    display:inline-block;

    flex:0 0 auto;

    margin-left:
        .17em;

    padding:
        0 .08em .04em 0;

    color:transparent;

    background:
        linear-gradient(
            145deg,
            #efd7f5,
            #ce7ed8 55%,
            #8b7bff
        );

    -webkit-background-clip:text;
    background-clip:text;

    font-size:
        .29em;

    font-style:normal;

    font-weight:650;

    line-height:1;

    letter-spacing:0;

    transform:
        translateY(-.07em);

}


/*
 * Same protection for the live calculator.
 */

.live-price{
    overflow:visible!important;
    padding-right:8px;
}

.live-price strong,
.live-price span{
    line-height:1!important;
    overflow:visible!important;
}


/* ==========================================================
   HERO ORBIT — REAL BENEFITS
   ========================================================== */

/*
 * Reuse the existing three floating elements instead
 * of adding even more visual noise.
 */

.float-chip{

    min-width:auto!important;

    padding:
        9px 12px!important;

    border:
        0!important;

    border-radius:
        0!important;

    color:
        rgba(188,177,197,.55)!important;

    background:
        transparent!important;

    backdrop-filter:none!important;

    box-shadow:none!important;

    letter-spacing:
        .13em!important;

    white-space:nowrap;

}


.float-chip:before{

    content:"";

    display:inline-block;

    width:5px;
    height:5px;

    margin-right:8px;

    border-radius:50%;

    vertical-align:1px;

    background:#d761ce;

    box-shadow:
        0 0 13px
        rgba(215,97,206,.75);

}


.float-chip b{

    display:inline!important;

    margin:0!important;

    color:
        rgba(243,234,246,.85)!important;

    font-size:
        9px!important;

    font-weight:700!important;

    letter-spacing:0!important;

}


/*
 * Position benefits directly around the orbit.
 */

.fc1{

    left:50%!important;

    top:12%!important;

    transform:
        translateX(-50%)!important;

}


.fc2{

    left:2%!important;

    right:auto!important;

    top:54%!important;

}


.fc3{

    left:auto!important;

    right:-1%!important;

    bottom:18%!important;

}


/*
 * Fine orbit marker.
 */

.hero-orbit:after{

    box-shadow:
        0 -122px 0 -2px
            rgba(221,93,211,.55),

        105px 55px 0 -2px
            rgba(115,128,255,.38),

        -105px 55px 0 -2px
            rgba(199,104,255,.34);

}


/* ==========================================================
   CONFIGURATION STAGE
   ========================================================== */

.stage{

    /*
     * Devices will fit INSIDE this area rather than
     * relying on hidden overflow.
     */

    overflow:hidden!important;

}


.stage canvas{

    filter:
        contrast(104%)
        saturate(108%);

}


/*
 * Additional soft product lighting.
 */

.stage:before{

    width:610px!important;
    height:610px!important;

    background:

        radial-gradient(
            circle,
            rgba(193,68,221,.135),
            rgba(116,69,226,.048) 33%,
            transparent 67%
        )!important;

}


.stage:after{

    opacity:.52!important;

}


/* ==========================================================
   PRODUCT QUALITY LABEL
   ========================================================== */

.pricing-v21-quality{

    position:absolute;

    z-index:11;

    left:27px;
    top:49px;

    display:flex;

    align-items:center;

    gap:7px;

    pointer-events:none;

    color:
        rgba(170,159,178,.30);

    font-size:5px;
    font-weight:800;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.pricing-v21-quality i{

    width:4px;
    height:4px;

    border-radius:50%;

    background:#73deb6;

    box-shadow:
        0 0 9px
        rgba(115,222,182,.75);

}


/* ==========================================================
   MATERIALIZATION NOW HAS ROOM TO BREATHE
   ========================================================== */

.pricing-v2-flash{

    background:

        radial-gradient(
            ellipse at 54% 52%,
            rgba(255,255,255,.07),
            rgba(224,73,220,.034) 16%,
            rgba(113,87,255,.018) 36%,
            transparent 68%
        )!important;

}


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

@media(max-width:650px){

    .hero-price strong{

        padding:
            .03em
            .12em
            .12em
            .05em!important;

    }


    .hero-ruble{

        font-size:
            .31em;

        margin-left:
            .13em;

    }


    /*
     * There is not enough useful space on a small phone
     * for three separate radial text labels.
     * Keep them readable below the orbit instead.
     */

    .float-chip{

        font-size:
            5.5px!important;

    }


    .float-chip b{

        font-size:
            7px!important;

    }


    .fc1{

        top:10%!important;

    }


    .fc2{

        left:-2%!important;

        top:58%!important;

    }


    .fc3{

        right:-3%!important;

        bottom:14%!important;

    }


    .pricing-v21-quality{

        display:none;

    }

}



/* V22_ORBIT_DEVICE_FIX */

/* ----------------------------------------------------------
   HERO ORBIT NORMALIZATION
   ---------------------------------------------------------- */

.hero-orbit{
    position:relative;
    overflow:visible!important;
}

.hero-orbit:before{
    border-radius:50%!important;
    transform:none!important;
}

.hero-orbit:after{
    box-shadow:
        0 -122px 0 -2px rgba(221,93,211,.55),
        105px 55px 0 -2px rgba(115,128,255,.38),
        -105px 55px 0 -2px rgba(199,104,255,.34)!important;
}

.float-chip{
    transform:none!important;
    border-radius:999px!important;
    padding:10px 14px!important;
    background:rgba(10,8,16,.40)!important;
    backdrop-filter:blur(10px)!important;
    border:1px solid rgba(255,255,255,.06)!important;
    box-shadow:
        0 10px 30px rgba(0,0,0,.18),
        inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.fc1{
    left:50%!important;
    top:5%!important;
    transform:translateX(-50%)!important;
}

.fc2{
    left:-2%!important;
    top:52%!important;
}

.fc3{
    right:-2%!important;
    left:auto!important;
    bottom:14%!important;
}

/* ----------------------------------------------------------
   CONFIGURATION STAGE SAFETY
   ---------------------------------------------------------- */

.stage{
    overflow:hidden!important;
}

@media(max-width:650px){

    .fc1{
        top:3%!important;
    }

    .fc2{
        left:0!important;
        top:58%!important;
    }

    .fc3{
        right:0!important;
        bottom:10%!important;
    }

}