/* Layout: een kronkelende weg (de golf uit het logo) met vijf genummerde stations, om en om een kaart boven en onder. Mobiel: verticale weg. */
.roadmap-page{
  --bg:#EEF3F7; --surface:#FFFFFF; --fg:#13202A; --muted:#4F5E69; --line:#D3DEE7;
  --road:#22303B; --road-edge:#3A4B58; --lane:#FFFFFF; --disc:#FFFFFF;
  --s1:#3FD3A1; --s2:#F2C94C; --s3:#6FA8DC; --s4:#4FC9E3; --s5:#F39A62;
  --s1-ink:#176547; --s2-ink:#785300; --s3-ink:#2F6492; --s4-ink:#0c6073; --s5-ink:#934015;
  --s1-bg:#E3F4EC; --s2-bg:#FBF0CF; --s3-bg:#E2ECF6; --s4-bg:#DDF1F5; --s5-bg:#FBE6DA;
  --wm-1:#13202A; --wm-2:#3F6886; --shadow:0 20px 40px -24px rgba(19,32,42,.45);
  --display:'Poppins', ui-sans-serif, system-ui, sans-serif;
  --body:'Poppins', ui-sans-serif, system-ui, sans-serif;
}
.roadmap-page[data-theme="dark"]{
  --bg:#0E151B; --surface:#16212A; --fg:#EEF3F7; --muted:#A3B2BD; --line:#22323F;
  --road:#05080B; --road-edge:#1E2B35; --lane:#DCE6EE; --disc:#101A22;
  --s1:#3FD3A1; --s2:#F2C94C; --s3:#6FA8DC; --s4:#4FC9E3; --s5:#F39A62;
  --s1-ink:var(--s1);--s2-ink:var(--s2);--s3-ink:var(--s3);--s4-ink:var(--s4);--s5-ink:var(--s5);
  --s1-bg:#123A2F; --s2-bg:#3A3015; --s3-bg:#16304A; --s4-bg:#0F3542; --s5-bg:#3D2416;
  --wm-1:#FFFFFF; --wm-2:#F2C94C; --shadow:0 22px 44px -22px rgba(0,0,0,.8); color-scheme:dark}

.roadmap-page *{box-sizing:border-box}
.roadmap-page{background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.5;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.roadmap-page .wrap{max-width:1200px;margin:0 auto;padding-block:28px 56px;display:flex;flex-direction:column;gap:28px}
.roadmap-page header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.roadmap-page .brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px}
.roadmap-page .brand .a{color:var(--wm-1)} .roadmap-page .brand .b{color:var(--wm-2)}
.roadmap-page .toggle{font:600 14px var(--body);color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:10px 16px;min-height:44px;cursor:pointer;display:flex;gap:8px;align-items:center}
.roadmap-page .toggle svg{stroke:currentColor;fill:none;stroke-width:2}
.roadmap-page .toggle:focus-visible,.roadmap-page .card:focus-visible{outline:3px solid var(--s2);outline-offset:3px}

.roadmap-page .title{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.roadmap-page h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,5.6vw,64px);line-height:1.02;letter-spacing:-.025em;margin:0;text-wrap:balance}
.roadmap-page h1 em{font-style:normal;background:linear-gradient(90deg,var(--s1-ink),var(--s2-ink) 30%,var(--s3-ink) 55%,var(--s4-ink) 75%,var(--s5-ink));-webkit-background-clip:text;background-clip:text;color:transparent}
.roadmap-page .eyebrow{margin:0;font:600 12px var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--s2-ink)}
.roadmap-page .lead{margin:0;color:var(--muted);max-width:52ch}
.roadmap-page .sub{font:600 12px var(--body);letter-spacing:.14em;text-transform:uppercase}
.roadmap-page .sub{display:flex;align-items:center;gap:14px;width:100%;color:var(--muted);font-size:15px}
.roadmap-page .sub::before,.roadmap-page .sub::after{content:"";flex:1;border-top:1px dashed var(--s3);opacity:.6}
.roadmap-page .sub span{max-width:60ch;text-align:center}

