/**
 * Component: Waitlist CTA — styles
 * Figma: nodes 11409:5846 (CTA) + 11409:5898 (gallery).
 * Scoped to .waitlist-cta (BEM root). No global selectors.
 */

/* ── Section root ─────────────────────────────────────────── */
.waitlist-cta {
	background-color: var(--color-bg);
	overflow: hidden;
}

/* ── CTA inner ───────────────────────────────────────────── */
.waitlist-cta__inner {
	max-width: 100%;
	margin-inline: auto;
	padding: 7.5rem clamp(1.5rem, 9vw, 8.125rem) 4rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-xl);
	text-align: center;
}

/* ── Header block ────────────────────────────────────────── */
.waitlist-cta__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.waitlist-cta__label {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-cta-blue);
	margin: 0;
}

.waitlist-cta__heading {
	font-family: var(--font-title);
	font-size: clamp(2rem, 3.5vw, 3rem); /* 48 px at 1440 px */
	font-weight: 600; /* SemiBold — Figma spec */
	line-height: 1.2;
	letter-spacing: -0.96px;
	color: var(--color-text-pri);
	margin: 0;
}

.waitlist-cta__subhead {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 26px; /* not 1.6/32px — Figma specs this text at 26px, distinct from the 32px label style */
	color: var(--color-text-sec);
	margin: 0;
}

/* ── Email form ──────────────────────────────────────────── */
.waitlist-cta__form {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--space-md);
	width: 100%;
	max-width: 520px;
}

/* Double-class ancestor (0,2,0) beats GP's input[type="email"] (0,1,1) */
.waitlist-cta .waitlist-cta__email {
	flex: 1;
	min-width: 0;
	padding: 0.875rem 1.5rem;
	background: var(--color-bg-3);
	border: 1px solid var(--color-bg-3);
	border-radius: var(--radius-6xl);
	color: var(--color-text-pri);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

.waitlist-cta .waitlist-cta__email::placeholder {
	color: var(--color-text-ter);
}

.waitlist-cta .waitlist-cta__email:focus {
	border-color: var(--color-brand);
}

/* Override browser autofill background */
.waitlist-cta .waitlist-cta__email:-webkit-autofill,
.waitlist-cta .waitlist-cta__email:-webkit-autofill:hover,
.waitlist-cta .waitlist-cta__email:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--color-bg-3) inset;
	-webkit-text-fill-color: var(--color-text-pri);
}

.waitlist-cta__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-shrink: 0;
	width: auto;
	height: 47px;
	padding: 8px 16px 8px 24px;
	background: var(--color-cta);
	color: var(--color-text-inv);
	border: none;
	border-radius: var(--radius-6xl);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700; /* Bold — matches Figma and the site_header/contact_modal CTA convention */
	line-height: 1.5;
	cursor: pointer;
	transition: background 0.2s ease;
}

.waitlist-cta__submit:hover,
.waitlist-cta__submit:active {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
}

.waitlist-cta__submit:focus-visible {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.waitlist-cta__submit-icon {
	display: flex;
	align-items: center;
}

.waitlist-cta__submit-icon svg {
	width: 7px;
	height: 12px;
}

/* ── App screenshot gallery ──────────────────────────────── */
.waitlist-cta__gallery {
	width: 100%;
	overflow: hidden;
	/* Fade left + right edges so gallery dissolves into background */
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}

.waitlist-cta__gallery-img {
	display: block;
	width: 1980px;
	max-width: none; /* override GP's global img { max-width: 100% } */
	margin-left: 50%;
	transform: translateX(-50%);
	height: auto;
	pointer-events: none;
}

/* ── ≤1024px — switch to fully responsive ────────────────── */
@media (max-width: 1024px) {
	.waitlist-cta__gallery-img {
		width: 100%;
		margin-left: 0;
		transform: none;
	}
}

/* ── Tablet ≤ 900 px ─────────────────────────────────────── */
@media (max-width: 900px) {
	.waitlist-cta__inner {
		padding-block: 4rem 3rem;
	}

	/* label + subhead stay at their desktop 20px — Figma's Desktop-1440 and
	   Mobile-375 frames both spec 20px for this text, so it doesn't shrink. */

	.waitlist-cta__form {
		flex-direction: column;
		max-width: 100%;
	}

	.waitlist-cta .waitlist-cta__email {
		width: 100%;
	}

	.waitlist-cta__submit {
		width: 100%;
		justify-content: center;
	}
}

/* ── Mobile ≤ 480 px ─────────────────────────────────────── */
@media (max-width: 480px) {
	.waitlist-cta__inner {
		padding-block: 3rem 2.5rem;
		padding-inline: 1.25rem;
		gap: 2rem;
	}

	.waitlist-cta__heading {
		font-size: 1.75rem; /* 28px — Figma Mobile-375 H2 spec (was 2rem/32px) */
		letter-spacing: -0.5px;
	}

	/* subhead + label stay at their desktop 20px — Figma Mobile-375 keeps them unchanged */

	.waitlist-cta__form {
		max-width: 100%;
	}

	.waitlist-cta__gallery-img {
		width: 140%;
		max-width: none;
		margin-left: 50%;
		transform: translateX(-50%);
	}
}