/* ---------------------------------------------------------------
   mapmyplant.com

   Mobiel is de basis. Grotere schermen krijgen er via min-width
   media queries kolommen en ruimte bij. Andersom (desktop eerst,
   mobiel als uitzondering) ging op de iPhone mis: kaders die
   ruimte opeten, tekst die de breedte in kruipt.
   --------------------------------------------------------------- */
:root{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --panel-soft:#f9fbfd;
  --text:#162033;
  --muted:#55627a;
  --line:#d9e2ee;
  --line-strong:#c7d3e3;
  --link:#1d5fd1;
  /* Was #1f9d62. Dat haalde met wit maar 3,5:1 en dat is te weinig
     voor kleine tekst. Deze tint zit op 5:1. */
  --accent:#14804d;
  --accent-soft:#e8f7ef;
  --shadow:0 14px 38px rgba(28,48,74,.08);
  --max:1120px;
  --r:14px;
}

*{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans","Liberation Sans",sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 520px at 10% 0%, rgba(29,95,209,.08), transparent 50%),
    radial-gradient(720px 460px at 90% 8%, rgba(20,128,77,.08), transparent 55%),
    linear-gradient(180deg, #fbfdff 0%, var(--bg) 100%);
  line-height:1.6;
  /* Lange woorden als "achtergrondrapport" braken de layout op 375px. */
  overflow-wrap:break-word;
}

a{color:var(--link); text-decoration:none}
a:hover{text-decoration:underline}

.skip{position:absolute; left:-9999px; background:var(--panel); padding:10px 14px; border-radius:10px}
.skip:focus{left:12px; top:12px; z-index:50}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:12px max(14px, env(safe-area-inset-left)) 40px max(14px, env(safe-area-inset-right));
}

/* Kaarten: op mobiel geen randen en geen schaduw, alleen een
   scheidingslijn. Dat scheelt aan beide zijden ruimte en maakt
   het één doorlopende verticale kolom in plaats van een stapel
   dozen. Vanaf 700px worden het weer echte kaarten. */
.card{
  padding:0 0 22px;
  border-bottom:1px solid var(--line);
  margin-bottom:22px;
}
.card:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}

.topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 0 14px;
  border-bottom:1px solid var(--line);
  margin-bottom:18px;
}

.brand{display:flex; gap:10px; align-items:center; min-width:0}
.brand .title{display:flex; flex-direction:column; min-width:0}
.brand strong{font-size:15px; letter-spacing:.2px}
.brand a{color:inherit}
.brand a:hover{text-decoration:none}
.brand span{
  font-size:12px; color:var(--muted);
  /* Op mobiel neemt de payoff een hele regel; die is daar niet nodig. */
  display:none;
}

.logo{
  height:32px; width:auto; max-width:150px;
  object-fit:contain; flex:0 0 auto;
  border-radius:5px; background:#fff;
}

nav{display:flex; align-items:center; gap:14px}
nav .navlink{display:none}
nav a{font-size:14px; color:var(--text); opacity:.9}
nav a:hover{opacity:1}
nav a[aria-current="page"]{opacity:1; font-weight:700; color:var(--accent)}

h1{
  margin:6px 0 10px;
  /* Schaalt mee met het scherm in plaats van vast op 36px. */
  font-size:clamp(26px, 7vw, 38px);
  line-height:1.15;
  letter-spacing:-.01em;
}
h2{margin:0 0 8px; font-size:clamp(18px, 4.6vw, 22px)}
h3{margin:0; font-size:15px}
.lead{color:var(--muted); font-size:clamp(15px, 4vw, 17px); margin:0 0 12px}

.kicker{
  font-size:12px; color:var(--accent);
  text-transform:uppercase; letter-spacing:.12em; font-weight:800;
  margin:0;
}

.hero{padding:4px 0 0}
.heroGrid{display:grid; gap:18px}
.heroGrid > *{min-width:0}

.chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:12px}
.chip{
  border:1px solid var(--line);
  background:var(--panel-soft);
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  /* Was nowrap. Dat duwde "Tientallen tot tienduizenden producten"
     op een iPhone buiten het scherm. */
  white-space:normal;
}

