/* start font */

@font-face {
    font-family: 'YS Text';
    font-stretch: normal;
    font-style: normal;
    font-weight: 400;
    src: url('//yastatic.net/s3/home/fonts/ys/1/text-regular.woff2') format('woff2'),
        url('//yastatic.net/s3/home/fonts/ys/1/text-regular.woff') format('woff');
}

@font-face {
    font-family: 'YS Text';
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    src: url('//yastatic.net/s3/home/fonts/ys/1/text-medium.woff2') format('woff2'),
        url('//yastatic.net/s3/home/fonts/ys/1/text-medium.woff') format('woff');
}

/* end font */

/* start reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

:focus {
    outline: none;
}

::-moz-focus-inner {
    border: 0;
}

ul,
button,
fieldset {
    padding: 0;
}

ul {
    list-style: none;
}

body,
h1,
h3,
p,
ul,
fieldset {
    margin: 0;
}

body {
    min-height: 100vh;
}

input,
button {
    font: inherit;
    margin: 0;
}

button {
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* end reset */

/* start variables */

:root {
    /* font-family */
    --font-ys-text: 'YS Text', 'Helvetica Neue', Arial, sans-serif;

    /* font-size */
    --font-size-s: 13px;
    --font-size-s-line-m: 22px;

    --font-size-m: 15px;
    --font-size-m-line-m: 24px;

    --font-size-l: 20px;
    --font-size-l-line-m: 28px;

    /* font */
    --font-style-small: var(--font-size-s) / var(--font-size-s-line-m) var(--font-ys-text);
    --font-style-body: var(--font-size-m) / var(--font-size-m-line-m) var(--font-ys-text);
    --font-style-large-medium: 500 var(--font-size-l) / var(--font-size-l-line-m) var(--font-ys-text);

    /* color */
    --color-red: #fc3f1d;

    --color-white: #fff;
    --color-gray-40: #cad3e0;
    --color-gray-50: #9aa5b6;
    --color-gray-60: #6b7689;
    --color-black: #000;

    --color-brand-40: rgba(36, 31, 255, 0.4);
    --color-brand-100: #241fff;
}

/* end variables */

