:root {
	--brand-forest: #2b420e;
	--brand-forest-deep: #22350b;
	--brand-lime: #d5fe00;
	--white: #ffffff;
	--black: #000000;

	--font-display: "Bricolage Grotesque", system-ui, -apple-system, sans-serif;
	--font-body: "Nunito", system-ui, -apple-system, sans-serif;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100%;
	background: var(--brand-forest);
	color: var(--white);
	font-family: var(--font-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100dvh;
	display: flex;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.card {
	position: relative;
	flex: 1;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	background: var(--brand-forest);
	padding: clamp(24px, 4vw, 48px) clamp(20px, 3.5vw, 40px);
	overflow: hidden;
	min-height: 100dvh;
}

.content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(48px, 8vh, 96px);
	width: 100%;
	max-width: 720px;
}

.wordmark {
	display: inline-block;
	width: clamp(140px, 18vw, 180px);
	line-height: 0;
}

.wordmark img {
	width: 100%;
	height: auto;
	display: block;
	image-rendering: -webkit-optimize-contrast;
}

.headline {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(64px, 14vw, 140px);
	line-height: 0.88;
	letter-spacing: -0.04em;
	color: var(--brand-lime);
}

.signup {
	display: flex;
	flex-direction: column;
	gap: 24px;
	max-width: 480px;
}

.signup-heading {
	margin: 0;
	font-weight: 600;
	font-size: clamp(16px, 2vw, 20px);
	line-height: 1;
	color: var(--white);
}

.email-pill {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: clamp(16px, 4vw, 48px);
	background: var(--brand-forest-deep);
	border-radius: 100px;
	padding: 0 0 0 20px;
	width: 100%;
	max-width: 440px;
}

.email-pill input[type="email"] {
	flex: 1;
	min-width: 0;
	height: 44px;
	background: transparent;
	border: 0;
	outline: 0;
	color: var(--white);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.3;
	padding: 0;
}

.email-pill input[type="email"]::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.email-pill input[type="email"]:focus-visible {
	outline: 2px solid var(--brand-lime);
	outline-offset: 4px;
	border-radius: 4px;
}

.email-pill button {
	flex-shrink: 0;
	height: 44px;
	padding: 4px 24px;
	background: var(--white);
	color: var(--black);
	border: 0;
	border-radius: 1000px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	transition:
		transform 0.15s ease,
		opacity 0.15s ease;
}

.email-pill button:hover {
	transform: scale(1.02);
}

.email-pill button:active {
	transform: scale(0.98);
}

.email-pill button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.signup-status {
	margin: 0;
	min-height: 1.2em;
	font-size: 14px;
	line-height: 1.3;
	color: rgba(255, 255, 255, 0.85);
}

.signup-status[data-state="error"] {
	color: #ff8a8a;
}

.signup-status[data-state="success"] {
	color: var(--brand-lime);
}

/*
 * Faithful reproduction of Figma node 4778:81740 (parent "Shapes")
 * containing 4778:81650 (rotated child illustration).
 *
 * Reference geometry (Figma frame 1440 × 1024, card content 1360 × 928):
 *   Right column starts at card-content x = 1360 - 1049.785 = 310.215
 *   Rotor wrapper inside right column:
 *     left = 282.79 (relative to right column, top = 0)
 *     size: 1199.221 × 1129.061
 *   Illustration inside rotor (flex-centered, rotated 9.86°):
 *     1049.771 × 963.585
 *
 * Sizing relative to .shapes (which equals card content area via inset:0).
 * Height-driven so the composition keeps its Figma proportions on any
 * viewport — wide-screens won't blow the shapes up unboundedly.
 *
 *   Rotor height: 1129.061 / 928 ≈ 121.66% of .shapes height
 *   Rotor aspect: 1199.221 / 1129.061 ≈ 1.0621
 *   Rotor top:    0 (aligns with right column top, overflows below)
 *   Rotor right overflow past card edge at the Figma desktop width:
 *     (310.215 + 282.79 + 1199.221) - 1360 = 432.226 → 31.78% of .shapes width
 *   On ultrawide viewports, cap that overflow so the artwork keeps
 *   roughly the same visual weight instead of drifting off-screen.
 *   Image width inside rotor: 1049.771 / 1199.221 ≈ 87.54%
 */
.shapes {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}

.shapes__rotor {
	position: absolute;
	right: clamp(-440px, -27vw, -200px);
	top: 0;
	/*
   * Match Figma desktop (frame 1440×1024, rotor 1199×1129):
   *   height ≈ 110% of card, width derived via aspect-ratio (~117%).
   *   Right overflow ~27vw mirrors the (1440 − 1832)/1440 = 27.2% the
   *   Figma rotor extends past the canvas right edge.
   * Cap width at 85% so on narrow-but-tall viewports the rotor still
   * leaves the headline column clear.
   */
	height: 110%;
	max-width: 85%;
	aspect-ratio: 1199.221 / 1129.061;
	display: flex;
	align-items: center;
	justify-content: center;
}

.shapes__rotor img {
	width: 87.54%;
	height: auto;
	transform: rotate(9.86deg);
	transform-origin: center;
	display: block;
}

/*
 * Mobile layout (Figma node 4805:79169, frame 390×844):
 *   Topbar:    px=24, py=10/24, wordmark 117.333 × 16
 *   Content:   px=24, pt=80, pb=48, gap=64 between headline & signup,
 *              flex-col, justify-end (anchors to bottom)
 *   Headline:  84px, line-height 0.86, letter-spacing -0.04em
 *   Heading:   16px semibold
 *   Pill:      full-width, justify-between (text left, button right)
 *   Shapes:    absolute within content container,
 *              left=75 (19.23%), top=-89px,
 *              rotor 584.702 × 552.234 (aspect 1.0588),
 *              rotated -11.29° with image 503.89 × 462.521 inside
 *              → image-in-rotor width = 503.89 / 584.702 = 86.18%
 */
/*
 * Switch to the stacked layout for phones and portrait tablets. Narrow
 * landscape viewports keep the desktop composition because the horizontal
 * split reads better when height is constrained.
 */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1180px) {
	.card {
		flex-direction: column;
		justify-content: flex-start;
		padding: 0;
	}

	.content {
		flex: 1;
		flex-direction: column;
		justify-content: flex-end;
		gap: 64px;
		width: 100%;
		max-width: none;
		padding: 80px 24px 48px;
		position: relative;
		z-index: 2;
	}

	.wordmark {
		position: absolute;
		top: 24px;
		left: 24px;
		width: 117px;
		z-index: 3;
	}

	.headline {
		font-size: clamp(56px, 21.5vw, 96px);
		line-height: 0.86;
		letter-spacing: -0.04em;
	}

	.signup {
		width: 100%;
		max-width: none;
		gap: 24px;
	}

	.signup-heading {
		font-size: 16px;
	}

	.email-pill {
		max-width: none;
		width: 100%;
		justify-content: space-between;
		gap: 8px;
	}

	/* Shapes sit between the topbar and headline, mirroring Figma. */
	.shapes {
		inset: 0;
		z-index: 1;
		opacity: 1;
	}

	.shapes__rotor {
		right: auto;
		bottom: auto;
		height: auto;
		aspect-ratio: 584.702 / 552.234;
		width: clamp(440px, 150vw, 720px);
		left: 19.23%;
		/*
     * Figma: rotor at content-container y=-89, container starts
     * after topbar (~109px from card top), so rotor at card y≈20.
     * Express as a small positive % so it pins below the wordmark
     * while keeping the bottom above the "Coming" headline.
     */
		top: 2%;
		transform: translateY(0);
	}

	.shapes__rotor img {
		width: 86.18%;
		transform: rotate(-11.29deg); /* NEGATIVE rotation per mobile spec */
	}
}

