@charset "UTF-8";
/* 0_start.scss */
.white-space-pre {
    white-space: pre;
}

/* 1_media.scss */
/* 1_reset.scss */
/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Balance text wrapping on headings */
h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
        min-height: 6em;
    }

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 120px;
}

body {
    margin: 0;
}

button {
    border: none;
    margin: 0;
    padding: 0;
    width: auto;
    overflow: visible;
    background: transparent;
    /* inherit font & color from ancestor */
    color: inherit;
    font: inherit;
    /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */
    line-height: normal;
    /* Corrects font smoothing for webkit */
    -webkit-font-smoothing: inherit;
    -moz-osx-font-smoothing: inherit;
}

/* colors.scss */
/* fonts.scss */
@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: normal;
    font-weight: 400;
    src: url("/styles/fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: italic;
    font-weight: 400;
    src: url("/styles/fonts/Montserrat-Italic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: normal;
    font-weight: 500;
    src: url("/styles/fonts/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: italic;
    font-weight: 500;
    src: url("/styles/fonts/Montserrat-MediumItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: normal;
    font-weight: 600;
    src: url("/styles/fonts/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: italic;
    font-weight: 600;
    src: url("/styles/fonts/Montserrat-SemiBoldItalic.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url("/styles/fonts/Montserrat-Bold.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat";
    font-display: swap;
    font-style: italic;
    font-weight: 700;
    src: url("/styles/fonts/Montserrat-BoldItalic.ttf") format("truetype");
}
/* grid.scss */
:root {
    --column-count: 12;
    --gutter: 16px;
    --margin: 32px;
    --max-width: 1512px;
    --full-width: calc(min(var(--max-width), 100vw));
    --grid-width: calc(var(--full-width) - 2 * var(--margin));
    --column-width: calc((var(--grid-width) - (var(--column-count) - 1) * var(--gutter)) / var(--column-count));
    --extra-margin: calc((100vw - var(--full-width)) * 0.5);
    --extra-margin-percent: calc((100% - var(--full-width)) * 0.5);
}

@media (max-width: 1511px) {
    :root {
        --extra-margin: 0px;
        --extra-margin-percent: 0px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --column-count: 12;
        --margin: 20px;
        --gutter: 12px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --column-count: 8;
        --margin: 16px;
        --gutter: 12px;
    }
}

@media (min-width: 360px) and (max-width: 639px) {
    :root {
        --column-count: 8;
        --margin: 14px;
        --gutter: 8px;
    }
}

@media (max-width: 359px) {
    :root {
        --full-width: 360px;
        --column-count: 8;
        --column-width: calc(1px * (360 - 24 - 7 * 6) / 8);
        --margin: 12px;
        --gutter: 6px;
    }
}

:root {
    --component-gap: 104px;
}

@media (min-width: 1280px) and (max-width: 1511px) {
    :root {
        --component-gap: 96px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --component-gap: 80px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --component-gap: 64px;
    }
}

@media (max-width: 639px) {
    :root {
        --component-gap: 48px;
    }
}

:root {
    --header-height: 90px;
}

@media (min-width: 1280px) and (max-width: 1511px) {
    :root {
        --header-height: 82px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --header-height: 66px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --header-height: 66px;
    }
}

@media (max-width: 639px) {
    :root {
        --header-height: 74px;
    }
}

:root {
    --h2-margin: 40px;
}

@media (min-width: 1280px) and (max-width: 1511px) {
    :root {
        --h2-margin: 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    :root {
        --h2-margin: 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    :root {
        --h2-margin: 20px;
    }
}

@media (max-width: 639px) {
    :root {
        --h2-margin: 16px;
    }
}

div.help-grid {
    z-index: 999999;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    translate: -50% 0;
    width: calc(var(--full-width) - var(--margin) * 2);
    height: 100%;
    margin: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to right, rgba(255, 0, 0, 0.1), rgba(255, 0, 0, 0.1) var(--column-width), rgba(255, 0, 0, 0) var(--column-width), rgba(255, 0, 0, 0) calc(var(--column-width) + var(--gutter)));
}

div.help-component {
    position: absolute !important;
    top: 0;
    left: 50%;
    border-radius: 0 !important;
    width: var(--full-width);
    height: 100%;
    pointer-events: none;
    translate: -50% 0;
    background: rgba(255, 0, 0, 0.1);
    pointer-events: none;
    grid-column: unset !important;
    grid-row: unset !important;
}

/* icons.scss */
i[data-icon] {
    display: block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    aspect-ratio: 1;
    height: 100%;
}

i[data-icon=cart] {
    background-image: url("/styles/images/icons/cart.svg");
}

i[data-icon=info] {
    background-image: url("/styles/images/icons/info.svg");
}

body:not([data-cart]) a[href="/cart/"] path.notempty {
    display: none;
}

body:not([data-cart]) a[href="/cart/"] circle {
    display: none;
}

body[data-cart] a[href="/cart/"] path.empty {
    display: none;
}

svg.loading {
    animation-name: rotate-loading-circle;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/* squircle.scss */
/* text-styles.scss */
body {
    color: #24262d;
    font-family: "Montserrat";
}

h1 {
    font-size: 72px;
    font-weight: 500;
    line-height: 72px;
}

@media (max-width: 1511px) {
    h1 {
        font-size: 64px;
        font-weight: 500;
        line-height: 64px;
    }
}

@media (max-width: 1279px) {
    h1 {
        font-size: 56px;
        font-weight: 500;
        line-height: 56px;
    }
}

@media (max-width: 1023px) {
    h1 {
        font-size: 36px;
        font-weight: 500;
        line-height: 36px;
    }
}

h2 {
    font-size: 54px;
    font-weight: 500;
    line-height: 52px;
}

@media (max-width: 1511px) {
    h2 {
        font-size: 46px;
        font-weight: 500;
        line-height: 44px;
    }
}

@media (max-width: 1279px) {
    h2 {
        font-size: 42px;
        font-weight: 500;
        line-height: 40px;
    }
}

@media (max-width: 1023px) {
    h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 26px;
    }
}

h3 {
    font-size: 32px;
    font-weight: 500;
    line-height: 36px;
}

@media (max-width: 1279px) {
    h3 {
        font-size: 28px;
        font-weight: 500;
        line-height: 30px;
    }
}

@media (max-width: 1023px) {
    h3 {
        font-size: 22px;
        font-weight: 500;
        line-height: 26px;
    }
}

h4 {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    h4 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    h4 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

/* timing.scss */
#asf {
    position: fixed;
    top: 50%;
    left: 50%;
}

/* animations/loader.scss */
@keyframes loader {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}
/* animations/rotate-loading-circle.scss */
@keyframes rotate-loading-circle {
    0% {
        rotate: 0;
    }

    100% {
        rotate: 1turn;
    }
}
/* elements/0_black-button.scss */
button.black {
    border-radius: 8px;
    clip-path: polygon(0px 15.4px, 0px 14px, 0px 12.7px, 0px 11.5px, 0px 10.4px, 0.1px 9.4px, 0.1px 8.4px, 0.2px 7.4px, 0.4px 6.6px, 0.5px 5.8px, 0.7px 5.1px, 1px 4.4px, 1.2px 3.8px, 1.5px 3.2px, 1.9px 2.7px, 2.3px 2.3px, 2.7px 1.9px, 3.2px 1.5px, 3.8px 1.2px, 4.4px 1px, 5.1px 0.7px, 5.8px 0.5px, 6.6px 0.4px, 7.4px 0.2px, 8.4px 0.1px, 9.4px 0.1px, 10.4px 0px, 11.5px 0px, 12.7px 0px, 14px 0px, calc(100% - 14px) 0px, calc(100% - 12.7px) 0px, calc(100% - 11.5px) 0px, calc(100% - 10.4px) 0px, calc(100% - 9.4px) 0.1px, calc(100% - 8.4px) 0.1px, calc(100% - 7.4px) 0.2px, calc(100% - 6.6px) 0.4px, calc(100% - 5.8px) 0.5px, calc(100% - 5.1px) 0.7px, calc(100% - 4.4px) 1px, calc(100% - 3.8px) 1.2px, calc(100% - 3.2px) 1.5px, calc(100% - 2.7px) 1.9px, calc(100% - 2.3px) 2.3px, calc(100% - 1.9px) 2.7px, calc(100% - 1.5px) 3.2px, calc(100% - 1.2px) 3.8px, calc(100% - 1px) 4.4px, calc(100% - 0.7px) 5.1px, calc(100% - 0.5px) 5.8px, calc(100% - 0.4px) 6.6px, calc(100% - 0.2px) 7.4px, calc(100% - 0.1px) 8.4px, calc(100% - 0.1px) 9.4px, calc(100% - 0px) 10.4px, calc(100% - 0px) 11.5px, calc(100% - 0px) 12.7px, calc(100% - 0px) 14px, calc(100% - 0px) 15.4px, calc(100% - 0px) calc(100% - 15.4px), calc(100% - 0px) calc(100% - 14px), calc(100% - 0px) calc(100% - 12.7px), calc(100% - 0px) calc(100% - 11.5px), calc(100% - 0px) calc(100% - 10.4px), calc(100% - 0.1px) calc(100% - 9.4px), calc(100% - 0.1px) calc(100% - 8.4px), calc(100% - 0.2px) calc(100% - 7.4px), calc(100% - 0.4px) calc(100% - 6.6px), calc(100% - 0.5px) calc(100% - 5.8px), calc(100% - 0.7px) calc(100% - 5.1px), calc(100% - 1px) calc(100% - 4.4px), calc(100% - 1.2px) calc(100% - 3.8px), calc(100% - 1.5px) calc(100% - 3.2px), calc(100% - 1.9px) calc(100% - 2.7px), calc(100% - 2.3px) calc(100% - 2.3px), calc(100% - 2.7px) calc(100% - 1.9px), calc(100% - 3.2px) calc(100% - 1.5px), calc(100% - 3.8px) calc(100% - 1.2px), calc(100% - 4.4px) calc(100% - 1px), calc(100% - 5.1px) calc(100% - 0.7px), calc(100% - 5.8px) calc(100% - 0.5px), calc(100% - 6.6px) calc(100% - 0.4px), calc(100% - 7.4px) calc(100% - 0.2px), calc(100% - 8.4px) calc(100% - 0.1px), calc(100% - 9.4px) calc(100% - 0.1px), calc(100% - 10.4px) calc(100% - 0px), calc(100% - 11.5px) calc(100% - 0px), calc(100% - 12.7px) calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), 14px calc(100% - 0px), 12.7px calc(100% - 0px), 11.5px calc(100% - 0px), 10.4px calc(100% - 0px), 9.4px calc(100% - 0.1px), 8.4px calc(100% - 0.1px), 7.4px calc(100% - 0.2px), 6.6px calc(100% - 0.4px), 5.8px calc(100% - 0.5px), 5.1px calc(100% - 0.7px), 4.4px calc(100% - 1px), 3.8px calc(100% - 1.2px), 3.2px calc(100% - 1.5px), 2.7px calc(100% - 1.9px), 2.3px calc(100% - 2.3px), 1.9px calc(100% - 2.7px), 1.5px calc(100% - 3.2px), 1.2px calc(100% - 3.8px), 1px calc(100% - 4.4px), 0.7px calc(100% - 5.1px), 0.5px calc(100% - 5.8px), 0.4px calc(100% - 6.6px), 0.2px calc(100% - 7.4px), 0.1px calc(100% - 8.4px), 0.1px calc(100% - 9.4px), 0px calc(100% - 10.4px), 0px calc(100% - 11.5px), 0px calc(100% - 12.7px), 0px calc(100% - 14px), 0px calc(100% - 15.4px));
}

button.black {
    width: 58px;
    height: 58px;
    background: #24262d;
    display: flex;
    align-items: center;
    justify-content: center;
}

    button.black > svg {
        aspect-ratio: 1;
    }

@media (min-width: 640px) and (max-width: 1279px) {
    button.black {
        width: 50px;
        height: 50px;
    }
}

/* elements/0_hover.scss */
/* elements/0_list-reset.scss */
ul, ol {
    padding-left: 52px;
}

    ul > li {
        list-style: none;
    }

        ul > li::before {
            position: absolute;
            translate: -32px calc(0.5em - 2px);
            display: block;
            width: 16px;
            height: 16px;
            background: #37ea97;
            border-radius: 8px;
            content: "";
        }

ol {
    list-style-type: none;
    counter-reset: counter;
}

    ol > li::before {
        position: absolute;
        content: counter(counter);
        counter-increment: counter;
        translate: -32px 0;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

@media (max-width: 1279px) {
    ol > li::before {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    ol > li::before {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

/* elements/0_tile-padding.scss */
/* elements/1_button-arrow.scss */
/* elements/1_button-color.scss */
.green-button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    .green-button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    .green-button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

.green-button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    .green-button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    .green-button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        .green-button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

.green-button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

.orange-button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    .orange-button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    .orange-button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

.orange-button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    .orange-button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    .orange-button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        .orange-button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

.orange-button {
    background: #fe6e46;
    color: #ffffff;
}

    .orange-button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(241, 9, 79, 0.2196078431) 0%, rgba(241, 9, 79, 0.3098039216) 33.45%, rgba(241, 9, 79, 0) 100%);
    }

/* elements/a.scss */
a {
    text-decoration: none;
    color: #24262d;
}

/* elements/button-icon.scss */
button.icon path {
    transition: fill 0.3s ease;
}

@media (pointer: fine) {
    button.icon:hover path {
        fill: #37ea97;
    }
}

/* elements/button.scss */
button:not([disabled]) {
    cursor: pointer;
}

/* elements/cart_popup.scss */
body[data-cart] a.cart-popup {
    position: fixed;
    bottom: 128px;
    right: calc(var(--extra-margin) + var(--margin) + 64px);
    width: auto;
    min-width: 54px;
    height: 54px;
    display: flex;
    gap: 0;
    background: #1f2b5e;
    border-radius: 54px;
    transition: padding 0.3s ease, gap 0.3s ease;
    z-index: 100;
}

    body[data-cart] a.cart-popup > div {
        display: grid;
        grid-template-columns: 0fr;
        align-items: center;
        transition: grid-template-columns 0.3s ease;
    }

        body[data-cart] a.cart-popup > div > p {
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            color: #ffffff;
            font-size: 16px;
            font-weight: 500;
            line-height: 18px;
        }

@media (max-width: 1279px) {
    body[data-cart] a.cart-popup > div > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    body[data-cart] a.cart-popup:hover {
        padding-inline: 32px 16px;
        gap: 8px;
    }

        body[data-cart] a.cart-popup:hover > div {
            grid-template-columns: 1fr;
        }

        body[data-cart] a.cart-popup:hover > svg {
            translate: 0;
        }
}

body[data-cart] a.cart-popup > svg {
    display: block;
    width: 54px;
    height: 54px;
    scale: 0.5;
    content: "";
}

@media (max-width: 639px) {
    body[data-cart] a.cart-popup {
        bottom: 96px;
        right: calc(var(--extra-margin) + var(--margin) + 16px);
    }
}

body:not([data-cart]) a.cart-popup {
    display: none !important;
}

/* elements/component-100vw.scss */
/* elements/cookie.scss */
.cookie-notification-bar {
    position: fixed;
    z-index: 99999;
    bottom: 24px;
    left: 50%;
    width: 472px;
    translate: -50%;
    background: #ffffff;
    box-shadow: 5px 5px 21px 0 rgba(0, 0, 0, 0.13);
    border-radius: 8px;
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
    overflow: hidden;
}

    .cookie-notification-bar.collapse {
        grid-template-rows: 0fr;
        opacity: 0;
        scale: 0.8;
    }

    .cookie-notification-bar > label {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        overflow: hidden;
    }

@media (min-width: 1512px) {
    .cookie-notification-bar > label {
        padding: 16px 28px 16px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    .cookie-notification-bar > label {
        padding: 16px 28px 16px 32px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .cookie-notification-bar > label {
        padding: 12px 24px 12px 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .cookie-notification-bar > label {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-width: 639px) {
    .cookie-notification-bar > label {
        padding: 8px 10px 8px 12px;
    }
}

.cookie-notification-bar > label > div.shown {
    order: 1;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .cookie-notification-bar > label > div.shown > p {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    .cookie-notification-bar > label > div.shown > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

.cookie-notification-bar > label > div.shown > p {
    line-height: 1.5;
}

    .cookie-notification-bar > label > div.shown > p > span {
        color: hsl(152, 68%, 50%);
    }

        .cookie-notification-bar > label > div.shown > p > span.if-expanded {
            color: #868894;
        }

.cookie-notification-bar > label > div.expandable {
    order: 0;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
}

    .cookie-notification-bar > label > div.expandable > div {
        margin-block: 0 16px;
        overflow: hidden;
        transition: margin-top 0.3s ease;
        color: #868894;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

@media (max-width: 1023px) {
    .cookie-notification-bar > label > div.expandable > div {
        margin-bottom: 8px;
    }
}

.cookie-notification-bar > label > div.expandable > div {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    .cookie-notification-bar > label > div.expandable > div {
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }
}

.cookie-notification-bar > label > div.expandable > div > p {
    margin: 0;
}

.cookie-notification-bar > label > div.expandable > div a {
    color: hsl(152, 68%, 50%);
}

.cookie-notification-bar > label:has(input#cookie-checkbox:checked) > div.expandable {
    grid-template-rows: 1fr;
}

.cookie-notification-bar > label:has(input#cookie-checkbox:checked) .if-not-expanded {
    display: none !important;
}

.cookie-notification-bar > label:not(:has(input#cookie-checkbox:checked)) > div.expandable > div {
    margin-bottom: 0;
}

.cookie-notification-bar > label:not(:has(input#cookie-checkbox:checked)) .if-expanded {
    display: none !important;
}

.cookie-notification-bar > label button {
    position: relative;
    z-index: 1;
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    .cookie-notification-bar > label button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    .cookie-notification-bar > label button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

.cookie-notification-bar > label button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    .cookie-notification-bar > label button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    .cookie-notification-bar > label button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        .cookie-notification-bar > label button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

.cookie-notification-bar > label button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

.cookie-notification-bar > label button {
    display: inline-block;
    height: 42px;
    padding-inline: 20px;
    line-height: 42px !important;
    background: #37ea97;
    color: #24262d;
    border-radius: 21px;
}

.cookie-notification-bar > label button {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    .cookie-notification-bar > label button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    .cookie-notification-bar > label button {
        height: 32px;
        line-height: 32px !important;
        padding-inline: 12px;
    }
}

.cookie-notification-bar input {
    display: none;
}

@media (max-width: 1023px) {
    .cookie-notification-bar {
        width: calc(7 * var(--column-width) + 6 * var(--gutter));
        min-width: 284px;
        max-width: 400px;
        top: calc(100svh - 144px);
    }
}

@media print {
    .cookie-notification-bar {
        display: none !important;
    }
}

.cookie-notification-bar ul.settings {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .cookie-notification-bar ul.settings > li::before {
        content: none;
    }

.cookie-notification-bar ul.settings {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .cookie-notification-bar ul.settings > li > label {
        display: flex;
        height: 100%;
        flex-direction: column;
        gap: 4px;
        padding-right: 64px;
    }

        .cookie-notification-bar ul.settings > li > label::before, .cookie-notification-bar ul.settings > li > label::after {
            top: 50%;
            translate: 0 -50%;
        }

        .cookie-notification-bar ul.settings > li > label > p {
            margin: 0;
            font-size: 13px;
            font-weight: 600;
            line-height: 16px;
        }

@media (max-width: 1279px) {
    .cookie-notification-bar ul.settings > li > label > p {
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }
}

.cookie-notification-bar ul.settings > li > label > p > strong {
    color: #24262d;
    line-height: 1;
}

/* elements/div.popup.scss */
div.popup {
    position: fixed;
    top: 50%;
    left: 50%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: fit-content;
    max-width: 400px;
    background: #ffffff;
    margin-top: 0;
    padding: 12px 16px;
    border-radius: 8px;
    translate: -50% -50%;
    z-index: 100000;
    box-shadow: 0 0 0 10000vmax rgba(0, 0, 0, 0.3333333333);
}

    div.popup > p {
        grid-column: span 2;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

@media (max-width: 1279px) {
    div.popup > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    div.popup > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

div.popup > button.cancel {
    background: transparent;
}

div.popup > button.ok {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    div.popup > button.ok {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    div.popup > button.ok {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

div.popup > button.ok {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    div.popup > button.ok::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    div.popup > button.ok:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        div.popup > button.ok:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

div.popup > button.ok::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

div.popup > button.ok[data-color=orange] {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    div.popup > button.ok[data-color=orange] {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    div.popup > button.ok[data-color=orange] {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

div.popup > button.ok[data-color=orange] {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    div.popup > button.ok[data-color=orange]::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    div.popup > button.ok[data-color=orange]:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        div.popup > button.ok[data-color=orange]:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

div.popup > button.ok[data-color=orange] {
    background: #fe6e46;
    color: #ffffff;
}

    div.popup > button.ok[data-color=orange]::before {
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(241, 9, 79, 0.2196078431) 0%, rgba(241, 9, 79, 0.3098039216) 33.45%, rgba(241, 9, 79, 0) 100%);
    }

@media (max-width: 639px) {
    div.popup {
        width: 320px;
    }
}

/* elements/gradient.scss */
/* elements/hide-scrollbar.scss */
.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

/* elements/input.scss */
input,
button[type],
textarea {
    height: 54px;
    border: none;
    border-radius: 8px;
    line-height: 54px;
    padding: 0 16px;
    background: #eef1ff;
    transition: background-color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    input,
    button[type],
    textarea {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

input[type=button], input[type=reset],
button[type][type=button],
button[type][type=reset],
textarea[type=button],
textarea[type=reset] {
    cursor: pointer;
}

@media (max-width: 1023px) {
    input,
    button[type],
    textarea {
        height: 44px;
        padding: 14px 12px;
    }
}

input:focus-visible,
button[type]:focus-visible,
textarea:focus-visible {
    background-color: #ffffff;
}

textarea {
    line-height: normal;
    padding-block: 16px;
    max-height: 172px;
}

:focus-visible {
    outline: 2px solid #465ffe;
    outline-offset: 1px;
}

/* elements/link.scss */
/* elements/props.scss */
ul.props {
    list-style: none;
    margin: 0;
    padding: 0;
}

    ul.props > li::before {
        content: none;
    }

    ul.props > li {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 var(--gutter);
        color: #777a87;
    }

        ul.props > li > p.text {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }

@media (max-width: 1279px) {
    ul.props > li > p.text {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    ul.props > li > p.text {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

ul.props > li > p.text {
    line-height: 24px;
}

@media (max-width: 1279px) {
    ul.props > li > p.text {
        line-height: 20px;
    }
}

@media (max-width: 1023px) {
    ul.props > li > p.text {
        line-height: 16px;
    }
}

ul.props > li > p.price {
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}

@media (max-width: 1279px) {
    ul.props > li > p.price {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    ul.props > li > p.price {
        font-size: 12px;
        font-weight: 700;
        line-height: 10px;
    }
}

ul.props > li > p.price {
    line-height: 24px;
}

@media (max-width: 1279px) {
    ul.props > li > p.price {
        line-height: 20px;
    }
}

@media (max-width: 1023px) {
    ul.props > li > p.price {
        line-height: 16px;
    }
}

/* elements/select.scss */
div.select {
    position: relative;
}

    div.select > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        height: 54px;
        border: none;
        border-radius: 8px;
        padding: 18px 16px;
        background: #eef1ff;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    div.select > div {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    div.select > div {
        height: 44px;
        padding: 14px 12px;
    }
}

div.select > div[type=button], div.select > div[type=reset] {
    cursor: pointer;
}

div.select > div:focus-visible {
    outline: 3px double #37ea97;
}

div.select > div::after {
    content: "";
    display: block;
    width: 17px;
    height: 8px;
    background: url("/styles/images/icons/select-arrow.png") no-repeat;
    background-size: contain;
    transition: rotate 0.3s ease-in-out;
}

@media (max-width: 1023px) {
    div.select > div::after {
        width: 12px;
        height: 8px;
    }
}

div.select div.scrollbar {
    background-color: red;
}

div.select > div {
    overflow: hidden;
}

div.select[data-open=true] > div::after {
    rotate: 180deg;
}

div.select[data-open=true] > ul {
    animation: enable-scroll 0s linear 0.3s forwards;
}

div.select > ul {
    max-height: 200px;
    overflow-y: scroll;
    position: absolute;
    z-index: 200;
    border-radius: 8px;
    padding-inline: 8px;
    margin: 4px 0 0 0;
    width: 100%;
    background-color: #eef1ff;
    display: flex;
    flex-direction: column;
    transition: padding 0.3s ease-in-out, height 0.3s ease-in-out;
}

@media (max-width: 1023px) {
    div.select > ul {
        padding-inline: 4px;
    }
}

div.select > ul > li:first-child {
    margin-top: 8px;
}

div.select > ul > li:last-child {
    margin-bottom: 8px;
}

div.select > ul > li.checked {
    pointer-events: none;
}

@media (max-width: 1023px) {
    div.select > ul > li:first-child {
        margin-top: 4px;
    }

    div.select > ul > li:last-child {
        margin-bottom: 4px;
    }
}

div.select > ul > li > label {
    display: block;
    cursor: pointer;
    color: #24262d;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
    width: 100%;
    padding: 15px 8px;
    border-radius: 8px;
    color: #777a87;
    font-weight: 400 !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    div.select > ul > li > label {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    div.select > ul > li > label {
        padding: 10px 6px;
    }
}

div.select > ul > li > label:hover {
    background-color: #ffffff;
}

div.select > ul > li > label:has(input:checked) {
    color: #24262d;
}

div.select > ul > li > label:has(input:disabled) {
    cursor: default;
    opacity: 0.5;
}

div.select input {
    display: none;
}

div.select.preparing > div::after {
    content: none;
}

div.select.preparing > ul {
    pointer-events: none;
    opacity: 0;
}

/* elements/tags.scss */
ul.tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 8px;
}

@media (max-width: 1279px) {
    ul.tags {
        gap: 4px;
    }
}

ul.tags.column {
    flex-direction: column;
    align-items: start;
}

ul.tags > li {
    height: fit-content;
    border: 1px solid #777a87;
    border-radius: 58px;
    padding: 4px 12px;
}

@media (max-width: 1279px) {
    ul.tags > li {
        padding: 2px 8px;
    }
}

ul.tags > li::before {
    content: none;
}

ul.tags > li > p {
    margin: 0;
    height: fit-content;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    ul.tags > li > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    ul.tags > li > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

/* elements/tile-hover-gradient.scss */
section[data-gradient=yes][data-image="2"]::before {
    background-image: url("/styles/images/background/2.webp");
}

section[data-gradient=yes][data-image="3"]::before {
    background-image: url("/styles/images/background/3.webp");
}

section[data-gradient=yes]::before {
    display: block;
    width: min(100vw, 2000px);
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-image: url("/styles/images/background/1.webp");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: repeat-y;
    transition: width 0.3s ease, height 0.3s ease, translate 0.3s ease;
    content: "";
}

/* elements/toggle.scss */
label.toggle-label {
    position: relative;
}

    label.toggle-label:not(:has(input:disabled)):not(:has(+ input:disabled)) {
        cursor: pointer;
    }

    label.toggle-label:has(+ input:checked)::before, label.toggle-label:has(input:checked)::before {
        background-color: #fe6e46;
    }

    label.toggle-label:has(+ input:checked):has(input:disabled), label.toggle-label:has(+ input:checked):has(+ input:disabled), label.toggle-label:has(input:checked):has(input:disabled), label.toggle-label:has(input:checked):has(+ input:disabled) {
        filter: saturate(0.5);
    }

    label.toggle-label:has(+ input:checked)::after, label.toggle-label:has(input:checked)::after {
        right: 2px;
    }

    label.toggle-label input {
        display: none;
    }

    label.toggle-label::before, label.toggle-label::after {
        position: absolute;
        right: 0;
        content: "";
        display: block;
    }

    label.toggle-label::before {
        width: 36px;
        height: 20px;
        top: 0;
        border-radius: 12px;
        background-color: #a9abb7;
        transition: background 0.3s ease;
    }

@media (max-width: 1279px) {
    label.toggle-label::before {
        width: 32px;
        height: 16px;
    }
}

label.toggle-label::after {
    width: 16px;
    height: 16px;
    background-color: #ffffff;
    top: 2px;
    right: 18px;
    border-radius: 50%;
    transition: right 0.3s ease;
}

@media (max-width: 1279px) {
    label.toggle-label::after {
        width: 12px;
        height: 12px;
    }
}

/* &.scss */
html.fixed {
    position: fixed;
    width: 100%;
    top: calc(-1 * var(--scroll-position) + 0 * var(--header-height));
    overflow: clip;
}

    html.fixed,
    html.fixed > body {
        overscroll-behavior-x: contain;
        padding-top: 0;
    }

@media (max-width: 639px) {
    html .desktop-only {
        display: none !important;
    }
}

@media (min-width: 640px) {
    html .mobile-only {
        display: none !important;
    }
}

html:has(div.burger:not(.hide)) main {
    pointer-events: none;
    user-select: none;
}

/* body/&.scss */
html > body {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    box-sizing: border-box;
    width: 100%;
    min-width: 360px;
    min-height: 100vh;
    margin-top: var(--header-height);
    transform-origin: top left;
}

html > body:has(dialog[open]) {
    overflow: hidden;
}

html > body:has(section.hero-screen) {
    margin-top: 0;
}

@media (min-width: 640px) {
    html > body:has(section.hero-screen) > header > nav > a {
        translate: 0 -150px;
    }
}

@media (max-width: 639px) {
    html > body:has(section.hero-screen) > header > nav > a {
        translate: -150px 0px;
    }
}

@media (max-width: 639px) {
    html > body:has(section.hero-screen) > header > nav > div.toggle {
        translate: calc(-0.5 * var(--full-width) + 2 * var(--margin) + 50%);
    }
}

html > body.corp {
    --accent: #5546fe;
    --accent-secondary: #1028FF;
    --accent-secondary-1: rgba(16, 40, 255, 0.2196078431);
    --accent-secondary-2: rgba(16, 40, 255, 0.3098039216);
    --accent-secondary-3: rgba(16, 40, 255, 0);
    --small-text-comet: url("/styles/images/small-text/comet-corp.png");
}

html > body.home, html > body.lk {
    --accent: #fe6e46;
    --accent-secondary: #F1094F;
    --accent-secondary-1: rgba(241, 9, 79, 0.2196078431);
    --accent-secondary-2: rgba(241, 9, 79, 0.3098039216);
    --accent-secondary-3: rgba(241, 9, 79, 0);
    --small-text-comet: url("/styles/images/small-text/comet.png");
}

    /* body/&.lk/&.scss */
    html > body.lk:has(section.form-lk) {
        margin: 0;
    }

        html > body.lk:has(section.form-lk) header,
        html > body.lk:has(section.form-lk) footer,
        html > body.lk:has(section.form-lk) section:not(.form-lk) {
            display: none;
        }

        html > body.lk:has(section.form-lk) section.form-lk {
            margin: 0;
        }

html > body.lk {
    --accent: #fe6e46;
}

/* body/footer/&.scss */
html > body > footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
    margin-top: var(--component-gap);
    padding-inline: calc(var(--extra-margin) + var(--margin));
    padding-block: 64px 28px;
    background: #24262d;
    color: #ffffff;
}

    html > body > footer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > footer ul > li::before {
            content: none;
        }

@media (max-width: 639px) {
    html > body > footer {
        grid-template-columns: 1fr;
        gap: 72px var(--gutter);
        padding-top: 48px;
    }
}

html > body > footer a {
    color: currentColor;
}

@media (max-width: 359px) {
    html > body > footer {
        padding-inline: var(--margin);
    }
}

/* body/footer/span.scss */
html > body > footer > span {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    justify-self: start;
    display: block;
    width: calc(2.5 * var(--column-width) + 1.5 * var(--gutter));
    aspect-ratio: 1;
    background-image: url("/styles/images/icons/logo.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

/* body/header/&.hide.scss */
html > body > header.hide {
    translate: 0 calc(-0.75 * var(--header-height));
    opacity: 0;
    scale: 1.01;
}

/* body/header/&.scss */
html > body > header {
    position: fixed;
    top: 0;
    left: calc(var(--extra-margin-percent) + var(--margin));
    width: calc(12 * var(--column-width) + 11 * var(--gutter));
    height: var(--header-height);
    margin-inline: auto;
    padding-block: 16px;
    display: grid;
    grid-template-columns: calc(1 * var(--column-width) + 0 * var(--gutter)) calc(10 * var(--column-width) + 9 * var(--gutter)) calc(1 * var(--column-width) + 0 * var(--gutter));
    gap: var(--gutter);
    transition: translate 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
    z-index: 100;
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > header {
        padding-block: 12px;
    }
}

@media (max-width: 1279px) {
    html > body > header {
        padding-block: 8px;
    }
}

@media (max-width: 1023px) {
    html > body > header {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
        grid-template-columns: 0 calc(8 * var(--column-width) + 7 * var(--gutter)) 0;
        gap: 0;
    }

        html > body > header > button {
            display: none !important;
        }
}

html > body > header svg {
    fill: #ffffff;
}

html > body > header a {
    color: #ffffff;
    transition: translate 0.3s ease;
}

html > body > header:has(div.burger.hide) > button.burger-close {
    translate: 0 -75%;
    opacity: 0;
    scale: 1.01;
}

html > body > header:has(div.burger.hide) > div.overlay {
    opacity: 0;
}

html > body > header:not(:has(div.burger.hide)) > nav button.burger-open {
    opacity: 0.6;
}

/* body/header/&.show-logo.scss */
html > body > header.show-logo > nav > a {
    translate: 0 !important;
}

@media (max-width: 639px) {
    html > body > header.show-logo > nav > div.toggle {
        translate: 0 !important;
    }
}

/* body/header/button.back.scss */
html > body > header > button.back {
    justify-self: end;
    position: relative;
    z-index: 1000;
}

/* body/header/button.burger-close.scss */
html > body > header > button.burger-close {
    justify-self: start;
    transition: translate 0.3s ease, scale 0.3s ease, opacity 0.3s ease;
    position: relative;
    z-index: 1000;
}

/* body/header/div.overlay.scss */
html > body > header > div.overlay {
    position: fixed;
    left: -50lvw;
    top: -50lvh;
    width: 200lvw;
    height: 200lvh;
    background: rgba(255, 255, 255, 0.85);
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.3s ease;
}

/* body/main/!div.tabs.scss */
html > body > main div.tabs {
    position: relative;
}

    html > body > main div.tabs > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > main div.tabs > ul > li::before {
            content: none;
        }

    html > body > main div.tabs > ul {
        display: flex;
        background-color: rgba(78, 93, 156, 0.07);
        border-radius: 6000px;
        gap: 2px;
        height: 42px;
        width: fit-content;
    }

        html > body > main div.tabs > ul > li {
            padding: 0;
            height: 42px;
            z-index: 1;
        }

            html > body > main div.tabs > ul > li > label {
                color: #4e5d9c;
                padding: 13px 19px;
                display: block;
                transition: color 0.3s ease;
                cursor: pointer;
                font-size: 13px;
                font-weight: 600;
                line-height: 16px;
            }

@media (max-width: 1279px) {
    html > body > main div.tabs > ul > li > label {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main div.tabs > ul > li > label:has(input:checked) {
    z-index: 2;
    color: #ffffff;
}

html > body > main div.tabs > div.active-background {
    position: absolute;
    border-radius: 21px;
    background: #4e5d9c;
    z-index: 0;
    transition: left 0.3s ease, top 0.3s ease;
}

/* body/main/&.error-404.scss */
html > body > main.error-404 > section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    html > body > main.error-404 > section > h1 {
        text-align: center;
        margin: 0;
    }

    html > body > main.error-404 > section > p {
        color: #868894;
        text-align: center;
        margin: 12px 0 0 0;
        font-size: 26px;
        font-weight: 500;
        line-height: 28px;
    }

@media (max-width: 1279px) {
    html > body > main.error-404 > section > p {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main.error-404 > section > p {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > main.error-404 > section > svg {
    margin-top: 100px;
}

html > body > main.error-404 > section > a {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main.error-404 > section > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main.error-404 > section > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main.error-404 > section > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main.error-404 > section > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main.error-404 > section > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main.error-404 > section > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main.error-404 > section > a {
    background: var(--accent);
}

    html > body > main.error-404 > section > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main.error-404 > section > a {
    width: fit-content;
    margin-top: 32px;
    color: #ffffff;
}

html > body > main.error-404 > section::before {
    background-image: url("/styles/images/gradient.svg");
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(100px);
}

/* body/main/&.scss */
html > body > main > * {
    position: relative;
    width: var(--full-width);
    margin-inline: auto;
    padding-inline: var(--margin);
    margin-top: var(--component-gap);
}

    html > body > main > * > h2 {
        margin: 0 0 var(--h2-margin) 0;
    }

    html > body > main > *.answer {
        overflow: hidden;
        transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    }

    html > body > main > *[data-is-mini] + * {
        --component-gap: 72px;
    }

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main > *[data-is-mini] + * {
        --component-gap: 64px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main > *[data-is-mini] + * {
        --component-gap: 48px;
    }
}

@media (max-width: 1023px) {
    html > body > main > *[data-is-mini] + * {
        --component-gap: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main > *[data-is-mini] + * {
        --component-gap: 20px;
    }
}

/* body/&.lk/!div.user-profile/&.scss */
html > body.lk div.user-profile.commercial > svg > circle:first-of-type {
    fill: #5546fe;
}

html > body.lk div.user-profile > h3 {
    margin-block: 32px 16px;
}

@media (max-width: 1511px) {
    html > body.lk div.user-profile > h3 {
        margin-block: 28px 12px;
    }
}

@media (max-width: 1023px) {
    html > body.lk div.user-profile > h3 {
        margin-block: 20px 8px;
    }
}

html > body.lk div.user-profile > p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body.lk div.user-profile > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body.lk div.user-profile > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body.lk div.user-profile > p:first-of-type {
    margin-bottom: 12px;
    color: #dde0ee;
}

@media (max-width: 1511px) {
    html > body.lk div.user-profile > p:first-of-type {
        margin-bottom: 10px;
    }
}

@media (max-width: 1023px) {
    html > body.lk div.user-profile > p:first-of-type {
        margin-bottom: 6px;
    }
}

html > body.lk div.user-profile > p:first-of-type > b {
    font-weight: inherit;
    color: #ffffff;
    margin-left: 8px;
}

html > body.lk div.user-profile > p:last-child {
    margin-top: 3px;
}

@media (max-width: 1023px) {
    html > body.lk div.user-profile > p:last-child {
        margin-top: 0;
    }
}

/* body/&.lk/header/!div.burger-lk.scss */
html > body.lk > header div.burger-lk > nav {
    display: flex;
    align-items: end;
}

@media (max-width: 1023px) {
    html > body.lk > header div.burger-lk > nav {
        justify-content: end;
    }
}

@media (max-width: 639px) {
    html > body.lk > header div.burger-lk > nav {
        grid-column: 1;
        align-items: start;
    }
}

@media (max-width: 639px) {
    html > body.lk > header div.burger-lk {
        grid-template-columns: auto;
    }
}

/* body/&.lk/header/&.scss */
@media (max-width: 639px) {
    html > body.lk > header div.user-profile > svg {
        display: none;
    }
}

html > body.lk > header > nav {
    grid-template-columns: 1fr 1fr 1fr;
}

    html > body.lk > header > nav > div.buttons:first-of-type {
        justify-self: start;
    }

        html > body.lk > header > nav > div.buttons:first-of-type > button.burger-open {
            margin-left: 4px;
        }

@media (max-width: 639px) {
    html > body.lk > header > nav > div.buttons:last-of-type > button {
        margin-inline-end: 0 !important;
    }
}

html > body.lk > header > nav > div.toggle {
    display: none;
}

html > body.lk > header > nav > div.buttons {
    gap: 6px;
}

@media (max-width: 1279px) {
    html > body.lk > header > nav > div.buttons {
        gap: 10px;
    }
}

html > body.lk > header > nav > a.logo {
    grid-column: 2;
}

@media (max-width: 639px) {
    html > body.lk > header > nav > a.logo {
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 639px) {
    html > body.lk > header > nav > div.buttons:not(:has(.burger-open)) {
        display: block !important;
    }

        html > body.lk > header > nav > div.buttons:not(:has(.burger-open)) > a.login {
            display: none;
        }
}

html > body.lk > header > nav > div.buttons > button.burger-open {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
}

    html > body.lk > header > nav > div.buttons > button.burger-open > svg {
        width: 23px;
    }

@media (max-width: 1023px) {
    html > body.lk > header > nav > div.buttons > button.burger-open > svg {
        width: 20px;
    }
}

@media (pointer: fine) {
    html > body.lk > header > nav > div.buttons > button.burger-open:hover::after {
        color: hsl(152, 68%, 50%);
    }
}

html > body.lk > header > nav > div.buttons > button.burger-open::after {
    content: "меню";
    display: block;
    transition: color 0.3s ease;
    font-size: 14px;
    font-weight: 500;
    line-height: 106%;
}

@media (max-width: 1023px) {
    html > body.lk > header > nav > div.buttons > button.burger-open::after {
        font-size: 12px;
    }
}

@media (max-width: 639px) {
    html > body.lk > header > nav > div.buttons > button.burger-open::after {
        display: none;
    }
}

/* body/footer/div/&.scss */
html > body > footer > div {
    grid-column: 2;
    grid-row: 1/3;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 0 calc(1 * var(--column-width) + 0 * var(--gutter));
}

@media (max-width: 639px) {
    html > body > footer > div {
        grid-column: 1;
        grid-row: 2;
    }
}

html > body > footer > div > button {
    margin-top: 56px;
    margin-bottom: 72px;
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > footer > div > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > footer > div > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > footer > div > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > footer > div > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > footer > div > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > footer > div > button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

@media (max-width: 1023px) {
    html > body > footer > div > button {
        margin-bottom: 36px;
        margin-bottom: 48px;
    }
}

html > body > footer > div > p.address {
    margin-top: auto;
    margin-bottom: 32px;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 22px;
}

@media (max-width: 1279px) {
    html > body > footer > div > p.address {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > p.address {
        margin-bottom: 48px;
        font-size: 15px;
    }
}

html > body > footer > div > p.copyright,
html > body > footer > div > p.privacy,
html > body > footer > div > p.m18 {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 16px;
}

@media (max-width: 1023px) {
    html > body > footer > div > p.copyright,
    html > body > footer > div > p.privacy,
    html > body > footer > div > p.m18 {
        font-size: 12px;
        width: 100%;
    }
}

html > body > footer > div > p.copyright > a,
html > body > footer > div > p.privacy > a,
html > body > footer > div > p.m18 > a {
    width: fit-content;
    line-height: 1.2em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

@media (pointer: fine) {
    html > body > footer > div > p.copyright > a:hover,
    html > body > footer > div > p.privacy > a:hover,
    html > body > footer > div > p.m18 > a:hover {
        background-size: 100% 1px;
    }
}

html > body > footer > div > p.copyright {
    color: #a9abb7;
    margin-bottom: 12px;
}

html > body > footer > div > p.privacy {
    color: #37ea97;
}

@media (max-width: 1023px) {
    html > body > footer > div > p.privacy {
        margin-bottom: 4px;
    }
}

html > body > footer > div > p.m18 > a {
    color: #37ea97;
}

html > body > footer > div > p.m18 {
    color: #a9abb7;
}

html > body > footer > div > a {
    margin-bottom: 32px;
    width: calc(4.5 * var(--column-width) + 3.5 * var(--gutter));
    aspect-ratio: 3/1;
    background-image: url("/styles/images/icons/logo.svg");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}

/* body/footer/div/ul.departments.scss */
html > body > footer > div > ul.departments {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px var(--gutter);
}

@media (max-width: 940px) {
    html > body > footer > div > ul.departments {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 440px) and (max-width: 640px) {
    html > body > footer > div > ul.departments {
        grid-template-columns: 1fr 1fr;
    }
}

html > body > footer > div > ul.departments > li {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    html > body > footer > div > ul.departments > li > p.title {
        margin-block: 0 4px;
        width: 90%;
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }

@media (max-width: 1279px) {
    html > body > footer > div > ul.departments > li > p.title {
        font-size: 14px;
        line-height: 20px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.departments > li > p.title {
        font-size: 13px;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > footer > div > ul.departments > li > p.title {
        margin-bottom: 8px;
    }
}

html > body > footer > div > ul.departments > li > p:not(.title) {
    margin: 0;
    color: #37ea97;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    line-height: 1 !important;
}

@media (max-width: 1279px) {
    html > body > footer > div > ul.departments > li > p:not(.title) {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.departments > li > p:not(.title) {
        font-size: 15px;
    }
}

html > body > footer > div > ul.departments > li > p:not(.title) > a {
    width: fit-content;
    line-height: 1.2em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

@media (pointer: fine) {
    html > body > footer > div > ul.departments > li > p:not(.title) > a:hover {
        background-size: 100% 1px;
    }
}

html > body > footer > div > ul.departments > li > p:not(.title) > a {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

    html > body > footer > div > ul.departments > li > p:not(.title) > a > span.note {
        font-size: 11px;
        font-weight: 400;
        line-height: 16px;
    }

@media (max-width: 1279px) {
    html > body > footer > div > ul.departments > li > p:not(.title) > a > span.note {
        font-size: 9px;
        font-weight: 600;
        line-height: 14px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.departments > li > p:not(.title) > a > span.note {
        font-size: 8px;
        font-weight: 600;
        line-height: 12px;
    }
}

html > body > footer > div > ul.departments > li > p:not(.title) > a > span.note {
    line-height: 1 !important;
    opacity: 0.6;
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.departments {
        gap: 40px var(--gutter);
    }
}

/* body/footer/div/ul.social.scss */
html > body > footer > div > ul.social {
    margin-top: 56px;
    display: grid;
    gap: var(--gutter);
    color: #37ea97;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > footer > div > ul.social {
        font-size: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.social {
        font-size: 15px;
    }
}

html > body > footer > div > ul.social:has(li:nth-child(3)) {
    grid-template-columns: calc(var(--column-width) * 1.4 + var(--gutter)) calc(var(--column-width) * 1.6) calc(var(--column-width) * 1.9 + var(--gutter)) calc(var(--column-width) * 1.1);
}

html > body > footer > div > ul.social:has(li:nth-child(4)) {
    grid-template-columns: calc(var(--column-width) * 1.1 + var(--gutter)) calc(var(--column-width) * 1.9) calc(var(--column-width) * 1.9 + var(--gutter)) calc(var(--column-width) * 1.1);
}

@media (max-width: 1279px) {
    html > body > footer > div > ul.social:has(li:nth-child(3)) {
        grid-template-columns: 1fr 1fr 1fr !important;
    }

    html > body > footer > div > ul.social:has(li:nth-child(4)) {
        grid-template-columns: 1fr 1fr !important;
    }

    html > body > footer > div > ul.social > li.whatsapp-2 {
        grid-row: 2;
        grid-column: 2;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.social {
        margin-top: 72px;
        gap: 24px;
    }
}

html > body > footer > div > ul.social > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    line-height: 1.2em;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0 1px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

@media (pointer: fine) {
    html > body > footer > div > ul.social > li > a:hover {
        background-size: 100% 1px;
    }
}

html > body > footer > div > ul.social > li > a > small {
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > footer > div > ul.social > li > a > small {
        font-size: 9px;
        font-weight: 600;
        line-height: 14px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > div > ul.social > li > a > small {
        font-size: 8px;
        font-weight: 600;
        line-height: 12px;
    }
}

html > body > footer > div > ul.social > li > a > small {
    opacity: 0.6;
}

/* body/footer/nav/&.scss */
html > body > footer > nav {
    grid-row: 1;
    grid-column: 1;
    font-size: 28px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > footer > nav {
        font-size: 24px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > footer > nav {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > footer > nav > ul {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

    html > body > footer > nav > ul > li {
        transition: color 0.3s ease;
    }

        html > body > footer > nav > ul > li.current {
            color: #a9abb7;
            cursor: default;
        }

@media (pointer: fine) {
    html > body > footer > nav > ul > li:not(.current):hover {
        color: #37ea97;
    }
}

@media (max-width: 639px) {
    html > body > footer > nav > ul {
        gap: 24px;
    }
}

/* body/header/div.burger/&.scss */
html > body > header > div.burger {
    --max-height: max(70vh, 600px);
    --padding-top: 66px;
    --padding-bottom: 96px;
    position: absolute;
    top: 0;
    left: calc(-1 * var(--extra-margin) - var(--margin));
    display: grid;
    grid-template-columns: calc(6 * var(--column-width) + 5 * var(--gutter)) calc(4 * var(--column-width) + 3 * var(--gutter));
    gap: var(--gutter);
    width: calc(var(--full-width) + var(--extra-margin) * 2);
    max-height: var(--max-height);
    padding-top: calc(var(--header-height) + var(--padding-top));
    padding-bottom: var(--padding-bottom);
    padding-inline: calc(var(--extra-margin) + var(--margin) + 1 * var(--column-width) + 0 * var(--gutter) + var(--gutter));
    z-index: 1;
    background: linear-gradient(180deg, #3F434D 0%, #24262D 100%);
    color: #ffffff;
    transition: translate 0.3s ease, scale 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
    overflow: hidden;
    border-radius: 0 0 8px 8px;
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, 0px 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) 0px, calc(100% - 0px) calc(100% - 15.4px), calc(100% - 0px) calc(100% - 14px), calc(100% - 0px) calc(100% - 12.7px), calc(100% - 0px) calc(100% - 11.5px), calc(100% - 0px) calc(100% - 10.4px), calc(100% - 0.1px) calc(100% - 9.4px), calc(100% - 0.1px) calc(100% - 8.4px), calc(100% - 0.2px) calc(100% - 7.4px), calc(100% - 0.4px) calc(100% - 6.6px), calc(100% - 0.5px) calc(100% - 5.8px), calc(100% - 0.7px) calc(100% - 5.1px), calc(100% - 1px) calc(100% - 4.4px), calc(100% - 1.2px) calc(100% - 3.8px), calc(100% - 1.5px) calc(100% - 3.2px), calc(100% - 1.9px) calc(100% - 2.7px), calc(100% - 2.3px) calc(100% - 2.3px), calc(100% - 2.7px) calc(100% - 1.9px), calc(100% - 3.2px) calc(100% - 1.5px), calc(100% - 3.8px) calc(100% - 1.2px), calc(100% - 4.4px) calc(100% - 1px), calc(100% - 5.1px) calc(100% - 0.7px), calc(100% - 5.8px) calc(100% - 0.5px), calc(100% - 6.6px) calc(100% - 0.4px), calc(100% - 7.4px) calc(100% - 0.2px), calc(100% - 8.4px) calc(100% - 0.1px), calc(100% - 9.4px) calc(100% - 0.1px), calc(100% - 10.4px) calc(100% - 0px), calc(100% - 11.5px) calc(100% - 0px), calc(100% - 12.7px) calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), 14px calc(100% - 0px), 12.7px calc(100% - 0px), 11.5px calc(100% - 0px), 10.4px calc(100% - 0px), 9.4px calc(100% - 0.1px), 8.4px calc(100% - 0.1px), 7.4px calc(100% - 0.2px), 6.6px calc(100% - 0.4px), 5.8px calc(100% - 0.5px), 5.1px calc(100% - 0.7px), 4.4px calc(100% - 1px), 3.8px calc(100% - 1.2px), 3.2px calc(100% - 1.5px), 2.7px calc(100% - 1.9px), 2.3px calc(100% - 2.3px), 1.9px calc(100% - 2.7px), 1.5px calc(100% - 3.2px), 1.2px calc(100% - 3.8px), 1px calc(100% - 4.4px), 0.7px calc(100% - 5.1px), 0.5px calc(100% - 5.8px), 0.4px calc(100% - 6.6px), 0.2px calc(100% - 7.4px), 0.1px calc(100% - 8.4px), 0.1px calc(100% - 9.4px), 0px calc(100% - 10.4px), 0px calc(100% - 11.5px), 0px calc(100% - 12.7px), 0px calc(100% - 14px), 0px calc(100% - 15.4px));
}

@media (max-width: 1279px) {
    html > body > header > div.burger {
        --padding-bottom: 72px;
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger {
        grid-template-columns: calc(4 * var(--column-width) + 3 * var(--gutter)) calc(4 * var(--column-width) + 3 * var(--gutter));
        padding-inline: calc(var(--extra-margin) + var(--margin));
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger {
        --padding-top: 36px;
        --padding-bottom: 24px;
        grid-template-columns: 1fr 1.2fr;
        min-height: 70svh;
    }
}

html > body > header > div.burger::after {
    position: absolute;
    bottom: 12px;
    left: calc(var(--extra-margin) + var(--margin) + 3 * var(--column-width) + 2 * var(--gutter) + var(--gutter));
    display: block;
    width: calc(2 * var(--column-width) + 1 * var(--gutter));
    height: 4px;
    border-radius: 2px;
    background: #ffffff;
    opacity: 0.45;
}

@media (max-width: 1023px) {
    html > body > header > div.burger::after {
        content: "";
    }
}

/* body/header/div.burger/aside.scss */
html > body > header > div.burger > aside {
    position: absolute;
    top: -160px;
    right: calc(var(--extra-margin) - 640px);
    display: block;
    width: 1000px;
    aspect-ratio: 1;
    background-image: url("/styles/images/icons/green-circle.svg");
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    z-index: -1;
}

@media (max-width: 1279px) {
    html > body > header > div.burger > aside {
        width: 800px;
        right: calc(var(--extra-margin) - 520px);
        top: -50px;
        background-image: url("/styles/images/icons/green-circle-thin.svg");
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger > aside {
        width: 700px;
        right: calc(var(--extra-margin) - 440px);
        top: -30px;
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger > aside {
        right: unset;
        top: unset;
        left: -200px;
        bottom: -170px;
        width: 500px;
        rotate: -60deg;
    }
}

/* body/header/div.burger/div.contact.scss */
html > body > header > div.burger > div.contact {
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 64px;
}

@media (max-width: 639px) {
    html > body > header > div.burger > div.contact {
        padding-bottom: 1.42em;
    }
}

html > body > header > div.burger > div.contact > p {
    margin: 0;
}

    html > body > header > div.burger > div.contact > p.title {
        font-size: 28px;
        font-weight: 500;
        line-height: 28px;
    }

@media (max-width: 1279px) {
    html > body > header > div.burger > div.contact > p.title {
        font-size: 24px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger > div.contact > p.title {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger > div.contact > p.title {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
    }
}

html > body > header > div.burger > div.contact > p.phone {
    font-size: 44px;
    font-weight: 700;
    line-height: 44px;
}

html > body > header > div.burger > div.contact > p.phone {
    white-space: nowrap;
}

    html > body > header > div.burger > div.contact > p.phone > a {
        transition: color 0.3s ease;
    }

@media (pointer: fine) {
    html > body > header > div.burger > div.contact > p.phone > a:hover {
        color: #37ea97;
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger > div.contact > p.phone > a {
        color: #37ea97;
    }
}

@media (max-width: 1279px) {
    html > body > header > div.burger > div.contact > p.phone {
        font-size: 40px;
        line-height: 40px;
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger > div.contact > p.phone {
        font-size: 32px;
        line-height: 32px;
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger > div.contact > p.phone {
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #37ea97;
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger > div.contact {
        gap: 32px;
    }
}

@media (max-width: 639px) {
    html > body > header > div.burger > div.contact {
        gap: 8px;
        grid-row: 1/3;
        grid-column: 1;
    }
}

/* body/header/div.burger/div.mobile-buttons.scss */
html > body > header > div.burger > div.mobile-buttons {
    grid-row: 2;
    grid-column: 2;
    align-self: end;
    text-align: end;
    align-items: end;
    padding-bottom: 1.3em;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

    html > body > header > div.burger > div.mobile-buttons > button,
    html > body > header > div.burger > div.mobile-buttons > a {
        font-size: 15px;
        font-weight: 500;
        line-height: 15px;
    }

    html > body > header > div.burger > div.mobile-buttons > button,
    html > body > header > div.burger > div.mobile-buttons > a {
        display: flex;
        align-items: center;
        gap: 1em;
    }

        html > body > header > div.burger > div.mobile-buttons > button > svg,
        html > body > header > div.burger > div.mobile-buttons > a > svg {
            width: 1.5em;
            height: 1.5em;
        }

/* body/header/div.burger/nav.scss */
html > body > header > div.burger > nav {
    max-height: calc(var(--max-height) - var(--padding-top) - var(--padding-bottom));
}

    html > body > header > div.burger > nav > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > header > div.burger > nav > ul > li::before {
            content: none;
        }

    html > body > header > div.burger > nav > ul {
        font-size: 28px;
        font-weight: 500;
        line-height: 28px;
    }

@media (max-width: 1279px) {
    html > body > header > div.burger > nav > ul {
        font-size: 24px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > header > div.burger > nav > ul {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > header > div.burger > nav > ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    gap: 32px;
    max-height: 100%;
}

    html > body > header > div.burger > nav > ul > li:not(.current):not(.active) > a {
        transition: color 0.3s ease;
    }

@media (pointer: fine) {
    html > body > header > div.burger > nav > ul > li:not(.current):not(.active) > a:hover {
        color: #37ea97;
    }
}

html > body > header > div.burger > nav > ul > li.current, html > body > header > div.burger > nav > ul > li.active {
    cursor: default;
    pointer-events: none;
}

    html > body > header > div.burger > nav > ul > li.current > a, html > body > header > div.burger > nav > ul > li.active > a {
        color: #a9abb7;
    }

@media (max-width: 639px) {
    html > body > header > div.burger > nav {
        grid-row: 1;
        grid-column: 2;
        text-align: end;
    }

        html > body > header > div.burger > nav > ul {
            gap: 20px;
        }
}

/* body/header/nav/&.scss */
html > body > header > nav {
    border-radius: 8px;
    clip-path: polygon(0px 15.4px, 0px 14px, 0px 12.7px, 0px 11.5px, 0px 10.4px, 0.1px 9.4px, 0.1px 8.4px, 0.2px 7.4px, 0.4px 6.6px, 0.5px 5.8px, 0.7px 5.1px, 1px 4.4px, 1.2px 3.8px, 1.5px 3.2px, 1.9px 2.7px, 2.3px 2.3px, 2.7px 1.9px, 3.2px 1.5px, 3.8px 1.2px, 4.4px 1px, 5.1px 0.7px, 5.8px 0.5px, 6.6px 0.4px, 7.4px 0.2px, 8.4px 0.1px, 9.4px 0.1px, 10.4px 0px, 11.5px 0px, 12.7px 0px, 14px 0px, calc(100% - 14px) 0px, calc(100% - 12.7px) 0px, calc(100% - 11.5px) 0px, calc(100% - 10.4px) 0px, calc(100% - 9.4px) 0.1px, calc(100% - 8.4px) 0.1px, calc(100% - 7.4px) 0.2px, calc(100% - 6.6px) 0.4px, calc(100% - 5.8px) 0.5px, calc(100% - 5.1px) 0.7px, calc(100% - 4.4px) 1px, calc(100% - 3.8px) 1.2px, calc(100% - 3.2px) 1.5px, calc(100% - 2.7px) 1.9px, calc(100% - 2.3px) 2.3px, calc(100% - 1.9px) 2.7px, calc(100% - 1.5px) 3.2px, calc(100% - 1.2px) 3.8px, calc(100% - 1px) 4.4px, calc(100% - 0.7px) 5.1px, calc(100% - 0.5px) 5.8px, calc(100% - 0.4px) 6.6px, calc(100% - 0.2px) 7.4px, calc(100% - 0.1px) 8.4px, calc(100% - 0.1px) 9.4px, calc(100% - 0px) 10.4px, calc(100% - 0px) 11.5px, calc(100% - 0px) 12.7px, calc(100% - 0px) 14px, calc(100% - 0px) 15.4px, calc(100% - 0px) calc(100% - 15.4px), calc(100% - 0px) calc(100% - 14px), calc(100% - 0px) calc(100% - 12.7px), calc(100% - 0px) calc(100% - 11.5px), calc(100% - 0px) calc(100% - 10.4px), calc(100% - 0.1px) calc(100% - 9.4px), calc(100% - 0.1px) calc(100% - 8.4px), calc(100% - 0.2px) calc(100% - 7.4px), calc(100% - 0.4px) calc(100% - 6.6px), calc(100% - 0.5px) calc(100% - 5.8px), calc(100% - 0.7px) calc(100% - 5.1px), calc(100% - 1px) calc(100% - 4.4px), calc(100% - 1.2px) calc(100% - 3.8px), calc(100% - 1.5px) calc(100% - 3.2px), calc(100% - 1.9px) calc(100% - 2.7px), calc(100% - 2.3px) calc(100% - 2.3px), calc(100% - 2.7px) calc(100% - 1.9px), calc(100% - 3.2px) calc(100% - 1.5px), calc(100% - 3.8px) calc(100% - 1.2px), calc(100% - 4.4px) calc(100% - 1px), calc(100% - 5.1px) calc(100% - 0.7px), calc(100% - 5.8px) calc(100% - 0.5px), calc(100% - 6.6px) calc(100% - 0.4px), calc(100% - 7.4px) calc(100% - 0.2px), calc(100% - 8.4px) calc(100% - 0.1px), calc(100% - 9.4px) calc(100% - 0.1px), calc(100% - 10.4px) calc(100% - 0px), calc(100% - 11.5px) calc(100% - 0px), calc(100% - 12.7px) calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), 14px calc(100% - 0px), 12.7px calc(100% - 0px), 11.5px calc(100% - 0px), 10.4px calc(100% - 0px), 9.4px calc(100% - 0.1px), 8.4px calc(100% - 0.1px), 7.4px calc(100% - 0.2px), 6.6px calc(100% - 0.4px), 5.8px calc(100% - 0.5px), 5.1px calc(100% - 0.7px), 4.4px calc(100% - 1px), 3.8px calc(100% - 1.2px), 3.2px calc(100% - 1.5px), 2.7px calc(100% - 1.9px), 2.3px calc(100% - 2.3px), 1.9px calc(100% - 2.7px), 1.5px calc(100% - 3.2px), 1.2px calc(100% - 3.8px), 1px calc(100% - 4.4px), 0.7px calc(100% - 5.1px), 0.5px calc(100% - 5.8px), 0.4px calc(100% - 6.6px), 0.2px calc(100% - 7.4px), 0.1px calc(100% - 8.4px), 0.1px calc(100% - 9.4px), 0px calc(100% - 10.4px), 0px calc(100% - 11.5px), 0px calc(100% - 12.7px), 0px calc(100% - 14px), 0px calc(100% - 15.4px));
    grid-column: 2;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    align-items: center;
    padding-inline: 28px;
    background: #24262d;
    color: #ffffff;
    z-index: 1000;
}

@media (max-width: 1023px) {
    html > body > header > nav {
        padding-inline: 16px;
    }
}

@media (max-width: 639px) {
    html > body > header > nav {
        grid-template-columns: 1fr auto 1fr;
    }

        html > body > header > nav > div.buttons:not(:has(.burger-open)) {
            display: none !important;
        }

        html > body > header > nav > a.logo {
            grid-column: 1;
            grid-row: 1;
        }

            html > body > header > nav > a.logo > svg {
                width: 65px;
            }
}

@media (max-width: 639px) and (max-width: 380px) {
    html > body > header > nav > a.logo > svg {
        width: 55px;
    }
}

@media (max-width: 639px) {
    html > body > header > nav > div.toggle {
        grid-column: 2;
        grid-row: 1;
    }
}

/* body/header/nav/a.logo.scss */
html > body > header > nav > a.logo {
    justify-self: center;
    display: block;
    height: 28px;
}

    html > body > header > nav > a.logo > svg {
        width: 150px;
        height: 100%;
    }

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > header > nav > a.logo {
        height: 26px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > header > nav > a.logo {
        height: 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > header > nav > a.logo {
        height: 24px;
    }
}

@media (max-width: 639px) {
    html > body > header > nav > a.logo {
        height: 20px;
    }

        html > body > header > nav > a.logo > svg {
            width: 80px;
        }

    html > body > header > nav > a.logo {
        justify-self: unset;
    }
}

@media (max-width: 400px) {
    html > body > header > nav > a.logo > svg {
        width: 60px;
    }
}

/* body/header/nav/div.buttons.scss */
html > body > header > nav > div.buttons {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 10px;
}

    html > body > header > nav > div.buttons > .contacts {
        font-size: 18px;
        font-weight: 500;
        line-height: 106%;
    }

@media (max-width: 1023px) {
    html > body > header > nav > div.buttons > .contacts {
        font-size: 12px;
    }
}

html > body > header > nav > div.buttons > .contacts {
    transition: color 0.3s ease;
}

@media (pointer: fine) {
    html > body > header > nav > div.buttons > .contacts:hover {
        color: #37ea97;
    }
}

html > body > header > nav > div.buttons > .contacts {
    display: block;
    margin-inline-end: 8px;
    width: fit-content;
}

html > body > header > nav > div.buttons > button, html > body > header > nav > div.buttons > a[href="/cart/"], html > body > header > nav > div.buttons > a.login {
    display: block;
    width: 46px;
    height: 46px;
}

    html > body > header > nav > div.buttons > button:has(svg), html > body > header > nav > div.buttons > a[href="/cart/"]:has(svg), html > body > header > nav > div.buttons > a.login:has(svg) {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    html > body > header > nav > div.buttons > button > svg, html > body > header > nav > div.buttons > a[href="/cart/"] > svg, html > body > header > nav > div.buttons > a.login > svg {
        width: 65%;
        height: 65%;
    }

        html > body > header > nav > div.buttons > button > svg path, html > body > header > nav > div.buttons > a[href="/cart/"] > svg path, html > body > header > nav > div.buttons > a.login > svg path {
            transition: fill 0.3s ease;
        }

@media (pointer: fine) {
    html > body > header > nav > div.buttons > button:hover > svg path, html > body > header > nav > div.buttons > a[href="/cart/"]:hover > svg path, html > body > header > nav > div.buttons > a.login:hover > svg path {
        fill: #37ea97;
    }
}

@media (max-width: 1023px) {
    html > body > header > nav > div.buttons > button, html > body > header > nav > div.buttons > a[href="/cart/"], html > body > header > nav > div.buttons > a.login {
        width: 40px;
        height: 40px;
    }
}

html > body > header > nav > div.buttons > .contacts {
    transition: color 0.3s ease;
}

@media (pointer: fine) {
    html > body > header > nav > div.buttons > .contacts:hover {
        color: #37ea97;
    }
}

html > body > header > nav > div.buttons > button.burger-open {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: end;
    margin-right: 16px;
    transition: opacity 0.3s ease;
}

    html > body > header > nav > div.buttons > button.burger-open > svg {
        width: 50%;
        height: 50%;
    }

        html > body > header > nav > div.buttons > button.burger-open > svg > path {
            transition: fill 0.3s ease;
        }

@media (pointer: fine) {
    html > body > header > nav > div.buttons > button.burger-open:hover > svg > path {
        fill: #37ea97;
    }
}

@media (max-width: 639px) {
    html > body > header > nav > div.buttons > button.burger-open {
        margin-right: 0;
        margin-left: 16px;
    }
}

/* body/header/nav/div.toggle.scss */
html > body > header > nav > div.toggle {
    justify-self: start;
    height: 24px;
    display: flex;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    background: #777a87;
    transition: translate 0.3s ease, background-color 0.3s ease;
}

@media (pointer: fine) {
    html > body > header > nav > div.toggle:has(a[href]:hover) {
        background: #656770;
    }
}

html > body > header > nav > div.toggle > a {
    padding-inline: 14px;
    border-radius: 12px;
    display: flex;
    gap: 12px;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

@media (max-width: 639px) {
    html > body > header > nav > div.toggle > a {
        gap: 8px;
    }
}

html > body > header > nav > div.toggle > a:not([href]) {
    background: var(--accent);
}

@media (max-width: 1279px) {
    html > body > header > nav > div.toggle > a {
        padding-inline: 12px;
    }
}

@media (max-width: 639px) {
    html > body > header > nav > div.toggle > a {
        padding-inline: 10px;
    }
}

html > body > header > nav > div.toggle > a > span {
    line-height: 23px;
}

@media (max-width: 1279px) {
    html > body > header > nav > div.toggle > a > span {
        line-height: 19px;
    }
}

@media (max-width: 639px) {
    html > body > header > nav > div.toggle {
        justify-self: end;
    }
}

@media (max-width: 1279px) {
    html > body > header > nav > div.toggle {
        font-size: 12px;
        height: 20px;
    }
}

/* body/main/!.form-lk/&.scss */
html > body > main .form-lk {
    padding-block: 112px;
    min-height: 100vh;
    width: 100vw;
    background-color: #24262d;
    background-image: url("/styles/images/form/circle.svg");
    background-size: 1027px 1032px;
    background-position: calc(100% + 680px) -112px;
    background-repeat: no-repeat;
}

@media (max-width: 1511px) {
    html > body > main .form-lk {
        background-position: calc(100% + 700px) -142px;
    }
}

@media (max-width: 1279px) {
    html > body > main .form-lk {
        background-size: 980px 980px;
        background-position: calc(100% + 700px) -92px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk {
        background-size: 120%;
        background-position: 60% calc(100% + 84vw);
        background-image: none;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk {
        background-position: 60% calc(100% + 76vw);
    }
}

/* body/main/!dialog/!button.close.scss */
html > body > main dialog button.close {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 16px;
    right: 80px;
}

    html > body > main dialog button.close::before {
        display: block;
        background: url("/styles/images/icons/x.svg");
        width: 46px;
        height: 46px;
        content: "";
        filter: invert(100%);
    }

@media (max-width: 1279px) {
    html > body > main dialog button.close {
        width: 50px;
        height: 50px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog button.close {
        right: var(--margin);
        width: 44px;
        height: 44px;
    }
}

/* body/main/!div.code-from/&.scss */
html > body > main div.code-from button.back {
    margin-inline: auto;
    margin-top: 32px;
}

@media (max-width: 1511px) {
    html > body > main div.code-from button.back {
        margin-top: 20px;
    }
}

html > body > main div.code-from button.repeat-code {
    margin-inline: auto;
}

    html > body > main div.code-from button.repeat-code:disabled {
        opacity: 0.5;
    }

/* body/main/!div.code-from/form.error.scss */
html > body > main div.code-from > form.error > label > div span {
    background-color: #FFEEF5 !important;
}

html > body > main div.code-from > form.error > label input.code {
    color: #a9abb7;
}

/* body/main/!div.submenu/&.scss */
html > body > main div.submenu {
    position: relative;
    --hover-color: #dde0ee;
}

@media (max-width: 1023px) {
    html > body > main div.submenu {
        max-width: 100vw;
        mask-image: linear-gradient(to right, transparent, black var(--margin), black calc(100% - 40px), transparent);
        overflow-x: scroll;
    }

        html > body > main div.submenu > menu.main {
            padding-inline: var(--margin);
        }

            html > body > main div.submenu > menu.main > li:first-child {
                padding-left: 8px;
            }

            html > body > main div.submenu > menu.main:has(li.etc) > li:nth-last-child(2) {
                padding-right: 24px;
            }

            html > body > main div.submenu > menu.main:not(:has(li.etc)) > li:last-child {
                padding-right: 24px;
            }

        html > body > main div.submenu > menu.main {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            html > body > main div.submenu > menu.main::-webkit-scrollbar {
                display: none;
            }
}

@media (min-width: 1024px) {
    html > body > main div.submenu:has(menu.expandable li.current) menu.main li:nth-child(n+4):not(.etc):not(.current) {
        display: none;
    }

    html > body > main div.submenu:has(menu.expandable li.current) menu.main > li.current {
        display: flex !important;
    }

    html > body > main div.submenu:not(:has(menu.expandable li.current)) menu.expandable li:first-child {
        display: none;
    }
}

/* body/main/!section.advantages/&.scss */
html > body > main section.advantages[data-image="2"]::before {
    background-image: url("/styles/images/background/2.webp");
}

html > body > main section.advantages[data-image="3"]::before {
    background-image: url("/styles/images/background/3.webp");
}

html > body > main section.advantages::before {
    display: block;
    width: min(100vw, 2000px);
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-image: url("/styles/images/background/1.webp");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: repeat-y;
    transition: width 0.3s ease, height 0.3s ease, translate 0.3s ease;
    content: "";
}

/* body/main/!section.advantages/ul.scss */
html > body > main section.advantages > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.advantages > ul > li::before {
        content: none;
    }

html > body > main section.advantages > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: var(--gutter);
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 639px) {
    html > body > main section.advantages > ul {
        grid-template-columns: 1fr;
    }
}

html > body > main section.advantages > ul > li {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(78, 93, 156, 0.07);
    border-radius: 8px;
    clip-path: polygon(0px 15.4px, 0px 14px, 0px 12.7px, 0px 11.5px, 0px 10.4px, 0.1px 9.4px, 0.1px 8.4px, 0.2px 7.4px, 0.4px 6.6px, 0.5px 5.8px, 0.7px 5.1px, 1px 4.4px, 1.2px 3.8px, 1.5px 3.2px, 1.9px 2.7px, 2.3px 2.3px, 2.7px 1.9px, 3.2px 1.5px, 3.8px 1.2px, 4.4px 1px, 5.1px 0.7px, 5.8px 0.5px, 6.6px 0.4px, 7.4px 0.2px, 8.4px 0.1px, 9.4px 0.1px, 10.4px 0px, 11.5px 0px, 12.7px 0px, 14px 0px, calc(100% - 14px) 0px, calc(100% - 12.7px) 0px, calc(100% - 11.5px) 0px, calc(100% - 10.4px) 0px, calc(100% - 9.4px) 0.1px, calc(100% - 8.4px) 0.1px, calc(100% - 7.4px) 0.2px, calc(100% - 6.6px) 0.4px, calc(100% - 5.8px) 0.5px, calc(100% - 5.1px) 0.7px, calc(100% - 4.4px) 1px, calc(100% - 3.8px) 1.2px, calc(100% - 3.2px) 1.5px, calc(100% - 2.7px) 1.9px, calc(100% - 2.3px) 2.3px, calc(100% - 1.9px) 2.7px, calc(100% - 1.5px) 3.2px, calc(100% - 1.2px) 3.8px, calc(100% - 1px) 4.4px, calc(100% - 0.7px) 5.1px, calc(100% - 0.5px) 5.8px, calc(100% - 0.4px) 6.6px, calc(100% - 0.2px) 7.4px, calc(100% - 0.1px) 8.4px, calc(100% - 0.1px) 9.4px, calc(100% - 0px) 10.4px, calc(100% - 0px) 11.5px, calc(100% - 0px) 12.7px, calc(100% - 0px) 14px, calc(100% - 0px) 15.4px, calc(100% - 0px) calc(100% - 15.4px), calc(100% - 0px) calc(100% - 14px), calc(100% - 0px) calc(100% - 12.7px), calc(100% - 0px) calc(100% - 11.5px), calc(100% - 0px) calc(100% - 10.4px), calc(100% - 0.1px) calc(100% - 9.4px), calc(100% - 0.1px) calc(100% - 8.4px), calc(100% - 0.2px) calc(100% - 7.4px), calc(100% - 0.4px) calc(100% - 6.6px), calc(100% - 0.5px) calc(100% - 5.8px), calc(100% - 0.7px) calc(100% - 5.1px), calc(100% - 1px) calc(100% - 4.4px), calc(100% - 1.2px) calc(100% - 3.8px), calc(100% - 1.5px) calc(100% - 3.2px), calc(100% - 1.9px) calc(100% - 2.7px), calc(100% - 2.3px) calc(100% - 2.3px), calc(100% - 2.7px) calc(100% - 1.9px), calc(100% - 3.2px) calc(100% - 1.5px), calc(100% - 3.8px) calc(100% - 1.2px), calc(100% - 4.4px) calc(100% - 1px), calc(100% - 5.1px) calc(100% - 0.7px), calc(100% - 5.8px) calc(100% - 0.5px), calc(100% - 6.6px) calc(100% - 0.4px), calc(100% - 7.4px) calc(100% - 0.2px), calc(100% - 8.4px) calc(100% - 0.1px), calc(100% - 9.4px) calc(100% - 0.1px), calc(100% - 10.4px) calc(100% - 0px), calc(100% - 11.5px) calc(100% - 0px), calc(100% - 12.7px) calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), 14px calc(100% - 0px), 12.7px calc(100% - 0px), 11.5px calc(100% - 0px), 10.4px calc(100% - 0px), 9.4px calc(100% - 0.1px), 8.4px calc(100% - 0.1px), 7.4px calc(100% - 0.2px), 6.6px calc(100% - 0.4px), 5.8px calc(100% - 0.5px), 5.1px calc(100% - 0.7px), 4.4px calc(100% - 1px), 3.8px calc(100% - 1.2px), 3.2px calc(100% - 1.5px), 2.7px calc(100% - 1.9px), 2.3px calc(100% - 2.3px), 1.9px calc(100% - 2.7px), 1.5px calc(100% - 3.2px), 1.2px calc(100% - 3.8px), 1px calc(100% - 4.4px), 0.7px calc(100% - 5.1px), 0.5px calc(100% - 5.8px), 0.4px calc(100% - 6.6px), 0.2px calc(100% - 7.4px), 0.1px calc(100% - 8.4px), 0.1px calc(100% - 9.4px), 0px calc(100% - 10.4px), 0px calc(100% - 11.5px), 0px calc(100% - 12.7px), 0px calc(100% - 14px), 0px calc(100% - 15.4px));
}

@media (min-width: 1512px) {
    html > body > main section.advantages > ul > li {
        padding: 32px 32px 32px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.advantages > ul > li {
        padding: 28px 28px 20px 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.advantages > ul > li {
        padding: 24px 24px 16px 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.advantages > ul > li {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.advantages > ul > li {
        padding: 12px 8px 8px 8px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul > li {
        flex-direction: row;
    }

        html > body > main section.advantages > ul > li > h3 {
            flex-shrink: 1;
            max-width: 60%;
        }

        html > body > main section.advantages > ul > li > aside {
            flex-shrink: 0;
            width: 64px;
        }
}

@media (min-width: 1024px) {
    html > body > main section.advantages > ul > li {
        min-height: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

html > body > main section.advantages > ul > li::before {
    content: none !important;
}

html > body > main section.advantages > ul > li > h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.advantages > ul > li > h3 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul > li > h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

html > body > main section.advantages > ul > li > h3 {
    margin: 0;
}

html > body > main section.advantages > ul > li > :not(h3) {
    color: #777a87;
    font-weight: 500;
}

html > body > main section.advantages > ul > li:not(:has(aside)) {
    justify-content: start;
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul > li:not(:has(aside)) {
        flex-direction: column;
    }
}

html > body > main section.advantages > ul > li p {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.advantages > ul > li p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul > li p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.advantages > ul > li p {
    margin-bottom: 0;
}

@media (min-width: 1512px) {
    html > body > main section.advantages > ul > li p {
        margin-top: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.advantages > ul > li p {
        margin-top: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.advantages > ul > li p {
        margin-top: 8px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.advantages > ul > li p {
        margin-top: 8px;
    }
}

@media (max-width: 639px) {
    html > body > main section.advantages > ul > li p {
        margin-top: 8px;
    }
}

html > body > main section.advantages > ul > li > ul {
    padding-left: 32px;
}

    html > body > main section.advantages > ul > li > ul li::before {
        translate: -20px calc(0.5em - 2px);
        width: 8px;
        height: 8px;
    }

html > body > main section.advantages > ul > li > aside {
    align-self: end;
    display: block;
    width: 145px;
    aspect-ratio: 1;
    border-radius: 26px;
    clip-path: polygon(0px 50.1px, 0px 45.7px, 0px 41.5px, 0px 37.6px, 0.2px 34px, 0.3px 30.5px, 0.6px 27.3px, 0.9px 24.3px, 1.3px 21.5px, 1.8px 19px, 2.5px 16.6px, 3.2px 14.4px, 4.1px 12.5px, 5.1px 10.7px, 6.3px 9px, 7.6px 7.6px, 9px 6.3px, 10.7px 5.1px, 12.5px 4.1px, 14.4px 3.2px, 16.6px 2.5px, 19px 1.8px, 21.5px 1.3px, 24.3px 0.9px, 27.3px 0.6px, 30.5px 0.3px, 34px 0.2px, 37.6px 0px, 41.5px 0px, 45.7px 0px, calc(100% - 45.7px) 0px, calc(100% - 41.5px) 0px, calc(100% - 37.6px) 0px, calc(100% - 34px) 0.2px, calc(100% - 30.5px) 0.3px, calc(100% - 27.3px) 0.6px, calc(100% - 24.3px) 0.9px, calc(100% - 21.5px) 1.3px, calc(100% - 19px) 1.8px, calc(100% - 16.6px) 2.5px, calc(100% - 14.4px) 3.2px, calc(100% - 12.5px) 4.1px, calc(100% - 10.7px) 5.1px, calc(100% - 9px) 6.3px, calc(100% - 7.6px) 7.6px, calc(100% - 6.3px) 9px, calc(100% - 5.1px) 10.7px, calc(100% - 4.1px) 12.5px, calc(100% - 3.2px) 14.4px, calc(100% - 2.5px) 16.6px, calc(100% - 1.8px) 19px, calc(100% - 1.3px) 21.5px, calc(100% - 0.9px) 24.3px, calc(100% - 0.6px) 27.3px, calc(100% - 0.3px) 30.5px, calc(100% - 0.2px) 34px, calc(100% - 0px) 37.6px, calc(100% - 0px) 41.5px, calc(100% - 0px) 45.7px, calc(100% - 0px) 50.1px, calc(100% - 0px) calc(100% - 50.1px), calc(100% - 0px) calc(100% - 45.7px), calc(100% - 0px) calc(100% - 41.5px), calc(100% - 0px) calc(100% - 37.6px), calc(100% - 0.2px) calc(100% - 34px), calc(100% - 0.3px) calc(100% - 30.5px), calc(100% - 0.6px) calc(100% - 27.3px), calc(100% - 0.9px) calc(100% - 24.3px), calc(100% - 1.3px) calc(100% - 21.5px), calc(100% - 1.8px) calc(100% - 19px), calc(100% - 2.5px) calc(100% - 16.6px), calc(100% - 3.2px) calc(100% - 14.4px), calc(100% - 4.1px) calc(100% - 12.5px), calc(100% - 5.1px) calc(100% - 10.7px), calc(100% - 6.3px) calc(100% - 9px), calc(100% - 7.6px) calc(100% - 7.6px), calc(100% - 9px) calc(100% - 6.3px), calc(100% - 10.7px) calc(100% - 5.1px), calc(100% - 12.5px) calc(100% - 4.1px), calc(100% - 14.4px) calc(100% - 3.2px), calc(100% - 16.6px) calc(100% - 2.5px), calc(100% - 19px) calc(100% - 1.8px), calc(100% - 21.5px) calc(100% - 1.3px), calc(100% - 24.3px) calc(100% - 0.9px), calc(100% - 27.3px) calc(100% - 0.6px), calc(100% - 30.5px) calc(100% - 0.3px), calc(100% - 34px) calc(100% - 0.2px), calc(100% - 37.6px) calc(100% - 0px), calc(100% - 41.5px) calc(100% - 0px), calc(100% - 45.7px) calc(100% - 0px), 45.7px calc(100% - 0px), 41.5px calc(100% - 0px), 37.6px calc(100% - 0px), 34px calc(100% - 0.2px), 30.5px calc(100% - 0.3px), 27.3px calc(100% - 0.6px), 24.3px calc(100% - 0.9px), 21.5px calc(100% - 1.3px), 19px calc(100% - 1.8px), 16.6px calc(100% - 2.5px), 14.4px calc(100% - 3.2px), 12.5px calc(100% - 4.1px), 10.7px calc(100% - 5.1px), 9px calc(100% - 6.3px), 7.6px calc(100% - 7.6px), 6.3px calc(100% - 9px), 5.1px calc(100% - 10.7px), 4.1px calc(100% - 12.5px), 3.2px calc(100% - 14.4px), 2.5px calc(100% - 16.6px), 1.8px calc(100% - 19px), 1.3px calc(100% - 21.5px), 0.9px calc(100% - 24.3px), 0.6px calc(100% - 27.3px), 0.3px calc(100% - 30.5px), 0.2px calc(100% - 34px), 0px calc(100% - 37.6px), 0px calc(100% - 41.5px), 0px calc(100% - 45.7px), 0px calc(100% - 50.1px));
}

    html > body > main section.advantages > ul > li > aside > img {
        display: block;
        width: 100%;
        height: 100%;
    }

@media (max-width: 1511px) {
    html > body > main section.advantages > ul > li > aside {
        border-radius: 22px;
        clip-path: polygon(0px 42.4px, 0px 38.7px, 0px 35.1px, 0px 31.8px, 0.1px 28.7px, 0.3px 25.8px, 0.5px 23.1px, 0.8px 20.6px, 1.1px 18.2px, 1.6px 16px, 2.1px 14px, 2.7px 12.2px, 3.5px 10.5px, 4.3px 9px, 5.3px 7.6px, 6.4px 6.4px, 7.6px 5.3px, 9px 4.3px, 10.5px 3.5px, 12.2px 2.7px, 14px 2.1px, 16px 1.6px, 18.2px 1.1px, 20.6px 0.8px, 23.1px 0.5px, 25.8px 0.3px, 28.7px 0.1px, 31.8px 0px, 35.1px 0px, 38.7px 0px, calc(100% - 38.7px) 0px, calc(100% - 35.1px) 0px, calc(100% - 31.8px) 0px, calc(100% - 28.7px) 0.1px, calc(100% - 25.8px) 0.3px, calc(100% - 23.1px) 0.5px, calc(100% - 20.6px) 0.8px, calc(100% - 18.2px) 1.1px, calc(100% - 16px) 1.6px, calc(100% - 14px) 2.1px, calc(100% - 12.2px) 2.7px, calc(100% - 10.5px) 3.5px, calc(100% - 9px) 4.3px, calc(100% - 7.6px) 5.3px, calc(100% - 6.4px) 6.4px, calc(100% - 5.3px) 7.6px, calc(100% - 4.3px) 9px, calc(100% - 3.5px) 10.5px, calc(100% - 2.7px) 12.2px, calc(100% - 2.1px) 14px, calc(100% - 1.6px) 16px, calc(100% - 1.1px) 18.2px, calc(100% - 0.8px) 20.6px, calc(100% - 0.5px) 23.1px, calc(100% - 0.3px) 25.8px, calc(100% - 0.1px) 28.7px, calc(100% - 0px) 31.8px, calc(100% - 0px) 35.1px, calc(100% - 0px) 38.7px, calc(100% - 0px) 42.4px, calc(100% - 0px) calc(100% - 42.4px), calc(100% - 0px) calc(100% - 38.7px), calc(100% - 0px) calc(100% - 35.1px), calc(100% - 0px) calc(100% - 31.8px), calc(100% - 0.1px) calc(100% - 28.7px), calc(100% - 0.3px) calc(100% - 25.8px), calc(100% - 0.5px) calc(100% - 23.1px), calc(100% - 0.8px) calc(100% - 20.6px), calc(100% - 1.1px) calc(100% - 18.2px), calc(100% - 1.6px) calc(100% - 16px), calc(100% - 2.1px) calc(100% - 14px), calc(100% - 2.7px) calc(100% - 12.2px), calc(100% - 3.5px) calc(100% - 10.5px), calc(100% - 4.3px) calc(100% - 9px), calc(100% - 5.3px) calc(100% - 7.6px), calc(100% - 6.4px) calc(100% - 6.4px), calc(100% - 7.6px) calc(100% - 5.3px), calc(100% - 9px) calc(100% - 4.3px), calc(100% - 10.5px) calc(100% - 3.5px), calc(100% - 12.2px) calc(100% - 2.7px), calc(100% - 14px) calc(100% - 2.1px), calc(100% - 16px) calc(100% - 1.6px), calc(100% - 18.2px) calc(100% - 1.1px), calc(100% - 20.6px) calc(100% - 0.8px), calc(100% - 23.1px) calc(100% - 0.5px), calc(100% - 25.8px) calc(100% - 0.3px), calc(100% - 28.7px) calc(100% - 0.1px), calc(100% - 31.8px) calc(100% - 0px), calc(100% - 35.1px) calc(100% - 0px), calc(100% - 38.7px) calc(100% - 0px), 38.7px calc(100% - 0px), 35.1px calc(100% - 0px), 31.8px calc(100% - 0px), 28.7px calc(100% - 0.1px), 25.8px calc(100% - 0.3px), 23.1px calc(100% - 0.5px), 20.6px calc(100% - 0.8px), 18.2px calc(100% - 1.1px), 16px calc(100% - 1.6px), 14px calc(100% - 2.1px), 12.2px calc(100% - 2.7px), 10.5px calc(100% - 3.5px), 9px calc(100% - 4.3px), 7.6px calc(100% - 5.3px), 6.4px calc(100% - 6.4px), 5.3px calc(100% - 7.6px), 4.3px calc(100% - 9px), 3.5px calc(100% - 10.5px), 2.7px calc(100% - 12.2px), 2.1px calc(100% - 14px), 1.6px calc(100% - 16px), 1.1px calc(100% - 18.2px), 0.8px calc(100% - 20.6px), 0.5px calc(100% - 23.1px), 0.3px calc(100% - 25.8px), 0.1px calc(100% - 28.7px), 0px calc(100% - 31.8px), 0px calc(100% - 35.1px), 0px calc(100% - 38.7px), 0px calc(100% - 42.4px));
        width: 50%;
    }
}

@media (max-width: 1279px) {
    html > body > main section.advantages > ul > li > aside {
        border-radius: 18px;
        clip-path: polygon(0px 34.7px, 0px 31.6px, 0px 28.7px, 0px 26px, 0.1px 23.5px, 0.2px 21.1px, 0.4px 18.9px, 0.6px 16.8px, 0.9px 14.9px, 1.3px 13.1px, 1.7px 11.5px, 2.2px 10px, 2.8px 8.6px, 3.5px 7.4px, 4.3px 6.2px, 5.2px 5.2px, 6.2px 4.3px, 7.4px 3.5px, 8.6px 2.8px, 10px 2.2px, 11.5px 1.7px, 13.1px 1.3px, 14.9px 0.9px, 16.8px 0.6px, 18.9px 0.4px, 21.1px 0.2px, 23.5px 0.1px, 26px 0px, 28.7px 0px, 31.6px 0px, calc(100% - 31.6px) 0px, calc(100% - 28.7px) 0px, calc(100% - 26px) 0px, calc(100% - 23.5px) 0.1px, calc(100% - 21.1px) 0.2px, calc(100% - 18.9px) 0.4px, calc(100% - 16.8px) 0.6px, calc(100% - 14.9px) 0.9px, calc(100% - 13.1px) 1.3px, calc(100% - 11.5px) 1.7px, calc(100% - 10px) 2.2px, calc(100% - 8.6px) 2.8px, calc(100% - 7.4px) 3.5px, calc(100% - 6.2px) 4.3px, calc(100% - 5.2px) 5.2px, calc(100% - 4.3px) 6.2px, calc(100% - 3.5px) 7.4px, calc(100% - 2.8px) 8.6px, calc(100% - 2.2px) 10px, calc(100% - 1.7px) 11.5px, calc(100% - 1.3px) 13.1px, calc(100% - 0.9px) 14.9px, calc(100% - 0.6px) 16.8px, calc(100% - 0.4px) 18.9px, calc(100% - 0.2px) 21.1px, calc(100% - 0.1px) 23.5px, calc(100% - 0px) 26px, calc(100% - 0px) 28.7px, calc(100% - 0px) 31.6px, calc(100% - 0px) 34.7px, calc(100% - 0px) calc(100% - 34.7px), calc(100% - 0px) calc(100% - 31.6px), calc(100% - 0px) calc(100% - 28.7px), calc(100% - 0px) calc(100% - 26px), calc(100% - 0.1px) calc(100% - 23.5px), calc(100% - 0.2px) calc(100% - 21.1px), calc(100% - 0.4px) calc(100% - 18.9px), calc(100% - 0.6px) calc(100% - 16.8px), calc(100% - 0.9px) calc(100% - 14.9px), calc(100% - 1.3px) calc(100% - 13.1px), calc(100% - 1.7px) calc(100% - 11.5px), calc(100% - 2.2px) calc(100% - 10px), calc(100% - 2.8px) calc(100% - 8.6px), calc(100% - 3.5px) calc(100% - 7.4px), calc(100% - 4.3px) calc(100% - 6.2px), calc(100% - 5.2px) calc(100% - 5.2px), calc(100% - 6.2px) calc(100% - 4.3px), calc(100% - 7.4px) calc(100% - 3.5px), calc(100% - 8.6px) calc(100% - 2.8px), calc(100% - 10px) calc(100% - 2.2px), calc(100% - 11.5px) calc(100% - 1.7px), calc(100% - 13.1px) calc(100% - 1.3px), calc(100% - 14.9px) calc(100% - 0.9px), calc(100% - 16.8px) calc(100% - 0.6px), calc(100% - 18.9px) calc(100% - 0.4px), calc(100% - 21.1px) calc(100% - 0.2px), calc(100% - 23.5px) calc(100% - 0.1px), calc(100% - 26px) calc(100% - 0px), calc(100% - 28.7px) calc(100% - 0px), calc(100% - 31.6px) calc(100% - 0px), 31.6px calc(100% - 0px), 28.7px calc(100% - 0px), 26px calc(100% - 0px), 23.5px calc(100% - 0.1px), 21.1px calc(100% - 0.2px), 18.9px calc(100% - 0.4px), 16.8px calc(100% - 0.6px), 14.9px calc(100% - 0.9px), 13.1px calc(100% - 1.3px), 11.5px calc(100% - 1.7px), 10px calc(100% - 2.2px), 8.6px calc(100% - 2.8px), 7.4px calc(100% - 3.5px), 6.2px calc(100% - 4.3px), 5.2px calc(100% - 5.2px), 4.3px calc(100% - 6.2px), 3.5px calc(100% - 7.4px), 2.8px calc(100% - 8.6px), 2.2px calc(100% - 10px), 1.7px calc(100% - 11.5px), 1.3px calc(100% - 13.1px), 0.9px calc(100% - 14.9px), 0.6px calc(100% - 16.8px), 0.4px calc(100% - 18.9px), 0.2px calc(100% - 21.1px), 0.1px calc(100% - 23.5px), 0px calc(100% - 26px), 0px calc(100% - 28.7px), 0px calc(100% - 31.6px), 0px calc(100% - 34.7px));
    }
}

@media (max-width: 1023px) {
    html > body > main section.advantages > ul > li > aside {
        border-radius: 12px;
        clip-path: polygon(0px 23.1px, 0px 21.1px, 0px 19.1px, 0px 17.3px, 0px 15.6px, 0.1px 14.1px, 0.2px 12.6px, 0.4px 11.2px, 0.6px 9.9px, 0.8px 8.7px, 1.1px 7.6px, 1.5px 6.6px, 1.9px 5.7px, 2.3px 4.9px, 2.9px 4.1px, 3.5px 3.5px, 4.1px 2.9px, 4.9px 2.3px, 5.7px 1.9px, 6.6px 1.5px, 7.6px 1.1px, 8.7px 0.8px, 9.9px 0.6px, 11.2px 0.4px, 12.6px 0.2px, 14.1px 0.1px, 15.6px 0px, 17.3px 0px, 19.1px 0px, 21.1px 0px, calc(100% - 21.1px) 0px, calc(100% - 19.1px) 0px, calc(100% - 17.3px) 0px, calc(100% - 15.6px) 0px, calc(100% - 14.1px) 0.1px, calc(100% - 12.6px) 0.2px, calc(100% - 11.2px) 0.4px, calc(100% - 9.9px) 0.6px, calc(100% - 8.7px) 0.8px, calc(100% - 7.6px) 1.1px, calc(100% - 6.6px) 1.5px, calc(100% - 5.7px) 1.9px, calc(100% - 4.9px) 2.3px, calc(100% - 4.1px) 2.9px, calc(100% - 3.5px) 3.5px, calc(100% - 2.9px) 4.1px, calc(100% - 2.3px) 4.9px, calc(100% - 1.9px) 5.7px, calc(100% - 1.5px) 6.6px, calc(100% - 1.1px) 7.6px, calc(100% - 0.8px) 8.7px, calc(100% - 0.6px) 9.9px, calc(100% - 0.4px) 11.2px, calc(100% - 0.2px) 12.6px, calc(100% - 0.1px) 14.1px, calc(100% - 0px) 15.6px, calc(100% - 0px) 17.3px, calc(100% - 0px) 19.1px, calc(100% - 0px) 21.1px, calc(100% - 0px) 23.1px, calc(100% - 0px) calc(100% - 23.1px), calc(100% - 0px) calc(100% - 21.1px), calc(100% - 0px) calc(100% - 19.1px), calc(100% - 0px) calc(100% - 17.3px), calc(100% - 0px) calc(100% - 15.6px), calc(100% - 0.1px) calc(100% - 14.1px), calc(100% - 0.2px) calc(100% - 12.6px), calc(100% - 0.4px) calc(100% - 11.2px), calc(100% - 0.6px) calc(100% - 9.9px), calc(100% - 0.8px) calc(100% - 8.7px), calc(100% - 1.1px) calc(100% - 7.6px), calc(100% - 1.5px) calc(100% - 6.6px), calc(100% - 1.9px) calc(100% - 5.7px), calc(100% - 2.3px) calc(100% - 4.9px), calc(100% - 2.9px) calc(100% - 4.1px), calc(100% - 3.5px) calc(100% - 3.5px), calc(100% - 4.1px) calc(100% - 2.9px), calc(100% - 4.9px) calc(100% - 2.3px), calc(100% - 5.7px) calc(100% - 1.9px), calc(100% - 6.6px) calc(100% - 1.5px), calc(100% - 7.6px) calc(100% - 1.1px), calc(100% - 8.7px) calc(100% - 0.8px), calc(100% - 9.9px) calc(100% - 0.6px), calc(100% - 11.2px) calc(100% - 0.4px), calc(100% - 12.6px) calc(100% - 0.2px), calc(100% - 14.1px) calc(100% - 0.1px), calc(100% - 15.6px) calc(100% - 0px), calc(100% - 17.3px) calc(100% - 0px), calc(100% - 19.1px) calc(100% - 0px), calc(100% - 21.1px) calc(100% - 0px), 21.1px calc(100% - 0px), 19.1px calc(100% - 0px), 17.3px calc(100% - 0px), 15.6px calc(100% - 0px), 14.1px calc(100% - 0.1px), 12.6px calc(100% - 0.2px), 11.2px calc(100% - 0.4px), 9.9px calc(100% - 0.6px), 8.7px calc(100% - 0.8px), 7.6px calc(100% - 1.1px), 6.6px calc(100% - 1.5px), 5.7px calc(100% - 1.9px), 4.9px calc(100% - 2.3px), 4.1px calc(100% - 2.9px), 3.5px calc(100% - 3.5px), 2.9px calc(100% - 4.1px), 2.3px calc(100% - 4.9px), 1.9px calc(100% - 5.7px), 1.5px calc(100% - 6.6px), 1.1px calc(100% - 7.6px), 0.8px calc(100% - 8.7px), 0.6px calc(100% - 9.9px), 0.4px calc(100% - 11.2px), 0.2px calc(100% - 12.6px), 0.1px calc(100% - 14.1px), 0px calc(100% - 15.6px), 0px calc(100% - 17.3px), 0px calc(100% - 19.1px), 0px calc(100% - 21.1px), 0px calc(100% - 23.1px));
    }
}

/* body/main/!section.banner/&.scss */
html > body > main section.banner {
    position: relative;
    height: 404px;
    min-height: 404px;
    width: calc(12 * var(--column-width) + 11 * var(--gutter));
    padding: 54px 0 0 0;
}

    html > body > main section.banner::before {
        position: absolute;
        top: 0;
        content: "";
        width: 100%;
        height: 100%;
        z-index: 1;
        background-repeat: no-repeat;
        background-size: 648px;
    }

@media (max-width: 1511px) {
    html > body > main section.banner {
        height: 328px;
        min-height: 328px;
        padding: 28px 0 0 0;
    }

        html > body > main section.banner::before {
            background-size: 520px;
        }
}

@media (max-width: 1279px) {
    html > body > main section.banner {
        height: 288px;
        min-height: 288px;
        padding: 14px 0 0 0;
    }

        html > body > main section.banner::before {
            background-size: 456px;
        }
}

@media (max-width: 1023px) {
    html > body > main section.banner {
        width: calc(100% - 2 * var(--margin));
        height: 210px;
        min-height: 210px;
        margin-inline: var(--margin);
        padding: 0;
    }

        html > body > main section.banner::before {
            background-size: 304px;
            background-position: bottom left;
        }
}

@media (max-width: 639px) {
    html > body > main section.banner {
        height: 490px;
        min-height: 490px;
    }
}

html > body > main section.banner > div {
    position: relative;
    display: flex;
    background-color: rgba(78, 93, 156, 0.0705882353);
    border-radius: 8px;
    height: 100%;
    padding-left: calc(6 * var(--column-width) + 5 * var(--gutter));
}

@media (max-width: 1023px) {
    html > body > main section.banner > div {
        padding-left: calc(4 * var(--column-width) + 3 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.banner > div {
        padding: 36px 8px;
        justify-content: center;
        overflow: clip;
    }
}

html > body > main section.banner > div img {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 412px;
    z-index: 1;
}

@media (max-width: 1511px) {
    html > body > main section.banner > div img {
        height: 330px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.banner > div img {
        height: 290px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner > div img {
        height: 194px;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner > div img {
        height: 268px;
        left: 50%;
        transform: translateX(-50%);
    }
}

html > body > main section.banner > div > div {
    width: calc(5 * var(--column-width) + 4 * var(--gutter));
    margin-left: var(--gutter);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 1023px) {
    html > body > main section.banner > div > div {
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.banner > div > div {
        width: 100%;
        margin: 0;
        justify-content: start;
    }
}

html > body > main section.banner > div > div h2 {
    color: #24262d;
    margin: 0;
}

html > body > main section.banner > div > div p {
    color: #777a87;
    margin-block: 16px 0px;
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > main section.banner > div > div p {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner > div > div p {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner > div > div p {
        margin-block: 8px 0px;
    }
}

html > body > main section.banner > div > div a {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.banner > div > div a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.banner > div > div a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.banner > div > div a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.banner > div > div a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.banner > div > div a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.banner > div > div a {
    background: var(--accent);
}

    html > body > main section.banner > div > div a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.banner > div > div a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.banner > div > div a::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.banner > div > div a::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.banner > div > div a::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.banner > div > div a:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.banner > div > div a {
    margin-top: 36px;
    z-index: 2;
    background-color: var(--accent);
    text-wrap: nowrap;
}

@media (max-width: 1511px) {
    html > body > main section.banner > div > div a {
        margin-top: 24px;
    }
}

@media (max-width: 1511px) {
    html > body > main section.banner > div > div a {
        margin-top: 20px;
    }
}

/* body/main/!section.banner/&[data-type="Alice"].scss */
html > body > main section.banner[data-type=Alice]::before {
    background-image: url("/styles/images/banner/Alice/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Alice]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Alice] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(85, 70, 254, 0.21) 0%, rgba(85, 70, 254, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Alice] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Alice/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Arina"].scss */
html > body > main section.banner[data-type=Arina]::before {
    background-image: url("/styles/images/banner/Arina/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Arina]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Arina] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(55, 234, 151, 0.21) 0%, rgba(55, 234, 151, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Arina] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Arina/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Arseny"].scss */
html > body > main section.banner[data-type=Arseny]::before {
    background-image: url("/styles/images/banner/Arseny/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Arseny]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Arseny] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(254, 110, 70, 0.21) 0%, rgba(254, 110, 70, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Arseny] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Arseny/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Danil"].scss */
html > body > main section.banner[data-type=Danil]::before {
    background-image: url("/styles/images/banner/Danil/background.png");
    background-size: 100% 100%;
    z-index: 0;
    margin: 54px 0 0 0;
    height: calc(100% - 54px);
}

@media (max-width: 1511px) {
    html > body > main section.banner[data-type=Danil]::before {
        margin: 28px 0 0 0;
        height: calc(100% - 28px);
    }
}

@media (max-width: 1279px) {
    html > body > main section.banner[data-type=Danil]::before {
        margin: 14px 0 0 0;
        height: calc(100% - 14px);
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner[data-type=Danil]::before {
        margin: 0;
        height: 100%;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Danil]::before {
        background-image: none;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Danil] {
        background-image: url("/styles/images/banner/Danil/background.png");
        background-size: 100% 100%;
        border-radius: 8px;
    }
}

html > body > main section.banner[data-type=Danil] div h2 {
    background: var(--test-b, linear-gradient(90deg, #FFF 2.09%, #B494FF 24.8%, #D78FB2 38.15%, #FF8B59 61.07%, #FFA159 71.54%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html > body > main section.banner[data-type=Danil] div p {
    color: #dde0ee;
}

/* body/main/!section.banner/&[data-type="Lera"].scss */
html > body > main section.banner[data-type=Lera]::before {
    background-image: url("/styles/images/banner/Lera/background.png");
    background-size: 100% 100%;
    z-index: 0;
    margin: 54px 0 0 0;
    height: calc(100% - 54px);
}

@media (max-width: 1511px) {
    html > body > main section.banner[data-type=Lera]::before {
        margin: 28px 0 0 0;
        height: calc(100% - 28px);
    }
}

@media (max-width: 1279px) {
    html > body > main section.banner[data-type=Lera]::before {
        margin: 14px 0 0 0;
        height: calc(100% - 14px);
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner[data-type=Lera]::before {
        margin: 0;
        height: 100%;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Lera]::before {
        background-image: none;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Lera] {
        background-image: url("/styles/images/banner/Lera/background.png");
        background-size: 100% 100%;
        border-radius: 8px;
    }
}

html > body > main section.banner[data-type=Lera] div h2 {
    background: var(--test-b, linear-gradient(90deg, #FFF 2.09%, #B494FF 24.8%, #D78FB2 38.15%, #FF8B59 61.07%, #FFA159 71.54%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html > body > main section.banner[data-type=Lera] div p {
    color: #dde0ee;
}

/* body/main/!section.banner/&[data-type="Liza"].scss */
html > body > main section.banner[data-type=Liza]::before {
    background-image: url("/styles/images/banner/Liza/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Liza]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Liza] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(55, 234, 151, 0.21) 0%, rgba(55, 234, 151, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Liza] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Liza/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Nastya"].scss */
html > body > main section.banner[data-type=Nastya]::before {
    background-image: url("/styles/images/banner/Nastya/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Nastya]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Nastya] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(254, 110, 70, 0.21) 0%, rgba(254, 110, 70, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Nastya] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Nastya/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Sergey"].scss */
html > body > main section.banner[data-type=Sergey]::before {
    background-image: url("/styles/images/banner/Sergey/background.png");
    background-size: 100% 100%;
    z-index: 0;
    margin: 54px 0 0 0;
    height: calc(100% - 54px);
}

@media (max-width: 1511px) {
    html > body > main section.banner[data-type=Sergey]::before {
        margin: 28px 0 0 0;
        height: calc(100% - 28px);
    }
}

@media (max-width: 1279px) {
    html > body > main section.banner[data-type=Sergey]::before {
        margin: 14px 0 0 0;
        height: calc(100% - 14px);
    }
}

@media (max-width: 1023px) {
    html > body > main section.banner[data-type=Sergey]::before {
        margin: 0;
        height: 100%;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Sergey]::before {
        background-image: none;
    }
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Sergey] {
        background-image: url("/styles/images/banner/Sergey/background.png");
        background-size: 100% 100%;
        border-radius: 8px;
    }
}

html > body > main section.banner[data-type=Sergey] div h2 {
    background: var(--test-b, linear-gradient(90deg, #FFF 2.09%, #B494FF 24.8%, #D78FB2 38.15%, #FF8B59 61.07%, #FFA159 71.54%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html > body > main section.banner[data-type=Sergey] div p {
    color: #dde0ee;
}

/* body/main/!section.banner/&[data-type="Varya"].scss */
html > body > main section.banner[data-type=Varya]::before {
    background-image: url("/styles/images/banner/Varya/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Varya]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Varya] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(85, 70, 254, 0.21) 0%, rgba(85, 70, 254, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Varya] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Varya/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.banner/&[data-type="Vlad"].scss */
html > body > main section.banner[data-type=Vlad]::before {
    background-image: url("/styles/images/banner/Vlad/background.svg");
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Vlad]::before {
        background-image: none;
    }
}

html > body > main section.banner[data-type=Vlad] > div {
    background: linear-gradient(0deg, rgba(78, 93, 156, 0.07), rgba(78, 93, 156, 0.07)), linear-gradient(90deg, rgba(254, 110, 70, 0.21) 0%, rgba(254, 110, 70, 0) 62.49%);
}

@media (max-width: 639px) {
    html > body > main section.banner[data-type=Vlad] > div {
        background: rgba(78, 93, 156, 0.0705882353) url("/styles/images/banner/Vlad/background.svg") bottom;
        background-repeat: no-repeat;
        background-size: 420px;
    }
}

/* body/main/!section.cart/&.scss */
html > body > main section.cart {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    html > body > main section.cart > h1 {
        text-align: center;
        margin: 0;
    }

    html > body > main section.cart > svg {
        margin-top: 100px;
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
        height: auto;
    }

    html > body > main section.cart > a {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.cart > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.cart > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.cart > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.cart > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.cart > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.cart > a {
    background: var(--accent);
}

    html > body > main section.cart > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.cart > a {
    width: fit-content;
    margin-top: 32px;
    color: #ffffff;
}

html > body > main section.cart::before {
    background-image: url("/styles/images/gradient.svg");
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    filter: blur(100px);
}

/* body/main/!section.checker/&.scss */
html > body > main section.checker {
    background: #1f2b5e;
    color: #ffffff;
    padding-block: 144px;
    width: unset;
    margin-inline: 0;
    padding-inline: calc(var(--extra-margin-percent) + var(--margin));
}

@media (max-width: 639px) {
    html > body > main section.checker {
        width: 100%;
        overflow-x: clip;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker {
        padding-block: 72px;
    }
}

html > body > main section.checker > h2 {
    text-align: center;
    transition: margin 0.3s ease;
    max-width: calc(8 * var(--column-width) + 7 * var(--gutter));
    margin-inline: auto;
}

@media (min-width: 1512px) {
    html > body > main section.checker > h2 {
        margin-bottom: 104px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker > h2 {
        margin-bottom: 96px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker > h2 {
        margin-bottom: 80px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker > h2 {
        margin-bottom: 48px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > h2 {
        margin-bottom: 36px;
    }
}

html > body > main section.checker > p {
    text-align: center;
    transition: margin 0.3s ease, opacity 0.3s ease;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.checker > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.checker > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.checker::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url("/styles/images/concentric-rings-background.svg");
    background-size: 100%;
    background-position: center -60px;
    background-repeat: no-repeat;
    content: "";
    pointer-events: none;
    transform-origin: top;
}

@media (max-width: 639px) {
    html > body > main section.checker::before {
        scale: 1.4;
    }
}

html > body > main section.checker p.no-results:has(+ ul.results > li) {
    display: none;
}

html > body > main section.checker:has(div.additional:not(.hide)) > ul.results > li:not(.current) {
    opacity: 0.5;
}

html > body > main section.checker button.button-additional.hide-additional::after {
    background-image: url("/styles/images/icons/minus-functional.svg") !important;
}

html > body > main section.checker:not([data-loading]) > div.loader {
    opacity: 0;
    visibility: 0;
}

/* body/main/!section.checker/div.additional.scss */
html > body > main section.checker > div.additional {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

    html > body > main section.checker > div.additional > ul.products-tiles {
        margin-top: var(--gutter);
    }

        html > body > main section.checker > div.additional > ul.products-tiles > li {
            background-color: #eef1ff;
        }

    html > body > main section.checker > div.additional.hide {
        display: none;
    }

    html > body > main section.checker > div.additional > button {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.checker > div.additional > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.checker > div.additional > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.checker > div.additional > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.checker > div.additional > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.checker > div.additional > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.checker > div.additional > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.checker > div.additional > button {
    background: var(--accent);
}

    html > body > main section.checker > div.additional > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.checker > div.additional > button {
    color: #ffffff;
}

/* body/main/!section.checker/div.loader.scss */
html > body > main section.checker > div.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(31, 43, 94, 0.8);
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
}

    html > body > main section.checker > div.loader > svg {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
    }

        html > body > main section.checker > div.loader > svg > circle {
            animation-name: loader;
            animation-duration: 1s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

            html > body > main section.checker > div.loader > svg > circle:nth-child(1) {
                animation-delay: 0;
            }

            html > body > main section.checker > div.loader > svg > circle:nth-child(2) {
                animation-delay: 0.33s;
            }

            html > body > main section.checker > div.loader > svg > circle:nth-child(3) {
                animation-delay: 0.66s;
            }

/* body/main/!section.checker/div.submenu.scss */
html > body > main section.checker > div.submenu > menu {
    width: fit-content;
    margin-inline: auto;
    --hover-color: #2F3D79;
}

    html > body > main section.checker > div.submenu > menu:not(:has(li:nth-child(2))) {
        display: none !important;
    }

    html > body > main section.checker > div.submenu > menu > li.current > button {
        color: #ffffff;
    }

    html > body > main section.checker > div.submenu > menu > li.current::before {
        background: #4e5d9c;
    }

    html > body > main section.checker > div.submenu > menu li:not(:has(input.not-empty)) {
        display: none;
    }

@media (min-width: 1512px) {
    html > body > main section.checker > div.submenu > menu {
        margin-top: 72px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker > div.submenu > menu {
        margin-top: 72px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker > div.submenu > menu {
        margin-top: 56px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker > div.submenu > menu {
        margin-top: 48px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > div.submenu > menu {
        margin-top: 40px;
    }
}

/* body/main/!section.documents/&.scss */
html > body > main section.documents > h3 {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.documents > h3 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.documents > h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.documents > h3 {
        margin-block: 56px 28px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.documents > h3 {
        margin-block: 56px 20px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.documents > h3 {
        margin-block: 40px 16px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.documents > h3 {
        margin-block: 32px 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.documents > h3 {
        margin-block: 32px 12px;
    }
}

html > body > main section.documents h3,
html > body > main section.documents li {
    transition: opacity 0.3s ease;
}

@media (pointer: fine) {
    html > body > main section.documents:has(li:hover) h3,
    html > body > main section.documents:has(li:hover) li:not(:hover) {
        opacity: 0.4;
    }

    html > body > main section.documents:has(li:hover) li:hover::after {
        opacity: 1;
    }
}

/* body/main/!section.footnote/&.scss */
html > body > main section.footnote {
    margin-top: calc(var(--component-gap) / 2);
}

    html > body > main section.footnote ul {
        width: calc(7 * var(--column-width) + 6 * var(--gutter));
        max-width: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > main section.footnote ul > li::before {
            content: none;
        }

@media (max-width: 1511px) {
    html > body > main section.footnote ul {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
    }
}

html > body > main section.footnote ul li {
    color: #777a87;
    font-size: 11px;
    font-weight: 400;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main section.footnote ul li {
        font-size: 9px;
        font-weight: 600;
        line-height: 14px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.footnote ul li {
        font-size: 8px;
        font-weight: 600;
        line-height: 12px;
    }
}

html > body > main section.footnote ul li:not(:last-child) {
    margin-bottom: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.footnote ul li:not(:last-child) {
        margin-bottom: 16px;
    }
}

/* body/main/!section.header-h1/&.scss */
html > body > main section.header-h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 72px;
}

    html > body > main section.header-h1 > h1 {
        margin-block: 12px;
        text-align: center;
    }

    html > body > main section.header-h1 > p {
        margin: 0;
        color: #868894;
        text-align: center;
        font-size: 26px;
        font-weight: 500;
        line-height: 28px;
    }

@media (max-width: 1279px) {
    html > body > main section.header-h1 > p {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.header-h1 > p {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > main section.header-h1 > nav {
    position: relative;
    margin-top: 24px;
}

    html > body > main section.header-h1 > nav button.scroll-arrow {
        position: absolute;
        top: 0;
        width: 60px;
        height: 54px;
        padding: 21px;
        padding-left: 8px;
        padding-right: 32px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath fill='%2324262d' d='M3.93 6l2.3-5.54 1.84.76L5.9 6l1.95 4.72-1.85.78z'/%3E%3C/svg%3E"), linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0));
        background-repeat: no-repeat;
        background-position: 8px, left center;
        background-size: auto, auto;
        z-index: 2;
    }

        html > body > main section.header-h1 > nav button.scroll-arrow.hidden {
            display: none;
        }

        html > body > main section.header-h1 > nav button.scroll-arrow:first-child {
            left: 0;
        }

        html > body > main section.header-h1 > nav button.scroll-arrow:last-child {
            rotate: 180deg;
            right: 0;
        }

@media (max-width: 1279px) {
    html > body > main section.header-h1 {
        margin-top: 48px;
    }

        html > body > main section.header-h1 > h1 {
            margin-block: 8px;
        }

        html > body > main section.header-h1 > nav {
            margin-top: 16px;
        }
}

@media (max-width: 1023px) {
    html > body > main section.header-h1 {
        margin-top: 56px;
    }

        html > body > main section.header-h1 > nav {
            margin-top: 12px;
        }
}

@media (max-width: 639px) {
    html > body > main section.header-h1 {
        margin-top: 40px;
    }

        html > body > main section.header-h1 > h1 {
            margin-block: 4px;
        }
}

@media (min-width: 1512px) {
    html > body > main section.header-h1 + section.checker {
        margin-top: 36px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.header-h1 + section.checker {
        margin-top: 32px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.header-h1 + section.checker {
        margin-top: 28px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.header-h1 + section.checker {
        margin-top: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main section.header-h1 + section.checker {
        margin-top: 20px;
    }
}

/* body/main/!section.hero-screen/&.scss */
html > body > main section.hero-screen {
    width: unset;
    margin-inline: 0;
    padding-inline: calc(var(--extra-margin-percent) + var(--margin));
}

@media (max-width: 639px) {
    html > body > main section.hero-screen {
        width: 100%;
        overflow-x: clip;
    }
}

html > body > main section.hero-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
    margin-top: 0;
    padding-inline: 0;
    height: 95svh;
    min-height: 700px;
    max-height: 1200px;
    overflow-x: clip;
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen {
        min-height: 600px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen {
        min-height: 500px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen {
        height: unset;
        max-height: unset;
    }
}

/* body/main/!section.hero-screen/aside.scss */
html > body > main section.hero-screen > aside {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

    html > body > main section.hero-screen > aside > svg {
        width: 100%;
        aspect-ratio: 1312/1512;
    }

        html > body > main section.hero-screen > aside > svg circle {
            offset-path: path("M17.858 22.468c1.247-37.402 33.957-93.653 66.201-46.423S104.041 102.75 47.274 76.41-43.553-8.06-10.856-36.217c32.698-28.156 77.658-72.207 108.54-24.523 30.88 47.684 80.381 102.635 29.518 137.15-50.863 34.513-153.952 65.849-171.663 2.27S-61.72-60.286-15.397-47.57 213.033 52.794 178.52 58.698-83.063-17.597-62.173-30.312c20.89-12.717 208.449-94.007 193.462-50.864C116.303-38.033-39.92 142.259-60.81 122.73S-5.86-77.543 15.94-90.259c21.798-12.716 202.512 235.05 131.667 233.233C76.76 141.158 16.61 59.87 17.858 22.468L17.858 22.468");
            animation-name: circle-slow-movement;
            animation-duration: 60s;
            animation-iteration-count: infinite;
            transform-box: fill-box;
            transform-origin: center;
            offset-rotate: auto;
            offset-distance: 0%;
        }

        html > body > main section.hero-screen > aside > svg .circle1 {
            animation-delay: 0s;
            translate: 1300px 0px;
        }

        html > body > main section.hero-screen > aside > svg .circle2 {
            animation-delay: 30s;
            translate: 100px min(60svh, 700px);
        }

@media (max-width: 639px) {
    html > body > main section.hero-screen > aside > svg circle {
        scale: 1.5;
    }

    html > body > main section.hero-screen > aside > svg .circle1 {
        translate: calc(1900px + 50svw) -900px;
    }

    html > body > main section.hero-screen > aside > svg .circle2 {
        translate: -10svw calc(900px - 80svw);
    }
}

@keyframes circle-slow-movement {
    from {
        offset-distance: 0%;
    }

    to {
        offset-distance: 100%;
    }
}

/* body/main/!section.hero-screen/figure.scss */
html > body > main section.hero-screen > figure {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    margin-block: 48px;
    margin-inline: 64px;
    flex: 1;
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > figure {
        translate: 0 10svh;
    }
}

html > body > main section.hero-screen > figure > picture {
    display: block;
    width: 55vw;
    max-width: min(55vw, 600px);
    line-height: 0;
}

    html > body > main section.hero-screen > figure > picture > svg {
        width: 100%;
        height: 100%;
    }

        html > body > main section.hero-screen > figure > picture > svg > path.tel {
            fill: #1f2b5e;
        }

@media (max-width: 1279px) {
    html > body > main section.hero-screen > figure > picture {
        width: 40vw;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > figure > picture {
        width: 75vw;
        max-width: min(75vw, 600px);
    }
}

html > body > main section.hero-screen > figure > figcaption {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > figure > figcaption {
        font-size: 24px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > figure > figcaption {
        font-size: 20px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > main section.hero-screen > figure > figcaption > p {
    margin-block: 32px 0;
    color: #1f2b5e;
    white-space: nowrap;
}

@media (max-width: 1511px) {
    html > body > main section.hero-screen > figure > figcaption > p {
        font-size: min(2.18svw, 28px);
    }
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > figure > figcaption > p {
        margin-top: 21px;
        font-size: 1.84svw;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > figure > figcaption > p {
        margin-top: 16px;
        font-size: 2.62svw;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > figure > figcaption > p {
        font-size: 14px;
        font-size: 3.6svw;
    }
}

/* body/main/!section.image/&.scss */
html > body > main section.image > figure {
    margin: 0;
}

html > body > main section.image img {
    width: calc(10 * var(--column-width) + 9 * var(--gutter));
    margin-inline: auto;
    display: block;
    border-radius: 8px;
    aspect-ratio: 1208/620;
    object-fit: cover;
}

@media (max-width: 1023px) {
    html > body > main section.image img {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
        max-width: 740px;
        aspect-ratio: 454/280;
    }
}

/* body/main/!section.lk-component/!form.phone-button.scss */
html > body > main section.lk-component form.phone-button {
    position: relative;
    display: flex;
    margin-left: auto;
}

    html > body > main section.lk-component form.phone-button > button {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component form.phone-button > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component form.phone-button > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component form.phone-button > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component form.phone-button > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component form.phone-button > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component form.phone-button > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component form.phone-button > button {
    background: var(--accent);
}

    html > body > main section.lk-component form.phone-button > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.lk-component form.phone-button > button {
    position: absolute;
    right: 0;
    line-height: 18px !important;
    width: fit-content;
    color: #ffffff;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component form.phone-button > button {
        line-height: 16px !important;
    }
}

html > body > main section.lk-component form.phone-button > input {
    width: 350px;
    border-top-right-radius: 27px;
    border-bottom-right-radius: 27px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component form.phone-button > input {
        width: 320px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component form.phone-button > input {
        width: 100%;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component form.phone-button {
        width: 100%;
    }
}

/* body/main/!section.lk-component/!span.date-placeholder-wrap.scss */
html > body > main section.lk-component span.date-placeholder-wrap {
    position: relative;
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
}

@media (max-width: 639px) {
    html > body > main section.lk-component span.date-placeholder-wrap {
        width: 100%;
    }
}

html > body > main section.lk-component span.date-placeholder-wrap input[type=date] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

    html > body > main section.lk-component span.date-placeholder-wrap input[type=date]:invalid:not(:focus) {
        color: transparent;
    }

html > body > main section.lk-component span.date-placeholder-wrap > span {
    position: absolute;
    left: 18px;
    top: 0;
    display: flex;
    align-items: center;
    height: 54px;
    pointer-events: none;
    color: #868894;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component span.date-placeholder-wrap > span {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component span.date-placeholder-wrap > span {
        height: 44px;
        left: 14px;
    }
}

html > body > main section.lk-component span.date-placeholder-wrap:focus-within span, html > body > main section.lk-component span.date-placeholder-wrap:has(input[type=date]:valid) span {
    display: none;
}

/* body/main/!section.lk-table/&.scss */
html > body > main section.lk-table.table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: 8px;
}

    html > body > main section.lk-table.table h2 {
        width: 100%;
    }

    html > body > main section.lk-table.table table {
        table-layout: auto !important;
    }

@media (max-width: 1023px) {
    html > body > main section.lk-table.table div:has(table) {
        min-width: 100vw;
    }
}

html > body > main section.lk-table.table form {
    display: flex;
    column-gap: 8px;
}

html > body > main section.lk-table.table button.show-by-period {
    display: block;
    margin: 0;
    margin-bottom: 24px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-table.table button.show-by-period {
        margin-bottom: 12px;
    }
}

html > body > main section.lk-table.table span.date-placeholder-wrap {
    width: 424px;
    margin-bottom: 24px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-table.table span.date-placeholder-wrap {
        margin-bottom: 12px;
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-table.table span.date-placeholder-wrap {
        width: 100%;
        margin-bottom: 4px;
    }
}

html > body > main section.lk-table.table button.show-more {
    display: inline-block;
    margin-inline: auto;
}

html > body > main section.lk-table.table > div {
    min-width: 100%;
}

    html > body > main section.lk-table.table > div > table > tbody > tr:not(:first-child):not(:hover):not(.active):not([data-first]) > td:first-child p {
        opacity: 1;
    }

/* body/main/!section.news/&.scss */
html > body > main section.news:has(> h2) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

    html > body > main section.news:has(> h2) > ul {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

        html > body > main section.news:has(> h2) > ul > li > a {
            aspect-ratio: 716/260 !important;
        }

    html > body > main section.news:has(> h2) > a {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        height: 54px;
        width: fit-content;
        padding-inline: 32px;
        line-height: 54px !important;
        background: var(--accent);
        color: #ffffff;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.news:has(> h2) > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.news:has(> h2) > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.news:has(> h2) > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.news:has(> h2) > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.news:has(> h2) > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.news:has(> h2) > a {
    background: var(--accent);
}

    html > body > main section.news:has(> h2) > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.news:has(> h2) > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.news:has(> h2) > a::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.news:has(> h2) > a::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.news:has(> h2) > a::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.news:has(> h2) > a:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.news:has(> h2) > a {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.news:has(> h2) > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.news:has(> h2) > a:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.news:has(> h2) > a::before {
    content: none;
}

html > body > main section.news:has(> h2) > a::after {
    filter: brightness(0);
}

@media (max-width: 1023px) {
    html > body > main section.news:has(> h2) > ul {
        width: 100%;
    }

        html > body > main section.news:has(> h2) > ul > li > a {
            aspect-ratio: 298/216 !important;
        }
}

@media (min-width: 640px) {
    html > body > main section.news:has(> h2) li.all-news-link {
        display: none;
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) {
        padding: 0;
    }

        html > body > main section.news:has(> h2) > h2 {
            padding-left: var(--margin);
        }

        html > body > main section.news:has(> h2) > a {
            display: none;
        }

        html > body > main section.news:has(> h2) > ul {
            display: flex;
            flex-direction: row;
            overflow-x: scroll;
            flex-wrap: nowrap;
            width: auto;
            padding-inline: var(--margin);
            -ms-overflow-style: none;
            scrollbar-width: none;
        }

            html > body > main section.news:has(> h2) > ul::-webkit-scrollbar {
                display: none;
            }

            html > body > main section.news:has(> h2) > ul > li > a {
                width: calc(8 * var(--column-width) + 7 * var(--gutter));
                aspect-ratio: 332/216;
            }

            html > body > main section.news:has(> h2) > ul > li.all-news-link {
                width: fit-content;
            }

                html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
                    display: inline-flex;
                    align-items: center;
                    gap: 16px;
                    height: 54px;
                    width: fit-content;
                    padding-inline: 32px;
                    line-height: 54px !important;
                    background: var(--accent);
                    color: #ffffff;
                    border-radius: 27px;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 18px;
                    padding-inline: 0;
                    color: #24262d;
                    background: transparent;
                    transition: color 0.3s ease;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 18px;
                    background: radial-gradient(rgba(78, 93, 156, 0.07), rgba(255, 255, 255, 0.5));
                    background-size: 400% 400%;
                    background-position: center;
                    transition: background-size 0.3s ease, backdrop-filter 0.3s ease;
                }
}

@media (max-width: 639px) and (max-width: 1279px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        background: #37ea97;
        position: relative;
        overflow: clip;
        transition: box-shadow 0.3s ease;
    }

        html > body > main section.news:has(> h2) > ul > li.all-news-link > a::before {
            position: absolute;
            left: -258px;
            top: -142.417px;
            display: block;
            width: 253.783px;
            height: 191.681px;
            transform: rotate(-50.093deg);
            background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
            content: "";
            transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
            will-change: top, left, right, bottom;
        }
}

@media (max-width: 639px) and (pointer: fine) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.news:has(> h2) > ul > li.all-news-link > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        background: var(--accent);
    }

        html > body > main section.news:has(> h2) > ul > li.all-news-link > a::before {
            background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
        }
}

@media (max-width: 639px) and (max-width: 1023px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a::after {
        content: "";
        width: 32px;
        height: 20px;
    }

    @supports (mask-image: url("")) {
        html > body > main section.news:has(> h2) > ul > li.all-news-link > a::after {
            background-color: currentColor;
            mask-image: url("/styles/images/icons/arrow-right.svg");
            mask-position: 0 0;
            mask-size: contain;
            transition: mask-position 0.3s ease, background-color 0.3s ease;
            will-change: mask-position;
        }
    }

    @supports not (mask-image: url("")) {
        html > body > main section.news:has(> h2) > ul > li.all-news-link > a::after {
            background-image: url("/styles/images/icons/arrow-right.svg");
            background-position: 0 0;
            background-size: contain;
            transition: background-position 0.3s ease;
            will-change: background-position;
        }
    }
}

@media (max-width: 639px) and (pointer: fine) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

@media (max-width: 639px) and (max-width: 1279px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 639px) and (pointer: fine) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a::before {
        content: none;
    }

    html > body > main section.news:has(> h2) > ul > li.all-news-link > a::after {
        filter: brightness(0);
    }
}

@media (max-width: 639px) and (pointer: fine) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a:hover {
        background-size: 100% 100%;
        backdrop-filter: saturate(5) blur(15px) brightness(0.74) contrast(1.7) hue-rotate(30deg);
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a h2,
    html > body > main section.news:has(> h2) > ul > li.all-news-link > a span.title {
        display: grid;
        grid-template-columns: 1fr auto;
    }

        html > body > main section.news:has(> h2) > ul > li.all-news-link > a h2::after,
        html > body > main section.news:has(> h2) > ul > li.all-news-link > a span.title::after {
            display: block;
            width: 20px;
            height: 20px;
            background-image: url("/styles/images/icons/arrow-45deg.svg");
            background-size: 100%;
            background-position: center;
            background-repeat: no-repeat;
            content: "";
        }

    html > body > main section.news:has(> h2) > ul > li.all-news-link > a {
        aspect-ratio: 716/260;
        height: 100%;
        border-radius: 8px;
        justify-content: center;
        padding: 0;
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
        background: radial-gradient(rgba(78, 93, 156, 0.07), rgba(255, 255, 255, 0.5));
        background-size: 400% 400%;
        background-position: center;
        transition: background-size 0.3s ease, backdrop-filter 0.3s ease;
    }
}

html > body > main section.news:has(> h2).news-page {
    margin-top: calc(var(--component-gap) + 168px);
}

@media (max-width: 1279px) {
    html > body > main section.news:has(> h2).news-page {
        margin-top: calc(var(--component-gap) + 112px);
    }
}

@media (max-width: 1023px) {
    html > body > main section.news:has(> h2).news-page {
        margin-top: calc(var(--component-gap) + 96px);
    }
}

@media (max-width: 639px) {
    html > body > main section.news:has(> h2).news-page {
        margin-top: calc(var(--component-gap) + 64px);
    }
}

/* body/main/!section.package-info/&.scss */
@media (max-width: 1023px) {
    html > body > main section.package-info.service-info > div {
        display: flex;
        flex-direction: column;
        align-items: start;
        gap: 20px;
    }
}

html > body > main section.package-info.service-info > div > div.title {
    justify-content: center;
}

@media (max-width: 1279px) {
    html > body > main section.package-info.service-info > div > div.title {
        gap: 6px;
    }
}

html > body > main section.package-info.service-info > div > div.title h2 {
    margin-bottom: 0;
}

html > body > main section.package-info.service-info > div > ul.props {
    height: 100%;
    grid-column: 2/3;
    grid-row: 1/3;
}

    html > body > main section.package-info.service-info > div > ul.props > li > p {
        font-size: 16px;
        font-weight: 700;
        line-height: 34px;
    }

@media (max-width: 1279px) {
    html > body > main section.package-info.service-info > div > ul.props > li > p {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.package-info.service-info > div > ul.props > li > p {
        font-size: 12px;
        font-weight: 700;
        line-height: 10px;
    }
}

html > body > main section.package-info.service-info > div > ul.props > li > p {
    line-height: 24px;
    text-wrap: nowrap;
}

@media (max-width: 1279px) {
    html > body > main section.package-info.service-info > div > ul.props > li > p {
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.package-info.service-info > div > ul.props > li > p {
        font-size: 10px;
        line-height: 10px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.package-info.service-info > div > ul.props > li:not(:last-child) {
        margin-bottom: 12px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.package-info.service-info > div > ul.props > li:not(:last-child) {
        margin-bottom: 8px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.package-info.service-info > div > ul.props > li:not(:last-child) {
        margin-bottom: 6px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.package-info.service-info > div > ul.props > li:not(:last-child) {
        margin-bottom: 6px;
    }
}

@media (max-width: 639px) {
    html > body > main section.package-info.service-info > div > ul.props > li:not(:last-child) {
        margin-bottom: 6px;
    }
}

html > body > main section.package-info.service-info > div > div.cost {
    display: flex;
    align-items: center;
    margin-left: 16px;
    grid-row: 1/3;
    height: 100%;
}

@media (max-width: 1023px) {
    html > body > main section.package-info.service-info > div > div.cost {
        margin-left: 0;
    }
}

/* body/main/!section.products/&.scss */
/* body/main/!section.service-info/&.scss */
html > body > main section.service-info h2,
html > body > main section.service-info p {
    margin: 0;
}

html > body > main section.service-info h2 {
    line-height: 34px !important;
}

@media (max-width: 1279px) {
    html > body > main section.service-info h2 {
        line-height: 24px !important;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info h2 {
        margin: 0 !important;
    }
}

html > body > main section.service-info em {
    line-height: 36px;
    font-weight: 500;
    font-style: normal;
}

@media (min-width: 1512px) {
    html > body > main section.service-info em {
        font-size: 42px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.service-info em {
        font-size: 38px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.service-info em {
        font-size: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.service-info em {
        font-size: 23px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info em {
        font-size: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.service-info em {
        line-height: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info em {
        font-size: 18px;
        line-height: 16px;
    }
}

/* body/main/!section.services/&.scss */
html > body > main section.services {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #1f2b5e;
}

    html > body > main section.services * {
        color: #ffffff;
    }

    html > body > main section.services > a {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        height: 54px;
        width: fit-content;
        padding-inline: 32px;
        line-height: 54px !important;
        background: var(--accent);
        color: #ffffff;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.services > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.services > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.services > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.services > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.services > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.services > a {
    background: var(--accent);
}

    html > body > main section.services > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.services > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.services > a::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.services > a::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.services > a::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.services > a:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.services > a {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.services > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.services > a:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.services > a::before {
    content: none;
}

html > body > main section.services > a::after {
    filter: brightness(0);
}

html > body > main section.services > a {
    color: #ffffff;
}

@media (pointer: fine) {
    html > body > main section.services > a:hover {
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.services {
    width: unset;
    margin-inline: 0;
    padding-inline: calc(var(--extra-margin-percent) + var(--margin));
}

@media (max-width: 639px) {
    html > body > main section.services {
        width: 100%;
        overflow-x: clip;
    }
}

html > body > main section.services {
    padding-block: calc(32px + var(--component-gap) / 2);
    margin-top: calc(var(--component-gap) / 2);
    margin-bottom: calc(-1 * var(--component-gap) / 2);
}

@media (max-width: 639px) {
    html > body > main section.services > a {
        display: none;
    }
}

/* body/main/!section.simple-list/&.scss */
html > body > main section.simple-list ul {
    columns: 3;
    margin: 0;
    padding: 0;
    gap: 0;
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 1023px) {
    html > body > main section.simple-list ul {
        columns: 2;
    }
}

html > body > main section.simple-list ul li {
    width: 280px;
    break-inside: avoid;
}

@media (min-width: 1512px) {
    html > body > main section.simple-list ul li {
        margin-right: 24px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.simple-list ul li {
        margin-right: 24px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.simple-list ul li {
        margin-right: 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.simple-list ul li {
        margin-right: var(--gutter);
    }
}

@media (max-width: 639px) {
    html > body > main section.simple-list ul li {
        margin-right: var(--gutter);
    }
}

@media (min-width: 1512px) {
    html > body > main section.simple-list ul li {
        margin-bottom: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.simple-list ul li {
        margin-bottom: 16px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.simple-list ul li {
        margin-bottom: 12px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.simple-list ul li {
        margin-bottom: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.simple-list ul li {
        margin-bottom: 8px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.simple-list ul li {
        width: calc(4 * var(--column-width) + 3 * var(--gutter));
    }
}

html > body > main section.simple-list ul li:before {
    content: none;
}

html > body > main section.simple-list ul li p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.simple-list ul li p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.simple-list ul li p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

/* body/main/!section.small-text/&.scss */
html > body > main section.small-text {
    display: grid;
    grid-template-columns: auto auto 1fr;
    padding-right: calc(var(--gutter) + var(--column-width) + var(--margin));
}

@media (max-width: 1279px) {
    html > body > main section.small-text {
        padding-right: var(--margin);
    }
}

@media (max-width: 639px) {
    html > body > main section.small-text {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
    }
}

html > body > main section.small-text > h2 {
    position: relative;
    height: fit-content;
    grid-column: 1/2;
    width: calc(6 * var(--column-width) + 5 * var(--gutter));
    margin-right: var(--gutter);
    margin-bottom: 0;
}

@media (max-width: 1023px) {
    html > body > main section.small-text > h2 {
        width: calc(4 * var(--column-width) + 3 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.small-text > h2 {
        width: 100%;
        grid-column: 1/3;
        margin: 0 0 var(--h2-margin) 0;
    }
}

html > body > main section.small-text > h2[data-comet=yes]::after {
    content: "";
    position: absolute;
    top: calc(100% - 25px);
    left: 0;
    z-index: -1;
    width: 200px;
    height: 200px;
    background-image: var(--small-text-comet);
    background-repeat: no-repeat;
    background-size: contain;
}

@media (max-width: 1279px) {
    html > body > main section.small-text > h2[data-comet=yes]::after {
        top: calc(100% - 20px);
        width: 160px;
        height: 160px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.small-text > h2[data-comet=yes]::after {
        top: calc(100% - 10px);
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 639px) {
    html > body > main section.small-text > h2[data-comet=yes]::after {
        top: 0;
        right: 0;
        left: auto;
        width: 60px;
        height: 60px;
    }
}

html > body > main section.small-text > div {
    grid-column: 2/4;
    grid-row: 1/2;
}

@media (max-width: 639px) {
    html > body > main section.small-text > div {
        grid-column: 1/3;
        grid-row: 2/3;
    }
}

html > body > main section.small-text > a {
    margin-top: 24px;
    grid-row: 2/3;
}

@media (max-width: 639px) {
    html > body > main section.small-text > a {
        grid-row: 3/4;
    }
}

html > body > main section.small-text a.first_button {
    margin-right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.small-text a.first_button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.small-text a.first_button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.small-text a.first_button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.small-text a.first_button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.small-text a.first_button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.small-text a.first_button {
    background: var(--accent);
}

    html > body > main section.small-text a.first_button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.small-text a.first_button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.small-text a.first_button::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.small-text a.first_button::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.small-text a.first_button::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.small-text a.first_button:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.small-text > a:first-of-type {
    grid-column: 2/3;
}

@media (max-width: 639px) {
    html > body > main section.small-text > a:first-of-type {
        grid-column: 1/2;
    }
}

html > body > main section.small-text > a.second_button:not(:first-of-type) {
    grid-column: 3/4;
    padding-inline: 0;
}

@media (max-width: 639px) {
    html > body > main section.small-text > a.second_button:not(:first-of-type) {
        grid-column: 2/3;
    }
}

html > body > main section.small-text > a.second_button {
    grid-column: 3/4;
    display: flex;
    align-items: center;
    padding-inline: 0 !important;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.small-text > a.second_button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.small-text > a.second_button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.small-text > a.second_button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.small-text > a.second_button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.small-text > a.second_button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.small-text > a.second_button {
    background: var(--accent);
}

    html > body > main section.small-text > a.second_button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.small-text > a.second_button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.small-text > a.second_button::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.small-text > a.second_button::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.small-text > a.second_button::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.small-text > a.second_button:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.small-text > a.second_button {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.small-text > a.second_button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.small-text > a.second_button:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.small-text > a.second_button::before {
    content: none;
}

html > body > main section.small-text > a.second_button::after {
    filter: brightness(0);
}

@media (max-width: 639px) {
    html > body > main section.small-text > a.second_button {
        grid-column: 2/3;
        margin-top: 12px;
    }
}

html > body > main section.small-text:not(:has(.first_button)) > a {
    margin-left: 0;
}

html > body > main section.small-text:has(.first_button) > a:last-of-type:not(.first_button)::after {
    content: none;
}

/* body/main/!section.small-text/div.scss */
html > body > main section.small-text > div {
    --margin-h3: 24px;
    --margin-h4: 24px;
    --margin-list: 20px;
    --margin-into-list: 16px;
    --margin-p: 16px;
    --height-br: 24px;
}

@media (max-width: 1511px) {
    html > body > main section.small-text > div {
        --margin-h3: 20px;
        --margin-h4: 20px;
        --margin-list: 12px;
        --margin-into-list: 12px;
        --margin-p: 12px;
        --height-br: 20px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.small-text > div {
        --margin-h3: 16px;
        --margin-h4: 16px;
        --margin-list: 12px;
        --margin-into-list: 12px;
        --margin-p: 8px;
        --height-br: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.small-text > div {
        --margin-h3: 12px;
        --margin-h4: 12px;
        --margin-list: 12px;
        --margin-into-list: 8px;
        --margin-p: 8px;
        --height-br: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.small-text > div {
        --height-br: 8px;
    }
}

html > body > main section.small-text > div > *:first-child,
html > body > main section.small-text > div li:first-child {
    margin-top: 0 !important;
}

html > body > main section.small-text > div > *:last-child,
html > body > main section.small-text > div li:last-child {
    margin-bottom: 0 !important;
}

html > body > main section.small-text > div h3 {
    margin-block: var(--margin-h3);
}

html > body > main section.small-text > div h4 {
    margin-block: var(--margin-h4);
}

html > body > main section.small-text > div p {
    margin-block: var(--margin-p);
}

html > body > main section.small-text > div br {
    display: block;
    margin-block: calc(var(--height-br) / 2);
}

html > body > main section.small-text > div ul, html > body > main section.small-text > div ol {
    margin-block: var(--margin-list);
}

    html > body > main section.small-text > div ul p, html > body > main section.small-text > div ol p {
        margin: 0;
    }

    html > body > main section.small-text > div ul li, html > body > main section.small-text > div ol li {
        margin-block: var(--margin-into-list);
    }

        html > body > main section.small-text > div ul li br, html > body > main section.small-text > div ol li br {
            margin-block: 2px;
        }

html > body > main section.small-text > div h4, html > body > main section.small-text > div h4 > strong {
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > main section.small-text > div h4, html > body > main section.small-text > div h4 > strong {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.small-text > div h4, html > body > main section.small-text > div h4 > strong {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > main section.small-text > div p, html > body > main section.small-text > div p > strong {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.small-text > div p, html > body > main section.small-text > div p > strong {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.small-text > div p, html > body > main section.small-text > div p > strong {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.small-text > div h4, html > body > main section.small-text > div p {
    color: #868894;
}

html > body > main section.small-text > div strong {
    color: #24262d;
}

html > body > main section.small-text > div a, html > body > main section.small-text > div button {
    color: hsl(152, 68%, 50%);
    background-image: linear-gradient(hsl(152, 68%, 50%), hsl(152, 68%, 50%));
    background-size: 0 2px;
    background-position: 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.3s ease;
}

@media (pointer: fine) {
    html > body > main section.small-text > div a:hover, html > body > main section.small-text > div button:hover {
        background-size: 100% 2px;
    }
}

/* body/main/!section.table/&.scss */
html > body > main section.table {
    display: flex;
    flex-direction: column;
}

    html > body > main section.table > div {
        transition: height 0.3s ease, max-height 0.3s ease;
    }

        html > body > main section.table > div > :not(table) {
            display: none !important;
        }

        html > body > main section.table > div > table {
            table-layout: fixed;
            border-collapse: collapse;
            width: 100%;
        }

            html > body > main section.table > div > table > thead > tr:first-child > td,
            html > body > main section.table > div > table > thead > tr:first-child > th,
            html > body > main section.table > div > table > tbody > tr:first-child > td,
            html > body > main section.table > div > table > tbody > tr:first-child > th {
                padding-top: 32px;
                background: rgba(78, 93, 156, 0.07) !important;
                font-size: 20px;
                font-weight: 600;
                line-height: 26px;
            }

@media (max-width: 1279px) {
    html > body > main section.table > div > table > thead > tr:first-child > td,
    html > body > main section.table > div > table > thead > tr:first-child > th,
    html > body > main section.table > div > table > tbody > tr:first-child > td,
    html > body > main section.table > div > table > tbody > tr:first-child > th {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr:first-child > td,
    html > body > main section.table > div > table > thead > tr:first-child > th,
    html > body > main section.table > div > table > tbody > tr:first-child > td,
    html > body > main section.table > div > table > tbody > tr:first-child > th {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr:first-child > td,
    html > body > main section.table > div > table > thead > tr:first-child > th,
    html > body > main section.table > div > table > tbody > tr:first-child > td,
    html > body > main section.table > div > table > tbody > tr:first-child > th {
        padding-top: 24px;
    }
}

html > body > main section.table > div > table > thead > tr:first-child > td:first-child,
html > body > main section.table > div > table > thead > tr:first-child > th:first-child,
html > body > main section.table > div > table > tbody > tr:first-child > td:first-child,
html > body > main section.table > div > table > tbody > tr:first-child > th:first-child {
    border-radius: 8px 0 0 8px;
}

html > body > main section.table > div > table > thead > tr:first-child > td:last-child,
html > body > main section.table > div > table > thead > tr:first-child > th:last-child,
html > body > main section.table > div > table > tbody > tr:first-child > td:last-child,
html > body > main section.table > div > table > tbody > tr:first-child > th:last-child {
    border-radius: 0 8px 8px 0;
}

html > body > main section.table > div > table > thead > tr:not(:first-child) em,
html > body > main section.table > div > table > tbody > tr:not(:first-child) em {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.table > div > table > thead > tr:not(:first-child) em,
    html > body > main section.table > div > table > tbody > tr:not(:first-child) em {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr:not(:first-child) em,
    html > body > main section.table > div > table > tbody > tr:not(:first-child) em {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.table > div > table > thead > tr:not(:first-child) em,
html > body > main section.table > div > table > tbody > tr:not(:first-child) em {
    font-style: normal;
}

html > body > main section.table > div > table > thead > tr:not(:first-child) strong,
html > body > main section.table > div > table > tbody > tr:not(:first-child) strong {
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}

@media (max-width: 1279px) {
    html > body > main section.table > div > table > thead > tr:not(:first-child) strong,
    html > body > main section.table > div > table > tbody > tr:not(:first-child) strong {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr:not(:first-child) strong,
    html > body > main section.table > div > table > tbody > tr:not(:first-child) strong {
        font-size: 12px;
        font-weight: 700;
        line-height: 10px;
    }
}

html > body > main section.table > div > table > thead > tr:not(:first-child):not([data-first]) > td,
html > body > main section.table > div > table > thead > tr:not(:first-child):not([data-first]) > th, html > body > main section.table > div > table > thead > tr:not(:first-child)[data-first]:has(+ :not([data-first])) > td,
html > body > main section.table > div > table > thead > tr:not(:first-child)[data-first]:has(+ :not([data-first])) > th,
html > body > main section.table > div > table > tbody > tr:not(:first-child):not([data-first]) > td,
html > body > main section.table > div > table > tbody > tr:not(:first-child):not([data-first]) > th,
html > body > main section.table > div > table > tbody > tr:not(:first-child)[data-first]:has(+ :not([data-first])) > td,
html > body > main section.table > div > table > tbody > tr:not(:first-child)[data-first]:has(+ :not([data-first])) > th {
    padding-block: 6px;
}

html > body > main section.table > div > table > thead > tr > td,
html > body > main section.table > div > table > thead > tr > th,
html > body > main section.table > div > table > tbody > tr > td,
html > body > main section.table > div > table > tbody > tr > th {
    padding-block: 10px;
    min-width: 200px;
    max-width: 500px;
    padding-inline: calc(var(--gutter) / 2);
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr > td,
    html > body > main section.table > div > table > thead > tr > th,
    html > body > main section.table > div > table > tbody > tr > td,
    html > body > main section.table > div > table > tbody > tr > th {
        padding-block: 8px 4px;
    }
}

html > body > main section.table > div > table > thead > tr > td:first-child,
html > body > main section.table > div > table > thead > tr > th:first-child,
html > body > main section.table > div > table > tbody > tr > td:first-child,
html > body > main section.table > div > table > tbody > tr > th:first-child {
    padding-left: 32px;
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr > td:first-child,
    html > body > main section.table > div > table > thead > tr > th:first-child,
    html > body > main section.table > div > table > tbody > tr > td:first-child,
    html > body > main section.table > div > table > tbody > tr > th:first-child {
        padding-left: 16px;
    }
}

html > body > main section.table > div > table > thead > tr > td:last-child,
html > body > main section.table > div > table > thead > tr > th:last-child,
html > body > main section.table > div > table > tbody > tr > td:last-child,
html > body > main section.table > div > table > tbody > tr > th:last-child {
    padding-right: 32px;
}

@media (max-width: 1023px) {
    html > body > main section.table > div > table > thead > tr > td:last-child,
    html > body > main section.table > div > table > thead > tr > th:last-child,
    html > body > main section.table > div > table > tbody > tr > td:last-child,
    html > body > main section.table > div > table > tbody > tr > th:last-child {
        padding-right: 16px;
    }
}

html > body > main section.table > div > table > thead > tr:hover > td, html > body > main section.table > div > table > thead > tr.active > td:first-child,
html > body > main section.table > div > table > tbody > tr:hover > td,
html > body > main section.table > div > table > tbody > tr.active > td:first-child {
    background: rgba(224, 231, 245, 0.2117647059);
}

    html > body > main section.table > div > table > thead > tr:hover > td:first-child, html > body > main section.table > div > table > thead > tr.active > td:first-child:first-child,
    html > body > main section.table > div > table > tbody > tr:hover > td:first-child,
    html > body > main section.table > div > table > tbody > tr.active > td:first-child:first-child {
        border-radius: 8px 0 0 8px;
    }

    html > body > main section.table > div > table > thead > tr:hover > td:last-child, html > body > main section.table > div > table > thead > tr.active > td:first-child:last-child,
    html > body > main section.table > div > table > tbody > tr:hover > td:last-child,
    html > body > main section.table > div > table > tbody > tr.active > td:first-child:last-child {
        border-radius: 0 8px 8px 0;
    }

html > body > main section.table > div > table > thead > tr:not(:first-child):not(:hover):not(.active):not([data-first]) > td:first-child p,
html > body > main section.table > div > table > tbody > tr:not(:first-child):not(:hover):not(.active):not([data-first]) > td:first-child p {
    opacity: 0;
}

html > body > main section.table > div > table > thead > tr.active:not(:hover) > td:first-child p,
html > body > main section.table > div > table > tbody > tr.active:not(:hover) > td:first-child p {
    opacity: 0.1;
}

html > body > main section.table > div > table > thead > tr.active:not(:hover):not([data-first]) > td:first-child p,
html > body > main section.table > div > table > tbody > tr.active:not(:hover):not([data-first]) > td:first-child p {
    opacity: 0 !important;
}

@media (max-width: 1023px) {
    html > body > main section.table > div {
        width: 100vw;
        translate: calc(-1 * var(--margin));
        padding-inline: var(--margin);
        overflow: scroll;
    }
}

html > body > main section.table p {
    margin: 0;
    transition: opacity 0.3s ease;
}

html > body > main section.table:not(:has(tr:nth-child(12))) > button {
    display: none;
}

html > body > main section.table tr:nth-child(n+12):not(.show) {
    display: none;
}

html > body > main section.table > button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.table > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.table > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.table > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.table > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.table > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.table > button {
    background: var(--accent);
}

    html > body > main section.table > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.table > button {
    color: #ffffff;
    margin-top: 24px;
    align-self: center;
}

html > body > main section.table span.date-placeholder-wrap:has(button) {
    width: 528px !important;
    display: flex;
}

@media (max-width: 1279px) {
    html > body > main section.table span.date-placeholder-wrap:has(button) {
        width: calc(3 * var(--column-width) + 2 * var(--gutter) + 60px) !important;
    }
}

@media (max-width: 639px) {
    html > body > main section.table span.date-placeholder-wrap:has(button) {
        width: 100% !important;
    }
}

html > body > main section.table span.date-placeholder-wrap:has(button) input {
    width: 100%;
    border-bottom-right-radius: 27px;
    border-top-right-radius: 27px;
}

html > body > main section.table span.date-placeholder-wrap:has(button) > button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.table span.date-placeholder-wrap:has(button) > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.table span.date-placeholder-wrap:has(button) > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.table span.date-placeholder-wrap:has(button) > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.table span.date-placeholder-wrap:has(button) > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.table span.date-placeholder-wrap:has(button) > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.table span.date-placeholder-wrap:has(button) > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.table span.date-placeholder-wrap:has(button) > button {
    background: var(--accent);
}

    html > body > main section.table span.date-placeholder-wrap:has(button) > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.table span.date-placeholder-wrap:has(button) > button {
    position: absolute;
    right: 0;
    color: #ffffff;
    align-self: center;
    margin: 0 !important;
}

/* body/main/!section.text-tiles/&.scss */
html > body > main section.text-tiles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transition: height 0.3s ease, max-height 0.3s ease;
}

    html > body > main section.text-tiles > button {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.text-tiles > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.text-tiles > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.text-tiles > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.text-tiles > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.text-tiles > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.text-tiles > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.text-tiles > button {
    background: var(--accent);
}

    html > body > main section.text-tiles > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.text-tiles > button {
    color: #ffffff;
}

html > body > main section.text-tiles > ul {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 200px;
    gap: var(--gutter);
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.text-tiles > ul > li::before {
        content: none;
    }

@media (min-width: 1512px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        padding: 32px 32px 32px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        padding: 28px 28px 20px 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        padding: 24px 24px 16px 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        padding: 12px 8px 8px 8px;
    }
}

html > body > main section.text-tiles > ul > li > p,
html > body > main section.text-tiles > ul > li > a {
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.text-tiles > ul > li > p,
    html > body > main section.text-tiles > ul > li > a {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

html > body > main section.text-tiles > ul > li > p,
html > body > main section.text-tiles > ul > li > a {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 8px;
}

html > body > main section.text-tiles > ul > li > p {
    background: rgba(78, 93, 156, 0.07);
}

html > body > main section.text-tiles > ul > li > a {
    background: radial-gradient(rgba(78, 93, 156, 0.07), rgba(255, 255, 255, 0.5));
    background-size: 400% 400%;
    background-position: center;
    transition: background-size 0.3s ease, backdrop-filter 0.3s ease;
}

@media (pointer: fine) {
    html > body > main section.text-tiles > ul > li > a:hover {
        background-size: 100% 100%;
        backdrop-filter: saturate(5) blur(15px) brightness(0.74) contrast(1.7) hue-rotate(30deg);
    }
}

html > body > main section.text-tiles > ul > li > a h2,
html > body > main section.text-tiles > ul > li > a span.title {
    display: grid;
    grid-template-columns: 1fr auto;
}

    html > body > main section.text-tiles > ul > li > a h2::after,
    html > body > main section.text-tiles > ul > li > a span.title::after {
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("/styles/images/icons/arrow-45deg.svg");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        content: "";
    }

@media (max-width: 1511px) {
    html > body > main section.text-tiles > ul {
        grid-auto-rows: 180px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.text-tiles > ul {
        grid-auto-rows: 160px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.text-tiles > ul {
        grid-auto-rows: 140px;
    }
}

@media (max-width: 639px) {
    html > body > main section.text-tiles > ul {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1024px) {
    html > body > main section.text-tiles > ul:has(li:nth-child(5)):not(:has(li:nth-child(6))) {
        grid-template-columns: repeat(6, 1fr);
    }

        html > body > main section.text-tiles > ul:has(li:nth-child(5)):not(:has(li:nth-child(6))) > li:nth-child(-n+3) {
            grid-column: span 2;
        }

        html > body > main section.text-tiles > ul:has(li:nth-child(5)):not(:has(li:nth-child(6))) > li:nth-last-child(-n+2) {
            grid-column: span 3;
        }

    html > body > main section.text-tiles > ul:has(:nth-child(6)) {
        grid-template-columns: 1fr 1fr 1fr;
    }

    html > body > main section.text-tiles > ul:has(:nth-child(4)) {
        grid-auto-rows: 220px;
    }
}

html > body > main section.text-tiles > ul > li:nth-child(n+7):not(.show) {
    display: none;
}

html > body > main section.text-tiles:not(:has(li:nth-child(7))) > button {
    display: none;
}

/* body/main/!ul.products-tiles/&.scss */
html > body > main ul.products-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main ul.products-tiles > li::before {
        content: none;
    }

html > body > main ul.products-tiles {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--gutter);
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles {
        grid-template-columns: 1fr;
    }
}

html > body > main ul.products-tiles p {
    margin: 0;
}

/* body/main/div.faq/&.scss */
@media (hover: hover) and (pointer: fine) {
    html > body > main > div.faq:has(button.question-button:hover) button.question-button:not(:hover):not([aria-expanded=true]) {
        opacity: 0.15;
        transition: opacity 0.3s ease-in-out 1s;
    }
}

html > body > main > div.faq > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

@media (max-width: 1511px) {
    html > body > main > div.faq > ul {
        gap: 4px;
    }
}

html > body > main > div.faq > ul > li:before {
    content: none;
}

html > body > main > div.faq > ul > li {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

@media (max-width: 1511px) {
    html > body > main > div.faq > ul > li {
        gap: 12px;
    }
}

html > body > main > div.faq > ul > li > div.answer-container {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    overflow-y: clip;
    overflow-x: visible;
    transition: max-height 0.3s ease-in-out;
}

    html > body > main > div.faq > ul > li > div.answer-container > p {
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

@media (max-width: 1279px) {
    html > body > main > div.faq > ul > li > div.answer-container > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main > div.faq > ul > li > div.answer-container > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main > div.faq > ul > li > div.answer-container > p {
    margin: 0;
}

html > body > main > div.faq > ul > li > div.answer-container > section {
    overflow: visible;
}

    html > body > main > div.faq > ul > li > div.answer-container > section h2,
    html > body > main > div.faq > ul > li > div.answer-container > section h3 {
        display: none !important;
    }

    html > body > main > div.faq > ul > li > div.answer-container > section.text-tiles > button {
        display: none;
    }

@media (max-width: 1511px) {
    html > body > main > div.faq > ul > li > div.answer-container {
        gap: 20px;
    }
}

/* body/header/div.burger/&.hide/&.scss */
html > body > header > div.burger.hide {
    translate: 0 -25%;
    scale: 1.01;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* body/main/!.form-lk/&.express-pay/!form.scss */
html > body > main .form-lk.express-pay form {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    column-gap: var(--gutter);
}

@media (min-width: 640px) {
    html > body > main .form-lk.express-pay form:has(input[name=number]):has(input[name=sum]) > input[name=number], html > body > main .form-lk.express-pay form:has(input[name=number]):has(input[name=sum]) > input[name=sum] {
        width: calc(50% - var(--gutter) / 2);
    }
}

html > body > main .form-lk.express-pay form label.error {
    width: 100%;
}

html > body > main .form-lk.express-pay form > div {
    width: 100%;
}

/* body/main/!.form-lk/div[data-state]/!input.white.scss */
html > body > main .form-lk > div[data-state] input.white {
    display: block;
    width: 100%;
}

    html > body > main .form-lk > div[data-state] input.white:not(:last-of-type) {
        margin-bottom: 16px;
    }

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] input.white:not(:last-of-type) {
        margin-bottom: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main .form-lk > div[data-state] input.white:not(:last-of-type) {
        margin-bottom: 8px;
    }
}

html > body > main .form-lk > div[data-state] input.white[type=number]::-webkit-outer-spin-button, html > body > main .form-lk > div[data-state] input.white[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

html > body > main .form-lk > div[data-state] input.white[type=number] {
    -moz-appearance: textfield;
}

/* body/main/!.form-lk/div[data-state]/&.scss */
html > body > main .form-lk > div[data-state] {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}

    html > body > main .form-lk > div[data-state] button.generic, html > body > main .form-lk > div[data-state] a.generic {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] button.generic, html > body > main .form-lk > div[data-state] a.generic {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] button.generic, html > body > main .form-lk > div[data-state] a.generic {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main .form-lk > div[data-state] button.generic, html > body > main .form-lk > div[data-state] a.generic {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main .form-lk > div[data-state] button.generic::before, html > body > main .form-lk > div[data-state] a.generic::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main .form-lk > div[data-state] button.generic:not([disabled]):hover, html > body > main .form-lk > div[data-state] a.generic:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main .form-lk > div[data-state] button.generic:not([disabled]):hover::before, html > body > main .form-lk > div[data-state] a.generic:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main .form-lk > div[data-state] button.generic::before, html > body > main .form-lk > div[data-state] a.generic::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main .form-lk > div[data-state] button.generic, html > body > main .form-lk > div[data-state] a.generic {
    padding-block: 0;
    color: #ffffff;
}

html > body > main .form-lk > div[data-state] > h2 {
    color: #ffffff;
    margin-bottom: 16px;
    margin-top: 0;
    text-align: center;
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > h2 {
        margin-bottom: 8px;
    }
}

@media (max-width: 639px) {
    html > body > main .form-lk > div[data-state] > h2 {
        margin-bottom: 4px;
    }
}

html > body > main .form-lk > div[data-state] > p {
    color: #a9abb7;
    text-align: center;
    margin-bottom: 32px;
    margin-top: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > p {
        margin-bottom: 24px;
        width: 454px;
        max-width: calc(var(--full-width) - 2 * var(--margin));
    }
}

@media (max-width: 639px) {
    html > body > main .form-lk > div[data-state] > p {
        margin-bottom: 20px;
    }
}

html > body > main .form-lk > div[data-state] > a.close {
    width: 58px;
    height: 58px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #24262d;
    border-radius: 8px;
    position: fixed;
    top: 16px;
    right: 80px;
}

    html > body > main .form-lk > div[data-state] > a.close::before {
        display: block;
        background: url("/styles/images/icons/x.svg");
        width: 46px;
        height: 46px;
        content: "";
        filter: invert(100%);
    }

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > a.close {
        width: 50px;
        height: 50px;
        right: 38px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > a.close {
        right: var(--margin);
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 639px) {
    html > body > main .form-lk > div[data-state] > a.close {
        right: var(--margin);
    }
}

/* body/main/!.form-lk/div[data-state]/form.scss */
html > body > main .form-lk > div[data-state] > form {
    background-color: #ffffff;
    width: 600px;
    padding: 64px 20px 48px;
    border-radius: 8px;
}

@media (max-width: 1511px) {
    html > body > main .form-lk > div[data-state] > form {
        padding: 40px 20px 40px;
    }
}

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > form {
        padding: 32px 16px 32px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > form {
        width: 454px;
        max-width: calc(var(--full-width) - 2 * var(--margin));
        padding: 24px 12px 24px;
    }
}

@media (max-width: 639px) {
    html > body > main .form-lk > div[data-state] > form {
        padding: 12px 12px 12px 12px;
    }
}

html > body > main .form-lk > div[data-state] > form.error > label.error {
    visibility: visible;
}

html > body > main .form-lk > div[data-state] > form label.error {
    visibility: hidden;
    color: #fe6e46;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > form label.error {
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }
}

html > body > main .form-lk > div[data-state] > form > button.repeat-code, html > body > main .form-lk > div[data-state] > form > button.forget {
    color: #4e5d9c;
    display: block;
    background: transparent;
    padding: 0;
    margin-top: 6px;
    height: fit-content;
    width: fit-content;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > form > button.repeat-code, html > body > main .form-lk > div[data-state] > form > button.forget {
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }
}

html > body > main .form-lk > div[data-state] > form > button.forget {
    margin-left: auto;
}

html > body > main .form-lk > div[data-state] > form > div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
}

@media (max-width: 1511px) {
    html > body > main .form-lk > div[data-state] > form > div {
        margin-top: 20px;
    }
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > form > div {
        gap: 12px;
    }
}

html > body > main .form-lk > div[data-state] > form > div > a, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone) {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 54px;
    padding-inline: 0;
    background: transparent;
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > form > div > a, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone) {
        height: 44px;
        gap: 8px;
    }
}

html > body > main .form-lk > div[data-state] > form > div > a, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone) {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main .form-lk > div[data-state] > form > div > a, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone) {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main .form-lk > div[data-state] > form > div > a:not(.back)::before, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone):not(.back)::before {
    display: block;
    content: "";
    background-image: url("/styles/images/icons/plus.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    width: 24px;
    height: 24px;
}

@media (max-width: 1023px) {
    html > body > main .form-lk > div[data-state] > form > div > a:not(.back)::before, html > body > main .form-lk > div[data-state] > form button[type=button]:not(.repeat-code):not(.forget):not(.delete-phone):not(.back)::before {
        width: 16px;
        height: 16px;
    }
}

html > body > main .form-lk > div[data-state] > form button.delete-phone {
    background: none;
}

/* body/main/!dialog/&.modal/&.scss */
html > body > main dialog.modal {
    border: 0;
    margin: 0 auto;
    padding: unset;
    background-color: #24262d;
    position: fixed;
    top: 0;
    left: 0;
    box-shadow: 0 0 0 10000vmax #24262d;
    overflow-y: scroll;
    width: 100svw;
    height: 100svh;
    max-width: unset;
    max-height: unset;
}

    html > body > main dialog.modal div.hide {
        display: none;
    }

    html > body > main dialog.modal > div[data-state=success] img,
    html > body > main dialog.modal > div[data-state=error] img {
        width: 400px;
    }

    html > body > main dialog.modal > div {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
        margin-inline: auto;
        padding-top: 112px;
        display: grid;
        grid-template-rows: min-content min-content;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;
        overflow: hidden;
        padding-bottom: 60px;
    }

@media (max-width: 1023px) {
    html > body > main dialog.modal > div {
        display: block;
    }
}

@media (max-height: 900px) {
    html > body > main dialog.modal > div {
        padding-top: 56px;
        padding-bottom: 24px;
    }
}

@media (max-height: 800px) {
    html > body > main dialog.modal > div {
        padding-top: 32px;
        padding-bottom: 16px;
    }
}

html > body > main dialog.modal > div > h2,
html > body > main dialog.modal > div > p {
    text-align: center;
    color: #ffffff;
    width: calc(6 * var(--column-width) + 5 * var(--gutter));
    margin-inline: auto;
}

html > body > main dialog.modal > div > h2 {
    margin-block: 0;
    font-size: 54px;
    font-weight: 500;
    line-height: 52px;
}

@media (max-width: 1511px) {
    html > body > main dialog.modal > div > h2 {
        font-size: 46px;
        font-weight: 500;
        line-height: 44px;
    }
}

@media (max-width: 1279px) {
    html > body > main dialog.modal > div > h2 {
        font-size: 42px;
        font-weight: 500;
        line-height: 40px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal > div > h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 26px;
    }
}

html > body > main dialog.modal > div > p {
    margin-top: 20px;
    margin-bottom: 16px;
    color: #a9abb7;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal > div > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal > div > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main dialog.modal > div > p > a {
    color: #37ea97;
}

html > body > main dialog.modal > div > img {
    justify-self: center;
    max-width: 100%;
}

html > body > main dialog.modal > div {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    html > body > main dialog.modal > div::-webkit-scrollbar {
        display: none;
    }

html > body > main dialog.modal[open] {
    z-index: 10001;
}

@media (max-width: 1511px) {
    html > body > main dialog.modal > div > p {
        margin-top: 16px;
        margin-bottom: 36px;
    }
}

@media (max-width: 1279px) {
    html > body > main dialog.modal > div > p {
        margin-top: 8px;
        margin-bottom: 28px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal > div {
        width: calc(6 * var(--column-width) + 5 * var(--gutter));
        max-width: 100%;
    }

        html > body > main dialog.modal > div > p {
            margin-top: 8px;
            margin-bottom: 24px;
        }
}

@media (max-width: 639px) {
    html > body > main dialog.modal > div {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
        padding-top: 64px;
    }

        html > body > main dialog.modal > div > p {
            margin-top: 4px;
            margin-bottom: 20px;
        }
}

@media (max-width: 359px) {
    html > body > main dialog.modal {
        height: calc(1 / var(--page-scale));
        min-height: calc(1 / var(--page-scale));
    }
}

html > body > main dialog.modal[data-dialog-name=add-phone], html > body > main dialog.modal[data-dialog-name=settings-phone] {
    margin: 0;
    min-width: 100%;
}

/* body/main/!dialog/&.modal/div[data-state="default"].scss */
html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form {
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    padding: 60px 20px 48px;
    border-radius: 8px;
    justify-content: center;
    margin-bottom: auto;
}

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > div.select:not(:has(input:checked)) > div {
        color: #777a87;
    }

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > input,
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > div.select,
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > textarea {
        opacity: 1;
        transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out;
    }

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > input,
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > div.select {
        width: calc(50% - 8px);
    }

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > textarea {
        width: 100%;
        resize: vertical;
    }

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form:has(div.select[data-open=true]) > input, html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form:has(div.select[data-open=true]) > textarea, html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form:has(div.select[data-open=true]) > div.select:not([data-open=true]) {
        opacity: 0.3;
    }

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
    padding-block: 0;
}

html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > p {
    color: #a9abb7;
    text-align: center;
    width: calc(6 * var(--column-width) + 5 * var(--gutter));
    margin: 16px 0 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > p {
        font-size: 11px;
        font-weight: 600;
        line-height: 14px;
    }
}

html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > p > a {
    color: hsl(152, 68%, 50%);
}

@media (max-width: 1511px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form {
        padding: 48px 20px 32px;
    }

        html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > p {
            margin: 4px 0 0 0;
        }

        html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
            margin-top: -4px;
        }
}

@media (max-width: 1279px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form {
        padding: 24px 20px;
    }

        html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
            margin-top: -8px;
        }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form {
        padding: 24px 12px;
    }

        html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > button {
            margin-top: 0;
        }
}

@media (max-width: 639px) {
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > input,
    html > body > main dialog.modal > div[data-state=default]:not(.code-from) > form > div.select {
        width: 100%;
    }
}

/* body/main/!dialog/&[data-dialog-name="make-order"]/&.scss */
html > body > main dialog[data-dialog-name=make-order] form input[name=name] {
    width: 100% !important;
}

/* body/main/!div.code-from/!label.digits/&.scss */
html > body > main div.code-from label.digits {
    position: relative;
    display: flex;
    width: 372px;
    margin-inline: auto;
    overflow: clip;
}

@media (max-width: 1023px) {
    html > body > main div.code-from label.digits {
        width: 240px;
    }
}

html > body > main div.code-from label.digits > input.code {
    position: absolute;
    width: 452px;
    height: 100%;
    padding-left: 34px;
    letter-spacing: 83px;
    font-variant-numeric: tabular-nums;
    border: transparent;
    outline: none;
    background: transparent;
    overflow: hidden !important;
    font-size: 20px;
    font-weight: 600;
    line-height: 24px;
}

@media (max-width: 1023px) {
    html > body > main div.code-from label.digits > input.code {
        width: 324px;
        padding-left: 23px;
        letter-spacing: 53px;
        font-size: 13px;
        font-weight: 600;
        line-height: 16px;
    }
}

html > body > main div.code-from label.digits > div {
    display: flex;
    gap: 16px;
    justify-content: center;
}

@media (max-width: 1023px) {
    html > body > main div.code-from label.digits > div {
        gap: 8px;
    }
}

html > body > main div.code-from label.digits > div > span {
    width: 81px;
    height: 81px;
    border-radius: 12px;
    background-color: #eef1ff;
    transition: background-color 0.3s ease;
}

@media (max-width: 1023px) {
    html > body > main div.code-from label.digits > div > span {
        width: 54px;
        height: 54px;
        border-radius: 8px;
    }
}

html > body > main div.code-from label.digits > div > span.filled {
    background-color: #37ea97;
}

/* body/main/!div.submenu/menu.main/&.scss */
html > body > main div.submenu > menu.main {
    display: flex;
    gap: 32px;
    height: 54px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main div.submenu > menu.main > li::before {
        content: none;
    }

@media (max-width: 639px) {
    html > body > main div.submenu > menu.main {
        gap: 16px;
    }
}

/* body/main/!section.cart/article/&.scss */
html > body > main section.cart > article {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #24262d;
    border-radius: 8px;
    padding: 32px 32px 16px 32px;
    height: 230px;
    margin-top: 64px;
}

    html > body > main section.cart > article > h2 {
        color: #ffffff;
        margin: 0;
        font-size: 32px;
        font-weight: 500;
        line-height: 36px;
    }

@media (max-width: 1279px) {
    html > body > main section.cart > article > h2 {
        font-size: 28px;
        font-weight: 500;
        line-height: 30px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > h2 {
        font-size: 22px;
        font-weight: 500;
        line-height: 26px;
    }
}

html > body > main section.cart > article > p {
    color: #a9abb7;
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.cart > article > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article {
        min-height: 254px;
        height: unset;
        padding: 12px 12px 12px 12px;
    }
}

/* body/main/!section.cart/article/ul.scss */
html > body > main section.cart > article > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.cart > article > ul > li::before {
        content: none;
    }

html > body > main section.cart > article > ul {
    display: flex;
    justify-content: space-between;
    margin-top: auto;
}

    html > body > main section.cart > article > ul > li.hidden {
        display: none !important;
    }

    html > body > main section.cart > article > ul > li > p {
        color: #ffffff;
        margin: 0;
    }

    html > body > main section.cart > article > ul > li:has(.price) {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        html > body > main section.cart > article > ul > li:has(.price) > p {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
        }

@media (max-width: 1279px) {
    html > body > main section.cart > article > ul > li:has(.price) > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li:has(.price) > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.cart > article > ul > li:has(.price) > p.text {
    color: #a9abb7;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.text {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.text {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.cart > article > ul > li:has(.price) > p.price {
    color: #a9abb7;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
        font-size: 42px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
        font-size: 38px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
        font-size: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
        font-size: 23px;
    }
}

@media (max-width: 639px) {
    html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
        font-size: 18px;
    }
}

html > body > main section.cart > article > ul > li:has(.price) > p.price > em {
    --current-color: hsl(152, 68%, 50%);
    line-height: 1;
    font-weight: 500;
    color: var(--current-color);
    font-style: normal;
}

html > body > main section.cart > article > ul > li:has(.clue) {
    width: calc(3.5 * var(--column-width) + 2.5 * var(--gutter));
    display: flex;
    align-items: end;
}

html > body > main section.cart > article > ul > li:has(button) {
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
}

html > body > main section.cart > article > ul > li > button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.cart > article > ul > li > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.cart > article > ul > li > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.cart > article > ul > li > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.cart > article > ul > li > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.cart > article > ul > li > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.cart > article > ul > li > button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.cart > article > ul > li > button {
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > main section.cart > article > ul > li > button {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li > button {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

html > body > main section.cart > article > ul > li > button {
    color: #24262d;
    height: 72px;
    border-radius: 36px;
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
}

html > body > main section.cart > article > ul > li > p.clue {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul > li > p.clue {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.cart > article > ul {
        flex-wrap: wrap;
        justify-content: start;
        gap: 12px 0;
    }

        html > body > main section.cart > article > ul > li:has(.clue) {
            width: 100%;
        }

        html > body > main section.cart > article > ul > li:has(button) {
            width: 100%;
        }

        html > body > main section.cart > article > ul > li:has(p.price) {
            width: 10em;
        }

        html > body > main section.cart > article > ul > li > button {
            height: 50px;
        }
}

@media (max-width: 639px) {
    html > body > main section.cart > article > ul {
        margin-top: 16px;
    }

        html > body > main section.cart > article > ul > li > button {
            width: 100%;
        }

        html > body > main section.cart > article > ul > li:has(p.price) {
            width: 50%;
        }
}

/* body/main/!section.cart/ul.products-tiles/&.scss */
html > body > main section.cart > ul.products-tiles {
    margin-top: 16px;
}

/* body/main/!section.checker/&:not([data-stage])/&.scss */
html > body > main section.checker:not([data-stage]):has(div.result.hide) button[type=reset] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker:not([data-stage]):has(input:invalid) button[type=submit] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker:not([data-stage]):has(input:invalid) label > input {
    border-radius: 8px;
}

/* body/main/!section.checker/&:not([data-stage])/div.submenu.scss */
html > body > main section.checker:not([data-stage]) > div.submenu {
    display: none;
}

/* body/main/!section.checker/&[data-hidetabs]/&.scss */
html > body > main section.checker[data-hidetabs] > div.submenu {
    display: none;
}

/* body/main/!section.checker/&[data-loading]/&.scss */
html > body > main section.checker[data-loading] {
    cursor: wait !important;
}

    html > body > main section.checker[data-loading] * {
        pointer-events: none;
    }

/* body/main/!section.checker/&[data-stage="address"]/div.submenu.scss */
html > body > main section.checker[data-stage=address] > div.submenu {
    display: none;
}

/* body/main/!section.checker/&[data-stage="address"]/form.scss */
html > body > main section.checker[data-stage=address] > form > button[type=reset] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker[data-stage=address] > form:has(input:invalid) > button[type=submit] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker[data-stage=address] > form:has(input:invalid) > label > input[name=address] {
    border-radius: 8px;
}

/* body/main/!section.checker/&[data-stage="error"]/&.scss */
html > body > main section.checker[data-stage=error] {
    pointer-events: none;
}

    html > body > main section.checker[data-stage=error] :not(h2):not(br) {
        display: none;
    }

    html > body > main section.checker[data-stage=error] > h2 {
        margin-block: 0 32px;
    }

/* body/main/!section.checker/&[data-stage="not-found"]/&.scss */
html > body > main section.checker[data-stage=not-found] > ul.results,
html > body > main section.checker[data-stage=not-found] > div.additional {
    display: none !important;
}

/* body/main/!section.checker/&[data-stage="not-found"]/div.results.scss */
html > body > main section.checker[data-stage=not-found] > div.results {
    display: flex;
    justify-content: center;
    gap: 100px;
    align-items: center;
}

@media (min-width: 1512px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        gap: 100px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        gap: 100px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        gap: 60px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        gap: 60px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        gap: 20px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        margin-top: 96px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        margin-top: 80px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        margin-top: 80px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        margin-top: 60px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        margin-top: 40px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker[data-stage=not-found] > div.results {
        flex-direction: column;
    }
}

html > body > main section.checker[data-stage=not-found] > div.results > a {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.checker[data-stage=not-found] > div.results > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.checker[data-stage=not-found] > div.results > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.checker[data-stage=not-found] > div.results > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.checker[data-stage=not-found] > div.results > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.checker[data-stage=not-found] > div.results > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.checker[data-stage=not-found] > div.results > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.checker[data-stage=not-found] > div.results > a {
    background: var(--accent);
}

    html > body > main section.checker[data-stage=not-found] > div.results > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.checker[data-stage=not-found] > div.results > a {
    color: #ffffff;
}

html > body > main section.checker[data-stage=not-found] > div.results > p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.checker[data-stage=not-found] > div.results > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker[data-stage=not-found] > div.results > p {
        text-align: center;
    }
}

html > body > main section.checker[data-stage=not-found] > div.results > p::after {
    display: inline-block;
    content: "";
    width: 17px;
    height: 17px;
    margin-bottom: -5px;
    margin-left: 6px;
    background: url("/styles/images/wi-fi.svg");
    background-position: bottom right;
    background-repeat: no-repeat;
}

/* body/main/!section.checker/&[data-stage="not-found"]/div.submenu.scss */
html > body > main section.checker[data-stage=not-found] > div.submenu {
    display: none;
}

/* body/main/!section.checker/&[data-stage="not-found"]/form.scss */
html > body > main section.checker[data-stage=not-found] > form:not(:has(input:focus)):not(:has(input[name=address][data-dirty])) > button[type=submit] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker[data-stage=not-found] > form:not(:has(input:focus)):not(:has(input[name=address][data-dirty])) > label > input[name=address] {
    border-radius: 8px 28px 28px 8px;
}

html > body > main section.checker[data-stage=not-found] > form:has(input:focus) > button[type=reset], html > body > main section.checker[data-stage=not-found] > form:has(input[name=address][data-dirty]) > button[type=reset] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* body/main/!section.checker/&[data-stage="not-found"]/h2.scss */
html > body > main section.checker[data-stage=not-found] > h2 {
    margin-bottom: 32px;
}

/* body/main/!section.checker/&[data-stage="not-found"]/p.scss */
html > body > main section.checker[data-stage=not-found] > p {
    margin: 0;
    opacity: 0;
    height: 0;
    pointer-events: none;
    visibility: hidden;
}

/* body/main/!section.checker/&[data-stage="results"]/form.scss */
html > body > main section.checker[data-stage=results] > form:not(:has(input:focus)):not(:has(input[name=address][data-dirty])) > button[type=submit] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

html > body > main section.checker[data-stage=results] > form:has(input:focus) > button[type=reset], html > body > main section.checker[data-stage=results] > form:has(input[name=address][data-dirty]) > button[type=reset] {
    translate: 100% 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

/* body/main/!section.checker/&[data-stage="results"]/h2.scss */
html > body > main section.checker[data-stage=results] > h2 {
    margin-bottom: 32px;
}

/* body/main/!section.checker/&[data-stage="results"]/p.scss */
html > body > main section.checker[data-stage=results] > p {
    margin: 0;
    opacity: 0;
    height: 0;
    pointer-events: none;
    visibility: hidden;
}

/* body/main/!section.checker/div.results/&.scss */
@media (min-width: 1512px) {
    html > body > main section.checker > div.results {
        margin-top: 52px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker > div.results {
        margin-top: 44px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker > div.results {
        margin-top: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker > div.results {
        margin-top: 20px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > div.results {
        margin-top: 20px;
    }
}

html > body > main section.checker > div.results > h3 {
    margin-block: 48px 20px;
}

html > body > main section.checker > div.results > ul > li {
    background-color: #eef1ff;
}

    html > body > main section.checker > div.results > ul > li:has(input.channels-checkbox:checked) {
        z-index: 2;
    }

html > body > main section.checker > div.results > ul:has(input.channels-checkbox:checked) > li:not(:has(input.channels-checkbox:checked)) {
    opacity: 0.5;
}

html > body > main section.checker > div.results > ul:has(input.channels-checkbox:checked) > li:has(input.channels-checkbox:checked) div.tv-prime em {
    color: #777a87;
}

/* body/main/!section.checker/form/&.scss */
html > body > main section.checker > form {
    position: relative;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
    margin-inline: auto;
    display: flex;
    padding-inline: 3px;
    overflow-x: clip;
}

@media (min-width: 1512px) {
    html > body > main section.checker > form {
        margin-top: 36px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.checker > form {
        margin-top: 36px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.checker > form {
        margin-top: 36px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.checker > form {
        margin-top: 32px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > form {
        margin-top: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > form {
        padding-inline: 0px;
        overflow-x: visible;
    }
}

/* body/main/!section.checker/form/button.scss */
html > body > main section.checker > form > button {
    position: absolute !important;
    right: 4px;
    transition: translate 0.15s ease, opacity 0.3s ease, scale 0.3s ease, background-color 0.3s ease, visibility 0.3s ease !important;
}

@media (max-width: 1023px) {
    html > body > main section.checker > form > button {
        right: 0;
    }
}

html > body > main section.checker > form > button[type=reset] {
    transform-origin: center;
    width: 54px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #24262d;
}

    html > body > main section.checker > form > button[type=reset] > svg {
        fill: #ffffff;
    }

@media (max-width: 639px) {
    html > body > main section.checker > form > button[type=reset] {
        width: 45px;
        padding-inline: 0px;
    }
}

html > body > main section.checker > form > button[type=submit] {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.checker > form > button[type=submit] {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.checker > form > button[type=submit] {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.checker > form > button[type=submit] {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.checker > form > button[type=submit]::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.checker > form > button[type=submit]:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.checker > form > button[type=submit]:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.checker > form > button[type=submit]::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.checker > form > button[type=submit] {
    display: flex;
    padding-block: 0;
    align-items: center;
    gap: 16px;
    color: #1f2b5e;
}

    html > body > main section.checker > form > button[type=submit] > svg {
        fill: #1f2b5e;
    }

@media (max-width: 639px) {
    html > body > main section.checker > form > button[type=submit] {
        padding-inline: 6px;
    }
}

/* body/main/!section.documents/ul/&.scss */
html > body > main section.documents > ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 48px calc(var(--gutter) * 3);
}

@media (min-width: 1512px) {
    html > body > main section.documents > ul {
        row-gap: 48px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.documents > ul {
        row-gap: 40px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.documents > ul {
        row-gap: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.documents > ul {
        row-gap: 24px;
    }
}

@media (max-width: 639px) {
    html > body > main section.documents > ul {
        row-gap: 20px;
    }
}

html > body > main section.documents > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.documents > ul > li::before {
        content: none;
    }

@media (max-width: 1023px) {
    html > body > main section.documents > ul {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 639px) {
    html > body > main section.documents > ul {
        grid-template-columns: 1fr;
    }
}

/* body/main/!section.documents/ul/li.scss */
html > body > main section.documents > ul > li {
    position: relative;
}

    html > body > main section.documents > ul > li > a {
        display: grid;
        grid-template-columns: 1.15fr 5fr;
    }

        html > body > main section.documents > ul > li > a > p {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        html > body > main section.documents > ul > li > a > p {
            margin: 0;
        }

            html > body > main section.documents > ul > li > a > p.format {
                font-size: 18px;
                line-height: 24px;
                color: var(--accent);
                font-weight: 700;
            }

@media (max-width: 1279px) {
    html > body > main section.documents > ul > li > a > p.format {
        font-size: 15px;
        line-height: 20px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.documents > ul > li > a > p.format {
        font-size: 14px;
        line-height: 18px;
    }
}

html > body > main section.documents > ul > li > a > p > span.title {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.documents > ul > li > a > p > span.title {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.documents > ul > li > a > p > span.title {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.documents > ul > li > a > p > span.subtitle {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.documents > ul > li > a > p > span.subtitle {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.documents > ul > li > a > p > span.subtitle {
    color: #868894;
}

/* body/main/!section.header-h1/div.breadcrumbs/&.scss */
html > body > main section.header-h1 > div.breadcrumbs > a {
    color: #777a87;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.header-h1 > div.breadcrumbs > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.header-h1 > div.breadcrumbs > a::after {
    content: " / ";
}

/* body/main/!section.hero-screen/div.slider/&.scss */
html > body > main section.hero-screen > div.slider {
    width: calc(12 * var(--column-width) + 11 * var(--gutter));
    position: relative;
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider {
        margin-top: 25svh;
    }
}

html > body > main section.hero-screen > div.slider:not(:has(ul > li:nth-child(5))) > button {
    display: none !important;
}

html > body > main section.hero-screen > div.slider:not(.swiper-initialized) > button {
    opacity: 0 !important;
    visibility: hidden !important;
}

html > body > main section.hero-screen > div.slider > button {
    position: absolute !important;
    display: flex !important;
    top: 50%;
    padding-inline: 11px !important;
    z-index: 10;
    cursor: pointer !important;
    transition: visibility 0.3s ease, opacity 0.3s ease, box-shadow 0.3s ease !important;
}

    html > body > main section.hero-screen > div.slider > button.left {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        height: 54px;
        width: fit-content;
        padding-inline: 32px;
        line-height: 54px !important;
        background: var(--accent);
        color: #ffffff;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > button.left {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.hero-screen > div.slider > button.left {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.hero-screen > div.slider > button.left::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.left:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.hero-screen > div.slider > button.left:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.hero-screen > div.slider > button.left {
    background: var(--accent);
}

    html > body > main section.hero-screen > div.slider > button.left::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > button.left {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.hero-screen > div.slider > button.left::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.left::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.left::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.left:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.hero-screen > div.slider > button.left::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.left::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-left.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.left::after {
        background-image: url("/styles/images/icons/arrow-left.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.left:hover::after {
        mask-position: -32px 0;
        background-position: -32px 0;
    }
}

html > body > main section.hero-screen > div.slider > button.left {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > button.left {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > button.left {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.hero-screen > div.slider > button.left {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.hero-screen > div.slider > button.left::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.left:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.hero-screen > div.slider > button.left:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.hero-screen > div.slider > button.left::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.hero-screen > div.slider > button.left {
    left: 0;
    translate: -50% -50%;
}

html > body > main section.hero-screen > div.slider > button.right {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > button.right {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.hero-screen > div.slider > button.right {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.hero-screen > div.slider > button.right::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.right:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.hero-screen > div.slider > button.right:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.hero-screen > div.slider > button.right {
    background: var(--accent);
}

    html > body > main section.hero-screen > div.slider > button.right::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > button.right {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.hero-screen > div.slider > button.right::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.right::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.hero-screen > div.slider > button.right::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.right:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.hero-screen > div.slider > button.right {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > button.right {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > button.right {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.hero-screen > div.slider > button.right {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.hero-screen > div.slider > button.right::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.hero-screen > div.slider > button.right:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.hero-screen > div.slider > button.right:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.hero-screen > div.slider > button.right::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.hero-screen > div.slider > button.right {
    right: 0;
    translate: 50% -50%;
}

html > body > main section.hero-screen > div.slider > button.swiper-button-disabled {
    visibility: hidden !important;
    opacity: 0 !important;
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > button {
        height: 48px !important;
        padding-inline: 8px !important;
    }

        html > body > main section.hero-screen > div.slider > button.left {
            translate: 50% -50%;
        }

        html > body > main section.hero-screen > div.slider > button.right {
            translate: -50% -50%;
        }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > button {
        display: none !important;
    }
}

/* body/main/!section.lk-component/&.document-update/&.scss */
html > body > main section.lk-component.document-update {
    display: flex;
    gap: var(--gutter);
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update {
        flex-direction: column;
    }
}

html > body > main section.lk-component.document-update > h2 {
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > h2 {
        width: 100%;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    border-radius: 8px;
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
    padding: 25px 32px 25px 16px;
    background-color: #eef1ff;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label {
        padding: 23px 20px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.document-update div.upload-section > label {
        width: 100%;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label > p {
    margin-block: 0 8px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label > p {
        margin-block: 0 4px;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label > p::before {
    content: "";
    width: 32px;
    height: 24px;
    display: block;
    margin-bottom: 8px;
    margin-inline: auto;
    background-image: url("/styles/images/file.svg");
    background-size: contain;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label > p::before {
        height: 16px;
        width: 22px;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label > p {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update div.upload-section > label > p {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label > span {
    color: #a9abb7;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update div.upload-section > label > span {
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label > span {
        font-size: 8px;
        font-weight: 500;
        line-height: 11px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label > span {
        font-size: 10px;
        line-height: 12px;
    }
}

html > body > main section.lk-component.document-update div.upload-section > label > input {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 84px;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

    html > body > main section.lk-component.document-update div.upload-section > label > input:valid {
        opacity: 1;
    }

    html > body > main section.lk-component.document-update div.upload-section > label > input::file-selector-button {
        display: none;
    }

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update div.upload-section > label > input {
        line-height: 72px;
    }
}

/* body/main/!section.lk-component/&.freeze/&.scss */
html > body > main section.lk-component.freeze > form {
    grid-column: 2/4;
    margin-top: 24px;
}

    html > body > main section.lk-component.freeze > form > span {
        display: block;
    }

        html > body > main section.lk-component.freeze > form > span:first-child {
            margin-bottom: 16px;
        }

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > form > span:first-child {
        margin-bottom: 8px;
    }
}

html > body > main section.lk-component.freeze > form > button {
    padding-block: 0;
    margin-top: 24px;
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.freeze > form > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > form > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.freeze > form > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.freeze > form > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.freeze > form > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.freeze > form > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.freeze > form > button {
    background: var(--accent);
}

    html > body > main section.lk-component.freeze > form > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.lk-component.freeze > form > button {
    color: #ffffff;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > form > button {
        margin-top: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.freeze > form {
        width: 100%;
    }
}

html > body > main section.lk-component.freeze > div[data-state] {
    display: flex;
    flex-direction: column;
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
    gap: 0;
}

    html > body > main section.lk-component.freeze > div[data-state] > h3 {
        text-align: center;
        margin-block: 0;
        margin-inline: auto;
    }

    html > body > main section.lk-component.freeze > div[data-state] > img {
        max-width: 320px;
        margin-inline: auto;
        margin-top: 24px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.freeze > div[data-state] > img {
        margin-top: 4px;
        max-width: 280px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > div[data-state] > img {
        max-width: 240px;
    }
}

html > body > main section.lk-component.freeze > div[data-state]:not(.active) {
    display: none;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.freeze > div[data-state] {
        width: 100%;
    }
}

html > body > main section.lk-component.freeze:has(div.active[data-state]) > div.markup, html > body > main section.lk-component.freeze:has(div.active[data-state]) > form {
    display: none;
}

html > body > main section.lk-component.freeze > div[data-state=error] > p {
    text-align: center;
    margin-block: 20px;
    color: #a9abb7;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > p > a {
    color: #37ea97;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > p {
        margin-block: 8px;
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.freeze > div[data-state=error] > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.freeze > div[data-state=error] > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button {
    background: var(--accent);
}

    html > body > main section.lk-component.freeze > div[data-state=error] > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.lk-component.freeze > div[data-state=error] > button:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.lk-component.freeze > div[data-state=error] > button::before {
    content: none;
}

html > body > main section.lk-component.freeze > div[data-state=error] > button::after {
    filter: brightness(0);
}

html > body > main section.lk-component.freeze > div[data-state=error] > button {
    margin-inline: auto;
}

/* body/main/!section.lk-component/&.lk-black-list/&.scss */
html > body > main section.lk-component.lk-black-list {
    display: flex;
    flex-wrap: wrap;
}

    html > body > main section.lk-component.lk-black-list > h3 {
        width: 100%;
        margin-block: 0 24px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > h3 {
        margin-bottom: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-black-list > form {
        margin-bottom: 20px;
    }
}

html > body > main section.lk-component.lk-black-list > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
    margin: 0;
    row-gap: 16px;
    column-gap: 48px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > ul {
        row-gap: 12px;
        column-gap: 24px;
    }
}

html > body > main section.lk-component.lk-black-list > ul:not(:last-child) {
    margin-bottom: 36px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > ul:not(:last-child) {
        margin-bottom: 20px;
    }
}

html > body > main section.lk-component.lk-black-list > ul > li {
    display: flex;
    align-items: center;
    gap: 4px;
}

    html > body > main section.lk-component.lk-black-list > ul > li > p {
        width: 180px;
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > ul > li > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-black-list > ul > li > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > ul > li > p {
        width: 150px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-black-list > ul > li > p {
        width: 136px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-black-list > ul > li > p {
        width: 134px;
    }
}

html > body > main section.lk-component.lk-black-list > ul > li > button {
    background-image: url("/styles/images/cross.svg");
    width: 16px;
    height: 16px;
}

html > body > main section.lk-component.lk-black-list > ul > li::before {
    content: none;
}

html > body > main section.lk-component.lk-black-list > p:last-child {
    text-align: center;
    color: #777a87;
    max-width: 354px;
    margin-inline: auto;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-black-list > p:last-child {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-black-list > p:last-child {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

/* body/main/!section.lk-component/&.lk-contacts/&.scss */
html > body > main section.lk-component.lk-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: space-between;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts {
        gap: 12px;
    }
}

html > body > main section.lk-component.lk-contacts > h2 {
    margin-bottom: 0;
}

html > body > main section.lk-component.lk-contacts > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--gutter);
    list-style: none;
    padding: 0;
    margin: 0;
}

    html > body > main section.lk-component.lk-contacts > ul > li {
        position: relative;
        width: calc(4 * var(--column-width) + 3 * var(--gutter));
        background-color: rgba(78, 93, 156, 0.0705882353);
        padding: 32px 32px 16px;
        aspect-ratio: 472/270;
        border-radius: 8px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts > ul > li {
        padding: 24px 24px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-contacts > ul > li {
        width: 100%;
    }
}

html > body > main section.lk-component.lk-contacts > ul > li::before {
    content: none;
}

html > body > main section.lk-component.lk-contacts > ul > li h3 {
    margin-block: 0 8px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts > ul > li h3 {
        margin-block: 0 4px;
    }
}

html > body > main section.lk-component.lk-contacts > ul > li > a {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts > ul > li > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-contacts > ul > li > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.lk-contacts > ul > li > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.lk-contacts > ul > li > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.lk-contacts > ul > li > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.lk-contacts > ul > li > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.lk-contacts > ul > li > a::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.lk-component.lk-contacts > ul > li > a {
    display: inline-block;
    height: 42px;
    padding-inline: 20px;
    line-height: 42px !important;
    background: #37ea97;
    color: #24262d;
    border-radius: 21px;
}

html > body > main section.lk-component.lk-contacts > ul > li > a {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts > ul > li > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-contacts > ul > li > a {
        height: 32px;
        line-height: 32px !important;
        padding-inline: 12px;
    }
}

html > body > main section.lk-component.lk-contacts > ul > li > a {
    position: absolute;
    bottom: 16px;
    right: 32px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-contacts > ul > li > a {
        bottom: 12px;
        right: 24px;
    }
}

/* body/main/!section.lk-component/&.lk-payment/&.scss */
@media (max-width: 639px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form {
        padding: 24px 12px 24px 12px;
    }
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 32px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

@media (max-width: 1511px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p {
        margin: 0 0 20px;
    }
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p:first-child {
    margin-bottom: 12px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:first-child {
        margin-bottom: 8px;
    }
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p:first-child > span.negative {
    color: #fe6e46;
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p:first-child > span.positive {
    color: hsl(152, 68%, 50%);
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p > span {
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p > span {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p > span {
        font-size: 12px;
        font-weight: 700;
        line-height: 10px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p > span {
        font-size: 14px;
        line-height: 20px;
    }
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) {
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) {
        font-size: 14px;
        font-weight: 700;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) {
        font-size: 12px;
        font-weight: 700;
        line-height: 10px;
    }
}

html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) > span {
    color: hsl(152, 68%, 50%);
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
}

@media (max-width: 1511px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) > span {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) > span {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) > span {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-payment.form-lk > div > form > p:nth-of-type(3) > span {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

/* body/main/!section.lk-component/&.lk-speedtest/&.scss */
html > body > main section.lk-component.lk-speedtest {
    background: #1f2b5e;
    color: #ffffff;
    padding-block: 144px;
    overflow: clip;
    width: unset;
    margin-inline: 0;
    padding-inline: calc(var(--extra-margin-percent) + var(--margin));
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest {
        width: 100%;
        overflow-x: clip;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest {
        padding-block: 72px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest {
        padding-block: 48px !important;
    }
}

html > body > main section.lk-component.lk-speedtest > h2 {
    text-align: center;
    transition: margin 0.3s ease;
    max-width: calc(8 * var(--column-width) + 7 * var(--gutter));
    margin-inline: auto;
}

@media (min-width: 1512px) {
    html > body > main section.lk-component.lk-speedtest > h2 {
        margin-bottom: 104px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.lk-component.lk-speedtest > h2 {
        margin-bottom: 96px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > h2 {
        margin-bottom: 80px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > h2 {
        margin-bottom: 48px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > h2 {
        margin-bottom: 36px;
    }
}

html > body > main section.lk-component.lk-speedtest > p {
    text-align: center;
    max-width: calc(5.5 * var(--column-width) + 4.5 * var(--gutter));
    margin-inline: auto;
    transition: margin 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > p {
        max-width: calc(7 * var(--column-width) + 6 * var(--gutter));
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > div.result-display,
    html > body > main section.lk-component.lk-speedtest > div.background {
        transform-origin: left;
        scale: 1.3;
        translate: 0 60px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > div.result-display,
    html > body > main section.lk-component.lk-speedtest > div.background {
        scale: 1;
        width: 800px !important;
        height: 800px !important;
    }
}

/* body/main/!section.lk-component/&.lk-speedtest/div.background.scss */
html > body > main section.lk-component.lk-speedtest > div.background {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: min(100vw, 1512px);
    height: min(100vw, 1512px);
    transition: translate 0.3s ease;
    pointer-events: none;
}

    html > body > main section.lk-component.lk-speedtest > div.background::before {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("/styles/images/concentric-rings-background.svg");
        background-size: 100%;
        background-position: center -50px;
        background-repeat: no-repeat;
        transition: background-position 0.3s ease;
        content: "";
    }

/* body/main/!section.lk-component/&.lk-speedtest/div.result-display.scss */
html > body > main section.lk-component.lk-speedtest > div.result-display {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: min(100vw, 1512px);
    height: min(100vw, 1512px);
    opacity: 0;
    transition: opacity 0.3s ease, translate 0.3s ease;
    pointer-events: none;
    --rotate-outer: 10deg;
    --rotate-inner: 10deg;
}

    html > body > main section.lk-component.lk-speedtest > div.result-display::before, html > body > main section.lk-component.lk-speedtest > div.result-display::after {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: center;
        transition: rotate 1s ease;
        content: "";
    }

    html > body > main section.lk-component.lk-speedtest > div.result-display::before {
        background-image: url("/styles/images/speedtest/outer.svg");
        background-size: 100%;
        rotate: var(--rotate-outer);
    }

    html > body > main section.lk-component.lk-speedtest > div.result-display::after {
        background-image: url("/styles/images/speedtest/inner.svg");
        background-size: 83.1%;
        rotate: var(--rotate-inner);
    }

/* body/main/!section.lk-component/&.lk-speedtest/ul.result.scss */
html > body > main section.lk-component.lk-speedtest > ul.result {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.lk-component.lk-speedtest > ul.result > li::before {
        content: none;
    }

html > body > main section.lk-component.lk-speedtest > ul.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 56px;
    margin-top: -24px;
    position: relative;
    z-index: 1;
}

    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        margin: 0;
        color: rgba(255, 255, 255, 0.85);
        text-align: center;
    }

@media (min-width: 1512px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        font-size: 14px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        font-size: 13px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        font-size: 13px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        font-size: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p {
        font-size: 12px;
    }
}

html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
    padding-right: 0.15em;
    font-style: normal;
    color: #ffffff;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.06em;
}

@media (min-width: 1512px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
        font-size: 42px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
        font-size: 36px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
        font-size: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
        font-size: 32px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > ul.result > li > p > em {
        font-size: 28px;
    }
}

@media (max-width: 1511px) {
    html > body > main section.lk-component.lk-speedtest > ul.result {
        padding-top: 1vw;
        gap: 4vw;
    }
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > ul.result {
        padding-top: 2.4vw;
        gap: 3.5vw;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > ul.result {
        padding-top: calc(100px - 5.5vw);
        gap: 4.5vw;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > ul.result {
        padding-top: 42px;
        gap: 20px;
    }
}

/* body/main/!section.lk-component/&.profile/&.scss */
html > body > main section.lk-component.profile {
    display: flex;
    align-items: end;
    gap: var(--gutter);
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile {
        flex-direction: column;
    }
}

html > body > main section.lk-component.profile > div.user-profile {
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
    margin-top: -128px;
}

@media (max-width: 1511px) {
    html > body > main section.lk-component.profile > div.user-profile {
        margin-top: -92px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div.user-profile {
        margin-top: 0;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div.user-profile {
        width: 100%;
    }

        html > body > main section.lk-component.profile > div.user-profile > svg {
            width: 64px;
            height: 64px;
            object-fit: contain;
        }

        html > body > main section.lk-component.profile > div.user-profile > h3 {
            margin-block: 12px 8px;
        }
}

html > body > main section.lk-component.profile > div.user-profile > p:first-of-type {
    color: #777a87;
}

    html > body > main section.lk-component.profile > div.user-profile > p:first-of-type > b {
        font-weight: inherit;
        color: #24262d;
    }

html > body > main section.lk-component.profile > div:last-of-type {
    margin-top: -12px;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
    height: fit-content;
    padding: 32px 32px 16px;
    display: flex;
    justify-content: space-between;
    background-color: #24262d;
    border-radius: 8px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type {
        margin-top: 16px;
        width: 100%;
        padding: 24px 24px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.profile > div:last-of-type {
        flex-direction: column;
        gap: 12px;
        padding: 17px 12px 8px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div > p {
    color: #a9abb7;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div > p {
    margin: 0;
}

html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span {
    display: block;
    margin-top: 12px;
    font-size: 42px;
    font-weight: 500;
    line-height: 36px;
}

    html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span.positive {
        color: #37ea97;
    }

    html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span.negative {
        color: #fe6e46;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span {
        font-size: 32px;
        font-weight: 500;
        line-height: 32px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span {
        font-size: 28px;
        font-weight: 500;
        line-height: 28px;
        margin-top: 4px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:first-child > span {
        font-size: 18px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span {
    position: relative;
    display: flex;
    align-items: center;
    color: #ffffff;
    margin-top: 4px;
    width: fit-content;
    height: 42px;
    font-size: 26px;
    font-weight: 500;
    line-height: 28px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span {
        font-size: 20px;
        font-weight: 500;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span {
        font-size: 16px;
        font-weight: 500;
        line-height: 20px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span {
        height: 38px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span {
        height: fit-content;
        margin-bottom: 4px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span > a {
    position: absolute;
    top: 2px;
    right: -21px;
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("/styles/images/info.svg");
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > span > a {
        top: 1px;
        right: -29px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:nth-child(2) > p > time {
    color: #ffffff;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child {
        display: flex;
        gap: 24px;
        align-items: center;
        margin-top: 4px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a, html > body > main section.lk-component.profile > div:last-of-type > div:last-child > button {
    display: block;
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a {
    display: flex !important;
    align-items: center;
    gap: 16px;
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a::after {
    order: -1;
    display: block;
    content: "";
    background-image: url("/styles/images/icons/plus.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 20px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > a::after {
        width: 16px;
        height: 16px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > ul {
    position: absolute;
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #ffffff;
    cursor: pointer;
    width: fit-content;
    padding: 13px 32px;
    margin-top: 8px;
}

    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label:has(input:checked) {
        color: rgba(255, 255, 255, 0.5);
    }

        html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label:has(input:checked):before {
            opacity: 0.5;
        }

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label {
        margin-top: 4px;
        padding: 14px 0;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label {
        margin-top: 0;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label:before {
    content: "";
    background: url("/styles/images/etc.svg") no-repeat center;
    width: 20px;
    height: 16px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label:before {
        width: 16px;
    }
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label input {
    display: none;
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label:not(:has(input:checked)) > ul {
    display: none;
}

html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 2;
    background-color: #F2F3F8;
    border-radius: 8px;
    margin: 0;
    padding: 8px;
}

    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul > li::before {
        content: none;
    }

    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul > li > a {
        display: block;
        text-wrap: nowrap;
        padding: 12px 6px;
        border-radius: 8px;
        color: #777a87;
        transition: background 0.3s ease-in-out;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul > li > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul > li > a:hover {
        background: #ffffff;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.profile > div:last-of-type > div:last-child > label > ul > li > a {
        padding: 8px 4px;
    }
}

/* body/main/!section.lk-component/&.traffic-rate/&.scss */
html > body > main section.lk-component.traffic-rate > div.result {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 72px;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.traffic-rate > div.result {
        margin-top: 48px;
    }
}

html > body > main section.lk-component.traffic-rate > div.result.hide {
    display: none;
}

html > body > main section.lk-component.traffic-rate > div.result > p {
    margin: 0;
}

html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
    margin-bottom: 2px;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 28px;
        font-weight: 600;
        line-height: 30px;
    }
}

@media (max-width: 639px) and (max-width: 1511px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
}

@media (max-width: 639px) and (max-width: 1279px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }
}

@media (max-width: 639px) and (max-width: 1023px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 639px) and (max-width: 639px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (min-width: 1024px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=title] {
        font-size: 28px;
        line-height: 30px;
        font-weight: 600;
    }
}

html > body > main section.lk-component.traffic-rate > div.result [data-result=provider] {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=provider] {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=provider] {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.lk-component.traffic-rate > div.result [data-result=provider] {
    margin-bottom: 24px;
    color: #a9abb7;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.traffic-rate > div.result [data-result=provider] {
        margin-bottom: 16px;
    }
}

html > body > main section.lk-component.traffic-rate > div.result p:has([data-result=cost]) {
    color: hsl(152, 68%, 50%);
}

    html > body > main section.lk-component.traffic-rate > div.result p:has([data-result=cost]) > em {
        font-size: 42px;
        line-height: 36px;
        font-weight: 500;
        font-style: normal;
    }

@media (max-width: 639px) {
    html > body > main section.lk-component.traffic-rate > div.result p:has([data-result=cost]) > em {
        font-size: 18px;
        line-height: 16px;
    }
}

html > body > main section.lk-component.traffic-rate > div.result p:has([data-result=cost]) > span {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
}

/* body/main/!section.news/ul/&.scss */
html > body > main section.news > ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gutter);
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1023px) {
    html > body > main section.news > ul {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    html > body > main section.news > ul {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* body/main/!section.service-info/div/&.scss */
html > body > main section.service-info > div {
    padding: 32px 32px 16px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 24px 0;
    align-items: end;
    border-radius: 8px;
    background-color: #24262d;
    color: #ffffff;
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div {
        gap: 16px 0;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info > div {
        grid-template-columns: 1fr 1fr;
        padding: 12px 12px 8px 12px;
    }
}

/* body/main/!section.service-info/div/div.cost.scss */
html > body > main section.service-info > div > div.cost {
    color: #37ea97;
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.cost {
        grid-column: 2;
        grid-row: 3;
    }
}

html > body > main section.service-info > div > div.cost > p > span {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.cost > p > span {
        font-size: 8px;
        line-height: 8px;
    }
}

/* body/main/!section.service-info/div/div.title.scss */
html > body > main section.service-info > div > div.title {
    grid-row: 1/3;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.title {
        gap: 0;
        grid-row: 1;
        grid-column: 1/3;
    }
}

html > body > main section.service-info > div > div.title > h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
}

@media (max-width: 1511px) {
    html > body > main section.service-info > div > div.title > h2 {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.service-info > div > div.title > h2 {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div > div.title > h2 {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.title > h2 {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

html > body > main section.service-info > div > div.title > h2 {
    margin-bottom: auto;
}

html > body > main section.service-info > div > div.title > p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.service-info > div > div.title > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div > div.title > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.service-info > div > div.title > p {
    font-size: 14px;
    color: #a9abb7;
    display: flex;
    align-items: center;
    gap: 1ch;
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div > div.title > p {
        font-size: 12px;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.title > p {
        line-height: 24px;
    }
}

html > body > main section.service-info > div > div.title > p > label {
    display: block;
    height: 100%;
    width: 30px;
}

html > body > main section.service-info > div > div.title:has(ul.tags.column) {
    justify-content: center;
}

    html > body > main section.service-info > div > div.title:has(ul.tags.column) > h2 {
        margin-bottom: 0;
    }

html > body > main section.service-info > div > div.title > ul.tags > li {
    color: #a9abb7;
}

/* body/main/!section.service-info/div/div.value.scss */
html > body > main section.service-info > div > div.value {
    grid-column: 2;
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > div.value {
        grid-row: 3;
        grid-column: 1;
    }
}

html > body > main section.service-info > div > div.value > p > em {
    color: #37ea97;
}

html > body > main section.service-info > div > div.value > p > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.service-info > div > div.value > p > span {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div > div.value > p > span {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.service-info > div > div.value > p > span {
    color: #777a87;
}

/* body/main/!section.service-info/div/ul.props.scss */
html > body > main section.service-info > div > ul.props {
    grid-column: 2/4;
    grid-row: 1;
}

    html > body > main section.service-info > div > ul.props > li {
        color: #a9abb7;
        gap: 0;
    }

        html > body > main section.service-info > div > ul.props > li > p.text {
            font-size: 14px;
            line-height: 36px;
        }

@media (max-width: 1023px) {
    html > body > main section.service-info > div > ul.props > li > p.text {
        line-height: 28px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > ul.props > li > p.text {
        font-size: 12px;
        line-height: 24px;
    }
}

html > body > main section.service-info > div > ul.props > li > p.price {
    font-size: 16px;
    line-height: 36px;
}

@media (max-width: 1023px) {
    html > body > main section.service-info > div > ul.props > li > p.price {
        line-height: 28px;
    }
}

@media (max-width: 639px) {
    html > body > main section.service-info > div > ul.props > li > p.price {
        font-size: 12px;
        line-height: 24px;
    }
}

@media (max-width: 532px) {
    html > body > main section.service-info > div > ul.props {
        grid-row: 2;
        grid-column: 1/3;
    }
}

/* body/main/!section.services/ul/&.scss */
html > body > main section.services > ul {
    width: 100%;
}

html > body > main section.services > ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gutter);
}

html > body > main section.services > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.services > ul > li::before {
        content: none;
    }

    html > body > main section.services > ul > li > a {
        background-color: rgba(186, 199, 255, 0.07);
        border-radius: 8px;
        display: flex;
        padding: 32px 32px 16px 32px;
        justify-content: space-between;
        aspect-ratio: 716/172;
        transition: background-color 0.3s ease;
    }

        html > body > main section.services > ul > li > a > aside {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

            html > body > main section.services > ul > li > a > aside > h3,
            html > body > main section.services > ul > li > a > aside > p {
                margin: 0;
                height: fit-content;
            }

            html > body > main section.services > ul > li > a > aside > h3 {
                font-size: 20px;
                font-weight: 600;
                line-height: 26px;
            }

@media (max-width: 1279px) {
    html > body > main section.services > ul > li > a > aside > h3 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.services > ul > li > a > aside > h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

html > body > main section.services > ul > li > a > aside > p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.services > ul > li > a > aside > p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.services > ul > li > a > aside > p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.services > ul > li > a > img,
html > body > main section.services > ul > li > a > svg {
    grid-column: 2/3;
    grid-row: 1/3;
    align-self: center;
}

@media (pointer: fine) {
    html > body > main section.services > ul > li > a:hover {
        background-color: #24262d;
    }
}

html > body > main section.services > ul > li.all-services-link {
    width: fit-content;
}

    html > body > main section.services > ul > li.all-services-link > a {
        display: inline-flex;
        align-items: center;
        gap: 16px;
        height: 54px;
        width: fit-content;
        padding-inline: 32px;
        line-height: 54px !important;
        background: var(--accent);
        color: #ffffff;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main section.services > ul > li.all-services-link > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.services > ul > li.all-services-link > a {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.services > ul > li.all-services-link > a::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.services > ul > li.all-services-link > a:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.services > ul > li.all-services-link > a:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.services > ul > li.all-services-link > a {
    background: var(--accent);
}

    html > body > main section.services > ul > li.all-services-link > a::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.services > ul > li.all-services-link > a {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.services > ul > li.all-services-link > a::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.services > ul > li.all-services-link > a::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.services > ul > li.all-services-link > a::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.services > ul > li.all-services-link > a:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.services > ul > li.all-services-link > a {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.services > ul > li.all-services-link > a {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.services > ul > li.all-services-link > a:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.services > ul > li.all-services-link > a::before {
    content: none;
}

html > body > main section.services > ul > li.all-services-link > a::after {
    filter: brightness(0);
}

html > body > main section.services > ul > li.all-services-link > a {
    aspect-ratio: 332/132;
    height: 100%;
    border-radius: 8px;
    justify-content: center;
    padding: 0;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
    color: #ffffff;
}

    html > body > main section.services > ul > li.all-services-link > a::after {
        filter: brightness(100);
    }

@media (max-width: 1511px) {
    html > body > main section.services > ul > li > a {
        padding: 28px 28px 12px 28px;
    }

        html > body > main section.services > ul > li > a > img,
        html > body > main section.services > ul > li > a > svg {
            max-width: 128px;
            max-height: 128px;
        }

        html > body > main section.services > ul > li > a > aside {
            gap: 12px;
        }
}

@media (max-width: 1279px) {
    html > body > main section.services > ul > li > a {
        padding: 16px 16px 8px 16px;
    }

        html > body > main section.services > ul > li > a > img,
        html > body > main section.services > ul > li > a > svg {
            max-width: 112px;
            max-height: 112px;
        }

        html > body > main section.services > ul > li > a > aside {
            gap: 8px;
        }
}

@media (max-width: 1023px) {
    html > body > main section.services > ul > li > a {
        aspect-ratio: 298/132;
        padding: 12px;
    }

        html > body > main section.services > ul > li > a > img,
        html > body > main section.services > ul > li > a > svg {
            max-width: 72px;
            max-height: 72px;
            align-self: flex-end;
        }
}

@media (max-width: 639px) {
    html > body > main section.services > ul {
        grid-template-columns: 1fr;
    }

        html > body > main section.services > ul > li > a {
            aspect-ratio: 332/132;
            padding: 12px;
        }

            html > body > main section.services > ul > li > a > img,
            html > body > main section.services > ul > li > a > svg {
                max-width: 72px;
                max-height: 72px;
                align-self: flex-end;
            }
}

@media (min-width: 640px) {
    html > body > main section.services > ul > li.all-services-link {
        display: none;
    }
}

/* body/main/!ul.products-tiles/&.lk/&.scss */
html > body > main ul.products-tiles.lk:has(input.channels-checkbox:checked) > li:not(:has(input.channels-checkbox:checked)) {
    opacity: 0.5;
}

html > body > main ul.products-tiles.lk:has(input.channels-checkbox:checked) > li:has(input.channels-checkbox:checked) div.value em {
    color: #777a87;
}

/* body/main/!ul.products-tiles/li/!.button-additional.scss */
html > body > main ul.products-tiles > li .button-additional {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li .button-additional {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main ul.products-tiles > li .button-additional {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: start !important;
    gap: 8px;
    height: 100%;
    background: transparent !important;
    color: #4e5d9c !important;
    padding: 0 !important;
    font-weight: 600;
    transition: color 0.3s ease !important;
}

@media (pointer: fine) {
    html > body > main ul.products-tiles > li .button-additional:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%) !important;
    }

        html > body > main ul.products-tiles > li .button-additional:hover::after {
            background: hsl(152, 68%, 50%);
        }
}

html > body > main ul.products-tiles > li .button-additional::before {
    content: none !important;
}

html > body > main ul.products-tiles > li .button-additional::after {
    display: block;
    width: 12px;
    height: 12px;
    background: #4e5d9c;
    mask-image: url("/styles/images/icons/plus-functional.svg");
    content: "";
    transition: background-color 0.3s ease;
}

/* body/main/!ul.products-tiles/li/!.change-tariff.scss */
html > body > main ul.products-tiles > li .change-tariff {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li .change-tariff {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li .change-tariff {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main ul.products-tiles > li .change-tariff {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main ul.products-tiles > li .change-tariff::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main ul.products-tiles > li .change-tariff:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main ul.products-tiles > li .change-tariff:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main ul.products-tiles > li .change-tariff::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main ul.products-tiles > li .change-tariff {
    display: inline-block;
    height: 42px;
    padding-inline: 20px;
    line-height: 42px !important;
    background: #37ea97;
    color: #24262d;
    border-radius: 21px;
}

html > body > main ul.products-tiles > li .change-tariff {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li .change-tariff {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li .change-tariff {
        height: 32px;
        line-height: 32px !important;
        padding-inline: 12px;
    }
}

html > body > main ul.products-tiles > li .change-tariff {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li .change-tariff {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main ul.products-tiles > li .change-tariff {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: hsl(152, 68%, 50%);
    color: #ffffff;
    font-weight: 600;
}

/* body/main/!ul.products-tiles/li/!i[data-icon].scss */
html > body > main ul.products-tiles > li i[data-icon] {
    display: block;
    width: 1em;
    height: 1em;
    align-self: start;
    translate: 0 50%;
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li i[data-icon] {
        translate: 0;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li i[data-icon] {
        width: 0.75em;
        height: 0.75em;
        translate: 0;
    }
}

/* body/main/!ul.products-tiles/li/!label:has(.channels-checkbox).scss */
html > body > main ul.products-tiles > li label:has(.channels-checkbox) {
    display: block;
    width: 100%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
}

    html > body > main ul.products-tiles > li label:has(.channels-checkbox) > input {
        display: none;
    }

/* body/main/!ul.products-tiles/li/&.scss */
@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li {
        padding: 32px 32px 16px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li {
        padding: 28px 28px 16px 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li {
        padding: 16px 16px 8px 16px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li {
        padding: 12px 12px 8px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li {
        padding: 12px 12px 8px 12px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li {
        height: 290px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li {
        height: 258px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li {
        height: 226px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li {
        height: 182px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li {
        height: 192px;
    }
}

html > body > main ul.products-tiles > li {
    background: rgba(78, 93, 156, 0.07);
}

html > body > main ul.products-tiles > li {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 8px;
    transition: opacity 0.3s ease;
}

    html > body > main ul.products-tiles > li:not(:has(input.channels-checkbox:checked)) > div.channels {
        display: none;
    }

    html > body > main ul.products-tiles > li:hover figure::after {
        opacity: 1 !important;
    }

    html > body > main ul.products-tiles > li > div > :not(figure) {
        transition: opacity 0.3s ease;
    }

    html > body > main ul.products-tiles > li:has(figure:hover) > div > :not(figure) {
        opacity: 0.5;
    }

/* body/main/div.faq/!button.question-button/&.scss */
html > body > main > div.faq button.question-button {
    margin-left: calc((100% - var(--full-width)) / 2 + var(--margin));
    padding: 0;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
    height: 54px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
    text-align: left;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main > div.faq button.question-button {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button {
        width: calc(6 * var(--column-width) + 5 * var(--gutter));
        height: 44px;
    }
}

@media (max-width: 639px) {
    html > body > main > div.faq button.question-button {
        width: 100%;
    }
}

html > body > main > div.faq button.question-button > div {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    height: 54px;
    min-width: 54px;
    max-width: 54px;
    border-radius: 50%;
    background-color: var(--accent);
    overflow: hidden;
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button > div {
        min-width: 44px;
        max-width: 44px;
        height: 44px;
    }
}

html > body > main > div.faq button.question-button > div > svg {
    position: absolute;
    transition: left 0.3s ease-in-out;
}

    html > body > main > div.faq button.question-button > div > svg:first-of-type {
        left: 11px;
    }

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button > div > svg:first-of-type {
        left: 6px;
    }
}

html > body > main > div.faq button.question-button > div > svg:last-of-type {
    left: -48px;
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button > div > svg:last-of-type {
        left: -43px;
    }
}

html > body > main > div.faq button.question-button > div > div {
    position: absolute;
    width: 254px;
    height: 192px;
    transform: rotate(-50deg);
    left: -244px;
    transition: left 0.3s ease-in-out;
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(241, 9, 79, 0.22) 0%, rgba(241, 9, 79, 0.31) 33.45%, rgba(241, 9, 79, 0) 100%);
}

html > body > main > div.faq button.question-button:hover > div > svg:first-of-type {
    left: 70px;
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button:hover > div > svg:first-of-type {
        left: 64px;
    }
}

html > body > main > div.faq button.question-button:hover > div > svg:last-of-type {
    left: 11px;
}

@media (max-width: 1023px) {
    html > body > main > div.faq button.question-button:hover > div > svg:last-of-type {
        left: 6px;
    }
}

html > body > main > div.faq button.question-button:hover > div > div {
    left: -68px;
}

/* body/main/!dialog/&.modal/&[data-dialog-name="settings-phone"]/&.scss */
html > body > main dialog.modal[data-dialog-name=settings-phone] h2 {
    margin-bottom: 32px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] h2 {
        margin-bottom: 24px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form {
    display: block !important;
    width: 600px;
    margin-inline: auto;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form {
        width: 440px;
    }
}

@media (max-width: 639px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form {
        width: 100%;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child {
    display: flex;
    margin-bottom: 32px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child {
        margin-bottom: 16px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child > h3 {
    margin: 0 auto 0 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child > h3 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child > h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child > button {
    color: #fe6e46;
    height: 24px;
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:first-child > button {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0;
    margin: 0;
}

@media (max-width: 1023px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul {
        gap: 6px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li {
    display: flex;
}

    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li::before {
        content: none;
    }

    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li > label {
        display: flex;
        align-items: center;
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li > label {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li > label {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li > label {
        height: 16px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > ul > li > input {
    display: none;
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:last-child {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 56px;
}

@media (max-width: 1023px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div:last-child {
        gap: 8px;
        margin-top: 32px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.back {
    background: transparent;
    padding-inline: 0;
    color: #24262d;
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
    line-height: 18px !important;
}

@media (max-width: 1279px) {
    html > body > main dialog.modal[data-dialog-name=settings-phone] > div > form > div > button.generic {
        line-height: 16px !important;
    }
}

/* body/main/!div.submenu/menu.main/li/&.etc.scss */
html > body > main div.submenu > menu.main > li.etc {
    position: relative;
}

    html > body > main div.submenu > menu.main > li.etc > button {
        background-image: url("/styles/images/icons/etc.svg");
        width: 54px;
        height: 54px;
        background-repeat: no-repeat;
        background-position: center center;
        border-radius: 8px;
        background-color: #F2F3F8;
    }

@media (max-width: 1023px) {
    html > body > main div.submenu > menu.main > li.etc {
        display: none;
    }
}

html > body > main div.submenu > menu.main > li.etc::before {
    display: none !important;
}

@media (pointer: fine) {
    html > body > main div.submenu > menu.main > li.etc:hover::after {
        display: block;
        position: absolute;
        width: 200%;
        height: 200%;
        top: -25%;
        left: -75%;
        content: "";
    }
}

/* body/main/!div.submenu/menu.main/li/&.scss */
html > body > main div.submenu > menu.main > li {
    display: flex;
    align-items: stretch;
    white-space: nowrap;
}

    html > body > main div.submenu > menu.main > li > a,
    html > body > main div.submenu > menu.main > li > button {
        color: #a9abb7;
        z-index: 1;
        display: flex;
        align-items: center;
    }

        html > body > main div.submenu > menu.main > li > a small,
        html > body > main div.submenu > menu.main > li > button small {
            margin-left: 6px;
            vertical-align: super;
        }

    html > body > main div.submenu > menu.main > li > a,
    html > body > main div.submenu > menu.main > li > button {
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main div.submenu > menu.main > li > a,
    html > body > main div.submenu > menu.main > li > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main div.submenu > menu.main > li::before {
    z-index: 0;
}

html > body > main div.submenu > menu.main > li > label {
    display: flex;
    align-items: center;
    color: #a9abb7;
    cursor: pointer;
    z-index: 1;
}

    html > body > main div.submenu > menu.main > li > label:has(input:checked) {
        color: #ffffff;
    }

html > body > main div.submenu > menu.main > li > label {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main div.submenu > menu.main > li > label {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main div.submenu > menu.main > li.current > a,
html > body > main div.submenu > menu.main > li.current > button, html > body > main div.submenu > menu.main > li:has(input:checked) > a,
html > body > main div.submenu > menu.main > li:has(input:checked) > button {
    color: #24262d;
}

html > body > main div.submenu > menu.main > li.current::before, html > body > main div.submenu > menu.main > li:has(input:checked)::before {
    opacity: 1;
    background-color: #37ea97;
}

@media (min-width: 1024px) {
    html > body > main div.submenu > menu.main > li:nth-child(n+5):not(.etc) {
        display: none;
    }
}

@media (min-width: 1024px) and (pointer: fine) {
    html > body > main div.submenu > menu.main > li:has(input):not(:has(input:checked)):hover::before {
        background-color: var(--hover-color);
        opacity: 1;
    }
}

@media (min-width: 1024px) and (pointer: fine) {
    html > body > main div.submenu > menu.main > li:not(:has(input)):not(.current):hover::before {
        background-color: var(--hover-color);
        opacity: 1;
    }
}

html > body > main div.submenu > menu.main > li::before {
    display: block !important;
    content: "";
    width: 36px;
    height: 36px;
    border-radius: 200px;
    margin-right: -18px;
    margin-top: 9px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

@media (max-width: 1279px) {
    html > body > main div.submenu > menu.main > li::before {
        width: 32px;
        height: 32px;
        margin-right: -16px;
        margin-top: 12px;
    }
}

@media (max-width: 1023px) {
    html > body > main div.submenu > menu.main > li::before {
        width: 20px;
        height: 20px;
        margin-right: -10px;
        margin-top: 17px;
    }
}

/* body/main/!div.submenu/menu.main/li/menu.expandable.scss */
html > body > main div.submenu > menu.main > li > menu.expandable {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main div.submenu > menu.main > li > menu.expandable > li::before {
        content: none;
    }

html > body > main div.submenu > menu.main > li > menu.expandable {
    position: absolute;
    z-index: 3;
    right: 0;
    top: 58px;
    border-radius: 8px;
    background-color: #F2F3F8;
    padding: 8px;
    transition: background-color 0.3s ease;
}

    html > body > main div.submenu > menu.main > li > menu.expandable > li {
        border-radius: 8px;
        transition: background-color 0.3s ease;
    }

        html > body > main div.submenu > menu.main > li > menu.expandable > li > a {
            display: block;
            padding: 15px 8px;
            color: #777a87;
        }

        html > body > main div.submenu > menu.main > li > menu.expandable > li.current {
            display: none;
        }

@media (pointer: fine) {
    html > body > main div.submenu > menu.main > li > menu.expandable > li:hover {
        background-color: #ffffff;
    }
}

html > body > main div.submenu > menu.main > li > menu.expandable.hidden {
    display: none;
}

/* body/main/!section.checker/form/label/&.scss */
html > body > main section.checker > form > label {
    width: 100%;
}

    html > body > main section.checker > form > label > input {
        width: calc(100% - 1px);
        border-radius: 8px 28px 28px 8px;
        font-size: 16px;
        transition: border-radius 0.3s ease, background-color 0.3s ease;
    }

    html > body > main section.checker > form > label > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > main section.checker > form > label > ul > li::before {
            content: none;
        }

    html > body > main section.checker > form > label > ul {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        html > body > main section.checker > form > label > ul::-webkit-scrollbar {
            display: none;
        }

        html > body > main section.checker > form > label > ul:not(:has(li)), html > body > main section.checker > form > label > ul.hide {
            height: 0;
            padding-block: 0;
            pointer-events: none;
            visibility: hidden;
        }

    html > body > main section.checker > form > label > ul {
        width: calc(5 * var(--column-width) + 4 * var(--gutter));
        height: calc(16px + min(240px, var(--item-count) * 48px + (var(--item-count) - 1) * 8px));
        overflow-y: scroll;
        position: absolute;
        z-index: 2;
        margin-top: 8px;
        padding: 8px;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        background: #eef1ff;
        transition: height 0.3s ease, padding-block 0.3s ease, visibility 0.3s ease;
    }

@media (max-width: 1023px) {
    html > body > main section.checker > form > label > ul {
        gap: 4px;
    }
}

@media (max-width: 639px) {
    html > body > main section.checker > form > label > ul {
        width: calc(8 * var(--column-width) + 7 * var(--gutter));
    }
}

html > body > main section.checker > form > label > ul > li > button {
    height: 48px;
    width: 100%;
    padding-block: 0;
    padding-inline: 8px;
    text-align: end;
    border-radius: 8px;
    color: #777a87;
    transition: background-color 0.3s ease;
    cursor: pointer;
    line-height: 48px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    direction: rtl;
}

@media (pointer: fine) {
    html > body > main section.checker > form > label > ul > li > button:hover {
        background-color: #ffffff;
    }
}

@media (max-width: 1023px) {
    html > body > main section.checker > form > label > ul > li > button {
        height: 36px;
        line-height: 36px;
    }
}

/* body/main/!section.hero-screen/div.slider/ul/&.scss */
html > body > main section.hero-screen > div.slider > ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    html > body > main section.hero-screen > div.slider > ul > li::before {
        content: none;
    }

html > body > main section.hero-screen > div.slider > ul {
    display: flex;
}

    html > body > main section.hero-screen > div.slider > ul:not(:has(li:nth-child(4))) {
        justify-content: center;
    }

html > body > main section.hero-screen > div.slider > ul {
    width: 100%;
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--gutter) 0;
    }
}

/* body/main/!section.lk-component/&.document-update/form/&.scss */
html > body > main section.lk-component.document-update > form {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
}

    html > body > main section.lk-component.document-update > form > div {
        margin-bottom: 32px;
    }

@media (max-width: 1511px) {
    html > body > main section.lk-component.document-update > form > div {
        margin-bottom: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > div {
        margin-bottom: 20px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.document-update > form > div {
        margin-bottom: 12px;
    }
}

html > body > main section.lk-component.document-update > form > div.passport-type label:first-of-type {
    margin-left: auto;
}

html > body > main section.lk-component.document-update > form > div.passport-type label:last-of-type {
    margin-right: auto;
}

html > body > main section.lk-component.document-update > form > div.passport-type:not(:has(input[value=ru]:checked)) #ru-passport-fields {
    display: none;
}

html > body > main section.lk-component.document-update > form > div.passport-type:not(:has(input[value=foreign]:checked)) #foreign-passport-fields {
    display: none;
}

html > body > main section.lk-component.document-update > form div {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: var(--gutter);
}

    html > body > main section.lk-component.document-update > form div h4 {
        margin: 0;
        width: 100%;
    }

    html > body > main section.lk-component.document-update > form div input {
        width: calc(4 * var(--column-width) + 3 * var(--gutter));
    }

@media (max-width: 639px) {
    html > body > main section.lk-component.document-update > form div input {
        width: 100%;
    }
}

html > body > main section.lk-component.document-update > form label:has(input[type=radio]) {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form label:has(input[type=radio]) {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.lk-component.document-update > form label:has(input[type=radio]) {
    display: flex;
    align-items: center;
    height: 36px;
}

    html > body > main section.lk-component.document-update > form label:has(input[type=radio])::before {
        content: "";
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: -18px;
    }

@media (max-width: 639px) {
    html > body > main section.lk-component.document-update > form label:has(input[type=radio])::before {
        width: 20px;
        height: 20px;
        margin-right: -10px;
    }
}

html > body > main section.lk-component.document-update > form label:has(input[type=radio]) input {
    display: none;
}

html > body > main section.lk-component.document-update > form label:has(input[type=radio]):not(:has(input:checked)) {
    color: #a9abb7;
    cursor: pointer;
}

html > body > main section.lk-component.document-update > form label:has(input[type=radio]):has(input:checked)::before {
    background-color: #37ea97;
}

html > body > main section.lk-component.document-update > form textarea {
    width: 100%;
    height: 172px;
    resize: none;
}

html > body > main section.lk-component.document-update > form > button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.document-update > form > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.document-update > form > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.document-update > form > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.document-update > form > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.document-update > form > button {
    background: var(--accent);
}

    html > body > main section.lk-component.document-update > form > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

html > body > main section.lk-component.document-update > form > button {
    padding-block: 0;
    color: #ffffff;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form {
        width: 100%;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state] {
    flex-direction: column;
    width: calc(4 * var(--column-width) + 3 * var(--gutter));
    gap: 0;
}

    html > body > main section.lk-component.document-update > form > div[data-state] > h3 {
        text-align: center;
        margin-block: 0;
        margin-inline: auto;
    }

    html > body > main section.lk-component.document-update > form > div[data-state] > img {
        max-width: 320px;
        margin-inline: auto;
        margin-top: 24px;
    }

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form > div[data-state] > img {
        margin-top: 4px;
        max-width: 280px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > div[data-state] > img {
        max-width: 240px;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state]:not(.active) {
    display: none;
}

@media (max-width: 639px) {
    html > body > main section.lk-component.document-update > form > div[data-state] {
        width: 100%;
    }
}

html > body > main section.lk-component.document-update > form:has(div.active[data-state]) > *:not(.active) {
    display: none;
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > p {
    text-align: center;
    margin-block: 20px;
    color: #a9abb7;
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > p > a {
    color: #37ea97;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > p {
        margin-block: 8px;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    width: fit-content;
    padding-inline: 32px;
    line-height: 54px !important;
    background: var(--accent);
    color: #ffffff;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.document-update > form > div[data-state=error] > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.document-update > form > div[data-state=error] > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
    background: var(--accent);
}

    html > body > main section.lk-component.document-update > form > div[data-state=error] > button::before {
        background: radial-gradient(54.67% 50% at 50% 50%, var(--accent-secondary-1) 0%, var(--accent-secondary-2) 33.45%, var(--accent-secondary-3) 100%);
    }

@media (max-width: 1023px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button::after {
    content: "";
    width: 32px;
    height: 20px;
}

@supports (mask-image: url("")) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button::after {
        background-color: currentColor;
        mask-image: url("/styles/images/icons/arrow-right.svg");
        mask-position: 0 0;
        mask-size: contain;
        transition: mask-position 0.3s ease, background-color 0.3s ease;
        will-change: mask-position;
    }
}

@supports not (mask-image: url("")) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button::after {
        background-image: url("/styles/images/icons/arrow-right.svg");
        background-position: 0 0;
        background-size: contain;
        transition: background-position 0.3s ease;
        will-change: background-position;
    }
}

@media (pointer: fine) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button:hover::after {
        mask-position: 32px 0;
        background-position: 32px 0;
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
    padding-inline: 0;
    color: #24262d;
    background: transparent;
    transition: color 0.3s ease;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (pointer: fine) {
    html > body > main section.lk-component.document-update > form > div[data-state=error] > button:hover {
        box-shadow: none !important;
        color: hsl(152, 68%, 50%);
    }
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button::before {
    content: none;
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button::after {
    filter: brightness(0);
}

html > body > main section.lk-component.document-update > form > div[data-state=error] > button {
    margin-inline: auto;
}

/* body/main/!section.lk-component/&.lk-speedtest/&[data-state="init"]/&.scss */
html > body > main section.lk-component.lk-speedtest[data-state=init] > ul.result {
    display: none;
}

html > body > main section.lk-component.lk-speedtest[data-state=init] button[type=submit] > svg.loading {
    display: none;
}

/* body/main/!section.lk-component/&.lk-speedtest/&[data-state="result"]/&.scss */
html > body > main section.lk-component.lk-speedtest[data-state=result] > div.result-display {
    opacity: 1 !important;
}

html > body > main section.lk-component.lk-speedtest[data-state=result] > div.result-display,
html > body > main section.lk-component.lk-speedtest[data-state=result] > div.background {
    translate: 0 245px;
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest[data-state=result] > div.result-display,
    html > body > main section.lk-component.lk-speedtest[data-state=result] > div.background {
        translate: 0 280px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest[data-state=result] > div.result-display,
    html > body > main section.lk-component.lk-speedtest[data-state=result] > div.background {
        translate: 0 120px;
    }
}

html > body > main section.lk-component.lk-speedtest[data-state=result] > div.background::before {
    background-position: center 0;
}

html > body > main section.lk-component.lk-speedtest[data-state=result] > p {
    display: none;
}

html > body > main section.lk-component.lk-speedtest[data-state=result] button[type=submit] > svg.arrow-right {
    display: none;
}

html > body > main section.lk-component.lk-speedtest[data-state=result] > form {
    margin-top: 64px;
}

html > body > main section.lk-component.lk-speedtest[data-state=result] {
    padding-bottom: 96px;
}

/* body/main/!section.lk-component/&.lk-speedtest/form/&.scss */
html > body > main section.lk-component.lk-speedtest > form {
    position: relative;
    width: calc(8 * var(--column-width) + 7 * var(--gutter));
    margin-inline: auto;
    display: flex;
    justify-content: center;
}

@media (min-width: 1512px) {
    html > body > main section.lk-component.lk-speedtest > form {
        margin-top: 36px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.lk-component.lk-speedtest > form {
        margin-top: 36px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > form {
        margin-top: 36px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > form {
        margin-top: 32px;
    }
}

@media (max-width: 639px) {
    html > body > main section.lk-component.lk-speedtest > form {
        margin-top: 24px;
    }
}

/* body/main/!section.lk-component/&.lk-speedtest/form/button.scss */
html > body > main section.lk-component.lk-speedtest > form > button {
    position: relative;
    display: inline-block;
    height: 54px;
    padding-block: 0;
    padding-inline: 32px;
    line-height: 54px !important;
    color: #24262d;
    border-radius: 27px;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main section.lk-component.lk-speedtest > form > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.lk-component.lk-speedtest > form > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main section.lk-component.lk-speedtest > form > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main section.lk-component.lk-speedtest > form > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main section.lk-component.lk-speedtest > form > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main section.lk-component.lk-speedtest > form > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main section.lk-component.lk-speedtest > form > button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main section.lk-component.lk-speedtest > form > button {
    display: flex;
    padding-block: 0;
    align-items: center;
    gap: 16px;
    color: #1f2b5e;
    transition: translate 0.15s ease, opacity 0.3s ease, scale 0.3s ease, background-color 0.3s ease, color 0.3s ease, visibility 0.3s ease !important;
}

    html > body > main section.lk-component.lk-speedtest > form > button > svg {
        fill: #1f2b5e;
    }

    html > body > main section.lk-component.lk-speedtest > form > button.hide-icons svg {
        display: none;
    }

/* body/main/!section.lk-component/&.login/div/&.scss */
html > body > main section.lk-component.login > div:not(.active) {
    display: none;
}

html > body > main section.lk-component.login > div.active {
    display: flex;
}

/* body/main/!section.news/ul/li/&.scss */
html > body > main section.news > ul > li::before {
    display: none;
}

html > body > main section.news > ul > li:has(picture) {
    grid-column: span 2;
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li:has(picture) {
        grid-column: unset;
        grid-row: span 2;
    }
}

/* body/main/!ul.products-tiles/&.lk/li/div.info.scss */
html > body > main ul.products-tiles.lk > li > div.info {
    flex-direction: column;
    justify-content: start;
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.info {
        gap: 4px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.info {
        gap: 2px;
    }
}

/* body/main/!ul.products-tiles/li/div.buy/&.scss */
html > body > main ul.products-tiles > li > div.buy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gutter);
}

    html > body > main ul.products-tiles > li > div.buy:not(:has(> :nth-child(2))) > div {
        grid-column: 2;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-1][data-card-state] > [data-state] {
        display: none;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-1][data-card-state][data-card-state=rent] > [data-state=rent] {
        display: flex;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-1][data-card-state][data-card-state=rent-or-buy] > [data-state=rent-or-buy] {
        display: flex;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] {
        align-items: center;
        justify-content: space-between;
        flex-direction: row;
    }

        html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] > button {
            border-radius: 21px;
            background: rgba(78, 93, 156, 0.07);
            height: 42px;
            width: 42px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] > [data-state] {
        display: none;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=delete] > button[data-state=delete] {
        display: flex;
        background-color: #E6E9F1;
        color: #4e5d9c;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=buy] > [data-state=buy] {
        display: grid;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=change-count] > div[data-state=change-count] {
        display: flex;
    }

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] {
        align-items: center;
        justify-content: space-between;
    }

        html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] > button {
            border-radius: 21px;
            background: rgba(78, 93, 156, 0.07);
            height: 42px;
            width: 42px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

            html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] > button path {
                fill: #4e5d9c;
            }

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] > button {
        width: 32px !important;
        height: 32px !important;
    }

        html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] > button > svg {
            scale: 0.8;
        }
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] span {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] span {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] div[data-state=change-count] span {
    color: #4e5d9c;
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state] > * {
    display: none;
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=delete] > button[data-state=delete] {
    background-color: #E6E9F1;
    color: #4e5d9c;
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=buy] > [data-state=buy] {
    display: grid;
}

html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=change-count] {
    justify-content: end;
}

    html > body > main ul.products-tiles > li > div.buy [data-card-2][data-card-state][data-card-state=change-count] > div[data-state=change-count] {
        display: flex;
    }

html > body > main ul.products-tiles > li > div.buy.expanded p.description {
    display: none;
}

@media (min-width: 1024px) {
    html > body > main ul.products-tiles > li > div.buy.expanded[data-expand=all] figure {
        display: none;
    }
}

/* body/main/!ul.products-tiles/li/div.channels/&.scss */
html > body > main ul.products-tiles > li > div.channels {
    position: absolute;
    left: 0;
    top: calc(100% + 8px);
    width: 100%;
    max-height: 160px;
    background: #eef1ff;
    overflow: scroll;
    z-index: 10;
    border-radius: 8px;
}

    html > body > main ul.products-tiles > li > div.channels > ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        html > body > main ul.products-tiles > li > div.channels > ul > li::before {
            content: none;
        }

    html > body > main ul.products-tiles > li > div.channels > ul {
        display: flex;
        flex-direction: column;
        padding: 16px;
        gap: 12px;
    }

        html > body > main ul.products-tiles > li > div.channels > ul > li {
            font-size: 13px;
            font-weight: 600;
            line-height: 16px;
        }

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.channels > ul > li {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main ul.products-tiles > li > div.channels > ul > li {
    color: #777a87;
}

/* body/main/!ul.products-tiles/li/div.info/&.scss */
html > body > main ul.products-tiles > li > div.info {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

    html > body > main ul.products-tiles > li > div.info > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 28px;
        font-weight: 600;
        line-height: 30px;
    }

@media (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 24px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 20px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 16px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        font-size: 16px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        line-height: 28px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        line-height: 24px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        line-height: 20px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        line-height: 20px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info p.title {
        line-height: 20px;
    }
}

html > body > main ul.products-tiles > li > div.info p.title {
    color: #24262d;
}

html > body > main ul.products-tiles > li > div.info p.description {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main ul.products-tiles > li > div.info p.description {
    font-family: "Montserrat";
    color: #777a87;
    line-height: 1.4;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 13px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 11px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 10px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info p.description {
        font-size: 9px;
    }
}

html > body > main ul.products-tiles > li > div.info p.description > em.dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 4px;
    background: #A9ABB7;
    translate: 0 -0.25em;
    margin-inline: 8px;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        width: 100px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        width: 88px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        width: 72px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        width: 48px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        width: 64px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        height: 100px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        height: 88px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        height: 72px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        height: 48px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info > figure {
        height: 64px;
    }
}

html > body > main ul.products-tiles > li > div.info > figure {
    position: relative;
    display: block;
    aspect-ratio: 1;
    margin: 0;
}

    html > body > main ul.products-tiles > li > div.info > figure > picture {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        border-radius: 100%;
        background: #ffffff;
        transition: scale 0.1s ease, translate 0.1s ease;
    }

        html > body > main ul.products-tiles > li > div.info > figure > picture > img {
            display: block;
            width: 65%;
            height: 65%;
            object-fit: contain;
            object-position: center;
        }

    html > body > main ul.products-tiles > li > div.info > figure::after {
        position: absolute;
        display: block;
        width: 24px;
        height: 24px;
        border-radius: 100%;
        top: 0;
        right: 0;
        background-color: #37ea97;
        background-image: url("/styles/images/icons/zoom.svg");
        background-size: 16px;
        background-repeat: no-repeat;
        background-position: center;
        content: "";
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    html > body > main ul.products-tiles > li > div.info > figure:hover > picture {
        translate: -50% 58%;
        scale: 2.6;
        z-index: 1;
        position: relative;
    }

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.info > figure:hover > picture {
        translate: -76% 76%;
        scale: 2.8;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.info > figure:hover > picture {
        translate: -105% 105%;
        scale: 3.4;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.info > figure:hover > picture {
        translate: -70% 70%;
        scale: 2.5;
    }
}

html > body > main ul.products-tiles > li > div.info:has(ul.props) {
    gap: 6px;
}

/* body/main/!section.hero-screen/div.slider/ul/li/&.premium.scss */
html > body > main section.hero-screen > div.slider > ul > li.premium::before {
    background-color: #24262d;
    background-image: url("/styles/images/premium-card-background.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
}

html > body > main section.hero-screen > div.slider > ul > li.premium h3 {
    background: var(--test-b, linear-gradient(90deg, #FFF 2.09%, #B494FF 24.8%, #D78FB2 38.15%, #FF8B59 61.07%, #FFA159 71.54%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html > body > main section.hero-screen > div.slider > ul > li.premium p {
    color: #dde0ee;
}

/* body/main/!section.hero-screen/div.slider/ul/li/&.scss */
html > body > main section.hero-screen > div.slider > ul > li {
    border-radius: 8px;
    clip-path: polygon(0px 15.4px, 0px 14px, 0px 12.7px, 0px 11.5px, 0px 10.4px, 0.1px 9.4px, 0.1px 8.4px, 0.2px 7.4px, 0.4px 6.6px, 0.5px 5.8px, 0.7px 5.1px, 1px 4.4px, 1.2px 3.8px, 1.5px 3.2px, 1.9px 2.7px, 2.3px 2.3px, 2.7px 1.9px, 3.2px 1.5px, 3.8px 1.2px, 4.4px 1px, 5.1px 0.7px, 5.8px 0.5px, 6.6px 0.4px, 7.4px 0.2px, 8.4px 0.1px, 9.4px 0.1px, 10.4px 0px, 11.5px 0px, 12.7px 0px, 14px 0px, calc(100% - 14px) 0px, calc(100% - 12.7px) 0px, calc(100% - 11.5px) 0px, calc(100% - 10.4px) 0px, calc(100% - 9.4px) 0.1px, calc(100% - 8.4px) 0.1px, calc(100% - 7.4px) 0.2px, calc(100% - 6.6px) 0.4px, calc(100% - 5.8px) 0.5px, calc(100% - 5.1px) 0.7px, calc(100% - 4.4px) 1px, calc(100% - 3.8px) 1.2px, calc(100% - 3.2px) 1.5px, calc(100% - 2.7px) 1.9px, calc(100% - 2.3px) 2.3px, calc(100% - 1.9px) 2.7px, calc(100% - 1.5px) 3.2px, calc(100% - 1.2px) 3.8px, calc(100% - 1px) 4.4px, calc(100% - 0.7px) 5.1px, calc(100% - 0.5px) 5.8px, calc(100% - 0.4px) 6.6px, calc(100% - 0.2px) 7.4px, calc(100% - 0.1px) 8.4px, calc(100% - 0.1px) 9.4px, calc(100% - 0px) 10.4px, calc(100% - 0px) 11.5px, calc(100% - 0px) 12.7px, calc(100% - 0px) 14px, calc(100% - 0px) 15.4px, calc(100% - 0px) calc(100% - 15.4px), calc(100% - 0px) calc(100% - 14px), calc(100% - 0px) calc(100% - 12.7px), calc(100% - 0px) calc(100% - 11.5px), calc(100% - 0px) calc(100% - 10.4px), calc(100% - 0.1px) calc(100% - 9.4px), calc(100% - 0.1px) calc(100% - 8.4px), calc(100% - 0.2px) calc(100% - 7.4px), calc(100% - 0.4px) calc(100% - 6.6px), calc(100% - 0.5px) calc(100% - 5.8px), calc(100% - 0.7px) calc(100% - 5.1px), calc(100% - 1px) calc(100% - 4.4px), calc(100% - 1.2px) calc(100% - 3.8px), calc(100% - 1.5px) calc(100% - 3.2px), calc(100% - 1.9px) calc(100% - 2.7px), calc(100% - 2.3px) calc(100% - 2.3px), calc(100% - 2.7px) calc(100% - 1.9px), calc(100% - 3.2px) calc(100% - 1.5px), calc(100% - 3.8px) calc(100% - 1.2px), calc(100% - 4.4px) calc(100% - 1px), calc(100% - 5.1px) calc(100% - 0.7px), calc(100% - 5.8px) calc(100% - 0.5px), calc(100% - 6.6px) calc(100% - 0.4px), calc(100% - 7.4px) calc(100% - 0.2px), calc(100% - 8.4px) calc(100% - 0.1px), calc(100% - 9.4px) calc(100% - 0.1px), calc(100% - 10.4px) calc(100% - 0px), calc(100% - 11.5px) calc(100% - 0px), calc(100% - 12.7px) calc(100% - 0px), calc(100% - 14px) calc(100% - 0px), 14px calc(100% - 0px), 12.7px calc(100% - 0px), 11.5px calc(100% - 0px), 10.4px calc(100% - 0px), 9.4px calc(100% - 0.1px), 8.4px calc(100% - 0.1px), 7.4px calc(100% - 0.2px), 6.6px calc(100% - 0.4px), 5.8px calc(100% - 0.5px), 5.1px calc(100% - 0.7px), 4.4px calc(100% - 1px), 3.8px calc(100% - 1.2px), 3.2px calc(100% - 1.5px), 2.7px calc(100% - 1.9px), 2.3px calc(100% - 2.3px), 1.9px calc(100% - 2.7px), 1.5px calc(100% - 3.2px), 1.2px calc(100% - 3.8px), 1px calc(100% - 4.4px), 0.7px calc(100% - 5.1px), 0.5px calc(100% - 5.8px), 0.4px calc(100% - 6.6px), 0.2px calc(100% - 7.4px), 0.1px calc(100% - 8.4px), 0.1px calc(100% - 9.4px), 0px calc(100% - 10.4px), 0px calc(100% - 11.5px), 0px calc(100% - 12.7px), 0px calc(100% - 14px), 0px calc(100% - 15.4px));
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: end;
    width: calc(3 * var(--column-width) + 2 * var(--gutter));
    margin-right: var(--gutter);
    aspect-ratio: 1;
    color: #ffffff;
    flex-shrink: 0;
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        padding: 32px 32px 32px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        padding: 28px 28px 20px 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        padding: 24px 24px 16px 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        padding: 12px 8px 8px 8px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        width: calc(3 * var(--column-width) + 2 * var(--gutter));
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        width: calc(var(--column-width) * 2.63 + 2 * var(--gutter));
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li {
        width: calc(4 * var(--column-width) + 3 * var(--gutter));
    }
}

html > body > main section.hero-screen > div.slider > ul > li::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1f2b5e;
    transition: background-color 0.3s ease, filter 0.3s ease;
    translate: 0;
    content: "";
    z-index: -1;
}

html > body > main section.hero-screen > div.slider > ul > li h3 {
    font-size: 28px;
    font-weight: 600;
    line-height: 30px;
}

@media (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li h3 {
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li h3 {
        font-size: 20px;
        font-weight: 600;
        line-height: 22px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li h3 {
        font-size: 14px;
        font-weight: 600;
        line-height: 16px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li h3 {
    margin: 0;
    transition: color 0.3s ease;
}

html > body > main section.hero-screen > div.slider > ul > li p {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li p {
    margin-bottom: 0;
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        margin-top: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        margin-top: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        margin-top: 8px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        margin-top: 8px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li p {
        margin-top: 8px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: block;
    aspect-ratio: 1;
    z-index: -1;
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        width: 145px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        width: 104px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        width: 88px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        width: 104px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        width: 69px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        height: 145px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        height: 104px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        height: 88px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        height: 104px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        height: 69px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        bottom: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        bottom: 14px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        bottom: 12px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        bottom: 10px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        bottom: 8px;
    }
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        right: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        right: 14px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        right: 12px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        right: 10px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li img, html > body > main section.hero-screen > div.slider > ul > li svg {
        right: 8px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li > button,
html > body > main section.hero-screen > div.slider > ul > li > a {
    display: flex;
    flex-direction: column;
    justify-content: end;
    transition: opacity 0.3s ease;
    cursor: pointer;
    position: relative;
    z-index: 1;
    height: 20%;
}

    html > body > main section.hero-screen > div.slider > ul > li > button > p,
    html > body > main section.hero-screen > div.slider > ul > li > a > p {
        margin: 0;
        text-align: start;
        font-size: 13px;
        font-weight: 600;
        line-height: 16px;
    }

@media (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li > button > p,
    html > body > main section.hero-screen > div.slider > ul > li > a > p {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li > button::before,
html > body > main section.hero-screen > div.slider > ul > li > a::before {
    display: block;
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    position: absolute;
    left: -24px;
    top: -24px;
    content: "";
}

html > body > main section.hero-screen > div.slider > ul > li:not(:hover) > button,
html > body > main section.hero-screen > div.slider > ul > li:not(:hover) > a {
    opacity: 0;
}

html > body > main section.hero-screen > div.slider > ul > li:has(button):hover::before, html > body > main section.hero-screen > div.slider > ul > li:has(a):hover::before {
    filter: saturate(0) contrast(0.8) brightness(0.7);
}

html > body > main section.hero-screen > div.slider > ul > li:has(button):hover h3, html > body > main section.hero-screen > div.slider > ul > li:has(a):hover h3 {
    color: #37ea97 !important;
}

html > body > main section.hero-screen > div.slider > ul > li > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity 0.3s ease;
}

@media (min-width: 1512px) {
    html > body > main section.hero-screen > div.slider > ul > li > div {
        padding: 32px 32px 32px 32px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main section.hero-screen > div.slider > ul > li > div {
        padding: 28px 28px 20px 28px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main section.hero-screen > div.slider > ul > li > div {
        padding: 24px 24px 16px 24px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main section.hero-screen > div.slider > ul > li > div {
        padding: 12px 12px 12px 12px;
    }
}

@media (max-width: 639px) {
    html > body > main section.hero-screen > div.slider > ul > li > div {
        padding: 12px 8px 8px 8px;
    }
}

html > body > main section.hero-screen > div.slider > ul > li > div.description > p {
    margin: 0;
}

html > body > main section.hero-screen > div.slider > ul > li.active > div.main {
    opacity: 0;
}

html > body > main section.hero-screen > div.slider > ul > li.active > button > p.more,
html > body > main section.hero-screen > div.slider > ul > li.active > a > p.more {
    display: none;
}

html > body > main section.hero-screen > div.slider > ul > li:not(.active) > div.description {
    opacity: 0;
}

html > body > main section.hero-screen > div.slider > ul > li:not(.active) > button > p.less,
html > body > main section.hero-screen > div.slider > ul > li:not(.active) > a > p.less {
    display: none;
}

/* body/main/!section.lk-component/&.login/div/&[data-state="auth"]/&.scss */
html > body > main section.lk-component.login > div[data-state=auth] label.error {
    position: absolute;
}

/* body/main/!section.lk-component/&.login/div/&[data-state="auth"]/form.error.scss */
html > body > main section.lk-component.login > div[data-state=auth] > form.error input {
    background-color: #FFEEF5 !important;
}

/* body/main/!section.lk-component/&.login/div/&[data-state="password"]/&.scss */
html > body > main section.lk-component.login > div[data-state=password] form.error > label.error {
    visibility: visible;
}

html > body > main section.lk-component.login > div[data-state=password] label.error {
    position: static;
    display: block;
    visibility: hidden;
}

/* body/main/!section.lk-component/&.login/div/&[data-state="password-error"]/&.scss */
html > body > main section.lk-component.login > div[data-state=password-error] {
    max-width: 696px;
    margin-inline: auto;
}

    html > body > main section.lk-component.login > div[data-state=password-error] > h2 {
        margin-bottom: 20px;
    }

    html > body > main section.lk-component.login > div[data-state=password-error] > p {
        margin-bottom: 40px;
    }

        html > body > main section.lk-component.login > div[data-state=password-error] > p > a {
            color: #37ea97;
        }

    html > body > main section.lk-component.login > div[data-state=password-error] img {
        width: 400px;
    }

/* body/main/!section.lk-component/&.login/div/&[data-state="password-success"]/&.scss */
html > body > main section.lk-component.login > div[data-state=password-success] {
    max-width: 696px;
    margin-inline: auto;
}

    html > body > main section.lk-component.login > div[data-state=password-success] > h2 {
        margin-bottom: 20px;
    }

    html > body > main section.lk-component.login > div[data-state=password-success] > p {
        margin-bottom: 20px;
    }

    html > body > main section.lk-component.login > div[data-state=password-success] > a {
        margin-bottom: 40px;
    }

    html > body > main section.lk-component.login > div[data-state=password-success] img {
        width: 400px;
    }

/* body/main/!section.news/ul/li/a/&.scss */
html > body > main section.news > ul > li > a {
    display: flex;
    aspect-ratio: 350/402;
    height: 100%;
    background-color: rgba(78, 93, 156, 0.07);
    border-radius: 8px;
}

    html > body > main section.news > ul > li > a:not(:has(picture)) {
        background: radial-gradient(rgba(78, 93, 156, 0.07), rgba(255, 255, 255, 0.5));
        background-size: 400% 400%;
        background-position: center;
        transition: background-size 0.3s ease, backdrop-filter 0.3s ease;
    }

@media (pointer: fine) {
    html > body > main section.news > ul > li > a:not(:has(picture)):hover {
        background-size: 100% 100%;
        backdrop-filter: saturate(5) blur(15px) brightness(0.74) contrast(1.7) hue-rotate(30deg);
    }
}

html > body > main section.news > ul > li > a:not(:has(picture)) h2,
html > body > main section.news > ul > li > a:not(:has(picture)) span.title {
    display: grid;
    grid-template-columns: 1fr auto;
}

    html > body > main section.news > ul > li > a:not(:has(picture)) h2::after,
    html > body > main section.news > ul > li > a:not(:has(picture)) span.title::after {
        display: block;
        width: 20px;
        height: 20px;
        background-image: url("/styles/images/icons/arrow-45deg.svg");
        background-size: 100%;
        background-position: center;
        background-repeat: no-repeat;
        content: "";
    }

html > body > main section.news > ul > li > a:has(picture) {
    transition: background-color 0.3s ease;
}

@media (pointer: fine) {
    html > body > main section.news > ul > li > a:has(picture):hover {
        background-color: rgba(78, 93, 156, 0.41);
    }
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a {
        aspect-ratio: 298/216;
    }
}

@media (max-width: 639px) {
    html > body > main section.news > ul > li > a {
        aspect-ratio: 332/189;
    }
}

/* body/main/!section.news/ul/li/a/&:has(picture).scss */
html > body > main section.news > ul > li > a:has(picture) {
    aspect-ratio: 716/402;
    overflow: hidden;
}

    html > body > main section.news > ul > li > a:has(picture) > div.info {
        width: 50%;
        border-radius: 8px 0 0 8px;
        background-size: 100% 100%;
    }

        html > body > main section.news > ul > li > a:has(picture) > div.info::before {
            content: "";
            background-image: var(--background-image);
            filter: blur(50px);
            background-size: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }

        html > body > main section.news > ul > li > a:has(picture) > div.info::after {
            content: "";
            background: rgba(94, 94, 94, 0.21);
            backdrop-filter: blur(103.5422363281px);
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }

        html > body > main section.news > ul > li > a:has(picture) > div.info > * {
            color: #eef1ff !important;
        }

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a:has(picture) {
        aspect-ratio: 298/444;
        flex-direction: column;
    }

        html > body > main section.news > ul > li > a:has(picture) > div.info {
            width: 100%;
            height: 50%;
        }

        html > body > main section.news > ul > li > a:has(picture) > picture {
            width: 100%;
            height: 50%;
        }
}

@media (max-width: 639px) {
    html > body > main section.news > ul > li > a:has(picture) {
        aspect-ratio: 332/513;
    }

        html > body > main section.news > ul > li > a:has(picture) > div.info {
            height: 30%;
        }

        html > body > main section.news > ul > li > a:has(picture) > picture {
            height: 70%;
        }
}

/* body/main/!section.news/ul/li/a/div.info.scss */
html > body > main section.news > ul > li > a > div.info {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 32px 32px 16px 32px;
    position: relative;
}

    html > body > main section.news > ul > li > a > div.info > * {
        z-index: 1;
    }

    html > body > main section.news > ul > li > a > div.info > p {
        margin: 0;
        color: #777a87;
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

@media (max-width: 1279px) {
    html > body > main section.news > ul > li > a > div.info > p {
        font-size: 15px;
        font-weight: 500;
        line-height: 23px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a > div.info > p {
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
    }
}

html > body > main section.news > ul > li > a > div.info > h2 {
    margin: 0 0 16px 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 26px;
}

@media (max-width: 1279px) {
    html > body > main section.news > ul > li > a > div.info > h2 {
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a > div.info > h2 {
        font-size: 14px;
        font-weight: 600;
        line-height: 18px;
    }
}

html > body > main section.news > ul > li > a > div.info > h2::after {
    content: none;
}

html > body > main section.news > ul > li > a > div.info > time {
    margin-top: auto;
    color: #868894;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main section.news > ul > li > a > div.info > time {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a > div.info > time {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

@media (max-width: 1511px) {
    html > body > main section.news > ul > li > a > div.info {
        padding: 28px 28px 12px 28px;
    }

        html > body > main section.news > ul > li > a > div.info > h2 {
            margin: 0 0 12px 0;
        }
}

@media (max-width: 1279px) {
    html > body > main section.news > ul > li > a > div.info {
        padding: 16px 16px 8px 16px;
    }

        html > body > main section.news > ul > li > a > div.info > h2 {
            margin: 0 0 8px 0;
        }
}

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a > div.info {
        padding: 12px 12px 8px 12px;
        order: 2;
    }
}

/* body/main/!section.news/ul/li/a/picture.scss */
html > body > main section.news > ul > li > a > picture {
    width: 50%;
}

    html > body > main section.news > ul > li > a > picture > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 0 8px 8px 0;
        transition: scale 0.3s ease;
    }

@media (max-width: 1023px) {
    html > body > main section.news > ul > li > a > picture {
        order: 1;
    }

        html > body > main section.news > ul > li > a > picture > img {
            border-radius: 8px 8px 0 0;
        }
}

/* body/main/!ul.products-tiles/&.lk/li/div.buy/&.scss */
html > body > main ul.products-tiles.lk > li > div.buy {
    gap: 8px var(--gutter);
}

    /* body/main/!ul.products-tiles/&.lk/li/div.buy/div.cost.scss */
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p {
        display: flex;
        align-items: end;
        color: hsl(152, 68%, 50%);
    }

        html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
            font-style: normal;
            font-weight: 500;
            line-height: 1;
        }

@media (min-width: 1512px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
        font-size: 42px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
        font-size: 38px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
        font-size: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
        font-size: 23px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > em {
        font-size: 18px;
    }
}

html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
    font-weight: 600;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        font-size: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        font-size: 14px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        font-size: 14px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        font-size: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        font-size: 12px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        margin-left: -6px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        margin-left: -5px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        margin-left: -3px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        margin-left: -1px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.cost > p > span {
        margin-left: 1px;
    }
}

/* body/main/!ul.products-tiles/&.lk/li/div.buy/div.value.scss */
html > body > main ul.products-tiles.lk > li > div.buy > div.value {
    position: relative;
    display: flex;
    align-items: end;
}

    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p {
        display: flex;
        align-items: end;
        gap: 8px;
    }

@media (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p {
        gap: 4px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p {
        gap: 2px;
    }
}

html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
    font-style: normal;
    font-weight: 500;
    color: hsl(152, 68%, 50%);
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        font-size: 42px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        font-size: 38px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        font-size: 32px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        font-size: 23px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        font-size: 18px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        line-height: 40px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        line-height: 36px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        line-height: 28px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        line-height: 20px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > em {
        line-height: 14px;
    }
}

html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > span {
    color: #777a87;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > span {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles.lk > li > div.buy > div.value > p > span {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main ul.products-tiles.lk > li > div.buy > div.value > label {
    height: 100%;
}

/* body/main/!ul.products-tiles/li/div.buy/!div[data-price-state]/&.scss */
html > body > main ul.products-tiles > li > div.buy div[data-price-state] > [data-state] {
    display: none;
}

html > body > main ul.products-tiles > li > div.buy div[data-price-state][data-price-state=buy-price] > [data-state=buy-price] {
    display: flex;
}

html > body > main ul.products-tiles > li > div.buy div[data-price-state][data-price-state=rent-price] > [data-state=rent-price] {
    display: flex;
}

html > body > main ul.products-tiles > li > div.buy div[data-price-state] > [data-state=rent-price] {
    --current-color: #4e5d9c;
}

/* body/main/!ul.products-tiles/li/div.buy/div[data-card-state]/&.scss */
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: end;
    --current-color: hsl(152, 68%, 50%);
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        position: relative;
        display: inline-block;
        height: 54px;
        padding-block: 0;
        padding-inline: 32px;
        line-height: 54px !important;
        color: #24262d;
        border-radius: 27px;
        font-size: 16px;
        font-weight: 500;
        line-height: 18px;
    }

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        height: 44px;
        line-height: 44px !important;
        padding-inline: 24px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button::before,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button:not([disabled]):hover,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button:not([disabled]):hover::before,
        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button::before,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button::before {
    background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
    display: inline-block;
    height: 42px;
    padding-inline: 20px;
    line-height: 42px !important;
    background: #37ea97;
    color: #24262d;
    border-radius: 21px;
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        font-size: 14px;
        font-weight: 500;
        line-height: 16px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        height: 32px;
        line-height: 32px !important;
        padding-inline: 12px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
    font-size: 13px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        font-size: 11px;
        font-weight: 500;
        line-height: 14px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
    background: var(--current-color);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button {
        gap: 4px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent],
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent] {
    background: #37ea97;
    position: relative;
    overflow: clip;
    transition: box-shadow 0.3s ease;
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent]::before,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent]::before {
        position: absolute;
        left: -258px;
        top: -142.417px;
        display: block;
        width: 253.783px;
        height: 191.681px;
        transform: rotate(-50.093deg);
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(158, 255, 185, 0.7) 0%, rgba(158, 255, 185, 0.31) 33.45%, rgba(158, 255, 185, 0) 100%);
        content: "";
        transition: top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease;
        will-change: top, left, right, bottom;
    }

@media (pointer: fine) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent]:not([disabled]):hover,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent]:not([disabled]):hover {
        box-shadow: 0 4px 22.5px 0 rgba(0, 0, 0, 0.15);
    }

        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent]:not([disabled]):hover::before,
        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent]:not([disabled]):hover::before {
            left: 50%;
            top: -142.417px;
        }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent],
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent] {
    background: #4e5d9c;
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div:not([data-state=change-count]) > button[data-buy=rent]::before,
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > button[data-buy=rent]::before {
        background: radial-gradient(54.67% 50% at 50% 50%, rgba(116, 143, 255, 0.22) 0%, rgba(116, 143, 255, 0.31) 33.45%, rgba(116, 143, 255, 0) 100%);
    }

/* body/main/!ul.products-tiles/li/div.buy/div[data-card-state]/div/&.scss */
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.rent {
        --current-color: #4e5d9c;
    }

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.note {
        justify-content: end;
    }

        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.note > p {
            font-size: 12px;
            font-weight: 500;
            line-height: 14px;
        }

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.note > p {
        font-size: 10px;
        font-weight: 500;
        line-height: 12px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.note > p {
        font-size: 8px;
        font-weight: 500;
        line-height: 11px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.note > p {
    color: #868894;
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.price {
    display: flex;
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div.tv-prime {
    position: relative;
}

/* body/main/!ul.products-tiles/li/div.buy/div[data-card-state]/div/p.scss */
html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p {
    display: flex;
    align-items: end;
    gap: 4px;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
        font-size: 38px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
        font-size: 34px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
        font-size: 28px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
        font-size: 22px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
        font-size: 18px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em {
    line-height: 1;
    font-weight: 500;
    color: var(--current-color);
    font-style: normal;
    transition: color 0.3s ease;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        font-size: 16px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        font-size: 14px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        font-size: 14px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        font-size: 12px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        font-size: 12px;
    }
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        margin-left: -6px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        margin-left: -5px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        margin-left: -3px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        margin-left: -1px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
        margin-left: -1px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > em > small {
    font-weight: 600;
}

@media (min-width: 1512px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
        font-size: 12px;
    }
}

@media (min-width: 1280px) and (max-width: 1511px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
        font-size: 12px;
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
        font-size: 10px;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
        font-size: 10px;
    }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
        font-size: 10px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p.note > span {
    color: #868894;
    line-height: 1.2;
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > span {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > span {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > span {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > span {
    color: #777a87;
}

    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > span:has(+ a) {
        width: 0;
        margin-bottom: auto;
    }

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a {
    display: flex;
    gap: 4px;
    color: #4e5d9c;
    margin-left: -4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

@media (max-width: 1279px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a {
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a {
        font-size: 10px;
        font-weight: 400;
        line-height: 10px;
    }
}

html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a::after {
    display: block;
    margin-top: auto;
    content: "";
    width: 16px;
    height: 16px;
    background-image: url("/styles/images/small-arrow.svg");
    background-size: contain;
}

@media (max-width: 1023px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a {
        margin-bottom: -2px;
        gap: 2px;
    }

        html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a::after {
            width: 12px;
            height: 12px;
        }
}

@media (max-width: 639px) {
    html > body > main ul.products-tiles > li > div.buy > div[data-card-state] > div > p > a {
        margin-bottom: -4px;
    }
}