.nml-steps {
    padding: 80px 0;
    background: var(--color-bg);
}

/* ── Header ── */
.nml-steps__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin-bottom: 48px;
}

.nml-steps__heading {
    margin: 0;
    font-size: 48px;
    line-height: 56px;
    font-weight: 700;
}

.nml-steps__heading-plain  { color: var(--color-text-primary); }
.nml-steps__heading-accent,
.nml-steps__heading span { color: var(--color-text-accent); }

/* ── Body: 2 columns ── */
.nml-steps__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* колонки одной высоты: высоту строки задаёт левый аккордеон */
    align-items: stretch;
}

/* ── Accordion list ── */
.nml-steps__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nml-steps__item {
    border: 1px solid var(--color-line);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
    box-shadow: 0px 1px 2px 0px #4C83F333;
}

.nml-steps__item.is-active {
    border-color: var(--color-line);
}

.nml-steps__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: padding 400ms cubic-bezier(0, 0, 0.58, 1);
}

.nml-steps__item.is-active .nml-steps__trigger {
    transition: padding 400ms cubic-bezier(0.42, 0, 1, 1);
}

.nml-steps__item.is-active .nml-steps__trigger {
    align-items: flex-start;
    flex-direction: column;
    padding: 24px 24px 8px 24px;
}

.nml-steps__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--color-bg);
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: var(--color-text-secondary);
    transition: background 0.2s, color 0.2s;
    border: 1px solid var(--color-line);
    background: var(--color-line-light);
}

.nml-steps__item.is-active .nml-steps__num {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    width: auto;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
}

.nml-steps__item.is-active .nml-steps__title {
    font-size: 24px;
    line-height: 32px;
}

.nml-steps__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 150%;
    transition: font-size 400ms cubic-bezier(0, 0, 0.58, 1),
                line-height 400ms cubic-bezier(0, 0, 0.58, 1);
}

.nml-steps__item.is-active .nml-steps__title {
    transition: font-size 400ms cubic-bezier(0.42, 0, 1, 1),
                line-height 400ms cubic-bezier(0.42, 0, 1, 1);
}

/* раскрытие (Figma: 400ms, открытие ease-in / закрытие ease-out) */
.nml-steps__content {
    display: grid;
    grid-template-rows: 0fr;
    /* базовое состояние = закрытие → ease-out */
    transition: grid-template-rows 400ms cubic-bezier(0, 0, 0.58, 1);
}

.nml-steps__item.is-active .nml-steps__content {
    grid-template-rows: 1fr;
    /* открытие → ease-in */
    transition: grid-template-rows 400ms cubic-bezier(0.42, 0, 1, 1);
}

/* только обрезает контент — без своих отступов,
   иначе они не дадут строке схлопнуться в 0 */
.nml-steps__content-clip {
    overflow: hidden;
    min-height: 0;
    /* убираем кнопки внутри из таб-порядка, но только после анимации */
    visibility: hidden;
    transition: visibility 0s linear 400ms;
}

.nml-steps__item.is-active .nml-steps__content-clip {
    visibility: visible;
    transition: visibility 0s;
}

.nml-steps__content-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 24px 24px 24px;
}

.nml-steps__text {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.nml-steps__btns {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nml-steps .btn-primary-black{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px 24px;
    gap: 8px;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 8px;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-line-white);
    text-decoration: none;
    transition: all 0.3s;
    max-height: 40px;
}

.nml-steps .btn-primary-black:hover{
    background: #0F204D;
    border: 1px solid #040F2D;
}

.nml-steps__btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    border: 1px solid var(--color-line);
    background: #162F6F0A;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s;
}

.nml-steps__btn-outline:hover {
    border: 1px solid var(--color-line-blue);
    background: #F5F6FA;
}

/* слайды вынуты из потока — их высота не растягивает грид-строку,
   сама колонка тянется до высоты аккордеона за счёт align-items: stretch */
.nml-steps__visual{
    position: relative;
    height: 100%;
    min-height: 0;
}

/* слайды лежат стопкой и кроссфейдятся — теми же 400ms, что и аккордеон */
.nml-steps__visual-slide {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-line);
    padding: 24px;
    box-shadow: 0px 1px 2px 0px #4C83F333;
    border-radius: 12px;
    background: var(--color-bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 400ms cubic-bezier(0, 0, 0.58, 1),
                visibility 0s linear 400ms;
}

.nml-steps__visual-slide.is-active {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms cubic-bezier(0.42, 0, 1, 1),
                visibility 0s;
}

.nml-steps__visual-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 8px;
    background-color: #F5F6FA;
    border: 1px solid var(--color-line);
    padding: 25px;
}

/* ── Motion ── */
@media (prefers-reduced-motion: reduce) {
    .nml-steps__content,
    .nml-steps__item.is-active .nml-steps__content,
    .nml-steps__trigger,
    .nml-steps__item.is-active .nml-steps__trigger,
    .nml-steps__title,
    .nml-steps__item.is-active .nml-steps__title,
    .nml-steps__visual-slide,
    .nml-steps__visual-slide.is-active {
        transition-duration: 0s;
    }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .nml-steps__heading {
        font-size: 40px;
        line-height: 48px;
    }
}

@media (max-width: 768px) {

    .nml-steps {
        padding: 40px 0;
    }

    .nml-steps__header {
        gap: 16px;
        margin-bottom: 32px;
    }

    .nml-steps__heading {
        font-size: 32px;
        line-height: 40px;
    }

    .nml-steps__body {
        grid-template-columns: 1fr;
    }

    .nml-steps__content-body {
        padding: 0 20px 20px 20px;
        gap: 20px;
    }

    .nml-steps__item.is-active .nml-steps__mobile-img {
        display: block;
        margin-bottom: 16px;
        border-radius: 10px;
        overflow: hidden;
    }

    .nml-steps__item.is-active .nml-steps__trigger {
        padding: 20px 20px 8px 20px;
        gap: 16px;
    }

    .nml-steps__item.is-active .nml-steps__num {
        padding: 4px 10px;
        font-size: 12px;
        line-height: 16px;
        height: 24px;
        border-radius: 4px;
    }

    .nml-steps__item.is-active .nml-steps__title {
        font-size: 18px;
        line-height: 26px;
    }

    .nml-steps__title {
        font-size: 16px;
        line-height: 24px;
    }

    .nml-steps .btn-primary-black{
        flex: 1;
    }

    .nml-steps__btn-outline{
        flex: 1;
    }

    .nml-steps__trigger {
        gap: 12px;
        padding: 20px;
    }

    .nml-steps__list{
        order: 2;
    }

    /* одна колонка — возвращаем слайды в поток */
    .nml-steps__visual {
        position: static;
        height: auto;
    }

    /* в потоке кроссфейд невозможен — слайды снова показываем по одному */
    .nml-steps__visual-slide {
        display: none;
        position: static;
        height: auto;
        padding: 16px;
        border-radius: 8px;
    }

    .nml-steps__visual-slide img {
        height: auto;
        border-radius: 4px;
    }
}