.title-1 {
    font-family: var(--font-heading);
    font-weight: 600;

    font-size: 56px;

    line-height: 114.99999999999999%;
    letter-spacing: -0.01em;
}

.title-2 {
    font-family: var(--font-heading);
    font-weight: 600;

    font-size: 40px;

    line-height: 120%;
    letter-spacing: -0.01em;
}

.title-3 {
    font-family: var(--font-heading);
    font-weight: 500;

    font-size: 32px;

    line-height: 120%;
    letter-spacing: -0.01em;
}

.title-4 {
    font-family: var(--font-heading);
    font-weight: 700;

    font-size: 24px;

    line-height: 125%;
    letter-spacing: -0.01em;
}

.title-5 {
    font-family: var(--font-heading);
    font-weight: 700;

    font-size: 20px;

    line-height: 130%;
    letter-spacing: -0em;
}

.title-6 {
    font-family: var(--font-heading);
    font-weight: 700;

    font-size: 16px;

    line-height: 140%;
    letter-spacing: -0em;
}

.text-lead {
    font-family: var(--font-body);
    font-weight: 500;

    font-size: 18px;

    line-height: 145%;
    letter-spacing: -0.01em;
}

.text-l {
    font-family: var(--font-body);
    font-weight: 400;

    font-size: 18px;

    line-height: 150%;
    letter-spacing: -0em;
}

.text-m {
    font-family: var(--font-body);
    font-weight: 400;

    font-size: 16px;

    line-height: 160%;
    letter-spacing: -0em;
}

.text-s {
    font-family: var(--font-body);
    font-weight: 400;

    font-size: 14px;

    line-height: 160%;
    letter-spacing: -0em;
}

.text-xs {
    font-family: var(--font-body);
    font-weight: 400;

    font-size: 12px;

    line-height: 170%;
    letter-spacing: -0em;
}

.text-caps {
    font-family: var(--font-body);
    font-weight: 600;

    font-size: 12px;

    line-height: 170%;
    letter-spacing: -0em;
    text-transform: uppercase;
}

.text-button {
    font-family: var(--font-body);
    font-weight: 600;

    font-size: 14px;

    line-height: 100%;
    letter-spacing: -0.02em;
}

.text-link {
    font-family: var(--font-body);
    font-weight: 600;

    font-size: 14px;

    line-height: 100%;
    letter-spacing: -0em;
}

.text-bold {
    font-weight: 700;
}

.text-semibold {
    font-weight: 600;
}

.text-medium {
    font-weight: 500;
}

/* Цвет текста в редакторе — классом, а не инлайновым hex: палитра остаётся в переменных. */
.color-brand-primary {
    color: var(--brand-primary);
}

.color-brand-secondary {
    color: var(--brand-secondary);
}

.color-text-primary {
    color: var(--text-primary);
}

.color-text-secondary {
    color: var(--text-secondary);
}

.color-text-tertiary {
    color: var(--text-tertiary);
}

.color-text-on-dark {
    color: var(--text-on-dark);
}

.color-text-on-orange {
    color: var(--text-on-orange);
}

.color-text-white {
    color: var(--text-white);
}

/*
 * Дефолтные метрики контента из редактора.
 * В :where() обёрнуты ОБЕ части селектора: :where() обнуляет только себя,
 * и одного `.editor` хватило бы, чтобы сравняться с .title-1 и перебить его
 * по порядку. С нулевым весом любой класс из списка «Форматы» выигрывает.
 */
:where(.editor) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote) {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0em;
}

@media (max-width:1080px) {
    :where(.editor) :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, blockquote) {
        font-size: 14px;
    }
}

.editor :where(h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote) {
    margin-bottom: 16px;
}

/* Списки: у нумерованного оранжевые номера «01», у маркированного оранжевая галочка. */
.editor :where(ul, ol) {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-left: 0;
    list-style: none;
}

.editor :where(ol) {
    counter-reset: editor-item;
}

.editor :where(ul, ol) > li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.editor :where(ol) > li {
    counter-increment: editor-item;
}

/* Метрики .title-6 копируем: класс на псевдоэлемент не повесить. */
.editor :where(ol) > li::before {
    content: counter(editor-item, decimal-leading-zero);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
    color: var(--brand-primary);
}

/*
 * Галочка через mask, а не background-image: внутри data-URI остаётся только
 * контур, а цвет приходит переменной темы.
 */
