/**
 * Wiseman fit check.
 *
 * Standalone rather than part of scss/main.scss on purpose: the live main.css
 * has been hand-edited and no longer matches its SCSS source, so recompiling it
 * would regress rules nobody is expecting to change. This file is loaded only on
 * the page that embeds the form.
 *
 * Brand accent is #00A69C (DECISIONS item 12). The prototype's appearance is
 * explicitly not a brief, so this follows the site's own components instead.
 *
 * NOTE ON SELECTORS: Gravity Forms renders a form's cssClass on the wrapper with
 * "_wrapper" appended, so the form set as `wa-fit-check` produces
 * `.wa-fit-check_wrapper`. An earlier pass here targeted `.wa-fit-check` and
 * every rule silently missed - the form rendered completely unstyled. The
 * `wa-fc-*` classes on the fields are mine and unambiguous, so most rules scope
 * on those instead.
 *
 * ASCII only, including in comments. This file gets rewritten by tooling and a
 * round trip through a non-UTF8 codepage mangled box-drawing characters twice.
 */

.wa-fit-check_wrapper {
	--wa-fc-accent: #00a69c;
	--wa-fc-ink: #1a1a1a;
	--wa-fc-muted: #4f4f4f;
	--wa-fc-line: #e7e3da;
	--wa-fc-mist: #f6f1e9;
	--wa-fc-white: #fcfbf7;
}

.wa-fit-check_wrapper .gform_fields {
	display: block;
}

/* ---------- Stepper: one question at a time ----------
 *
 * Every question field is hidden and only .wa-fc-current is shown. Driven by a
 * class rather than by Gravity Forms' own conditional-logic visibility, because
 * "is this question answerable" and "is this the question we are on" are two
 * different states, and a field can be the first without being the second.
 *
 * !important is load bearing here, not laziness. Gravity Forms' conditional
 * logic writes an INLINE display on every field it decides is visible, and an
 * inline style beats a class rule - so without it the answered questions
 * reappeared underneath the outcome the moment gf_apply_rules ran. Measured in
 * the browser: 12 questions back on screen.
 *
 * .wa-fc-finished is listed alongside .wa-fc-stepping because finish() swaps one
 * class for the other. The answers stay in the DOM because the form still has to
 * submit them; they just must not be on screen.
 */
.wa-fc-stepping .gfield.wa-fc-q,
.wa-fc-finished .gfield.wa-fc-q {
	display: none !important;
}

.wa-fc-stepping .gfield.wa-fc-q.wa-fc-current {
	display: block !important;
	animation: wa-fc-in 0.28s ease both;
}

@keyframes wa-fc-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* The outcome, the capture screen and the submit button stay out of the way
 * until the questions are done. */
.wa-fc-stepping .wa-fc-outcome-field,
.wa-fc-stepping .wa-fc-capture-head-field,
.wa-fc-stepping .gfield.wa-fc-capture,
.wa-fc-stepping .wa-fc-privacy-field,
.wa-fc-stepping .gform_footer {
	display: none !important;
}

/* Capture waits for an action to be chosen - the visitor sees where they are
 * being pointed before being asked for their details (FIELDS.md). */
.wa-fc-finished:not(.wa-fc-capturing) .wa-fc-capture-head-field,
.wa-fc-finished:not(.wa-fc-capturing) .gfield.wa-fc-capture,
.wa-fc-finished:not(.wa-fc-capturing) .wa-fc-privacy-field,
.wa-fc-finished:not(.wa-fc-capturing) .gform_footer {
	display: none !important;
}

.wa-fc-finished .wa-fc-shell,
.wa-fc-finished .wa-fc-nav {
	display: none;
}

/* ---------- Progress ---------- */

.wa-fit-check_wrapper .wa-fc-progress { margin: 0 0 30px; }

.wa-fit-check_wrapper .wa-fc-progress__label {
	display: block;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wa-fc-muted);
	margin-bottom: 10px;
}

.wa-fit-check_wrapper .wa-fc-progress__bar {
	display: block;
	height: 3px;
	background: var(--wa-fc-line);
	border-radius: 3px;
	overflow: hidden;
}

.wa-fit-check_wrapper .wa-fc-progress__bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--wa-fc-accent);
	transition: width 0.35s ease;
}

/* ---------- Questions ---------- */

.gfield.wa-fc-q .gfield_label {
	display: block;
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.15;
	color: var(--wa-fc-ink);
	margin: 0 0 8px;
}

