/* Local usability fixes for the existing Klaviyo signup form only. */
[data-testid="POPUP"]:has(form[data-testid="klaviyo-form-R6ecCr"]) button.klaviyo-close-form:focus-visible {
    outline: 2px solid #0064cd !important;
    outline-offset: 2px !important;
}

@media (max-width: 767px) {
    /* Klaviyo scales its desktop canvas in a narrow desktop browser. Give
       both device variants a viewport-sized canvas at normal text scale. */
    div:has(> [data-testid="POPUP"] form[data-testid="klaviyo-form-R6ecCr"]) {
        transform: none !important;
        margin: 0 !important;
        max-width: calc(100vw - 32px) !important;
        max-height: calc(100dvh - 32px) !important;
        overflow-y: auto !important;
        flex: 0 1 auto !important;
    }

    [data-testid="POPUP"]:has(form[data-testid="klaviyo-form-R6ecCr"]) > div {
        margin-left: 0 !important;
        margin-right: 0 !important;
        max-width: 100% !important;
    }

    form[data-testid="klaviyo-form-R6ecCr"] {
        width: min(390px, calc(100vw - 32px)) !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex-direction: column !important;
    }

    form[data-testid="klaviyo-form-R6ecCr"] > div:has(> div > img) {
        display: none !important;
    }

    form[data-testid="klaviyo-form-R6ecCr"] > div:has([data-testid="form-row"]) {
        box-sizing: border-box !important;
        padding-top: 24px !important;
        padding-bottom: 12px !important;
    }

    form[data-testid="klaviyo-form-R6ecCr"] h2,
    form[data-testid="klaviyo-form-R6ecCr"] h2 span {
        font-size: 28px !important;
        line-height: 1.25 !important;
    }

    form[data-testid="klaviyo-form-R6ecCr"] input[type="email"] {
        font-size: 16px !important;
        min-height: 44px !important;
    }

    [data-testid="POPUP"]:has(form[data-testid="klaviyo-form-R6ecCr"]) button.klaviyo-close-form {
        width: 44px !important;
        height: 44px !important;
        top: 0 !important;
        right: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}