Modal Contact Form for Mobile Causing Issues

We've been having a responsive design issue specific to smaller iPhone devices that we can't seem to fix.

We started with the Divi native "Button + Form Modal" and popped a contact form for users on click. When we noticed a complete misalignment of the input fields, we decided to switch the form to Mailchimp for WP and build and prompt the form there.

Lo and behold - we're still seeing the same issue. It's a bit better on other sized devices, but these smaller iPhones are still having issues.

I'll add a bunch of the details below, including how to replicate, videos of what's actually happening, and the custom CSS I'm using in the Mailchimp for WP plugin. I would greatly appreciate any ideas on how to resolve this quickly:

Site: https://www.conveyhealthsolutions.com
How to recreate: Click on the "Request a Demo" button halfway down the homepage. Tab through the fields as you fill out the form and you'll see the cursor end up in odd areas outside of the field.
Videos of what is happening: https://drive.google.com/file/d/1k23lrQq_oVGBVqLc7R5RIH-DXJFiGroA/view?usp=sharing and https://drive.google.com/file/d/15PLr29BM5rQWEMtXGkpMp9yhQLfLtXtx/view?usp=sharing

Finally, here's the advanced CSS:

textarea, input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox { -webkit-appearance: none; border-radius: 0; }

.mc4wp-form {
width: 1280px;
height: 500px;
}
/* Mobile Layout: 320px. */
@media only screen and (max-width: 767px) {
.mc4wp-form-213658 {
background-image: none !important;
padding: 0 !important;
}
.mc4wp-form {
height: 500px;
width: auto;
}

.mc4wp-form-fields > p {
clear: both;
display: block;
overflow: hidden;
}
.mc4wp-form-213658 label {
font-size: 15px;
}
.mc4wp-form-213658 .mc4wp-form-fields input {
height: inherit !important;
margin-bottom: 0;
min-height: 30px;
padding: 0 5px;
}
.mc4wp-form-fields input[type="submit"] {
font-size: 20px !important;
}
}
/* Wide Mobile Layout: 480px. */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.mc4wp-form-213658 {
background-image: none !important;
}
.mc4wp-form {
height: 500px;
width: auto;

}

.mc4wp-form-213658 label {
font-size: 20px;
}

.mc4wp-form-fields input[type="submit"] {
font-size: 20px !important;
}
}

Again, I greatly appreciate the help here. Thanks!

 

Any insights here?

 

I'll review. Thanks.