/* ==========================================================================
   form-panel.css — ub/form-panel

   Two jobs, kept apart on purpose:

     PART 1  the panel UB owns — the ground, the copy column, the card.
     PART 2  a thin translation layer over Gravity Forms' own markup.

   PART 2 IS DELIBERATELY SMALL. Colour, type size and control size reach
   Gravity Forms through its style API instead, from
   ub_form_panel_style_settings() in includes/ub-content-blocks.php — GF emits
   those as CSS custom properties in an inline <style> scoped to
   `#gform_wrapper_N[...]`, which no stylesheet rule can out-specify without an
   id. Anything that CAN be said there is said there, and what remains here is
   only what the API has no key for: the zero radius, the uppercase label
   treatment, the step indicator, and the button row.

   Design language matches new-redesign/pages/learn-more.html: Outfit, 0px
   radius, the diagonal wedge, editorial numerals.
   ========================================================================== */


/* ==========================================================================
   PART 1 — the panel
   ========================================================================== */

.ub-formpanel {
	position: relative;
	overflow: hidden;
}

/* ── split: the conversion landing treatment ─────────────────────────────── */

.ub-formpanel--split {
	background-color: var(--ub-purple-deep, #2a1240);
	background-size: cover;
	background-position: center 30%;
	color: var(--white, #fff);
}

/* Two stacked scrims rather than one. ::before darkens the whole frame enough
   for white text at AA over an unknown photograph; ::after is the wedge motif
   carried from the homepage hero, and it must sit above the scrim or it is
   invisible. pointer-events:none on both so neither eats a click on the card. */
.ub-formpanel--split::before,
.ub-formpanel--split::after {
	content: '';
	position: absolute;
	pointer-events: none;
}

.ub-formpanel--split::before {
	inset: 0;
	background: linear-gradient(102deg,
		rgba(27, 16, 35, 0.96) 0%,
		rgba(42, 18, 64, 0.90) 44%,
		rgba(42, 18, 64, 0.72) 68%,
		rgba(42, 18, 64, 0.60) 100%);
}

.ub-formpanel--split::after {
	top: 0;
	bottom: 0;
	right: 0;
	width: 46%;
	background: linear-gradient(150deg, rgba(89, 45, 130, 0.5) 0%, rgba(89, 45, 130, 0) 70%);
	clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}

/* z-index on the container, not on the grid children: the scrims are absolute
   inside the section, so one stacking step lifts every descendant clear. */
.ub-formpanel .container {
	position: relative;
	z-index: 2;
}

.ub-formpanel--split .ub-formpanel-grid {
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: 70px;
	align-items: start;
	padding: 84px 0 96px;
}

.ub-formpanel-copy {
	padding-top: 12px;
}

.ub-formpanel-copy .eyebrow-rule,
.v2 .ub-formpanel-copy .eyebrow-rule,
.ub-formpanel--split .eyebrow-rule {
	color: #7fd9f5;
}

.ub-formpanel-copy .eyebrow-rule::before,
.v2 .ub-formpanel-copy .eyebrow-rule::before,
.ub-formpanel--split .eyebrow-rule::before {
	background: #7fd9f5;
}

.ub-formpanel-copy h1 {
	font-size: clamp(2.5rem, 4.4vw, 4rem);
	font-weight: 800;
	line-height: 1.01;
	letter-spacing: -0.032em;
	color: var(--white, #fff);
}

/* The second line of the headline is an <em> reset to upright: it is a
   subordinate clause, not an emphasis, and it wants the lighter weight and the
   looser leading of a standfirst. */
.ub-formpanel-copy h1 em {
	display: block;
	font-style: normal;
	font-size: 0.44em;
	font-weight: 300;
	letter-spacing: -0.012em;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.88);
	margin-top: 16px;
}

.ub-formpanel-lede {
	font-size: 1.12rem;
	line-height: 1.66;
	color: rgba(255, 255, 255, 0.82);
	margin-top: 24px;
	max-width: 32rem;
}

.ub-formpanel-stats {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	gap: 36px;
	margin-top: 40px;
}

.ub-formpanel-stats > div {
	border-top: 3px solid var(--ub-blue, #00a7e0);
	padding-top: 13px;
}

.ub-formpanel-stats .n {
	font-size: 1.95rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--white, #fff);
	font-variant-numeric: tabular-nums;
}

.ub-formpanel-stats .l {
	font-size: 0.82rem;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.66);
	margin-top: 7px;
	line-height: 1.35;
}

/* ── photo: split's layout with the photograph shown, not scrimmed ─────────
   The photograph leads the copy column and stretches so the column matches
   the card's height; the copy follows it on a light ground. A long form has a
   picture beside it instead of empty ground. No overlay: no text on the photo. */

.ub-formpanel--photo {
	background: var(--bg-light, #f4f7f6);
	color: var(--text-main, #2c3e50);
}

/* tone:"purple" - the same layout on brand purple. The copy keeps split's
   white-on-dark colours: the light-ground overrides below skip this tone. */
.ub-formpanel--photo.ub-formpanel--purple {
	background: var(--ub-purple, #592d82);
	color: var(--white, #fff);
}

.ub-formpanel--photo .ub-formpanel-grid {
	display: grid;
	grid-template-columns: 1fr 480px;
	gap: 56px;
	align-items: stretch;
	padding: 72px 0 88px;
}

.ub-formpanel--photo .ub-formpanel-copy {
	display: flex;
	flex-direction: column;
	padding-top: 0;
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .eyebrow-rule,
.v2 .ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-copy .eyebrow-rule {
	color: var(--ub-blue-text, #0a6e8f);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .eyebrow-rule::before,
.v2 .ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-copy .eyebrow-rule::before {
	background: var(--ub-blue, #00a7e0);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-copy h1 {
	color: var(--ub-purple, #592d82);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-copy h1 em {
	color: var(--text-light, #5b6a75);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-lede {
	color: var(--text-main, #2c3e50);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-stats .n {
	color: var(--ub-purple, #592d82);
}

.ub-formpanel--photo:not(.ub-formpanel--purple) .ub-formpanel-stats .l {
	color: var(--text-light, #5b6a75);
}

.ub-formpanel-photo {
	position: relative;
	flex: 1 1 auto;
	min-height: 360px;
	margin: 0 0 40px;
	overflow: hidden;
	background: var(--ub-purple-deep, #2a1240);
}

.ub-formpanel-photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ub-formpanel--photo .ub-formpanel-card {
	box-shadow: var(--shadow-md, 0 10px 20px rgba(0, 0, 0, 0.08));
}

/* ub/stat-strip pulls itself up over the section before it (.proof-strip,
   --proof-overlap). Over split's dark ground that is the intent; under the
   photo and card it would leave them nearly touching the stat cards, so the
   panel makes room for the overlap. The strip stops overlapping at 1100px. */
@media (min-width: 1101px) {
	.ub-formpanel--photo:has(+ .proof-strip) .ub-formpanel-grid {
		padding-bottom: calc(64px + var(--proof-overlap, 56px));
	}
}

/* ── plain: the same card on a light section ─────────────────────────────── */

.ub-formpanel--plain {
	background: var(--bg-light, #f4f7f6);
	padding: 72px 0 80px;
}

.ub-formpanel--plain .ub-formpanel-grid {
	display: block;
}

.ub-formpanel--plain .ub-formpanel-head {
	max-width: 44rem;
	margin: 0 auto 36px;
	text-align: center;
}

/* The plain variant's header, styled here rather than borrowing the theme's
   .eyebrow-rule / .display-lg primitives — those are gated on `body.v2`, which
   the theme adds only for pages carrying a section block, so a page holding
   only this panel would get browser defaults. Values match the v2 layer so the
   header sits correctly beside other UB sections when they are present.

   No leading rule on the eyebrow: .eyebrow-rule draws one with a flex gap, and
   a centred header reads better without it. */
.ub-formpanel-eyebrow {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: var(--eyebrow-tracking, 0.2em);
	text-transform: uppercase;
	color: var(--ub-blue-text, #0a6e8f);
	margin: 0 0 18px;
}

.ub-formpanel-heading {
	font-size: clamp(2.15rem, 4.1vw, 3rem);
	font-weight: var(--heading-weight, 800);
	line-height: 1.08;
	letter-spacing: -0.028em;
	color: var(--ub-purple, #592d82);
	text-wrap: balance;
	margin: 0;
}

.ub-formpanel-plainlede {
	font-size: 1.08rem;
	line-height: 1.6;
	color: var(--text-light, #5b6a75);
	margin: 18px auto 0;
	max-width: 40rem;
}

.ub-formpanel--plain .ub-formpanel-card {
	max-width: 640px;
	margin: 0 auto;
}

/* ── the card ───────────────────────────────────────────────────────────── */

.ub-formpanel-card {
	background: var(--white, #fff);
	/* The split skin sets white text for its photo ground; the card is white, so
	   form copy without its own colour (an HTML field's <p>) would vanish. */
	color: var(--text-main, #2c3e50);
	border-top: 4px solid var(--ub-blue, #00a7e0);
	padding: 34px 34px 30px;
	position: relative;
}

.ub-formpanel--split .ub-formpanel-card {
	box-shadow: 0 30px 70px rgba(12, 4, 22, 0.42);
}

.ub-formpanel--plain .ub-formpanel-card {
	box-shadow: var(--shadow-md, 0 10px 20px rgba(0, 0, 0, 0.08));
}

.ub-formpanel-cardhead {
	margin-bottom: 22px;
}

.ub-formpanel-cardhead h2 {
	font-size: 1.62rem;
	font-weight: 800;
	letter-spacing: -0.024em;
	color: var(--ub-purple, #592d82);
	line-height: 1.14;
}

.ub-formpanel-cardhead p {
	font-size: 0.94rem;
	color: var(--text-light, #5b6a75);
	margin-top: 8px;
	line-height: 1.5;
}

.ub-formpanel-reassure {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #edf1f2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 0.8rem;
	color: var(--text-light, #5b6a75);
}

.ub-formpanel-reassure span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ub-formpanel-reassure i {
	color: var(--ub-purple, #592d82);
}

.ub-formpanel-fallback {
	margin-top: 4px;
}

/* The editor-only diagnostic. Loud on purpose — it means the panel is not
   collecting anything, which is easy to miss on a page that otherwise looks
   finished. */
.ub-formpanel-notice {
	background: #fff8e5;
	border-left: 4px solid #b3261e;
	padding: 14px 16px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: #4a3b00;
	margin: 0 0 18px;
}


/* ==========================================================================
   PART 2 — Gravity Forms, inside the card

   Every selector below is prefixed with .ub-formpanel so nothing here can
   reach a form rendered anywhere else on the site. A form in a page's body
   content keeps GF's own look; only forms inside this block are restyled.
   ========================================================================== */

/* THE ONE !important IN THIS FILE, and the reason is specific: UB's design is
   zero-radius, and GF's style API cannot express that. Its resolver reads
   `rgar( $settings, 'inputBorderRadius' ) ? … : 3`, so 0 and '0' are both
   falsy and fall through to 3px. The value therefore has to be corrected after
   the fact, and GF's declaration lives in an inline block scoped by id, which
   no class selector can outrank. See ub_form_panel_style_settings(). */
.ub-formpanel .gform_wrapper.gform-theme {
	--gf-radius: 0px !important;
}

/* GF's wrapper carries its own vertical rhythm for a form sitting in body
   copy. Inside the card the card owns the padding. */
.ub-formpanel .gform_wrapper {
	margin: 0;
}

/* ── labels ─────────────────────────────────────────────────────────────── */

/* The uppercase micro-label is the design's field treatment and there is no
   API key for letter-spacing or text-transform, so it is set here. Font size
   and colour come through the API and are not restated. */
.ub-formpanel .gform_wrapper .gform-field-label {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 7px;
}

/* Sub-labels under a complex field's inputs — "First name", "Last name" — are
   the exception: they sit BELOW a control and read as help text, so uppercasing
   them would fight the field label above. */
.ub-formpanel .gform_wrapper .gform-field-label--type-sub {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
}

/* The consent checkbox's own label is a sentence, not a field name. */
.ub-formpanel .gform_wrapper .gform-field-label--type-inline,
.ub-formpanel .gform_wrapper .gfield_consent_label {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	line-height: 1.5;
}

/* The required marker sits INSIDE the label, so the uppercase rule above was
   turning GF's "(Required)" into a shouted (REQUIRED) competing with the field
   name. Reset to sentence case and stepped down.

   Kept as words rather than restyled into an asterisk: an asterisk means
   nothing to a screen reader without a legend explaining it, and GF's markup
   puts this text in the accessible name of the field for exactly that reason. */
.ub-formpanel .gform_wrapper .gfield_required {
	color: #b3261e;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	font-size: 0.72rem;
}

/* ── the name field ─────────────────────────────────────────────────────── */

/* First and Last belong on one row. GF's grid gives every column
   `inline-size: 100%` and only releases it to `flex: 1` for columns carrying
   `--size-auto`, which its name field does not emit — so the two halves of a
   person's name stack, taking as much vertical space as the four fields below
   them combined.

   Scoped to `gf_name_has_2`, which GF sets only when exactly two sub-inputs are
   visible. A name field also configured for prefix, middle and suffix keeps the
   stacked layout, because five controls abreast in a 480px card would be worse
   than the problem being fixed.

   The gutter is GF's own --gf-field-gap-x, inherited from the grid row, so this
   changes the wrapping and nothing else about the spacing. */
.ub-formpanel .gform_wrapper .ginput_complex.gf_name_has_2 > .gform-grid-col {
	flex: 1 1 0;
	inline-size: auto;
}

/* ── the step indicator ─────────────────────────────────────────────────── */

/* GF's steps are a numbered list with a coloured pill per step. The mockup
   uses two flat progress segments and a "Step 1 of 2" line instead, so the
   numbers are hidden and the labels become the segments: a filled bar for the
   step you are on, a grey one for the step you are not.

   Kept as GF's own markup rather than replaced, because the active class is
   what GF updates as the visitor moves between pages — reimplementing it would
   mean reimplementing the paging. */
.ub-formpanel .gform_wrapper .gf_page_steps {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 6px;
	margin: 0 0 26px;
	padding: 0;
	border: none;
}

.ub-formpanel .gform_wrapper .gf_step {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--text-light, #5b6a75);
	opacity: 1;
}

/* The 4px rule above each label is the progress segment. */
.ub-formpanel .gform_wrapper .gf_step::before {
	content: '';
	display: block;
	height: 4px;
	background: #e4e9eb;
	margin-bottom: 10px;
	transition: background var(--transition-dur, 300ms) var(--transition-ease, ease);
}

/* Completed steps stay filled. GF marks the current step `gf_step_active` and
   every earlier one `gf_step_completed`; styling only the active one would make
   the bar read as "which step" rather than "how far", and the first segment
   would appear to empty itself as the visitor made progress. */
.ub-formpanel .gform_wrapper .gf_step_active::before,
.ub-formpanel .gform_wrapper .gf_step_completed::before {
	background: var(--ub-purple, #592d82);
}

.ub-formpanel .gform_wrapper .gf_step_active .gf_step_label {
	color: var(--ub-purple, #592d82);
}

/* A completed step is context, not the current position, so it keeps the
   filled bar but not the emphasised label. */
.ub-formpanel .gform_wrapper .gf_step_completed .gf_step_label {
	color: var(--text-light, #5b6a75);
}

/* The circled number is redundant once the bar carries the progress, and it is
   the single most GF-looking element in the form. */
.ub-formpanel .gform_wrapper .gf_step_number {
	display: none;
}

.ub-formpanel .gform_wrapper .gf_step_label {
	display: block;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
}

/* ── the button row ─────────────────────────────────────────────────────── */

/* Reset GF's button chrome and hand these over to the theme's .btn scale, so
   the form's primary action is the same object as every other primary action
   on the page. Radius, padding and label size all come from the theme tokens. */
.ub-formpanel .gform_wrapper .gform-page-footer {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 26px 0 0;
	padding: 0;
}

.ub-formpanel .gform_wrapper .gform_next_button,
.ub-formpanel .gform_wrapper .gform_button {
	flex: 1 1 auto;
	justify-content: center;
	font-family: inherit;
	font-weight: 700;
	text-transform: none;
	border-radius: var(--btn-radius, 0px);
	padding: 14px 30px;
	border: none;
	cursor: pointer;
	transition: var(--transition, all 300ms ease);
}

/* Back is a quiet control, not a second button competing with Continue. */
.ub-formpanel .gform_wrapper .gform_previous_button {
	flex: 0 0 auto;
	background: none;
	border: none;
	box-shadow: none;
	font-family: inherit;
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--text-light, #5b6a75);
	padding: 14px 6px;
	cursor: pointer;
	transition: var(--transition, all 300ms ease);
}

.ub-formpanel .gform_wrapper .gform_previous_button:hover {
	color: var(--ub-purple, #592d82);
	background: none;
}

/* ── the confirmation ───────────────────────────────────────────────────── */

/* AJAX swaps the confirmation into the wrapper in place, so it inherits the
   card. It arrives as raw HTML from the form's confirmation setting and needs
   the card's type scale applied to whatever headings that contains. */
.ub-formpanel .gform_confirmation_message {
	color: var(--text-light, #5b6a75);
	line-height: 1.62;
}

.ub-formpanel .gform_confirmation_message h2 {
	font-size: 1.6rem;
	font-weight: 800;
	letter-spacing: -0.024em;
	color: var(--ub-purple, #592d82);
	margin-bottom: 12px;
	line-height: 1.14;
}

.ub-formpanel .gform_confirmation_message p {
	margin-bottom: 10px;
}

.ub-formpanel .gform_confirmation_message .btn {
	margin: 14px 8px 0 0;
}

/* ── validation ─────────────────────────────────────────────────────────── */

/* GF's error summary is a boxed list at the top of the form. Squared off and
   given the card's own left-rule treatment, matching .ub-formpanel-notice, so
   an error reads as part of this design rather than the plugin's. */
.ub-formpanel .gform_wrapper .gform_validation_errors {
	border-radius: 0;
	border: none;
	border-left: 4px solid #b3261e;
	box-shadow: none;
}


/* ==========================================================================
   Responsive
   ========================================================================== */

/* The form card is fixed-width beside a fluid copy column, so the break has to
   come while the copy column is still wide enough to set a headline — earlier
   than the site's 1100px chrome breakpoint. */
@media (max-width: 1180px) {
	.ub-formpanel--split .ub-formpanel-grid,
	.ub-formpanel--photo .ub-formpanel-grid {
		grid-template-columns: 1fr;
		gap: 44px;
		padding: 64px 0 72px;
	}

	/* The card is already second in source order, so stacking needs no
	   reordering — the argument is read before the ask. */
	.ub-formpanel--split .ub-formpanel-card,
	.ub-formpanel--photo .ub-formpanel-card {
		max-width: 620px;
	}

	/* Stacked, there is no card height to stretch to: a fixed shape instead. */
	.ub-formpanel-photo {
		flex: none;
		min-height: 0;
		aspect-ratio: 16 / 9;
		max-width: 620px;
	}

	.ub-formpanel-lede {
		max-width: none;
	}
}

@media (max-width: 640px) {
	.ub-formpanel-card {
		padding: 26px 22px 24px;
	}

	.ub-formpanel-stats {
		grid-template-columns: repeat(2, auto);
		gap: 24px 28px;
	}

	.ub-formpanel--split .ub-formpanel-grid,
	.ub-formpanel--photo .ub-formpanel-grid {
		padding: 48px 0 56px;
	}

	.ub-formpanel-photo {
		aspect-ratio: 4 / 3;
		margin-bottom: 28px;
	}

	/* Continue and Back stop sharing a row once the card is this narrow. */
	.ub-formpanel .gform_wrapper .gform-page-footer {
		flex-wrap: wrap;
	}

	.ub-formpanel .gform_wrapper .gform_next_button,
	.ub-formpanel .gform_wrapper .gform_button {
		flex: 1 1 100%;
	}
}

/* The count-up and reveal animations elsewhere respect this; the wedge and the
   button transitions here should too. */
@media (prefers-reduced-motion: reduce) {
	.ub-formpanel .gform_wrapper .gf_step::before,
	.ub-formpanel .gform_wrapper .gform_next_button,
	.ub-formpanel .gform_wrapper .gform_button,
	.ub-formpanel .gform_wrapper .gform_previous_button {
		transition: none;
	}
}