.subscribe-form {
    /* follow the hero's on-image colors (set per data-color), not the dark-mode theme */
    background-color: var(--text-on-image-color);
    border-radius: 999px;
    padding: var(--unit) var(--unit) var(--unit) calc(var(--unit) * 2);
    box-sizing: border-box;
    display: inline-block;

    .subscribe-form-message {
        margin: 0;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 300;
        font-size: var(--fontsize);
        line-height: calc(var(--unit) * 4);
        color: var(--background-on-image-color);
    }

    .subscribe-form-message--error {
        color: var(--accent-color);
    }

    &.subscribe-form--success {
        background-color: transparent;

        .subscribe-form-message {
            color: var(--text-on-image-color);
        }
    }

    .subscribe-form-email {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--unit);
        border-radius: 999px;

        @media screen and (min-width: 700px) {
            width: 300px;
        }
    }

    input[type="email"] {
        box-sizing: border-box;
        background: transparent;
        border: none;
        outline: none;
        font-family: 'Barlow Condensed', sans-serif;
        font-weight: 300;
        font-size: var(--fontsize);
        line-height: calc(var(--unit) * 4);
        color: var(--background-on-image-color);
        flex: 1;
        min-width: 0;
    }

    input[type="email"]::placeholder {
        color: color-mix(in srgb, var(--background-on-image-color) 60%, transparent);
    }

    /* kill the browser autofill yellow — match the pill background instead */
    input[type="email"]:-webkit-autofill,
    input[type="email"]:-webkit-autofill:hover,
    input[type="email"]:-webkit-autofill:focus,
    input[type="email"]:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--text-on-image-color) inset;
        box-shadow: 0 0 0 1000px var(--text-on-image-color) inset;
        -webkit-text-fill-color: var(--background-on-image-color);
        caret-color: var(--background-on-image-color);
        transition: background-color 9999s ease-in-out 0s;
    }

    button[type="submit"] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 999px;
        background-color: var(--accent-color);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    button[type="submit"] svg {
        width: 20px;
        height: 20px;
        stroke: white;
        fill: none;
        margin-top: 4px;
        margin-left: -2px;
    }
}