/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */
/* =========================================================
   J&J Step Forward — blokkenbibliotheek (basis voor jj-pages.css)
   Donker standaard, licht via [data-theme="light"].
   Op de site: data-theme op <html>, gezet door de bestaande
   .jj-theme-toggle + prefers-color-scheme.
   ========================================================= */

.jj{
  --bg:#0F1013; --bg2:#14161A; --card:#1B1D21; --card2:#23262B; --line:#2A2D33;
  --h:#FFFFFF; --t:#CFD3D8; --m:#9AA1AA; --num:#4A4F57;
  --lab:#8ECDEE; --blue:#099BDD; --blue-t:#3DB3EA; --blue-deep:#0B4D6E;
  --blue-soft:rgba(9,155,221,.14); --blue-line:rgba(9,155,221,.45);
  --or:#FFA420; --or-h:#FFB648; --or-soft:rgba(255,164,32,.14); --on-or:#0F1013; --on-blue:#FFFFFF;
  --chev-1:#0B1922; --chev-2:#0B2534; --chev-3:#0B3449; --chev-4:#0B4560; --chev-c:#0B4D6E;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.25);
  --photo:#2A2D33;
  font-family:Tahoma,Verdana,"Segoe UI",system-ui,sans-serif;
  font-size:17px; line-height:1.65; color:var(--t); background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.jj[data-theme="light"],:is(html[data-theme="light"],body.light-mode) .jj{
  --bg:#F5F7FA; --bg2:#EBF0F5; --card:#FFFFFF; --card2:#F3F6FA; --line:#DCE4EC;
  --h:#0F1013; --t:#3A3F47; --m:#5F6670; --num:#B7BEC7;
  --lab:#0A6E9E; --blue:#099BDD; --blue-t:#0A6E9E; --blue-deep:#E1EAF2;
  --blue-soft:rgba(9,155,221,.10); --blue-line:rgba(9,155,221,.40);
  --or:#FFA420; --or-h:#F29300; --or-soft:rgba(255,164,32,.20); --on-or:#0F1013; --on-blue:#FFFFFF;
  --chev-1:#EAF2F8; --chev-2:#DEEBF5; --chev-3:#CFE3F2; --chev-4:#BCD9EE; --chev-c:#C4E0F3;
  --shadow:0 1px 2px rgba(15,16,19,.06),0 8px 24px rgba(15,16,19,.06);
  --photo:#DCE4EC;
}
.jj *,.jj *::before,.jj *::after{box-sizing:border-box}
  .jj.jj :where(h1,h2,h3,h4,h5,h6){color:var(--h);margin:0;padding:0;line-height:1.2;font-weight:700;font-family:inherit;text-transform:none;letter-spacing:normal}
  .jj.jj :where(h1){font-size:clamp(34px,4.2vw,54px);letter-spacing:-.01em}
  .jj.jj :where(h2){font-size:clamp(28px,3vw,38px)}
  .jj.jj :where(h3){font-size:21px}
  .jj.jj :where(h4){font-size:17px}
  .jj.jj :where(p){margin:0;font-size:inherit;line-height:inherit}
  .jj.jj :where(a){color:var(--blue-t);text-decoration:underline;text-underline-offset:2px}
.jj a:focus-visible,.jj button:focus-visible,.jj input:focus-visible,.jj summary:focus-visible,.jj textarea:focus-visible,.jj select:focus-visible{outline:3px solid var(--or);outline-offset:3px}
  .jj.jj :where(strong){color:var(--h)}
  .jj.jj :where(mark){background:var(--or-soft);color:var(--h);padding:0 4px;border-radius:4px}

  /* thema-resets: Blocksy/Elementor-stijlen voor tabellen, citaten en lijsten neutraliseren */
  .jj.jj :where(table){border:0;margin:0;background:none;width:100%}
  .jj.jj :where(thead,tbody,tfoot,tr,th,td,caption){border:0;background:none}
  .jj.jj :where(blockquote){border:0;padding:0;margin:0;font-style:normal;quotes:none;background:none}
  .jj.jj :where(li){margin:0}
  .jj.jj :where(figure){margin:0}
  .jj.jj :where(summary){font-family:inherit}

/* ---------- layout ---------- */
.jj .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.jj .narrow{max-width:760px}
.jj .sec{position:relative;padding:96px 0;overflow:hidden}
.jj .sec.tight{padding:64px 0}
.jj .sec.alt{background:var(--bg2)}
.jj .stack{display:flex;flex-direction:column}
.jj .row{display:flex;align-items:center}
.jj .g4{gap:4px}.jj .g8{gap:8px}.jj .g12{gap:12px}.jj .g16{gap:16px}.jj .g20{gap:20px}.jj .g24{gap:24px}.jj .g32{gap:32px}.jj .g48{gap:48px}.jj .g64{gap:64px}
.jj .wrapx{flex-wrap:wrap}
.jj .split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.jj .split.even{grid-template-columns:repeat(2,minmax(0,1fr))}
.jj .split.wide-r{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
.jj .cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.jj .cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.jj .cols4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.jj .mt8{margin-top:8px}.jj .mt12{margin-top:12px}.jj .mt16{margin-top:16px}.jj .mt24{margin-top:24px}.jj .mt32{margin-top:32px}.jj .mt48{margin-top:48px}
.jj .rel{position:relative;z-index:1}
@media (max-width:900px){
  .jj .split,.jj .split.even,.jj .split.wide-r,.jj .cols2,.jj .cols3,.jj .cols4{grid-template-columns:minmax(0,1fr)}
  .jj .sec{padding:64px 0}
  .jj .wrap{padding:0 20px}
}

/* ---------- tekst ---------- */
.jj .lab{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lab)}
.jj .lead{font-size:19px;line-height:1.6;color:var(--t);max-width:620px}
.jj .small{font-size:14px;line-height:1.55}
.jj .muted{color:var(--m)}
.jj .note{font-size:14px;color:var(--m);font-style:italic}
.jj .acc{color:var(--blue)}
.jj[data-theme="light"] .acc,:is(html[data-theme="light"],body.light-mode) .jj .acc{color:#0A6E9E}
.jj .amp{color:var(--blue-t)}
.jj .dash{width:42px;height:6px;border-radius:3px;background:var(--blue)}
.jj .dash.or{background:var(--or)}
.jj .big{font-size:44px;font-weight:700;line-height:1;color:var(--h)}
.jj .num{font-size:28px;font-weight:700;color:var(--num);line-height:1}

/* ---------- knoppen ---------- */
.jj .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 24px;border-radius:10px;font:inherit;font-weight:700;font-size:16px;line-height:1;text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap}
.jj .btn-or{background:var(--or);color:var(--on-or)}
.jj .btn-or:hover{background:var(--or-h)}
.jj .btn-blue{background:var(--blue);color:#fff}
.jj .btn-ghost{background:transparent;border-color:var(--line);color:var(--h)}
.jj .btn-ghost:hover{border-color:var(--blue)}
.jj .btn-sm{min-height:42px;padding:0 16px;font-size:15px}
.jj .btn .ico{width:18px;height:18px}
.jj .tlink{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--blue-t);text-decoration:none}
.jj .tlink:hover{text-decoration:underline;text-underline-offset:4px}
.jj .tlink .ico{width:18px;height:18px}

/* ---------- iconen ---------- */
.jj .ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.jj .tile{width:46px;height:46px;border-radius:11px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.jj .tile.sm{width:36px;height:36px;border-radius:9px}
.jj .tile.sm .ico{width:18px;height:18px}
.jj .tile.or{background:var(--or);color:var(--on-or)}
.jj .tile.soft{background:var(--blue-soft);color:var(--blue-t)}
.jj .tile.ghost{background:var(--card2);color:var(--blue-t);border:1px solid var(--line)}
.jj .circ{width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}

/* ---------- kaarten ---------- */
.jj .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px;box-shadow:var(--shadow)}
.jj .card.flat{box-shadow:none}
.jj .card.hl{background:var(--blue);border-color:var(--blue);color:#fff}
.jj .card.hl h3,.jj .card.hl h4,.jj .card.hl strong{color:#fff}
.jj .card.hl .tile{background:#fff;color:var(--blue)}
.jj .card.or{border:2px solid var(--or)}
.jj .card.pad-l{padding:40px}
.jj .card.pad-s{padding:20px}

/* ---------- labels/chips ---------- */
.jj .badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;font-size:13px;font-weight:700;white-space:nowrap}
.jj .badge.blue{background:var(--blue-soft);color:var(--blue-t)}
.jj .badge.or{background:var(--or);color:var(--on-or)}
.jj .badge.or-soft{background:var(--or-soft);color:var(--h)}
.jj .badge.grey{background:var(--card2);color:var(--m);border:1px solid var(--line)}
.jj .chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--h);text-decoration:none;font-size:15px;font-weight:700}
.jj .chip:hover{border-color:var(--blue)}

/* ---------- lijsten ---------- */
.jj .checks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.jj .checks li{display:flex;gap:12px;align-items:flex-start}
.jj .checks li .ico{color:var(--blue-t);margin-top:3px;width:20px;height:20px}
.jj .checks.or li .ico{color:var(--or)}
.jj .crosses li .ico{color:var(--m)}

/* ---------- callouts ---------- */
.jj .callout{display:flex;gap:16px;align-items:flex-start;padding:22px 24px;border-radius:14px;background:var(--blue);color:#fff}
.jj .callout strong{color:#fff}
.jj .callout.or{background:var(--or-soft);color:var(--h);border:1px solid var(--or)}
.jj .callout.soft{background:var(--blue-soft);color:var(--h);border:1px solid var(--blue-line)}

/* ---------- chevrons (merkmotief, zoals de slides: gelaagd vanuit rechts) ---------- */
.jj .chev{position:absolute;top:0;right:0;bottom:0;height:100%;width:62%;z-index:0;pointer-events:none}
.jj .chev.wide{width:72%}
.jj .chev path{stroke-linejoin:round;stroke-width:90}
.jj .chev .l1{fill:var(--chev-1);stroke:var(--chev-1)}
.jj .chev .l2{fill:var(--chev-2);stroke:var(--chev-2)}
.jj .chev .l3{fill:var(--chev-3);stroke:var(--chev-3)}
.jj .chev .l4{fill:var(--chev-4);stroke:var(--chev-4)}
.jj .chev .lb{fill:var(--blue);stroke:var(--blue)}
@media (max-width:900px){.jj .chev{width:100%;opacity:.5}}

/* ---------- foto placeholders ---------- */
.jj .photo{position:relative;border-radius:18px;background:var(--photo);display:flex;align-items:flex-end;overflow:hidden;min-height:220px;color:var(--m)}
.jj .photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;font-size:14px;text-align:center;padding:20px}
.jj .photo .ph .ico{width:34px;height:34px;opacity:.7}
.jj .avatar{width:48px;height:48px;border-radius:50%;background:var(--photo);flex:none;display:flex;align-items:center;justify-content:center;color:var(--m);font-weight:700;font-size:15px}
.jj .avatar.lg{width:72px;height:72px;font-size:20px}

/* ---------- tabellen ---------- */
.jj .tbl-box{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.jj .tbl{width:100%;border-collapse:collapse;font-size:16px}
.jj .tbl th,.jj .tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.jj .tbl thead th{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--lab);background:var(--card2)}
.jj .tbl tbody tr:last-child td,.jj .tbl tbody tr:last-child th{border-bottom:0}
.jj .tbl tbody th{color:var(--h);font-weight:700}
.jj .tbl .us{background:var(--blue-soft)}
.jj .tbl caption{caption-side:bottom;text-align:left;padding:12px 20px;font-size:14px;color:var(--m)}

/* ---------- formulieren ---------- */
.jj .field{display:flex;flex-direction:column;gap:6px}
.jj .field label{font-size:14px;font-weight:700;color:var(--h)}
.jj .input{height:50px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--h);padding:0 14px;font:inherit;font-size:16px;width:100%}
.jj textarea.input{height:110px;padding:12px 14px;resize:vertical}
.jj .input::placeholder{color:var(--m)}
.jj .input:focus{border-color:var(--blue);outline:none}

/* ---------- FAQ ---------- */
.jj .faq details{border-bottom:1px solid var(--line)}
.jj .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 0;font-weight:700;color:var(--h);font-size:18px}
.jj .faq summary::-webkit-details-marker{display:none}
.jj .faq summary .ico{color:var(--blue-t);transition:transform .2s}
.jj .faq details[open] summary .ico{transform:rotate(180deg)}
.jj .faq .ans{padding:0 0 22px;max-width:720px}


