.process-flow-section {
    position: relative;
    isolation: isolate;
    overflow: clip;
    padding-block: clamp(78px, 9vw, 112px);
}

.process-flow-section:not([data-section-background])::before {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    left: 50%;
    width: 100vw;
    background: var(--section-background, transparent);
    content: "";
    transform: translateX(-50%);
}

.process-flow-section .section-heading {
    width: min(700px, 100%);
    margin: 0 auto clamp(52px, 7vw, 76px);
    text-align: center;
}

.process-flow-section .section-heading > p:not(.eyebrow) { margin-inline: auto; }
.process-flow-section .section-heading .eyebrow { color: var(--brand-primary); }

.process-flow {
    --process-gap: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(var(--process-count), minmax(0, 190px));
    justify-content: center;
    align-items: stretch;
    gap: var(--process-gap);
    margin: 0;
    padding: 12px 0 28px;
    list-style: none;
}

.process-flow__step {
    position: relative;
    min-width: 0;
    min-height: 196px;
}

.process-flow__card {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 196px;
    margin: 0;
    padding: 34px 18px 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid rgba(25, 28, 36, .06);
    border-radius: 15px;
    background: #fff;
    color: #25272e;
    text-align: center;
    box-shadow: 0 15px 30px rgba(25, 29, 40, .10), 0 3px 8px rgba(25, 29, 40, .05);
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.process-flow__step.is-featured .process-flow__card {
    border-color: color-mix(in srgb, var(--brand-primary) 72%, #fff);
    background: color-mix(in srgb, var(--step-accent) 8%, #fff);
    box-shadow: 0 20px 38px color-mix(in srgb, var(--brand-primary) 16%, rgba(25,29,40,.12)), 0 0 0 2px color-mix(in srgb, var(--brand-primary) 16%, transparent);
    transform: translateY(-6px);
}

.process-flow__badge {
    position: absolute;
    z-index: 4;
    top: -8px;
    left: 50%;
    min-width: 56px;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--theme-base) 82%, #172035);
    color: var(--theme-text);
    font-size: .56rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    box-shadow: 0 5px 12px rgba(20, 24, 34, .14);
}

.process-flow__step.is-featured .process-flow__badge { background: var(--brand-primary); color: var(--theme-base); }

.process-flow__icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: color-mix(in srgb, var(--step-accent) 16%, #fff);
    color: var(--step-accent);
}

.process-flow__icon .process-icon-svg { width: 22px; height: 22px; display: block; }
.process-flow__card h3 { margin: 17px 0 0; font-size: .84rem; font-weight: 800; line-height: 1.28; letter-spacing: -.012em; }
.process-flow__card p { max-width: 154px; margin: 9px auto 0; color: #747780; font-size: .68rem; line-height: 1.5; }

.process-flow__connector {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 100%;
    width: var(--process-gap);
    height: 1px;
    background: color-mix(in srgb, var(--brand-primary) 50%, var(--line));
    transform: translateY(-50%);
}

.process-flow__connector::after {
    position: absolute;
    top: 50%;
    right: 0;
    width: 0;
    height: 0;
    border-block: 4px solid transparent;
    border-left: 6px solid var(--brand-primary);
    content: "";
    transform: translate(1px, -50%);
}

@media (min-width: 581px) and (max-width: 980px) {
    .process-flow {
        --process-gap: 34px;
        grid-template-columns: repeat(2, minmax(0, 280px));
        grid-auto-rows: minmax(188px, auto);
        row-gap: 46px;
    }

    .process-flow__step { grid-row: var(--tablet-row); grid-column: var(--tablet-column); min-height: 188px; }
    .process-flow__card { min-height: 188px; }

    .process-flow__step[data-tablet-next="left"] .process-flow__connector {
        right: 100%;
        left: auto;
    }
    .process-flow__step[data-tablet-next="left"] .process-flow__connector::after {
        right: auto;
        left: 0;
        border-right: 6px solid var(--brand-primary);
        border-left: 0;
        transform: translate(-1px, -50%);
    }
    .process-flow__step[data-tablet-next="down"] .process-flow__connector {
        top: 100%;
        left: 50%;
        width: 1px;
        height: 46px;
        transform: none;
    }
    .process-flow__step[data-tablet-next="down"] .process-flow__connector::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-top: 6px solid var(--brand-primary);
        border-right: 4px solid transparent;
        border-bottom: 0;
        border-left: 4px solid transparent;
        transform: translate(-50%, 1px);
    }
}

@media (max-width: 580px) {
    .process-flow-section { padding-block: 64px; }
    .process-flow-section .section-heading { margin-bottom: 42px; }
    .process-flow { grid-template-columns: minmax(0, 340px); gap: 38px; padding-top: 10px; }
    .process-flow__step { min-height: 174px; grid-row: auto; grid-column: auto; }
    .process-flow__card { min-height: 174px; padding-block: 31px 20px; }
    .process-flow__step.is-featured .process-flow__card { transform: none; }
    .process-flow__connector {
        top: 100%;
        left: 50%;
        width: 1px;
        height: 38px;
        transform: none;
    }
    .process-flow__connector::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        border-top: 6px solid var(--brand-primary);
        border-right: 4px solid transparent;
        border-bottom: 0;
        border-left: 4px solid transparent;
        transform: translate(-50%, 1px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .process-flow__card { transition: none; }
}