.gfield.wa-fc-q .gfield_description {
	font-size: 15px;
	color: var(--wa-fc-muted);
	padding: 0 0 20px;
}

/* Every question is required; an asterisk on all of them says nothing. */
.gfield.wa-fc-q .gfield_required { display: none; }

.gfield.wa-fc-q .gfield_radio,
.gfield.wa-fc-q .gfield_checkbox { display: block; }

.gfield.wa-fc-q .gchoice { margin: 0 0 10px; position: relative; }

.gfield.wa-fc-q .gchoice label {
	display: block;
	padding: 15px 18px;
	border: 1px solid var(--wa-fc-line);
	border-radius: 10px;
	background: var(--wa-fc-white);
	cursor: pointer;
	font-size: 16px;
	line-height: 1.4;
	max-width: 640px;
	transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.gfield.wa-fc-q .gchoice label:hover {
	border-color: var(--wa-fc-accent);
	background: #fff;
}

/* The native control stays in the accessibility tree and stays focusable - it
 * is moved behind the label, not display:none, so keyboard and screen reader
 * users still get a real radio group. */
.gfield.wa-fc-q .gchoice input[type="radio"],
.gfield.wa-fc-q .gchoice input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.gfield.wa-fc-q .gchoice input:checked + label {
	border-color: var(--wa-fc-accent);
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--wa-fc-accent);
}

.gfield.wa-fc-q .gchoice input:focus-visible + label {
	outline: 2px solid var(--wa-fc-accent);
	outline-offset: 2px;
}

/* ---------- Nav and errors ---------- */

.wa-fit-check_wrapper .wa-fc-nav {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 28px 0 0;
}

.wa-fit-check_wrapper .wa-fc-next,
.wa-fit-check_wrapper .wa-fc-back {
	font: inherit;
	border-radius: 999px;
	padding: 13px 28px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: opacity 0.15s ease;
}

.wa-fit-check_wrapper .wa-fc-next {
	background: var(--wa-fc-accent);
	color: #fff;
	font-weight: 600;
	order: 2;
}

.wa-fit-check_wrapper .wa-fc-next:hover { opacity: 0.9; }

.wa-fit-check_wrapper .wa-fc-back {
	background: transparent;
	color: var(--wa-fc-muted);
	border-color: var(--wa-fc-line);
	order: 1;
}

.wa-fc-back[disabled] { opacity: 0.35; cursor: not-allowed; }

.wa-fit-check_wrapper .wa-fc-error {
	margin: 16px 0 0;
	padding: 11px 14px;
	border-radius: 8px;
	background: #fdf3f2;
	border: 1px solid #e6c3bf;
	color: #8a2c22;
	font-size: 15px;
	max-width: 640px;
}

/* ---------- Outcome ---------- */

.wa-fit-check_wrapper .wa-fc-outcome { padding: 8px 0 4px; }

.wa-fit-check_wrapper .wa-fc-outcome__heading {
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 400;
	line-height: 1.1;
	margin: 0 0 18px;
}

.wa-fit-check_wrapper .wa-fc-outcome__body {
	font-size: 17px;
	line-height: 1.6;
	color: var(--wa-fc-muted);
	max-width: 62ch;
	margin: 0 0 16px;
}

.wa-fit-check_wrapper .wa-fc-outcome__fee {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wa-fc-muted);
	max-width: 62ch;
	margin: 0 0 16px;
	padding: 13px 16px;
	background: var(--wa-fc-mist);
	border-radius: 8px;
}

.wa-fit-check_wrapper .wa-fc-outcome__actions-heading {
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wa-fc-muted);
	margin: 34px 0 16px;
}

.wa-fit-check_wrapper .wa-fc-actions {
	display: grid;
	gap: 18px;
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 760px) {
	.wa-fit-check_wrapper .wa-fc-actions--2 { grid-template-columns: 1fr 1fr; }
}

.wa-fit-check_wrapper .wa-fc-action {
	border: 1px solid var(--wa-fc-line);
	border-radius: 12px;
	padding: 24px;
	background: var(--wa-fc-white);
}

.wa-fit-check_wrapper .wa-fc-action.is-chosen {
	border-color: var(--wa-fc-accent);
	box-shadow: inset 0 0 0 1px var(--wa-fc-accent);
}

.wa-fit-check_wrapper .wa-fc-action__heading { font-size: 19px; margin: 0 0 8px; }

