/* Библиотека шаблонов ИИ-агентов — макет Figma «Библиотека шаблонов ИИ-агенты | Подпислон» (node 635:7660) */

.atpl {
    font-family: GothamPro, sans-serif;
    color: #1a1a1a;
}

.atpl * {
    box-sizing: border-box;
}

/* у карточек и списка каталога свой display, поэтому браузерное правило
   [hidden] { display: none } до них не доходит — гасим явно, иначе при выборе
   категории каталог показывает и карточки, и «такого агента пока нет» */
.atpl [hidden] {
    display: none;
}

.atpl__cover {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 110px;
}

.atpl__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.25;
}

/* (кнопки) */
.atpl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 28px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
}

.atpl-btn_primary {
    background: #f79900;
    color: #fff;
}

.atpl-btn_primary:hover {
    background: #e07c00;
    color: #fff;
}

.atpl-btn_ghost {
    background: #f1f1f1;
    color: #1a1a1a;
}

.atpl-btn_ghost:hover {
    background: #e6e6e6;
    color: #1a1a1a;
}

/* белая кнопка живёт только на оранжевых баннерах — в макете текст оранжевый */
.atpl-btn_white {
    background: #fff;
    color: #f79900;
}

.atpl-btn_white:hover {
    background: #fff5e6;
    color: #f79900;
}

.atpl-btn_outline {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.atpl-btn_outline:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

.atpl-btn_outline-white {
    background: transparent;
    border-color: #fff;
    color: #fff;
}

.atpl-btn_outline-white:hover {
    background: rgba(255, 255, 255, .15);
    color: #fff;
}

/* (иконки интеграций) */
.atpl-ints {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* flex-shrink: 0 — плашка значка стоит в flex-строке (.atpl-ints, .atpl-service) и без
   запрета на сжатие подстраивается под длину соседнего текста: серый фон перестаёт быть
   квадратом и у разных блоков получается разной ширины */
.atpl-int {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #4d4d4c;
}

.atpl-int img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.atpl-int_lg {
    width: 40px;
    height: 40px;
    background: #f6f6f6;
    border-radius: 10px;
}

.atpl-int_lg img {
    width: 24px;
    height: 24px;
}

/* (hero) */
.atpl-hero {
    position: relative;
    background: #fcf6f0;
    overflow: hidden;
}

/* .wrapper__content компенсирует только верхнюю строку шапки (82px), строка меню (56px)
   зафиксирована поверх контента. Сдвигаем секцию внешним отступом, а не внутренним:
   с padding-top под шапку уезжал фон баннера и абсолютная иллюстрация, из-за чего
   верх схемы срезался, а снизу оставалась пустая полоса */
@media screen and (min-width: 1200px) {
    .atpl-hero,
    .atpl-head {
        margin-top: 56px;
    }
}

.atpl-hero__cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 400px;
    padding-top: 72px;
    padding-bottom: 72px;
}

.atpl-hero__text {
    position: relative;
    z-index: 1;
    width: 560px;
    max-width: 100%;
}

.atpl-hero__title {
    margin: 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.16;
}

.atpl-hero__descr {
    margin: 24px 0 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.6;
    color: #4d4d4c;
}

/* иллюстрация из макета прижата к правому краю баннера и обрезается им,
   как в Figma; фон картинки совпадает с фоном секции, поэтому стыка не видно */
.atpl-hero__scheme {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    width: 720px;
    pointer-events: none;
}

.atpl-hero__scheme picture,
.atpl-hero__scheme img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

/* (каталог) */
.atpl-catalog {
    background: #fff;
}

.atpl-catalog__cover {
    padding-top: 72px;
    padding-bottom: 72px;
}

.atpl-catalog__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
}

.atpl-chip {
    height: 32px;
    padding: 0 16px;
    border: none;
    border-radius: 16px;
    background: #f1f1f1;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #1a1a1a;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.atpl-chip:hover {
    background: #e6e6e6;
}

