/* FlockSeed landing page. Standalone — shares no cascade with the admin app's Bootstrap/Radzen styling. */

:root {
	/* The brand palette. */
	--bg: #0d0f0c;
	--text: #f4f2ec;
	--text-muted: #9aa199;
	--accent: #d9a441;
	--accent-ink: #1a1206; /* text on accent */
	--leaf: #7fae45;
	--leaf-dim: #4c7432;

	/* Derived from the palette, so a palette change carries through: surfaces and lines are the
	   background lifted towards the text colour, and hover lightens the accent. */
	--bg-raised: color-mix(in oklab, var(--text) 6%, var(--bg));
	--bg-inset: color-mix(in oklab, var(--text) 11%, var(--bg));
	--border: color-mix(in oklab, var(--text) 17%, var(--bg));
	--placeholder: color-mix(in oklab, var(--text-muted) 65%, var(--bg));
	--accent-strong: color-mix(in oklab, var(--accent), var(--text) 18%);

	--radius: 14px;
	/* One container for every section. Grids span it; text blocks stop at --measure inside it, so
	   the page has exactly two right edges: the container's and the text's. */
	--container: 1200px;
	--measure: 680px;
	--header-h: 68px;
	--font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

img { max-width: 100%; display: block; }

.wrap {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 24px;
}

.muted { color: var(--text-muted); }

h1, h2, h3 { line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 650; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 16px; }

/* ---------- header ---------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand:hover { color: inherit; }

.brand-mark {
	display: block;
	width: 32px;
	height: 32px;
	flex: none;
}

.brand-name { font-weight: 650; letter-spacing: -0.02em; font-size: 1.1rem; }

.site-nav { display: flex; align-items: center; gap: 26px; font-size: 0.95rem; }
.site-nav a { color: var(--text-muted); }
.site-nav a:hover { color: var(--text); }
.site-nav a.btn { color: var(--accent-ink); }

/* ---------- buttons ---------- */

.btn {
	display: inline-block;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 600;
	font-size: 1rem;
	font-family: inherit;
	border: 0;
	border-radius: 10px;
	padding: 13px 22px;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	white-space: nowrap;
}

.btn:hover { background: var(--accent-strong); color: var(--accent-ink); transform: translateY(-1px); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-block { width: 100%; text-align: center; }

/* ---------- sections ---------- */

section { padding: 88px 0; border-top: 1px solid var(--border); }
section.hero { border-top: 0; }

.section-head { max-width: var(--measure); margin-bottom: 48px; }
.section-head p { color: var(--text-muted); font-size: 1.05rem; margin: 0; }

.eyebrow {
	display: inline-block;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 14px;
}

/* ---------- hero ---------- */

/*
	The hero fills the first screen below the header (+1px for the header's border), so the ground
	line reads as a horizon at the bottom of the window rather than a divider halfway down, and the
	next section starts below the fold. The text is centred in whatever height is left over; the
	padding is only the minimum spacing for screens too short to centre anything.
	--ground is how far above the hero's bottom edge the plants are rooted.
*/
.hero {
	--ground: 32px;
	min-height: calc(100svh - var(--header-h) - 1px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0 calc(var(--ground) + 88px);
	position: relative;
	overflow: hidden;
}

/*
	The hero keeps the full .wrap width so its text starts on the same left edge as every section
	below it; the line-length limit goes on the children instead. --measure also keeps the headline
	breaking after "account,".
*/
.hero-inner { position: relative; }
.hero-inner > * { max-width: var(--measure); }
.hero h1 { margin-bottom: 20px; }

.hero-lede {
	font-size: 1.2rem;
	color: var(--text-muted);
	max-width: 620px;
	margin-bottom: 32px;
}

.hero-note { font-size: 0.9rem; color: var(--text-muted); margin: 14px 0 0; }
.hero-note a { color: var(--accent); text-decoration: underline; }

/* ---------- hero seed fall / sprout growth ---------- */

/*
	Plays exactly once on load and freezes (animation-fill-mode: forwards). No loop, no scroll
	trigger, no JS — nothing here depends on the render lifecycle. Everything settles in about 2s.

	The plants form one field receding into the distance: small, dim and far away on the left,
	under the text, and large and bright on the right, in the space the text leaves free.
*/

/*
	Every seed and sprout dimension is a multiple of --grow-unit, which tracks viewport width so the
	graphic stays visible on large monitors: 1.2px up to 1280px wide, ~2px at 2560, capped at 3px.
	Below 1000px the text column reaches over the big plants, so the unit drops further there
	(see the media queries) to keep them under the text.
*/
.hero-grow {
	--grow-unit: clamp(1.2px, 0.4px + 0.0625vw, 3px);
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* The ground line, fading out at both ends. */
.hero-grow::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: var(--ground);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--border) 15%, var(--border) 85%, transparent);
}

/*
	One plant = a zero-width column from the top of the hero down to the ground: its seed falls
	down the column and its sprout grows from the bottom of it. Set inline on each plant:
	  --f  position: -1 and 1 are the edges of a band 1520px wide centred on the content. The band
	       is capped so the big plants stay next to the text on very wide screens instead of
	       drifting out to the edge; plants beyond ±1 fill the extra width and are simply clipped
	       off-screen on anything narrower than the band.
	  --h  sprout height in grow units. Every silhouette shares one viewBox, so width follows.
	  --d  when the seed starts falling. The sprout starts as the seed lands, 840ms later.
*/
.plant {
	--mix: 100%;
	--seed: 6;
	--seed-size: calc(var(--seed) * var(--grow-unit));
	/* Depth runs from --leaf (near) to --leaf-dim (far). The second leaf and the stem are the same
	   green a step and two steps darker, so every depth keeps the plant's internal contrast. */
	--c-leaf: color-mix(in oklab, var(--leaf) var(--mix), var(--leaf-dim));
	--c-leaf-alt: color-mix(in oklab, var(--c-leaf), var(--bg) 12%);
	--c-stem: color-mix(in oklab, var(--c-leaf), var(--bg) 25%);
	position: absolute;
	top: 0;
	bottom: var(--ground);
	left: calc(50% + var(--f) * min(50%, 760px));
	width: 0;
}

.plant.mid { --mix: 50%; --seed: 5; }
.plant.far { --mix: 0%; --seed: 4; }

.seed {
	position: absolute;
	width: var(--seed-size);
	height: var(--seed-size);
	background: var(--c-leaf);
	/* teardrop, not a circle */
	border-radius: 60% 60% 55% 55% / 70% 70% 40% 40%;
	/* centred on the column, like the sprout, so each plant rises exactly where its seed lands */
	transform: translateX(-50%);
	opacity: 0;
	animation: seed-fall 900ms cubic-bezier(0.4, 0.1, 0.7, 1) var(--d) forwards;
}

/* Same speed for every seed — staggered durations read as bouncy. Only the delay varies. */
@keyframes seed-fall {
	0% { top: calc(-2 * var(--seed-size)); opacity: 0; }
	10% { opacity: 1; }
	92% { opacity: 1; }
	100% { top: calc(100% - var(--seed-size)); opacity: 0; }
}

/*
	The whole plant grows as one: scaleY from the base, so the stem and leaves rise together.
	translateX(-50%) is carried through the keyframes so the transform is never clobbered
	mid-animation; it centres the plant on its column.
*/
.sprout {
	position: absolute;
	bottom: 0;
	line-height: 0;
	transform: translateX(-50%) scaleY(0);
	transform-origin: bottom center;
	animation: sprout-grow 550ms cubic-bezier(0.34, 1.2, 0.64, 1) calc(var(--d) + 840ms) both;
}

/*
	Page CSS cannot select the paths a <use> clones out of a <symbol>, so the colours are set here
	as inherited properties and each path opts in with presentation attributes in the markup:
	stems take the stroke, leaves the fill, and second leaves fill with currentColor.
	The stem width is in screen pixels (vector-effect="non-scaling-stroke") and thickens far more
	slowly than the plant grows: over 2 viewBox units on the smallest plants, under 1 on the
	biggest. Scaled proportionally, a big sprout grows a trunk and a small one loses its stem.
*/
.sprout svg {
	height: calc(var(--h) * var(--grow-unit));
	width: auto;
	aspect-ratio: 20 / 28;
	stroke: var(--c-stem);
	stroke-width: max(1px, calc((0.7 + var(--h) / 40) * var(--grow-unit)));
	stroke-linecap: round;
	fill: var(--c-leaf);
	color: var(--c-leaf-alt);
}

@keyframes sprout-grow {
	from { transform: translateX(-50%) scaleY(0); }
	to { transform: translateX(-50%) scaleY(1); }
}

/* ---------- inline signup form ---------- */

.signup-inline { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.signup-inline input[type="email"] { flex: 1 1 260px; width: auto; }

.field {
	width: 100%;
	background: var(--bg-inset);
	border: 1px solid var(--border);
	border-radius: 10px;
	color: var(--text);
	font-family: inherit;
	font-size: 1rem;
	padding: 13px 15px;
}

.field::placeholder { color: var(--placeholder); }
.field:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

textarea.field { resize: vertical; min-height: 96px; }

/*
	The honeypot. Bots fill every field they find in the DOM; humans never see this one.
	Positioned off-screen rather than display:none because some bots skip hidden inputs,
	and marked aria-hidden + tabindex=-1 so it is not offered to screen readers or keyboard users.
*/
.hp-field {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---------- feature grid ---------- */

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 22px;
}

/*
	Each card spans two rows of the grid and lays its title and text on them (subgrid), so every
	title in a row takes the height of the longest one and the texts all start on the same line.
*/
.card {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 28px;
	grid-row: span 2;
	display: grid;
	grid-template-rows: subgrid;
	row-gap: 10px;
}

.card h3 { margin: 0; }
.card p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; counter-reset: step; }

.step { position: relative; padding-top: 46px; }

.step::before {
	counter-increment: step;
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font-weight: 700;
	font-size: 0.95rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.step p { color: var(--text-muted); margin: 0; font-size: 0.98rem; }

/* ---------- gallery ---------- */

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

.gallery figure {
	margin: 0;
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
}

.gallery img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }

.gallery figcaption { padding: 12px 14px; font-size: 0.85rem; color: var(--text-muted); }

/* ---------- signup section ---------- */

.signup-panel {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	border-radius: 18px;
	padding: 40px;
	max-width: 620px;
	margin: 0 auto;
}

.form-row { margin-bottom: 18px; }
.form-row label { display: block; font-size: 0.9rem; font-weight: 550; margin-bottom: 7px; }
.form-row .hint { font-size: 0.82rem; color: var(--text-muted); margin: 6px 0 0; }

.consent-row { display: flex; gap: 11px; align-items: flex-start; margin: 22px 0; }
.consent-row input { margin-top: 4px; flex: none; width: 17px; height: 17px; accent-color: var(--accent); }
.consent-row label { font-size: 0.88rem; color: var(--text-muted); font-weight: 400; line-height: 1.5; }
.consent-row a { color: var(--accent); text-decoration: underline; }

.alert {
	border-radius: 10px;
	padding: 13px 16px;
	margin-bottom: 22px;
	font-size: 0.93rem;
	border: 1px solid;
}

.alert-error { border-color: rgba(248, 113, 113, 0.4); background: rgba(248, 113, 113, 0.1); color: #fca5a5; }
.alert-success {
	border-color: color-mix(in srgb, var(--accent) 40%, transparent);
	background: color-mix(in srgb, var(--accent) 10%, transparent);
	color: var(--accent);
}

/* ---------- socials ---------- */

.socials { display: flex; gap: 12px; flex-wrap: wrap; }

.social-link {
	border: 1px solid var(--border);
	background: var(--bg-raised);
	border-radius: 10px;
	padding: 11px 18px;
	font-size: 0.94rem;
	color: var(--text-muted);
}

.social-link:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- faq ---------- */

.faq { max-width: var(--measure); }

.faq details { border-bottom: 1px solid var(--border); padding: 20px 0; }

.faq summary {
	cursor: pointer;
	font-weight: 600;
	font-size: 1.05rem;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: '\2212'; }
.faq details p { color: var(--text-muted); margin: 14px 0 0; font-size: 0.98rem; }

/* ---------- narrow content pages (privacy / terms / status) ---------- */

/* Same container as every other page, text held to --measure; padding-block keeps .wrap's gutters. */
.prose { padding-block: 72px 96px; }
.prose > * { max-width: var(--measure); }
.prose h2 { font-size: 1.4rem; margin-top: 40px; }
.prose p, .prose li { color: var(--text-muted); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); text-decoration: underline; }

.status-page { padding-block: 110px 130px; max-width: 560px; text-align: center; margin: 0 auto; }
.status-page p { color: var(--text-muted); font-size: 1.05rem; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--border); padding: 48px 0 32px; }