/* Desktop road */
.roadmap-page .map{position:relative;height:740px}
.roadmap-page .road{position:absolute;left:0;right:0;top:250px;height:220px;width:100%}
.roadmap-page .road path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.roadmap-page .road .edge{stroke:var(--road-edge);stroke-width:62}
.roadmap-page .road .asphalt{stroke:var(--road);stroke-width:52}
.roadmap-page .road .lane{stroke:var(--lane);stroke-width:2;stroke-dasharray:10 9;opacity:.85;animation:drive 1.2s linear infinite}
@keyframes drive{to{stroke-dashoffset:-19}}

.roadmap-page .stop{position:absolute;width:112px;height:112px;margin-left:-56px;margin-top:-56px;border-radius:50%;
  display:grid;place-items:center;border:2px dashed var(--c);background:transparent}
.roadmap-page .stop .disc{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 35%,var(--cb),var(--disc) 75%);box-shadow:0 0 0 6px var(--disc),0 0 28px -4px var(--c)}
.roadmap-page .stop .num{font-family:var(--display);font-weight:700;font-size:38px;color:var(--ci,var(--c));letter-spacing:-.02em}
.roadmap-page .stop.now::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid var(--c);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.8}100%{transform:scale(1.25);opacity:0}}
.roadmap-page .dot{position:absolute;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--c);display:grid;place-items:center;box-shadow:0 0 0 4px var(--bg)}
.roadmap-page .dot svg{stroke:var(--disc);fill:none;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}

.roadmap-page .card{position:absolute;width:27%;background:linear-gradient(160deg,var(--cb),var(--surface) 85%);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);
  border-radius:18px;padding:20px 22px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px;min-width:0}
.roadmap-page .card.up{bottom:calc(740px - 222px)} .roadmap-page .card.down{top:520px}
.roadmap-page .card::after{content:"";position:absolute;left:var(--px);width:20px;height:20px;margin-left:-10px;background:inherit;
  border:inherit;transform:rotate(45deg);background:color-mix(in srgb,var(--cb) 30%,var(--surface))}
.roadmap-page .card.up::after{bottom:-11px;border-top:0;border-left:0}
.roadmap-page .card.down::after{top:-11px;border-bottom:0;border-right:0;background:var(--cb)}
.roadmap-page .head{display:flex;gap:14px;align-items:center}
.roadmap-page .ico{flex:none;width:48px;height:48px;border-radius:50%;background:var(--c);display:grid;place-items:center}
.roadmap-page .ico svg{stroke:var(--disc);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.roadmap-page .when{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.15;color:var(--ci,var(--c));margin:0}
.roadmap-page .pill{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--ci,var(--c))}
.roadmap-page .pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c)}
.roadmap-page .card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--fg)}
.roadmap-page .card li{display:flex;gap:8px;align-items:baseline}
.roadmap-page .card li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--c);transform:translateY(-2px)}
.roadmap-page .card li span{color:var(--muted)}

.roadmap-page .k1{--c:var(--s1);--ci:var(--s1-ink);--cb:var(--s1-bg)} .roadmap-page .k2{--c:var(--s2);--ci:var(--s2-ink);--cb:var(--s2-bg)} .roadmap-page .k3{--c:var(--s3);--ci:var(--s3-ink);--cb:var(--s3-bg)}
.roadmap-page .k4{--c:var(--s4);--ci:var(--s4-ink);--cb:var(--s4-bg)} .roadmap-page .k5{--c:var(--s5);--ci:var(--s5-ink);--cb:var(--s5-bg)}

.roadmap-page .foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:14px}
.roadmap-page .foot strong{color:var(--fg)}