/* =========================================================
   Componenten (uit de blokkenbibliotheek)
   ========================================================= */
.jj .crumbs{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--m);flex-wrap:wrap}
.jj .crumbs a{color:var(--m);text-decoration:none}.jj .crumbs a:hover{color:var(--blue-t)}
.jj .stars{display:flex;gap:2px;color:var(--or)}.jj .stars .ico{width:18px;height:18px}
.jj .trust{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:15px;color:var(--t)}

/* B05 hero + dashboard */
.jj .hero{padding:88px 0 96px}
.jj .dash-ui{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.jj .dash-top{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);font-size:14px;color:var(--h)}
.jj .dots{display:flex;gap:6px}.jj .dots i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.jj .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:20px}
.jj .kpi{background:var(--card2);border-radius:12px;padding:14px 16px}
.jj .kpi .v{font-size:26px;font-weight:700;color:var(--h);line-height:1.1}
.jj .kpi .k{font-size:12px;color:var(--m)}
.jj .kpi .d{font-size:12px;font-weight:700;color:var(--blue-t)}
.jj .bars{display:flex;align-items:flex-end;gap:10px;height:120px;padding:0 20px 8px}
.jj .bars i{flex:1;display:block;border-radius:6px 6px 0 0;background:var(--blue-soft);border:1px solid var(--blue-line);border-bottom:0}
.jj .bars i.on{background:var(--blue);border-color:var(--blue)}
.jj .bars-x{display:flex;gap:10px;padding:0 20px 18px;font-size:11px;color:var(--m)}.jj .bars-x span{flex:1;text-align:center}

