/* Conversieblok en mobiele actiebalk voor de verhuurpagina's (sept 2026).
   Gebruikt de tokens van de site (--accent, --ink, --bg-2, --line). Geen animatie:
   dit zijn elementen die elke bezoeker op elke pagina ziet. */

.bl-conv{background:var(--bg-2,#f5f5f7);border:1px solid var(--line,#d2d2d7);border-radius:18px;padding:26px 26px 22px;margin:26px 0 34px;max-width:720px}
.bl-conv .bl-kicker{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent,#0066cc);margin:0 0 8px}
.bl-conv h2,.bl-conv .bl-kop{font-size:24px;line-height:1.2;letter-spacing:-.01em;margin:0 0 10px;color:var(--ink,#1d1d1f)}
.bl-conv p{margin:0 0 14px;font-size:16px;line-height:1.5;color:var(--ink-2,#424245)}
.bl-conv ul{list-style:none;padding:0;margin:0 0 18px;display:grid;gap:6px}
.bl-conv li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--ink-2,#424245)}
.bl-conv li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--accent,#0066cc)}
.bl-conv .bl-acties{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.bl-conv .bl-acties .btn{font-size:16px}
.bl-conv .bl-contact{font-size:14.5px;color:var(--ink-3,#6e6e73);margin:0}
.bl-conv .bl-contact a{color:var(--ink,#1d1d1f);text-decoration:none;font-weight:500;white-space:nowrap}
.bl-conv .bl-contact a:hover{text-decoration:underline}

/* Telefoon naast een knop, op elke breedte */
.bl-direct{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;font-size:15px;color:var(--ink-3,#6e6e73);margin:12px 0 0}
.bl-direct a{color:var(--ink,#1d1d1f);text-decoration:none;font-weight:500;white-space:nowrap}
.bl-direct a:hover{text-decoration:underline}

/* Mobiele actiebalk: alleen onder 780px, drie knoppen, nooit over de inhoud heen */
.bl-sticky{display:none}
@media (max-width:780px){
  .bl-sticky{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:150;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(251,251,253,.96);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    border-top:1px solid rgba(0,0,0,.08)}
  .bl-sticky a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:980px;
    font-size:15px;font-weight:500;text-decoration:none;color:var(--ink,#1d1d1f);background:#fff;border:1px solid var(--line,#d2d2d7)}
  .bl-sticky a.primair{background:var(--accent,#0066cc);color:#fff;border-color:var(--accent,#0066cc)}
  .bl-sticky svg{width:16px;height:16px;flex-shrink:0}
  body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
  /* het navpilletje dubbelt met de actiebalk en breekt op smalle schermen in twee regels */
  nav.top .nav-cta,nav.top a.btn{display:none}
}

/* "Zo werken wij": vier vaste beloftes die we waarmaken (prijs vooraf, operator, waar hij vaak staat, één robot per dag) */
.bl-waarom{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0}
.bl-waarom>div{background:var(--bg-card,#fff);border:1px solid var(--line,#d2d2d7);border-radius:16px;padding:20px 20px 18px}
.bl-waarom h3{font-size:16.5px;line-height:1.3;margin:0 0 8px;color:var(--ink,#1d1d1f);letter-spacing:-.01em}
.bl-waarom p{font-size:14.5px;line-height:1.5;color:var(--ink-2,#424245);margin:0}
.bl-waarom .bl-num{display:inline-block;font-size:12px;font-weight:600;color:var(--accent,#0066cc);margin-bottom:10px;letter-spacing:.04em;text-transform:uppercase}
@media (max-width:980px){.bl-waarom{grid-template-columns:repeat(2,1fr)}}
.narrow .bl-waarom{grid-template-columns:repeat(2,1fr)}
@media (max-width:560px){.bl-waarom{grid-template-columns:1fr}}

/* Regel bij het formulier: eerlijk over drukte, plus wie je aan de lijn krijgt */
.bl-form-noot{font-size:14px;line-height:1.5;color:var(--ink-3,#6e6e73);margin:14px 0 0;max-width:560px}
.bl-form-noot b{color:var(--ink,#1d1d1f);font-weight:500}