/* 10-11-2026: /leren-ondernemen (leren-ondernemen.php) · bovenop site.css, in de huisstijl (navy, ijswit, oranje, Montserrat)
   Geen kaarten: grote typografie, witruimte, beelden naast tekst en dunne lijnen. De film staat alleen in de hero. */
.lo{background:#fff}
.lo main{overflow-x:clip}
.lo h2{font:800 clamp(28px,3.4vw,44px)/1.12 Montserrat,sans-serif;letter-spacing:-.01em;margin:0 0 18px;max-width:18ch;color:var(--char)}
.lo h3{font:700 19px/1.3 Montserrat,sans-serif;margin:0 0 8px;color:var(--char)}
.lo p{max-width:62ch}

/* hero: de echte film over het hele scherm, onder het witte menu */
.lo-hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;align-items:flex-end;background:#0b2a4a;color:#fff;overflow:hidden}
.lo-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lo-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(0,32,62,.86) 0%,rgba(0,32,62,.5) 38%,rgba(0,32,62,.08) 72%)}
.lo-hero-copy{position:relative;z-index:2;padding-top:180px;padding-bottom:clamp(56px,11vh,110px)}
.lo-hero h1{font:800 clamp(36px,5.2vw,76px)/1.04 Montserrat,sans-serif;letter-spacing:-.015em;margin:0 0 22px;max-width:15ch;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.lo-hero-copy>p{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#E3EDF9;max-width:46ch;margin:0 0 30px}
.lo-hero-act .btn{font-size:17px;padding:16px 26px}
.lo-pp{position:absolute;z-index:3;right:clamp(16px,3vw,40px);bottom:clamp(20px,4vh,40px);width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.18);color:#fff;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px)}
.lo-pp:hover{background:rgba(255,255,255,.3)}.lo-pp .pl{display:none}.lo-pp.paused .pl{display:block}.lo-pp.paused .pz{display:none}

/* intro: één grote zin, daaronder twee kolommen */
.lo-intro{padding-block:clamp(72px,10vw,130px) clamp(40px,6vw,70px)}
.lo-big{font:700 clamp(24px,2.7vw,36px)/1.3 Montserrat,sans-serif;color:var(--char);max-width:30ch;margin:0 0 34px}
.lo-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);color:var(--muted);font-size:18px;line-height:1.65}
.lo-cols p{margin:0}.lo-cols strong{color:var(--char)}

