/* Lead magnet landing — Figma 64:975 / 67:1341 / 67:1576.
   Content 608 at x104/y203 (64:984); form 504 at x832/y244 (64:983) on a 704-wide light half-sheet (64:977).
   Mobile — Figma 69:6362: centred content from y108 (icon 64, title 32/36, text 14/21, chip 39px photo),
   then the form on a full-width light sheet (6px inset, radius 24, title 26/32 at +32). */
.magnet { position: relative; overflow: hidden; padding-block: 108px 48px; }
.magnet__wave {
	position: absolute;
	left: -102px;
	top: 593px;
	width: 1744px;
	max-width: none;
	height: auto;
	pointer-events: none;
}
.magnet__grid { position: relative; display: grid; gap: 48px; }
/* Grid items default to min-width:auto; the Fluent form would otherwise widen the column past the screen. */
.magnet__grid > * { min-width: 0; }

.magnet__content { display: grid; gap: 32px; justify-items: center; text-align: center; }
.magnet__icon { width: auto; height: 62px; }
.magnet__title { max-width: 608px; line-height: 1.125; }
.magnet__text { max-width: 504px; font-size: 0.875rem; line-height: 1.5; }

.person {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 8px 16px 8px 12px;
	background: var(--c-light);
	border-radius: var(--radius-md);
}
.person__photo { width: 39px; height: 40px; object-fit: cover; }
.person__name { font-family: var(--font-head); font-size: 1rem; line-height: 1.25; letter-spacing: 0; }

.magnet__aside {
	display: grid;
	gap: 24px;
	justify-items: start;
	grid-template-columns: minmax(0, 1fr);
	/* Full-width sheet: 6px from the screen edge, content back on the 24px gutter. */
	margin-inline: calc(6px - var(--gutter));
	padding: 32px calc(var(--gutter) - 6px);
	background: var(--c-light);
	border-radius: var(--radius-lg);
}
.magnet__form-title { max-width: 504px; font-size: 1.625rem; line-height: 32px; letter-spacing: -0.02em; }

/* Magnet form: newsletter consent with GDPR link, partners consent, note. */
.signup__gdpr { font-style: italic; color: var(--c-gray); }
a.signup__gdpr:hover { color: var(--c-black); }
.signup__note { padding-left: 31px; font-size: 0.75rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; color: var(--c-gray); opacity: 0.8; }

@media (min-width: 768px) {
	.magnet__text { font-size: 1rem; }
	.person__photo { width: 54px; height: 56px; }
	.person__name { font-size: 1.25rem; line-height: 1.2; }
	.magnet__aside { margin-inline: 0; padding: 32px 20px; }
	.magnet__form-title { font-size: 1.75rem; line-height: 1.2; }
}
@media (min-width: 1024px) {
	.magnet { min-height: 1024px; padding-block: 203px 80px; }
	.magnet__content { justify-items: start; text-align: left; }
	.magnet__title { line-height: 1.05; }
	.magnet::before {
		content: "";
		position: absolute;
		top: 12px;
		right: 12px;
		bottom: 12px;
		left: calc(50% + 4px);
		background: var(--c-light);
		border-radius: var(--radius-lg);
	}
	.magnet__grid {
		grid-template-columns: minmax(0, 608fr) minmax(0, 504fr);
		column-gap: clamp(48px, 8.4vw, 120px);
		align-items: start;
	}
	.magnet__content { gap: 48px; }
	.magnet__icon { height: auto; }
	.magnet__aside { padding: 41px 0 0; background: none; border-radius: 0; }
	.magnet__form-title { font-size: 2.5rem; }
}