@media (min-width: 700px) and (orientation: portrait) and (max-width: 1180px) {
	.content {
		padding: clamp(88px, 8vw, 112px) clamp(28px, 5vw, 56px)
			clamp(48px, 6vw, 72px);
	}

	.wordmark {
		left: clamp(28px, 5vw, 56px);
		top: clamp(28px, 4vw, 44px);
		width: clamp(132px, 18vw, 180px);
	}

	.headline {
		font-size: clamp(96px, 13vw, 140px);
	}

	.signup {
		max-width: 560px;
	}

	.shapes__rotor {
		left: auto;
		right: clamp(-260px, -18vw, -120px);
		top: 0;
		width: clamp(680px, 82vw, 900px);
		transform: none;
	}
}

@media (min-width: 481px) and (max-width: 699px) and (orientation: portrait) {
	.shapes__rotor {
		left: auto;
		right: clamp(-72px, -10vw, -40px);
		top: clamp(16px, 3vh, 48px);
		max-width: 480px;
		width: min(72vw, 38vh);
	}
}

@media (min-width: 769px) and (max-width: 1180px) and (orientation: landscape) {
	.shapes__rotor {
		right: clamp(-560px, -46vw, -420px);
	}
}

@media (min-width: 900px) and (orientation: portrait) and (max-width: 1180px) {
	.content {
		padding-bottom: clamp(72px, 7vh, 104px);
	}

	.headline {
		font-size: clamp(104px, 11vw, 124px);
	}

	.signup {
		max-width: 540px;
	}

	.shapes__rotor {
		top: 0;
		width: clamp(760px, 74vw, 900px);
	}
}

