.inject-approach{
    padding:24px 0 12px;
}

.inject-approach__head{
    margin-bottom:40px;
}

.inject-approach__eyebrow{
    display:inline-block;
    margin-bottom:14px;
    color:var(--inject-orange);
    font-size:13px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.inject-approach__title{
    margin:0;
    font-size:clamp(34px,5vw,58px);
    line-height:.95;
    letter-spacing:-.05em;
    font-weight:500;
    color:var(--inject-navy);
    max-width:16ch;
}

.inject-approach__steps{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:16px;
}

.inject-approach__steps::before{
    content:"";
    position:absolute;
    top:36px;
    bottom:36px;
    left:35px;
    width:2px;
    background:
            linear-gradient(
                    180deg,
                    rgba(243,106,69,.35),
                    rgba(41,52,92,.08)
            );
}

.inject-step{
    position:relative;
    display:grid;
    grid-template-columns:72px 1fr auto;
    gap:28px;
    align-items:center;
    padding:28px 32px;
    background:var(--inject-card);
    border:1px solid var(--inject-border);
    border-radius:var(--inject-radius-xl);
    box-shadow:var(--inject-shadow);

    transition:
            transform var(--inject-transition),
            box-shadow var(--inject-transition),
            border-color var(--inject-transition);

    z-index:1;
}

.inject-step:hover{
    transform:translateY(-3px);

    box-shadow:
            0 24px 54px rgba(41,52,92,.09);

    border-color:
            rgba(41,52,92,.12);
}

.inject-step__number{
    width:72px;
    height:72px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;

    background:
            radial-gradient(
                    circle at 30% 30%,
                    rgba(243,106,69,.22),
                    transparent 60%
            ),
            linear-gradient(
                    135deg,
                    #ebe7f2 0%,
                    #dde6f6 100%
            );

    color:var(--inject-navy);

    font-size:22px;
    font-weight:600;
}

.inject-step__title{
    margin:0 0 8px;
    color:var(--inject-navy);
    font-size:22px;
    line-height:1.15;
}

.inject-step__text{
    margin:0;
    color:var(--inject-text);
    font-size:15px;
    line-height:1.75;
}

.inject-step__icon{
    width:56px;
    height:56px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--inject-orange-soft);
}

.inject-step__icon img{
    width:26px;
    height:26px;
    object-fit:contain;
}

@media(max-width:840px){

    .inject-step{
        grid-template-columns:56px 1fr;
        gap:18px;
        padding:22px;
    }

    .inject-approach__head {
        flex-direction: column;
        align-items: start;
    }

    .inject-approach__title {
        max-width: none;
    }

    .inject-step__number {
        width: 56px;
        height: 56px;
        font-size: 18px;
    }

    .inject-step__icon {
        display: none;
    }

    .inject-approach__steps::before {
        left: 27px;
    }

    .inject-approach__cta {
        flex-direction: column;
        align-items: start;
        padding: 24px;
    }
}