/*
 * Defendify: native HubSpot form styles
 *
 * Matches HubSpot forms to the current defendify.com JetForm styling
 * (reference: the Partner Program form on /company/partner-program/).
 *
 * Covers both HubSpot embed types:
 *   Part 1: new form editor embeds (<div class="hs-form-html">, markup uses
 *           hsfc-* classes). This is what the WordPress pages use.
 *   Part 2: legacy v2 embeds (hbspt.forms.create, markup uses hs-form /
 *           hs-input). Only /accelerate/ still uses this.
 *
 * Must be enqueued from the child theme's functions.php; placing the file in
 * the theme folder on its own does not load it. Manrope is already loaded
 * sitewide by the theme.
 */

/* ==========================================================================
   Part 1: new form editor embeds (hsfc-*)

   HubSpot styles these forms through --hsf-* custom properties. Its rules
   read --hsf-<name> first and fall back to --hsf-default-<name>, which holds
   the account's form theme (navy button, grey fields). Setting --hsf-<name>
   here overrides the theme without fighting specificity.

   Direct rules are prefixed with .hs-form-html so they outrank HubSpot's
   runtime <style> tags, which load after this file.
   ========================================================================== */

[data-hsfc-id="Renderer"] {
	/* Global */
	--hsf-global__font-family: "Manrope", sans-serif;
	--hsf-global__font-size: 14px;
	--hsf-global__color: #333333;
	--hsf-global__error-color: #c62828;

	/* Layout: no inner padding (the Elementor container provides it),
     10px between side-by-side fields, 18px between rows */
	--hsf-background__padding: 0;
	--hsf-row__horizontal-spacing: 10px;
	--hsf-row__vertical-spacing: 18px;
	--hsf-module__vertical-spacing: 0;
	--hsf-navigationrow-buttons-single__justify-content: flex-start;

	/* Labels */
	--hsf-field-label__font-size: 14px;
	--hsf-field-label__color: #333333;
	--hsf-field-label-requiredindicator__color: #333333;
	--hsf-field-description__font-size: 13px;
	--hsf-field-description__color: rgba(0, 0, 0, 0.6);
	--hsf-field-footer__font-size: 13px;
	--hsf-field-footer__color: rgba(0, 0, 0, 0.6);

	/* Text, email, phone, number, dropdown */
	--hsf-field-input__font-size: 14px;
	--hsf-field-input__color: #000000;
	--hsf-field-input__background-color: #ffffff;
	--hsf-field-input__placeholder-color: rgba(0, 0, 0, 0.6);
	--hsf-field-input__border-color: rgba(0, 0, 0, 0.12);
	--hsf-field-input__border-width: 1px;
	--hsf-field-input__border-style: solid;
	--hsf-field-input__border-radius: 5px;
	--hsf-field-input__padding: 8px 16px;

	/* Multi-line text */
	--hsf-field-textarea__font-size: 14px;
	--hsf-field-textarea__color: #000000;
	--hsf-field-textarea__background-color: #ffffff;
	--hsf-field-textarea__placeholder-color: rgba(0, 0, 0, 0.6);
	--hsf-field-textarea__border-color: rgba(0, 0, 0, 0.12);
	--hsf-field-textarea__border-width: 1px;
	--hsf-field-textarea__border-style: solid;
	--hsf-field-textarea__border-radius: 5px;
	--hsf-field-textarea__padding: 8px 16px;

	/* Rich text and alerts */
	--hsf-richtext__font-size: 14px;
	--hsf-richtext__color: #333333;
	--hsf-heading__color: #243654;
	--hsf-erroralert__font-size: 13px;
	--hsf-erroralert__color: #c62828;
	--hsf-infoalert__font-size: 13px;
	--hsf-infoalert__color: #333333;

	/* Button: the standard "Submit" button (Contact, Request Demo, Request
     Custom Quote, Let's Talk). The Partner pages use a taller 17px 16px /
     3px variant. */
	--hsf-button__font-family: "Manrope", sans-serif;
	--hsf-button__font-size: 15px;
	--hsf-button__font-weight: 600;
	--hsf-button__color: #ffffff;
	--hsf-button__background-color: #f35520;
	--hsf-button__background-image: none;
	--hsf-button__border-radius: 5px;
	--hsf-button__border-width: 1px;
	--hsf-button__border-style: solid;
	--hsf-button__border-color: #cc3366; /* Hello theme default border on the live buttons; use #f35520 to drop it */
	--hsf-button__padding: 14px 17px;
	--hsf-button__box-shadow: none;
	--hsf-button--hover__background-color: #d24719;
	--hsf-button--hover__color: #ffffff;
	--hsf-button--focus__background-color: #d24719;
	--hsf-button--focus__color: #ffffff;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-FieldLabel {
	font-weight: 400;
	line-height: 21px;
	letter-spacing: -0.16px;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
	font-size: 14px;
	line-height: 21px;
	box-shadow: none;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput {
	height: 39px;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput {
	min-height: 60px;
}

/* Navy focus ring instead of HubSpot's grey glow */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextInput:focus,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-TextareaInput:focus {
	border-color: #243654;
	box-shadow: 0 0 0 3px rgba(36, 54, 84, 0.12);
}

/* Checkboxes and radios: the browser's native controls, as on the live
   JetForms (blue when checked), instead of HubSpot's drawn ones. Also undoes
   the site's custom CSS that hides every checkbox sitewide
   ([type="checkbox"] { position: absolute; left: 0; opacity: .01 }). */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-CheckboxInput,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-RadioInput,
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-CheckboxInput:is(:hover, :focus, :active),
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-RadioInput:is(:hover, :focus, :active) {
	-webkit-appearance: auto;
	appearance: auto;
	position: relative;
	left: auto;
	flex: none;
	width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	accent-color: auto;
	opacity: 1;
}

/* The Partner Program checkbox renders at 50% opacity (light blue when checked) */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-CheckboxInput,
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-CheckboxInput:is(:hover, :focus, :active) {
	opacity: 0.5;
}

/* Remove HubSpot's drawn tick and dot */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-CheckboxInput:checked::after,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-RadioInput:checked::after {
	content: none;
	display: none;
}

/* Dropdown arrow: the thin 9x5 chevron of the live Company size select,
   7px from the right edge, instead of HubSpot's solid triangle */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-DropdownInput > .hsfc-TextInput {
	padding-right: 28px;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret {
	padding: 0 7px 0 0;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-DropdownInput__Caret > span {
	width: 9px;
	height: 5px;
	border: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5'%3E%3Cpath d='M.6.6 4.5 4.4 8.4.6' fill='none' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E")
		no-repeat center / 9px 5px;
}

/* Option labels sit next to the box, like the live checkboxes */
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-RadioFieldGroup__Options
	.hsfc-FieldLabel,
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-CheckboxFieldGroup__Options
	.hsfc-FieldLabel,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-CheckboxField .hsfc-FieldLabel {
	display: flex;
	align-items: center;
	gap: 8px;
}

.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-RadioFieldGroup__Options
	> div
	+ div,
.hs-form-html
	[data-hsfc-id="Renderer"]
	.hsfc-CheckboxFieldGroup__Options
	> div
	+ div {
	margin-top: 6px;
}

/* Button: 20px above it (18px row spacing + 2px) like the live forms,
   no HubSpot hover "lift" */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-NavigationRow {
	margin-top: 2px;
}

.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):hover,
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Button:not([disabled]):active {
	line-height: 15px;
	letter-spacing: -0.16px;
	text-transform: none;
	transform: none;
}

/* Hide the reCAPTCHA badge row. Google's terms require the reCAPTCHA notice
   ("This site is protected by reCAPTCHA and the Google Privacy Policy and
   Terms of Service apply.") to appear elsewhere on the page when the badge
   is hidden. */
.hs-form-html [data-hsfc-id="Renderer"] .hsfc-Row:has(.hsfc-ReCaptchaV3) {
	display: none;
}

/* Inline variant: email field and Submit button on one row.
   Applies automatically to:
     - the "Subscribe" HubSpot form (b4d207db-...) wherever it is embedded
     - any HubSpot form in the Elementor site footer
   For any other form, add the class df-form--inline to the Elementor widget or
   container holding the embed (Advanced > CSS Classes), or wrap a plain
   WordPress embed in <div class="df-form--inline">...</div>. */
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-Step__Content {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	column-gap: 8px;
	row-gap: 0;
}

/* Field rows share the line with the button and never push it to a new line */
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-Row {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/* Rich text, consent and reCAPTCHA rows go full width under the email + button line */
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-Row:has(
		.hsfc-ReCaptchaV3,
		.hsfc-RichText,
		.hsfc-CheckboxField,
		.hsfc-CheckboxFieldGroup
	) {
	flex-basis: 100%;
	order: 1;
	margin-top: 8px;
}

/* Unwrap the button row so the button sits beside the field and form-level
   alerts drop to their own full-width line */
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-NavigationRow {
	display: contents;
}

:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-NavigationRow__Buttons {
	flex: none;
	margin: 0;
}

:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-NavigationRow__Alerts {
	flex-basis: 100%;
	order: 2;
}

:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-NavigationRow__Alerts:not(:empty) {
	margin-top: 8px;
}

/* Placeholder only, as on the live footer; label kept for screen readers */
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-EmailField
	> .hsfc-FieldLabel,
:is(
		.elementor-location-footer,
		.df-form--inline,
		.hs-form-html[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-TextField
	> .hsfc-FieldLabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Matches the current footer JetForm: 43px, 3px corners */
.hs-form-html:is(
		.elementor-location-footer *,
		.df-form--inline *,
		[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-TextInput {
	height: 43px;
	padding: 10px 15px;
	border-radius: 3px;
}

.hs-form-html:is(
		.elementor-location-footer *,
		.df-form--inline *,
		[data-form-id="b4d207db-d963-4437-94f4-a8c7a61bd4f8"]
	)
	[data-hsfc-id="Renderer"]
	.hsfc-Button {
	height: 43px;
	padding: 13px 20px;
	border-radius: 3px;
	font-size: 14px;
	line-height: 14px;
	white-space: nowrap;
}

/* ==========================================================================
   Part 2: legacy v2 embeds (hbspt.forms.create)

   Requirements:
     1. In HubSpot, the form must render as raw HTML (Form > Style & preview >
        "Set as raw HTML form"), otherwise it renders inside an iframe that
        this stylesheet cannot reach.
     2. Embed with `css: ''` so HubSpot's default stylesheet is not injected.
     3. Optional: `cssClass: 'df-form--inline'` for the footer / subscribe layout.
   ========================================================================== */

.hs-form {
	--df-font: "Manrope", sans-serif;
	--df-text: rgba(0, 0, 0, 0.87); /* Elementor global: text */
	--df-label: #333333;
	--df-muted: rgba(0, 0, 0, 0.6); /* placeholder colour */
	--df-border: rgba(0, 0, 0, 0.12);
	--df-field-bg: #ffffff;
	--df-accent: #f35520; /* button orange */
	--df-accent-hover: #d24719; /* button hover */
	--df-button-border: #cc3366; /* Hello theme default border, visible on live buttons; set to var(--df-accent) to drop it */
	--df-focus: #243654; /* Elementor global: primary navy */
	--df-error: #c62828;
	--df-radius: 5px;

	font-family: var(--df-font);
	font-size: 14px;
	line-height: 21px;
	color: var(--df-text);
}

.hs-form *,
.hs-form *::before,
.hs-form *::after {
	box-sizing: border-box;
}

/* ---------- Layout ---------- */

.hs-form fieldset {
	max-width: none !important;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.hs-form fieldset.form-columns-2,
.hs-form fieldset.form-columns-3 {
	display: grid;
	column-gap: 16px;
}

.hs-form fieldset.form-columns-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hs-form fieldset.form-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* HubSpot sets inline widths and right margins on multi-column fields */
.hs-form fieldset .hs-form-field {
	float: none !important;
	width: auto !important;
}

.hs-form fieldset .input {
	margin-right: 0 !important;
}

@media (max-width: 600px) {
	.hs-form fieldset.form-columns-2,
	.hs-form fieldset.form-columns-3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.hs-form .hs-form-field {
	margin: 0 0 18px;
}

/* ---------- Labels, required marker, help text ---------- */

.hs-form .hs-form-field > label {
	display: block;
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 21px;
	color: var(--df-label);
}

.hs-form .hs-form-required {
	margin-left: 1px;
	color: var(--df-text);
}

.hs-form .hs-field-desc {
	margin: -2px 0 8px;
	font-size: 13px;
	line-height: 19px;
	color: var(--df-muted);
}

/* ---------- Text, email, phone, number, URL, date, select, textarea ---------- */

.hs-form
	input.hs-input:not([type="radio"]):not([type="checkbox"]):not(
		[type="file"]
	),
.hs-form select.hs-input,
.hs-form textarea.hs-input {
	display: block;
	width: 100% !important;
	height: 43px;
	margin: 0;
	padding: 10px 10px 10px 16px;
	font-family: var(--df-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--df-text);
	background-color: var(--df-field-bg);
	border: 1px solid var(--df-border);
	border-radius: var(--df-radius);
	box-shadow: none;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.hs-form textarea.hs-input {
	height: auto;
	min-height: 64px;
	resize: vertical;
}

/* Native arrow, as on the live Company size dropdown */
.hs-form select.hs-input {
	padding-right: 12px;
	cursor: pointer;
}

.hs-form select.hs-input.is-placeholder {
	color: var(--df-muted);
}

.hs-form .hs-input::placeholder {
	color: var(--df-muted);
	opacity: 1;
}

/*
 * The live JetForms show no focus style for mouse users and the theme's
 * black 2px outline for keyboard users. This replaces both with a softer
 * navy ring.
 */
.hs-form
	input.hs-input:not([type="radio"]):not([type="checkbox"]):not(
		[type="file"]
	):focus,
.hs-form select.hs-input:focus,
.hs-form textarea.hs-input:focus {
	outline: none;
	border-color: var(--df-focus);
	box-shadow: 0 0 0 3px rgba(36, 54, 84, 0.12);
}

/*
 * Phone field with country code dropdown: HubSpot's base CSS (always
 * injected, even with css: '') floats the select at 30% and the input at 68%.
 */

/* ---------- Radios and checkboxes ---------- */

.hs-form .inputs-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hs-form .inputs-list > li {
	margin: 0 0 6px;
}

.hs-form .inputs-list > li:last-child {
	margin-bottom: 0;
}

.hs-form .inputs-list.inline-list > li {
	display: inline-block;
	margin: 0 24px 6px 0;
}

.hs-form .hs-form-radio-display,
.hs-form .hs-form-checkbox-display,
.hs-form .hs-form-booleancheckbox-display {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
	color: var(--df-label);
	cursor: pointer;
}

.hs-form input[type="checkbox"].hs-input {
	opacity: 0.5 !important; /* matches the Partner Program checkbox */
}

/* Native controls (blue when checked), as on the live JetForms */
.hs-form input[type="radio"].hs-input,
.hs-form input[type="checkbox"].hs-input {
	position: static; /* the site's custom CSS hides checkboxes sitewide */
	opacity: 1;
	flex: none;
	width: 13px !important; /* HubSpot's per-form CSS sets width: auto */
	height: 13px;
	margin: 4px 0 0;
	cursor: pointer;
}

/* HubSpot wraps option text in a span with a left margin */
.hs-form .hs-form-radio-display > span,
.hs-form .hs-form-checkbox-display > span,
.hs-form .hs-form-booleancheckbox-display > span {
	margin-left: 0;
}

/* ---------- Rich text and legal consent ---------- */

.hs-form .hs-richtext {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 21px;
	color: var(--df-label);
}

.hs-form .hs-richtext p {
	margin: 0 0 8px;
}

.hs-form .hs-richtext p:last-child {
	margin-bottom: 0;
}

.hs-form .hs-richtext a,
.hs-form .legal-consent-container a {
	color: var(--df-accent);
	text-decoration: underline;
}

.hs-form .legal-consent-container {
	margin: 0 0 4px;
}

.hs-form .legal-consent-container .hs-richtext,
.hs-form .legal-consent-container .hs-form-booleancheckbox-display {
	font-size: 12px;
	line-height: 18px;
	color: var(--df-muted);
}

.hs-form .legal-consent-container .hs-richtext {
	margin-bottom: 10px;
}

/* Overrides for HubSpot's injected legal consent rules (float + 20px indent) */
.hs-form .legal-consent-container .field.hs-form-field {
	margin-bottom: 10px;
}

.hs-form .legal-consent-container .hs-form-booleancheckbox-display > span {
	display: inline;
	margin-left: 0;
}

.hs-form .legal-consent-container .hs-form-booleancheckbox-display input {
	float: none;
}

.hs-form .legal-consent-container .hs-error-msgs label {
	color: var(--df-error);
}

/* ---------- Validation ---------- */

.hs-form
	input.hs-input.error:not([type="radio"]):not([type="checkbox"]):not(
		[type="file"]
	),
.hs-form select.hs-input.error,
.hs-form textarea.hs-input.error {
	border-color: var(--df-error);
}

.hs-form .hs-error-msgs {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.hs-form .hs-error-msg,
.hs-form .hs-error-msgs label {
	display: block;
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	line-height: 18px;
	color: var(--df-error);
}

.hs-form .hs_error_rollup {
	margin: 0 0 12px;
}

/* ---------- Submit ---------- */

.hs-form .hs_submit {
	margin-top: 20px;
}

/*
 * Selectors include input[type="submit"] so they outrank the theme's
 * [type=submit] reset and the Elementor kit's grey button
 * (.elementor-kit-7 input[type="submit"]).
 */
.hs-form .hs-button,
.hs-form input[type="submit"].hs-button {
	display: block;
	width: 100%;
	height: 45px;
	margin: 0;
	padding: 14px 17px;
	font-family: var(--df-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: -0.16px;
	color: #ffffff;
	background-color: var(--df-accent);
	border: 1px solid var(--df-button-border);
	border-radius: var(--df-radius);
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}

.hs-form input[type="submit"].hs-button:hover,
.hs-form input[type="submit"].hs-button:focus {
	color: #ffffff;
	background-color: var(--df-accent-hover);
	border-color: var(--df-button-border);
}

.hs-form input[type="submit"].hs-button:focus-visible {
	outline: 2px solid var(--df-focus);
	outline-offset: 2px;
	box-shadow: none;
}

.hs-form input[type="submit"].hs-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

/* Thank-you message (replaces the form after submit) */
.submitted-message {
	padding: 20px;
	font-family: "Manrope", sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: rgba(0, 0, 0, 0.87);
	text-align: center;
}

/* ---------- Inline variant: footer / "Stay in the Know" subscribe ---------- */

.hs-form.df-form--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
}

/* HubSpot sometimes wraps fields in a fieldset and sometimes doesn't */
.hs-form.df-form--inline > fieldset,
.hs-form.df-form--inline > .hs-form-field {
	flex: 1 1 200px;
}

.hs-form.df-form--inline .hs-form-field {
	margin: 0;
}

/* Placeholder only, as on the live footer form; label kept for screen readers */
.hs-form.df-form--inline .hs-form-field > label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.hs-form.df-form--inline
	input.hs-input:not([type="radio"]):not([type="checkbox"]) {
	padding: 10px 15px;
	border-radius: 3px;
}

.hs-form.df-form--inline .hs_submit {
	flex: none;
	margin: 0;
}

.hs-form.df-form--inline input[type="submit"].hs-button {
	width: auto;
	height: 43px;
	padding: 13px 20px;
	line-height: 14px;
	border-radius: 3px;
}

/* Full-width rows below the email + button line */
.hs-form.df-form--inline .hs_error_rollup,
.hs-form.df-form--inline > fieldset:has(.legal-consent-container),
.hs-form.df-form--inline > .legal-consent-container {
	flex-basis: 100%;
	order: 1;
}

.hs-form.df-form--inline .hs_error_rollup {
	margin: 0;
}

@media (max-width: 480px) {
	.hs-form.df-form--inline .hs_submit,
	.hs-form.df-form--inline input[type="submit"].hs-button {
		width: 100%;
	}
}