.instructions-section {
    --color-primary-contrast: 255,255,255;

    &.plus {
        --color-primary: var(--color-plus);
        --color-primary-contrast: 0,0,0;
    }
}
@media (max-width: 767px) {
    .invest-section {
        padding-top: 48px;
    }
}

.instructions-section .headline.--small {
    text-align: center;
}
.instructions-section-steps {
    display: grid;
    grid-row-gap: 60px;
}
.instructions-step > .headline {
    margin-bottom: 2em;
}
.instructions-certificates {
    display: grid;
    grid-column-gap: 40px;
    grid-row-gap: 20px;
}
@media (min-width: 768px) {
    .instructions-certificates {
        grid-template-columns: 1fr 1fr;
    }
}
.instructions-certificate {
    --color-primary: var(--color-core);
    padding: clamp(20px, 4vw, 40px);
    border: 2px solid rgb(var(--color-primary));
    border-radius: 26px;
    /*cursor: pointer;*/
    box-shadow: 0 0 0 rgb(var(--color-primary));
    transition: box-shadow .25s;
    background: rgb(var(--color-background));

    &.--active {
        box-shadow: 0 0 40px rgb(var(--color-primary));
    }
}
.instructions-certificate:nth-child(2) {
    --color-primary: var(--color-plus);
}
.instructions-certificate h4 {
    margin-bottom: 1em;
}
.instructions-certificate p:not(:last-child) {
    margin-bottom: 0.5em;
}
@media (max-width: 679px) {
    .instructions-certificate p {
        font-size: 0.8em;
    }
}

.instructions-broker-search {
    margin: 0 auto 20px;
    -webkit-appearance: none;
    appearance: none;
    border: 2px solid white;
    font: inherit;
    font-size: 20px;
    display: block;
    background: transparent;
    padding: 10px 20px;
    border-radius: 13px;
    width: 100%;
    max-width: 400px;
    color: inherit;

    &:focus {
        border-color: rgb(var(--color-primary));
        outline: none;
    }
}


.instructions-brokers {
    display: grid;
    margin-top: 40px;
    grid-gap: clamp(20px, 4vw, 40px);
}
.instructions-brokers a {
    display: block;
    background: rgb(var(--color-background-lighter));
    padding: 20px;
    border-radius: 13px;
    text-align: center;
    font-size: 18px;

    &:hover,
    &:focus {
        text-decoration: none;
    }
    &:hover,
    &:focus-visible {
        background: rgb(var(--color-primary));
        color: rgb(var(--color-primary-contrast));
    }
}
@media (max-width: 767px) {
    .instructions-brokers {
        grid-row-gap: 10px;
    }
}
@media (min-width: 768px) {
    .instructions-brokers {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1024px) {
    .instructions-brokers {
        grid-template-columns: repeat(4, 1fr);
    }
}
.instructions-nobroker {
    width: 400px;
    margin: 0 auto;
    text-align: center;
    background: rgb(var(--color-background-lighter));
    padding: 20px;
    border-radius: 13px;
}



.instructions-certificate-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 20px;
}
.instructions-certificate-details a {
    color: rgb(var(--color-primary));
}
@media (max-width: 679px) {
    .instructions-certificate-details {
        grid-template-columns: 1fr;
        grid-row-gap: 20px;
    }
}