/* ─── Блок «возможности/что вы получаете»: заголовок + сетка карточек ───
 * (иконка + заголовок + описание). Рендерится через
 * template-parts/transcription-features.php.
 * Общие классы .process-icon-wrapper / .process-steps-content остаются
 * в landing-styles.css. */

.transcription-process-block {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.transcription-process-title {
    font-weight: 700;
    font-size: 54px;
    line-height: 105%;
    color: #09090A;
    text-align: center;
}

.process-steps_transcription {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.transcript-process-icon-wrapper {
    background: #EBEBF5;
}

.transcription-process-steps-item-border {
    border-radius: 32px;
    background: linear-gradient(180deg, #FFFFFF 0%, #EBEBF5 100%);
    padding: 0.5px;
}

.transcription-process-steps-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 368px;
    background: linear-gradient(180deg, #F5F5FA 0%, #FFFFFF 100%);
    padding: 24px;
    border-radius: 32px;
    height: 100%;
}

.transcription-process-content-item-title {
    color: #09090A;
    font-weight: 500;
    font-size: 28px;
    line-height: 120%;
}

.transcription-process-content-desc {
    color: #15151A;
    font-weight: 400;
    font-size: 18px;
    line-height: 140%;
}

@media screen and (max-width: 862px) {
    .process-steps_transcription {
        grid-template-columns: 1fr;
    }

    .transcription-process-title {
        font-size: 36px;
    }

    .transcription-process-block {
        gap: 60px;
    }
}