.page {
    align-items: center;
    background-color: #1a2030;
    display: flex;
    flex-direction: column;
    font: var(--font-style-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding: 100px 12px;
}

.link {
    color: var(--color-brand-100);
    cursor: pointer;
    text-decoration: none;
    transition: color 0.08s ease-in-out;
}

.link:hover,
.link:visited:hover,
.link:focus-visible {
    color: var(--color-red);
}

.link_invert {
    color: var(--color-gray-50);
}

.link_invert:hover,
.link_invert:visited:hover,
.link_invert:focus-visible {
    border-bottom-color: var(--color-white);
    color: var(--color-white);
}

.button {
    appearance: none;
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin: 0;
    overflow: hidden;
    padding: 0 16px;
    text-align: center;
    text-decoration: none;
    text-overflow: ellipsis;
    transition: color 0.08s ease-in-out, box-shadow 0.08s ease-in-out;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
}

.button_primary {
    box-shadow: inset 0 0 0 1px var(--color-brand-40);
    color: var(--color-brand-100);
}

.button_primary:hover,
.button_primary:focus-visible {
    box-shadow: inset 0 0 0 1px currentColor;
}

.input {
    appearance: none;
    background-color: transparent;
    border: 1px solid var(--color-gray-40);
    border-radius: 8px;
    box-shadow: none;
    color: var(--color-black);
    height: 40px;
    min-width: 0;
    padding: 8px 16px;
    -webkit-text-fill-color: var(--color-black);
    text-overflow: ellipsis;
    transition: border-color 0.1s ease-out;
    width: 100%;
}

.input:hover,
.input:focus-within,
.input.focused {
    border-color: var(--color-gray-50);
}

.input::placeholder {
    color: var(--color-gray-60);
    opacity: 1;
    -webkit-text-fill-color: var(--color-gray-60);
}

.input::-ms-clear,
.input::-ms-reveal {
    display: none;
    height: 0;
    width: 0;
}

.input:invalid,
.input_error {
    border-color: rgba(252, 63, 29, 0.4);
}

.input:hover:invalid,
.input:focus-within:invalid,
.input_error:hover,
.input_error:focus-within {
    border-color: var(--color-red);
}

.section-form {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 416px;
    width: 100%;
}

.section-form_hidden {
    display: none;
}

.section-form__list {
    color: var(--color-gray-60);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

.widget {
    background-color: var(--color-white);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 20px 24px 24px;
    width: 100%;
}

.widget__title {
    font: var(--font-style-large-medium);
}

.widget__head {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.field {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field__error,
.field__desc {
    font: var(--font-style-small);
}

.field__error {
    color: var(--color-red);
}

.field__desc {
    color: var(--color-gray-60);
}
.logo {
    background-image: url("data:image/svg+xml,%3Csvg width='264' height='44' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.44 12.63c-.09 1.45-.22 3.2-.3 3.78.21-.53.87-1.89 1.7-3.38l4.43-8.15h7.76L11.62 25.44 8.1 36H1.18l3.69-11.1.08-20.02h6.84l-.35 7.75Zm15.13-7.75h9.34L31.39 36h-6.66l.96-5.61h-5.56L17.5 36h-7.06L26.57 4.88ZM22.93 24.5h3.81l1.71-9.73c.27-1.44.62-3.15.7-3.72-.21.52-.78 1.93-1.53 3.46l-4.69 10Zm25.64-4.34a268 268 0 0 1-.27 3.77c.18-.52.57-1.97 1.14-3.59l5.09-15.47h6.35L50.54 36h-7.37l.97-16.09c.09-1.44.26-3.2.3-3.77-.17.53-.57 1.97-1.14 3.6L37.96 36H31.6L41.95 4.88h7.54l-.92 15.3Zm16.2 4.08 1.93-5.87h9.47L70.29 36h-4.95l.44-2.5c-1.54 1.89-3.03 2.72-5.17 2.72-6.18 0-6.45-8.33-3.51-17.32 3.2-9.77 7.76-14.64 13.5-14.64 5 0 7.15 3.64 7.41 8.16l-6.18 2.06c-.22-3.55-.88-4.56-1.89-4.56-1.8 0-3.37 2.23-5.96 10.12-1.84 5.61-2.67 10.83-.48 10.83 1.93 0 3.5-3.29 4.47-6.22l.13-.4h-3.33ZM82.4 36.57c-8.46 0-8.5-8.68-5.57-17.67 3.16-9.77 7.9-14.6 13.29-14.6 8.46 0 8.5 8.69 5.56 17.67-3.15 9.78-7.89 14.6-13.28 14.6Zm.7-5.57c1.5 0 3.12-2.15 5.7-10.17 1.71-5.26 3.2-10.96.62-10.96-1.5 0-3.12 2.15-5.7 10.17C82 25.22 80.46 31 83.09 31Zm13.45 5L106.9 4.88h6.97c6.49 0 10.08 4.73 6.18 16.79-3.46 10.7-7.45 14.33-13.06 14.33H96.54Zm8.81-5.65h1.5c1.53 0 3.55-.8 6.26-9.6 2.9-9.34 1.32-10.22-.3-10.22h-.88l-6.58 19.82Zm28.98-25.47c5.83 0 8.33 5.21 6.49 10.82-1.27 3.9-3.55 6.4-6.75 7.5l.35 12.8h-6.75l.13-12.19h-.88L122.9 36h-6.75l10.35-31.12h7.84Zm-5.74 13.85h1.71c2.06 0 3.64-1.58 4.25-3.9.66-2.55.3-4.74-1.7-4.74h-1.37l-2.89 8.64Zm23.48-13.85L141.72 36h-6.93l10.35-31.12h6.93Zm4.26 17.84c-.22 1.44-.57 3.15-.66 3.72.22-.52.8-1.93 1.5-3.46l8.15-18.1h7.5L156.67 36h-8.9l4.52-31.12h6.92l-2.9 17.84Zm31.65-17.84-1.93 5.87h-8.02l-2.06 6.18h7.36l-1.97 5.88H174l-2.46 7.32h8.2L177.8 36h-15.12l10.34-31.12h14.95Z' fill='%23fff'/%3E%3Cpath fill='%23FF4930' d='M198.87 4.22h64.33l-10.88 31.7h-64.33z'/%3E%3Cpath d='m216.59 9.4-1.25 3.81h-3.61l-5.46 16.38h-4.5l5.47-16.38h-3.56l1.25-3.8h11.66Zm10.26 0-1.25 3.81h-5.2l-1.34 4.01h4.77l-1.28 3.81h-4.77l-1.6 4.75h5.32l-1.25 3.81h-9.81l6.71-20.19h9.7Zm.8 20.53c-5.44 0-5.5-5.6-3.59-11.43 2.08-6.34 5.06-9.47 8.73-9.47 3.22 0 4.58 2.05 4.67 5.1l-3.87 1.39c-.14-1.71-.43-2.85-1.25-2.85-1.2 0-2.2 1.74-3.81 6.57-1.22 3.64-1.94 7-.4 7 .8 0 1.45-.66 2.7-2.85l3.36 1.6c-1.23 2.38-3.33 4.94-6.54 4.94Zm23.9-20.53-6.72 20.2h-4.49l2.9-8.7h-3.01l-2.9 8.7h-4.5l6.72-20.2h4.49l-2.5 7.57h3.01l2.5-7.57h4.5Z' fill='%23fff'/%3E%3C/svg%3E");
    height: 44px;
    margin-bottom: 32px;
    text-indent: -9999px;
    width: 264px;
}
