feat: add "The mission" section

Author: fedeperin

src/pages/index.astro

@@ -205,7 +205,45 @@ const faqSchema = {
 			</ol>
 		</section>
 
-		<section id="faq" class="alt">
+		<section id="mission" class="alt">
+			<h2>The Mission</h2>
+			<p class="section-lede">
+				Ecofonts exists because the liquid your printer lays on every page is one of the most
+				expensive — and most oil-hungry — you will ever buy.
+			</p>
+			<div class="grid three">
+				<article class="card">
+					<h3>💎 Pricier than champagne</h3>
+					<p>
+						Liter for liter, branded printer ink is estimated to cost well over $1,000 —
+						several times the price of vintage champagne, and orders of magnitude more than
+						the petrol at the pump. Every drop a page doesn't need is money that stays in
+						your pocket.
+					</p>
+				</article>
+				<article class="card">
+					<h3>🛢️ Ink starts as petroleum</h3>
+					<p>
+						Carbon-black pigment, solvents, and toner polymers are all derived from crude
+						oil — and so is the plastic cartridge around them. Manufacturing a single new
+						laser cartridge is estimated to consume around three liters of oil before it
+						ever touches paper.
+					</p>
+				</article>
+				<article class="card">
+					<h3>🌍 Small holes, planetary scale</h3>
+					<p>
+						Well over a billion cartridges are sold every year, and most end up in landfill.
+						If the world's documents used 20% less ink, cartridges would last that much
+						longer — hundreds of millions of liters of oil never drilled, refined, or
+						shipped, and the CO₂ from all of it never emitted.
+					</p>
+				</article>
+			</div>
+			<p class="mission-close">Same page, same look — just less oil on it. That's the mission.</p>
+		</section>
+
+		<section id="faq">
 			<h2>FAQ</h2>
 			<div class="faq-list">
 				<details>
@@ -555,6 +593,14 @@ const faqSchema = {
 			font-weight: 600;
 		}
 
+		.mission-close {
+			text-align: center;
+			max-width: 560px;
+			margin: 36px auto 0;
+			font-size: 1.05rem;
+			font-weight: 650;
+		}
+
 		.faq-list {
 			max-width: 720px;
 			margin: 32px auto 0;