/* Mobile-only refinement for the Build.Voto home-page creation sequence. */

@media (max-width: 760px) {
    .flow-heading {
        max-width: 358px;
        margin: 32px auto 14px;
        color: #10203d;
        font-size: clamp(25px, 7vw, 30px);
        line-height: 1.15;
        letter-spacing: -.02em;
    }

    .features {
        display: grid;
        gap: 10px;
        margin: 0 0 30px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        counter-reset: build-voto-step;
    }

    .features .feature {
        position: relative;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon title number"
            "icon copy number";
        column-gap: 13px;
        row-gap: 4px;
        align-items: center;
        min-height: 96px;
        padding: 16px;
        border: 1px solid #d9e2f0;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: none;
        counter-increment: build-voto-step;
    }

    .features .feature:before {
        grid-area: number;
        display: grid !important;
        position: static;
        inset: auto;
        justify-self: end;
        width: 30px;
        height: 30px;
        margin: 0;
        place-items: center;
        border: 1px solid #bfd1ff;
        border-radius: 50%;
        background: #edf3ff;
        color: #0e3fa8;
        content: counter(build-voto-step, decimal-leading-zero);
        font-size: 11px;
        font-weight: 900;
    }

    .features .feature:nth-child(2):before {
        border-color: #bde6d1;
        background: #eaf8f0;
        color: #087443;
    }

    .features .feature:nth-child(3):before {
        border-color: #f4d29b;
        background: #fff6e6;
        color: #a85e00;
    }

    .features .feature .step-icon {
        grid-area: icon;
        width: 36px;
        height: 36px;
        margin: 0;
        color: #155eef;
    }

    .features .feature:nth-child(2) .step-icon {
        color: #087443;
    }

    .features .feature:nth-child(3) .step-icon {
        color: #b76500;
    }

    .features .feature strong {
        grid-area: title;
        align-self: end;
        color: #10203d;
        font-size: 17px;
        line-height: 1.2;
    }

    .features .feature br {
        display: none;
    }

    .features .feature .muted {
        grid-area: copy;
        align-self: start;
        color: #52627d;
        font-size: 14px;
        line-height: 1.35;
    }

    .features .feature:hover {
        transform: none;
    }

    .features .feature:active {
        border-color: #aec5ff;
        background: #f8faff;
    }
}

@media (max-width: 350px) {
    .features .feature {
        grid-template-columns: 36px minmax(0, 1fr) 28px;
        column-gap: 10px;
        padding: 14px;
    }

    .features .feature .step-icon {
        width: 32px;
        height: 32px;
    }

    .features .feature:before {
        width: 28px;
        height: 28px;
        font-size: 10px;
    }
}