.cta{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.btn{
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  background:var(--accent);
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  font-size:14px;
  /* Volle breedte op mobiel: makkelijker te raken met een duim. */
  flex:1 1 100%;
  min-height:46px;
}
.btn.secondary{background:#fff; color:var(--text); font-weight:600}
.btn:hover{text-decoration:none; filter:brightness(1.04)}
.btn.navBtn{flex:0 0 auto; min-height:0; padding:9px 13px; font-size:13px; border-radius:10px}

.note{
  border-left:4px solid var(--accent);
  padding:12px 14px;
  background:var(--accent-soft);
  border-radius:12px;
  color:#2f4a5e;
  font-size:14px;
  margin-top:16px;
}
.note strong{color:var(--text)}

.grid{display:grid; gap:0}
.grid > *{min-width:0}

figure{margin:0}
.heroImg{
  border-radius:12px;
  border:1px solid var(--line);
  overflow:hidden;
  background:var(--panel-soft);
}
.heroImg img{display:block; width:100%; height:auto}

.mini{display:grid; gap:8px; margin-top:12px}
.mini .row{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:12px;
  padding:11px 12px;
  color:var(--muted);
  font-size:13px;
}
.mini .row b{color:var(--text)}

/* Bewijsblok: harde cijfers uit vijftien jaar praktijk. */
.proof{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; margin-top:16px}
.proof div{border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:11px 12px}
.proof b{display:block; font-size:19px; line-height:1.2}
.proof span{font-size:12px; color:var(--muted)}

ul{margin:10px 0 0; padding-left:20px}
li{margin:6px 0; color:var(--muted)}
li b{color:var(--text)}

/* De drie routes uit het businessmodel. */
.routes{display:grid; gap:14px; margin-top:14px; counter-reset:route}
.route{border:1px solid var(--line); background:var(--panel); border-radius:12px; padding:14px}
.route h3{display:flex; gap:9px; align-items:baseline}
.route h3::before{
  counter-increment:route;
  content:counter(route);
  flex:0 0 auto;
  width:22px; height:22px;
  display:grid; place-items:center;
  border-radius:999px;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:12px; font-weight:800;
}
.route p{margin:8px 0 0; color:var(--muted); font-size:14px}
.route .pays{margin-top:10px; padding-top:9px; border-top:1px dashed var(--line); font-size:13px}
.route .pays b{color:var(--text)}

/* Normenlijst. */
.norms{list-style:none; margin:12px 0 0; padding:0}
.norms li{margin:0; padding:9px 0; border-top:1px solid var(--line); color:var(--text); font-size:14px}
.norms li:first-child{border-top:0}
.norms li span{display:block; color:var(--muted); font-size:13px}

.faq h3{font-size:15px; margin-top:16px}
.faq h3:first-of-type{margin-top:10px}
.faq p{margin:5px 0 0; color:var(--muted); font-size:14px}

.profile{display:grid; grid-template-columns:64px 1fr; gap:12px; align-items:center}
.avatar{
  width:64px; height:64px; border-radius:999px;
  object-fit:cover; border:1px solid var(--line); background:var(--panel-soft);
}

.foot{
  margin-top:26px; padding-top:14px;
  border-top:1px solid var(--line);
  color:var(--muted); font-size:12px;
  display:grid; gap:5px;
}
.foot a{color:var(--muted)}

.muted{color:var(--muted)}

/* ---------------- productpagina ---------------- */

/* Schermafbeelding met onderschrift. Op mobiel randloos over de
   volle breedte, want een schermafbeelding in een kader in een
   kaart is op 390px niet meer te lezen. */
.shot{margin:14px 0 0}
.shot img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel-soft);
}
.shot figcaption{margin-top:8px; font-size:13px; color:var(--muted)}
.shot a{display:block}
.shot a:hover{text-decoration:none}
/* Een schermafbeelding van 1400px breed is op een telefoon klein. Daarom
   is hij aan te tikken; deze hint zegt dat, en verdwijnt op groot scherm. */
.shot figcaption::after{
  content:" Tik op de afbeelding om hem op ware grootte te openen.";
  color:var(--accent); font-weight:600;
}

/* Functieblok: kop, uitleg, schermafbeelding. */
.feature{padding-bottom:24px; margin-bottom:24px; border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0; margin-bottom:0; padding-bottom:0}
.feature .tag{
  display:inline-block;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft);
  padding:3px 9px; border-radius:999px; margin-bottom:8px;
}

/* Feitentabel: label links, waarde rechts. */
.facts{list-style:none; margin:12px 0 0; padding:0}
.facts li{
  display:grid; grid-template-columns:1fr auto; gap:12px;
  margin:0; padding:9px 0; border-top:1px solid var(--line);
  font-size:14px; color:var(--muted);
}
.facts li:first-child{border-top:0}
.facts li b{color:var(--text); font-weight:700; text-align:right}

/* Wat er nieuw is, met datum. */
.news{list-style:none; margin:12px 0 0; padding:0}
.news li{margin:0; padding:11px 0; border-top:1px solid var(--line); color:var(--muted); font-size:14px}
.news li:first-child{border-top:0}
.news .when{
  display:block; font-size:12px; color:var(--accent);
  font-weight:700; letter-spacing:.02em; margin-bottom:2px;
}
.news b{color:var(--text)}

/* ---------------- vanaf 700px: kaarten en twee kolommen -------- */
@media (min-width: 700px){
  .wrap{padding:24px 18px 56px}

  .card{
    border:1px solid var(--line);
    background:var(--panel);
    border-radius:var(--r);
    padding:20px;
    box-shadow:var(--shadow);
    margin-bottom:0;
  }
  .card:last-child{padding:20px}

  .topbar{
    border:1px solid var(--line);
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(8px);
    padding:12px 14px;
    border-radius:var(--r);
    position:sticky;
    top:12px;
    z-index:10;
    box-shadow:0 10px 28px rgba(28,48,74,.06);
    margin-bottom:22px;
  }
  .brand span{display:block}
  .shot figcaption::after{content:""}
  .logo{height:36px; max-width:180px}
  nav .navlink{display:flex; align-items:center; height:36px; font-size:13px}

  .btn{flex:0 0 auto; min-height:0; padding:11px 15px; font-size:13px}

  .grid{gap:14px; margin-top:14px}
  .two{grid-template-columns:1fr 1fr}
  .three{grid-template-columns:repeat(3,1fr)}
  .routes{grid-template-columns:repeat(3,1fr)}
  .proof{grid-template-columns:repeat(4,1fr)}

  .heroGrid{grid-template-columns:1.3fr .7fr; align-items:start}
  .profile{grid-template-columns:74px 1fr}
  .avatar{width:74px; height:74px}

  .foot{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:20px}
}

@media (min-width: 1000px){
  .wrap{padding:28px 18px 58px}
}