.vrf-form-wrap { width: 100%; box-sizing: border-box; --vrf-pub-accent: #c92a1e; }
.vrf-hp-wrap {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip: rect(0 0 0 0); clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}
/* Field widths. Each field carries its builder width as --vrf-w (unitless
   percent); the basis subtracts that field's share of the row gap, so fields
   whose widths add up to 100 fill one row exactly. Breakpoints are container
   queries on the form's own width rather than the viewport, so a form placed
   in a narrow column stacks on a desktop screen too. */
.vrf-form-wrap { container: vrf-form / inline-size; --vrf-gap: 16px; }
.vrf-field-list { display: flex; flex-flow: row wrap; gap: var(--vrf-gap); margin-bottom: 16px; }
.vrf-field {
	box-sizing: border-box; min-width: 0;
	flex: 0 1 calc(var(--vrf-w, 100) * 1% - var(--vrf-gap) * (1 - var(--vrf-w, 100) / 100));
}
/* Row boundaries from the renderer; inert until the tablet tier needs them. */
.vrf-row-break { display: none; }
/* Tablet-width form ("Automatic" only): rows of three or more fields drop to
   two across, and a field left alone on its row grows to fill it. Rows of one
   or two keep their builder widths. The row breaks keep each builder row's
   fields together; vertical spacing moves from the row gap to the fields so a
   break's empty line adds no extra space. */
@container vrf-form (min-width: 600px) and (max-width: 899px) {
	.vrf-form-wrap[data-vrf-stack="auto"] .vrf-field-list { row-gap: 0; margin-bottom: 0; }
	.vrf-form-wrap[data-vrf-stack="auto"] .vrf-row-break { display: block; flex-basis: 100%; height: 0; }
	.vrf-form-wrap[data-vrf-stack="auto"] .vrf-field { margin-bottom: var(--vrf-gap); }
	.vrf-form-wrap[data-vrf-stack="auto"] .vrf-field.vrf-reflow { flex-basis: calc(50% - var(--vrf-gap) / 2); flex-grow: 1; }
}
/* Phone-width form: one field per row unless the form is set to "Never". */
@container vrf-form (max-width: 599px) {
	.vrf-form-wrap:not([data-vrf-stack="never"]) .vrf-field { flex-basis: 100%; }
}
/* One question at a time: each question has the screen to itself, so it
   always shows full width regardless of the builder width or tier above. */
.vrf-form-wrap .vrf-form[data-vrf-conversational="1"] .vrf-field-list > .vrf-field { flex: 0 0 100%; }
/* Browsers without container queries keep the builder widths but still wrap
   a field rather than squeezing it unusably narrow. */
@supports not (container-type: inline-size) {
	.vrf-field { min-width: 180px; }
}
.vrf-field label, .vrf-field legend { display: block; font-weight: 600; margin-bottom: 4px; padding: 0; }
.vrf-field input[type=text], .vrf-field input[type=email], .vrf-field input[type=tel],
.vrf-field input[type=number], .vrf-field input[type=date], .vrf-field input[type=time],
.vrf-field select, .vrf-field textarea {
	width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #999; border-radius: 4px;
}
/* Browsers size each native input type's shadow-DOM content differently even
   with identical padding/border (Chrome: text ~33px, date ~35px, time ~38px
   tall) — an explicit height is the only way to make them render as one row. */
.vrf-field input[type=text], .vrf-field input[type=email], .vrf-field input[type=tel],
.vrf-field input[type=number], .vrf-field input[type=date], .vrf-field input[type=time],
.vrf-field select {
	height: 38px;
}
/* iOS Safari gives native date/time inputs a minimum width that ignores width: 100%, pushing them
   off a phone screen. Letting them shrink and dropping the native field styling (iOS only, the
   picker still opens) keeps them inside the form like every other field. */
.vrf-field input[type=date], .vrf-field input[type=time] { display: block; min-width: 0; max-width: 100%; }
@supports (-webkit-touch-callout: none) {
	.vrf-field input[type=date], .vrf-field input[type=time] { -webkit-appearance: none; appearance: none; background-color: #fff; line-height: 20px; }
	.vrf-field input[type=date]::-webkit-date-and-time-value,
	.vrf-field input[type=time]::-webkit-date-and-time-value { text-align: left; margin: 0; }
}
.vrf-choice { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; }
/* Options with descriptions stack one per row so each description sits under its own option. */
.vrf-choice-item { margin: 0 0 10px; }
.vrf-choice-item:last-child { margin-bottom: 0; }
.vrf-choice-item .vrf-choice { margin-right: 0; }
.vrf-choice-desc { margin: 2px 0 0 calc(1em + 6px); font-size: 0.9em; line-height: 1.4; color: #5b5b5b; }
.vrf-req { color: #b3261e; }
.vrf-field-error input, .vrf-field-error select, .vrf-field-error textarea { border-color: #b3261e; }
.vrf-field-error-msg { color: #b3261e; font-size: 0.9em; margin: 4px 0 0; }
.vrf-notice { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; }
.vrf-notice-success { background: #e7f5ec; color: #2a7248; border: 1px solid #bee0ca; }
.vrf-notice-error { background: #fbeae8; color: #8a251c; border: 1px solid #f0c7c2; }
.vrf-notice-error ul { margin: 8px 0 0; padding-left: 20px; }
.vrf-notice-error a { color: inherit; }
.vrf-form-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vrf-submit {
	background: var(--vrf-pub-accent); color: #fff; border: none; border-radius: 4px; padding: 10px 22px;
	font-weight: 600; cursor: pointer;
}
.vrf-save-draft {
	background: transparent; color: #444; border: 1px solid #999; border-radius: 4px; padding: 9px 18px;
	font-weight: 500; cursor: pointer;
}
.vrf-btn-back {
	background: transparent; color: #444; border: 1px solid #999; border-radius: 4px; padding: 9px 18px;
	font-weight: 600; cursor: pointer;
}
.vrf-progress { font-size: 0.85em; font-weight: 600; color: #646970; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 12px; }
.vrf-steps { display: flex; align-items: center; list-style: none; margin: 0 0 8px; padding: 0; }
.vrf-step { display: flex; align-items: center; flex: 1; }
.vrf-step:last-child { flex: none; }
.vrf-step-dot {
	display: flex; align-items: center; justify-content: center; flex: none;
	width: 26px; height: 26px; border-radius: 50%; background: #e2e4e8; color: #646970;
	font-size: 0.8em; font-weight: 700;
}
.vrf-step::after { content: ""; flex: 1; height: 2px; background: #e2e4e8; margin: 0 6px; }
.vrf-step:last-child::after { content: none; }
.vrf-step.is-complete .vrf-step-dot { background: var(--vrf-pub-accent); color: #fff; }
.vrf-step.is-complete::after { background: var(--vrf-pub-accent); }
.vrf-step.is-current .vrf-step-dot { background: #fff; color: var(--vrf-pub-accent); border: 2px solid var(--vrf-pub-accent); }
.vrf-conv-nav { display: flex; gap: 12px; margin-top: 16px; }
.vrf-form[data-vrf-conversational="1"] .vrf-field-list { min-height: 90px; }
.vrf-field-list.vrf-anim-active { position: relative; overflow: hidden; }
.vrf-anim-slot { position: absolute; top: 0; left: 0; width: 100%; box-sizing: border-box; }
.vrf-content-block { line-height: 1.6; }
.vrf-existing-file { font-size: 0.85em; color: #646970; margin: 4px 0 0; }
.vrf-rating-stars { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
.vrf-rating-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vrf-rating-stars label { font-size: 26px; line-height: 1; cursor: pointer; color: #767676; padding: 2px; }
.vrf-rating-stars label::before { content: "★"; }
.vrf-rating-stars input:checked ~ label,
.vrf-rating-stars label:hover,
.vrf-rating-stars label:hover ~ label { color: var(--vrf-pub-accent); }
.vrf-rating-stars input:focus-visible + label { outline: 2px solid var(--vrf-pub-accent); outline-offset: 2px; border-radius: 3px; }