/* ─────────────────────────────────────────────────────────
   Webmaster Hangouts Sign Up — /webmaster-hangouts-sign-up/

   Two columns: copy + HubSpot form on the left, the series artwork on the
   right. The form itself inherits the site's HubSpot styling from
   contact.css via .ld-contact-form-block, so only layout lives here.
   ───────────────────────────────────────────────────────── */

.wms-signup { padding: 88px 48px 104px; background: var(--white); }
.wms-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	gap: 72px;
	align-items: center;
}

.wms-content { min-width: 0; }
.wms-h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.06;
	margin: 0 0 20px;
	color: var(--black);
	text-wrap: balance;
}
/* The original marked the first clause red and left the rest black. */
.wms-h1 em { font-style: normal; color: var(--red); }

.wms-lede {
	font-size: 17px;
	line-height: 1.7;
	color: var(--muted);
	margin: 0 0 34px;
	max-width: 56ch;
}

.wms-form { max-width: 520px; }
/* The shared form styling centres its own block on some pages; this one is
   left-aligned beside the artwork. */
.wms-form.ld-contact-form-block { margin-left: 0; margin-right: 0; }

.wms-media { min-width: 0; display: flex; justify-content: center; }
.wms-media img {
	width: 100%;
	max-width: 460px;
	height: auto;
	display: block;
}

@media (max-width: 1000px) {
	.wms-inner { grid-template-columns: 1fr; gap: 44px; }
	/* Artwork first would push the form below the fold on a sign-up page. */
	.wms-media { order: 2; }
	.wms-content { order: 1; }
	.wms-media img { max-width: 360px; }
}
@media (max-width: 640px) {
	.wms-signup { padding: 56px 20px 72px; }
	.wms-form { max-width: none; }
}