/* B09 trustbalk */
.jj .tbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden}
.jj .tbar > div{display:flex;gap:14px;align-items:center;padding:22px 24px;border-right:1px solid var(--line)}
.jj .tbar > div:last-child{border-right:0}
.jj .tbar b{display:block;color:var(--h);font-size:18px;line-height:1.2}
.jj .tbar span{font-size:14px;color:var(--m)}

/* B37 kanalen */
.jj .q{display:flex;gap:10px;align-items:center;border-radius:999px;background:var(--bg);border:1px solid var(--line);padding:10px 16px;font-size:14px;color:var(--h)}
.jj .q .ico{width:16px;height:16px;color:var(--m)}
.jj .joinbar{margin-top:20px;border-radius:12px;padding:16px 20px;text-align:center;border:1px dashed var(--blue-line);color:var(--h);font-weight:700}

/* B34 klantreis */
.jj .journey{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:56px;list-style:none;margin:0;padding-left:0}
.jj .journey .zone{position:absolute;top:0;height:40px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border-radius:10px}
.jj .journey .z1{left:0;width:calc(80% - 3px);background:var(--card2);color:var(--m);border:1px dashed var(--line)}
.jj .journey .z2{right:0;width:calc(20% - 13px);background:var(--or);color:var(--on-or)}
.jj .journey .card{padding:22px;display:flex;flex-direction:column;gap:12px}
.jj .journey .via{font-size:12px;color:var(--m)}

