/*
 * Web Forms v2 — public form styles (hosted page, embed iframe, builder preview).
 * The form lives inside other people's websites, so it stays quiet: one column, the brand's accent as the only colour,
 * and a step rail as the single distinctive element. Per-form values come in as --wf-accent / --wf-on-accent /
 * --wf-radius / --wf-font (FormRenderer::ThemeCss); light/dark comes from [data-wf-mode] on <html>.
 */
:root {
	--wf-accent: #3FBF3C;
	--wf-on-accent: #0B1533;
	--wf-radius: 8px;
	--wf-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--wf-bg: #FFFFFF;
	--wf-page: color-mix(in srgb, var(--wf-accent) 6%, #FFFFFF);
	--wf-ink: #15202E;
	--wf-muted: #5B6779;
	--wf-line: #CFD6E0;
	--wf-line-soft: #E5E9EF;
	--wf-field: #FFFFFF;
	--wf-danger: #B3261E;
	--wf-danger-tint: #FDECEA;
	color-scheme: light;
}
:root[data-wf-mode="dark"] {
	--wf-bg: #121A27;
	--wf-page: color-mix(in srgb, var(--wf-accent) 10%, #0D131D);
	--wf-ink: #E9EEF5;
	--wf-muted: #9AA7BA;
	--wf-line: #34425A;
	--wf-line-soft: #243048;
	--wf-field: #0F1622;
	--wf-danger: #F2958D;
	--wf-danger-tint: #3A1715;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.wf-body {
	background: var(--wf-bg);
	color: var(--wf-ink);
	font: 16px/1.5 var(--wf-font);
	-webkit-font-smoothing: antialiased;
}
body.wf-body.wf-embed { background: transparent; }
body.wf-body.wf-hosted { background: var(--wf-page); min-height: 100vh; }

/* Hosted share page: the brand above a single sheet. */
.wf-page { max-width: var(--wf-form-width, 640px); margin: 0 auto; padding: var(--wf-page-top, 40px) 16px 64px; }
.wf-brand { font-size: 15px; font-weight: 600; color: var(--wf-muted); margin: 0 0 6px; }
.wf-title { font-size: clamp(24px, 4vw, 30px); line-height: 1.2; font-weight: 700; margin: 0 0 24px; text-wrap: balance; letter-spacing: -0.01em; }
.wf-sheet { background: var(--wf-form-bg, var(--wf-bg)); border: var(--wf-form-border-width, 1px) solid var(--wf-form-border, var(--wf-line-soft));
	border-radius: var(--wf-form-radius, calc(var(--wf-radius) + 6px)); padding: var(--wf-form-padding, 28px); box-shadow: var(--wf-form-shadow, none); }
.wf-embed .wf-sheet { border: 0; padding: var(--wf-form-padding, 4px 2px 8px); background: transparent; box-shadow: none; }
/* The share page's card (a website section around the form): its own colour, corners and padding when the form sets them. */
.wf-hosted .wf-sheet { background: var(--wf-card-bg, var(--wf-form-bg, var(--wf-bg))); border-radius: var(--wf-card-radius, var(--wf-form-radius, calc(var(--wf-radius) + 6px)));
	padding: var(--wf-card-padding, var(--wf-form-padding, 28px)); }
/* Header "above the panel": the heading sits on the page and the card holds only the form (or its thank-you). */
.wf-hosted .wf-sheet:has(> .wf-head-above) { background: transparent; border: 0; padding: 0; box-shadow: none; border-radius: 0; }
.wf-hosted .wf-sheet:has(> .wf-head-above) > .wf, .wf-hosted .wf-sheet:has(> .wf-head-above) > .wf-done {
	background: var(--wf-card-bg, var(--wf-form-bg, var(--wf-bg))); border: var(--wf-form-border-width, 1px) solid var(--wf-form-border, var(--wf-line-soft));
	border-radius: var(--wf-card-radius, var(--wf-form-radius, calc(var(--wf-radius) + 6px))); padding: var(--wf-card-padding, var(--wf-form-padding, 28px)); box-shadow: var(--wf-form-shadow, none); }
/* A centred website heading above the card may be wider than the form (us.verdecolab.com: a 300 px form under a wide heading). */
.wf-hosted .wf-sheet:has(> .wf-head-above.wf-head-center) { display: flex; flex-direction: column; align-items: center; }
.wf-hosted .wf-sheet:has(> .wf-head-above.wf-head-center) > .wf-head-above { width: max-content; max-width: min(var(--wf-intro-max, 60ch), calc(100vw - 32px)); }
.wf-hosted .wf-sheet:has(> .wf-head-above.wf-head-center) > .wf, .wf-hosted .wf-sheet:has(> .wf-head-above.wf-head-center) > .wf-done { align-self: stretch; }
/* An embedded form with its own background or border (a dark HubSpot form) keeps its panel inside the iframe. */
.wf-embed .wf-sheet:has(> .wf-has-form-bg), .wf-embed .wf-sheet:has(> .wf-head + .wf-has-form-bg) {
	background: var(--wf-form-bg, transparent); border: var(--wf-form-border-width, 0px) solid var(--wf-form-border, transparent);
	border-radius: var(--wf-form-radius, 0px); padding: var(--wf-form-padding, 24px); }
.wf-foot { margin-top: 20px; font-size: 13px; color: var(--wf-muted); }

/* Step rail: each step is a bar that fills as you pass it, labelled with its name. */
.wf-rail { list-style: none; margin: 0 0 24px; padding: 0; display: flex; gap: 8px; }
.wf-rail-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-rail-bar { display: block; height: 4px; border-radius: 4px; background: var(--wf-progress-track, var(--wf-line-soft)); position: relative; overflow: hidden; }
.wf-rail-bar::after { content: ""; position: absolute; inset: 0; background: var(--wf-progress, var(--wf-accent)); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.wf-rail-step.is-done .wf-rail-bar::after, .wf-rail-step[aria-current="step"] .wf-rail-bar::after { transform: scaleX(1); }
.wf-rail-step[aria-current="step"] .wf-rail-bar::after { opacity: .55; }
.wf-rail-label { font-size: 13px; color: var(--wf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-rail-step[aria-current="step"] .wf-rail-label { color: var(--wf-ink); font-weight: 600; }
.wf-step-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.wf-field { grid-column: 1 / -1; min-width: 0; }
.wf-field.wf-half { grid-column: span 1; }
/* A form with a 60 % / 40 % row (gigeeapp.com) gets ten columns: a half is five, the pair six and four, exactly where two
   columns would put them. Only those forms: nine gaps would crush a narrow form with wide gaps. One column on phones. */
.wf-grid-10 .wf-grid { grid-template-columns: repeat(10, minmax(0, 1fr)); }
.wf-grid-10 .wf-field.wf-half { grid-column: span 5; }
.wf-grid-10 .wf-field.wf-w60 { grid-column: span 6; }
.wf-grid-10 .wf-field.wf-w40 { grid-column: span 4; }
@media (max-width: 520px) {
	.wf-grid-10 .wf-grid { grid-template-columns: minmax(0, 1fr); }
	.wf-grid-10 .wf-field.wf-half, .wf-grid-10 .wf-field.wf-w60, .wf-grid-10 .wf-field.wf-w40 { grid-column: 1 / -1; }
}
.wf-field[hidden] { display: none; }

.wf-label { display: block; font-family: var(--wf-label-font, inherit); font-size: var(--wf-label-size, 14px); font-weight: var(--wf-label-weight, 600); margin: 0 0 6px; padding: 0; color: var(--wf-label, var(--wf-ink)); }
.wf-req { color: var(--wf-danger); margin-left: .25em; }
.wf-hide-optional .wf-req { margin-left: .05em; }
.wf-opt { font-weight: 400; color: var(--wf-muted); }
.wf-help { font-size: var(--wf-help-size, 13px); color: var(--wf-help, var(--wf-muted)); margin: 6px 0 0; }
.wf-heading { font-size: 18px; margin: 6px 0 0; font-family: var(--wf-heading-font, var(--wf-font)); color: var(--wf-heading, var(--wf-ink)); font-weight: var(--wf-heading-weight, 700); }
.wf-heading.wf-heading-l1 { font-size: clamp(26px, 4.4vw, 34px); line-height: 1.15; margin: 8px 0 12px; }
.wf-heading.wf-heading-l2 { font-size: clamp(21px, 3.4vw, 25px); line-height: 1.2; margin: 6px 0 6px; }
.wf-head-title { font-family: var(--wf-head-font, var(--wf-heading-font, var(--wf-font))); color: var(--wf-head-color, var(--wf-heading, var(--wf-ink))); font-weight: var(--wf-title-weight, var(--wf-heading-weight, 700)); }
.wf-paragraph { margin: 0; color: var(--wf-text, var(--wf-muted)); font-size: 15px; }
.wf-choice { color: var(--wf-text, inherit); }

.wf input[type=text], .wf input[type=email], .wf input[type=tel], .wf input[type=url], .wf input[type=date], .wf select, .wf textarea {
	color-scheme: var(--wf-field-scheme, inherit); width: 100%; font: inherit; font-size: var(--wf-field-font-size, 16px); color: var(--wf-field-text, var(--wf-ink)); background: var(--wf-field);
	border: var(--wf-field-border-width, 1px) solid var(--wf-field-border, var(--wf-line)); border-radius: var(--wf-field-radius, var(--wf-radius));
	padding: var(--wf-field-pad, 10px 12px); min-height: var(--wf-field-height, 44px); font-family: var(--wf-field-font, inherit);
	font-weight: var(--wf-field-weight, inherit); transition: border-color .15s, box-shadow .15s;
}
.wf textarea { resize: vertical; min-height: var(--wf-textarea-height, 104px); height: var(--wf-textarea-height, auto);
	font-family: var(--wf-textarea-font, var(--wf-field-font, inherit)); font-size: var(--wf-textarea-font-size, var(--wf-field-font-size, 16px)); }
.wf-hide-optional .wf-opt { display: none; }
.wf ::placeholder { color: var(--wf-placeholder, color-mix(in srgb, var(--wf-muted) 80%, transparent)); opacity: 1; }
/* Labels inside the fields: the placeholder shows the label; the <label> stays for screen readers. */
.wf-labels-inside .wf-field:not([data-type="radio"]):not([data-type="checkboxes"]):not([data-type="checkbox"]):not([data-type="file"]) > .wf-label {
	position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.wf input:focus, .wf select:focus, .wf textarea:focus {
	outline: none; border-color: var(--wf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 30%, transparent);
}
.wf [aria-invalid="true"] { border-color: var(--wf-danger) !important; }
.wf-error { margin: 6px 0 0; font-size: 13px; color: var(--wf-danger); }

/* Phone with a country picker: the country code sits in front of the number, one control to the eye. */
.wf-phone { display: flex; min-width: 0; }
.wf-country-wrap { position: relative; flex: 0 0 auto; display: flex; }
.wf-country-face { display: flex; align-items: center; gap: 6px; padding: 0 10px; min-height: var(--wf-field-height, 44px); font-size: 15px; white-space: nowrap;
	color: var(--wf-field-text, var(--wf-ink)); background: var(--wf-field); border: var(--wf-field-border-width, 1px) solid var(--wf-field-border, var(--wf-line));
	border-right-width: 0; border-radius: var(--wf-field-radius, var(--wf-radius)) 0 0 var(--wf-field-radius, var(--wf-radius)); }
.wf-country-face::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .75; }
/* The real <select> sits on top of the face, invisible: the platform's own list, keyboard and screen-reader support. */
.wf .wf-phone .wf-country { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.wf-country-wrap:focus-within .wf-country-face { border-color: var(--wf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 30%, transparent); }
.wf .wf-phone input[type=tel] { flex: 1 1 auto; min-width: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Searchable dropdown: a text box that filters the options; the native <select> stays underneath for the answer. */
.wf .wf-combo-native { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.wf-combo { position: relative; }
.wf input.wf-combo-input { padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.wf-combo-list { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); max-height: 240px; overflow: auto; margin: 0; padding: 4px;
	list-style: none; background: var(--wf-field, #fff); border: 1px solid var(--wf-field-border, var(--wf-line)); border-radius: var(--wf-field-radius, var(--wf-radius));
	box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.wf-combo-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; color: var(--wf-field-text, var(--wf-ink)); font-size: 15px; }
.wf-combo-list li.is-active, .wf-combo-list li:hover { background: color-mix(in srgb, var(--wf-accent) 14%, transparent); }
.wf-combo-list li[aria-selected="true"] { font-weight: 600; }
.wf-combo-list .wf-combo-none { color: var(--wf-muted); cursor: default; }

/* File question: a plain file button and the list of files already sent. */
.wf-files { display: flex; flex-direction: column; gap: 8px; }
.wf .wf-file-input { font: inherit; font-size: 14px; color: var(--wf-text, var(--wf-ink)); max-width: 100%; }
.wf-file-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wf-file { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border: 1px solid var(--wf-line-soft); border-radius: var(--wf-field-radius, var(--wf-radius)); font-size: 14px; }
.wf-file-name { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.wf-file-state { color: var(--wf-muted); font-size: 13px; }
.wf-file.is-error .wf-file-state { color: var(--wf-danger); }
.wf-file-remove { margin-left: auto; font: inherit; font-size: 13px; background: none; border: 0; color: var(--wf-link, var(--wf-accent)); text-decoration: underline; cursor: pointer; padding: 2px 4px; }
.wf-file-note { margin: 0; font-size: 12.5px; color: var(--wf-help, var(--wf-muted)); }

.wf-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.wf-choices .wf-label { margin-bottom: 8px; }
.wf-choice { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; padding: 6px 0; cursor: pointer; }
.wf-choice input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--wf-accent); color-scheme: var(--wf-field-scheme, inherit); }
.wf-choice input:focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 2px; }
/* Consent wording: the form's label style when it sets one (HubSpot shows these like question labels), otherwise small and muted. */
.wf-consent .wf-choice { font-size: var(--wf-label-size, 13px); color: var(--wf-label, var(--wf-muted)); font-family: var(--wf-label-font, inherit); font-weight: var(--wf-label-weight, 400); line-height: 1.45; }
/* A single tick box is a question: its wording takes the label style (HubSpot shows it like a label). */
.wf-single { font-size: var(--wf-label-size, 15px); color: var(--wf-label, var(--wf-text, inherit)); font-family: var(--wf-label-font, inherit); font-weight: var(--wf-label-weight, 400); }

.wf-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.wf-turnstile { margin-top: 18px; }

.wf-status { margin: 18px 0 0; padding: 10px 12px; border-radius: var(--wf-radius); background: var(--wf-danger-tint); color: var(--wf-danger); font-size: 14px; }
.wf-actions { display: flex; gap: 12px; align-items: center; margin-top: var(--wf-actions-gap, 24px); }
/* A set button height (HubSpot's 12 px padding with a normal line): exact height, text centred. */
.wf-button-fixed .wf-actions button { height: var(--wf-button-height); min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 1;
	padding-left: var(--wf-button-pad-x, 20px); padding-right: var(--wf-button-pad-x, 20px); }
.wf-actions button { min-width: var(--wf-button-min-width, 0px); font: inherit; font-family: var(--wf-button-font, inherit); font-weight: var(--wf-button-weight, 600); font-size: var(--wf-button-font-size, 16px); border-radius: var(--wf-button-radius, var(--wf-radius)); padding: var(--wf-button-pad, 11px 20px); min-height: 46px; cursor: pointer; }
.wf-next, .wf-submit { margin-left: auto; background: var(--wf-button-bg, var(--wf-accent)); color: var(--wf-button-text, var(--wf-on-accent));
	border: 1px solid var(--wf-button-bg, var(--wf-accent)); box-shadow: var(--wf-button-shadow, none); }
.wf-button-gradient .wf-next, .wf-button-gradient .wf-submit { background-image: linear-gradient(var(--wf-button-bg-angle, 90deg), var(--wf-button-bg, var(--wf-accent)) var(--wf-button-bg-from, 0%), var(--wf-button-bg-end) var(--wf-button-bg-to, 100%)); border-color: transparent; }
.wf-button-glow .wf-next, .wf-button-glow .wf-submit { box-shadow: 0 0 18px color-mix(in srgb, var(--wf-button-bg, var(--wf-accent)) 60%, transparent); }
.wf-buttons-full .wf-next, .wf-buttons-full .wf-submit { flex: 1 1 auto; }
.wf-buttons-left .wf-next, .wf-buttons-left .wf-submit { margin-left: 0; }
.wf-buttons-center .wf-actions { justify-content: center; }
.wf-buttons-center .wf-next, .wf-buttons-center .wf-submit { margin-left: 0; }
.wf-buttons-right .wf-actions { justify-content: flex-end; }
.wf-next:hover, .wf-submit:hover { filter: brightness(.95); }
.wf-back { background: transparent; color: var(--wf-ink); border: 1px solid var(--wf-line); }
.wf-actions button:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 2px; }
.wf-submit.is-busy { opacity: .7; cursor: progress; }
.wf-actions [hidden] { display: none; }

/* Header (logo, title, intro): the same block on the share page, the embed and the builder preview. The logo row has a
   fixed height, so the frame does not grow when the image arrives; the image never exceeds it or the form's width. */
.wf-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--wf-head-gap, 10px); text-align: left;
	margin: 0 0 var(--wf-head-space, 24px); padding: 0 0 var(--wf-head-pad, 20px); border-bottom: var(--wf-head-rule, 1px) solid var(--wf-line-soft); }
/* The website already shows this heading above the embed (header "Show in the embed" off). */
.wf-embed .wf-head-hide-embed { display: none; }
.wf-head-center { align-items: center; text-align: center; }
.wf-head-logo { height: var(--wf-logo-height, 56px); max-width: 100%; display: flex; align-items: center; }
.wf-head-logo img { display: block; width: auto; height: auto; max-height: var(--wf-logo-height, 56px); max-width: min(100%, calc(var(--wf-logo-height, 56px) * 5)); object-fit: contain; }
.wf-head-title { margin: var(--wf-title-top, 2px) 0 0; font-size: var(--wf-title-size, clamp(22px, 4vw, 28px)); line-height: var(--wf-title-lh, 1.2); letter-spacing: var(--wf-head-tracking, -0.01em); text-wrap: balance; overflow-wrap: anywhere; }
.wf-head-intro { margin: 0; max-width: var(--wf-intro-max, 60ch); color: var(--wf-intro-color, var(--wf-head-color, var(--wf-muted))); font-size: var(--wf-intro-size, 15.5px); font-weight: var(--wf-intro-weight, 400);
	font-family: var(--wf-head-font, inherit); letter-spacing: var(--wf-head-tracking, normal); line-height: var(--wf-intro-lh, 1.55); overflow-wrap: anywhere; }
.wf-head-logo + .wf-head-intro { margin-top: 4px; }

.wf-done { font-size: 17px; line-height: 1.55; padding: 8px 0; white-space: pre-line; }
.wf-done:focus { outline: none; }
.wf-done-rich { white-space: normal; }
.wf-done-rich p, .wf-rich p { margin: 0 0 10px; }
.wf-done-rich p:last-child, .wf-rich p:last-child { margin-bottom: 0; }
.wf-rich-help p { margin: 0 0 4px; }
.wf-rich-help a, .wf-done-rich a, .wf-rich a { color: var(--wf-link, var(--wf-accent)); text-decoration: underline; text-underline-offset: 2px; }
.wf-done-rich ul, .wf-done-rich ol, .wf-rich ul, .wf-rich ol { margin: 0 0 10px; padding-left: 22px; }
.wf-rich { font-size: var(--wf-text-size, 15.5px); line-height: 1.55; color: var(--wf-text, var(--wf-ink)); overflow-wrap: anywhere; }
.wf-rich h2, .wf-rich h3, .wf-rich h4 { margin: 0 0 8px; line-height: 1.25; font-family: var(--wf-heading-font, var(--wf-font)); color: var(--wf-heading, var(--wf-ink)); }
.wf-align-center { text-align: center; }
.wf-align-right { text-align: right; }
.wf-align-left { text-align: left; }
.wf-done::before { content: ""; display: block; width: 36px; height: 4px; border-radius: 4px; background: var(--wf-accent); margin-bottom: 16px; }

.wf-closed { color: var(--wf-muted); }

/* A coloured wash across the share page (nibble.io), over the page colour. */
body.wf-hosted:has(.wf-page-wash) { background: linear-gradient(90deg, var(--wf-wash-start) 0%, var(--wf-wash-end) var(--wf-wash-stop, 33%)), var(--wf-page); }
/* The form set in from the card's edge on the share page (the header keeps the card's padding). */
.wf-hosted .wf-sheet > .wf { padding: var(--wf-card-inset, 0px); }

/* Untitled UI (planly.com/contact): 20 px label lines 6 px above the boxes, rows 30 px apart. */
.wf-spacing-untitled .wf-label { line-height: 20px; margin: 0 0 6px; }
.wf-spacing-untitled .wf-grid { row-gap: 30px; }
.wf-spacing-untitled .wf-field { padding: 0; }
.wf.wf-spacing-untitled textarea { line-height: 24px; }
.wf.wf-spacing-untitled input[type=text], .wf.wf-spacing-untitled input[type=email] { line-height: normal; }

/* Labels for screen readers only (a website that shows just the placeholder). */
.wf-labels-hidden .wf-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Inline (planly.com's blog sign-up): the questions and the button on one row; stacked, button full width, on phones. */
@media (min-width: 521px) {
	.wf.wf-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--wf-inline-gap, 16px); align-items: start; }
	.wf-inline > * { grid-column: 1 / -1; }
	.wf-inline > .wf-step { grid-column: 1; grid-row: 1; }
	.wf-inline > .wf-actions { grid-column: 2; grid-row: 1; margin-top: 0; }
}
@media (max-width: 520px) {
	.wf-inline .wf-actions button { width: 100%; }
}

/* A boxed note under the heading (fulflld.com's card above the form): the card's own colours, share page only. */
.wf-head-box { width: 100%; box-sizing: border-box; margin: 0; margin-top: var(--wf-note-space, 0px); padding: 16px 24px; background: var(--wf-card-bg, var(--wf-form-bg, var(--wf-bg)));
	border: var(--wf-form-border-width, 1px) solid var(--wf-form-border, var(--wf-line-soft)); border-radius: var(--wf-form-radius, 8px);
	font-size: var(--wf-note-size, 16px); line-height: var(--wf-intro-lh, 1.35); font-weight: var(--wf-intro-weight, 400); color: var(--wf-intro-color, var(--wf-muted)); }
.wf-head-box p { margin: 0; }
/* One line of small print under the button (gcshelps.com: "No commitment. Just a conversation."), in the header's face. */
.wf-foot { margin: var(--wf-foot-space, 16px) 0 0; text-align: center; font-family: var(--wf-head-font, inherit); font-size: var(--wf-foot-size, 12px);
	line-height: 1.6; letter-spacing: var(--wf-head-tracking, normal); color: var(--wf-intro-color, var(--wf-muted)); overflow-wrap: anywhere; }
.wf-embed .wf-head-hide-embed .wf-head-box { display: none; }
.wf-buttons-upper .wf-actions button { text-transform: uppercase; }
/* Webflow (fulflld.com/contact): 16 px label lines 8 px above 50 px boxes, rows 36 px apart, pairs 24 px apart. */
.wf-spacing-webflow .wf-label { line-height: 16px; margin: 0 0 8px; }
.wf-spacing-webflow .wf-grid { gap: 36px 24px; }
.wf-spacing-webflow .wf-field { padding: 0; }
.wf.wf-spacing-webflow textarea { padding: 12px var(--wf-field-pad-x, 16px); line-height: 1.5; }
.wf.wf-spacing-webflow input[type=text], .wf.wf-spacing-webflow input[type=email], .wf.wf-spacing-webflow input[type=tel] { height: var(--wf-field-height, 50px); padding-top: 0; padding-bottom: 0; }
.wf-spacing-webflow .wf-actions button { line-height: 1; }
.wf-spacing-webflow .wf-req { color: inherit; margin-left: 0; }

/* The file the form hands out (gated download): a button in the thank-you, styled like Submit. */
.wf-download-row { margin: 20px 0 0; }
.wf-download { display: inline-block; padding: var(--wf-button-pad, 11px 20px); border-radius: var(--wf-button-radius, var(--wf-radius)); text-decoration: none;
	background: var(--wf-button-bg, var(--wf-accent)); color: var(--wf-button-text, var(--wf-on-accent)); font-family: var(--wf-button-font, inherit);
	font-weight: var(--wf-button-weight, 600); font-size: var(--wf-button-font-size, 16px); }
.wf-download:focus-visible { outline: 2px solid var(--wf-ink); outline-offset: 2px; }

/* A picture inside the form (FormMedia): drawn at its own width up to the form's, aligned like HubSpot's image module. */
.wf-image { display: grid; }
.wf-image > * { justify-self: start; max-width: 100%; }
.wf-image.wf-align-center > * { justify-self: center; }
.wf-image.wf-align-right > * { justify-self: end; }
.wf-image a { display: block; }
.wf-image img { max-width: 100%; height: auto; }

/* HubSpot's numbered progress ("1/2" over a rounded bar) under the questions (measured on fulflld.com, 2026-10-15). */
.wf-progress { display: block; margin-top: 20px; }
.wf-progress-text { display: block; margin: 0 0 4px 4px; font-family: var(--wf-progress-font, inherit); font-size: var(--wf-progress-text-size, 14px);
	line-height: normal; color: var(--wf-progress-text, var(--wf-ink)); }
.wf-progress-track { display: block; height: 12px; border-radius: 12px; overflow: hidden; background: var(--wf-progress-track, var(--wf-line-soft)); }
.wf-progress-fill { display: block; height: 100%; border-radius: 12px; background: var(--wf-progress, var(--wf-accent)); transition: width .3s ease; }

/* A step beside a photo: questions in one half, the photo filling the other half edge to edge (HubSpot "left"/"right"
   layouts). The photo goes away below 768 px, as HubSpot's does. */
.wf.wf-split { display: flex; align-items: stretch; }
.wf.wf-split-left { flex-direction: row-reverse; }
.wf-split-main { flex: 1 1 50%; min-width: 0; padding: var(--wf-form-padding, 28px); }
.wf-photo { flex: 1 1 50%; min-width: 0; background-size: cover; background-repeat: no-repeat; }
.wf-photo[hidden] { display: none; }
.wf-sheet:has(> .wf-split), .wf-hosted .wf-sheet:has(> .wf-split) { padding: 0; overflow: hidden; }
.wf-embed .wf-sheet:has(> .wf-split) { background: var(--wf-form-bg, transparent); padding: 0; border: 0; border-radius: var(--wf-form-radius, 0px); }
.wf-hosted .wf-sheet:has(> .wf-split) > .wf-done { padding: var(--wf-form-padding, 28px); }
/* Page layout "full" (fulflld.com's report form fills the page): the share page shows it across the page, like the website. */
body.wf-hosted:has(.wf-page-full) { background: var(--wf-form-bg, var(--wf-bg)); }
.wf-hosted .wf-page:has(.wf-page-full) { max-width: none; padding: 0; }
.wf-hosted .wf-sheet:has(> .wf-page-full) { border: 0; border-radius: 0; box-shadow: none; }
/* HubSpot's share card fills a phone's width from the top (verde Colab at 390 px). */
@media (max-width: 520px) {
	.wf-hosted .wf-page:has(.wf-spacing-hubspot) { padding: 0; }
	.wf-hosted .wf-page:has(.wf-spacing-hubspot) .wf-sheet { border-radius: 0; }
}
/* HubSpot's Previous / Next pair at the two ends (its default when the form does not say). */
.wf-buttons-apart .wf-back:not([hidden]) { margin-right: auto; }
/* HubSpot's "two thirds": the photo takes 30 % and the questions the rest (Verde Colab); photo-on-top / below: a 200 px band. */
.wf.wf-split-left-third { flex-direction: row-reverse; }
.wf-split-left-third .wf-photo, .wf-split-right-third .wf-photo { flex: 0 0 30%; }
.wf-split-left-third .wf-split-main, .wf-split-right-third .wf-split-main { flex: 1 1 70%; }
.wf.wf-split-top { flex-direction: column-reverse; }
.wf.wf-split-bottom { flex-direction: column; }
.wf-split-top .wf-photo, .wf-split-bottom .wf-photo { flex: none; height: 200px; }
.wf-split-top .wf-split-main, .wf-split-bottom .wf-split-main { flex: none; }
.wf-split-none .wf-split-main { flex-basis: 100%; }
@media (max-width: 767px) {
	.wf-split-left .wf-photo, .wf-split-right .wf-photo, .wf-split-left-third .wf-photo, .wf-split-right-third .wf-photo { display: none; }
}
/* A box sized the way HubSpot sizes it: its padding above and below one normal line of its font. */
.wf.wf-field-natural input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), .wf.wf-field-natural select {
	height: auto; min-height: 0; padding-top: var(--wf-field-pad-y); padding-bottom: var(--wf-field-pad-y); line-height: normal; }
/* HubSpot's message box: two lines of its own font plus the box padding (its rows="2"). */
.wf.wf-field-natural textarea { min-height: 0; height: calc(2lh + 2 * var(--wf-field-pad-y) + 2 * var(--wf-field-border-width, 1px));
	padding-top: var(--wf-field-pad-y); padding-bottom: var(--wf-field-pad-y); line-height: normal; }
/* HubSpot's message box sits on a line of text, which leaves 4 px under it (nibble.io: a 96 px question). */
.wf.wf-field-natural.wf-spacing-hubspot textarea { margin-bottom: 4px; }
/* HubSpot's Previous button looks like its Next button; the buttons sit together, 30 px apart. */
.wf-spacing-hubspot .wf-actions { column-gap: 30px; }
.wf-spacing-hubspot .wf-back { background: var(--wf-button-bg, var(--wf-accent)); color: var(--wf-button-text, var(--wf-on-accent)); border: 1px solid var(--wf-button-bg, var(--wf-accent)); box-shadow: var(--wf-button-shadow, none); }
.wf-spacing-hubspot.wf-buttons-right .wf-next, .wf-spacing-hubspot.wf-buttons-right .wf-submit { margin-left: 0; }
/* HubSpot's tick boxes are centred on their line, 8 px from the words; a row is that line and 8 px. */
.wf-spacing-hubspot .wf-choices .wf-choice input[type=checkbox], .wf-spacing-hubspot .wf-consent .wf-choice input[type=checkbox] { margin-top: 0; }
.wf-spacing-hubspot .wf-choices .wf-choice, .wf-spacing-hubspot .wf-consent .wf-choice { gap: 8px; align-items: center; }
/* HubSpot's phone flag box, measured on fulflld.com: 10 px in, the flag, 5 px, a 12 px caret, 7 px to the number box. */
.wf-spacing-hubspot.wf-field-natural .wf-country-face { padding: 0 7px 0 var(--wf-field-pad-x, 10px); gap: 5px; font-size: 16px; }
.wf-spacing-hubspot.wf-field-natural .wf-country-face::after { border-left-width: 6px; border-right-width: 6px; border-top-width: 6px; opacity: 1; }
/* A linked picture sits on one line of HubSpot's own Helvetica, which leaves 4 px under it. */
.wf-spacing-hubspot .wf-image a { font: 16px Helvetica; line-height: normal; }
/* HubSpot measures its own frame, not the screen: under 480 px (its 40 px padding included) a row's questions stack and the
   button fills the row (gcshelps.com: the 425 px card stacks, the 635 px one does not). Our form is that frame less 4 px. */
.wf.wf-spacing-hubspot { container: wf-hubspot / inline-size; }
@container wf-hubspot (max-width: 475px) {
	.wf-spacing-hubspot .wf-field.wf-half, .wf-spacing-hubspot .wf-field.wf-w60, .wf-spacing-hubspot .wf-field.wf-w40 { grid-column: 1 / -1; }
	.wf-spacing-hubspot .wf-actions button:not([hidden]) { width: 100%; margin-left: 0; }
}
/* HubSpot's buttons fill the row on a narrow form, one under the other (Previous above Next). */
@media (max-width: 430px) {
	.wf-spacing-hubspot .wf-actions { flex-direction: column; align-items: stretch; row-gap: 20px; }
	.wf-spacing-hubspot .wf-actions button:not([hidden]) { width: 100%; margin-left: 0; }
}

@media (max-width: 520px) {
	.wf-label { font-size: var(--wf-label-size-phone, var(--wf-label-size, 14px)); }
	.wf input[type=text], .wf input[type=email], .wf input[type=tel], .wf input[type=url], .wf input[type=date], .wf select, .wf textarea { font-size: var(--wf-field-font-size-phone, var(--wf-field-font-size, 16px)); }
	/* A message box with a size of its own keeps it on phones (fulflld.com's 13.3 px Inter message box). */
	.wf textarea { font-size: var(--wf-textarea-font-size, var(--wf-field-font-size-phone, var(--wf-field-font-size, 16px))); }
	.wf textarea { min-height: var(--wf-textarea-height-phone, var(--wf-textarea-height, 104px)); height: var(--wf-textarea-height-phone, var(--wf-textarea-height, auto)); }
	.wf-actions button { font-size: var(--wf-button-font-size-phone, var(--wf-button-font-size, 16px)); }
	.wf-button-fixed .wf-actions button { height: var(--wf-button-height-phone, var(--wf-button-height)); }
	.wf-head-title { line-height: var(--wf-title-lh-phone, var(--wf-title-lh, 1.2)); }
	.wf-field.wf-half, .wf-field.wf-w60, .wf-field.wf-w40 { grid-column: 1 / -1; }
	.wf-sheet { padding: 20px 16px; }
	.wf-page { padding-top: 24px; }
	.wf-rail-label { font-size: 12px; }
	/* A large website-style header shrinks on phones the way dlivrd.io's does (40 → 24 px, 24 → 21 px); the defaults stay as they are. */
	.wf-head-title { font-size: var(--wf-title-size-phone, min(var(--wf-title-size, 22px), max(22px, calc(var(--wf-title-size, 22px) * .6)))); }
	.wf-head-intro { font-size: var(--wf-intro-size-phone, min(var(--wf-intro-size, 15.5px), max(15.5px, calc(var(--wf-intro-size, 15.5px) * .875)))); }
	.wf-head-logo { height: 44px; }
	.wf-head-logo img { max-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.wf-rail-bar::after, .wf input, .wf select, .wf textarea { transition: none; }
}

/* Box padding across the width, when the form names it (HubSpot's input padding). */
.wf.wf-field-pad-x input[type=text], .wf.wf-field-pad-x input[type=email], .wf.wf-field-pad-x input[type=tel], .wf.wf-field-pad-x input[type=url],
.wf.wf-field-pad-x input[type=date], .wf.wf-field-pad-x select, .wf.wf-field-pad-x textarea { padding-left: var(--wf-field-pad-x); padding-right: var(--wf-field-pad-right, var(--wf-field-pad-x)); }

/* Phone: by default the code is in the picker; HubSpot's look puts it inside the number box. */
.wf-tel { display: contents; }
.wf-tel-dial { display: none; }

/* HubSpot spacing (forms imported from HubSpot, measured on expedite.io and dlivrd.io on 2026-10-14). */
.wf-spacing-hubspot .wf-label { line-height: normal; margin: 0 0 10px; }
.wf-spacing-hubspot .wf-grid { row-gap: 20px; column-gap: 30px; }
/* With labels inside the boxes HubSpot still keeps the 10 px under each empty label: boxes 30 px apart, the first 10 px down (gcshelps.com). */
.wf-spacing-hubspot.wf-labels-inside .wf-grid { row-gap: 30px; padding-top: 10px; }
/* .wf.<class> outranks the box rule's `font: inherit`, which would otherwise bring back the page's 1.5 line. */
.wf.wf-spacing-hubspot input, .wf.wf-spacing-hubspot select, .wf.wf-spacing-hubspot textarea, .wf-spacing-hubspot .wf-rich { line-height: normal; }
.wf-spacing-hubspot .wf-country-face { padding: 0 6px; gap: 4px; }
.wf-spacing-hubspot .wf-actions button { border-width: 0; }
.wf-spacing-hubspot .wf-rich p { margin: 1em 0; }
.wf-spacing-hubspot .wf-rich p:last-child { margin-bottom: 1em; }
.wf-spacing-hubspot .wf-heading.wf-heading-l1 { font-size: 32px; line-height: normal; margin: 0.67em 0; }
.wf-spacing-hubspot .wf-heading.wf-heading-l2 { font-size: 24px; line-height: normal; margin: 0.83em 0; }
.wf-spacing-hubspot .wf-country-dial { display: none; }
.wf-spacing-hubspot .wf-tel { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; background: var(--wf-field);
	border: var(--wf-field-border-width, 1px) solid var(--wf-field-border, var(--wf-line)); border-radius: 0 var(--wf-field-radius, var(--wf-radius)) var(--wf-field-radius, var(--wf-radius)) 0; }
.wf-spacing-hubspot .wf-tel-dial { display: block; padding-left: var(--wf-field-pad-x, 8px); font-family: var(--wf-field-font, inherit); font-size: 16px; color: var(--wf-field-text, var(--wf-ink)); }
.wf.wf-spacing-hubspot .wf-phone .wf-tel input[type=tel] { border: 0; background: transparent; box-shadow: none; padding-left: 4px; min-height: calc(var(--wf-field-height, 44px) - 2px); }
.wf-spacing-hubspot .wf-tel:focus-within { border-color: var(--wf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wf-accent) 30%, transparent); }
.wf-spacing-hubspot .wf-tel:has([aria-invalid="true"]) { border-color: var(--wf-danger); }
/* HubSpot puts a question's help between its label and its box. */
.wf-spacing-hubspot .wf-field, .wf-spacing-hubspot-legacy .wf-field { display: flex; flex-direction: column; }
.wf-spacing-hubspot .wf-field > .wf-label, .wf-spacing-hubspot-legacy .wf-field > .wf-label { order: -2; }
.wf-spacing-hubspot-legacy .wf-field > .wf-help { order: -1; margin: 0 0 6px; }
/* HubSpot's help line (fulflld.com questionnaire): 12.8 px on a normal line, 10 px above the box. */
.wf-spacing-hubspot .wf-field > .wf-help { order: -1; font-size: var(--wf-help-size, 12.8px); line-height: normal; margin: 0 0 10px; }

/* HubSpot's older (v3) forms: 20 px label lines 4 px above the box, 18 px between questions, 22 px lines in the boxes. */
.wf-spacing-hubspot-legacy .wf-label { line-height: 20px; margin: 0 0 4px; }
.wf-spacing-hubspot-legacy .wf-grid { row-gap: 18px; }
.wf.wf-spacing-hubspot-legacy input, .wf.wf-spacing-hubspot-legacy select, .wf.wf-spacing-hubspot-legacy textarea { line-height: 22px; }
.wf-spacing-hubspot-legacy .wf-help { padding: 0 2px; line-height: normal; }
.wf.wf-spacing-hubspot-legacy textarea { height: 66px; min-height: 66px; padding-top: 10px; padding-bottom: 10px; }

/* HubSpot's tick boxes and choices: 18 px squares in the field colour with the field border; the options in the label face. */
.wf-spacing-hubspot .wf-choice input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 2px 0 0; background: var(--wf-field);
	border: 1px solid var(--wf-field-border, var(--wf-line)); border-radius: 2px; display: grid; place-content: center; cursor: pointer; }
.wf-spacing-hubspot .wf-choice input[type=checkbox]:checked { background: var(--wf-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%2320205C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.wf-spacing-hubspot .wf-choices .wf-choice { font-family: var(--wf-label-font, inherit); font-size: var(--wf-label-size, 15px); color: var(--wf-label, inherit); padding: 0; margin: 0 0 8px; line-height: normal; }
.wf-spacing-hubspot .wf-choices .wf-choice:last-child { margin-bottom: 0; }   /* HubSpot: 30 px a row, nothing after the last */

/* HubSpot's older "canvas" theme (expedite.io referral form): normal label lines 4 px above the box, 22 px between questions, a spaced star. */
.wf-spacing-hubspot-canvas .wf-label { line-height: normal; margin: 0 0 4px; }
.wf-spacing-hubspot-canvas .wf-grid { row-gap: 22px; }
.wf.wf-spacing-hubspot-canvas input, .wf.wf-spacing-hubspot-canvas select, .wf.wf-spacing-hubspot-canvas textarea { line-height: 22px; }
.wf-spacing-hubspot-canvas .wf-req, .wf-hide-optional.wf-spacing-hubspot-canvas .wf-req { margin-left: 4px; }
.wf-spacing-hubspot-canvas .wf-field { display: flex; flex-direction: column; }
.wf-spacing-hubspot-canvas .wf-field > .wf-label { order: -2; }
.wf-spacing-hubspot-canvas .wf-field > .wf-help { order: -1; margin: 0 0 6px; }

/* HubSpot privacy block: consent and single tick-box wording on normal lines, 20 px after the notice before the next question. */
.wf-spacing-hubspot .wf-consent .wf-choice, .wf-spacing-hubspot .wf-single { line-height: normal; padding: 0; }
.wf-spacing-hubspot .wf-consent-note { margin-bottom: 20px; }
/* HubSpot's older forms keep 18 px under the button (referral card 640 px tall, expedite.io frame 774). */
.wf-spacing-hubspot-legacy .wf-actions, .wf-spacing-hubspot-canvas .wf-actions { margin-bottom: 18px; }

/* Elementor's form (expedite.io/new-app): 1.4 label lines sitting on the box, 10 px between questions. */
.wf-spacing-elementor .wf-label { line-height: 1.4; margin: 0; }
.wf-spacing-elementor .wf-grid { row-gap: 10px; }
.wf.wf-spacing-elementor input, .wf.wf-spacing-elementor select, .wf.wf-spacing-elementor textarea { line-height: 1.4; }

/* Elementor: the message box is a block (no text-baseline gap under it) and the button has no border. */
.wf.wf-spacing-elementor textarea { display: block; }
.wf-spacing-elementor .wf-actions button { border-width: 0; }

/* Google Forms (Pure Green's catering intake, measured 2026-10-14): a title card with the theme colour on top, each question its
   own white card 12 px apart, 16 px questions, underline-only answers half as wide as the card, Submit left and "Clear form" right. */
.wf-spacing-google .wf-grid { row-gap: 12px; }
.wf-spacing-google .wf-field:not(.wf-block):not([data-type="hidden"]) { background: var(--wf-field-card, #FFFFFF); border: 1px solid #DADADA; border-radius: 8px; padding: 24px; }
.wf-spacing-google .wf-label { font-size: var(--wf-label-size, 16px); line-height: 24px; margin: 0 0 16px; font-weight: var(--wf-label-weight, 400); }
.wf-spacing-google .wf-req { color: #DB372D; margin-left: 4px; }
.wf.wf-spacing-google input[type=text], .wf.wf-spacing-google input[type=email], .wf.wf-spacing-google input[type=tel], .wf.wf-spacing-google input[type=url],
.wf.wf-spacing-google input[type=date], .wf.wf-spacing-google textarea {
	width: 50%; min-width: min(100%, 280px); border-width: 0 0 1px; border-style: solid; border-color: rgba(0, 0, 0, .12); border-radius: 0; background: transparent;
	padding: 15px 0 8px; min-height: 0; height: auto; font-size: 14px; line-height: 24px; box-shadow: none; }
.wf.wf-spacing-google input:focus, .wf.wf-spacing-google textarea:focus { border-bottom: 2px solid var(--wf-accent); padding-bottom: 7px; box-shadow: none; }
/* Google: 16 px from the question to the answer's 48 px area, its text 15 px into it (the label rule above keeps the 16 px). */
/* The header sits before the form (not inside it), hence :has(). */
.wf-head:has(+ form.wf-spacing-google) { background: #FFFFFF; border: 1px solid #DADADA; border-top: 10px solid var(--wf-accent); border-radius: 8px; padding: 12px 24px 16px;
	margin: 0 0 12px; gap: 12px; }
.wf-head:has(+ form.wf-spacing-google) .wf-head-note { align-self: stretch; margin: 12px -24px 0; padding: 12px 24px 0; border-top: 1px solid #DADADA; font-size: 14px; line-height: 20px; color: #DB372D; }
.wf-head-note { margin: 0; font-size: 14px; }
.wf-spacing-google .wf-actions { justify-content: space-between; margin-top: 24px; }
.wf-spacing-google .wf-submit { margin-left: 0; }
.wf-actions .wf-clear, .wf-button-fixed .wf-actions .wf-clear { padding: 0 8px; }
.wf-clear { background: transparent; border: 0; color: var(--wf-accent); font: inherit; font-weight: 500; font-size: 14px; cursor: pointer; padding: 0 8px; }
.wf-clear:hover { background: color-mix(in srgb, var(--wf-accent) 8%, transparent); }

/* A formatted header intro is a .wf-rich block: its header size and colour must win over the rich-text defaults. */
.wf-head-intro.wf-rich { font-size: var(--wf-intro-size, 15.5px); line-height: var(--wf-intro-lh, 1.55); font-weight: var(--wf-intro-weight, 400);
	color: var(--wf-intro-color, var(--wf-head-color, var(--wf-muted))); font-family: var(--wf-head-font, inherit); }
@media (max-width: 520px) {
	/* A formatted intro shrinks on phones like a plain one (planly.com: 20 → 14 px). */
	.wf-head-intro.wf-rich { font-size: var(--wf-intro-size-phone, min(var(--wf-intro-size, 15.5px), max(15.5px, calc(var(--wf-intro-size, 15.5px) * .875)))); }
}

/* Jotform (Cheba Hut's registration, measured 2026-10-14): Inter, 12 / 10 px around each question, 16 px / 500 labels 14 px above
   40 px boxes, 12 px sub-labels 11 px below, single answers in a 310 px box, pairs 312 + 24 + 312, full-width rules under titles. */
.wf-spacing-jotform .wf-grid { row-gap: 24px; column-gap: 4px; }   /* 12 px margin under a question + 12 px over the next */
.wf-spacing-jotform .wf-field { padding: 12px 10px; }
.wf-spacing-jotform .wf-label { line-height: normal; margin: 0 0 14px; padding-left: 2px; }
.wf-spacing-jotform .wf-sublabel { padding-left: 2px; }
.wf.wf-spacing-jotform input, .wf.wf-spacing-jotform select, .wf.wf-spacing-jotform textarea { line-height: normal; }
.wf.wf-spacing-jotform input[type=text], .wf.wf-spacing-jotform input[type=email], .wf.wf-spacing-jotform input[type=tel], .wf.wf-spacing-jotform select { padding-top: 0; padding-bottom: 0; }
.wf.wf-spacing-jotform textarea { padding: 10px; }
.wf-spacing-jotform .wf-rule-below { border-bottom: 1px solid #D7D8E1; margin: 8px -4px 0; padding: 14px; }   /* a section title */
/* The welcome banner at the top of the card: edge to edge, 40 / 52 px. */
.wf-spacing-jotform .wf-grid > .wf-rule-below:first-child { margin: calc(-1 * var(--wf-card-padding, 28px)) calc(-1 * var(--wf-card-padding, 28px)) -12px; padding: 40px 52px; }
.wf-spacing-jotform .wf-heading.wf-heading-l1 { font-size: 32px; font-weight: 600; line-height: 1.45; margin: 0; }
.wf-spacing-jotform .wf-heading.wf-heading-l2 { font-size: 24px; font-weight: 600; line-height: 34.8px; margin: 0 0 4px; }
.wf-spacing-jotform .wf-rich { line-height: 24px; }
.wf-spacing-jotform .wf-rich p, .wf-spacing-jotform .wf-rich p:last-child { margin: 0; }
.wf-spacing-jotform .wf-rich h2 { margin: 0.83em 0; }
.wf-spacing-jotform .wf-block:has(> .wf-rich) { padding-bottom: 0; }
.wf-spacing-jotform .wf-actions { justify-content: center; border-top: 1px solid #E5E7F2; margin: 12px calc(-1 * var(--wf-card-padding, 28px)) calc(10px - var(--wf-card-padding, 28px)); padding: 30px 0; }
.wf-spacing-jotform .wf-submit { margin-left: 0; min-width: 180px; }
.wf-sublabel { display: block; font-size: 12px; line-height: normal; margin-top: 11px; color: var(--wf-label, inherit); }
.wf-input-half input, .wf-input-half select, .wf-input-half textarea { max-width: 310px; }
.wf-input-half .wf-sublabel { max-width: 308px; }   /* Jotform's narrow column: a long note wraps under its box */
.wf-label-ghost { color: transparent; user-select: none; }   /* keeps the line (and the accessible name) of the second box of a pair */
.wf-label-ghost .wf-req { color: transparent; }
.wf-divider { border: 0; border-top: 1px solid #E6E6E6; margin: 0; }
.wf-spacing-jotform .wf-divider { margin: 5px 0; }

/* Signature: draw on the canvas; the answer is the PNG in a hidden input (checked again on the server). */
.wf-signature { position: relative; width: 310px; max-width: 100%; height: 150px; border: 1px solid #C8CEED; border-radius: 4px; background: #FFFFFF; }
.wf-signature canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.wf-sig-clear { position: absolute; right: 8px; bottom: 6px; border: 0; background: transparent; color: #57647E; font: inherit; font-size: 12px; cursor: pointer; padding: 2px 4px; }

/* A joined box (the parts of a Jotform address after the first): no label row, 24 px under the box above. Its label stays for
   screen readers. */
.wf-spacing-jotform .wf-joined { padding-top: 0; margin-top: -12px; }   /* parts of one Jotform address: 24 px apart */
.wf-joined > .wf-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
/* Jotform choices: 15 px options on 20 px lines, 16 px apart, 14 px under the question; a block-level message box; 24 px above the
   button bar (the last question's 12 px margin + the bar's 12 px). */
.wf-spacing-jotform .wf-choices .wf-label { margin-bottom: 14px; }
.wf-spacing-jotform .wf-choices .wf-choice { padding: 0; font-size: 15px; line-height: 20px; }
.wf-spacing-jotform .wf-choices .wf-choice + .wf-choice { margin-top: 11px; }
.wf-spacing-jotform .wf-choices .wf-choice:last-child { padding-bottom: 5px; }
.wf-spacing-jotform .wf-req, .wf-hide-optional.wf-spacing-jotform .wf-req { margin-left: 4px; }
.wf-spacing-jotform .wf-choice input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 1px 0 0; background: #FFFFFF;
	border: 1px solid #B8BDC9; border-radius: 2px; cursor: pointer; }
.wf-spacing-jotform .wf-choice input[type=checkbox]:checked { background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%2318BD5B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: #18BD5B; }
.wf.wf-spacing-jotform textarea { display: block; }
.wf-spacing-jotform .wf-actions { margin-top: 24px; }
/* Jotform's upload: a 132 px dashed drop area, "Browse Files" / "Drag and drop files here"; the file input covers it (click or drop). */
.wf-spacing-jotform .wf-files { position: relative; min-height: 132px; border: 1px dashed #2C3345; border-radius: 4px; background: #FBFCFF;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px; text-align: center; }
.wf-spacing-jotform .wf-files::before { content: "Browse Files"; display: block; padding-top: 34px; font-size: 18px; font-weight: 600; color: #2C3345;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='%23A9B1C4' d='M25.8 9.6A9 9 0 0 0 8.4 7.2 7.2 7.2 0 0 0 7.2 24h18a6.6 6.6 0 0 0 .6-14.4z'/%3E%3Cpath fill='%23fff' d='M16 9l4.5 4.5h-3.2V19h-2.6v-5.5h-3.2z'/%3E%3C/svg%3E") center top / 32px 24px no-repeat; }
.wf-spacing-jotform .wf-files::after { content: "Drag and drop files here"; display: block; font-size: 14px; color: #57647E; }
.wf-spacing-jotform .wf-file-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wf-spacing-jotform .wf-file-note { display: none; }
.wf-spacing-jotform .wf-file-list { position: relative; z-index: 1; order: 3; }

/* Measured spacing (gcshelps.com/contact-us), after every preset so a form that sets it gets exactly it. */
.wf.wf-row-gap .wf-grid { row-gap: var(--wf-row-gap); }
.wf.wf-col-gap .wf-grid { column-gap: var(--wf-col-gap); }
.wf.wf-label-line .wf-label { line-height: var(--wf-label-line); }
.wf.wf-label-gap .wf-label { margin-bottom: var(--wf-label-gap); }
.wf.wf-field-line input, .wf.wf-field-line select, .wf.wf-field-line textarea { line-height: var(--wf-field-line); }
@media (max-width: 520px) {
	.wf.wf-label-line-phone { --wf-label-line: var(--wf-label-line-phone); }
	.wf.wf-field-line-phone { --wf-field-line: var(--wf-field-line-phone); }
	.wf.wf-field-height-phone { --wf-field-height: var(--wf-field-height-phone); }
}
.wf-hide-required .wf-label .wf-req { display: none; }
.wf.wf-text-tracking .wf-label, .wf.wf-text-tracking input, .wf.wf-text-tracking select, .wf.wf-text-tracking textarea { letter-spacing: var(--wf-text-tracking); }
.wf.wf-button-tracking .wf-actions button { letter-spacing: var(--wf-button-tracking); }
.wf.wf-textarea-pad-top textarea { padding-top: var(--wf-textarea-pad-top); }
.wf-head-wide { width: min(var(--wf-head-width), 100vw - 32px); margin-left: calc((100% - min(var(--wf-head-width), 100vw - 32px)) / 2); }
.wf-hosted .wf-sheet:has(> .wf-head-above.wf-head-center) > .wf-head-wide { width: min(var(--wf-head-width), 100vw - 32px); max-width: none; margin-left: 0; }
/* spritzmyduck.com: labels in capitals with their own spacing; dropdowns shorter than the boxes; an arrow of the form's own. */
.wf.wf-labels-upper .wf-label { text-transform: uppercase; }
.wf.wf-label-tracking .wf-label { letter-spacing: var(--wf-label-tracking); }
.wf.wf-select-height select { height: var(--wf-select-height); min-height: var(--wf-select-height); padding-top: 0; padding-bottom: 0; }
.wf.wf-select-chevron select { appearance: none; background-image: var(--wf-select-arrow); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px; padding-right: 36px; }
.wf.wf-select-none select { appearance: none; background-image: none; }
/* HubSpot drops a side photo when its frame is under 768 px, whatever the screen (us.verdecolab.com: a 300 px column, no
   photo). The form's own width decides, so a narrow share-page card loses it too; the screen rule above stays for older browsers. */
.wf.wf-split { container-type: inline-size; }
@container (max-width: 767px) {
	.wf-split-left .wf-photo, .wf-split-right .wf-photo, .wf-split-left-third .wf-photo, .wf-split-right-third .wf-photo { display: none; }
	.wf-split-left .wf-split-main, .wf-split-right .wf-split-main, .wf-split-left-third .wf-split-main, .wf-split-right-third .wf-split-main { flex-basis: 100%; }
}
/* A heading wider than the card (header_width) over a split form: the card lets it through, the form keeps the photo's corners. */
.wf-hosted .wf-sheet:has(> .wf-split):has(> .wf-head-wide) { overflow: visible; }
.wf-hosted .wf-sheet:has(> .wf-head-wide) > .wf.wf-split { overflow: hidden; }