/* tuindr.nl. Same type, colours and shapes as the apps (docs/design-brief.md). Light only.
   No illustrations: the visuals are the product itself (app screens), plus the in-app garden picture. */

@font-face { font-family: Figtree; font-weight: 400; font-display: swap; src: url(/fonts/figtree-400.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 500; font-display: swap; src: url(/fonts/figtree-500.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 600; font-display: swap; src: url(/fonts/figtree-600.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 700; font-display: swap; src: url(/fonts/figtree-700.woff2) format("woff2"); }
@font-face { font-family: Figtree; font-weight: 800; font-display: swap; src: url(/fonts/figtree-800.woff2) format("woff2"); }

:root {
	color-scheme: light;
	--bg: #F6F3EC;
	--bg-deep: #EFEADF;
	--surface: #FFFFFF;
	--ink: #10241C;
	--muted: #66756D;
	--faint: #95A098;
	--line: #E8E2D5;
	--hairline: rgb(16 36 28 / 8%);
	--green: #24573F;
	--green-soft: #E7ECE4;
	--dark: #1E2E27;
	--water: #4F87AE;
	--urgent: #C2610C;
	--shadow-sm: 0 1px 2px rgb(16 36 28 / 5%), 0 4px 12px rgb(16 36 28 / 5%);
	--shadow: 0 1px 2px rgb(16 36 28 / 4%), 0 12px 32px rgb(16 36 28 / 8%), 0 32px 80px rgb(16 36 28 / 8%);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
	margin: 0;
	font-family: Figtree, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(46px, 6.2vw, 84px); letter-spacing: -0.04em; line-height: .98; }
h2 { font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.035em; }
h3 { font-size: 21px; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { display: block; }
.muted { color: var(--muted); }

.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
section { padding: clamp(80px, 10vw, 140px) 0; }
.kicker { font-size: 15px; font-weight: 700; color: var(--green); margin-bottom: 14px; }
.section-head { max-width: 720px; margin-bottom: 52px; }
.section-head > p:not(.kicker) { font-size: 20px; color: var(--muted); margin-top: 18px; }

.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	height: 56px; padding: 0 28px; border-radius: 28px; border: 0;
	background: var(--dark); color: #F6F3EC;
	font-weight: 700; font-size: 17px; text-decoration: none; cursor: pointer;
	box-shadow: 0 1px 0 rgb(255 255 255 / 10%) inset, 0 8px 20px rgb(16 36 28 / 18%);
	transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / 10%) inset, 0 14px 28px rgb(16 36 28 / 22%); }
.btn:active { transform: translateY(0) scale(.98); }
.btn svg { width: 18px; height: 18px; }
.btn.ghost { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); }
.btn.light { background: #F6F3EC; color: var(--ink); box-shadow: none; }
.btn.small { height: 44px; padding: 0 20px; font-size: 15px; border-radius: 22px; box-shadow: none; }
.btn.block { width: 100%; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 8px; }

/* Reveal on scroll; the inline script sets .js before first paint so nothing flickers. */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 30; transition: background .3s, box-shadow .3s; }
.nav.scrolled { background: rgb(246 243 236 / 82%); backdrop-filter: saturate(1.5) blur(18px); -webkit-backdrop-filter: saturate(1.5) blur(18px); box-shadow: 0 1px 0 var(--hairline); }
.nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 76px; }
.brand { display: inline-flex; color: var(--ink); }
.brand svg { height: 28px; width: auto; }
.nav nav { display: flex; gap: 6px; padding: 5px; border-radius: 999px; background: rgb(255 255 255 / 60%); box-shadow: inset 0 0 0 1px var(--hairline); }
.nav nav a { text-decoration: none; font-weight: 600; font-size: 15px; color: var(--muted); padding: 8px 16px; border-radius: 999px; transition: color .2s, background .2s; }
.nav nav a:hover { color: var(--ink); background: var(--surface); }
.nav-inner > .btn { justify-self: end; }
@media (max-width: 820px) { .nav nav { display: none; } .nav-inner { grid-template-columns: 1fr auto; } }

