/* Request a Demo — headline, sub copy and a HubSpot form in a raised card.

   Contrast, computed against the card's own ground (#FFFFFF) rather than
   assumed to hold from Warm White. Every pairing improves slightly on the
   canvas figures, because pure white is the brighter ground:

     ink on white          17.40:1  (16.67 on Warm White)  AAA body
     slate on white         5.78:1  (5.53)                 AA  body
     evergreen on white     6.60:1  (6.32)                 AA  body + focus
     error on white         6.54:1                         AA  body
     stone-deep on white    3.34:1  (3.20)                 AA  non-text
     ink on Vivid Green     5.22:1                         AA  submit label

   The 3.34:1 border is what defines an input here, because the field fill and
   the card are the same white — see the reconciliation block below.

   Card against its band is NOT a contrast requirement (no information is
   carried by the edge) but it is a legibility one, and it is why the section
   defaults to Warm:

     white on Sand         1.15:1
     white on Cloud        1.10:1
     white on Warm White   1.04:1   — the card edge effectively disappears */

section.request-demo {

	.card {
		background-color: var(--surface-raised);
		border-radius: var(--rad);
		box-shadow: var(--shadowRaised);

		/* The 72px slab inset, corroborated across sections but with no token
		   of its own — flagged in the hand-back. A percentage, not vw: it
		   measures the card's containing block, so it excludes the scrollbar
		   and stops growing once max-width has stopped the box. The vertical
		   pair stays in vw on purpose, because a percentage on padding-block
		   resolves against WIDTH and would tie the card's height to the page. */
		padding: clamp(40px, 6vw, 72px) clamp(24px, 9%, 72px);
	}

	.body {
		text-align: center;

		/* The measure the copy reads at, independent of how wide the author
		   sets the card. Centred text past ~66ch stops tracking line to line. */
		max-width: 52ch;
		margin-inline: auto;
	}

	.eyebrow {
		color: var(--ink-accent);
		margin: 0 0 16px;
	}

	.rich-heading {
		/* Capped by the theme-wide Playfair ruling — no Playfair above its class’s ruled weight (400; .heading2 450),
		   emphasis included. This stepped to --display when the heading sat
		   at --medium; both rungs are gone with the cap. */
		--emphasis-weight: inherit;
		--emphasis-color: inherit;
		margin: 0 0 16px;
	}

	.lead {
		color: var(--ink-secondary);
		margin: 0;

		> p:last-child { margin-bottom: 0; }
	}

	/* --- The form --- */

	.form-wrap {
		margin-top: 40px;

		/* Inputs are full-bleed to the card's inner width; the copy above keeps
		   its own narrower measure. Both are centred on the same axis. */
		text-align: left;
	}

	/* Reconciling _forms.css to a pure white ground.

	   That file styles inputs on the Warm White canvas: the field fill and the
	   lifted floating-label chip are both var(--surface). On this card both
	   would read as a warm rectangle against white — most visibly the chip,
	   which straddles the input's top border and so sits half on the card.

	   The chip has to match the ground it overlaps, and it overlaps BOTH, so
	   the fill and the card have to agree. Setting the field fill to the card
	   white is what makes the chip correct, and it costs nothing: the 1px
	   --line-functional border still clears non-text contrast at 3.34:1 on
	   this ground, up from 3.20:1 on the canvas.

	   Scoped to this module. css/elements/* is shared and not ours to edit. */
	.form-wrap {
		input[type=text],
		input[type=search],
		input[type=email],
		input[type=password],
		input[type=tel],
		input[type=number],
		select,
		textarea {
			background-color: var(--surface-raised);
		}

		.hs-form-field:not(.hs-fieldtype-booleancheckbox) {
			&:has(> .input > input:focus),
			&:has(> .input > select:focus),
			&:has(> .input > input:not(:placeholder-shown)),
			&:has(> .input > select:not(:placeholder-shown)) {
				label:not(.hs-error-msg) {
					background-color: var(--surface-raised);
				}
			}
		}

		/* _forms.css pads .actions for a form standing on its own. Inside a
		   card the bottom half of that padding doubles up with the card's. */
		.actions {
			margin-bottom: 0;
			padding-bottom: 0;
		}

		.hs-button {
			width: 100% !important;

			@media (min-width: 768px) {
				width: auto !important;
			}
		}
	}

	/* Editor-only notice when no form is picked. Never reaches a live page. */
	.form-empty {
		margin: 40px 0 0;
		padding: 16px 20px;
		border: 1px dashed var(--line-functional);
		border-radius: var(--rad);
		color: var(--ink-secondary);
		font-family: var(--inter);
		font-size: 1.4rem;
		text-align: center;
	}
}