@media (max-width: 480px) {
	.headline {
		font-size: clamp(56px, 22vw, 84px);
	}
}

/*
 * Phone portrait — matches Figma node 4805:79169 (390×844): rotor sized to
 * dominate the upper half. On Figma-scale heights it's anchored at the
 * Figma left position (~25%, floored at 100px so the wordmark stays clear
 * on narrow widths). Short heights (≤779) shrink the rotor and right-anchor
 * it so it doesn't crash into the bottom-anchored headline + form.
 */
@media (max-width: 480px) and (orientation: portrait) {
	.shapes__rotor {
		left: max(100px, 25%);
		right: auto;
		max-width: none;
		width: clamp(420px, 128vw, 560px);
		top: 0;
	}
}

@media (max-width: 480px) and (orientation: portrait) and (max-height: 779px) {
	.shapes__rotor {
		left: auto;
		right: clamp(-100px, -24vw, -56px);
		width: min(110vw, 42vh, 480px);
		top: clamp(8px, 2vh, 24px);
	}
}

@media (max-width: 340px) {
	.email-pill {
		padding-left: 16px;
	}

	.email-pill input[type="email"] {
		height: 42px;
		font-size: 12px;
	}

	.email-pill button {
		height: 42px;
		padding: 4px 18px;
		font-size: 13px;
	}
}

@media (orientation: landscape) and (max-width: 1024px) and (max-height: 600px),
	(orientation: landscape) and (max-width: 768px) and (max-height: 640px) {
	.card {
		flex-direction: row;
		align-items: stretch;
		padding: clamp(12px, 4vh, 24px) clamp(20px, 4vw, 36px);
	}

	.content {
		justify-content: space-between;
		gap: clamp(10px, 4vh, 24px);
		max-width: min(64vw, 420px);
		padding: 0;
	}

	.wordmark {
		position: static;
		width: clamp(112px, 16vw, 150px);
	}

	.headline {
		font-size: clamp(56px, 10.8vw, 96px);
		line-height: 0.84;
	}

	.signup {
		max-width: min(100%, 390px);
		gap: clamp(10px, 3vh, 18px);
	}

	.signup-heading {
		font-size: clamp(14px, 2.2vw, 18px);
	}

	.email-pill {
		max-width: min(100%, 390px);
		padding: 0 0 0 18px;
	}

	.email-pill input[type="email"] {
		height: clamp(38px, 10vh, 40px);
		font-size: clamp(11px, 2.2vw, 13px);
	}

	.email-pill button {
		height: clamp(38px, 10vh, 40px);
		padding: 4px clamp(16px, 3vw, 20px);
	}

	.shapes__rotor {
		right: clamp(-260px, -31.78vw, -160px);
		left: auto;
		top: 0;
		height: 125%;
		width: auto;
		max-width: 56%;
		aspect-ratio: 1199.221 / 1129.061;
		transform: none;
	}

	.shapes__rotor img {
		width: 87.54%;
		transform: rotate(9.86deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.email-pill button {
		transition: none;
	}
	.email-pill button:hover,
	.email-pill button:active {
		transform: none;
	}
}