/* Hero */
.hero { position: relative; padding: clamp(36px, 6vw, 84px) 0 clamp(64px, 8vw, 110px); overflow: hidden; }
.glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 980px; max-height: 980px; background: radial-gradient(closest-side, rgb(255 255 255 / 90%), rgb(255 255 255 / 0%)); pointer-events: none; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; } }
.hero-grid > * { min-width: 0; }
.pill { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); font-size: 14px; font-weight: 600; margin-bottom: 26px; }
.live { width: 8px; height: 8px; border-radius: 50%; background: #3FA552; box-shadow: 0 0 0 4px rgb(63 165 82 / 18%); }
.lead { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); margin-top: 26px; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.wins { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 14px; max-width: 34em; }
.wins li { display: flex; gap: 14px; align-items: flex-start; }
.wins svg { flex: none; width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--surface); color: var(--green); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--hairline); }
.wins p { font-size: 18px; color: var(--muted); padding-top: 7px; }
.wins b { color: var(--ink); font-weight: 700; }
.hero-price { margin-top: 26px; color: var(--muted); font-size: 15.5px; }
.hero-price b { color: var(--ink); }
.hero-price a { color: var(--green); font-weight: 600; text-underline-offset: 3px; }
.hero-facts { list-style: none; padding: 0; margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--muted); font-size: 15px; font-weight: 500; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts svg, .pilot ul svg { width: 18px; height: 18px; color: var(--green); }

/* Real iPhone 17 (Apple product bezel) with the app's screen inside it. The screen area is
   1206×2622 of the 1350×2760 bezel, starting at 72,69; corners ~55 pt. */
.device-frame {
	/* Concentric corners: everything inside the screen derives its radius from the screen's own (55 pt
	   on a 402 pt wide iPhone 17 = 13.6% of the screen = 12.15% of the frame). An element inset by
	   --inset gets --ri; anything inside that, inset again by p, gets --ri minus p. */
	--r: 12.15cqw; --inset: 4.47cqw; --ri: calc(var(--r) - var(--inset)); --pad: 3.2cqw;
	container-type: inline-size;
	position: relative; justify-self: center; width: min(350px, 100%); aspect-ratio: 1350 / 2760; filter: drop-shadow(0 30px 40px rgb(16 36 28 / 14%)) drop-shadow(0 8px 12px rgb(16 36 28 / 8%)); }
