/* @font-face {
    font-style: normal;
    font-weight: 400;
    font-family: "Graphik LCG";
    font-display: swap;
    src: url("../fonts/GraphikLCG-Regular.woff2") format("woff2");
}
@font-face {
    font-style: normal;
    font-weight: 500;
    font-family: "Graphik LCG";
    font-display: swap;
    src: url("../fonts/GraphikLCG-Medium.woff2") format("woff2");
}
@font-face {
    font-style: normal;
    font-weight: 600;
    font-family: "Graphik LCG";
    font-display: swap;
    src: url("../fonts/GraphikLCG-Semibold.woff2") format("woff2");
} */

@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: "MTS Wide";
    font-display: swap;
    src: url("../fonts/MTS-Wide-Regular.woff2") format("woff2"), url("../fonts/MTS-Wide-Regular.woff") format("woff");
}
@font-face {
    font-style: normal;
    font-weight: 500;
    font-family: "MTS Wide";
    font-display: swap;
    src: url("../fonts/MTS-Wide-Medium.woff2") format("woff2"), url("../fonts/MTS-Wide-Medium.woff") format("woff");
}
@font-face {
    font-style: normal;
    font-weight: 400;
    font-family: "MTS Compact";
    font-display: swap;
    src: url("../fonts/MTSCompact-Regular.woff2") format("woff2"), url("../fonts/MTSCompact-Regular.woff") format("woff");
}
@font-face {
    font-style: normal;
    font-weight: 500;
    font-family: "MTS Compact";
    font-display: swap;
    src: url("../fonts/MTSCompact-Medium.woff2") format("woff2"), url("../fonts/MTSCompact-Medium.woff") format("woff");
}

:root {
    --ff-mts-wide: "MTS Wide", "Arial", sans-serif;
    --ff-mts-compact: "MTS Compact", "Arial", sans-serif;
}
body {
    font-family: var(--ff-mts-wide);
}

:is(p, span) {
    font-family: var(--ff-mts-compact) !important;
}

.page .btn {
    background-color: #20A9E8;
    border-color: #20A9E8;
    color: #fff !important;
}

.page .btn:hover {
    background-color: #20A9E8 !important;
    border-color: #20A9E8 !important;
}

.page.--index-new.--pik-offer {
    --progress-brand: #20A9E8;
    --brand: var(--pik-brand);
    --brand-h: var(--brand);
}

.title-h1 {
    font-size: 48px;
    line-height: 1.15;
}
.title-h2 {
    font-weight: 500 !important;
    font-family: var(--ff-mts-wide) !important;
    font-size: 38px !important;
    text-transform: none !important;
    line-height: 44px;
}
.title-h3 {
    font-weight: 700;
    font-size: 22px;
}

.field-checkbox__text {
    font-size: 15px;
}

.feature-item__text {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
}

.intro-starter__inner {
    min-height: 565px;
    padding-top: 115px;
}
.intro-starter__logo {
    top: 30px;
    right: auto;
    left: 0;
    width: 149px;
    aspect-ratio: 2;
}
.intro-starter__text-wrap {
    max-width: fit-content
}
.intro-starter__promo {
    display: flex;
    align-items: center;
    margin-top: 10px;
    font-size: 18px;
    line-height: 1;
    background-color: #E5E5E7;
    width: fit-content;
    border-radius: 22px;
}
.intro-starter__promo-text {
    margin-top: -0.15em;
    padding: 12px 17.5px 9.5px;
    color: var(--commonTextColor);
}
.intro-starter__promo-label {
    padding: 12px 17.5px 9.5px;
    font-weight: 500;
    font-size: 1em;
    line-height: 1;
    color: var(--commonTextColor);
    text-align: center;
    text-transform: uppercase;
    background-color: #fff;
    border-radius: 22px;
}
.intro-starter__btn-wrap {
    margin-top: 16px;
    width: 100%;
}
.intro-starter__btn-wrap .btn {
    min-width: 12.1em;
    color: #20A9E8;
    width: 100%;
}