.atpl-chip.is-active {
    background: #1a1a1a;
    color: #fff;
}

.atpl-catalog__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

/* (карточка шаблона) */
.atpl-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 182px;
    padding: 24px;
    background: #f6f6f6;
    border-radius: 12px;
    color: #1a1a1a;
    text-decoration: none;
    transition: background-color .2s, box-shadow .2s;
}

.atpl-card:hover {
    background: #f1f1f1;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .07);
    color: #1a1a1a;
}

.atpl-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.atpl-card__category {
    margin-top: 8px;
    font-size: 15px;
    color: #8c8c8c;
}

.atpl-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.atpl-card__downloads {
    font-size: 14px;
    color: #8c8c8c;
    white-space: nowrap;
}

/* (пустой результат поиска) */
.atpl-empty {
    padding: 72px 0;
    text-align: center;
}

/* общий стиль сайта делает svg блочным, поэтому text-align до значка не доходит */
.atpl-empty__icon {
    display: block;
    margin: 0 auto;
}

.atpl-empty__title {
    margin-top: 16px;
    font-size: 24px;
    font-weight: 700;
}

.atpl-empty__descr {
    margin: 8px 0 0;
    font-size: 16px;
    color: #8c8c8c;
}

.atpl-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

/* (счётчик и пагинация) */
.atpl-catalog__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
}

.atpl-catalog__counter {
    font-size: 14px;
    color: #8c8c8c;
}

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

.atpl-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: none;
    border-radius: 16px;
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    cursor: pointer;
    transition: background-color .2s, color .2s;
}

.atpl-pagination__btn:hover:not(:disabled) {
    background: #f1f1f1;
}

.atpl-pagination__btn.is-active {
    background: #f1f1f1;
}

.atpl-pagination__btn:disabled {
    color: #c8c8c8;
    cursor: default;
}

.atpl-pagination__dots {
    min-width: 24px;
    text-align: center;
    font-size: 14px;
    color: #8c8c8c;
}

/* (шаги подключения) */
.atpl-steps {
    background: #fff;
}

.atpl-steps .atpl__cover {
    padding-top: 24px;
    padding-bottom: 72px;
}

.atpl-steps__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.atpl-steps__item {
    padding: 24px;
    background: #f6f6f6;
    border-radius: 12px;
}

/* в макете номер шага — оранжевая цифра на белой плашке */
.atpl-steps__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #f79900;
}

.atpl-steps__title {
    margin-top: 16px;
    font-size: 18px;
    font-weight: 700;
}

.atpl-steps__descr {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4d4d4c;
}

/* (вопросы) */
.atpl-faq {
    background: #f7f7f7;
}

.atpl-faq .atpl__cover {
    padding-top: 72px;
    padding-bottom: 72px;
}

.atpl-faq__list {
    margin-top: 32px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.atpl-faq__item + .atpl-faq__item {
    border-top: 1px solid #eee;
}

.atpl-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 22px 32px;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    text-align: left;
    color: #1a1a1a;
    cursor: pointer;
}

.atpl-faq__chevron {
    flex: 0 0 auto;
    color: #8c8c8c;
    transition: transform .2s;
}

.atpl-faq__item.is-open .atpl-faq__chevron {
    transform: rotate(180deg);
}

.atpl-faq__a {
    display: none;
    padding: 0 32px 22px;
}

.atpl-faq__item.is-open .atpl-faq__a {
    display: block;
}

.atpl-faq__a p {
    margin: 0;
    max-width: 900px;
    font-size: 15px;
    line-height: 1.5;
    color: #8c8c8c;
}

/* (баннер) */
.atpl-cta {
    background: #f79900;
    color: #fff;
    overflow: hidden;
}

.atpl-cta__cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 224px;
    padding-top: 40px;
    padding-bottom: 40px;
}

.atpl-cta__title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.atpl-cta__descr {
    margin: 12px 0 0;
    max-width: 640px;
    font-size: 18px;
    line-height: 1.4;
    color: #fff;
}