.editor :where(ul) > li::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--brand-primary);
    -webkit-mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12L9.84597 16.846" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.84766 16.8458L19.0012 7.15381" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
    mask: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12L9.84597 16.846" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.84766 16.8458L19.0012 7.15381" stroke="black" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

.editor > :last-child {
    margin-bottom: 0;
}

/* Цитата: светлая плашка с оранжевой чертой слева. */
.editor :where(blockquote) {
    position: relative;
    /* 32px до черты плюс 16px от черты до текста. */
    padding: 32px 32px 32px 48px;
    border-radius: 16px;
    background: var(--bg-orange-2);
}

/*
 * Черта псевдоэлементом, а не border-left: бордер шёл бы по всей высоте плашки
 * вплотную к краю, а здесь концы черты привязаны к тем же отступам, что и текст.
 */
.editor :where(blockquote)::before {
    content: '';
    position: absolute;
    top: 32px;
    bottom: 32px;
    left: 32px;
    width: 1.3px;
    background: var(--brand-primary);
}

/* Общее правило .editor > :last-child до вложенного контента не достаёт. */
.editor :where(blockquote) > :last-child {
    margin-bottom: 0;
}

/*
 * Цветовая тема карточки. Геометрия — на стороне блока, здесь только палитра.
 * Сброс в base.css задаёт color каждому элементу через `*`, поэтому цвет
 * с карточки не наследуется — раздаём его потомкам явно.
 * Обе части селектора в :where(): вес нулевой, поэтому классы .color-* из
 * списка «Форматы» перебивают эти цвета, а не проигрывают им по порядку.
 * Между собой правила решают порядком — заголовки идут вторыми.
 */
:where(.card-theme) :where(*) {
    color: var(--card-text);
}

:where(.card-theme) :where(h1, h2, h3, h4, h5, h6) {
    color: var(--card-title);
}

.card-theme--white {
    --card-text: var(--text-on-dark);
    --card-title: var(--text-primary);
    --card-icon-bg: var(--bg-cards);

    background: var(--bg);
}

.card-theme--primary {
    --card-text: var(--text-on-orange);
    --card-title: var(--text-white);
    --card-icon-bg: var(--bg-orange);

    background: var(--brand-primary);
}

.card-theme--secondary {
    --card-text: var(--text-on-dark);
    --card-title: var(--text-white);
    --card-icon-bg: var(--bg-blue);

    background: var(--brand-secondary);
}

/* Плашка-подпись под блоком. Внешние отступы задаёт блок классом-миксом. */
.note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 24px;
    border-radius: 12px;
    background: var(--bg-orange-2);
}

.note__icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    color: var(--brand-primary);
}

@media (max-width: 1080px) {

    .note {
        padding: 16px;
    }

    .editor :where(blockquote) {
        /* 16px до черты плюс 10px от черты до текста. */
        padding: 16px 16px 16px 26px;
    }

    .editor :where(blockquote)::before {
        top: 16px;
        bottom: 16px;
        left: 16px;
    }
}

.input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-label {
    margin-bottom: 8px;
}

.input-label span {
    color: var(--brand-primary);
}

.input-text input {
    padding: 10px 24px;
    border-radius: 8px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 160%;
    letter-spacing: 0em;
    border: 1px solid transparent;
    background-color: var(--bg-cards);
}

.input-text input::placeholder {
    color: var(--text-secondary);
}

.input-text input:focus {
    box-shadow: 0px 0px 4px 0px #FF5A01;
    border: 1px solid var(--brand-primary);
}

.input-text--error input {
    border-color: var(--state-error-2);
    background: var(--state-error);
}

.input-text--success input { 
    border-color: var(--state-success-2);
    background: var(--state-success);
    position: relative;
}

