/*
 * The survey section: heading, one line of lede, the white card, and the closing line under it.
 *
 * Measured: heading at 60px, 51px to the lede, 60px to the card, card 1226 x 616 with a 12px
 * radius and a wide soft shadow on the cream.
 */

.register {
	/* Matches the proof strip's own lead-in, so the strip sits evenly between gallery and survey. */
	padding-block-start: var(--rhythm-md);
	padding-block-end: var(--rhythm-xl);
}

.register__heading {
	margin-inline: auto;
	max-width: var(--container-text);
	font-size: var(--font-9);
	font-weight: var(--weight-medium);   /* the plain run steps back; the marker phrase leads */
	text-align: center;
	text-wrap: auto;                     /* balance would break through the marker phrase; `normal` is not a valid value */
}

.register__lede {
	margin-block-start: var(--rhythm-xs);
	margin-inline: auto;
	max-width: 60ch;
	color: var(--color-text-muted);
	text-align: center;
}

/* The lead phrase carries the offer, so it takes the heading colour as well as the weight: bold
   alone inside muted text reads as a rendering accident rather than emphasis. */
.lede__lead {
	color: var(--color-heading);
	font-weight: var(--weight-heading);
}

.card {
	margin-block-start: var(--rhythm-sm);
	background-color: var(--bnk-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;

	/*
	 * The card is white while the page is cream, so it resets the surface tokens rather than
	 * inheriting them. Without this a control border tuned for cream would be measured against
	 * the wrong ground.
	 */
	--color-bg: var(--bnk-white);
	--color-bg-quiet: var(--bnk-cream);

	color: var(--color-text);
}

/*
 * The card follows the step it is showing.
 *
 * Steps are not the same height: step 2 has thirteen options and needs about 820px where step 1
 * needs 550. Pinning the card to the tallest leaves a third of it empty on most steps; letting it
 * size naturally makes it jump. So survey.js writes the measured height onto min-height and this
 * transition eases between them, which reads as the card breathing rather than resizing.
 *
 * The floor is what a short step gets, and it is also what the card is before the script runs.
 * The mockup's 616px box was drawn empty, before there was a form to put in it.
 */
@media (min-width: 60rem) {
	.card {
		min-height: 40rem;
		transition: min-height var(--duration-slow) var(--ease-out);
	}
}

/* Closes the section off after the card, so the last thing read is an invitation rather than a
   submit button. */
.register__outro {
	margin-block-start: var(--rhythm-sm);
	margin-inline: auto;
	max-width: 52ch;
	color: var(--color-text-muted);
	text-align: center;
	text-wrap: balance;
}