/* B27 maandcyclus */
.jj .proc{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.jj .proc::before{content:"";position:absolute;left:10%;right:10%;top:26px;border-top:2px dashed var(--blue-line)}
.jj .proc .it{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.jj .proc .circ{position:relative;z-index:1;box-shadow:0 0 0 8px var(--bg)}
.jj .sec.alt .proc .circ{box-shadow:0 0 0 8px var(--bg2)}
.jj .proc .card{padding:20px;width:100%}
.jj .proc .num{font-size:15px}

/* B33 zigzag + gelaagde chevrons (B35) */
.jj .zz{display:flex;flex-direction:column;gap:80px}
.jj .zz .split.rev > :first-child{order:2}
.jj .layers{list-style:none;margin:0;padding:0;display:flex;min-height:200px}
.jj .ly{position:relative;flex:1 1 0;min-width:0;margin-left:-40px;padding:24px 56px 24px 68px;display:flex;flex-direction:column;justify-content:center;gap:8px;clip-path:polygon(56px 0,100% 0,100% 100%,56px 100%,0 50%)}
.jj .ly:first-child{margin-left:0;padding-left:28px;clip-path:none;border-radius:18px 0 0 18px}
.jj .ly:last-child{border-radius:0 18px 18px 0;padding-right:24px}
.jj .ly strong{font-size:16px;line-height:1.35}
.jj .ly.y1{background:var(--chev-2)}.jj .ly.y2{background:var(--chev-3)}.jj .ly.y3{background:var(--chev-4)}
.jj .ly.yo{background:var(--or)}
.jj .ly.yo strong,.jj .ly.yo .lab{color:var(--on-or)}

/* verticale flow (stappen met verbindingslijn) */
.jj .vflow{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;position:relative}
.jj .vflow::before{content:"";position:absolute;left:44px;top:40px;bottom:40px;border-left:2px dashed var(--blue-line)}
.jj .vflow li{position:relative;display:flex;gap:18px;align-items:center;padding:18px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.jj .vflow li.end{border:2px solid var(--or)}
.jj .vflow strong{display:block;color:var(--h);font-size:17px}
.jj .vflow .tile{position:relative;z-index:1}

/* B39 AI-zichtbaarheid */
.jj .rank{width:100%;border-collapse:collapse;font-size:15px}
.jj .rank th,.jj .rank td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left}
.jj .rank thead th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--lab)}
.jj .rank tbody tr:last-child td{border-bottom:0}
.jj .yes,.jj .no{display:inline-flex;width:28px;height:28px;border-radius:50%;align-items:center;justify-content:center}
.jj .yes{background:var(--blue);color:#fff}
.jj .yes .ico,.jj .no .ico{width:16px;height:16px}
.jj .no{background:var(--card2);color:var(--m);border:1px solid var(--line)}
.jj .meter{height:14px;border-radius:7px;background:var(--card2);overflow:hidden;border:1px solid var(--line)}
.jj .meter i{display:block;height:100%;background:var(--or)}

/* B46 gratis check */
.jj .lm{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;border-radius:20px;padding:40px;background:var(--card);border:2px solid var(--or)}

/* B26 stapbalkjes */
.jj .steprow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0}
.jj .steprow .sb{height:36px;border-radius:10px 10px 0 0;background:var(--blue-deep);color:var(--h);font-size:13px;font-weight:700;letter-spacing:.09em;display:flex;align-items:center;padding:0 18px}
.jj .steprow .sb.last{background:var(--blue);color:#fff}
.jj .steprow .card{border-radius:0 0 16px 16px;border-top:0;height:100%}

/* B30 prijs */
.jj .price{display:flex;flex-direction:column;gap:6px}
.jj .price .amt{font-size:64px;font-weight:700;color:var(--h);line-height:1}
.jj .price .from{font-size:20px;font-weight:700;color:var(--m)}
.jj .price hr{border:0;border-top:1px solid var(--line);margin:20px 0}

/* B10 reviews */
.jj .review{display:flex;flex-direction:column;gap:16px;height:100%;margin:0}
.jj .review blockquote{margin:0;flex:1}
.jj .who{display:flex;gap:12px;align-items:center}

/* B15 wie zijn wij */
.jj .person .photo{min-height:320px}

/* B49 cluster */
.jj .cluster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.jj .cl-list{list-style:none;margin:0;padding:0}
.jj .cl-list li a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--h);text-decoration:none;font-weight:700}
.jj .cl-list li a:hover{color:var(--blue-t)}
.jj .cl-list li a .ico{color:var(--blue-t);width:18px;height:18px}