.starter-features .feature-item__text {
    margin-top: 8px;
}
.starter-features__inner {
    padding-top: calc(var(--gap-y) * 0.5 - 4px);
    padding-bottom: 94px;
}

.starter-info__inner {
    padding-bottom: 96px;
}
.starter-info__title {
    margin-bottom: 4px !important;
    text-align: center;
}

.banner-info.--2 {
    gap: 20px;
    padding-left: 40px;
}
.banner-info.--3 {
    align-items: flex-start;
    padding-bottom: 20px;
    overflow: hidden;
}
.banner-info.--3 .banner-info__text-wrap {
    margin-left: -7%;
    padding-top: 12px;
}
.banner-info.--3 .banner-info__img {
    position: relative;
    left: -36px;
    bottom: -28px;
}
.banner-info__text {
    font-size: 15px;
    line-height: 1.3;
    font-weight: 400;
}
.banner-info__note {
    margin: 16px 0 0;
    font-size: 12px;
}

.popupSuccess__heading {
    color: var(--brand);
}
.popupSuccess__heading::after {
    background-color: currentColor;
}

.banner-starter {
    min-height: 276px;
    padding-right: max(25px, 5.8%);
}
.banner-starter__text {
    font-size: 15px;
    line-height: 1.3;
}

.starter-security__inner {
    padding-bottom: 74px;
}

.card-starter__text {
    font-size: 16px;
    line-height: 1.3;
}

.starter-kit-order {
    background-color: #f2f3f7;
}
.starter-kit-order__inner {
    display: block;
    padding-top: 28px;
    padding-bottom: 110px;
}
.starter-kit-order__title {
    margin-bottom: 20px !important;
    text-align: center;
}
.starter-kit-order__promo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.55em;
    margin: 20px auto 0;
}
.starter-kit-order__promo-text {
    margin: 0;
}
.starter-kit-order__promo-label {
    margin: 0;
    padding: 6px 1.3em 6px;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    background-color: var(--commontextcolor);
    border-radius: 22px;
}
.starter-kit-order__list {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}
.starter-kit-order__list .card-starter-kit {
    width: 467px;
}

.card-starter-kit {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.card-starter-kit.--1 .card-starter-kit__img {
    position: absolute;
    bottom: 10.2%;
    left: 0;
}
.card-starter-kit.--2 .card-starter-kit__img {
    position: absolute;
    bottom: 13.2%;
    left: 0;
    width: 450px;
}
.card-starter-kit.--3 .card-starter-kit__img {
    position: absolute;
    bottom: 13.2%;
    left: 0;
    width: 450px;
}
.card-starter-kit__img-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 366px;
    overflow: hidden;
    background-color: #ccddeb;
    border-radius: 36px;
}
.card-starter-kit__img {
    max-width: 100%;
    height: auto;
}
.card-starter-kit__body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 40px 56px;
    background-color: #fff;
    border-radius: 36px;
}
.card-starter-kit__text-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 30px;
}
.card-starter-kit__title {
    margin: 0;
}
.card-starter-kit__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding-left: 24px;
    font-size: 16px;
    line-height: 1.3;
}
.card-starter-kit__list * {
    font: inherit;
}
.card-starter-kit__addon-wrap {
    padding-top: 7px;
}
.card-starter-kit__addon-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}
.card-starter-kit__bottom {
    margin-top: auto;
}
.card-starter-kit__price-wrap-old{
    display: flex;
    gap: 5px;
}
.card-starter-kit__price-wrap {

}
.card-starter-kit__price {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: #20A9E8;
}
.card-starter-kit__fee {
    display: flex;
    flex-direction: column;
    margin: 0;
}
.card-starter-kit__fee-text {
    line-height: 1.3;
}
.card-starter-kit__fee-value{
    margin: 2px 0;
    align-items: baseline;
}

