.mt-how-it-works,
.mt-how-it-works * {
    box-sizing: border-box;
}

.mt-how-it-works {
    width: 100%;
    padding: 6.944vw;
    background: #f2f2f2;
}

.mt-how-it-works-inner {
    width: 100%;
    max-width: 86.111vw;
    margin: 0 auto;
}

.mt-how-it-works-title {
    margin: 0 0 3.472vw;
    color: #0d0d0d;
    font-family: var(--vape-font-brand);
    font-size: 2.5vw;
    font-weight: 700;
    line-height: 3.056vw;
    letter-spacing: 0.14em;
    text-align: center;
    text-transform: uppercase;
}

.mt-how-it-works-list {
    width: 100%;
    min-height: 9.306vw;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 1.389vw;
}

.mt-how-it-works-step {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.778vw;
    align-items: center;
    gap: 1.389vw;
}

.mt-how-it-works-step:last-child {
    grid-template-columns: minmax(0, 1fr);
}

.mt-how-it-works-step-main {
    min-width: 0;
    display: grid;
    grid-template-columns: 3.125vw minmax(0, 1fr);
    align-items: center;
    gap: 1.25vw;
}

.mt-how-it-works-icon {
    width: 3.125vw;
    height: 3.125vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt-how-it-works-icon img {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: contain;
}

.mt-how-it-works-copy {
    min-width: 0;
}

.mt-how-it-works-step-title {
    margin: 0 0 0.417vw;
    color: #0d0d0d;
    font-family: var(--vape-font-brand);
    font-size: 1.111vw;
    font-weight: 700;
    line-height: 1.667vw;
    letter-spacing: 0;
}

.mt-how-it-works-step-desc {
    margin: 0;
    color: #5c5c5c;
    font-family: var(--vape-font-brand);
    font-size: 0.972vw;
    font-weight: 500;
    line-height: 1.528vw;
    letter-spacing: 0;
}

.mt-how-it-works-arrow {
    width: 2.778vw;
    height: 2.778vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mt-how-it-works-arrow img {
    width: 100%;
    height: 100%;
    max-width: none;
    display: block;
    object-fit: contain;
}

.mt-how-it-works-arrow span {
    color: #0d0d0d;
    font-size: 2.222vw;
    font-weight: 400;
    line-height: 1;
}

@media (max-width: 1024px) {
    .mt-how-it-works {
        padding: 6.25vw 3.516vw;
    }

    .mt-how-it-works-inner {
        max-width: 100%;
    }

    .mt-how-it-works-title {
        margin-bottom: 5.859vw;
        font-size: 2.539vw;
        line-height: 3.32vw;
    }

    .mt-how-it-works-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 4.688vw;
    }

    .mt-how-it-works-step {
        grid-template-columns: minmax(0, 1fr) 2.93vw;
        gap: 2.344vw;
    }

    .mt-how-it-works-step:nth-child(2n) {
        grid-template-columns: minmax(0, 1fr);
    }

    .mt-how-it-works-step:nth-child(2n) .mt-how-it-works-arrow {
        display: none;
    }

    .mt-how-it-works-step-main {
        grid-template-columns: 3.906vw minmax(0, 1fr);
        gap: 1.953vw;
    }

    .mt-how-it-works-icon {
        width: 3.906vw;
        height: 3.906vw;
    }

    .mt-how-it-works-step-title {
        margin-bottom: 0.781vw;
        font-size: 1.563vw;
        line-height: 2.344vw;
    }

    .mt-how-it-works-step-desc {
        font-size: 1.367vw;
        line-height: 2.148vw;
    }

    .mt-how-it-works-arrow {
        width: 1.563vw;
        height: 2.734vw;
    }
}

@media (max-width: 768px) {
    .mt-how-it-works {
        padding: 7.813vw 2.344vw;
    }

    .mt-how-it-works-title {
        margin-bottom: 6.25vw;
        font-size: 3.125vw;
        line-height: 4.167vw;
        letter-spacing: 0.12em;
    }

    .mt-how-it-works-list {
        grid-template-columns: 1fr;
        row-gap: 4.167vw;
    }

    .mt-how-it-works-step,
    .mt-how-it-works-step:nth-child(2n) {
        grid-template-columns: minmax(0, 1fr);
    }

    .mt-how-it-works-arrow {
        display: none;
    }

    .mt-how-it-works-step-main {
        grid-template-columns: 5.208vw minmax(0, 1fr);
        gap: 2.604vw;
    }

    .mt-how-it-works-icon {
        width: 5.208vw;
        height: 5.208vw;
    }

    .mt-how-it-works-step-title {
        margin-bottom: 1.042vw;
        font-size: 2.083vw;
        line-height: 3.125vw;
    }

    .mt-how-it-works-step-desc {
        font-size: 1.823vw;
        line-height: 2.865vw;
    }
}
/* 手机端(≤520px):还原 PDF 的单列步骤(图标左 / 文案右)、可读字号 */
@media (max-width: 520px) {
    .mt-how-it-works {
        padding: 10.667vw 5.333vw;
    }

    .mt-how-it-works-inner {
        max-width: 100%;
    }

    .mt-how-it-works-title {
        margin-bottom: 8vw;
        font-size: 6.4vw;
        line-height: 1.2;
        letter-spacing: 0.06em;
    }

    .mt-how-it-works-list {
        grid-template-columns: 1fr;
        row-gap: 6.4vw;
    }

    .mt-how-it-works-step,
    .mt-how-it-works-step:nth-child(2n) {
        grid-template-columns: minmax(0, 1fr);
    }

    .mt-how-it-works-arrow {
        display: none;
    }

    .mt-how-it-works-step-main {
        grid-template-columns: 11.733vw minmax(0, 1fr);
        gap: 4.267vw;
        align-items: flex-start;
    }

    .mt-how-it-works-icon {
        width: 11.733vw;
        height: 11.733vw;
        padding: 2.667vw;
        border-radius: 3.2vw;
        background: #f4fdfb;
        border: 1px solid #d7f7f1;
    }

    .mt-how-it-works-step-title {
        margin-bottom: 1.333vw;
        font-size: 4.267vw;
        line-height: 1.25;
    }

    .mt-how-it-works-step-desc {
        font-size: 3.467vw;
        line-height: 1.5;
    }
}