/* V35 (Stage B Wave 8, 2026-08-07): /contact/ page. Shares the canonical
   ~1180px shell every other Standard-tier masthead page uses (Directory,
   Free Tools, My Account). The form card and "report a safety concern"
   card sit side by side on wide viewports and stack on narrow ones -- the
   safety-report route stays visible without competing with the form for
   primary attention. */
.hp-contact-page {
	width: min( 100% - var( --hp-shell-gutter ) * 2, var( --hp-shell-max-width ) );
	margin: 0 auto clamp( 3rem, 8vw, 5rem );
}

.hp-contact-page__body {
	display: grid;
	grid-template-columns: minmax( 0, 2fr ) minmax( 0, 1fr );
	gap: var( --hp-space-6 );
	align-items: start;
}

@media ( max-width: 800px ) {
	.hp-contact-page__body {
		grid-template-columns: 1fr;
	}
}

.hp-contact-page__urgent-card h2 {
	margin-top: 0;
	font-size: 1.05rem;
}

.hp-contact-page__urgent-card p {
	color: var( --hp-color-body );
}

.hp-contact-form__form {
	display: flex;
	flex-direction: column;
	gap: var( --hp-space-4 );
}

/* Bot-detection field: kept in the DOM and tab-reachable-free (tabindex="-1")
   rather than display:none, since some spam bots skip fields that are
   display:none but still fill in ones only hidden by position. */
.hp-contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.hp-contact-form__hint {
	margin: 0;
	font-size: 0.85rem;
	color: var( --hp-color-body );
}