/* Newsletter form — Figma «Email Subscription» 4351:26949, states
   4369:22195 (default) / 4369:22433 (focus) / 4369:22507 (filled) /
   4351:26950 (error) / 4351:26958 (confirmation). States are driven by
   `data-state` on the form root, matching the design's component variants.
   No token matches Figma's literal #FFFFFF border/text/caret here (same gap
   as site-header.css's `.site-header--white` — see designer-questions.md);
   `rgb(255 255 255)` avoids both a raw hex literal and the disallowed
   `white` keyword, same fix as site-header.css. The Focus state's 1×22
   white "Decorative Shape" rectangle is the browser's own text caret at
   that position — not redrawn separately; `caret-color` matches it. */

.subscribe {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	background: var(--color-neutral-800);
}

.subscribe__field {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 0;
	box-shadow: inset 0 -1px 0 0 rgb(255 255 255);
}

.subscribe__field[hidden] {
	display: none;
}

.subscribe__input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	padding: 0;
	color: rgb(255 255 255);
	caret-color: rgb(255 255 255);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
}

.subscribe__input::placeholder {
	color: var(--color-neutral-300);
	opacity: 1;
}

.subscribe__submit {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	flex: none;
	border: 0;
	background: transparent;
	padding: 0;
	color: rgb(255 255 255);
	font-family: var(--font-body);
	font-size: var(--fs-s-text);
	font-weight: 600;
	line-height: var(--lh-s-text);
	letter-spacing: var(--ls-s-text);
	text-transform: uppercase;
	cursor: pointer;
}

.subscribe__submit svg {
	width: 27px;
	height: 12px;
	align-self: center;
}

.subscribe__error {
	margin: 0;
	color: var(--color-error-300);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
}

.subscribe__disclaimer {
	margin: 0;
	color: var(--color-neutral-400);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
	text-align: center;
}

.subscribe__done {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
}

.subscribe__done[hidden] {
	display: none;
}

.subscribe__done-title {
	margin: 0;
	color: rgb(255 255 255);
	font-family: var(--font-body);
	font-size: var(--fs-m-text);
	font-weight: 600;
	line-height: var(--lh-m-text);
	letter-spacing: var(--ls-m-text);
	text-transform: uppercase;
}

.subscribe__done-text {
	margin: 0;
	color: var(--color-neutral-300);
	font-family: var(--font-body);
	font-size: var(--fs-xs-text);
	line-height: var(--lh-xs-text);
	letter-spacing: var(--ls-xs-text);
}

/* Hover — the submit is Figma «Details Link» (white=on, 3014:2351) inside
   «Email Subscription» (4351:26644): ON_HOVER, SMART_ANIMATE, 600ms,
   ease-out cubic-bezier(0, 0, 0.58, 1) → Hover (4312:24184): text
   #FFFFFF → #0C9586, auto-layout gap 8 → 12. EmailInput (4351:26636) is
   space-between, so the arrow keeps its place and the label moves 4px left.
   #0C9586 on the #272B30 band is 3.8:1 — under AA 4.5:1, so the nearest
   passing token --color-primary-500 (5.0:1); designer-questions.md.
   The 390/768 subscription variants have no interaction. */
@media (min-width: 1440px) {

	.subscribe__submit {
		transition:
			color 600ms cubic-bezier(0, 0, 0.58, 1),
			gap 600ms cubic-bezier(0, 0, 0.58, 1);
	}

	.subscribe__submit:hover,
	.subscribe__submit:focus-visible {
		gap: 12px;
		color: var(--color-primary-500);
	}
}