.atpl-cta__content .atpl-btn {
    margin-top: 24px;
}

.atpl-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.atpl-cta__buttons .atpl-btn {
    margin-top: 0;
}

.atpl-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* иллюстрация выгружена из макета вместе с оранжевым фоном баннера,
   поэтому прижимается к нижнему краю секции без видимого стыка */
.atpl-cta__image {
    flex: 0 0 auto;
    width: 520px;
    margin-bottom: -40px;
    align-self: flex-end;
}

.atpl-cta__image picture,
.atpl-cta__image img {
    display: block;
    width: 100%;
    height: auto;
}

.atpl-cta_flat .atpl-cta__cover {
    min-height: 0;
    padding-top: 56px;
    padding-bottom: 56px;
}

/* (карточка шаблона: шапка) */
.atpl-head {
    background: #fff;
}

.atpl-head__cover {
    padding-top: 32px;
    padding-bottom: 56px;
}

.atpl-back {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #4d4d4c;
    text-decoration: none;
}

.atpl-back:hover {
    color: #f79900;
}

.atpl-head__body {
    display: grid;
    grid-template-columns: 391px minmax(0, 1fr);
    gap: 48px;
    margin-top: 24px;
}

.atpl-head__ints {
    margin-bottom: 24px;
}

.atpl-head__ints .atpl-int {
    background: #f6f6f6;
}

/* заголовок карточки — кегль и интерлиньяж из макета: в колонке 391px
   он ложится ровно в две строки */
.atpl-head__title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

.atpl-head__descr {
    margin: 20px 0 0;
    font-size: 17px;
    line-height: 1.5;
    color: #4d4d4c;
}

.atpl-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.atpl-tag {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 14px;
    background: #f1f1f1;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
}

.atpl-head__btn {
    margin-top: 28px;
}

/* (просмотр схемы процесса) */
.atpl-scheme-view {
    position: relative;
    background: #f6f6f6;
    border-radius: 12px;
    overflow: hidden;
}

.atpl-scheme-view__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 440px;
    overflow: hidden;
    cursor: grab;
    touch-action: none;
}

.atpl-scheme-view__stage.is-grabbing {
    cursor: grabbing;
}

.atpl-scheme-view__img {
    width: 100%;
    /* у картинки проставлены width/height — без height: auto авторская ширина
       перебивает только ширину, а высота остаётся жёсткими 555px и схему тянет */
    height: auto;
    max-width: 100%;
    transform-origin: center center;
    transition: transform .15s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

.atpl-scheme-view__controls {
    position: absolute;
    left: 24px;
    bottom: 24px;
    display: flex;
    gap: 12px;
}

.atpl-scheme-view__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #4d4d4c;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    cursor: pointer;
    transition: color .2s;
}

.atpl-scheme-view__btn:hover {
    color: #f79900;
}

/* (карточка шаблона: описание) */
.atpl-about {
    background: #fff;
}

.atpl-about__cover {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 48px;
    padding-bottom: 72px;
}

.atpl-meta__item + .atpl-meta__item {
    margin-top: 28px;
}

.atpl-meta__label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #a7a7a7;
}

/* короткие подписи («Обновление», «Скачиваний») включаются только на мобильном */
.atpl-meta__label-short {
    display: none;
}

.atpl-meta__value {
    display: block;
    margin-top: 6px;
    font-size: 16px;
    color: #1a1a1a;
}

.atpl-meta__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 6px;
}

.atpl-meta__author .atpl-meta__value {
    margin-top: 0;
}

.atpl-meta__ava {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    background: #f79900;
    border-radius: 50%;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}

.atpl-meta__company {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: #8c8c8c;
}

.atpl-meta__share {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 0;
    border: none;
    background: transparent;
    color: #4d4d4c;
    cursor: pointer;
}

.atpl-meta__share:hover {
    color: #f79900;
}