/* Phone / tablet: vertical road */
@media (max-width:980px){
  .roadmap-page .map{height:auto;display:flex;flex-direction:column;gap:22px;padding-left:64px}
  .roadmap-page .map::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:40px;border-radius:20px;background:var(--road);box-shadow:0 0 0 5px var(--road-edge)}
  .roadmap-page .map::after{content:"";position:absolute;left:29px;top:16px;bottom:16px;border-left:2px dashed var(--lane);opacity:.8}
  .roadmap-page .road,.roadmap-page .stop,.roadmap-page .dot{display:none}
  .roadmap-page .card,.roadmap-page .card.up,.roadmap-page .card.down{position:relative;width:auto;top:auto;bottom:auto;left:auto!important;right:auto!important}
  .roadmap-page .card::after{display:none}
  .roadmap-page .card::before{content:attr(data-n);position:absolute;left:-66px;top:18px;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
    font:700 16px var(--display);color:var(--ci,var(--c));background:var(--disc);border:2px dashed var(--c);z-index:1;box-shadow:0 0 0 4px var(--disc),0 0 22px -2px var(--c)}
  .roadmap-page .card.k2::before{animation:glow 2.4s ease-in-out infinite}
  @keyframes glow{50%{box-shadow:0 0 0 4px var(--disc),0 0 34px 4px var(--c)}}
}
@media (prefers-reduced-motion:reduce){.roadmap-page *{animation:none!important}}

.roadmap-page{min-height:100svh;margin:0;overflow-wrap:anywhere}.roadmap-page a{color:inherit;text-underline-offset:3px}.roadmap-page a:focus-visible{outline:3px solid var(--fg);outline-offset:4px}.roadmap-page .home-link{text-decoration:none}.roadmap-page .software-footer{color:var(--muted);margin-top:25px}.roadmap-page .software-footer nav{display:flex;flex-wrap:wrap;gap:16px}.roadmap-page .software-footer-brand{display:none}.roadmap-page .software-footer>span{display:block;margin-top:15px}.roadmap-page .software-footer a:focus-visible{outline:3px solid var(--fg)}
@media(max-width:600px){.roadmap-page .head{flex-wrap:wrap}.roadmap-page .card{padding:18px 16px}.roadmap-page .when{font-size:20px}.roadmap-page .pill{font-size:11px}}

