/*
 * Canonical How It Works styles.
 * Unified 2026-08-27: the icon-badge circle design (background-image numbers, no border,
 * larger 48px title) was already the ACTUAL rendered design everywhere — a global rule in
 * css/style.min.css (".how-it-works .how-it-works__circle", 2-class specificity) was silently
 * beating this file's old bare 1-class selectors on every page. Rather than leave that landmine,
 * the winning values are now the canonical ones (matching what Solutions V2 already showed),
 * and the redundant copy in css/style.min.css was removed. Compare V2's own artwork variant
 * (".compare-v2-how-it-works") is untouched — that's a deliberate per-family look, not a dup.
 */
.how-it-works {
    padding-top: 80px;
    padding-bottom: 0;
    background: #fff;
}

.how-it-works .container {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 1274px;
    padding-left: 32px;
    padding-right: 32px;
    width: 100%;
}

.how-it-works__wrapper {
    display: flex;
    flex-direction: column;
    gap: 64px;
    align-items: center;
    padding-top: 0;
}

.how-it-works__title {
    max-width: var(--how-it-works-title-max-width, 720px);
    margin: 0;
    color: #282828;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: -0.4px;
}

/* Compare V2's artwork and equal-height cards are intentional family variants. */
.compare-v2-how-it-works .how-it-works__circle--1,
.compare-v2-how-it-works .how-it-works__circle--2 {
    color: transparent;
    font-size: 0;
}

.compare-v2-how-it-works .how-it-works__circle--1 {
    background-image: url("https://simplydepostag.wpengine.com/wp-content/uploads/2026/06/1.svg");
}

.compare-v2-how-it-works .how-it-works__circle--2 {
    background-image: url("https://simplydepostag.wpengine.com/wp-content/uploads/2026/06/2.svg");
}

.how-it-works__steps {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.how-it-works__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    min-width: 0;
}

.how-it-works__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.how-it-works__line {
    flex: 1;
    height: 2px;
    min-width: 0;
    background: #f2f2f2;
}

.how-it-works__line--hidden {
    background: transparent;
}

.how-it-works__circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    letter-spacing: 0.18px;
    color: #282828;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.how-it-works__circle--1 {
    background-image: url("../../images/1.svg");
}

.how-it-works__circle--2 {
    background-image: url("../../images/2.svg");
}

.how-it-works__circle--3 {
    background-image: url("../../images/3.svg");
}

.how-it-works__card-wrap {
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.how-it-works__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    flex: 1;
    padding: 32px 40px;
    border-radius: 32px;
    background: #f7f7f7;
    text-align: center;
}

.how-it-works__card-title {
    margin: 0;
    color: #282828;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.how-it-works__card-text {
    margin: 0;
    color: rgba(0, 0, 0, 0.75);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.16px;
}

@media screen and (max-width: 991px) {
    .how-it-works__steps {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 24px;
    }

    .how-it-works__step {
        flex: unset;
        width: 100%;
    }

    .how-it-works__indicator {
        display: none;
    }

    .how-it-works__card-wrap {
        padding: 0;
    }

    /* Compare V3 still loads a legacy global rule after component styles. */
    body.compare-v3-body .how-it-works__indicator {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .how-it-works {
        padding: 0;
    }

    .how-it-works .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .how-it-works__wrapper {
        gap: 24px;
        padding: 48px 0 0;
    }

    .how-it-works__title {
        font-size: 28px;
        line-height: 34px;
        letter-spacing: -0.14px;
        text-align: left;
    }

    .how-it-works__steps {
        gap: 0;
    }

    .how-it-works__step {
        flex-direction: row;
        gap: 20px;
        align-items: stretch;
        width: 100%;
    }

    .how-it-works__indicator {
        display: flex;
        flex-direction: column;
        gap: 8px;
        width: auto;
        align-self: stretch;
        justify-content: center;
        align-items: center;
    }

    /* Override Compare V3's tablet hide rule once the mobile stepper takes over. */
    body.compare-v3-body .how-it-works__indicator {
        display: flex;
    }

    .how-it-works__line {
        flex: 1;
        width: 1px;
        height: auto;
    }

    .how-it-works__circle {
        width: 32px;
        height: 32px;
        font-size: 16px;
        line-height: 24px;
        background-size: contain;
    }

    .how-it-works__card-wrap {
        padding: 0 0 16px;
    }

    .how-it-works__card {
        padding: 20px;
        text-align: left;
        border-radius: 16px;
        gap: 4px;
    }

    .how-it-works__card-title {
        font-size: 18px;
        line-height: 26px;
        letter-spacing: 0.09px;
    }

    .how-it-works__card-text {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.14px;
    }
}