/* How It Works block (blocks/how-it-works) */
.how-it-works-block {
    background-color: var(--bg-color, #001744);
    padding: 60px 20px;
}

.how-it-works-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.how-it-works-heading {
    margin: 0 0 40px;
    text-align: center;
    font-weight: 900;
    font-style: italic;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.6px;
    background: linear-gradient(89.65deg, var(--color-yellow-light, #FEC20E) 28%, var(--color-orange, #FF7403) 97.28%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--color-yellow-light, #FEC20E); /* fallback for browsers without background-clip: text support */
}

.how-it-works-steps {
    display: flex;
    /* stretch (not center) so every .how-it-works-step matches the height
       of the tallest card in the row, instead of each sizing to its own
       content. The arrow between them centers itself vertically via its
       own flex rules below, so it stays centered on the stretched row. */
    align-items: stretch;
    justify-content: center;
    gap: 20px;
}

.how-it-works-step {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 36px 24px;
}

.how-it-works-image {
    width: var(--how-it-works-image-width, 50%);
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* margin-top (not transform) so a negative offset also pulls the title/
       content below it up, instead of leaving behind the image's original,
       now-empty layout space as a gap. The image is allowed to bleed past
       the card's own top edge when the offset exceeds the card's 36px top
       padding (see .how-it-works-arrow's margin-bottom on mobile, which
       reserves extra clearance so that bleed can never reach the arrow). */
    margin-top: var(--how-it-works-image-offset, 0px);
    margin-bottom: 0;
}

.how-it-works-image-empty {
    width: var(--how-it-works-image-width, 50%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.how-it-works-step-title {
    margin: 12px 0 0px;
    font-weight: 800;
    font-size: 24px;
    line-height: 1.3;
    letter-spacing: -0.48px;
    background: linear-gradient(90deg, #FEC20E 28%, #FF7403 97.28%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #FEC20E; /* fallback for browsers without background-clip: text support */
}

.how-it-works-step-content {
    color: var(--text-white, #fff);
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
    letter-spacing: -0.45px;
}

.how-it-works-step-content > *:last-child {
    margin-bottom: 0;
}

.how-it-works-arrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.how-it-works-arrow img {
    width: 28px;
    height: auto;
    display: block;
}

.how-it-works-placeholder {
    color: #999;
    text-align: center;
    padding: 40px;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 12px;
}

/* Mobile: stack the steps and point the arrow down instead of right. */
@media (max-width: 767px) {
    .how-it-works-block {
        padding: 32px 16px;
    }

    .how-it-works-heading {
        margin-bottom: 24px;
        font-size: 28px;
        letter-spacing: -0.56px;
    }

    .how-it-works-steps {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .how-it-works-step {
        width: 100%;
    }

    .how-it-works-step-title {
        font-size: 18px;
        letter-spacing: -0.36px;
    }

    .how-it-works-step-content {
        font-size: 14px;
        letter-spacing: -0.35px;
    }

    .how-it-works-arrow {
        padding: 4px 0;
        transform: rotate(90deg);
        /* If the offset pulls the NEXT step's image up far enough to bleed
           past that card's 36px top padding, push this arrow further away
           by the same amount (plus a small buffer) so a ~16px clearance is
           always kept between the arrow and the bled image, however large
           the offset gets - instead of capping the offset itself. */
        margin-bottom: max(0px, calc(-32px - var(--how-it-works-image-offset, 0px)));
    }
}