/* B43 CTA-band */
.jj .ctaband{position:relative;overflow:hidden;border-radius:24px;background:var(--card);border:1px solid var(--line);padding:72px 64px}

/* B44 persoonlijke CTA */
.jj .faces{display:flex}.jj .faces .avatar{width:64px;height:64px;font-size:18px;border:3px solid var(--card)}.jj .faces .avatar+.avatar{margin-left:-16px}
.jj .online{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--t)}
.jj .online i{width:10px;height:10px;border-radius:50%;background:var(--or);display:block}

/* CTA-rij onder een blok (primaire CTA herhalen) */
.jj .cta-row{display:flex;align-items:center;justify-content:center;gap:16px 24px;flex-wrap:wrap;margin-top:48px;text-align:center}
.jj .cta-row p{color:var(--h);font-weight:700;font-size:18px}

/* korte genummerde stappen in een kaart */
.jj .ministeps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:s}
.jj .ministeps li{display:flex;gap:12px;align-items:flex-start}
.jj .ministeps li::before{counter-increment:s;content:counter(s);flex:none;width:26px;height:26px;border-radius:8px;background:var(--blue-deep);color:var(--h);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}


/* B28 tijdlijn */
.jj .tl{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:44px;list-style:none;margin:0;padding-left:0}
.jj .tl::before{content:"";position:absolute;left:0;right:0;top:12px;height:4px;border-radius:2px;background:var(--blue)}
.jj .tl .m{position:relative;display:flex;flex-direction:column;gap:8px}
.jj .tl .m::before{content:"";position:absolute;top:-40px;left:0;width:20px;height:20px;border-radius:50%;background:var(--bg);border:4px solid var(--blue)}
.jj .sec.alt .tl .m::before{background:var(--bg2)}
.jj .tl .m.end::before{background:var(--or);border-color:var(--or)}
.jj .tl .when{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--lab)}

