/* ============================================================
   Cohentis.com landing — zelfstandige stylesheet.
   Kleurtokens gelijkgetrokken met de app (huisstijl.css):
   petrol #12716C, petrol-deep/dark #0A3936, petrol-light #7FC4BE,
   terracotta #C87941 (= actiekleur), status ok #2C8A6B / amber #D9A63C
   / alert #C0563A. Terracotta is uitsluitend de actiekleur; status-amber
   is een aparte kleur zodat landing en app dezelfde taal spreken.
   Fonts lokaal gehost onder /assets/fonts/.
   ============================================================ */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-v38-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:400;font-display:swap;src:url('/assets/fonts/fraunces-v38-latin-italic.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-v38-latin-600.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/fraunces-v38-latin-600italic.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/fraunces-v38-latin-700.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/figtree-v9-latin-regular.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/figtree-v9-latin-500.woff2') format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/figtree-v9-latin-600.woff2') format('woff2')}
:root{
  --petrol:#12716C; --petrol-deep:#0A3936; --petrol-dark:#0A3936;
  --petrol-light:#7FC4BE;
  --terra:#C87941; --terra-soft:#b96a34; --terra-light:#e0a374;
  --cream:#FAF8F5; --cream-2:#F2EEE7; --line:#DDD8CF;
  --ink:#2A2A28; --ink-soft:#6B6862;
  --ok:#2C8A6B; --amber:#D9A63C; --alert:#C0563A;
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Figtree',system-ui,-apple-system,sans-serif;
  --maxw:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--cream);line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.15;margin:0;color:var(--petrol-deep)}
p{margin:0}
a{color:inherit}
.lp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.skip{position:absolute;left:-999px;top:0;background:var(--petrol-deep);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2.5px solid var(--terra);outline-offset:2px;border-radius:3px}

/* eyebrow */
.lp-eyebrow{display:inline-block;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;font-weight:600;color:var(--terra)}
.lp-eyebrow.light{color:var(--terra-light)}

