/* Design tokens, reset and shared building blocks
   Colour palette, typography defaults, and the .wrap / .eyebrow / .btn /
   .sec-head primitives every section below builds on. */

:root {
	--green: #204b39;
	--green-60: #1c4131;
	--green-70: #173528;
	--green-80: #112a1f;
	--green-40: #4f8168;
	--green-30: #84b39a;
	--green-20: #c4e0d1;
	--green-10: #e4f1ea;
	--green-surface: #f6fbf8;
	--grey-70: #20261f;
	--grey-60: #464d47;
	--grey-50: #6c7570;
	--grey-40: #98a09b;
	--grey-30: #b6bcb8;
	--grey-20: #d8ddd9;
	--grey-medium: #eef1ef;
	--grey-light: #f8f9fa;
	--grey-10: #fafbfa;
	--border: #e4e8e5;
	--st-sub-bg: #eef4fb;
	--st-sub-fg: #2c5d96;
	--st-sub-bd: #cfe0f3;
	--st-acc-bg: #e9f6ef;
	--st-acc-fg: #1f6b42;
	--st-acc-bd: #c4e6d3;
	--st-rej-bg: #fdecec;
	--st-rej-fg: #b3261e;
	--st-rej-bd: #f5cdca;
	--st-inc-bg: #fdf4e6;
	--st-inc-fg: #9a6a16;
	--st-inc-bd: #f3e0bd;
	--maxw: 1200px;
}
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html {
	scroll-behavior: smooth;
}
body {
	font-family:
		"Inter",
		system-ui,
		-apple-system,
		"Segoe UI",
		sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	color: var(--grey-70);
	background: #fff;
	line-height: 1.5;
}
a {
	color: var(--green);
	text-decoration: none;
}
a:hover {
	color: var(--green-60);
}
svg {
	display: block;
}

/* Icons
   Every icon on the page is a <use> of a <symbol> from the sprite at the top of
   index.html:  <svg class="icon" viewBox="0 0 24 24"><use href="#i-name"></use></svg>
   The paint properties live here rather than on each tag, and the sw-* modifiers
   cover the three places that want a heavier stroke than the default 2. */
.icon {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.icon.sw-22 {
	stroke-width: 2.2;
}
.icon.sw-24 {
	stroke-width: 2.4;
}
.icon.sw-3 {
	stroke-width: 3;
}
/* The sprite itself never renders (it needs an explicit rule because of the
   `svg { display: block }` above, which would otherwise beat the hidden attribute). */
svg.sprite {
	display: none;
}
.mono {
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 32px;
}

/* eyebrow */
.eyebrow {
	font-family: "IBM Plex Mono", monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--green-40);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.eyebrow::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var(--green-30);
}

/* buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 15px;
	padding: 12px 20px;
	border: 1px solid transparent;
	cursor: pointer;
	background: var(--green);
	color: #fff;
	white-space: nowrap;
	transition:
		background 0.16s,
		transform 0.16s,
		box-shadow 0.16s;
	font-family: inherit;
}
.btn:hover {
	background: var(--green-60);
	color: #fff;
}
.btn svg {
	width: 17px;
	height: 17px;
}
.btn.ghost {
	background: #fff;
	border-color: var(--border);
	color: var(--grey-70);
}
.btn.ghost:hover {
	background: var(--grey-light);
	border-color: var(--grey-20);
}
.btn.lg {
	padding: 14px 26px;
	font-size: 16px;
	border-radius: 11px;
}
.btn.ondark {
	background: #fff;
	color: var(--green);
}
.btn.ondark:hover {
	background: var(--green-10);
	color: var(--green);
}
.btn.ondark.ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
}
.btn.ondark.ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

/* ---------------- SECTION shells ---------------- */
section {
	padding: 96px 0;
}
.sec-head {
	max-width: 740px;
}
.sec-head.center {
	margin: 0 auto;
	text-align: center;
}
.sec-head h2 {
	font-size: clamp(30px, 3.4vw, 42px);
	line-height: 1.08;
	letter-spacing: -0.03em;
	font-weight: 800;
	color: var(--grey-70);
	margin-top: 16px;
	text-wrap: balance;
}
.sec-head p {
	font-size: 18px;
	line-height: 1.55;
	color: var(--grey-60);
	margin-top: 18px;
	text-wrap: pretty;
}
.sec-head.center .eyebrow {
	justify-content: center;
}