.browser-extension-promo {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    max-width: 920px;
    margin: 0 auto 18px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    color: #fff;
    text-align: left;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.browser-extension-promo:hover,
.browser-extension-promo:focus-visible {
    border-color: rgba(124, 224, 182, .58);
    background: rgba(255, 255, 255, .13);
    color: #fff;
    text-decoration: none;
}

.browser-extension-promo:focus-visible {
    outline: 3px solid rgba(124, 224, 182, .42);
    outline-offset: 2px;
}

.browser-extension-promo__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(124, 224, 182, .14);
    color: #7ce0b6;
    font-size: 17px;
}

.browser-extension-promo__copy {
    display: grid;
    min-width: 0;
    line-height: 1.35;
}

.browser-extension-promo__copy small {
    color: #7ce0b6;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.browser-extension-promo__copy strong {
    color: #fff;
    font-size: 14px;
}

.browser-extension-promo__copy > span {
    overflow: hidden;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.browser-extension-promo__action {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.crawler-workbench__start .browser-extension-promo {
    grid-template-columns: auto minmax(0, 1fr);
    max-width: 560px;
    margin: 0 0 30px;
    border-color: #d9e2ee;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 43, 78, .07);
}

.crawler-workbench__start .browser-extension-promo:hover,
.crawler-workbench__start .browser-extension-promo:focus-visible {
    border-color: #9eb3ce;
    background: #fff;
}

.crawler-workbench__start .browser-extension-promo__icon {
    background: #e8f8f0;
    color: #0b915c;
}

.crawler-workbench__start .browser-extension-promo__copy small {
    color: #0b915c;
}

.crawler-workbench__start .browser-extension-promo__copy strong {
    color: #10284e;
}

.crawler-workbench__start .browser-extension-promo__copy > span {
    overflow: visible;
    color: #5f708d;
    text-overflow: clip;
    white-space: normal;
}

.crawler-workbench__start .browser-extension-promo__action {
    grid-column: 2;
    color: #1774ef;
}

@media (max-width: 767.98px) {
    .browser-extension-promo {
        grid-template-columns: auto minmax(0, 1fr);
        margin-bottom: 16px;
    }

    .browser-extension-promo__copy > span {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .browser-extension-promo__action {
        grid-column: 2;
    }
}