.newsletter-signup {
    margin-top: 5px;
    padding: 24px 20px 26px;
    border-radius: 14px;
    background: radial-gradient(circle at top left, rgba(56,189,248,.18), transparent), radial-gradient(circle at bottom right, rgba(129,140,248,.22), transparent), #020617;
    border: 1px solid rgba(148,163,184,.45);
}

.newsletter-signup h2 {
    margin: 0 0 .4rem;
    font-size: 1.4rem;
}

.newsletter-signup p {
    margin: 0 0 1rem;
    font-size: .92rem;
    opacity: .9;
}

.newsletter-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.6fr) minmax(0, 1.6fr);
    gap: 10px;
    margin-bottom: .55rem;
}

.newsletter-field label {
    display: block;
    font-size: .8rem;
    margin-bottom: .2rem;
    opacity: .9;
}

.newsletter-field input[type="text"],
.newsletter-field input[type="email"] {
    width: 100%;
    padding: .55rem .6rem;
    border-radius: 8px;
    border: 1px solid rgba(148,163,184,.6);
    background: #020617;
    color: inherit;
    font-size: .9rem;
}

.newsletter-field input:focus {
    outline: none;
    border-color: rgba(59,130,246,.9);
    box-shadow: 0 0 0 1px rgba(59,130,246,.7);
}

.newsletter-permissions {
    font-size: .85rem;
    margin-bottom: .7rem;
}

    .newsletter-permissions label {
        display: inline-flex;
        align-items: center;
        gap: .4rem;
        cursor: pointer;
    }

.newsletter-flash {
    margin-bottom: .6rem;
    font-size: .85rem;
    padding: .45rem .6rem;
    border-radius: 8px;
}

    .newsletter-flash.success {
        background: rgba(22,163,74,.12);
        border: 1px solid rgba(22,163,74,.6);
    }

    .newsletter-flash.error {
        background: rgba(220,38,38,.12);
        border: 1px solid rgba(220,38,38,.7);
    }

@media (max-width: 720px) {
    .newsletter-row {
        grid-template-columns: 1fr;
    }
}