.input-text--success::after {
    width: 24px;
    height: 24px;
    content: '';
    display: block;
    position: absolute;
    top: 16px;
    right: 24px;
    background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12L9.84597 16.846" stroke="%23059669" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.84766 16.8462L19.0012 7.1543" stroke="%23059669" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.input-wrapper:has(input:disabled) .input-label,
.input-wrapper:has(input:disabled) .input-label span {
    color: var(--state-disabled-2);
}

.input-wrapper:has(input:disabled) input {
    background-color: var(--state-disabled);
    border-color: transparent;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 4px;
}

.checkbox > span:first-of-type {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid var(--text-primary);
    margin-right: 4px;

}

.checkbox a {
    color: var(--brand-primary);
    text-decoration: underline;
}

.checkbox:hover > span:first-of-type {
    border-color: var(--brand-primary)
}

.checkbox--error > span:first-of-type {
    border-color: var(--state-error-2);
}

.checkbox--error a {
    color: var(--state-error-2);
}

.checkbox:has(input:checked) > span:first-of-type {
    background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.68235 11.6271L13.0099 5.29953L12.0181 4.30777L6.68235 9.64353L4 6.96118L3.00824 7.95294L6.68235 11.6271ZM1.70141 16C1.22596 16 0.823529 15.8353 0.494118 15.5059C0.164706 15.1765 0 14.774 0 14.2986V1.70141C0 1.22596 0.164706 0.823529 0.494118 0.494118C0.823529 0.164706 1.22596 0 1.70141 0H14.2986C14.774 0 15.1765 0.164706 15.5059 0.494118C15.8353 0.823529 16 1.22596 16 1.70141V14.2986C16 14.774 15.8353 15.1765 15.5059 15.5059C15.1765 15.8353 14.774 16 14.2986 16H1.70141Z" fill="%23FF5A01"/></svg>');
    background-size: 16px 16px;
    border: var(--brand-primary);
}

.btn {
    height: 56px;
    border-radius: 8px;
    background-color: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-white);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
    line-height: 100%;
    letter-spacing: 0.0em;
    text-align: center;
    padding: 0 28px;
    border: 1px solid var(--brand-primary)
}

.btn span {
    color: inherit;
}

.btn--small {
    height: 48px;
}

.btn:hover {
    background: var(--state-hover-2);
    border-color: var(--state-hover-2);
}

.btn:active {
    background: var(--state-pressed);
    border-color: var(--state-pressed);
}

.btn--outline {
    background-color: transparent;
    color: var(--brand-primary);
}

.btn--outline:hover {
    background: var(--brand-primary);
    color: var(--text-white);
    border-color: var(--brand-primary);
}

.btn--outline:active {
    border-color: var(--state-pressed);
    background-color: var(--state-pressed);
}

/* Статус отправки: подпись меняет form.js, значок — эти правила. */
.btn__icon,
.btn__spinner {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.btn__spinner,
.btn__icon--done,
.btn.is-loading .btn__icon--arrow,
.btn.is-done .btn__icon--arrow {
    display: none;
}

.btn.is-loading .btn__spinner {
    display: block;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.7s linear infinite;
}

.btn.is-done .btn__icon--done {
    display: block;
}

/* Пока форма уходит, кнопка не должна отзываться на наведение. */
.btn:disabled {
    pointer-events: none;
    opacity: 0.7;
}

@keyframes btn-spin {

    to {
        transform: rotate(1turn);
    }
}

@media (max-width: 1080px) {
    .title-1 {
        font-family: var(--font-heading);
        font-weight: 600;

        font-size: 32px;

        line-height: 114.99999999999999%;
        letter-spacing: -0.01em;
    }

    .title-2 {
        font-family: var(--font-heading);
        font-weight: 600;

        font-size: 28px;

        line-height: 120%;
        letter-spacing: -0.01em;
    }

    .title-3 {
        font-family: var(--font-heading);
        font-weight: 500;

        font-size: 24px;

        line-height: 120%;
        letter-spacing: -0.01em;
    }

    .title-4 {
        font-family: var(--font-heading);
        font-weight: 700;

        font-size: 20px;

        line-height: 125%;
        letter-spacing: -0.01em;
    }

    .title-5 {
        font-family: var(--font-heading);
        font-weight: 700;

        font-size: 18px;

        line-height: 130%;
        letter-spacing: -0em;
    }

    .text-lead {
        font-family: var(--font-body);
        font-weight: 500;

        font-size: 16px;

        line-height: 145%;
        letter-spacing: -0.01em;
    }

    .text-l {
        font-family: var(--font-body);
        font-weight: 400;

        font-size: 16px;

        line-height: 150%;
        letter-spacing: -0em;
    }

    .text-m {
        font-family: var(--font-body);
        font-weight: 400;

        font-size: 14px;

        line-height: 160%;
        letter-spacing: -0em;
    }

    .text-s {
        font-family: var(--font-body);
        font-weight: 400;

        font-size: 13px;

        line-height: 160%;
        letter-spacing: -0em;
    }

    .btn {
        height: 50px;
    }
}