/*
Lamy LP — Mid-page compact lead form (Phase 8.9)
Sits between "What We Connect" and "Why Lamy" as an early-conversion bridge.
Inputs inherit .lp-final-form__input styling (Purple Aura + Gold Hairline
+ autofill HARD override) from final-form.css automatically.
*/

.lp-final-form-mid {
	/* Phase 8.9.3: replaced --purple-atmosphere (#1A0F2E - B channel 46
	   dominates R 26 / G 15, renders bluish on many monitors) with a
	   gentler purple-500 at 10% opacity. Keeps subtle vertical wash,
	   removes the blue cast user reported. */
	background: linear-gradient(180deg, var(--bg-section) 0%, rgba(168, 85, 247, 0.10) 100%);
	/* Phase 8.9.4: reduced from 80px (desktop) -> 64px. Mid-form is
	   sandwiched between What We Connect and Why Lamy; its padding
	   compounded with neighbors' paddings, creating excessive total gap.
	   Phase 8.9.8: further reduced 64px -> 48px desktop. */
	padding: 48px 24px;
	position: relative;
	overflow: hidden;
}

.lp-final-form-mid__container {
	max-width: 640px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}

/* Phase 29.1 (2026-06-15): when the mid-form success state mounts the
   Calendly inline embed (toggled by lp.js via this modifier class), widen
   the container from 640px -> 920px so Calendly renders its full
   "Select a Date & Time" two-column desktop view, matching the final
   form. On mobile the section's 16px side padding still wins, so the
   embed shrinks to viewport width — no responsive regression. */
.lp-final-form-mid__container--success {
	max-width: 920px;
}

.lp-final-form-mid__h2 {
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	/* Phase 11.2: gold (was --text-heading white). Mirrors the
	   "ניפגש לבדיקת התאמה" gold accent on the final-form H2 — same
	   gold var, same purpose: highlight the CTA question above the
	   compact mid-page form. */
	color: var(--gold-highlight);
	text-align: center;
	margin: 0 0 16px;
	line-height: 1.3;
}

.lp-final-form-mid__sub {
	font-size: 18px;
	color: var(--text-body);
	text-align: center;
	margin: 0 0 8px;
}

.lp-final-form-mid__micro {
	font-size: 15px;
	color: var(--text-meta);
	text-align: center;
	margin: 0 0 32px;
}

.lp-final-form-mid__form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.lp-final-form-mid__field label {
	display: block;
	font-size: 15px;
	color: var(--text-body);
	margin-bottom: 8px;
	font-weight: 500;
}

.lp-final-form-mid__submit {
	margin-top: 12px;
	width: 100%;
	/* Phase 9.4: button now matches the FULL WIDTH of the text inputs
	   above (which also use width: 100%). The Phase 9.3 max-width: 320px
	   + align-self: center cap was removed - boss wants input/button
	   visual parity, not a narrower centered button. */
	max-width: 100%;
}

@media (max-width: 480px) {
	.lp-final-form-mid {
		/* Phase 8.9.4: reduced from 64px -> 48px (mobile mid-form sandwich fix).
		   Phase 8.9.8: further reduced 48px -> 40px mobile. */
		padding: 40px 16px;
	}
}