/* buttons */
.lp-btn-primary{display:inline-flex;align-items:center;gap:9px;background:var(--terra);color:#fff;font-family:var(--font-body);font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;text-decoration:none;border:1.5px solid var(--terra);line-height:1;transition:transform .16s,background .18s,box-shadow .18s}
.lp-btn-primary:hover{background:var(--terra-soft);border-color:var(--terra-soft);transform:translateY(-1px);box-shadow:0 10px 26px -12px rgba(200,121,65,.7)}
.lp-btn-primary.big{padding:14px 30px;font-size:15px}
.lp-btn-primary .arr{transition:transform .18s}
.lp-btn-primary:hover .arr{transform:translateX(3px)}
.lp-btn-ghost{display:inline-flex;align-items:center;gap:8px;color:var(--petrol-deep);font-weight:600;font-size:15px;text-decoration:none;padding:13px 6px}
.lp-btn-ghost:hover{color:var(--terra)}
.lp-btn-ghost.strong{color:var(--terra);padding:6px 0}

/* NAV */
.lp-nav{position:sticky;top:0;z-index:50;background:rgba(250,248,245,.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.lp-nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.lp-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none}
.lp-brand-mark{display:block;flex:none}
.lp-brand-text{display:flex;flex-direction:column;line-height:1.05}
.lp-brand-name{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--petrol-deep);letter-spacing:-.5px}
.lp-brand-name .dot{color:var(--terra)}
.lp-brand-tag{font-family:var(--font-body);font-size:11px;font-weight:500;letter-spacing:.2px;color:var(--ink-soft);margin-top:1px;white-space:nowrap}
.lp-footer-brand .lp-brand-name{color:var(--cream)}
.lp-footer-brand .lp-brand-name .dot{color:var(--terra-light)}
.lp-nav-right{display:flex;align-items:center;gap:22px}
.lp-nav-right>a{color:var(--ink-soft);text-decoration:none;font-weight:500;font-size:13.5px}
.lp-nav-right>a:hover{color:var(--terra)}
.lp-nav-cta{background:var(--terra);color:#fff!important;padding:9px 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:13.5px;border:1.5px solid var(--terra);transition:background .18s,border-color .18s}
.lp-nav-cta:hover{background:var(--terra-soft);border-color:var(--terra-soft)}
/* Taalkiezer: uitklapbare dropdown op alle breedtes (EN ▾). */
.lang-switch{display:none}
.lang-mobile{display:inline-block;position:relative}
.lang-mobile>summary{list-style:none;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--petrol-deep);display:inline-flex;align-items:center;gap:5px;padding:10px 8px;min-height:44px}
.lang-mobile>summary::-webkit-details-marker{display:none}
.lang-mobile>summary::after{content:"▾";font-size:10px;color:var(--ink-soft)}
.lang-mobile[open]>summary::after{content:"▴"}
.lang-mobile-menu{position:absolute;right:0;top:calc(100% + 4px);background:#fff;border:1px solid #DDD8CF;border-radius:8px;box-shadow:0 8px 24px rgba(10,57,54,.12);padding:4px;display:flex;flex-direction:column;min-width:160px;z-index:60}
.lang-mobile-menu a{text-decoration:none;color:var(--ink-soft);font-size:13.5px;font-weight:500;padding:12px 14px;border-radius:6px;min-height:44px;display:flex;align-items:center}
.lang-mobile-menu a:hover{background:var(--cream-2);color:var(--petrol-deep)}
.lang-mobile-menu a.on{color:var(--petrol-deep);font-weight:700}
/* Hamburger (mobiel): menulinks en CTA verhuizen naar een uitklapmenu */
.nav-burger{display:none;position:relative}
.nav-burger summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:12px 8px}
.nav-burger summary::-webkit-details-marker{display:none}
.nav-burger .nb{display:block;width:20px;height:2px;background:var(--petrol-deep);border-radius:2px;transition:transform .18s,opacity .18s}
.nav-burger[open] .nb:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-burger[open] .nb:nth-child(2){opacity:0}
.nav-burger[open] .nb:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-burger-menu{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -20px rgba(10,57,54,.4);padding:10px;display:flex;flex-direction:column;gap:2px;min-width:220px;z-index:60}
.nav-burger-menu a{color:var(--ink);text-decoration:none;font-weight:600;font-size:15px;padding:11px 14px;border-radius:9px}
.nav-burger-menu a:hover{background:rgba(18,113,108,.07);color:var(--petrol-deep)}
.nav-burger-menu a.cta{background:var(--terra);color:#fff;text-align:center;margin-top:6px}
.nav-burger-menu a.cta:hover{background:var(--terra-soft);color:#fff}
@media(max-width:860px){
  .lp-nav-right{gap:12px}
  .lp-nav-right>a:not(.lang-mobile a){display:none}
  .lp-brand-tag{display:none}
  .nav-burger{display:block}
}

/* HERO */
.lp-hero{padding:64px 0 30px;position:relative;overflow:hidden;background:linear-gradient(180deg,#F2EEE7 0%,#FAF8F5 100%)}
.lp-hero-mark{position:absolute;top:-70px;right:-90px;width:520px;height:auto;opacity:.05;pointer-events:none;z-index:0}
.lp-hero-grid{display:grid;grid-template-columns:1fr .85fr;gap:52px;align-items:center;position:relative;z-index:1}
.lp-hero-badge{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--petrol-deep);background:rgba(18,113,108,.08);border:1px solid #7FC4BE;border-radius:999px;padding:4px 13px;margin-bottom:16px}
.lp-hero h1{font-size:clamp(31px,4.4vw,44px);letter-spacing:-.5px;margin:0 0 22px}
.lp-hero h1 em{font-style:italic;color:var(--terra)}
.lp-hero-lede{font-size:16.5px;color:var(--ink-soft);line-height:1.55;max-width:520px;margin-bottom:20px}
.lp-hero-cta{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.lp-hero-note{margin-top:18px;font-size:14px;color:var(--ink-soft)}

/* HERO DEMO — het signaalvenster, de handtekening van de pagina (licht) */
.lp-demo{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(10,57,54,.16);position:relative;overflow:hidden;max-width:480px;margin-left:auto}
.lp-demo-bar{display:flex;align-items:center;gap:12px;background:var(--cream-2);border-bottom:1px solid var(--line);padding:11px 16px}
.lp-demo-dots{display:inline-flex;gap:6px;flex:none}
.lp-demo-dots i{width:9px;height:9px;border-radius:50%;background:#C9C1B4}
.lp-demo-title{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft);font-weight:600}
.lp-demo-body{display:flex;align-items:stretch}
.lp-demo-rail{flex:none;width:110px;background:var(--petrol-deep);position:relative;overflow:hidden}
.lp-demo-rail::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 20% 0%,rgba(200,121,65,.22),transparent 62%);pointer-events:none}
.lp-demo-main{flex:1;background:var(--cream);padding:18px 18px 16px;min-width:0}
.lp-demo-week{display:flex;flex-direction:column;gap:10px}
.lp-signal{display:flex;align-items:flex-start;gap:12px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;padding:12px 14px}
@media(prefers-reduced-motion:no-preference){.lp-signal{opacity:0;transform:translateY(10px);animation:lp-rise .6s ease forwards}}
.lp-signal:nth-child(1){animation-delay:.35s}
.lp-signal:nth-child(2){animation-delay:.95s}
.lp-signal:nth-child(3){animation-delay:1.55s}
.lp-signal.s-red{border-left-color:var(--alert)}
.lp-signal.s-amber{border-left-color:var(--amber)}
.lp-signal.s-green{border-left-color:var(--ok)}
.lp-signal .dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex:none}
.lp-signal .dot.red{background:var(--alert)}
.lp-signal .dot.amber{background:var(--amber)}
.lp-signal .dot.green{background:var(--ok)}
.lp-signal .txt{color:var(--ink);font-size:13px;line-height:1.4}
.lp-signal .txt b{color:var(--petrol-deep);font-weight:600;display:block}
.lp-signal .txt .sub{display:block;color:var(--ink-soft);font-size:12px;margin-top:3px}
.lp-demo-foot{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:8px}
.lp-demo-foot .dotmini{width:6px;height:6px;border-radius:50%;background:var(--terra)}
@keyframes lp-rise{to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lp-signal{opacity:1;transform:none;animation:none}}
@media(max-width:860px){.lp-hero-grid{grid-template-columns:1fr;gap:34px}.lp-demo{max-width:480px}}
@media(max-width:420px){.lp-demo-rail{width:64px}}

/* STRIP */
.lp-strip{background:var(--cream-2);color:var(--petrol-deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:28px 0}
.lp-strip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.lp-strip-grid>div{padding:0 30px}
.lp-strip-grid>div:not(:last-child){border-right:1px solid var(--line)}
.lp-strip-grid>div:first-child{padding-left:0}
.lp-strip-grid>div:last-child{padding-right:0}
.lp-strip .n{font-family:var(--font-display);font-size:clamp(19px,2.4vw,24px);color:var(--petrol-deep);font-weight:600;line-height:1.1}
.lp-strip .l{font-size:13.5px;color:var(--ink-soft);margin-top:7px;line-height:1.45}
@media(max-width:680px){.lp-strip-grid{grid-template-columns:1fr;gap:0}.lp-strip-grid>div{padding:14px 0!important}.lp-strip-grid>div:not(:last-child){border-right:none;border-bottom:1px solid var(--line)}}

/* SECTIONS */
.lp-section{padding:52px 0;background:#fff}
.lp-section-head{max-width:660px;margin-bottom:40px}
.lp-section-head .lp-eyebrow{margin-bottom:14px}
.lp-section-head h2{font-size:clamp(23px,3vw,28px);margin-bottom:16px;letter-spacing:-.3px}
.lp-section-head p{font-size:14px;color:var(--ink-soft);line-height:1.6}

/* Achtergrondritme: wit en zand wisselen af, één donkere band (privacy).
   Waar wit en zand elkaar raken en het contrast klein is, een 1px scheiding. */
/* De homepage van boven naar beneden. .lp-section is standaard wit, dus
   alleen de zand-secties krijgen een regel; wit is de afwezigheid van een regel.
   Nooit #FAF8F5 letterlijk naast een zand-sectie: dat leest als dezelfde kleur.
   strip zand · #problem zand · #how wit · #rhythm zand · #session wit ·
   #sensing zand · #origin wit · #compare zand · #pricing wit · #privacy donker */
.lp-problem-sec{background:var(--cream)}          /* zand onder de strip */
.lp-moves-sec{border-top:1px solid var(--line)}   /* wit, hairline onder het zand */
.lp-chain-sec{background:var(--cream)}            /* zand na de witte moves */
.lp-sensing-sec{background:var(--cream)}          /* zand na de witte sessie */
.lp-origin-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.lp-compare-sec{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* Pricing was zand, maar staat nu onder de zand-vergelijkingstabel. Twee
   zandvlakken na elkaar breekt de afwisseling, dus deze wordt wit; daaronder
   volgt de donkere privacyband, dus het contrast blijft. */
.lp-pricing-sec{background:#fff}
.lp-contact-sec{background:var(--cream-2)}        /* zand na de witte methode... */
.lp-method-sec{border-bottom:1px solid var(--line)}

/* METHOD */
.lp-method-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px}
.lp-method-nav a{font-size:14px;font-weight:600;color:var(--petrol-deep);text-decoration:none;background:#fff;border:1px solid var(--line);padding:9px 15px;border-radius:99px;transition:border-color .16s,color .16s,background .16s}
.lp-method-nav a:hover{border-color:var(--terra);color:var(--terra)}
.lp-method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lp-method-card{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:30px 30px;scroll-margin-top:84px}
.lp-method-card h2{font-size:21px;margin-bottom:12px;color:var(--petrol-deep)}
.lp-method-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.6}
/* De twee verwijzingen onder de sectie over wie erachter zit. Naast elkaar
   op een breed scherm, onder elkaar op een telefoon. */
.lp-about-links{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:20px}
.lp-method-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:600;color:var(--petrol);text-decoration:none;border-bottom:1px solid rgba(18,113,108,.35);padding-bottom:2px}
.lp-method-link:hover{border-bottom-color:var(--petrol)}
@media(max-width:820px){.lp-method-grid{grid-template-columns:1fr}}

/* CHAIN */
.lp-chain{display:flex;align-items:stretch;margin-top:8px;flex-wrap:wrap}
.lp-chain-step{flex:1;min-width:160px;background:#fff;border:1px solid var(--line);padding:24px 20px;position:relative}
.lp-chain-step:first-child{border-radius:12px 0 0 12px}
.lp-chain-step:last-child{border-radius:0 12px 12px 0}
.lp-chain-step:not(:last-child){border-right:none}
.lp-chain-num{font-size:12px;font-weight:700;color:var(--terra);letter-spacing:1px}
.lp-chain-step h4{font-size:15px;margin:8px 0 6px;color:var(--petrol-deep)}
.lp-chain-step p{font-size:13px;color:var(--ink-soft);line-height:1.45}
.lp-chain-arrow{position:absolute;right:-11px;top:50%;transform:translateY(-50%);z-index:2;width:22px;height:22px;background:var(--terra);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px}
.lp-chain-step:last-child .lp-chain-arrow{display:none}
.lp-chain-cap{margin-top:26px;font-size:14px;color:var(--ink-soft);max-width:720px;line-height:1.6}
@media(max-width:820px){
  .lp-chain-step{flex:1 1 100%;border-radius:12px!important;border-right:1px solid var(--line)!important;margin-bottom:26px}
  .lp-chain-arrow{right:50%;top:auto;bottom:-24px;transform:translateX(50%) rotate(90deg)}
}

/* FOUR MOVEMENTS */
.lp-moves{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px}
.lp-move{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:22px 20px;display:flex;flex-direction:column;gap:12px}
.lp-move-num{width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:16px;color:#fff;flex:none}
.lp-move-num.n1{background:var(--petrol)}
.lp-move-num.n2{background:var(--petrol)}
.lp-move-num.n3{background:var(--terra)}
.lp-move-num.n4{background:var(--petrol-deep)}
.lp-move-body h3{font-size:15px;color:var(--petrol-deep);margin-bottom:6px;line-height:1.25}
.lp-move-body p{font-size:13px;color:var(--ink-soft);line-height:1.5}
.lp-move-vis{margin-top:auto;height:26px;display:flex;align-items:flex-end}
.lp-move-vis>span{display:flex;align-items:flex-end;gap:4px;width:100%;height:100%}
.mv-skel i{height:7px;border-radius:3px;background:var(--line);flex:1;align-self:center}
.mv-skel i:nth-child(1){flex:2}.mv-skel i:nth-child(2){flex:3}.mv-skel i:nth-child(3){flex:1.4}
.mv-gantt i{height:8px;border-radius:3px;background:rgba(18,113,108,.35)}
.mv-gantt i:nth-child(1){width:40%;margin-left:0}.mv-gantt i:nth-child(2){width:34%;margin-left:14%}.mv-gantt i:nth-child(3){width:30%;margin-left:8%}
.mv-gantt{flex-direction:column;gap:5px;align-items:flex-start!important}
.mv-bars i{flex:1;background:var(--terra);border-radius:3px 3px 0 0;opacity:.8}
.mv-bars i:nth-child(1){height:45%}.mv-bars i:nth-child(2){height:70%}.mv-bars i:nth-child(3){height:55%}.mv-bars i:nth-child(4){height:90%}
.mv-checks i{width:16px;height:16px;border-radius:50%;background:rgba(44,138,107,.16);position:relative;flex:none}
.mv-checks i::after{content:"";position:absolute;left:5px;top:4px;width:4px;height:7px;border-right:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(40deg)}
@media(max-width:900px){.lp-moves{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.lp-moves{grid-template-columns:1fr}}

/* PRIVACY — de ene donkere band tussen hero en footer */
.lp-privacy{background:var(--petrol-deep);padding:64px 0}
.lp-privacy .lp-eyebrow{color:var(--petrol-light)}
.lp-privacy .lp-section-head h2{color:#fff}
.lp-priv-lede{max-width:640px;color:rgba(250,248,245,.75)}
.lp-priv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.lp-session-media{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:center;margin:28px 0 8px}
.lp-session-thumb{position:relative;display:block;cursor:zoom-in}
.lp-session-thumb img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line,#E7E2D8);box-shadow:0 10px 30px rgba(20,45,45,.08)}
.lp-session-zoom{position:absolute;right:10px;bottom:10px;font-size:.78rem;padding:4px 10px;border-radius:999px;background:rgba(20,45,45,.75);color:#FAF8F5}
.lp-session-note h3{margin:0 0 8px;font-size:1.05rem}
.lp-session-note p{margin:0 0 10px}
.lp-session-cap{font-size:.88rem;color:#6b6455}
@media(max-width:900px){.lp-session-media{grid-template-columns:1fr;gap:18px}}
.lp-priv-cell{background:rgba(250,248,245,.06);border:1px solid rgba(127,196,190,.25);border-radius:12px;padding:24px}
.lp-priv-cell h3{font-size:16px;margin-bottom:8px;color:var(--petrol-light)}
.lp-priv-cell p{font-size:14px;color:rgba(250,248,245,.75);line-height:1.5}
.lp-priv-quote{margin:40px 0 0;font-family:var(--font-display);font-style:italic;font-size:clamp(20px,2.6vw,26px);color:#fff;border-left:3px solid var(--terra);padding-left:22px;max-width:640px}
@media(max-width:900px){.lp-priv-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.lp-priv-grid{grid-template-columns:1fr}}

/* PRICING */
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.lp-plan{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;position:relative}
.lp-plan.team{background:var(--petrol-deep);border-color:var(--petrol-deep);box-shadow:0 24px 50px -26px rgba(10,57,54,.55)}
.lp-plan-badge{position:absolute;top:-11px;left:28px;background:var(--terra);color:#fff;font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.lp-plan.team .lp-plan-kicker{color:var(--terra-light)}
.lp-plan.team h3,.lp-plan.team .lp-plan-price .amt{color:#fff}
.lp-plan.team .lp-plan-price .per,.lp-plan.team .lp-plan-lede,.lp-plan.team .lp-plan-note{color:rgba(250,248,245,.72)}
.lp-plan.team .lp-plan-items li{color:rgba(250,248,245,.92)}
.lp-plan.team .lp-plan-items li::before{border-color:var(--terra-light)}
.lp-plan-kicker{font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--terra);text-transform:uppercase}
.lp-plan h3{font-size:20px;color:var(--petrol-deep)}
.lp-plan-price{display:flex;align-items:baseline;gap:8px}
.lp-plan-price .amt{font-family:var(--font-display);font-size:34px;font-weight:600;color:var(--petrol-deep)}
.lp-plan-price .per{font-size:14px;color:var(--ink-soft)}
.lp-plan-lede{font-size:13.5px;color:var(--ink-soft);line-height:1.55}
.lp-plan-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-plan-items li{font-size:13px;color:var(--ink);line-height:1.45;padding-left:24px;position:relative}
.lp-plan-items li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.lp-plan .lp-btn-primary,.lp-plan .lp-btn-ghost,.lp-plan .lp-btn-outline{margin-top:4px;align-self:flex-start}
.lp-plan-note{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:900px){.lp-plans{grid-template-columns:1fr;max-width:460px;margin:0 auto}}

/* FAQ */
.lp-faq-sec{background:var(--cream);border-bottom:1px solid var(--line)}
.lp-faq{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.lp-faq-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.lp-faq-item h3{font-size:16.5px;margin-bottom:8px;color:var(--petrol-deep)}
.lp-faq-item p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
/* Een verwijzing achter een FAQ-antwoord, bijvoorbeeld naar de pagina over
   het missiebestand. Staat in de lopende zin en niet in de structuurdata. */
.lp-faq-item p a{color:var(--petrol);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(18,113,108,.35)}
.lp-faq-item p a:hover{border-bottom-color:var(--petrol)}
@media(max-width:760px){.lp-faq{grid-template-columns:1fr}}

/* FINAL CTA — licht, want de privacy-band draagt nu het donker */
.lp-final{background:var(--cream);color:var(--ink);padding:56px 0;text-align:center;position:relative;overflow:hidden;border-top:1px solid var(--line)}
.lp-final::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 120% at 50% 0%,rgba(200,121,65,.08),transparent 55%);pointer-events:none}
.lp-final .lp-wrap{position:relative}
.lp-final .lp-eyebrow{color:var(--terra)}
.lp-final h2{color:var(--petrol-deep);font-size:clamp(24px,3vw,28px);margin:14px 0 14px}
.lp-final p{font-size:15px;color:var(--ink-soft);max-width:520px;margin:0 auto 28px}
.lp-final-note{margin-top:18px;font-size:13.5px;color:var(--ink-soft)}

/* FOOTER */
.lp-footer{background:var(--petrol-dark);color:rgba(250,248,245,.75);padding:52px 0 40px}
.lp-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.lp-footer-brand .lp-brand{color:#fff}
.lp-footer-brand p{margin-top:14px;font-size:14px;line-height:1.55;max-width:340px}
.lp-footer-col h4{color:#fff;font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px;font-family:var(--font-body);font-weight:600}
.lp-footer-col a,.lp-footer-col span{display:block;color:rgba(250,248,245,.72);text-decoration:none;font-size:14px;margin-bottom:9px;line-height:1.5}
.lp-footer-col a:hover{color:var(--terra-light)}
@media(max-width:760px){.lp-footer-grid{grid-template-columns:1fr;gap:28px}}

/* CONTACT */
.lp-contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:start}
.lp-contact-intro .lp-eyebrow{margin-bottom:14px}
.lp-contact-intro h2{font-size:clamp(23px,3vw,28px);margin-bottom:14px;letter-spacing:-.3px}
.lp-contact-intro p{font-size:14px;color:var(--ink-soft);line-height:1.6}
.lp-contact-form{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 30px;display:flex;flex-direction:column;gap:16px}
.lp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lp-field{display:flex;flex-direction:column;gap:6px}
.lp-field>span{font-size:13.5px;font-weight:600;color:var(--petrol-deep)}
.lp-field input,.lp-field textarea{font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;transition:border-color .16s,background .16s}
.lp-field input:focus,.lp-field textarea:focus{outline:none;border-color:var(--terra);background:#fff}
.lp-field textarea{resize:vertical;min-height:110px;line-height:1.5}
.lp-consent{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink-soft);line-height:1.45;cursor:pointer}
.lp-consent input{margin-top:2px;width:17px;height:17px;accent-color:var(--terra);flex:none}
.lp-contact-form .lp-btn-primary{align-self:flex-start;border:none;cursor:pointer}
.lp-contact-form .lp-btn-primary:disabled{opacity:.6;cursor:default}
.lp-form-msg{font-size:14px;line-height:1.5;margin:0}
.lp-form-msg.is-ok{color:var(--ok)}
.lp-form-msg.is-err{color:var(--alert)}
@media(max-width:820px){.lp-contact-grid{grid-template-columns:1fr;gap:30px}}

/* soft primary (Company CTA) + ghost light + sample-links */
.lp-btn-outline{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--petrol-deep);font-family:var(--font-body);font-weight:600;font-size:15px;padding:13px 26px;border-radius:999px;text-decoration:none;border:1.5px solid var(--petrol);line-height:1;transition:background .18s,color .18s}
.lp-btn-outline:hover{background:var(--petrol);color:#fff}
.lp-btn-ghost.light{color:var(--terra-light)}
.lp-btn-ghost.light:hover{color:#fff}
.lp-plan-sample,.lp-chain-cap + .lp-btn-ghost{margin-top:2px}
.lp-plan-sample{font-size:13.5px;font-weight:600;color:var(--terra);text-decoration:none}
.lp-plan-sample:hover{color:var(--terra-soft);text-decoration:underline}
.lp-chain-cap + .lp-btn-ghost{display:inline-flex;margin-top:8px}

/* COMPARISON TABLE */
/* De sectie is zand, de tabel is een witte kaart daarop. De kaart is de
   wrapper en niet de <table>, zodat ook de padding wit is en er geen zandrand
   van 26px rond de tabel blijft staan. */
.lp-compare-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px 28px}
.lp-compare{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.lp-compare thead th{font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--ink-soft);text-align:center;padding:0 16px 16px;vertical-align:bottom}
.lp-compare thead th.col-us{color:var(--petrol-deep);font-size:14px}
.lp-compare tbody th{text-align:left;font-family:var(--font-body);font-weight:500;font-size:13.5px;color:var(--ink);padding:13px 16px;border-top:1px solid var(--line);line-height:1.4}
.lp-compare td.c{text-align:center;padding:13px 16px;border-top:1px solid var(--line);width:130px}
/* Cohentis-kolom licht petrol gehighlight (frame 12a) */
.lp-compare tbody th{background:transparent}
/* Cellen wit, en pas daarna de kolommarkering: omgekeerd zou #fff de tint
   van de Cohentis-kolom overschrijven. De inset-schaduw op die kolom blijft. */
.lp-compare thead th,.lp-compare td{background:#fff}
.lp-compare thead th.col-us,.lp-compare td.c:nth-child(2){background:rgba(18,113,108,.06)}
.lp-compare tr td.c:nth-child(2){box-shadow:inset 2px 0 0 rgba(18,113,108,.18),inset -2px 0 0 rgba(18,113,108,.18)}
.lp-compare .mk{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;font-weight:700;font-size:15px}
.lp-compare td.yes .mk{background:rgba(44,138,107,.16);color:var(--ok)}
.lp-compare td.partial .mk{background:rgba(217,166,60,.18);color:#a9791f}
.lp-compare td.no .mk{background:#eee6da;color:#a99;font-weight:600}
.lp-compare-legend{display:flex;gap:22px;flex-wrap:wrap;margin-top:18px;font-size:13.5px;color:var(--ink-soft)}
.lp-compare-legend .mk{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-weight:700;font-size:12px;margin-right:5px}
.lp-compare-legend .mk.yes{background:rgba(63,143,121,.16);color:var(--ok)}
.lp-compare-legend .mk.partial{background:rgba(200,121,65,.16);color:var(--terra-soft)}
.lp-compare-legend .mk.no{background:#eee6da;color:#a99}

/* CONTACT interest chips */
.lp-chips{border:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:9px}
.lp-chips legend{flex:1 0 100%;font-size:13.5px;font-weight:600;color:var(--petrol-deep);padding:0;margin-bottom:0}
.lp-chip{display:inline-flex}
.lp-chip input{position:absolute;opacity:0;width:0;height:0}
.lp-chip span{display:inline-block;font-size:14px;font-weight:500;color:var(--ink);background:var(--cream);border:1.5px solid var(--line);border-radius:99px;padding:8px 15px;cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.lp-chip input:checked + span{border-color:var(--terra);background:rgba(200,121,65,.1);color:var(--terra-soft)}
.lp-chip input:focus-visible + span{outline:2.5px solid var(--terra);outline-offset:2px}
.lp-chip span:hover{border-color:var(--terra)}

/* FINAL CTA row (two buttons) */
.lp-final-cta{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

/* ============================================================
   CONTENTPAGINA'S (.cp-*) — het template van template.html
   Vijf zones, van koel en tekstueel naar warm en visueel:
   1 hero met de citeerbare definitie · 2 de leeskolom ·
   3 de app-toepassing met de 8:5 video · 4 de CTA ·
   5 de kaarten naar verwante pagina's.
   Nav, footer, knoppen en tokens komen uit de blokken hierboven;
   hieronder staat alleen wat de landing zelf niet heeft.
   Video's zijn 8:5, niet 16:9. Terracotta blijft de actiekleur:
   één inzet per pagina, op de CTA in zone 4.
   ============================================================ */

/* zone 1 · hero met de citeerbare definitie */
.cp-hero{position:relative;overflow:hidden;padding:72px 0 56px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.cp-hero-mark{position:absolute;top:-60px;right:-70px;width:380px;height:auto;opacity:.05;pointer-events:none;z-index:0}
.cp-hero .lp-wrap{position:relative;z-index:1}
.cp-hero h1{font-size:clamp(30px,4.5vw,44px);letter-spacing:-.4px;margin:0;max-width:760px}
/* Auteur en datum onder de H1 van een clusterpagina. Klein, rustig, en in
   dezelfde taal als de pagina; de structuurdata zegt hetzelfde. */
.cp-auteur{margin:14px 0 0;font-size:13px;letter-spacing:.02em;color:var(--ink-soft)}
.cp-def{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:clamp(19px,2.6vw,24px);line-height:1.5;color:var(--ink);max-width:720px;margin:28px 0 0;padding-left:22px;border-left:3px solid var(--petrol)}

/* zone 2 · de leeskolom */
.cp-read{padding-top:56px}
.cp-body{max-width:820px;padding-bottom:64px;font-size:17px;line-height:1.65}
.cp-body h2{font-size:24px;margin:44px 0 12px}
.cp-body h2:first-child{margin-top:0}
.cp-body p{margin:0 0 18px}
.cp-row{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:24px 0 0}
.cp-row p{margin:0}
.cp-still{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;margin:0}
.cp-still>img{display:block;width:100%;height:auto;border-radius:6px}
.cp-still-ph{aspect-ratio:8/5;border-radius:6px;background:var(--cream-2);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--ink-soft)}
.cp-still figcaption{font-size:13.5px;color:var(--ink-soft);padding:10px 4px 2px}

/* zone 3 · de app-toepassing */
.cp-app{position:relative;background:var(--cream-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0;overflow:hidden}
.cp-app .lp-wrap{position:relative}
.cp-app h2{font-size:28px;margin:0 0 10px;max-width:720px}
.cp-app>.lp-wrap>p{max-width:720px;color:var(--ink-soft);margin:0 0 28px}
.cp-app-row{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center}
.cp-app-row>div p{max-width:none;color:var(--ink-soft);margin:0}
.cp-video{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px;margin:0}
.cp-video-frame{position:relative;aspect-ratio:8/5;width:100%;border-radius:6px;overflow:hidden;background:var(--petrol-dark);cursor:pointer}
.cp-video-frame video{display:block;width:100%;height:100%}
.cp-poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(160deg,#0E4F4B,#0A3936);background-size:cover;background-position:center}
.cp-play{width:64px;height:64px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.cp-play::before{content:"";margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--petrol-deep)}
.cp-poster span:last-child{font-size:13.5px;color:rgba(250,248,245,.8)}
.cp-video figcaption{font-size:13.5px;color:var(--ink-soft);padding:10px 4px 2px}

/* zone 4 · de call-to-action */
.cp-cta{padding:72px 0;text-align:center}
.cp-cta h2{font-size:26px;margin:0 0 22px}
.cp-cta .sub{display:block;font-size:14px;color:var(--ink-soft);margin-top:14px}

/* zone 5 · verwante pagina's */
.cp-related{border-top:1px solid var(--line);padding:56px 0 72px}
.cp-related h2{font-size:21px;margin:0 0 22px}
.cp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cp-card{display:block;border:1px solid var(--line);border-radius:12px;background:#fff;padding:20px 22px;text-decoration:none}
.cp-card b{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;color:var(--petrol-deep);margin-bottom:6px}
.cp-card span{font-size:14px;color:var(--ink-soft);line-height:1.5}
.cp-card:hover{border-color:var(--petrol)}

@media(max-width:760px){
  .cp-hero{padding:48px 0 40px}
  .cp-read{padding-top:40px}
  .cp-app{padding:48px 0}
  .cp-cta{padding:56px 0}
  .cp-cards{grid-template-columns:1fr}
  .cp-row{grid-template-columns:1fr;gap:18px}
  .cp-app-row{grid-template-columns:1fr;gap:20px}
}

/* ============================================================
   SUITE + PRIJZEN — de drie apps naast elkaar.
   Verticale band = wat gratis is. Band eronder = wat betalend is.
   App-hues volgen de schil van elke app; het logo blijft mint.
   ============================================================ */
:root{
  /* zijmenu-kleur per app (dev, 11 sep 2026) — zelfde oklch-toon, alleen hue verschilt.
     Het accent-licht hoort bij de donkere schil in de app en wordt op crème niet gebruikt. */
  --app-plan:#0E4F4B;      --app-plan-accent:#7FC4BE;
  --app-portfolio:#143F54; --app-portfolio-accent:#8CC0D8;
  --app-missie:#3E3452;    --app-missie-accent:#B9A8D4;
}
.lp-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch;margin-top:8px}
.lp-app{background:#fff;border:1px solid var(--line);border-top:3px solid var(--app,var(--petrol));border-radius:16px;padding:24px 26px 26px;display:flex;flex-direction:column}
.lp-app.plan{--app:var(--app-plan)}
.lp-app.portfolio{--app:var(--app-portfolio)}
.lp-app.missie{--app:var(--app-missie)}
.lp-app-free{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff;background:var(--ok);padding:4px 11px;border-radius:999px}
.lp-app h3{font-size:20px;color:var(--app);margin:14px 0 0}
.lp-app .who{font-size:12.5px;color:var(--ink-soft);margin:5px 0 16px;line-height:1.45}
.lp-app ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-app li{font-size:13px;line-height:1.45;padding-left:20px;position:relative;color:var(--ink)}
.lp-app li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--app);opacity:.55}
.lp-app-link{display:inline-block;margin-top:16px;font-size:13px;font-weight:600;color:var(--app);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;align-self:flex-start}
/* het betalende blok hoort bij één app en staat onderaan die kaart, licht, met terracotta als accent */
.lp-app-paid{margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.lp-app-paid-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin-bottom:12px}
.lp-app-paid-head .lbl{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--terra)}
.lp-app-paid-head .sub{font-size:12.5px;color:var(--ink);font-weight:600}
.lp-app-paid li::before{background:var(--terra);opacity:1}
.lp-app-paid .note{font-size:12px;color:var(--ink-soft);margin-top:12px;line-height:1.45}
@media(max-width:900px){.lp-apps{grid-template-columns:1fr;max-width:460px;margin:8px auto 0}}
.lp-tiers-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:20px}
.lp-tiers-foot .note{font-size:12.5px;color:var(--ink-soft)}
@media(max-width:900px){
  }
.cp-cta .cp-sample{display:inline-block;margin-left:18px;font-size:14px;font-weight:600;color:var(--petrol);text-decoration:none;border-bottom:1px solid var(--petrol-light);padding-bottom:2px}
.cp-cta .cp-sample:hover{border-bottom-color:var(--petrol)}
@media(max-width:560px){.cp-cta .cp-sample{display:block;margin:16px 0 0}}
/* clusterpagina · schermafdruk over de volle leesbreedte, klik voor ware grootte */
.cp-row-flip>figure{order:-1}
.cp-shot{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;margin:8px 0 44px}
.cp-shot a{display:block;border-radius:8px;overflow:hidden}
.cp-shot img{display:block;width:100%;height:auto}
.cp-shot figcaption{font-size:13.5px;color:var(--ink-soft);padding:12px 4px 2px;line-height:1.5}
.cp-shot .zoom{color:var(--petrol);font-weight:600;white-space:nowrap}
.cp-shot-thumb{position:relative;display:block;cursor:zoom-in;border-radius:8px;overflow:hidden}
.cp-shot-zoom{position:absolute;right:10px;bottom:10px;font-size:.78rem;padding:4px 10px;border-radius:999px;background:rgba(20,45,45,.75);color:#FAF8F5}

/* lightbox · vergroten binnen de pagina, niet in een nieuw tabblad */
.cx-lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:28px;background:rgba(10,57,54,.86)}
.cx-lightbox.on{display:flex}
.cx-lightbox-fig{margin:0;max-width:min(1600px,96vw);max-height:92vh;display:flex;flex-direction:column;gap:10px}
.cx-lightbox-fig img{display:block;max-width:100%;max-height:84vh;width:auto;height:auto;border-radius:8px;background:#fff}
.cx-lightbox-fig figcaption{font-size:13.5px;color:rgba(250,248,245,.82);line-height:1.5}
.cx-lightbox-close{position:absolute;top:14px;right:18px;width:40px;height:40px;border:0;border-radius:999px;background:rgba(250,248,245,.14);color:#FAF8F5;font-size:26px;line-height:1;cursor:pointer}
.cx-lightbox-close:hover{background:rgba(250,248,245,.26)}
body.cx-lightbox-open{overflow:hidden}
.cp-still-thumb{position:relative;display:block;cursor:zoom-in;border-radius:6px;overflow:hidden}
.cp-still-zoom{position:absolute;right:8px;bottom:8px;font-size:.72rem;padding:3px 9px;border-radius:999px;background:rgba(20,45,45,.75);color:#FAF8F5}
/* het beeld zit sinds de lightbox in een <a>, dus .cp-still>img treft het niet meer */
.cp-still .cp-still-thumb{display:block;width:100%}
.cp-still .cp-still-thumb img{display:block;width:100%;height:auto;border-radius:6px}

/* ============================================================
   PROBLEEMSECTIE (#problem) — links wat de bezoeker herkent,
   rechts het antwoord in een donker paneel met de video.
   De – in .lp-problem-mk en de ✓ in .lp-answer-mk zijn dezelfde
   tekens als td.no .mk en td.yes .mk in de vergelijkingstabel:
   geen nieuwe signaalkleur, geen rood. Gedeeld door en/nl/fr.
   ============================================================ */
.lp-problem-wrap{display:grid;grid-template-columns:6fr 5fr;gap:36px;align-items:start}
.lp-problem-left{display:flex;flex-direction:column;gap:12px}
.lp-problem-left h2{font-size:30px;margin:10px 0 10px}
.lp-problem-lede{font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 22px}
.lp-problem-cell{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.lp-problem-cell h3{display:flex;align-items:center;gap:9px;font-size:16px;margin:0 0 5px}
.lp-problem-cell p{font-size:13px;line-height:1.5;color:var(--ink);margin:0}
.lp-problem-mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#eee6da;color:#a99;font-family:var(--font-body);font-weight:600;font-size:13px;flex:none}

/* het antwoord */
.lp-answer-panel{background:#0E4F4B;border-radius:18px;padding:26px 28px 24px;display:flex;flex-direction:column;gap:14px}
.lp-answer-tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#0A3936;background:var(--petrol-light);border-radius:999px;padding:4px 14px 4px 5px}
.lp-answer-mk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:rgba(10,57,54,.9);color:var(--petrol-light);font-weight:700;font-size:12px;letter-spacing:0;flex:none}
.lp-answer-lede{font-size:13.5px;line-height:1.6;color:rgba(250,248,245,.92);margin:0}
.lp-problem-bridge{font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin:4px 2px 0}
.lp-answer-panel .lp-problem-bridge{color:rgba(250,248,245,.65);margin:0}
.lp-answer-panel .lp-problem-bridge a{color:var(--petrol-light)}

/* de speler in het paneel — 16:9, geen autoplay, poster verplicht */
.lp-video-slot{margin:0;max-width:400px}
.lp-video{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:12px;background:#0A3936;border:1px solid rgba(250,248,245,.14)}
.lp-video-cap{font-size:12.5px;color:rgba(250,248,245,.75);margin-top:8px}
.lp-video-apps{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;color:var(--petrol-light);margin-top:2px;text-transform:uppercase}
@media(max-width:900px){.lp-problem-wrap{grid-template-columns:1fr;gap:24px}.lp-video-slot{max-width:none}}

/* ------------------------------------------------------------
   Portfolio-variant van de probleemsectie (.is-portfolio).
   Zelfde anatomie als op de homepage, maar in de schil van
   Change portfolio: staalblauw in plaats van petrol. Terracotta
   blijft de enige actiekleur en zit hier alleen in de speler.
   Het rechterpaneel is smaller dan op de homepage, dus stapelt
   deze variant al bij 1040px: daarboven braken de pill en de kop
   over twee regels.
   ------------------------------------------------------------ */
.is-portfolio .lp-answer-panel{background:#143F54}
.is-portfolio .lp-answer-tag{color:#0A2A38;background:#8CC0D8}
.is-portfolio .lp-answer-mk{background:rgba(10,42,56,.9);color:#8CC0D8}
.is-portfolio .lp-video{background:#0A2A38}
.is-portfolio .lp-video-apps{color:#8CC0D8}
.is-portfolio .lp-answer-panel .lp-problem-bridge a{color:#8CC0D8}
.is-portfolio .lp-video-slot{max-width:none}
@media(max-width:1040px){.is-portfolio .lp-problem-wrap{grid-template-columns:1fr;gap:24px}}

/* ------------------------------------------------------------
   PRO · één licentie over de drie apps.
   De betaallaag stond eerst als blok binnen elke kaart, waardoor
   de sectie las alsof je per app bijbetaalt. Nu is het één band
   die onder de drie kaarten doorloopt: één kop, één cel per app,
   één voetregel. Een extra Pro-regel later verandert niets aan
   deze structuur.

   Twee dingen bepalen of de band aansluit, en allebei zijn ze
   afgeleid van .lp-apps hierboven, niet zelf gekozen:
   1. de kaarten zijn even hoog (.lp-apps staat op stretch) en de
      "how it works"-link wordt met margin-top:auto naar onderen
      geduwd, anders eindigt die ene kaart hoger dan de rest;
   2. het band-grid heeft exact dezelfde tracks en gap als de
      kaarten (22px hier), de horizontale padding zit in de cellen
      en niet op de band, en de kolomstreep staat op de halve gap
      zodat ze precies in de kaartgoot valt.
   Wijzigt de gap van .lp-apps, dan wijzigen die twee mee.
   ------------------------------------------------------------ */
.lp-apps{margin-bottom:0}
.lp-app{border-radius:16px 16px 0 0;border-bottom-color:transparent}
.lp-app-link{margin-top:auto;padding-top:12px}

.lp-pro{margin-top:-1px;background:#0E4F4B;border-radius:0 0 16px 16px;padding:16px 0 14px}
.lp-pro-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 26px}
.lp-pro-tag{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--terra)}
.lp-pro-prijs{font-size:13px;font-weight:600;color:var(--cream)}
/* De munt onder de prijs. Kleiner en rustiger dan de prijs zelf: het is een
   verduidelijking, geen tweede prijs. */
.lp-pro-munt{margin:6px 26px 0;font-size:11.5px;line-height:1.45;color:rgba(247,244,238,.68)}
.lp-pro-een{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--petrol-light);background:rgba(127,196,190,.14);border-radius:999px;padding:3px 12px}

.lp-pro-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding-top:12px}
.lp-pro-kol{position:relative;padding:0 26px;box-sizing:border-box}
.lp-pro-kol + .lp-pro-kol::before{content:"";position:absolute;left:-11px;top:2px;bottom:2px;width:1px;background:rgba(250,248,245,.14)}
.lp-pro-kol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lp-pro-kol li{position:relative;font-size:13.5px;line-height:1.5;color:rgba(250,248,245,.92);padding-left:18px}
.lp-pro-kol li::before{content:"";position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:var(--terra)}
/* Mist-tonen op dit petrol vlak halen 4.5:1 pas vanaf ongeveer .65; .55 kwam
   uit op 3.9:1. Vandaar .72 voor de regel van Change mission. */
.lp-pro-niets{font-size:13.5px;line-height:1.5;color:rgba(250,248,245,.72)}
.lp-pro-note{font-size:12px;line-height:1.5;color:rgba(250,248,245,.65);margin:14px 26px 0;padding-top:12px;border-top:1px solid rgba(250,248,245,.16)}

/* Zelfde breekpunt als .lp-apps, anders stapelen de kaarten en de band niet
   tegelijk. De band wordt dan een losse kaart onder de drie. */
@media(max-width:900px){
  .lp-pro{margin:14px auto 0;border-radius:16px;max-width:460px}
  .lp-pro-grid{grid-template-columns:1fr;gap:14px}
  .lp-pro-kol{padding:0 22px}
  .lp-pro-kol + .lp-pro-kol::before{left:22px;right:22px;top:-7px;bottom:auto;width:auto;height:1px}
  .lp-pro-een{margin-left:0}
  .lp-app{border-radius:16px;border-bottom-color:var(--line)}
  .lp-pro-head,.lp-pro-note{margin-left:22px;margin-right:22px}
}