:root {
	--leader-height: 200px;
	--color-highlight: var(--color-yellow);
}

/* Same prose spacing as contact.css, so the intro content reads
   identically to every other leader+prose page on the site. */
.prose h2 {
	margin-top: 0;
}
.prose p {
	margin-bottom: var(--spacing-6);
}

/* Everything below is specific to Apply Online: it's the one page
   presented full-width instead of the leader/sidebar-form split
   every other page (including Contact) uses, because a 16-field
   application form doesn't fit a sidebar column. */

.apply-intro {
	max-width: var(--container-prose);
}

/* .container .contact-form gets `margin-top: -10rem !important` at
   desktop from site/forms.css, meant to float a short sidebar form
   over a hero image. With the form full-width below the intro text
   instead of beside it, that would pull it up over the intro
   content instead — cancel it here. */
.container .contact-form {
	margin-top: 0 !important;
}

.apply-form-note {
	font-size: var(--text-sm);
	color: var(--prose-color-text);
	opacity: 0.75;
	margin-top: var(--spacing-2);
}

.contact-form input[type="file"] {
	background: var(--color-white);
	border-radius: var(--rounded);
	padding: var(--spacing-2);
	font-size: var(--text-sm);
}

@media screen and (min-width: 40rem) {
	:root {
		--leader-height: 300px;
	}
}

@media screen and (min-width: 72rem) {
	.contact-form {
	    margin: var(--spacing-10) 0;
	}
	/* Apply Online has far more fields than Contact/Estimate's short
	   forms, so it earns a third column at desktop instead of the
	   site-wide two-column form grid used everywhere else. */
	.contact-form form {
		grid-template-columns: repeat(3, 1fr);
	}
	.contact-form .form-full {
		grid-column: 1 / -1;
	}
}