form.marketingForm {
    --form-width: 100%;
}

form.marketingForm table,
form.marketingForm table tbody,
form.marketingForm table th,
form.marketingForm table td,
form.marketingForm div[data-editorblocktype="Captcha"] {
    display: block !important;
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
form.marketingForm div[data-editorblocktype="Captcha"] {
    min-height: 230px !important;
}
form.marketingForm table td[aria-hidden="true"] {
    min-height: 0;
}

form.marketingForm .optionSetFormFieldBlock,
form.marketingForm .phoneFormFieldBlock,
form.marketingForm .textFormFieldBlock {
    padding: 0 !important;
}

form.marketingForm input[type="text"],
form.marketingForm input[type="email"],
form.marketingForm select {
    min-width: var(--form-width) !important;
}

form.marketingForm label {
    margin-top: 1em !important;
}

#page_right form.marketingForm {
    --form-width: 288px;
}
#page_right .onFormSubmittedFeedback {
    max-width: 100% !important;
}

#access_form form.marketingForm {
    --form-width: 390px;
    padding: 0 !important;
}

/* ===================================================================
   WCAG 1.4.10 Reflow. The context overrides above pin --form-width to a
   FIXED 288px (#page_right) / 390px (#access_form), and that width is applied
   as `min-width: ... !important`, so on a 320px viewport the form pushed the
   whole page into horizontal scroll. min-width beats width, which is why
   overriding width elsewhere had no effect — the token is the real control.
   Below 420px the form simply fills its container.
   =================================================================== */
@media (max-width: 420px) {
	form.marketingForm,
	#page_right form.marketingForm,
	#access_form form.marketingForm {
		--form-width: 100%;
	}
}