.roadmap-page .roadmap-skip{position:absolute;left:16px;top:8px;transform:translateY(-200%);z-index:5;background:var(--surface);padding:8px 12px}.roadmap-page .roadmap-skip:focus{transform:none}
body:has(.roadmap-page){margin:0;background:#0E151B}
@media(min-width:981px){.roadmap-page .map{height:820px}.roadmap-page .card.up{bottom:calc(820px - 222px)}}
@media(min-width:981px) and (max-width:1100px){.roadmap-page .map{margin-top:130px}}

/* C-028: retain the shared website navigation and keep phone headings together. */
.roadmap-page .head{flex-wrap:nowrap;align-items:flex-start}
.roadmap-page .head>div:last-child{flex:1;min-width:0}
.roadmap-page .pill{overflow-wrap:normal}
.roadmap-page .roadmap-years{white-space:nowrap}
.roadmap-page .wrap>header{justify-content:flex-end}
.roadmap-page .software-header{width:calc(100% - 32px);max-width:1200px;margin:0 auto;padding:20px 0;gap:20px;border-bottom:1px solid var(--line);background:transparent}
.roadmap-page .software-header nav{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.roadmap-page .software-header nav a{color:var(--fg);font-size:14px;text-decoration:none}
.roadmap-page .software-header .ssh-lockup-name,.roadmap-page .software-header .ssh-lockup-copy small{color:var(--wm-1)}
.roadmap-page .software-header .ssh-hosting{color:var(--wm-2)}
@media(max-width:600px){.roadmap-page .software-header{flex-direction:column;align-items:flex-start;gap:16px}.roadmap-page .software-header nav{width:100%;justify-content:space-between;gap:12px}.roadmap-page .sub{display:block}.roadmap-page .sub::before,.roadmap-page .sub::after{display:none}.roadmap-page .software-header .ssh-lockup-name{font-size:23px}}

/* C-029: the existing demo request remains visibly recognizable as a link. */
.roadmap-page .card a[href="/#kennismaken"]{color:var(--ci,var(--c));text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}
.roadmap-page .card a[href="/#kennismaken"] span{color:inherit}
.roadmap-page .card a[href="/#kennismaken"]:focus-visible{outline:3px solid var(--c);outline-offset:4px;border-radius:2px}

.roadmap-page .card::before{display:none}

/* Screen-sized landscape/tablet composition: all five stages stay in normal grid flow. */
@media(min-width:768px){
 body:has(.roadmap-page) .header-row{min-height:72px}
 .roadmap-page{min-height:0}
 .roadmap-page .wrap{max-width:1600px;padding-block:16px 20px;gap:16px}
 .roadmap-page .title{gap:5px}
 .roadmap-page h1{font-size:clamp(28px,3vw,44px);line-height:1.05}
 .roadmap-page .lead,.roadmap-page .sub{font-size:12px}
 .roadmap-page .map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:auto 100px auto;gap:0 18px;height:auto;margin-top:0;padding-left:0}
 .roadmap-page .map:before,.roadmap-page .map:after{display:none}
 .roadmap-page .card,.roadmap-page .card.up,.roadmap-page .card.down{position:relative;inset:auto!important;width:auto;margin:0;padding:14px;gap:8px;grid-column:span 2}
 .roadmap-page .card.up{grid-row:1;align-self:end}
 .roadmap-page .card.down{grid-row:3;align-self:start}
 .roadmap-page .card.k1{grid-column:1/3}.roadmap-page .card.k3{grid-column:3/5}.roadmap-page .card.k5{grid-column:5/7}
 .roadmap-page .card.k2{grid-column:2/4}.roadmap-page .card.k4{grid-column:4/6}
 .roadmap-page .card:after,.roadmap-page .card:before{display:none}
 .roadmap-page .head{gap:10px}.roadmap-page .ico{width:34px;height:34px}.roadmap-page .ico svg{width:22px;height:22px}
 .roadmap-page .when{font-size:17px}.roadmap-page .pill{font-size:10px}.roadmap-page .card ul{font-size:12px;line-height:1.45;gap:5px}
 .roadmap-page .road{display:block;top:auto;grid-row:2;grid-column:1/-1;align-self:center;position:relative;height:100px}
 .roadmap-page .road .edge{stroke-width:38}.roadmap-page .road .asphalt{stroke-width:30}
 .roadmap-page .stop{display:flex;grid-row:2;grid-column:1/-1;top:auto!important;align-self:center;position:relative;width:54px;height:54px;margin:0 0 0 -27px;z-index:2;transform:translateY(-27px)}
 .roadmap-page .stop.k2,.roadmap-page .stop.k4{transform:translateY(27px)}
 .roadmap-page .stop .disc{width:42px;height:42px}.roadmap-page .stop .num{font-size:22px}.roadmap-page .dot{display:none}
 .roadmap-page .foot{font-size:11px;gap:8px;padding-top:12px}
}
@media(min-width:768px) and (max-height:850px){
 .roadmap-page .wrap{padding-block:10px 14px;gap:10px}.roadmap-page h1{font-size:30px}.roadmap-page .title{gap:3px}.roadmap-page .map{grid-template-rows:auto 76px auto;column-gap:12px}.roadmap-page .road{height:76px}.roadmap-page .stop{transform:translateY(-20px)}.roadmap-page .stop.k2,.roadmap-page .stop.k4{transform:translateY(20px)}.roadmap-page .card{padding:12px!important;gap:6px!important}.roadmap-page .foot{padding-top:8px}
}
@media(min-width:768px){.roadmap-page .card li{margin:0!important}.roadmap-page .title .lead{max-width:none}.roadmap-page .map .card{box-shadow:var(--shadow)}.roadmap-page .foot span{max-width:100%}}

.roadmap-page[data-theme=light] .ico svg{stroke:#0b1626}