.atpl-meta__share-hint {
    font-size: 13px;
    color: #8c8c8c;
}

.atpl-article__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}

.atpl-article__title + .atpl-article__text,
.atpl-article__title + .atpl-article__split {
    margin-top: 20px;
}

.atpl-article__title:not(:first-child) {
    margin-top: 48px;
}

.atpl-article__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #4d4d4c;
}

.atpl-article__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 32px;
    align-items: start;
}

/* в макете у таблички прямые углы */
.atpl-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid #eee;
}

.atpl-checklist__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.4;
}

.atpl-checklist__item + .atpl-checklist__item {
    border-top: 1px solid #eee;
}

.atpl-checklist__item svg {
    flex: 0 0 auto;
    margin-top: 1px;
}

.atpl-services {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 20px;
}

.atpl-service {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    max-width: 390px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
}

.atpl-service__title {
    font-size: 17px;
    font-weight: 700;
}

.atpl-service__descr {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.4;
    color: #8c8c8c;
}

/* (настройка шаблона) */
.atpl-nodes {
    background: #fff;
}

.atpl-nodes .atpl__cover {
    padding-bottom: 72px;
}

.atpl-nodes__lead {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    font-size: 15px;
    color: #8c8c8c;
}

.atpl-hint {
    position: relative;
    display: inline-flex;
    color: #a7a7a7;
    cursor: help;
}

/* пояснение выезжает вправо от значка и не переносится — как просили в тестировании */
.atpl-hint__text {
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    z-index: 3;
    display: none;
    width: max-content;
    padding: 8px 14px;
    background: #1a1a1a;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    color: #fff;
    transform: translateY(-50%);
}

.atpl-hint:hover .atpl-hint__text,
.atpl-hint:focus .atpl-hint__text {
    display: block;
}

.atpl-nodes__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: 32px;
    align-items: start;
    margin-top: 28px;
}

.atpl-nodes__body_full {
    grid-template-columns: minmax(0, 1fr);
}

.atpl-nodes__list {
    border: 1px solid #eee;
    border-radius: 12px;
}

.atpl-node + .atpl-node {
    border-top: 1px solid #eee;
}

.atpl-node__head {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 20px 24px;
    border: none;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.atpl-node__title {
    flex: 1 1 auto;
    font-size: 17px;
    font-weight: 700;
    color: #1a1a1a;
}

.atpl-node__badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.atpl-node__sign {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.atpl-node__sign::before,
.atpl-node__sign::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    background: #8c8c8c;
    transform: translate(-50%, -50%);
}

.atpl-node__sign::before {
    width: 12px;
    height: 1.5px;
}

.atpl-node__sign::after {
    width: 1.5px;
    height: 12px;
    transition: opacity .2s;
}

.atpl-node.is-open .atpl-node__sign::after {
    opacity: 0;
}

.atpl-node__body {
    display: none;
}

.atpl-node.is-open .atpl-node__body {
    display: block;
}

.atpl-node__inner {
    padding: 0 24px 24px;
}

.atpl-node__props {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: #8c8c8c;
}

.atpl-node__prop {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.atpl-node__subtitle {
    margin-top: 20px;
    font-size: 15px;
    font-weight: 700;
}

.atpl-node__text {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #4d4d4c;
}

/* в styles.css списки сброшены глобально — возвращаем нумерацию */
.atpl-node__steps {
    margin: 8px 0 0;
    padding-left: 20px;
    list-style: decimal outside;
    font-size: 15px;
    line-height: 1.6;
    color: #4d4d4c;
}

.atpl-badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    background: #f1f1f1;
    border-radius: 6px;
    font-size: 13px;
    color: #4d4d4c;
    white-space: nowrap;
}

.atpl-badge_code {
    background: #e9f5ea;
    color: #2e7d32;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 12px;
}

.atpl-params {
    margin-top: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.atpl-params__head {
    padding: 12px 16px;
    background: #f1f1f1;
    font-size: 14px;
    color: #4d4d4c;
}

.atpl-params__row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.atpl-params__name {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    color: #2e7d32;
}

.atpl-params__value {
    color: #4d4d4c;
}

/* (видеоинструкция) */
.atpl-video {
    border-radius: 12px;
    overflow: hidden;
}

.atpl-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
}

.atpl-video__frame iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.atpl-video__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0 0;
}