.wa-fit-check_wrapper .wa-fc-action__body {
	font-size: 15px;
	line-height: 1.55;
	color: var(--wa-fc-muted);
	margin: 0 0 18px;
}

.wa-fit-check_wrapper .wa-fc-action__btn {
	font: inherit;
	font-weight: 600;
	background: var(--wa-fc-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 12px 24px;
	cursor: pointer;
}

.wa-fit-check_wrapper .wa-fc-action__btn:hover { opacity: 0.9; }

/* ---------- Booking embed ----------
 *
 * The chosen card takes the whole row once a calendar is in it.
 *
 * DECISIONS item 3 settled on an embedded calendar rather than a link out, and
 * warned in the same breath that "an embedded calendar is where a booking flow
 * most often breaks on a small screen". It broke on a large one first. The
 * embed lives INSIDE its action card, and the individual return outcome puts
 * two cards in a 1fr 1fr grid, so once the real Calendly URLs were wired the
 * calendar rendered into a 212px column on a 1470px desktop and 264px on a
 * phone - measured, not estimated. Calendly's inline widget reflows into a
 * single tall column below about 320px, which is what made the page 21,491px
 * tall.
 *
 * With placeholders none of this showed: the placeholder is a short dashed
 * note that fits a narrow card perfectly well. The bug was always there and was
 * invisible until there was something real to put in the box.
 *
 * Rather than move the embed out of the card in the markup - which the build
 * script generates and which would change the form definition - the chosen card
 * is spanned across every column. Choosing an action is a commitment to that
 * path, so the sibling card shrinking to make room reads as the interface
 * following the choice rather than as a layout accident.
 *
 * Driven by a class the stepper sets, not by :has(). :has() would express this
 * in CSS alone and is supported in every browser this site targets, but the JS
 * is already toggling .is-chosen two lines away, so a class it sets at the same
 * moment has no support question attached to it at all.
 */
.wa-fit-check_wrapper .wa-fc-actions.wa-fc-actions--calendar-open {
	grid-template-columns: 1fr;
}

.wa-fit-check_wrapper .wa-fc-actions--calendar-open .wa-fc-action.is-chosen {
	grid-column: 1 / -1;
}

.wa-fit-check_wrapper .wa-fc-embed { margin-top: 18px; }

.wa-fit-check_wrapper .wa-fc-embed iframe {
	width: 100%;
	/* DECISIONS item 3 flags a small screen as where a booking flow most often
	 * breaks. A viewport-relative height with a floor keeps the calendar usable
	 * on a phone instead of scrolling inside a short fixed box.
	 *
	 * Raised from clamp(560px, 78vh, 760px) once real URLs were wired and the
	 * calendar could be measured: Calendly's month view renders 1026px tall at
	 * 528px wide and 1090px at 264px, so the old box clipped it by roughly 300px
	 * and put a scrollbar inside the iframe - a nested scroll region on a phone,
	 * which is the failure item 3 warned about.
	 *
	 * A fixed height is a compromise. Calendly's own embed script resizes the
	 * frame by postMessage as the visitor moves from month to times to the
	 * booking form, but that means loading a third party script into the page
	 * rather than one iframe, which is a bigger decision than this and touches
	 * the privacy notice still outstanding under item 8. Sizing generously for
	 * the tallest of the three steps avoids the nested scrollbar without it.
	 *
	 * A flat height, NOT a vh clamp. The first attempt used
	 * clamp(760px, 96vh, 1140px) and 96vh won on both viewports - 912px on a
	 * 950px desktop and 810px on a phone - so the calendar was still clipped by
	 * 114px and 280px. Viewport height is the wrong input here: what has to fit
	 * is Calendly's content, which is about the same height whatever the screen.
	 * Measured 1026px at 528px wide and 1090px at 312px, so 1120px clears both
	 * with a little headroom for the times and booking steps. On a phone this is
	 * taller than the screen, which is correct - the page scrolls, rather than a
	 * scroll region nested inside one.
	 *
	 * SUPERSEDED 2026-08-20: the stepper now resizes this frame from Calendly's
	 * own calendly.page_height messages, so the value below is only the height
	 * before the first message lands. 860px is chosen to clear the two steps a
	 * visitor sees first — the month grid at 834px and a day's times at 765px —
	 * so nothing jumps on arrival. The name-and-email step is 2212px and is
	 * reached by the resize, not by this.
	 *
	 * The old flat 1120px was measured against the client's PREVIOUS one-on-one
	 * events. Their round robin replacements are shorter, which is where the
	 * ~290px of dead space under the calendar came from. */
	height: 860px;
	border: 0;
	border-radius: 10px;
	display: block;
}

/* On a phone the calendar is the whole point of the screen, so let it use the
 * card's padding. 390px viewport gives the card 314px and the embed 264px once
 * the 24px card padding is taken off each side; Calendly reflows below about
 * 320px, so reclaiming that padding is the difference between the month grid
 * and a single tall column.
 *
 * The pull-out goes on .wa-fc-action__embed, the wrapper that is the card's
 * direct child — NOT on .wa-fc-embed--calendly inside it.
 *
 * Putting it on the embed did produce the right picture, but only by accident:
 * the embed became 312px while its own parent stayed 264px, so the child hung
 * 48px outside the parent's content box and survived purely because that
 * wrapper happens to be overflow:visible. Measured on a 390px viewport:
 * .wa-fc-action__embed clientWidth 264 against scrollWidth 312. One
 * `overflow:hidden` anywhere up that chain — a future card style, a plugin
 * reset — and the calendar would be silently cropped. Widening the wrapper
 * instead means nothing overflows anything.
 */
 *
 * REVERTED 2026-08-20. The pull-out was measured as safe — the embed fitted the
 * card's padding box exactly, nothing overflowed, nothing scrolled — and it
 * still looked wrong, because "fits the padding box" means the calendar runs
 * edge to edge while the heading and button above it keep their 24px inset.
 * Calendly's own "Time zone" control then sits hard against the card border with
 * no breathing room at all.
 *
 * And it was buying nothing: Calendly renders the month grid at the plain 264px
 * inset width just as it does at 312px. The reflow to a single tall column
 * happens lower than assumed. So the embed keeps the same inset as every other
 * element in the card.
 */
@media (max-width: 600px) {
	.wa-fit-check_wrapper .wa-fc-action .wa-fc-action__embed,
	.wa-fit-check_wrapper .wa-fc-action .wa-fc-embed--calendly {
		margin-left: 0;
		margin-right: 0;
	}
}

.wa-fit-check_wrapper .wa-fc-embed--placeholder {
	border: 1px dashed #c9c3b4;
	border-radius: 10px;
	padding: 22px;
	background: var(--wa-fc-mist);
	text-align: center;
}

.wa-fit-check_wrapper .wa-fc-embed__note { margin: 0 0 6px; font-size: 15px; color: var(--wa-fc-muted); }
.wa-fit-check_wrapper .wa-fc-embed__meta { margin: 0; font-size: 13px; color: #8a8578; }

/* ---------- Capture ---------- */

.wa-fit-check_wrapper .wa-fc-capture-head h2 {
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 400;
	margin: 44px 0 20px;
	padding-top: 32px;
	border-top: 1px solid var(--wa-fc-line);
}

.gfield.wa-fc-capture { margin: 0 0 16px; max-width: 520px; }

.gfield.wa-fc-capture .gfield_label {
	display: block;
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 6px;
	color: var(--wa-fc-ink);
}

.gfield.wa-fc-capture input {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--wa-fc-line);
	border-radius: 8px;
	font: inherit;
	background: #fff;
}

.gfield.wa-fc-capture input:focus {
	outline: 2px solid var(--wa-fc-accent);
	outline-offset: 1px;
	border-color: var(--wa-fc-accent);
}

.wa-fit-check_wrapper .gform_footer .gform_button {
	background: var(--wa-fc-accent);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 14px 32px;
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
}

.wa-fit-check_wrapper .gform_footer .gform_button:hover { opacity: 0.9; }

.wa-fit-check_wrapper .wa-fc-ack {
	padding: 28px;
	border: 1px solid var(--wa-fc-line);
	border-radius: 12px;
	background: var(--wa-fc-white);
	font-size: 17px;
	line-height: 1.6;
	max-width: 62ch;
}

/* Placeholder slot for the collection notice the client is drafting. Renders
 * nothing until the reviewed wording replaces the comment inside it. */
.wa-fc-privacy-slot:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
	.wa-fc-stepping .gfield.wa-fc-q.wa-fc-current { animation: none; }
	.wa-fit-check_wrapper .wa-fc-progress__bar i { transition: none; }
}