.footer-inner {
	display: flex;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-bottom: 28px;
}

.footer-brand p { margin: 6px 0 0; font-size: 0.92rem; }
.footer-links { display: flex; gap: 24px; font-size: 0.93rem; }
.footer-links a { color: var(--text-muted); }
.footer-legal { border-top: 1px solid var(--border); padding-top: 24px; }
.footer-legal p { margin: 0; font-size: 0.86rem; }

@media (max-width: 1000px) {
	.hero-grow { --grow-unit: 0.8px; }
}

@media (max-width: 640px) {
	section { padding: 64px 0; }
	.hero { --ground: 24px; padding: 64px 0 calc(var(--ground) + 64px); }
	.site-nav a:not(.btn) { display: none; }
	.signup-panel { padding: 28px 22px; }

	/* Thin the field out so the base does not crowd on a narrow hero. */
	.plant.wide-only { display: none; }
	.hero-grow { --grow-unit: 0.55px; }
}

/* Respect users who have asked for less motion. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.btn:hover { transform: none; }
	* { transition-duration: 0.01ms !important; }

	/* Skip the fall entirely and hand over the settled graphic: grown sprouts, no seeds. */
	.seed { animation: none; opacity: 0; }
	.sprout { animation: none; transform: translateX(-50%) scaleY(1); }
}

/*
	The page commits to a dark look in both light and dark themes, so nothing is overridden for
	prefers-color-scheme. Forced-colors mode still needs the interactive affordances to survive.
*/
@media (forced-colors: active) {
	.btn { border: 1px solid currentColor; }
	.card, .signup-panel, .field { border: 1px solid currentColor; }

	/* Purely decorative accent shapes carry no meaning in high contrast. */
	.hero-grow { display: none; }
}