/* secties */
.lo-sec{padding-block:clamp(56px,8vw,110px)}   /* (alleen boven en onder: .wrap houdt zijn zijmarge) */
.lo-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.lo-rev{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.lo-txt>p{color:var(--muted);font-size:17px;line-height:1.65;margin:0 0 16px}
.lo-say{color:var(--char)!important;font-weight:700;font-size:19px!important;margin-top:22px!important}
.lo-pic{margin:0}.lo-pic img{display:block;width:100%;height:auto;border-radius:22px}
.lo-pic-dash img{border-radius:0;filter:drop-shadow(0 24px 40px rgba(0,42,80,.18))}

/* de vier stappen: een echte volgorde, als tijdlijn */
.lo-steps{list-style:none;counter-reset:st;margin:26px 0 26px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lo-steps li{counter-increment:st;border-top:3px solid var(--char);padding-top:12px;font-size:14px;line-height:1.45;color:var(--muted)}
.lo-steps li::before{content:counter(st);display:block;color:var(--orange-d);font-weight:800;font-size:13px;margin-bottom:4px}
.lo-steps b{display:block;color:var(--char);font-size:15px;margin-bottom:2px}

/* marketingmix: ijswitte band over de hele breedte */
.lo-mix{background:var(--ivory)}
.lo-lead{color:var(--muted);font-size:18px;line-height:1.65;margin:0 0 30px}
.lo-ps{margin:0 0 34px;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,40px)}
.lo-ps div{border-top:1px solid var(--line);padding-top:16px}
.lo-ps dt{font:800 24px/1.1 Montserrat,sans-serif;color:var(--char);margin-bottom:8px}
.lo-ps dt::first-letter{color:var(--orange)}
.lo-ps dd{margin:0;color:var(--muted);font-size:15.5px;line-height:1.55}

/* de demo: schuifjes los op de band, daarnaast één donker dashboard */
.lo-demo{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,70px);align-items:center;margin-top:clamp(40px,6vw,70px);padding-top:clamp(36px,5vw,56px);border-top:1px solid var(--line)}
.lo-note{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}
.lo-ctl label{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;font-size:15px;margin:18px 0 6px;color:var(--char)}
.lo-ctl output{color:var(--orange-d);font-weight:800;font-variant-numeric:tabular-nums}
.lo-ctl input[type=range]{width:100%;accent-color:var(--char);height:28px}
.lo-dash{background:var(--char);color:#fff;border-radius:26px;padding:clamp(22px,3vw,34px)}
.lo-dash-h{margin:0;color:#9FE8EA;font-size:14px;font-weight:600}
.lo-win{font:800 clamp(34px,4vw,52px)/1.1 Montserrat,sans-serif;margin:8px 0 18px;color:#7CF0C0;font-variant-numeric:tabular-nums}
.lo-win.neg{color:#FFB199}
.lo-dash dl{margin:0}.lo-dash dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:15.5px}
.lo-dash dt{color:#C9D9EE}.lo-dash dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.lo-tip{margin:14px 0 0;color:#E3EDF9;font-size:14.5px;line-height:1.5}

/* dashboard-lijst */
.lo-list{margin:0 0 18px;padding:0;list-style:none}
.lo-list li{padding:9px 0 9px 26px;border-bottom:1px solid var(--line);position:relative;color:var(--char);font-weight:600;font-size:16px}
.lo-list li::before{content:"";position:absolute;left:2px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--sage)}

/* Venture Square: rustige oproep */
.lo-vs{background:var(--ivory)}
.lo-vs-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;gap:clamp(20px,4vw,56px);align-items:center}
.lo-vs-in h2{margin:0}.lo-vs-in p{margin:0;color:var(--muted);font-size:17px;line-height:1.6}

/* voor wie: drie kolommen met een lijn erboven, geen kaarten */
.lo-who-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:14px}
.lo-who-list article{border-top:3px solid var(--char);padding-top:18px}
.lo-who-list p{color:var(--muted);font-size:16px;line-height:1.6;margin:0 0 14px}
.lo-who-list a{color:var(--char);font-weight:700;text-decoration:underline;text-decoration-color:var(--orange);text-decoration-thickness:3px;text-underline-offset:5px}
.lo-who-list a:hover{color:var(--orange-d)}

/* slot */
.lo-end{background:var(--char);color:#fff;padding-block:clamp(72px,10vw,130px)}
.lo-end h2{color:#fff;max-width:20ch}
.lo-end p{color:#C9D9EE;font-size:18px;line-height:1.65;margin:0 0 18px}
.lo-motto{font:800 clamp(20px,2.2vw,28px)/1.3 Montserrat,sans-serif;color:#fff!important;margin:28px 0 30px!important}
.lo-end .btn{font-size:17px;padding:16px 26px}
.lo-more{margin-top:34px!important;font-size:15px!important}.lo-more a{color:#fff}

/* telefoon en tablet */
@media (max-width:980px){.lo-split,.lo-rev{grid-template-columns:1fr}.lo-rev .lo-pic{order:2}.lo-ps{grid-template-columns:1fr 1fr}.lo-demo{grid-template-columns:1fr}.lo-vs-in{grid-template-columns:1fr}.lo-who-list{grid-template-columns:1fr}}
@media (max-width:640px){.lo-cols{grid-template-columns:1fr}.lo-steps{grid-template-columns:1fr 1fr}.lo-ps{grid-template-columns:1fr}.lo-hero-copy{padding-top:130px}.lo-hero h1{max-width:none}}
@media (prefers-reduced-motion:reduce){.lo-film{animation:none}}
.lo-split .lo-steps{grid-template-columns:1fr 1fr;gap:18px 22px}   /* (naast een beeld: twee bij twee, zodat de tekst niet te smal wordt) */
/* 11-11-2026: compacter. De demo als eigen sectie; het dashboard met een winkelfilmpje, de dame ervoor en een klein dashboard */
.lo-demo-solo{margin-top:0;padding-top:0;border-top:0}
.lo-demo-solo h2{margin-bottom:10px}
.lo-dashsec{padding-block:clamp(48px,6vw,80px)}
.lo-shop{position:relative;padding:28px 0 0 clamp(70px,9vw,120px)}
.lo-shop-film{position:relative;aspect-ratio:16/10;border-radius:22px;overflow:hidden;background:#cfd9e6}
.lo-shop-film video,.lo-shop-film img{display:block;width:100%;height:100%;object-fit:cover}
.lo-shop-lady{position:absolute;left:0;bottom:-18px;height:112%;width:auto;z-index:2;filter:drop-shadow(0 18px 24px rgba(0,42,80,.25))}
.lo-mini{position:absolute;right:-12px;bottom:-22px;z-index:3;width:min(210px,46%);background:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 14px 34px rgba(0,42,80,.22);font-size:13px}
.lo-mini>b{display:block;color:var(--char);margin-bottom:6px;font-size:13.5px}
.lo-mini div{display:flex;justify-content:space-between;padding:4px 0;border-top:1px solid var(--line);color:var(--muted)}.lo-mini div b{color:#1D7A55}
.lo-list2{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.lo-dashsec .lo-txt>p{margin-bottom:12px}
@media (max-width:980px){.lo-dashsec .lo-shop{order:2;margin-top:10px}.lo-mini{right:0}}
@media (max-width:640px){.lo-list2{grid-template-columns:1fr}.lo-shop{padding-left:60px}}
.lo-dashsec{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}.lo-list2 li{font-size:15px}
.lo-dashsec{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}.lo-shop{padding-left:clamp(60px,7vw,96px)}
/* 11-11-2026: het dashboard dat zelf doorklikt (assets/landing/showcase.js/.css, net als op de voorpagina), met de dame ervoor */
.lo-hotel{width:100%;max-width:640px}
.lo-dashsec{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.lo-sec{padding-block:clamp(48px,6vw,84px)}.lo-intro{padding-block:clamp(56px,7vw,96px) clamp(24px,4vw,48px)}   /* (11-11-2026: compacter) */