.card-starter-kit__fee-value span{
    font-weight: 500;
    font-size: 20px;
    line-height: 1.1;
    color: #20A9E8;
}

.card-starter-kit__fee-value{
    display: flex;
    gap: 5px;
}
.card-starter-kit__fee-value{
    color: #000;
    font-weight: 400;
    font-size: 16px;
}
.card-starter-kit__btn-wrap {
    margin-top: 22px;
}
.card-starter-kit__btn-wrap .card-starter-kit__btn{
    width: 100%;
    text-transform: capitalize;
    font-size: 18px;
}
.page.--pik-offer .card-starter-kit__btn {
    display: block;
    width: 91%;
    padding: 15px 12px;
    font-size: 18px;
    text-transform: none;
    background-color: #20A9E8;
}

.starter-detection__inner {
    padding-top: 95px;
}
.starter-detection__title {
    margin-bottom: 68px !important;
}

.detection-item__text {
    font-size: 15px;
    line-height: 1.3;
}
.detection-item__price {
    margin: 12px 0 0;
    font-family: var(--ff-mts-compact);
}
.detection-item__price span {
    font-weight: 500;
    color: #20A9E8;
}

.starter-comfort__title {
    margin-bottom: 70px !important;
}
.starter-comfort__list {
    margin-bottom: 54px;
}

.card-about__text {
    font-size: 15px;
    line-height: 1.3;
}

.additional-callback .form-starter-order__inner {
    align-items: flex-start;
}
.additional-callback .form-starter__additional-text {
    margin: 28px 0 0;
    font-size: 15px;
    line-height: 1.3;
}

.reviews__inner {
    padding-top: 104px;
    padding-bottom: 52px;
}
.reviews__title {
    text-align: center;
}

.review__text {
    font-size: 15px;
}

.faq__inner {
    padding-bottom: 110px;
}
.faq__title {
    margin-bottom: 46px !important;
}
.faq__accordionHeader {
    padding-top: 20px;
    padding-bottom: 20px;
}

@media screen and (max-width: 1439px) {
    .title-h2 {
        font-size: 32px !important;
    }
    .intro-starter__inner {
        min-height: 500px;
    }
}

@media screen and (max-width: 1279px) {
    .title-h1 {
        font-size: 38px;
    }
    .title-h2 {
        font-size: 30px !important;
    }
    .intro-starter__inner {
        min-height: 450px;
    }
    .starter-features__inner {
        grid-template-columns: 270px 270px;
    }
    .starter-security__list {
        grid-template-columns: repeat(auto-fit, 290px);
    }
    .card-starter {
        min-height: 300px;
        padding: 30px 24px;
    }
}

@media screen and (max-width: 1120px) {
    .starter-kit-order__list {
        flex-wrap: wrap;
    }
    .card-starter-kit:is(.--1, .--2, .--3) .card-starter-kit__img {
        width: 500px;
    }
}