.atpl-video__title {
    font-size: 17px;
    font-weight: 700;
}

.atpl-video__duration {
    font-size: 14px;
    color: #8c8c8c;
    white-space: nowrap;
}

/* (как импортировать шаблон) */
.atpl-import {
    background: #fff;
}

.atpl-import .atpl__cover {
    padding-top: 72px;
    padding-bottom: 72px;
}

.atpl-import__lead {
    margin: 12px 0 0;
    font-size: 15px;
    color: #8c8c8c;
}

.atpl-import__list {
    max-width: 804px;
    margin-top: 28px;
    border: 1px solid #eee;
    border-radius: 12px;
}

.atpl-import__item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
}

.atpl-import__item + .atpl-import__item {
    border-top: 1px solid #eee;
}

.atpl-import__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    background: #fdeed6;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #f79900;
}

.atpl-import__title {
    font-size: 17px;
    font-weight: 700;
}

.atpl-import__descr {
    margin: 6px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #8c8c8c;
}

/* (больше шаблонов категории) */
.atpl-related {
    background: #fff;
}

.atpl-related .atpl__cover {
    padding-bottom: 72px;
}

.atpl-related__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin-top: 32px;
}

/* (адаптив) */
@media screen and (max-width: 1200px) {
    .atpl__cover {
        padding: 0 40px;
    }

    .atpl-hero__cover {
        gap: 24px;
    }

    .atpl-hero__scheme {
        width: 50%;
    }

    .atpl-head__body,
    .atpl-about__cover {
        grid-template-columns: 300px minmax(0, 1fr);
        gap: 32px;
    }

    .atpl-article__split,
    .atpl-nodes__body {
        grid-template-columns: minmax(0, 1fr) 300px;
    }

    .atpl-cta__image {
        width: 400px;
    }
}

