:root {
	color-scheme: light;
	--ink: #192820;
	--muted: #62736a;
	--paper: #f5f8f5;
	--green: #176747;
	--green-dark: #125237;
	--line: #dce6de;
	--lime: #dff2ba;
	--sand: #f0eadf;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font:
		16px / 1.55 system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;
}
a {
	color: var(--green-dark);
	text-underline-offset: 4px;
}
button {
	font: inherit;
	cursor: pointer;
}
.wrap {
	width: min(1160px, calc(100% - 48px));
	margin-inline: auto;
}
.nav {
	min-height: 82px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	border-bottom: 1px solid var(--line);
}
.brand {
	text-decoration: none;
	color: var(--ink);
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: -0.03em;
	font-size: 1.02rem;
}
.brand strong {
	font-weight: 780;
}
.brand-mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 9px;
	background: var(--green);
	color: #fff;
	font-family: Georgia, serif;
	font-size: 1.2rem;
}
.nav nav,
.footer nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 24px;
}
.nav nav a,
.footer nav a {
	text-decoration: none;
	color: #40534a;
	font-size: 0.9rem;
}
.nav .nav-admin {
	border: 1px solid #aebeb2;
	border-radius: 999px;
	padding: 8px 14px;
	background: #fff;
}
.hero {
	display: grid;
	grid-template-columns: 1.04fr 0.96fr;
	align-items: center;
	gap: 60px;
	padding-top: 76px;
	padding-bottom: 64px;
}
.eyebrow {
	color: var(--green-dark);
	font-size: 0.76rem;
	font-weight: 750;
	letter-spacing: 0.105em;
	text-transform: uppercase;
	margin: 0 0 15px;
}
.dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 7px;
	border-radius: 50%;
	background: #7ab75b;
	box-shadow: 0 0 0 4px #7ab75b22;
}
h1,
h2,
h3,
p {
	margin-top: 0;
}
h1 {
	font-size: clamp(3.1rem, 7vw, 5.8rem);
	line-height: 0.99;
	letter-spacing: -0.072em;
	margin-bottom: 25px;
}
h1 em {
	font-family: Georgia, serif;
	font-weight: 500;
	color: var(--green);
	letter-spacing: -0.065em;
}
.lede {
	font-size: 1.15rem;
	line-height: 1.6;
	color: #516258;
	max-width: 600px;
	margin-bottom: 26px;
}
.hero-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 22px;
}
.open-feedback {
	border: 0;
	border-radius: 999px;
	background: var(--green);
	color: white;
	font-weight: 700;
	padding: 13px 20px;
	box-shadow: 0 6px 18px #17674722;
}
.open-feedback:hover {
	background: var(--green-dark);
}
.quiet-link {
	text-decoration: none;
	font-weight: 650;
}
.microcopy {
	font-size: 0.83rem;
	color: var(--muted);
	margin: 15px 0 0;
}
.preview {
	position: relative;
	border: 1px solid #d9e3da;
	border-radius: 22px;
	background: #fff;
	padding: 22px;
	box-shadow: 0 24px 70px #23452d13;
	transform: rotate(1.3deg);
}
.preview:after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 14px -13px -13px 14px;
	border-radius: 22px;
	background: var(--lime);
}
.preview-top,
.code-heading {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	color: #738177;
	font-size: 0.68rem;
	letter-spacing: 0.12em;
	font-weight: 750;
}
.live-pill {
	border-radius: 999px;
	background: #edf6e6;
	color: #3c6831;
	padding: 5px 9px;
	letter-spacing: 0.06em;
}
.preview-card {
	border: 1px solid var(--line);
	border-radius: 16px;
	margin-top: 22px;
	padding: 20px;
}
.tag {
	color: var(--green);
	font-size: 0.69rem;
	font-weight: 800;
	letter-spacing: 0.08em;
}
.preview-card h2 {
	margin: 8px 0;
	font-size: 1.35rem;
	letter-spacing: -0.03em;
}
.preview-card p {
	color: #647169;
	margin-bottom: 18px;
}
.preview-votes {
	display: flex;
	gap: 10px;
	color: #53645a;
	font-size: 0.8rem;
}
.preview-footer {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #718077;
	font-size: 0.8rem;
	margin-top: 18px;
}
.avatar {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	border-radius: 50%;
	background: #d7ead4;
	color: var(--green);
	font-weight: 800;
}
.trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-block: 1px solid var(--line);
	padding: 21px 0;
	gap: 12px;
}
.trust span {
	color: #536259;
	font-size: 0.83rem;
}
.trust b {
	color: var(--green);
	margin-right: 8px;
	font-size: 0.73rem;
}
.section {
	padding-top: 100px;
	padding-bottom: 100px;
}
.section-heading {
	max-width: 670px;
}
.section h2,
.bottom-cta h2 {
	font-size: clamp(2.1rem, 4.5vw, 3.45rem);
	letter-spacing: -0.055em;
	line-height: 1.07;
	margin-bottom: 16px;
}
.section-heading > p:last-child {
	color: var(--muted);
	font-size: 1.04rem;
	max-width: 590px;
}
.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 44px;
}
.steps article {
	padding: 23px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: #fff;
}
.steps article > span {
	display: grid;
	place-items: center;
	width: 33px;
	height: 33px;
	border-radius: 50%;
	background: var(--lime);
	color: var(--green-dark);
	font-weight: 800;
	margin-bottom: 21px;
}
.steps h3 {
	font-size: 1.18rem;
	margin-bottom: 8px;
}
.steps p {
	color: var(--muted);
	font-size: 0.92rem;
	margin-bottom: 0;
}
.privacy-section {
	background: #eaf1e9;
}
.privacy-grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 60px;
}
.privacy-grid ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 13px;
}
.privacy-grid li {
	position: relative;
	padding-left: 25px;
	color: #42554a;
}
.privacy-grid li:before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--green);
	font-weight: 800;
}
.footer nav a {
	font-size: 0.82rem;
}
.privacy-grid > div > a,
.embed-section .code-card > a {
	font-weight: 700;
}
.embed-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: center;
}
.embed-copy p:not(.eyebrow) {
	color: var(--muted);
}
.code-card {
	border-radius: 18px;
	background: #182920;
	color: #f4f7f2;
	padding: 20px;
	box-shadow: 0 16px 40px #18292022;
}
.code-heading {
	color: #adbdaf;
}
.code-card pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font:
		0.83rem / 1.6 ui-monospace,
		SFMono-Regular,
		Menlo,
		monospace;
	padding: 18px;
	border-radius: 11px;
	background: #0f1d16;
	color: #d9efc6;
}
.embed-section .code-card > a {
	color: #d9efc6;
	font-size: 0.9rem;
}
.bottom-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 38px;
	margin-bottom: 90px;
	border-radius: 22px;
	padding: 36px;
	background: var(--sand);
}
.bottom-cta h2 {
	font-size: 2.35rem;
	margin-bottom: 8px;
}
.bottom-cta p:not(.eyebrow) {
	color: #687067;
	margin-bottom: 0;
}
.bottom-actions {
	display: flex;
	align-items: center;
	gap: 17px;
	flex-wrap: wrap;
}
.bottom-cta .bottom-actions > a {
	text-decoration: none;
	font-weight: 650;
	white-space: nowrap;
}
.footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	padding: 24px 0 34px;
	border-top: 1px solid var(--line);
	color: #748077;
	font-size: 0.83rem;
}
.footer nav {
	gap: 16px;
}
@media (max-width: 820px) {
	.nav {
		padding: 15px 0;
		align-items: flex-start;
	}
	.nav nav {
		justify-content: flex-end;
		gap: 10px 17px;
	}
	.hero {
		gap: 32px;
		padding-top: 54px;
	}
	.trust {
		grid-template-columns: repeat(2, 1fr);
	}
	.privacy-grid,
	.embed-section {
		gap: 35px;
	}
	.bottom-cta {
		align-items: flex-start;
		flex-direction: column;
	}
}
@media (max-width: 620px) {
	.wrap {
		width: min(100% - 32px, 1160px);
	}
	.nav {
		flex-direction: column;
		gap: 12px;
	}
	.nav nav {
		justify-content: flex-start;
	}
	.hero {
		grid-template-columns: 1fr;
		padding-top: 45px;
		padding-bottom: 45px;
	}
	.hero-copy {
		max-width: 520px;
	}
	.hero h1 {
		font-size: clamp(3.2rem, 16vw, 5rem);
	}
	.preview {
		margin: 8px 7px 0 0;
	}
	.trust {
		gap: 17px 10px;
	}
	.section {
		padding-top: 70px;
		padding-bottom: 70px;
	}
	.steps,
	.privacy-grid,
	.embed-section {
		grid-template-columns: 1fr;
	}
	.steps {
		gap: 12px;
		margin-top: 28px;
	}
	.privacy-grid {
		gap: 20px;
	}
	.embed-section {
		gap: 25px;
	}
	.bottom-cta {
		padding: 25px;
		margin-bottom: 55px;
	}
	.bottom-actions {
		align-items: flex-start;
		flex-direction: column;
	}
	.footer {
		align-items: flex-start;
		flex-direction: column;
	}
	.footer nav {
		flex-wrap: wrap;
	}
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}