@media screen and (max-width: 768px) {
    .title-h1 {
        font-size: 34px;
        line-height: 1.15;
    }
    .title-h2 {
        font-size: 28px !important;
    }
    .intro-starter__inner {
        min-height: 400px;
    }
    .intro-starter__logo {
        display: block;
    }
    .intro-starter__promo {
        font-size: 16px;
    }
    .starter-info__banner-wrap {
        grid-template-columns: 1fr;
        gap: 16px;
        grid-auto-flow: row;
    }
    .banner-info,
    .banner-info.--big {
        align-items: center;
        min-height: 310px;
    }
    .banner-info.--big .banner-info__img-wrap {
        max-width: 440px;
    }
    .banner-info.--2 {
        order: 2;
    }
    .banner-info.--3 {
        order: 1;
        background-color: #ccddeb;
    }
    .banner-info.--3 .banner-info__img-wrap {
        order: 1;
    }
    .banner-info.--3 .banner-info__img {
        bottom: -20px;
        left: -24px;
    }
    .banner-info.--4 {
        order: 3;
    }
    .banner-info.--3 .banner-info__text-wrap {
        margin-left: 0;
    }
    .banner-starter__img {
        object-position: 0 18%;
    }
    .starter-security__list {
        grid-template-columns: 1fr;
    }
    .card-starter {
        min-height: 230px;
    }
    .card-starter__img-wrap {
        margin-bottom: 24px;
    }
    .card-starter-kit.--1 .card-starter-kit__img {
        left: 0;
    }
    .card-starter-kit__img-wrap {
        height: 323px;
    }
    .card-starter-kit__body {
        padding: 24px;
    }
    .page.--pik-offer .card-starter-kit__btn {
        width: 100%;
    }
    .starter-comfort__list {
        gap: 46px;
    }
    .card-about__img-wrap {
        width: 430px;
        margin-right: auto;
        margin-left: auto;
    }
    .reviews .container {
        max-width: min(1172px, 100vw - 50px);
    }
    .slider-reviews .slider__btn {
        position: static;
    }
    .slider-reviews .slider__controls {
        margin-top: 58px;
    }
    .faq {
        padding-right: var(--x-offset);
        padding-left: var(--x-offset);
    }
}

