*{box-sizing:border-box}body{margin:0;background:#fffdf6;color:#153d3b;font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif}
a{color:inherit;text-decoration:none}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px max(6vw,20px);border-bottom:1px solid #153d3b18}
.btn{background:#2f6b4f;color:#fffdf6;font-weight:700;padding:11px 16px;border-radius:10px;display:inline-block}
.btn.big{padding:15px 26px;font-size:1.05rem}
main{max-width:1060px;margin:0 auto;padding:0 max(6vw,20px)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#9c5a2b;margin:0 0 8px}
.intro{padding:64px 0 40px;text-align:center}
.intro h1{font-size:clamp(34px,5.2vw,60px);line-height:1.08;margin:0 0 14px}.intro h1 em{color:#527a58;font-style:italic}
.lead{font-size:19px;max-width:62ch;margin:0 auto 22px;color:#2c4a3f}
.cta-row{display:flex;flex-direction:column;gap:8px;align-items:center}.fine{font-size:13px;color:#5c6b61}
.step{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:42px 0;border-top:1px solid #153d3b14}
.step h2{font-size:clamp(24px,3.3vw,36px);line-height:1.12;margin:4px 0 12px}.step h2 em{font-style:italic;color:#527a58}
.step p{color:#2c4a3f;max-width:54ch}
.mock{background:#153d3b;color:#fffdf6;border-radius:18px;padding:16px;box-shadow:0 18px 50px #153d3b26}
.step.alt .mock{background:linear-gradient(140deg,#1f5450,#2f6b4f)}
.mock-top{font-size:13px;color:#dfeaca;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:1px solid #ffffff22}
.dot{width:9px;height:9px;border-radius:50%;background:#8fd0a0;display:inline-block}
.mock-body{padding-top:12px}
.status{display:inline-block;background:#dfeaca;color:#1c3a24;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.status.good{background:#c7dcb4}
.follow{background:#dfeaca;color:#17302a;border-radius:10px;padding:10px;margin:10px 0;font-size:14px}
.bubble{background:#ffffff14;border-radius:12px;padding:9px 12px;margin:8px 0;font-size:14px}.bubble.you{background:#dfeaca;color:#17302a}
.share{font-size:18px;margin:4px 0 10px}.facts{list-style:none;padding:0;margin:0;display:grid;gap:8px}.facts li{background:#ffffff14;border-radius:10px;padding:9px 12px;font-size:14px;display:flex;justify-content:space-between;gap:10px}
.bar{background:#ffffff22;border-radius:999px;height:12px;overflow:hidden;margin:4px 0 12px}.bar span{display:block;height:100%;background:#8fd0a0}
.facts2{display:flex;gap:16px;font-size:14px;margin:0 0 10px}
.field{background:#ffffff14;border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14px}.gen{color:#dfeaca;font-weight:700;margin-top:10px}
.muted{color:#cdd8c2;font-size:13px}
.finish{text-align:center;padding:60px 0;border-top:1px solid #153d3b14}.finish h2{font-size:clamp(26px,3.6vw,40px);margin:0 0 10px}
footer{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;justify-content:space-between;padding:22px max(6vw,20px);border-top:1px solid #153d3b18;color:#5c6b61;font-size:14px;max-width:1060px;margin:30px auto 0}
@media(max-width:760px){.step{grid-template-columns:1fr;gap:18px;padding:34px 0}.step .mock{order:2}.intro{padding:44px 0 30px}.facts2{flex-wrap:wrap;gap:8px 16px}}
/* Leesbaarheid in de donkere voorbeeldkaarten: .step p mag de lichte tekst niet overschrijven */
.step .mock p{color:inherit;max-width:none}
.step .mock .follow{color:#17302a}
.step .mock .status{color:#1c3a24}
.step .mock .gen{color:#dfeaca}
.step .mock .muted{color:#e3eadb}
.head-links{display:flex;align-items:center;gap:14px}.head-links .login{font-weight:700;padding:11px 4px}
@media(max-width:440px){header{padding:14px 16px;gap:10px}.brand img{width:112px;height:auto}.head-links{gap:10px}.head-links .login{padding:9px 2px;font-size:15px}.head-links .btn{padding:9px 11px;font-size:14px}}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}.foot-links a{text-decoration:underline;text-underline-offset:3px}
.demo-link{font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* Kopknoppen minimaal 44 px hoog (tikdoel), ook op mobiel */
.head-links .login,.head-links .btn{min-height:44px;display:inline-flex;align-items:center}

/* 23-10: zelfde menu als de andere pagina's */
.head-nav{display:flex;gap:16px;flex:1;justify-content:center;flex-wrap:wrap}.head-nav a{font-weight:600;font-size:15px;padding:6px 2px}
@media(max-width:860px){.head-nav{display:none}}

/* 23-10: mobiel menu (menu.js, zelfde gedrag als homepage.css). Zonder JS blijft de knop verborgen. */
.menu-knop{display:none}
@media(max-width:860px){
header{position:relative}
html.menu-js .menu-knop{display:inline-flex;order:2;flex:0 0 auto;align-items:center;justify-content:center;gap:9px;min-width:44px;min-height:44px;margin:0;padding:0 12px;border:1.5px solid #153d3b40;border-radius:12px;background:transparent;color:#153d3b;font:inherit;font-size:14px;font-weight:650;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .15s,color .15s}
.menu-knop::before{content:"";flex:0 0 auto;width:18px;height:2px;border-radius:2px;background:currentColor;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}
html.menu-js .menu-knop:hover{background:#153d3b0d}
html.menu-js .menu-knop[aria-expanded=true]{background:#153d3b;color:#fffdf6;border-color:#153d3b}
.menu-knop:focus-visible{outline:2px solid #153d3b;outline-offset:2px}
.head-nav{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;margin:0;padding:6px max(6vw,20px) 14px;flex-direction:column;flex-wrap:nowrap;gap:0;background:#fffdf6;border-bottom:1px solid #153d3b18;box-shadow:0 18px 30px #153d3b1f}
.head-nav.is-open{display:flex;animation:menu-in .18s ease-out}
.head-nav a{display:flex;align-items:center;min-height:48px;padding:0 4px;border-top:1px solid #153d3b1a;font-size:17px}
.head-nav a:first-child{border-top:0}
.head-nav a:hover{color:#1f5450;text-decoration:underline;text-underline-offset:4px}
.head-nav a:focus-visible{outline:2px solid #153d3b;outline-offset:-2px;border-radius:6px}
}
/* Smal (t/m 760 px): twee regels — logo + Menu, daaronder Inloggen/account aanmaken. Ook zonder JS dezelfde hoogte: geen verschuiving bij laden. */
@media(max-width:760px){
header{flex-wrap:wrap;row-gap:6px;padding-top:8px;padding-bottom:8px}
.brand{order:0}
html.menu-js .menu-knop{order:1;margin-left:auto}
.head-links{order:2;flex:0 0 100%;width:100%;justify-content:flex-end}
.head-links .btn{flex:1 1 auto;max-width:260px;text-align:center;justify-content:center}
}
@media(max-width:440px){.head-nav{padding-left:16px;padding-right:16px}}
@keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.head-nav.is-open{animation:none}.menu-knop{transition:none}}