/* Signup form — Klaviyo-wired email subscription. Composed of a small
   intro line + an input + submit pair (.signup__field) + a status note
   that the JS in js/signup.js writes into. Scoped to render on the dark
   gradient sections (white input panel, .button--primary submit). */

.signup {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-04);
	width: 100%;
	max-width: 40rem;
}

.signup__intro {
	margin: 0;
	font-family: "Maax Medium";
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
	color: var(--color-gray-mid);
}

.signup__field {
	display: flex;
	align-items: stretch;
	gap: 0;
	width: 100%;
	transition: opacity 0.25s ease;
}

.signup__field--disabled {
	opacity: 0.5;
}

.signup__input {
	flex: 1;
	min-width: 0;
	padding: 1rem 1.25rem;
	border: 0;
	background: var(--color-white);
	color: var(--color-text);
	font-family: Maax;
	font-size: 1rem;
	line-height: 1.2;
}

.signup__input::placeholder {
	color: var(--color-text-2);
	opacity: 1;
}

.signup__input:focus {
	outline: 2px solid var(--color-white);
	outline-offset: 2px;
}

.signup__submit {
	flex: 0 0 auto;
	padding: 1rem 1.5rem;
	border: 2px solid var(--color-white);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.875rem;
	white-space: nowrap;
}

.signup__note {
	min-height: 1.5em;
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--color-gray-mid);
	text-align: center;
}

.signup__note--error {
	color: #ff9a9a; /* live status; outside the grayscale UI rule by design. */
}

.signup__note--success {
	color: #9affc4; /* live status; outside the grayscale UI rule by design. */
}

@media (max-width: 640px) {

	.signup__field {
		flex-direction: column;
		gap: var(--space-03);
	}

	.signup__submit {
		width: 100%;
	}
}