/* ---------- Button colour override ----------
 *
 * The theme styles buttons globally at a specificity these single-class rules
 * cannot reach, so Continue, the action buttons and Submit all rendered in the
 * theme's default blue rather than the brand accent. Confirmed in the browser
 * across three passes of raising specificity the ordinary way. Scoped tightly
 * to this form's own controls so nothing else on the site is affected.
 */
.wa-fit-check_wrapper button.wa-fc-next,
.wa-fit-check_wrapper button.wa-fc-action__btn,
.wa-fit-check_wrapper .gform_footer input.gform_button,
.wa-fit-check_wrapper .gform_footer button.gform_button {
	background: var(--wa-fc-accent) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	font-weight: 600 !important;
	box-shadow: none !important;
}

.wa-fit-check_wrapper button.wa-fc-back {
	background: transparent !important;
	background-image: none !important;
	color: var(--wa-fc-muted) !important;
	border: 1px solid var(--wa-fc-line) !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.wa-fit-check_wrapper button.wa-fc-back[disabled] {
	opacity: 0.35 !important;
	cursor: not-allowed;
}
/* ---------- Finished state, final say ----------
 *
 * `.wa-fc-finished .wa-fc-nav` and `.wa-fit-check_wrapper .wa-fc-nav` have the
 * same specificity, and the flex rule is declared later in this file, so it won
 * and Back/Continue stayed on screen above the outcome. Same trap as the inline
 * display one further up: a tie is decided by source order, not by intent.
 */
.wa-fit-check_wrapper.wa-fc-finished .wa-fc-nav,
.wa-fit-check_wrapper.wa-fc-finished .wa-fc-shell {
	display: none !important;
}

/* Action cards sit in a grid row, so equal height reads as one component
 * rather than two of different weights, and the button anchors to the bottom
 * of each regardless of how long its description runs. */
.wa-fit-check_wrapper .wa-fc-actions { align-items: stretch; }

.wa-fit-check_wrapper .wa-fc-action {
	display: flex;
	flex-direction: column;
}

.wa-fit-check_wrapper .wa-fc-action__body { flex: 1 1 auto; }

.wa-fit-check_wrapper .wa-fc-action__btn { align-self: flex-start; }
/* ---------- Intro ----------
 *
 * Specified in copy.json's `intro` block, so it is a screen the form owes the
 * visitor, not decoration. Everything else stays hidden until Start is pressed.
 */
.wa-fc-intro-open .gfield,
.wa-fc-intro-open .gform_footer,
.wa-fc-intro-open .wa-fc-shell,
.wa-fc-intro-open .wa-fc-nav {
	display: none !important;
}

.wa-fc-stepping .wa-fc-intro,
.wa-fc-finished .wa-fc-intro {
	display: none !important;
}

.wa-fit-check_wrapper .wa-fc-intro__heading {
	font-family: Newsreader, Georgia, serif;
	font-size: clamp(28px, 4vw, 40px);
	font-weight: 400;
	line-height: 1.12;
	margin: 0 0 20px;
	max-width: 22ch;
}

.wa-fit-check_wrapper .wa-fc-intro__statement {
	font-size: 17px;
	line-height: 1.6;
	color: var(--wa-fc-muted);
	max-width: 62ch;
	margin: 0 0 16px;
}

.wa-fit-check_wrapper .wa-fc-intro__duration {
	font-size: 15px;
	color: var(--wa-fc-muted);
	margin: 0 0 28px;
}

.wa-fit-check_wrapper button.wa-fc-start {
	font: inherit;
	font-weight: 600;
	background: var(--wa-fc-accent) !important;
	background-image: none !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 14px 40px;
	cursor: pointer;
	box-shadow: none !important;
}

.wa-fit-check_wrapper button.wa-fc-start:hover { opacity: 0.9; }

/* Focus is moved to the question heading on every step change, so it must not
 * show a focus ring on a non-interactive element - that reads as a bug. The
 * announcement is what matters, not a visible outline. */
.wa-fit-check_wrapper .gfield_label:focus,
.wa-fit-check_wrapper .wa-fc-outcome:focus {
	outline: none;
}
/* ---------- Injected elements must span the form grid ----------
 *
 * .gform_fields is a 12-column CSS grid in the Gravity theme, and GF gives its
 * own .gfield a `grid-column: span 12`. Anything injected into it - the intro,
 * the progress shell, the nav - has no such rule, so it defaults to ONE column
 * and rendered a word per line. My earlier `display: block` override on
 * .gform_fields lost to `.gform_wrapper.gravity-theme .gform_fields`, which is
 * more specific; spanning the grid is the smaller change and leaves GF's own
 * layout alone.
 */
.wa-fit-check_wrapper .wa-fc-intro,
.wa-fit-check_wrapper .wa-fc-shell,
.wa-fit-check_wrapper .wa-fc-nav {
	grid-column: 1 / -1;
}
/* ---------- Homepage "fit" section, re-proportioned for this form ----------
 *
 * The live homepage section is a 435px text column beside a 625px panel, sized
 * for a four question card. This form ends with an outcome screen and an
 * embedded booking calendar that is 560-760px tall on its own, so the panel
 * becomes the main column and the text column narrows to a standfirst.
 *
 * Applied through a modifier rather than by editing .wa-fit-split, because the
 * old three question Fit Tool's proportions are still what that base class is
 * for.
 *
 * TWO modifier names, on purpose. --preview is what /fit-check-preview/ (post
 * 1930) carries and is left alone so that page keeps working as the comparison
 * copy. --fc is the same layout under a name that is not a lie once the form is
 * on the live homepage, and is what post 231 carries. Keep the pair in sync; if
 * the preview page is ever retired, delete the --preview half.
 */
.wa-fit-split--preview,
.wa-fit-split--fc {
	grid-template-columns: minmax(0, 320px) minmax(0, 1fr) !important;
	gap: 48px;
	align-items: start;
}

/* The panel is a white card sized for a short form. The fit check is a flow
 * with its own internal rhythm, so it gets room and a sticky-free top. */
.wa-fit-split--preview .wa-fc-panel,
.wa-fit-split--fc .wa-fc-panel {
	padding: 36px;
	max-width: none;
}

/* Below the split's own breakpoint the two columns stack, and the text column
 * becomes an introduction above the form rather than a sidebar beside it. */
@media (max-width: 1024px) {
	.wa-fit-split--preview,
	.wa-fit-split--fc {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 28px;
	}
}

@media (max-width: 600px) {
	.wa-fit-split--preview .wa-fc-panel,
	.wa-fit-split--fc .wa-fc-panel { padding: 22px 18px; }
}
/* ---------- Panel card ----------
 *
 * Deliberately NOT .wa-fit-panel. That class in main.css is a complete skin for
 * the old three question Fit Tool, and reusing it broke this form in three ways
 * at once, all of them silent:
 *
 *   .wa-fit-panel .gfield{display:block !important}
 *       overrode Gravity Forms' own inline display:none, so ALL FIVE outcome
 *       screens rendered at once, one after another.
 *   .wa-fit-panel .gform_button[type=submit]{clip:rect(0,0,0,0) ...}
 *       clipped the submit button to 1px. The old tool submits on its last page
 *       transition and never needs it; this form does. The visitor would have
 *       filled in the capture screen with no way to send it.
 *   .wa-fit-panel [id$=_2] .gfield_label::before{content:"Question 1 of 3"}
 *       an attribute suffix match, so it also hits field_5_2 on this form and
 *       would print "Question 1 of 3" above a question that is one of thirteen.
 *
 * Copying just the card presentation here leaves the live homepage's own panel
 * untouched while the new form is under review.
 */
.wa-fc-panel {
	background: #fff;
	border: 1px solid var(--wa-fc-line);
	border-radius: 16px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	padding: clamp(24px, 4vw, 44px);
}

@media (max-width: 600px) {
	.wa-fc-panel { padding: 22px 18px; }
}
/* ============================================================================
 * PREVIOUS FORM SKIN, ported
 * ============================================================================
 *
 * The old three question Fit Tool's look, carried over to this form. Ported to
 * .wa-fc-panel rather than reusing .wa-fit-panel, because three rules in that
 * block break this form and are deliberately NOT brought across:
 *
 *   .gfield{display:block !important}         showed all five outcome screens
 *   .gform_button[type=submit]{clip:...}      clipped submit to 1px
 *   [id$=_2] .gfield_label::before{"Question 1 of 3"}
 *                                             a suffix match that also hit
 *                                             field_5_2, and the count is wrong
 *                                             now anyway - 13 questions, not 3
 *
 * That third rule's STYLING is what the kicker above each question used to look
 * like. It moves to the progress label below, which is the thing that actually
 * knows the count.
 */

/* The count now comes from the stepper, which reads the pack, so it is right on
 * every lane instead of being a hardcoded "of 3" printed by CSS. */
.wa-fit-check_wrapper .wa-fc-progress__label {
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--brand-accent-700, #8a6c31);
	margin-bottom: 10px;
}

/* Question typography, from the old panel. */
.wa-fc-panel .gfield.wa-fc-q .gfield_label {
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 10px;
	font-family: var(--font-serif) !important;
	font-weight: 500 !important;
	font-size: 24px !important;
	line-height: 1.3 !important;
	color: var(--brand-primary-700) !important;
}

.wa-fc-panel .gfield.wa-fc-q .gfield_description {
	font-family: var(--font-sans);
	font-size: 14.5px;
	color: var(--ink-3, #6b6b6b);
	padding: 0 0 16px;
}

.wa-fc-panel .gfield_required { display: none; }
.wa-fc-panel .gfield--type-honeypot { display: none !important; }
.wa-fc-panel .gform_wrapper.gform_wrapper,
.wa-fc-panel .gform_wrapper.gform_wrapper form { margin: 0; }
.wa-fc-panel .ginput_container_radio,
.wa-fc-panel .ginput_container_checkbox { margin-top: 0 !important; }

.wa-fc-panel .gfield.wa-fc-q .gfield_radio,
.wa-fc-panel .gfield.wa-fc-q .gfield_checkbox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 !important;
}

.wa-fc-panel .gfield.wa-fc-q .gchoice {
	display: block !important;
	position: relative;
	margin: 0 !important;
}

.wa-fc-panel .gfield.wa-fc-q .gchoice input[type="radio"],
.wa-fc-panel .gfield.wa-fc-q .gchoice input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
}