.device-screen { position: absolute; left: 5.33%; top: 2.5%; width: 89.34%; height: 95%; border-radius: var(--r); overflow: hidden; }
.bezel { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.status { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 2px 10% 0 12%; font-size: 14px; font-weight: 600; flex: none; }
.lock-screen .status { position: absolute; inset: 0 0 auto; color: #fff; }
.sb-icons { display: flex; align-items: center; gap: 4px; }
.sb-icons svg { height: 9px; width: auto; fill: currentColor; }

/* Who it's for: gardeners (default) or someone with a garden. The page swaps its header and sections (site.js). */
body[data-voor="tuin"] .g-only, body:not([data-voor="tuin"]) .t-only { display: none !important; }
.switch { display: inline-flex; gap: 2px; padding: 4px; margin-bottom: 28px; border-radius: 999px; background: rgb(255 255 255 / 65%); box-shadow: inset 0 0 0 1px var(--hairline); }
.switch button { border: 0; background: transparent; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--muted); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.switch button:hover { color: var(--ink); }
.switch button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.hero-small { margin-top: 22px; color: var(--muted); font-size: 15.5px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.hero.t-only h1 { font-size: clamp(42px, 5.2vw, 70px); }
@media (max-width: 600px) { .wins p { font-size: 17px; } }
.hero-small b { color: var(--ink); }
.hero-small a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; text-decoration: none; }
.hero-small a svg { width: 14px; height: 14px; }
.hero-small a:hover { text-decoration: underline; text-underline-offset: 3px; }
.owner-phone .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.owner-steps { padding-top: 0; }
.owner-steps .steps3 b { font-size: 19px; }

/* The lock screen */
.lock-screen { padding: 13% 4% 4%; background:
	radial-gradient(120% 70% at 80% 0%, #EDE6D6, transparent 60%),
	radial-gradient(90% 60% at 0% 100%, #C2CDB8, transparent 60%),
	linear-gradient(180deg, #DDD5C4, #C6CDB8); }
.lock-time { text-align: center; color: #fff; font-size: 76px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; text-shadow: 0 2px 18px rgb(16 36 28 / 12%); }
.lock-date { text-align: center; color: rgb(255 255 255 / 92%); font-weight: 600; font-size: 16px; margin: 6px 0 26px; }
.stack { display: grid; gap: 8px; }
.n { position: relative; display: flex; gap: 11px; align-items: flex-start; background: rgb(255 255 255 / 74%); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 22px; padding: 11px 12px; font-size: 13.5px; line-height: 1.3; box-shadow: 0 1px 2px rgb(16 36 28 / 6%); transition: opacity .5s var(--ease), transform .5s var(--ease), background .4s, box-shadow .4s; }
.js .n { opacity: 0; transform: translateY(-10px) scale(.98); }
.js .n.in { opacity: 1; transform: none; }
.n-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; }
.n-ic svg { width: 19px; height: 19px; }
.n-ic.msg { background: #34A853; } .n-ic.call { background: #E5484D; } .n-ic.photo { background: #3B82F6; }
.n-body { flex: 1; min-width: 0; }
.n-top { display: flex; justify-content: space-between; gap: 8px; }
.n-top small { color: #6B756F; font-size: 12px; }
.n-text { color: #3B4A43; margin-top: 2px; }
.n-tag { position: absolute; right: 10px; top: 9px; font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 10px; opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s var(--ease); }
.n.done .n-top small, .n.brief .n-top small { opacity: 0; }
.n-top small { transition: opacity .2s; }
.n.done { background: rgb(255 255 255 / 46%); }
.n.done .n-body, .n.done .n-ic { opacity: .55; }
.n.done .n-tag { opacity: 1; transform: none; background: var(--green-soft); color: var(--green); }
.n.brief { background: #fff; box-shadow: 0 0 0 2px var(--dark), 0 10px 24px rgb(16 36 28 / 16%); }
.n.brief .n-tag { opacity: 1; transform: none; background: var(--dark); color: #F6F3EC; }
.lock-summary { position: absolute; left: 14px; right: 14px; bottom: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 18px; background: rgb(16 36 28 / 82%); backdrop-filter: blur(14px); color: #F6F3EC; font-size: 14px; font-weight: 600; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.lock-summary svg { width: 18px; height: 18px; color: #8FD49E; }
.js .lock-summary { opacity: 0; transform: translateY(10px); }
.js .lock-summary.in { opacity: 1; transform: none; }

/* The film, full screen over the page */
.muted-s { font-weight: 500; opacity: .6; }
.film-dialog { width: min(1280px, 100vw - 48px); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 28px; overflow: visible; background: transparent; }
.film-dialog::backdrop { background: rgb(13 20 17 / 78%); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.film-dialog video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); border-radius: 28px; background: #0D0F0E; box-shadow: 0 30px 80px rgb(0 0 0 / 35%); }
.film-close { position: absolute; right: 0; bottom: calc(100% + 14px); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgb(255 255 255 / 14%); color: #fff; cursor: pointer; transition: background .2s; }
.film-close:hover { background: rgb(255 255 255 / 24%); }
.film-close svg { width: 20px; height: 20px; }
.js .film-dialog[open] { animation: film-in .35s var(--ease); }
.js .film-dialog[open]::backdrop { animation: fade-in .35s ease; }
@keyframes film-in { from { opacity: 0; transform: scale(.97); } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .film-dialog[open], .js .film-dialog[open]::backdrop { animation: none; } }
@media (max-width: 600px) { .film-dialog { width: 100vw; } .film-dialog video { border-radius: 0; } .film-close { right: 12px; } }

/* The app: four screens */
.features .section-head { text-align: center; margin-inline: auto; }
.shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); }
.shot { margin: 0; display: grid; justify-items: center; align-content: start; gap: 28px; text-align: center; }
.shot .device-frame { width: min(260px, 100%); }
@media (max-width: 1080px) and (min-width: 761px) { .shots { grid-template-columns: repeat(2, 1fr); row-gap: 64px; } .shot .device-frame { width: min(280px, 100%); } }
.shot .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.shot p { color: var(--muted); font-size: 16.5px; margin-top: 8px; max-width: 22em; }
@media (max-width: 760px) {
	/* A row to swipe through, the next phone peeking in. */
	.shots { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -24px; padding: 0 24px 8px; scroll-padding-inline: 24px; scrollbar-width: none; }
	.shots::-webkit-scrollbar { display: none; }
	.shot { flex: 0 0 72%; scroll-snap-align: center; }
}

/* Price: what you get, as a receipt (bon), with the money-back promise next to it */
.price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "copy bon" "promise bon"; gap: 36px clamp(40px, 7vw, 96px); align-items: end; }
.price-copy { grid-area: copy; } .bon-wrap { grid-area: bon; align-self: center; } .price-promise { grid-area: promise; align-self: start; }
.price-intro { font-size: 20px; color: var(--muted); margin-top: 18px; max-width: 30em; }
.price-promise { background: var(--green-soft); border-radius: 28px; padding: clamp(24px, 3vw, 34px); }
.price-promise h3 { font-size: clamp(24px, 2.4vw, 29px); letter-spacing: -0.03em; color: var(--green); }
.price-promise p { color: #3E5148; font-size: 16.5px; margin-top: 12px; }
.price-promise .price-sum { padding-top: 12px; border-top: 1px solid rgb(36 87 63 / 15%); }
.price-sum b { color: var(--ink); }
.bon-wrap { position: relative; }
.bon { background: var(--surface); border-radius: 22px 22px 0 0; padding: 34px clamp(24px, 3vw, 36px) 40px; box-shadow: var(--shadow); font-variant-numeric: tabular-nums;
	/* The torn bottom edge of a receipt. */
	-webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 10px 0, #000 7px, transparent 7.5px) bottom left / 20px 10px repeat-x;
	mask: linear-gradient(#000, #000) top / 100% calc(100% - 10px) no-repeat, radial-gradient(circle at 10px 0, #000 7px, transparent 7.5px) bottom left / 20px 10px repeat-x; }
.bon-head { font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-bottom: 16px; border-bottom: 1.5px dashed var(--line); }
.bon ul { list-style: none; padding: 8px 0; margin: 0; }
.bon li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; font-size: 17px; font-weight: 500; }
.bon li span:last-child { flex: none; font-size: 14.5px; font-weight: 600; color: var(--green); }
.bon-total { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; padding-top: 18px; border-top: 1.5px dashed var(--line); font-weight: 700; font-size: 18px; }
.bon-total b { font-size: clamp(44px, 5vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1; }
.bon-foot { text-align: right; color: var(--muted); font-size: 14.5px; margin-top: 8px; }
.bon-stamp { position: absolute; right: -30px; top: -44px; width: 126px; height: 126px; display: grid; place-items: center; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2.5px var(--green), inset 0 0 0 6px var(--bg), inset 0 0 0 7.5px var(--green); color: var(--green); font-size: 11.5px; font-weight: 800; line-height: 1.2; text-align: center; text-transform: uppercase; letter-spacing: .03em; transform: rotate(10deg); }
@media (max-width: 900px) { .price-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "bon" "promise"; row-gap: 48px; } .bon-wrap { max-width: 520px; } .bon-stamp { right: -6px; } }
@media (max-width: 480px) { .bon li { font-size: 15.5px; } .bon li span:last-child { font-size: 13.5px; } .bon-stamp { width: 108px; height: 108px; font-size: 10px; top: -46px; right: -4px; } }

/* The store buttons (hero, "Begin vandaag", homeowners). Black, as the stores ask; a light edge on the dark card. */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 15px; border-radius: 14px; background: #000; color: #fff; text-decoration: none; transition: transform .2s var(--ease); }
.store:hover { transform: translateY(-1px); }
.store svg { width: 26px; height: 26px; flex: none; }
.store span { display: grid; font-weight: 700; font-size: 19px; line-height: 1.05; letter-spacing: -0.01em; }
.store small { font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .9; }
.stores.on-dark .store { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%); }
.start-get { align-self: center; display: grid; gap: 22px; justify-items: start; }
.start-qr { display: flex; gap: 18px; align-items: center; background: #F6F3EC; color: var(--ink); border-radius: 22px; padding: 14px 20px 14px 14px; }
.start-qr img { width: 96px; height: 96px; border-radius: 10px; background: #fff; padding: 8px; }
.start-qr p { font-size: 15px; color: var(--muted); max-width: 15em; }
.start-get .fineprint { text-align: left; }
@media (hover: none) and (pointer: coarse) { .start-qr { display: none; } }
.owners .stores { margin-top: 30px; }

/* Trust */
.trust { padding-top: 0; }
/* Je prijzen: the gardener's prices, vaste beurten, regie, his own jobs */
.work { padding: clamp(24px, 4vw, 48px) 0 clamp(40px, 6vw, 72px); }
.work-lead { color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 640px; margin: 14px 0 0; }
.work-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 34px; }
.work-item { background: var(--surface); border-radius: 22px; padding: 24px 22px 22px; box-shadow: var(--shadow); }
.work-item svg { width: 26px; height: 26px; color: var(--green); }
.work-item h3 { font-size: 18px; margin: 14px 0 6px; letter-spacing: -.01em; }
.work-item p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
@media (max-width: 1000px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work-grid { grid-template-columns: 1fr; } }
.trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .trust-grid { grid-template-columns: 1fr; } }
.trust-item { display: flex; gap: 16px; background: var(--surface); border-radius: 26px; padding: 26px; box-shadow: inset 0 0 0 1px var(--hairline); }
.trust-item > svg { width: 26px; height: 26px; color: var(--green); flex: none; margin-top: 2px; }
.trust-item p { color: var(--muted); font-size: 16px; margin-top: 4px; }

/* FAQ */
.faq { padding-top: 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 24px 64px; align-items: start; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-list { background: var(--surface); border-radius: 30px; padding: 8px 30px; box-shadow: inset 0 0 0 1px var(--hairline); }
.faq-list details + details { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 18.5px; font-weight: 700; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--bg) linear-gradient(var(--ink), var(--ink)) center / 12px 2px no-repeat; box-shadow: inset 0 0 0 1px var(--hairline); transition: transform .3s var(--ease); }
.faq-list details:not([open]) summary::after { background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-size: 12px 2px, 2px 12px; background-position: center; background-repeat: no-repeat; }
.faq-list details[open] summary::after { transform: rotate(180deg); }
.faq-list details p { color: var(--muted); font-size: 17px; margin: -8px 0 24px; max-width: 38em; }

/* Pilot */
.pilot { padding-top: 0; }
.pilot-card { position: relative; overflow: hidden; background: var(--dark); color: #F3EFE6; border-radius: 40px; padding: clamp(36px, 6vw, 72px); display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.pilot-card::before { content: ""; position: absolute; inset: -40% auto auto -20%; width: 70%; height: 140%; background: radial-gradient(closest-side, rgb(255 255 255 / 7%), transparent); pointer-events: none; }
@media (max-width: 900px) { .pilot-card { grid-template-columns: 1fr; border-radius: 32px; } }
.pilot .kicker { color: #9FD3AC; }
.pilot h2 { color: #fff; }
.pilot-copy > p:not(.kicker) { color: #B9C1BB; font-size: 19px; margin-top: 18px; }
.pilot ul { list-style: none; padding: 0; margin: 30px 0 0; display: grid; gap: 12px; color: #E4E8E2; font-weight: 500; }
.pilot li { display: flex; gap: 10px; align-items: center; }
.pilot ul svg { color: #9FD3AC; }
.form { position: relative; display: grid; gap: 16px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }
.form label { display: grid; gap: 7px; font-weight: 600; font-size: 14.5px; color: #D9DED8; }
.form .opt { font-weight: 400; color: #8E978F; }
.form input, .form textarea { font: inherit; font-size: 17px; color: #F3EFE6; background: rgb(255 255 255 / 7%); padding: 14px 16px; border-radius: 16px; border: 1px solid rgb(255 255 255 / 12%); width: 100%; transition: border-color .2s, background .2s; }
.form input:focus, .form textarea:focus { outline: none; border-color: rgb(255 255 255 / 45%); background: rgb(255 255 255 / 10%); }
.form textarea { resize: vertical; }
.form .btn { margin-top: 4px; }
.fineprint { font-size: 13.5px; color: #8E978F; text-align: center; }
.form .hp { position: absolute; left: -9999px; }

/* Homeowners without a gardener: one quiet card after the gardeners' sign-up, the tuinplan in a phone peeking up. */
.owners { padding-top: 0; }
.owners-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 5vw, 64px); background: var(--surface); border-radius: 40px; padding: clamp(36px, 6vw, 72px) clamp(28px, 6vw, 72px) 0; box-shadow: var(--shadow-sm); }
.owners-copy { padding-bottom: clamp(36px, 6vw, 72px); }
.owners-copy > p:not(.kicker):not(.owners-note) { color: var(--muted); font-size: 19px; margin-top: 18px; max-width: 32em; }
.owners ul { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; font-weight: 500; }
.owners li { display: flex; gap: 10px; align-items: center; }
.owners li svg { width: 18px; height: 18px; color: var(--green); flex: none; }
.owners-form { display: flex; gap: 10px; margin-top: 30px; max-width: 460px; }
.owners-form input { flex: 1; min-width: 0; font: inherit; font-size: 17px; padding: 0 20px; height: 56px; border-radius: 28px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); }
.owners-form input:focus { outline: none; border-color: var(--green); }
.owners-note { color: var(--faint); font-size: 14.5px; margin-top: 12px; }
.owners-phone { align-self: end; display: flex; justify-content: center; }
.owners-phone .device-frame { width: min(300px, 100%); margin-bottom: -38%; }
.owners-phone .device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) { .owners-card { grid-template-columns: minmax(0, 1fr); border-radius: 32px; } .owners-copy { padding-bottom: 0; } .owners-phone .device-frame { width: min(260px, 80%); margin-bottom: -60%; } .owners-form { flex-direction: column; } .owners-form input { flex: none; } }

/* Footer */
.footer { padding: 64px 0 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
@media (max-width: 820px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-brand .brand svg { height: 26px; }
.footer-brand p, .footer-grid p { color: var(--muted); font-size: 15.5px; margin-top: 12px; }
.foot-title { color: var(--ink) !important; font-weight: 700; font-size: 15px !important; margin: 0 0 12px !important; }
.footer-grid a { display: block; text-decoration: none; color: var(--muted); font-size: 15.5px; padding: 3px 0; }
.footer-grid a:hover { color: var(--ink); }
.foot-bottom { padding-top: 24px; color: var(--faint); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot-bottom a { color: inherit; text-decoration: none; }
.foot-bottom a:hover { color: var(--ink); }

/* Thank-you page */
.thanks { min-height: 100vh; display: grid; place-items: center; text-align: center; padding: 24px; }
.thanks main { max-width: 440px; display: grid; justify-items: center; gap: 16px; }
.thanks svg { width: 52px; height: 52px; }
.thanks h2 { font-size: 40px; }
.thanks p { color: var(--muted); margin-bottom: 8px; }

/* Concentric corners inside the phones (see .device-frame). */
.lock-screen { padding: 11.6cqw var(--inset) var(--inset); }
.n { border-radius: var(--ri); padding: var(--pad); }
.n-ic { border-radius: calc(var(--ri) - var(--pad)); }
.n-tag { right: var(--pad); top: var(--pad); }
.lock-summary { left: var(--inset); right: var(--inset); bottom: var(--inset); height: calc(2 * var(--ri)); padding: 0 16px; border-radius: var(--ri); }

/* /twente: the Twente page for gardeners (docs/marketing/strategie-twente.md). */
.twente-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.twente-hero-grid > * { min-width: 0; }
.twente-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.twente-shots img { width: 100%; height: auto; border-radius: 28px; box-shadow: var(--shadow); background: var(--surface); }
.twente-shots img:last-child { margin-top: 56px; }
.twente-steps, .twente-offer { padding: clamp(56px, 8vw, 104px) 0 0; }
.steps3 { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: step; }
.steps3 li { background: var(--surface); border-radius: 28px; padding: 28px; box-shadow: var(--shadow-sm); counter-increment: step; }
.steps3 li::before { content: counter(step); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-weight: 800; margin-bottom: 16px; }
.steps3 b, .offer b { display: block; font-size: 19px; line-height: 1.3; }
.steps3 p, .offer p { color: var(--muted); font-size: 16.5px; margin: 8px 0 0; }
.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.offer { background: var(--surface); border-radius: 28px; padding: 26px; box-shadow: var(--shadow-sm); }
.twente-offer + .faq { padding-top: clamp(56px, 8vw, 104px); }
.start { padding: clamp(28px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.start-card { align-items: start; }
.start-card h2 { color: #fff; }
.form-msg { margin: -4px 0 0; color: #FFB4A8; font-size: 15px; font-weight: 600; }
.fineprint a { color: #D9DED8; }
.start-done { grid-column: 1 / -1; max-width: 640px; }
.start-done .kicker { color: #9FD3AC; }
.done-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; counter-reset: step; }
.done-steps li { counter-increment: step; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; color: #E4E8E2; }
.done-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 255 255 / 10%); color: #fff; font-weight: 800; }
.done-steps b { color: #fff; font-size: 18px; }
.done-steps span { color: #B9C1BB; }
.done-steps a { color: #9FD3AC; font-weight: 700; }
@media (max-width: 960px) {
	.twente-hero-grid { grid-template-columns: 1fr; }
	.twente-shots { max-width: 520px; }
	.steps3, .offer-grid { grid-template-columns: 1fr; }
}
@media (min-width: 961px) and (max-width: 1180px) {
	.offer-grid { grid-template-columns: repeat(2, 1fr); }
}