@media screen and (max-width: 980px) {
    .atpl-hero__cover {
        flex-direction: column;
        align-items: flex-start;
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .atpl-hero__title {
        font-size: 34px;
    }

    /* На узких экранах иллюстрация встаёт под текстом обычным потоком.
       Отступ до текста не задаём: в кадре мобильной картинки сверху и снизу
       остался свой воздух (по 61 px при ширине 375), внешний margin к нему
       прибавлялся и разрывал шапку — «слишком много пустого места под текстом». */
    .atpl-hero__scheme {
        position: static;
        width: 100%;
    }

    /* мобильная иллюстрация 375x272 — соотношение задаём явно: иначе бокс
       считается по width/height десктопной картинки (720x400) и схему плющит */
    .atpl-hero__scheme img {
        height: auto;
        aspect-ratio: 375 / 272;
        object-fit: contain;
    }

    .atpl-catalog__list,
    .atpl-steps__list,
    .atpl-related__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .atpl-head__body,
    .atpl-about__cover,
    .atpl-article__split,
    .atpl-nodes__body {
        grid-template-columns: minmax(0, 1fr);
    }

    .atpl-service,
    .atpl-import__list {
        max-width: none;
    }

    .atpl-scheme-view__stage {
        height: 320px;
    }

    .atpl-cta__cover {
        flex-direction: column;
        align-items: flex-start;
    }

    .atpl-cta__image {
        align-self: center;
        width: 340px;
        margin-bottom: -40px;
    }

    .atpl-cta_flat .atpl-cta__actions {
        width: 100%;
    }

    /* когда колонки схлопываются, кнопка «Скачать шаблон» по макету (node 666:14020)
       уезжает под изображение схемы и центрируется. display: contents вынимает детей
       .atpl-head__text в общий поток, иначе кнопку не переставить относительно схемы */
    .atpl-head__body {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .atpl-head__text {
        display: contents;
    }

    .atpl-scheme-view {
        order: 1;
        margin-top: 32px;
    }

    .atpl-head__btn {
        order: 2;
        align-self: center;
        margin-top: 24px;
    }
}

@media screen and (max-width: 760px) {
    .atpl__cover {
        padding: 0 16px;
    }

    .atpl__title {
        font-size: 24px;
    }

    .atpl-hero__title {
        font-size: 30px;
    }

    .atpl-hero__descr {
        font-size: 16px;
    }

    /* «Тот же вопрос про кнопки: они 32 на 32, можем ли сделать кликабельную зону
       для каждой 38 на 38» — комментарий дизайнера к иконкам интеграций */
    .atpl-int {
        width: 38px;
        height: 38px;
    }

    .atpl-catalog__cover,
    .atpl-faq .atpl__cover,
    .atpl-import .atpl__cover {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .atpl-catalog__filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: -16px;
        padding-right: 16px;
        scrollbar-width: none;
    }

    .atpl-catalog__filters::-webkit-scrollbar {
        display: none;
    }

    .atpl-chip {
        flex: 0 0 auto;
    }

    .atpl-catalog__list,
    .atpl-steps__list,
    .atpl-related__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .atpl-catalog__foot {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .atpl-head__title {
        font-size: 28px;
    }

    .atpl-faq__q {
        padding: 18px 20px;
    }

    .atpl-faq__a {
        padding: 0 20px 18px;
    }

    /* значок «i» стоит сбоку от текста, а не под ним (макет node 666:14639):
       перенос запрещён, текст переносится внутри себя, значок не сжимается.
       Само пояснение по-прежнему роняем под строку, чтобы не появлялась
       горизонтальная прокрутка.
       align-items: baseline ставит значок напротив ПЕРВОЙ строки текста —
       при centering он оказывался между строк */
    .atpl-nodes__lead {
        position: relative;
        flex-wrap: nowrap;
        align-items: baseline;
    }

    .atpl-hint {
        position: static;
        flex: 0 0 auto;
    }

    .atpl-hint__text {
        top: calc(100% + 8px);
        left: 0;
        max-width: 100%;
        white-space: normal;
        transform: none;
    }

    .atpl-node__head {
        flex-wrap: wrap;
        padding: 16px 20px;
    }

    .atpl-node__title {
        flex: 1 1 100%;
    }

    /* «+»/«−» прижат к правому краю блока, а не стоит вплотную к заголовку
       и бейджам (макет node 666:14639) */
    .atpl-node__sign {
        margin-left: auto;
    }

    .atpl-node__inner {
        padding: 0 20px 20px;
    }

    /* «Интеграция» и «Тип узла» — только для десктопа: на мобильном те же значения
       уже показаны бейджами в шапке узла */
    .atpl-node__props {
        display: none;
    }

    /* параметры оформлены таблицей со всеми границами — рамку задаём контейнеру,
       у строк снимаем нижнюю границу у последней */
    .atpl-params {
        border: 1px solid #eee;
    }

    .atpl-params__head {
        font-weight: 700;
    }

    .atpl-params__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .atpl-params__row:last-child {
        border-bottom: none;
    }

    .atpl-cta__title {
        font-size: 26px;
    }

    .atpl-cta__descr {
        font-size: 16px;
    }

    .atpl-btn {
        height: 44px;
        padding: 0 20px;
        font-size: 15px;
    }

    .atpl-scheme-view__stage {
        height: 240px;
    }

    .atpl-scheme-view__controls {
        left: 16px;
        bottom: 16px;
    }

    /* «заголовок прижат к верху», «верх баннера обрезан» — на мобильном
       баннерам и шапке карточки добавлен воздух сверху */
    .atpl-hero__cover {
        padding-top: 64px;
    }

    /* .atpl__cover выше сбрасывает вертикальные отступы шорткатом padding, поэтому
       низ шапки задаём явно: иначе «Категория» вплотную липнет к кнопке */
    .atpl-head__cover {
        padding-top: 48px;
        padding-bottom: 40px;
    }

    /* «Настройка шаблона» упиралась в блок выше по той же причине */
    .atpl-nodes .atpl__cover {
        padding-top: 48px;
    }

    .atpl-cta__cover {
        padding-top: 48px;
    }

    /* «Скачать шаблон» под схемой — во всю ширину, ровно по ширине картинки выше */
    .atpl-head__btn {
        align-self: stretch;
        width: 100%;
    }

    /* кнопка баннера — на всю ширину и по центру (макет node 644:9200) */
    .atpl-cta__content > .atpl-btn {
        width: 100%;
    }

    /* слон должен попадать в кадр целиком: убираем отрицательный отступ — на мобильном
       он срезал у иллюстрации нижнюю четверть вместе с ногами */
    .atpl-cta__image {
        align-self: center;
        width: 100%;
        max-width: 420px;
        margin-bottom: 0;
    }

    /* «Скачать шаблон» и «Помощь в настройке» стоят рядом (макет node 674:3200) */
    .atpl-cta_flat .atpl-cta__actions {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .atpl-cta_flat .atpl-cta__actions .atpl-btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* блок «обновление / скачиваний / поделиться» из макета (node 666:14073):
       заголовки капсом крупнее значений, «обновление» и «скачиваний» — в один ряд */
    .atpl-meta {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 16px;
    }

    .atpl-meta__item {
        grid-column: 1 / -1;
    }

    .atpl-meta__item_pair {
        grid-column: auto;
    }

    .atpl-meta__item + .atpl-meta__item {
        margin-top: 0;
    }

    /* подписи «Категория», «Автор», «Обновление», «Скачиваний» — не жирные */
    .atpl-meta__label {
        font-size: 15px;
        font-weight: 500;
        letter-spacing: .02em;
    }

    /* на мобильном подписи сокращаются (макет node 666:14073) */
    .atpl-meta__label-full {
        display: none;
    }

    .atpl-meta__label-short {
        display: inline;
    }

    .atpl-meta__value {
        font-size: 14px;
    }

    /* значок «Поделиться» крупнее */
    .atpl-meta__share svg {
        width: 28px;
        height: 28px;
    }

    /* нумерация шагов импорта крупнее (макет node 674:3272) */
    .atpl-import__num {
        width: 34px;
        height: 34px;
        font-size: 18px;
    }

    /* «Скачать шаблон» и «Все шаблоны» стоят по центру (макет node 666:13568) */
    .atpl-cta__buttons {
        justify-content: center;
    }
}

/* (модалка «Предложить сценарий») */
.atpl-propose {
    width: 386px;
    max-width: calc(100vw - 80px);
    text-align: left;
}

.atpl-propose .floating-input_area {
    min-height: 82px;
}

/* у поля с описанием сценария высота больше строки — растим и подпись поднимаем */
.atpl-propose .floating-input_area .floating-input__field {
    height: 54px;
    margin-top: 16px;
    resize: none;
    font: inherit;
    color: #1a1a1a;
}

/* поп-ап кладёт клон формы в body, вне .atpl, поэтому локальное
   .atpl [hidden] до него не достаёт, а .demo-form { display: flex } из
   components.css перебивает [hidden] нормализации — гасим явно, иначе после
   отправки заявки видно и форму, и блок «Заявка отправлена» */
.atpl-propose .help-block[hidden],
.atpl-propose .demo-form[hidden] {
    display: none;
}

.atpl-propose .help-block {
    margin-top: 8px;
    color: #e02b2b;
    font-size: 13px;
    line-height: 1.4;
}

.atpl-propose__done p {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4d4d4c;
}