/* device-mockup (laptop + telefoon) */
.jj .device{position:relative;padding:0 0 40px 0}
.jj .laptop{border-radius:14px 14px 0 0;border:10px solid #2A2D33;border-bottom:0;background:var(--card);overflow:hidden;aspect-ratio:16/10}
.jj .laptop-base{height:16px;margin:0 -28px;border-radius:0 0 14px 14px;background:#2A2D33}
.jj .mini{display:flex;flex-direction:column;height:100%}
.jj .mini .bar{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.jj .mini .logo{width:64px;height:10px;border-radius:5px;background:var(--blue)}
.jj .mini .nav{display:flex;gap:8px}.jj .mini .nav i{display:block;width:28px;height:6px;border-radius:3px;background:var(--line)}
.jj .mini .body{flex:1;display:grid;grid-template-columns:1.2fr 1fr;gap:14px;padding:18px 14px;align-items:center}
.jj .mini .ln{height:9px;border-radius:5px;background:var(--line);margin-bottom:8px}
.jj .mini .ln.h{height:16px;background:var(--h);opacity:.85}
.jj .mini .btnm{width:90px;height:22px;border-radius:6px;background:var(--or);margin-top:10px}
.jj .mini .img{height:100%;min-height:90px;border-radius:10px;background:var(--blue-soft);border:1px solid var(--blue-line)}
.jj .phone-s{position:absolute;right:-8px;bottom:0;width:30%;max-width:150px;aspect-ratio:9/18;border-radius:22px;border:7px solid #2A2D33;background:var(--card);overflow:hidden;padding:14px 10px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow)}
.jj .phone-s .ln{height:7px;border-radius:4px;background:var(--line)}
.jj .phone-s .ln.h{height:12px;background:var(--h);opacity:.85}
.jj .phone-s .btnm{height:18px;border-radius:5px;background:var(--or);margin-top:6px}
.jj .float-kpi{position:absolute;left:-24px;bottom:56px;display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);max-width:240px}
.jj .float-kpi .v{font-size:20px;font-weight:700;color:var(--h);line-height:1.1}
.jj .float-kpi .k{font-size:12px;color:var(--m)}

/* rekensom */
.jj .sumrows{display:flex;flex-direction:column;gap:12px}
.jj .sumrows .r{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.jj .sumrows .r span{color:var(--t)}
.jj .sumrows .r b{color:var(--h);font-size:22px;white-space:nowrap}
.jj .sumrows .tot{border-top:2px solid var(--line);padding-top:14px}
.jj .sumrows .tot b{font-size:40px}
@media(max-width:600px){.jj .sumrows .r b{font-size:18px}.jj .sumrows .tot b{font-size:30px}}

/* geannoteerde website (B33-visual) */
.jj .anno{position:relative;border-radius:16px;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);overflow:visible}
.jj .anno .top{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line)}
.jj .anno .top i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
.jj .anno .pg{padding:22px;display:flex;flex-direction:column;gap:10px}
.jj .anno .ln{height:10px;border-radius:5px;background:var(--line)}
.jj .anno .ln.h{height:18px;width:70%;background:var(--h);opacity:.85}
.jj .anno .btnm{width:130px;height:30px;border-radius:8px;background:var(--or);margin-top:6px}
.jj .anno .blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.jj .anno .blocks i{display:block;height:60px;border-radius:10px;background:var(--card2);border:1px solid var(--line)}
.jj .pin{position:absolute;display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--bg);border:1px solid var(--blue-line);font-size:13px;font-weight:700;color:var(--h);box-shadow:var(--shadow);white-space:nowrap}
.jj .pin .n{width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px}

@media (max-width:900px){
  .jj .tl{grid-template-columns:minmax(0,1fr)}
  .jj .tl::before,.jj .tl .m::before{display:none}
  .jj .float-kpi{left:0}
  .jj .pin{position:static;margin:6px 0 0}
  .jj .anno .pins{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 16px}
}

/* formulierstatus (jj-forms) */
.jj .form-msg{display:none;padding:14px 16px;border-radius:10px;background:var(--blue-soft);color:var(--h);font-size:15px}
.jj .form-msg.show{display:block}
.jj .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:900px){
  .jj .kpis{grid-template-columns:minmax(0,1fr)}
  .jj .tbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jj .journey,.jj .proc,.jj .steprow,.jj .lm,.jj .cluster{grid-template-columns:minmax(0,1fr)}
  .jj .journey .zone,.jj .proc::before{display:none}
  .jj .journey{padding-top:0}
  .jj .zz .split.rev > :first-child{order:0}
  .jj .layers{flex-direction:column}
  .jj .ly,.jj .ly:first-child,.jj .ly:last-child{margin-left:0;clip-path:none;border-radius:12px;padding:20px;margin-bottom:8px}
  .jj .ctaband{padding:40px 24px}
}
@media (max-width:600px){.jj .tbar{grid-template-columns:minmax(0,1fr)}.jj .tbar > div{border-right:0;border-bottom:1px solid var(--line)}.jj .tbar > div:last-child{border-bottom:0}}