@media screen and (max-width: 767px) {
    :root {
        --x-offset: 22px;
    }

    .title-h1 {
        font-size: 28px;
    }
    .title-h2 {
        font-size: 30px !important;
        line-height: 1.133 !important;
    }

    .container {
        max-width: none;
    }

    .feature-item {
        flex-direction: column;
        align-items: center;
    }
    .feature-item__text {
        padding-left: 0;
    }

    .intro-starter {
        --x-offset: 16px;
    }
    .intro-starter__inner {
        min-height: 460px;
        padding-top: 77px;
        padding-bottom: 30px;
        display: flex;
        justify-content: end;
    }
    .intro-starter__promo-label {
        padding:  12px 13.5px 9.5px;
    }
    .intro-starter__text-wrap{
        flex-grow: 0;
    }
    .intro-starter__logo {
        top: 0;
        aspect-ratio: 2;
    }
    .intro-starter__promo {
        margin-top: auto;
        font-size: 18px;
    }
    .starter-features .feature-item__img-wrap {
        width: 100px;
        height: auto;
    }
    .starter-features .feature-item__title {
        flex: 0 0 auto;
        font-size: 17px;
        line-height: 1.17;
        text-align: center;
    }
    .starter-features .feature-item__text {
        flex: auto;
        text-align: center;
    }
    .starter-features__inner {
        grid-template-columns: 152px 152px;
        gap: 22px 14px;
        padding-top: 26px;
        padding-bottom: 60px;
    }
    .starter-info__inner {
        padding-top: 0;
        padding-bottom: 0;
    }
    .starter-info__banner-wrap {
        gap: 20px;
        margin-bottom: 34px;
        padding-top: 18px;
    }
    .banner-info {
        padding: 15px 28px;
    }
    .banner-info.--1 {
        gap: 32px;
    }
    .banner-info.--1 .banner-info__img-wrap {
        margin-right: -20px;
        margin-left: -20px;
    }
    .banner-info.--2 {
        gap: 28px;
        padding: 30px 29px 45px;
    }
    .banner-info.--3 {
        gap: 24px;
        padding-top: 34px;
        padding-right: 24px;
        padding-left: 36px;
        overflow: visible;
    }
    .banner-info.--3 .banner-info__img-wrap {
        position: relative;
        width: 100%;
        height: 243px;
    }
    .banner-info.--3 .banner-info__img {
        position: absolute;
        left: -42px;
        width: 328px;
    }
    .banner-info.--3 .banner-info__text-wrap {
        padding-top: 0;
    }
    .banner-info.--4 {
        gap: 52px;
        padding-top: 17px;
        padding-right: 30px;
        padding-bottom: 52px;
    }
    .banner-info.--4 .banner-info__img-wrap {
        margin-left: -48px;
        margin-right: -14px;
    }
    .starter-info .form-starter-order {
        position: relative;
        left: 50%;
        width: 100vw;
        border-radius: 0;
        transform: translateX(-50%);
    }
    .intro-starter__btn-wrap .btn {
        background-color: #20A9E8;
    }
    .form-starter-order .form__title {
        line-height: 1.133;
    }
    .starter-info .form-starter-order .form__btn-wrap {
        margin-top: 10px;
    }
    .starter-info .form-starter-order__inner {
        gap: 50px;
        padding-top: 65px;
        padding-bottom: 54px;
    }
    .starter-info .form-starter-order__text-wrap {
        text-align: center;
    }
    .starter-security {
        background-color: transparent;
    }
    .starter-security__inner {
        padding-top: 44px;
    }
    .banner-starter {
        min-height: 433px;
        padding: 28px 26px 28px 32px;
    }
    .starter-security__list {
        gap: 47px;
        margin-top: 65px;
    }
    .card-starter {
        align-items: center;
        min-height: auto;
        padding: 0;
        text-align: center;
    }
    .card-starter:is(:nth-child(2), :nth-child(3)) .card-starter__text {
        max-width: 229px;
    }
    .card-starter__img-wrap {
        width: 57px;
        height: 57px;
    }
    .starter-kit-order {
        background-color: transparent;
    }
    .starter-kit-order__inner {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    .starter-kit-order__promo-text,
    .starter-kit-order__promo-label {
        font-size: 17px;
    }
    .starter-kit-order__promo-label {
        padding-right: 1.6em;
        padding-left: 1.6em;
    }
    .starter-kit-order__list {
        flex-direction: column;
        gap: 32px;
        margin-top: 32px;
    }
    .starter-kit-order__list .card-starter-kit {
        width: 100%;
    }
    .card-starter-kit {
        gap: 27px;
    }
    .card-starter-kit:is(.--1, .--2, .--3) .card-starter-kit__img {
        bottom: 18%;
        width: 500px;
    }
    .card-starter-kit__body {
        padding: 0;
    }
    .card-starter-kit__text-wrap {
        margin-bottom: 28px;
    }
    .card-starter-kit__title {
        font-size: 17px;
    }
    .starter-detection__inner {
        padding-top: 63px;
        padding-bottom: 64px;
    }
    .starter-detection .detection-item__title {
        font-size: 17px;
    }
    .starter-detection__title {
        margin-bottom: 43px !important;
    }
    .starter-detection__list {
        gap: 100px;
    }
    .detection-item {
        gap: 36px;
    }
    .starter-comfort__inner {
        padding-top: 64px;
        padding-bottom: 34px;
    }
    .card-about .card-about__title {
        font-size: 17px;
    }
    .card-about__img-wrap {
        width: 100%;
    }
    .additional-callback .form-starter-order__inner {
        gap: 40px;
        padding-top: 57px;
        padding-bottom: 50px;
        padding-left: 20px;
    }
    .additional-callback .form-starter__additional-text {
        margin-top: 32px;
    }
    .additional-callback .form-starter-order__field-wrap {
        gap: 19px;
    }
    .additional-callback .form-contact .form__field {
        font-size: 16px;
    }
    .additional-callback .form-starter-order .form__btn-wrap {
        margin-top: 16px;
    }
    .reviews .container {
        max-width: none;
    }
    .reviews__inner {
        padding-top: 78px;
    }
    .reviews__title {
        margin-bottom: 45px !important;
    }
    .review {
        gap: 20px;
    }
    .review__img-wrap {
        align-self: center;
    }
    .review__footer {
        margin-top: 22px;
    }
    .faq {
        padding-right: 0;
        padding-left: 0;
    }
    .faq__inner {
        padding-top: 95px;
        padding-bottom: 120px;
    }
    .faq__title {
        margin-bottom: 35px !important;
    }
}

@media screen and (max-width: 360px) {
    .starter-features__inner{
        grid-template-columns: 1fr;
    }
}