.download-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
    padding-top: 18px;
    width: 100%;
}

.download-box__title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 4px 0 22px;
    position: relative;
    padding-top: 18px;
}

.download-box__title::before {
    content: 'Capture Source';
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.download-box__controls-container {
    display: flex;
    flex-direction: row;
    /* was align-items: stretch — that forced the input wrapper and the
       button to match each other's box height exactly, and since they
       weren't the same intrinsic height, one of them ended up taller
       than intended and pushed past the card's padding. Centering them
       on the row instead means each keeps its own natural height. */
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
}

.download-box__url-input-container {
    width: 70%;
}