.wa-fc-panel .gfield.wa-fc-q .gchoice label {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100% !important;
	max-width: none !important;
	cursor: pointer;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-md, 8px);
	padding: 14px 18px !important;
	font-family: var(--font-sans);
	font-weight: 500;
	font-size: 15.5px !important;
	line-height: normal !important;
	margin: 0 !important;
	color: var(--ink);
	box-shadow: none;
	transition: background 0.2s, border-color 0.2s;
}

/* The arrow is on single choice only. A radio auto-advances the moment it is
 * picked, so the arrow describes what actually happens. A checkbox does not -
 * the visitor may be picking a second option - so an arrow there would promise
 * a jump that is not coming. */
.wa-fc-panel .gfield.wa-fc-q--single .gchoice label::after,
.wa-fc-panel .gfield.wa-fc-q--attestation .gchoice label::after {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background: var(--ink-4);
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: background 0.2s;
}

.wa-fc-panel .gfield.wa-fc-q .gchoice label:hover {
	background: #ecf6f4;
	border-color: var(--brand-primary);
}

.wa-fc-panel .gfield.wa-fc-q .gchoice label:hover::after { background: var(--brand-primary); }

.wa-fc-panel .gfield.wa-fc-q .gchoice input:checked + label {
	background: var(--mist, #f2f7f6);
	border-color: var(--brand-primary);
	box-shadow: none;
}

.wa-fc-panel .gfield.wa-fc-q .gchoice input:checked + label::after { background: var(--brand-primary); }

.wa-fc-panel .gfield.wa-fc-q .gchoice input:focus-visible + label {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* ---------- Controls anchored to the bottom of the panel ----------
 *
 * A min-height on the field area keeps Back/Continue in the same place from
 * question to question. Without it the buttons rise and fall with the number of
 * options, which reads as the panel jumping every time you answer.
 */
.wa-fc-panel .gform_fields { align-content: start; row-gap: 0; }

.wa-fit-check_wrapper .wa-fc-nav { margin-top: 28px; }

.wa-fit-check_wrapper .gform_footer {
	margin: 24px 0 0;
	padding: 0;
}

/* ---------- Column widths ---------- */

.wa-fit-split--preview,
.wa-fit-split--fc {
	grid-template-columns: minmax(0, 1fr) 650px !important;
}

@media (max-width: 1100px) {
	.wa-fit-split--preview,
	.wa-fit-split--fc { grid-template-columns: minmax(0, 1fr) !important; }
	.wa-fc-panel .gform_fields { min-height: 0; }
}
/* Why the field area has a floor and not a fixed height.
 *
 * Questions range from 2 options to 8, roughly 250px to 600px. Pinning
 * Back/Continue to one line across that range means about 350px of empty panel
 * on the short questions, which is a worse problem than the buttons moving.
 * The floor stops the two option questions feeling cramped; beyond that the
 * controls sit at the bottom of the content, which is where they now are for
 * every screen since the nav is appended after all fields rather than after the
 * first one.
 */
/* ---------- Spacing and intro heading, revised on review ----------
 *
 * The gap between the progress bar, the question and the buttons came from
 * three things stacking: a 30px margin under the progress bar, Gravity Forms'
 * own grid row-gap between fields, and the min-height floor I had put on the
 * field area. The floor is gone (see the note above it), the row-gap is zeroed
 * because only one field is ever on screen, and the margins are tightened.
 */
.wa-fit-check_wrapper .wa-fc-progress { margin: 0 0 22px; }
.wa-fit-check_wrapper .wa-fc-nav { margin-top: 22px; }
.wa-fc-panel .gfield.wa-fc-q { margin: 0; }

/* Intro heading: 24px to sit level with the question type rather than shouting
 * over it, and the same teal as the question labels so the panel reads as one
 * voice. 33ch keeps the line count sensible at 650px. */
.wa-fit-check_wrapper .wa-fc-intro__heading {
	font-size: 24px;
	line-height: 1.3;
	max-width: 33ch;
	color: var(--brand-primary-700);
	margin: 0 0 16px;
}

.wa-fit-check_wrapper .wa-fc-intro__statement { font-size: 15.5px; margin: 0 0 12px; }
.wa-fit-check_wrapper .wa-fc-intro__duration { font-size: 14.5px; margin: 0 0 24px; }

/* First question only: no fill.
 *
 * Before a lane is chosen the only question that exists is `role`, so the
 * stepper legitimately reports "1 of 1" and the bar rendered 100% full on the
 * very first screen - which reads as finished before you have started. The
 * track still shows, so the component is visibly a progress bar waiting to
 * move, rather than something that appears out of nowhere on question two.
 */
.wa-fc-first-question .wa-fc-progress__bar i { width: 0 !important; }
/* The actual source of the gap, measured rather than guessed.
 *
 * .gform_wrapper.gravity-theme .gform_fields sets a 40px grid row-gap. That is
 * sensible for a normal form where every field is on screen at once; here only
 * one is, so it became 40px above the question and 40px below the options, on
 * top of my own margins. My earlier `row-gap: 0` tied that selector on
 * specificity (both 0,3,0) and lost on source order, which is why the gap
 * survived a round of tightening. !important settles it.
 *
 * Spacing is now governed by the two margins below and nothing else.
 */
.wa-fc-panel .gform_fields {
	grid-row-gap: 0 !important;
	row-gap: 0 !important;
}
/* ---------- Type scale, revised on review ----------
 *
 * Headings settle on one teal, var(--brand-primary-700), the same as the
 * question labels and the intro, so the panel reads in a single voice rather
 * than switching colour between steps.
 *
 * Sizes step down as the visitor moves through: intro and outcome both 24px as
 * the headline of their screen, capture 20px because it is a sub-step under the
 * outcome the visitor is already reading, not a new headline. The 20px is my
 * call - "reduce" was not given a number - so it is the one to say if you
 * wanted it level with the other two.
 */
.wa-fit-check_wrapper .wa-fc-error {
	margin-bottom: 15px;
}

.wa-fit-check_wrapper .wa-fc-outcome__heading {
	font-size: 24px;
	line-height: 1.3;
	color: var(--brand-primary-700);
	margin: 0 0 14px;
}

.wa-fit-check_wrapper .wa-fc-outcome__body {
	font-size: 16px;
	line-height: 1.6;
}

.wa-fit-check_wrapper .wa-fc-capture-head h2 {
	font-size: 20px;
	line-height: 1.3;
	color: var(--brand-primary-700);
	margin: 32px 0 18px;
	padding-top: 26px;
}
/* The duration line is a second sentence of the same standfirst, not a footnote
 * under it, so it takes the statement's size rather than dropping a step.
 * Line height matched as well: at the same size, two adjacent paragraphs
 * leading differently (24.8px against 27.2px) reads as a mistake. */
.wa-fit-check_wrapper .wa-fc-intro__duration { font-size: 15.5px; line-height: 1.6; }
/* BH #172 — booking calendar on the confirmation screen.
   Calendly's own widget.js manages the iframe height for initInlineWidget, so
   this only needs a sensible floor while it boots. */
.wa-fc-confirm-booking{margin-top:24px}
.wa-fc-confirm-booking__lead{font-family:var(--font-sans);font-size:15px;line-height:1.6;color:var(--ink-2);margin:0 0 14px}
.wa-fc-confirm-booking__embed{min-height:700px;width:100%}
@media(max-width:600px){.wa-fc-confirm-booking__embed{min-height:1000px}}