/* WP24 — stijl voor de campagne-landingspagina's (kale pagina's onder /start).
   Alleen tokens uit tokens.css; werkt in beide thema's (glass en licht). */

/* site.css wordt bewust niet geladen; deze twee resets zijn dan nodig:
   zonder border-box geeft width:100% + padding horizontale overflow op mobiel
   (visuele check V1: scrollWidth 419 > 390). */
*, *::before, *::after { box-sizing:border-box; }
body.start { margin:0; }

.start { min-height:100vh; display:flex; flex-direction:column;
  background:var(--bg); color:var(--tx-1); }
.start-in { width:100%; max-width:680px; margin:0 auto; padding:20px 20px 32px;
  display:flex; flex-direction:column; flex:1; box-sizing:border-box; }

/* kop met alleen logo */
.start-kop { display:flex; align-items:center; justify-content:space-between;
  padding:6px 0 22px; }
.start-merk { display:inline-flex; align-items:center; gap:10px;
  color:var(--tx-1); text-decoration:none; font-family:var(--f-display);
  font-size:17px; letter-spacing:-.01em; }
.start-merk img { width:34px; height:34px; }
.start-merk span { color:var(--accent); }

/* hero */
.start-hero { padding:18px 0 6px; }
.start-hero .eyebrow { color:var(--accent);
  font-size:13px; text-transform:uppercase; letter-spacing:.14em; margin:0 0 10px; }
.start-hero h1 { font-family:var(--f-display); font-size:clamp(28px,7vw,40px);
  line-height:1.14; letter-spacing:-.02em; margin:0 0 12px; }
.start-sub { color:var(--tx-3); font-size:17px; line-height:1.5; margin:0; }

/* drie stappen */
.start-stappen { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:12px; }
.start-stap { display:flex; gap:14px; align-items:flex-start;
  background:var(--panel); border:1px solid var(--panel-rand); border-radius:var(--r);
  padding:14px 16px; box-shadow:var(--schaduw); }
.start-stap-icoon { flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background:var(--accent-dim); color:var(--accent); }
.start-stap-icoon .icoon { width:22px; height:22px; fill:none;
  stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.start-stap > span:last-child { font-size:16px; line-height:1.45; padding-top:7px; }

/* grote knop */
.start-cta { margin:28px 0 0; text-align:center; }
.start-knop { display:flex; width:100%; max-width:100%; box-sizing:border-box; align-items:center; justify-content:center;
  gap:10px; padding:17px 22px; border-radius:var(--r-s);
  background:var(--accent); color:var(--accent-tx); text-decoration:none;
  font-family:var(--f-display); font-weight:700; font-size:18px;
  box-shadow:var(--schaduw); }
.start-knop:hover, .start-knop:focus-visible { background:var(--accent-2); }
.start-knop-pijl { font-size:20px; line-height:1; }
.start-cta-sub { color:var(--tx-4); font-size:14px; margin:10px 0 0; }
.start-knop-klein { padding:11px 16px; border-radius:var(--r-s); border:none;
  background:var(--accent); color:var(--accent-tx);
  font-family:var(--f-display); font-weight:700; font-size:15px; cursor:pointer; }

/* vragen */
.start-vragen { margin-top:40px; }
.start-vragen h2 { font-family:var(--f-display); font-size:21px;
  letter-spacing:-.01em; margin:0 0 6px; }
.start-vraag { border-top:1px solid var(--lijn); padding:14px 0; }
.start-vraag:last-child { border-bottom:1px solid var(--lijn); }
.start-vraag h3 { font-size:16px; margin:0 0 6px; }
.start-vraag p { color:var(--tx-3); font-size:15px; line-height:1.5; margin:0; }

/* termijnhulp (alleen bezwaar) */
.start-termijn { margin-top:40px; background:var(--panel);
  border:1px solid var(--panel-rand); border-radius:var(--r);
  padding:18px 18px 16px; box-shadow:var(--schaduw); }
.start-termijn h2 { font-family:var(--f-display); font-size:19px; margin:0 0 6px; }
.start-termijn p { color:var(--tx-3); font-size:15px; line-height:1.5; margin:0 0 12px; }
.start-termijn-form { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.start-termijn-form label { font-size:14px; color:var(--tx-2); flex-basis:100%; }
.start-termijn-form input[type="date"] { flex:1 1 150px; padding:11px 12px;
  border-radius:var(--r-s); border:1px solid var(--lijn-2);
  background:var(--bg-1); color:var(--tx-1); font-size:15px; }
.start-termijn-uit { margin:14px 0 0 !important; font-size:16px !important;
  color:var(--tx-1) !important; }
.start-termijn-uit b { color:var(--accent); }
.start-termijn-sub { font-size:13px !important; color:var(--tx-4) !important;
  margin:8px 0 0 !important; }

/* vertrouwensblok */
.start-vertrouwen { margin-top:40px; background:var(--panel);
  border:1px solid var(--panel-rand); border-radius:var(--r); padding:18px;
  box-shadow:var(--schaduw); }
.start-vertrouwen h2 { font-family:var(--f-display); font-size:19px; margin:0 0 10px; }
.start-vertrouwen ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.start-vertrouwen li { display:flex; gap:10px; align-items:flex-start;
  color:var(--tx-2); font-size:15px; line-height:1.45; }
.start-vertrouwen li .icoon { flex:0 0 auto; width:20px; height:20px; margin-top:2px;
  fill:none; stroke:var(--groen); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; }
.start-vertrouwen a { color:var(--tx-2); }

/* voet */
.start-voet { margin-top:auto; padding-top:34px; }
.start-voet p { color:var(--tx-4); font-size:13px; line-height:1.5; margin:0 0 6px; }
.start-voet a { color:var(--tx-3); }

/* alles globaal border-box: voorspelbare breedtes op smalle schermen */
.start *, .start *::before, .start *::after { box-sizing:border-box; }

/* kleine schermen: alles zit al op 1 kolom; knoppen iets compacter */
@media (max-width:420px) {
  .start-in { padding:16px 16px 28px; }
  .start-knop { font-size:17px; padding:16px 18px; }
}

/* bewerkingsvriendelijk: geen animaties; respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .start * { transition:none !important; animation:none !important; }
}

/* WP30 (Aether #466) — V7: raakvlak ≥ 32px op smalle schermen (de landings-
   pagina's laden deze eigen stijl, niet site.css; vandaar een eigen regel). */
@media (max-width:400px){
  .start-in a:not(.start-knop){padding-top:10px;padding-bottom:10px}
}

/* WP40e (Aether #489) — beslisboom-voorvertoning op de verkeersboete-landing. */
ul.start-boom-antwoorden{list-style:none;padding:0;margin:10px 0}
ul.start-boom-antwoorden li{background:var(--vlak-2,rgba(255,255,255,.06));border:1px solid var(--lijn-2);border-radius:var(--r-s);padding:10px 14px;margin:8px 0}