/*
 * De publieke site.
 *
 * Overgenomen uit src/app/(marketing)/marketing.css, het bestand waar de bestaande site op draait.
 * Bewust letterlijk en niet nagebouwd: dit is de vormgeving zoals hij er is, en elk verschil zou
 * hier een eigen ontwerp worden in plaats van dezelfde site.
 *
 * Hij hangt aan de tokens uit tokens.css en aan --font-heading en --font-body; verder staat hij op
 * zichzelf. Alles is afgeschermd onder .marketing-shell, zodat hij de interne schermen niet raakt.
 *
 * Werk dit bestand niet met de hand bij zolang de Next.js-versie er nog staat: neem hem daar over,
 * anders lopen de twee uit elkaar.
 */

.marketing-shell{--ink:var(--color-brand-navy);--deep:var(--color-brand-navy-hover);--olive:var(--color-brand-accent);--lime:#c3d49b;--soft:var(--color-brand-accent-subtle);--blue-soft:#edf4f5;--muted:var(--color-text-secondary);--border:var(--color-border-default);--white:var(--color-text-inverse);--max:1240px}.marketing-shell *{box-sizing:border-box}.marketing-shell{scroll-behavior:smooth;scroll-padding-top:118px}.marketing-shell{margin:0;font:16px/1.75 var(--font-body),'Poppins',Arial,sans-serif;color:var(--ink);background:var(--color-bg-surface)}.marketing-shell button,.marketing-shell input,.marketing-shell select{font:inherit}.marketing-shell button,.marketing-shell a{-webkit-tap-highlight-color:transparent}.marketing-shell button{cursor:pointer}.marketing-shell a{color:inherit;text-decoration:none}.marketing-shell a:hover{color:#677e3e}.marketing-shell a:focus-visible,.marketing-shell button:focus-visible,.marketing-shell summary:focus-visible{outline:2px solid var(--color-brand-navy);outline-offset:2px}.marketing-shell button:disabled{cursor:default}.marketing-shell img{max-width:100%;height:auto}.marketing-shell h1,.marketing-shell h2,.marketing-shell h3,.marketing-shell p{margin-top:0}.marketing-shell h1,.marketing-shell h2,.marketing-shell h3{font-family:var(--font-heading),'Commissioner',Arial,sans-serif;font-weight:750;line-height:1.14;letter-spacing:-.04em}.marketing-shell h1{font-size:clamp(2.75rem,4.7vw,4.3rem);margin-bottom:26px}.marketing-shell h1 em{color:#809550;font-style:normal}.marketing-shell h2{font-size:clamp(2rem,3.2vw,2.8rem);margin-bottom:23px}.marketing-shell h3{font-size:1.45rem;margin-bottom:14px}.marketing-shell p{margin-bottom:20px;color:var(--muted)}.marketing-shell .wrap{max-width:var(--max);padding-left:38px;padding-right:38px;margin-left:auto;margin-right:auto}.marketing-shell .section{padding-top:80px;padding-bottom:80px}.marketing-shell .eyebrow{font-size:.75rem;line-height:1.6;letter-spacing:.13em;font-weight:750;color:var(--ink);margin-bottom:20px}.marketing-shell .lead{font-size:1.15rem;line-height:1.85;max-width:670px}.marketing-shell .body-lead{font-size:1.075rem;line-height:1.9;margin-top:24px;max-width:470px}.marketing-shell .skip{position:fixed;top:-100px;left:20px;background:#fff;padding:14px;z-index:100}.marketing-shell .skip:focus{top:10px}.marketing-shell .topline{background:var(--ink);color:#e5eccf;text-align:center;font-size:.75rem;letter-spacing:.04em;padding:7px 20px}.marketing-shell header{position:sticky;top:0;z-index:30;background:#fffffff5;backdrop-filter:blur(16px);border-bottom:1px solid #e9eeeb}.marketing-shell .header-inner{max-width:var(--max);padding:8px 38px;margin:auto;display:flex;align-items:center;gap:27px;min-height:91px}.marketing-shell .brand{display:block;flex-shrink:0;line-height:0;width:218px}.marketing-shell .brand img{width:218px}.marketing-shell nav{display:flex;align-items:center;gap:23px;margin-left:auto}.marketing-shell nav a{font-size:.875rem;font-weight:600;white-space:nowrap}.marketing-shell nav a[aria-current=page]{color:#728847;box-shadow:0 2px 0 #a1af73}.marketing-shell .header-actions{display:flex;align-items:center;gap:20px}.marketing-shell .login{font-size:.875rem;font-weight:650;white-space:nowrap}.marketing-shell .btn{display:inline-flex;align-items:center;justify-content:center;padding:16px 22px;font-size:.9375rem;font-weight:650;line-height:1.5;border:1px solid var(--ink);border-radius:6px;color:white;background:var(--ink);transition:background .2s,transform .2s}.marketing-shell .btn:hover{background:#12626a;color:#fff;transform:translateY(-2px)}.marketing-shell .header-actions .btn{font-size:.8125rem;padding:12px 17px;white-space:nowrap}.marketing-shell .outline{color:var(--ink);background:transparent}.marketing-shell .lime{color:var(--ink);background:var(--lime);border-color:var(--lime)}.marketing-shell .lime:hover{background:#d7e6b6;color:var(--ink)}.marketing-shell .text-link{font-size:.9375rem;font-weight:650;line-height:1.5;padding:8px 0}.marketing-shell .actions{display:flex;gap:24px;flex-wrap:wrap;align-items:center;margin-top:28px}.marketing-shell .mobile-start,.marketing-shell .menu-toggle{display:none}.marketing-shell .page-hero{padding-top:66px;padding-bottom:68px}.marketing-shell .page-hero:not(.has-side){max-width:var(--max)}.marketing-shell .page-hero:not(.has-side) .lead{max-width:730px}.marketing-shell .page-hero.has-side{display:grid;grid-template-columns:1.22fr 1fr;gap:60px;align-items:center}.marketing-shell .has-side .eyebrow{font-size:.6875rem;letter-spacing:.12em}.marketing-shell .has-side .lead{font-size:1.05rem}.marketing-shell .has-side .actions{gap:20px}.marketing-shell .has-side .actions .text-link{font-size:.875rem}.marketing-shell .match-demo{background:var(--soft);border:1px solid #e4eadb;border-radius:13px;box-shadow:0 20px 55px #003e4408;overflow:hidden}.marketing-shell .demo-top{padding:18px 24px;border-bottom:1px solid #dce4d3;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.65rem;letter-spacing:.09em;font-weight:750}.marketing-shell .demo-tag{background:#fff;border:1px solid #dbe3d0;font-size:.6875rem;font-weight:500;letter-spacing:0;padding:1px 8px;border-radius:30px;color:var(--muted)}.marketing-shell .demo-frame{min-height:369px;position:relative}.marketing-shell .demo-scene{padding:24px;animation:arrive .55s ease both}.marketing-shell .demo-scene[hidden]{display:none}.marketing-shell .mini-label{font-size:.6875rem;letter-spacing:.12em;font-weight:700;color:#647647;display:block;margin-bottom:15px}.marketing-shell .demo-scene h3{font-size:1.9rem;line-height:1.18;margin-bottom:22px;letter-spacing:-.035em}.marketing-shell .role-row,.marketing-shell .upload-row{display:flex;align-items:center;gap:13px;background:white;border:1px solid #e0e6d7;border-radius:7px;padding:15px;margin-bottom:13px;box-shadow:0 3px 10px #00495003}.marketing-shell .role-row b,.marketing-shell .upload-row b{display:block;font-size:.9rem}.marketing-shell .role-row small,.marketing-shell .upload-row small,.marketing-shell .meeting small{display:block;color:var(--muted);font-size:.75rem}.marketing-shell .role-icon{display:grid;place-items:center;width:39px;height:39px;background:var(--blue-soft);border-radius:9px;font-weight:750}.marketing-shell .role-icon.olive{background:#eef2e5}.marketing-shell .tick{margin-left:auto;color:#7e9650}.marketing-shell .demo-note{font-size:.6875rem;line-height:1.7;margin:17px 0 0;color:#627265}.marketing-shell .file-icon{font-weight:700;border:1px solid #c5d2b1;border-radius:4px;padding:7px;font-size:.8rem;min-width:39px;text-align:center}.marketing-shell .upload-row>span:last-child{margin-left:auto;font-size:1.4rem}.marketing-shell .anon-heading{display:flex;justify-content:space-between;align-items:start}.marketing-shell .anon-heading h3{margin-bottom:15px}.marketing-shell .lock-symbol{font-size:1.5rem;color:#7b9350}.marketing-shell .profile-pair{background:white;border:1px solid #dae4d1;border-radius:7px;padding:13px 17px;position:relative}.marketing-shell .profile-pair div+div{border-top:1px solid var(--border)}.marketing-shell .profile-pair small{font-size:.625rem;letter-spacing:.09em;color:#6d7e63;display:block}.marketing-shell .profile-pair b{display:block;font-size:.9375rem}.marketing-shell .profile-pair div>span{font-size:.6875rem;color:var(--muted);display:block}.marketing-shell .pair-arrow{display:block;line-height:1.3;color:#8aa561;margin:3px 0}.marketing-shell .score-row{display:flex;align-items:center;gap:17px;background:var(--ink);color:white;padding:13px 16px;border-radius:7px;margin-top:12px}.marketing-shell .score-row b{font-size:.875rem}.marketing-shell .score-row small{display:block;color:#d1dfd2;font-size:.6875rem}.marketing-shell .score-ring{border:2px solid #b9cf87;border-radius:50%;width:49px;height:49px;display:grid;place-items:center;flex-shrink:0}.marketing-shell .score-ring b{font-size:1.05rem}.marketing-shell .score-ring b span{font-size:.6875rem}.marketing-shell .demo-controls{border-top:1px solid #dce4d3;display:flex;align-items:center;justify-content:space-between;padding:13px 24px}.marketing-shell .demo-controls>div{display:flex;gap:6px}.marketing-shell .demo-controls button{border:0;background:transparent;color:#5c7065;font-size:.75rem;border-radius:5px;min-width:34px;min-height:34px}.marketing-shell .demo-controls button[aria-pressed=true]{color:white;background:var(--ink)}.marketing-shell .demo-controls .demo-pause{font-size:.6875rem;display:flex;align-items:center;gap:8px;padding:4px}.marketing-shell .meeting{display:flex;gap:13px;align-items:center;background:var(--ink);border-radius:7px;padding:19px;color:white;margin-bottom:16px}.marketing-shell .meeting-check{font-size:1.2rem;border:1px solid #91b171;border-radius:50%;display:grid;place-items:center;width:38px;height:38px;color:#c3d49b}.marketing-shell .meeting b{font-size:.875rem}.marketing-shell .meeting small{color:#d8e6dc;font-size:.6875rem}.marketing-shell .meeting-flow{display:flex;flex-direction:column;gap:8px;font-size:.8rem}.marketing-shell .meeting-flow span:before{content:'✓';color:#6d8d46;margin-right:10px}.marketing-shell .trust-strip{border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.marketing-shell .trust-strip>.wrap{display:flex;justify-content:space-between;gap:20px;padding-top:22px;padding-bottom:22px;font-size:.875rem;font-weight:600}.marketing-shell .section-title{display:grid;grid-template-columns:1fr .8fr;gap:80px;align-items:end;margin-bottom:35px}.marketing-shell .section-title h2{margin-bottom:0}.marketing-shell .section-title>p{margin:0 0 3px;max-width:450px;font-size:1rem}.marketing-shell .audience-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.marketing-shell .audience{padding:36px;border-radius:10px;display:flex;flex-direction:column;align-items:start}.marketing-shell .employer{background:var(--soft)}.marketing-shell .coach{background:var(--blue-soft)}.marketing-shell .card-index{font-size:.6875rem;letter-spacing:.12em;font-weight:700;margin-bottom:22px}.marketing-shell .audience h3{font-size:2rem;margin-bottom:20px}.marketing-shell .audience h2{font-size:2.2rem}.marketing-shell .audience p{font-size:1rem;line-height:1.9}.marketing-shell .checks{list-style:none;padding:0;margin:0 0 25px;font-size:.9375rem}.marketing-shell .checks li{position:relative;padding:6px 0 6px 25px;line-height:1.6}.marketing-shell .checks li:before{content:'✓';color:#6d8847;position:absolute;left:0}.marketing-shell .audience .btn{margin-top:auto}.marketing-shell .audience>.text-link{margin-top:12px}.marketing-shell .candidate-note{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--border);padding:24px 0;font-size:.875rem}.marketing-shell .candidate-note>span{font-weight:700;flex-shrink:0}.marketing-shell .candidate-note p{margin:0;line-height:1.6;max-width:580px}.marketing-shell .candidate-note .text-link{margin-left:auto;flex-shrink:0;font-size:.875rem}.marketing-shell .soft{background:var(--soft)}.marketing-shell .grid{display:grid;gap:25px}.marketing-shell .three{grid-template-columns:repeat(3,minmax(0,1fr))}.marketing-shell .two{grid-template-columns:1fr 1fr}.marketing-shell .info-card{padding:29px;background:#fff;border:1px solid var(--border);border-radius:8px}.marketing-shell .info-card .eyebrow{font-size:.6875rem;display:block;margin-bottom:27px}.marketing-shell .info-card h3{font-size:1.45rem;line-height:1.25;overflow-wrap:anywhere}.marketing-shell .info-card p{font-size:.9375rem;margin:0;line-height:1.85}.marketing-shell .section-bottom{margin-top:30px;text-align:center}.marketing-shell .split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}.marketing-shell .criteria-card{border:1px solid var(--border);border-radius:9px;padding:28px 30px}.marketing-shell .criteria-head{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:10px}.marketing-shell .criteria-head h3{font-size:1.2rem;margin:0}.marketing-shell .criteria-head>span{font-size:.6875rem;color:#687a58}.marketing-shell .criteria-item{display:flex;flex-direction:column;padding:17px 0;border-bottom:1px solid var(--border)}.marketing-shell .criteria-item b{font-size:.9375rem}.marketing-shell .criteria-item span{font-size:.875rem;color:var(--muted)}.marketing-shell .criteria-card>p{font-size:.8125rem;line-height:1.8;margin:20px 0 0}.marketing-shell .mission{padding:52px 58px;background:var(--soft);border-left:5px solid var(--olive);border-radius:7px}.marketing-shell .mission p:not(.eyebrow){max-width:750px;font-size:1.05rem}.marketing-shell .faq-section{display:grid;grid-template-columns:.85fr 1.25fr;gap:70px}.marketing-shell .faqs details{border-bottom:1px solid var(--border)}.marketing-shell .faqs summary{cursor:pointer;list-style:none;padding:22px 0;display:flex;align-items:center;gap:25px;justify-content:space-between;font-weight:650;line-height:1.65}.marketing-shell .faqs summary::-webkit-details-marker{display:none}.marketing-shell .faqs summary>span{font-size:1.4rem;font-weight:400;line-height:1;flex-shrink:0;color:#7d9159}.marketing-shell .faqs details[open] summary>span{transform:rotate(45deg)}.marketing-shell .faqs details>div{font-size:.9375rem;line-height:1.9;color:var(--muted);padding:0 36px 23px 0}.marketing-shell .cta{background:var(--ink);color:white;padding:46px 48px;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:55px;margin-top:12px;margin-bottom:24px}.marketing-shell .cta .eyebrow{color:var(--lime)}.marketing-shell .cta h2{font-size:2.3rem;max-width:720px}.marketing-shell .cta p:last-child{color:#dae5df;max-width:600px;margin:0;font-size:.9375rem}.marketing-shell .cta .btn{white-space:nowrap;flex-shrink:0}.marketing-shell .quote-card{padding:35px;background:var(--blue-soft);border-radius:12px;border:1px solid var(--border)}.marketing-shell .quote-card h3{font-size:2.25rem;margin-bottom:30px}.marketing-shell .quote-card .checks{margin:0}.marketing-shell .olive-card{background:var(--soft)}.marketing-shell .steps{list-style:none;margin:0;padding:0}.marketing-shell .steps li{display:flex;gap:24px;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--border)}.marketing-shell .steps li:last-child{border:0;margin:0;padding:0}.marketing-shell .step-num{height:40px;width:40px;flex-shrink:0;border-radius:50%;background:var(--soft);border:1px solid #d9e3d0;display:grid;place-items:center;font-size:.8125rem;font-weight:650}.marketing-shell .steps h3{font-size:1.35rem;margin:4px 0 13px}.marketing-shell .steps p{margin:0;font-size:.9375rem;line-height:1.9}.marketing-shell .prose h3{font-size:1.4rem;margin-top:30px}.marketing-shell .prose h3:first-child{margin-top:0}.marketing-shell .prose p{font-size:1rem;line-height:1.9}.marketing-shell .spaced{margin-top:35px}.marketing-shell .fine{font-size:.875rem;line-height:1.9;max-width:880px}.marketing-shell .comparison{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--border);border-radius:10px;overflow:hidden}.marketing-shell .comparison>div{padding:35px}.marketing-shell .comparison>div+div{border-left:1px solid var(--border);background:var(--soft)}.marketing-shell .comparison h2{font-size:2rem}.marketing-shell .comparison p{font-size:.9375rem;line-height:1.8;margin-bottom:0}.marketing-shell .journey{max-width:970px;padding-top:15px}.marketing-shell .journey .steps li{gap:32px;margin-bottom:30px;padding-bottom:30px}.marketing-shell .journey .steps h3{font-size:1.65rem}.marketing-shell .journey .steps p{font-size:1rem}.marketing-shell .journey .step-num{height:48px;width:48px}.marketing-shell .faq-hub,.marketing-shell .legal-layout{display:grid;grid-template-columns:255px 1fr;gap:60px;align-items:start;padding-top:25px}.marketing-shell .toc{position:sticky;top:128px;display:flex;flex-direction:column;align-items:start;gap:8px;border-left:1px solid var(--border);padding-left:23px}.marketing-shell .toc .eyebrow{margin-bottom:12px}.marketing-shell .toc a{font-size:.875rem;line-height:1.5;padding:5px 0}.marketing-shell .faq-group{margin-bottom:50px;scroll-margin-top:120px}.marketing-shell .faq-group h2{font-size:1.8rem}.marketing-shell .legal-layout{padding-bottom:70px}.marketing-shell .legal-prose{max-width:780px}.marketing-shell .legal-prose section{scroll-margin-top:125px}.marketing-shell .legal-prose h2{font-size:1.65rem;letter-spacing:-.025em;line-height:1.4;margin-top:37px;margin-bottom:20px}.marketing-shell .legal-prose p,.marketing-shell .legal-prose li{font-size:1rem;line-height:1.9;color:#42565b}.marketing-shell .legal-prose ul{padding-left:22px}.marketing-shell .legal-prose li{margin-bottom:12px}.marketing-shell .legal-prose a{text-decoration:underline}.marketing-shell .draft-note{padding:22px 25px;border:1px solid #d8c798;background:#faf6e9;border-radius:7px}.marketing-shell .draft-note strong{color:#715826}.marketing-shell .draft-note p{font-size:.9375rem;margin:8px 0 0}.marketing-shell .print-btn{margin-top:20px;border:1px solid var(--ink);background:white;color:var(--ink);border-radius:5px;padding:10px;font-size:.8125rem}.marketing-shell .contact-value{font-size:1.7rem;letter-spacing:-.02em}.marketing-shell .footer-top{padding-top:50px;padding-bottom:40px;display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:35px}.marketing-shell .footer-brand img{width:230px;margin:-8px 0 5px -16px}.marketing-shell .footer-top h3{font-size:.875rem;letter-spacing:0;margin-bottom:17px}.marketing-shell .footer-top p,.marketing-shell .footer-top a{font-size:.8125rem;line-height:1.9}.marketing-shell .footer-top p{margin:14px 0 0}.marketing-shell .footer-top>div>a{display:block;color:var(--muted);padding:3px 0;overflow-wrap:anywhere}.marketing-shell .footer-top>div>a:hover{color:var(--ink)}.marketing-shell .footer-bottom{border-top:1px solid var(--border);padding:21px 0 25px;display:flex;justify-content:space-between;gap:25px;flex-wrap:wrap;font-size:.75rem;color:var(--muted)}.marketing-shell .footer-bottom>div{display:flex;gap:25px}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@media(min-width:1450px){.marketing-shell .page-hero{padding-top:83px;padding-bottom:83px}}@media(max-width:1150px){.marketing-shell .header-inner{gap:16px}.marketing-shell .brand,.marketing-shell .brand img{width:185px}.marketing-shell nav{gap:15px}.marketing-shell nav a{font-size:.8125rem}.marketing-shell .header-actions{gap:13px}.marketing-shell .page-hero.has-side{gap:35px;grid-template-columns:1.1fr 1fr}.marketing-shell .has-side h1{font-size:3.2rem}.marketing-shell .has-side .actions{gap:10px}.marketing-shell .has-side .actions .btn{font-size:.875rem}.marketing-shell .split{gap:45px}.marketing-shell .section-title{gap:40px}.marketing-shell .footer-top{gap:24px}.marketing-shell .demo-top{font-size:.6rem}.marketing-shell .demo-scene h3{font-size:1.75rem}.marketing-shell .demo-frame{min-height:370px}}@media(max-width:940px){.marketing-shell .wrap{padding-left:28px;padding-right:28px}.marketing-shell .header-inner{padding-left:28px;padding-right:28px;justify-content:space-between;min-height:82px}.marketing-shell .header-actions{margin-left:auto}.marketing-shell .header-actions .btn{display:none}.marketing-shell .menu-toggle{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);background:#fff;border-radius:5px}.marketing-shell .menu-toggle span{width:19px;height:2px;background:var(--ink)}.marketing-shell nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;padding:20px 28px;background:white;border-bottom:1px solid var(--border);flex-direction:column;align-items:stretch;gap:3px;box-shadow:0 8px 14px #003e4408}.marketing-shell nav.open{display:flex}.marketing-shell nav a{padding:12px 0;font-size:1rem}.marketing-shell .mobile-start{display:block}.marketing-shell .page-hero.has-side{grid-template-columns:1fr 1fr;gap:26px}.marketing-shell .has-side h1{font-size:2.85rem}.marketing-shell .hero .lead{font-size:1rem}.marketing-shell .has-side .eyebrow{font-size:.625rem}.marketing-shell .match-demo .demo-top{padding:15px 18px;font-size:.5625rem}.marketing-shell .demo-scene{padding:21px 18px}.marketing-shell .demo-controls{padding:12px 18px}.marketing-shell .demo-frame{min-height:390px}.marketing-shell .role-row,.marketing-shell .upload-row{padding:12px;gap:9px}.marketing-shell .role-row small{font-size:.6875rem}.marketing-shell .role-row b{font-size:.8125rem}.marketing-shell .demo-scene h3{font-size:1.7rem}.marketing-shell .trust-strip>.wrap{font-size:.75rem;gap:15px}.marketing-shell .section{padding-top:60px;padding-bottom:60px}.marketing-shell .three{gap:16px}.marketing-shell .info-card{padding:24px}.marketing-shell .info-card h3{font-size:1.3rem}.marketing-shell .audience{padding:28px}.marketing-shell .audience h3{font-size:1.8rem}.marketing-shell .candidate-note{gap:16px;flex-wrap:wrap}.marketing-shell .candidate-note .text-link{margin-left:0}.marketing-shell .candidate-note p{max-width:100%}.marketing-shell .split,.marketing-shell .faq-section{gap:35px}.marketing-shell .criteria-card{padding:23px}.marketing-shell .criteria-head{align-items:start;flex-direction:column}.marketing-shell .cta{padding:35px;gap:25px}.marketing-shell .cta h2{font-size:2rem}.marketing-shell .mission{padding:40px}.marketing-shell .footer-top{grid-template-columns:1fr 1fr}.marketing-shell .faq-hub,.marketing-shell .legal-layout{grid-template-columns:190px 1fr;gap:30px}.marketing-shell .quote-card{padding:27px}.marketing-shell .quote-card h3{font-size:1.9rem}}@media(max-width:680px){.marketing-shell{scroll-padding-top:100px}.marketing-shell .wrap{padding-left:22px;padding-right:22px}.marketing-shell .topline{font-size:.625rem;padding:6px 14px}.marketing-shell .header-inner{padding:8px 22px;min-height:76px}.marketing-shell .brand,.marketing-shell .brand img{width:173px}.marketing-shell .header-actions{gap:15px}.marketing-shell .login{font-size:.8125rem}.marketing-shell .page-hero{padding-top:40px;padding-bottom:43px}.marketing-shell .page-hero.has-side{grid-template-columns:1fr;gap:35px}.marketing-shell .page-hero h1,.marketing-shell .has-side h1{font-size:2.85rem;letter-spacing:-.045em}.marketing-shell .page-hero .eyebrow,.marketing-shell .has-side .eyebrow{font-size:.625rem}.marketing-shell .lead,.marketing-shell .has-side .lead{font-size:1rem}.marketing-shell .actions{gap:15px}.marketing-shell .has-side .actions{gap:15px}.marketing-shell .btn{padding:14px 18px;font-size:.875rem}.marketing-shell .has-side .actions .text-link{font-size:.875rem}.marketing-shell .match-demo{max-width:470px}.marketing-shell .match-demo .demo-top{font-size:.625rem;padding:17px 21px}.marketing-shell .demo-frame{min-height:372px}.marketing-shell .demo-scene{padding:23px}.marketing-shell .demo-scene h3{font-size:1.9rem}.marketing-shell .role-row b{font-size:.9375rem}.marketing-shell .role-row small{font-size:.75rem}.marketing-shell .demo-controls{padding:12px 21px}.marketing-shell .demo-controls button{min-height:40px;min-width:40px}.marketing-shell .demo-controls .demo-pause{font-size:.75rem}.marketing-shell .trust-strip>.wrap{display:grid;grid-template-columns:1fr;padding-top:17px;padding-bottom:17px;gap:7px;font-size:.8125rem}.marketing-shell .section{padding-top:49px;padding-bottom:49px}.marketing-shell h2{font-size:2rem}.marketing-shell .section-title{grid-template-columns:1fr;gap:20px}.marketing-shell .section-title>p{font-size:.9375rem}.marketing-shell .audience-grid,.marketing-shell .split,.marketing-shell .faq-section,.marketing-shell .three,.marketing-shell .two,.marketing-shell .comparison{grid-template-columns:1fr}.marketing-shell .audience{padding:29px}.marketing-shell .audience p{font-size:.9375rem}.marketing-shell .audience h3{font-size:1.9rem}.marketing-shell .checks{font-size:.875rem}.marketing-shell .audience h2{font-size:2rem}.marketing-shell .candidate-note{gap:10px;align-items:start}.marketing-shell .candidate-note>span{width:100%}.marketing-shell .candidate-note p{font-size:.875rem}.marketing-shell .candidate-note .text-link{padding:3px 0}.marketing-shell .info-card{padding:27px}.marketing-shell .info-card .eyebrow{margin-bottom:18px}.marketing-shell .info-card h3{font-size:1.45rem}.marketing-shell .info-card p{font-size:1rem}.marketing-shell .split{gap:30px}.marketing-shell .criteria-head{flex-direction:row}.marketing-shell .criteria-head>span{font-size:.625rem}.marketing-shell .mission{padding:30px 26px}.marketing-shell .mission p:not(.eyebrow){font-size:.9375rem}.marketing-shell .faq-section{gap:15px}.marketing-shell .faqs summary{font-size:.9375rem;padding:20px 0}.marketing-shell .faqs details>div{padding-right:15px}.marketing-shell .cta{display:block;padding:30px 25px;margin-bottom:0}.marketing-shell .cta h2{font-size:1.9rem}.marketing-shell .cta .btn{margin-top:25px;white-space:normal}.marketing-shell .quote-card{padding:30px}.marketing-shell .steps li{gap:17px}.marketing-shell .steps h3{font-size:1.25rem}.marketing-shell .comparison>div{padding:28px}.marketing-shell .comparison>div+div{border-left:0;border-top:1px solid var(--border)}.marketing-shell .comparison h2{font-size:1.85rem}.marketing-shell .journey{padding-top:10px}.marketing-shell .journey .steps li{gap:17px}.marketing-shell .journey .steps h3{font-size:1.4rem}.marketing-shell .journey .steps p{font-size:.9375rem}.marketing-shell .journey .step-num{height:38px;width:38px}.marketing-shell .faq-hub,.marketing-shell .legal-layout{grid-template-columns:1fr;gap:35px}.marketing-shell .toc{position:static;padding-left:18px}.marketing-shell .toc a{font-size:.875rem}.marketing-shell .faq-group{margin-bottom:35px}.marketing-shell .legal-layout{padding-top:0}.marketing-shell .legal-prose h2{font-size:1.5rem}.marketing-shell .legal-prose p,.marketing-shell .legal-prose li{font-size:1rem}.marketing-shell .footer-top{grid-template-columns:1fr 1fr;gap:30px 15px;padding-top:35px}.marketing-shell .footer-brand{grid-column:1/-1}.marketing-shell .footer-brand img{margin-left:-12px;width:220px}.marketing-shell .footer-top>div:last-child{grid-column:1/-1}.marketing-shell .footer-top p,.marketing-shell .footer-top a{font-size:.8125rem}.marketing-shell .footer-bottom{font-size:.6875rem;gap:13px}.marketing-shell .footer-bottom>div{gap:20px}.marketing-shell .eyebrow{margin-bottom:15px}}@media(max-width:360px){.marketing-shell .header-inner{padding-left:16px;padding-right:16px}.marketing-shell .brand,.marketing-shell .brand img{width:148px}.marketing-shell .header-actions{gap:10px}.marketing-shell .page-hero h1{font-size:2.5rem}.marketing-shell .wrap{padding-left:18px;padding-right:18px}.marketing-shell .demo-top{flex-wrap:wrap}.marketing-shell .demo-frame{min-height:405px}.marketing-shell .role-icon{width:30px;height:35px}.marketing-shell .demo-scene{padding:18px}.marketing-shell .demo-controls{padding:10px 14px}.marketing-shell .demo-controls button{min-width:33px}.marketing-shell .score-row{gap:10px;padding:12px}.marketing-shell .score-row small{font-size:.625rem}}@media(prefers-reduced-motion:reduce){.marketing-shell{scroll-behavior:auto}.marketing-shell .demo-scene{animation:none}.marketing-shell .btn{transition:none}}@media print{.marketing-shell{color:#000;font-size:11pt}.marketing-shell header,.marketing-shell footer,.marketing-shell .topline,.marketing-shell .toc,.marketing-shell .actions,.marketing-shell .skip{display:none!important}.marketing-shell .wrap{max-width:none;padding:0}.marketing-shell .page-hero{padding:0 0 20px}.marketing-shell h1{font-size:27pt}.marketing-shell h2{break-after:avoid}.marketing-shell .legal-layout{display:block}.marketing-shell .legal-prose{max-width:none}.marketing-shell .legal-prose p,.marketing-shell .legal-prose li{font-size:11pt;color:#000;line-height:1.5}.marketing-shell .legal-prose section{break-inside:auto}.marketing-shell .draft-note{background:none;border:1px solid #999;padding:12px}.marketing-shell .lead{font-size:12pt}.marketing-shell .legal-prose a{color:#000}.marketing-shell a[href^=http]:after{content:' (' attr(href) ')';font-size:9pt}.marketing-shell .page-hero .eyebrow{font-size:9pt}.marketing-shell .legal-prose h2{font-size:16pt}}
/* Reserve room for every explanation step so the surrounding page stays steady. */
.marketing-shell .demo-frame{min-height:445px}@media(max-width:940px){.marketing-shell .demo-frame{min-height:470px}}@media(max-width:680px){.marketing-shell .demo-frame{min-height:445px}}@media(max-width:360px){.marketing-shell .demo-frame{min-height:480px}}
/* Photography: natural workplace imagery, self-hosted in responsive sizes. */
.marketing-shell .site-photo{margin:0;min-width:0;position:relative}.marketing-shell .site-photo img{display:block;width:100%;object-fit:cover;aspect-ratio:3/2}.marketing-shell .site-photo figcaption{font-size:.6875rem;line-height:1.6;color:#65756b;padding:8px 1px}.marketing-shell .site-photo figcaption a{color:inherit}.marketing-shell .site-photo figcaption a:hover{text-decoration:underline}.marketing-shell .audience-photo{width:calc(100% + 72px);margin:-36px -36px 25px}.marketing-shell .audience-photo img{height:250px;aspect-ratio:auto;border-radius:10px 10px 0 0}.marketing-shell .audience-photo figcaption{padding:7px 20px 0;font-size:.625rem;text-align:right}.marketing-shell .photo-mission{display:grid;grid-template-columns:.9fr 1fr;gap:0;align-items:stretch;padding:0;overflow:hidden;border-left:0}.marketing-shell .mission-photo{background:#e7edde;display:flex;flex-direction:column}.marketing-shell .mission-photo img{flex:1;min-height:360px;height:100%;aspect-ratio:auto;object-position:center}.marketing-shell .mission-photo figcaption{padding:8px 18px}.marketing-shell .mission-copy{padding:42px 36px}.marketing-shell .mission-copy h2{font-size:2.2rem}.marketing-shell .hero-photo-stack{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--blue-soft)}.marketing-shell .hero-photo img{height:255px;aspect-ratio:auto}.marketing-shell .hero-photo figcaption{padding:6px 20px;text-align:right;font-size:.625rem}.marketing-shell .hero-photo-stack .quote-card{border:0;border-radius:0;padding:20px 28px 27px}.marketing-shell .hero-photo-stack .quote-card h3{font-size:1.6rem;margin-bottom:16px}.marketing-shell .hero-photo-stack .quote-card .eyebrow{margin-bottom:10px}.marketing-shell .hero-photo-stack .checks{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:.8125rem}.marketing-shell .hero-photo-stack .checks li{padding-top:3px;padding-bottom:3px}.marketing-shell .candidate-photo img{height:430px;aspect-ratio:auto;border-radius:12px}.marketing-shell .candidate-photo figcaption{padding-left:6px}@media(max-width:940px){.marketing-shell .audience-photo{width:calc(100% + 56px);margin:-28px -28px 24px}.marketing-shell .audience-photo img{height:220px}.marketing-shell .hero-photo-stack .checks{grid-template-columns:1fr}.marketing-shell .hero-photo img{height:215px}.marketing-shell .mission-copy{padding:33px 28px}.marketing-shell .mission-copy h2{font-size:1.85rem}.marketing-shell .candidate-photo img{height:410px}}@media(max-width:680px){.marketing-shell .audience-photo{width:calc(100% + 58px);margin:-29px -29px 24px}.marketing-shell .audience-photo img{height:220px}.marketing-shell .photo-mission{grid-template-columns:1fr;padding:0}.marketing-shell .mission-photo img{height:255px;min-height:0;flex:auto}.marketing-shell .mission-copy{padding:30px 26px}.marketing-shell .mission-copy h2{font-size:1.9rem}.marketing-shell .hero-photo img{height:245px}.marketing-shell .hero-photo-stack .checks{grid-template-columns:1fr 1fr}.marketing-shell .hero-photo-stack .quote-card{padding:20px 25px 26px}.marketing-shell .candidate-photo img{height:320px}.marketing-shell .site-photo figcaption{font-size:.625rem}}@media(max-width:360px){.marketing-shell .hero-photo-stack .checks{grid-template-columns:1fr}}
/* Full-width photo banners and editorial rhythm. */
.marketing-shell .photo-banner{position:relative;isolation:isolate;max-width:none!important;overflow:hidden;background:var(--deep);padding:76px max(38px,calc((100vw - 1164px)/2));min-height:440px;margin-bottom:15px}
.marketing-shell .photo-banner>.banner-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;z-index:-2;max-width:none}
.marketing-shell .photo-banner:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,43,48,.94) 0%,rgba(0,43,48,.83) 45%,rgba(0,43,48,.38) 100%);z-index:-1}
.marketing-shell .photo-banner>div:first-of-type{max-width:760px}
.marketing-shell .photo-banner h1,.marketing-shell .photo-banner>div:first-of-type>.lead{color:#fff}
.marketing-shell .photo-banner h1 em{color:#d0e5a8}
.marketing-shell .photo-banner>div:first-of-type>.eyebrow{color:#d0e5a8;font-size:.75rem}
.marketing-shell .photo-banner>div:first-of-type>.actions .text-link{color:white}
.marketing-shell .photo-banner>div:first-of-type>.actions .btn{background:var(--lime);color:var(--deep);border-color:var(--lime)}
.marketing-shell .photo-banner .match-demo,.marketing-shell .photo-banner .quote-card{box-shadow:0 20px 65px #001e2840}
.marketing-shell .photo-banner.has-side{gap:64px;grid-template-columns:1.22fr 1fr}
.marketing-shell .support-photo{margin-top:38px;border-radius:12px;overflow:hidden}
.marketing-shell .support-photo img{height:390px;object-position:center}
.marketing-shell .site-photo{overflow:hidden}.marketing-shell .site-photo img{transition:transform .65s ease}
.marketing-shell .audience:hover .site-photo img{transform:scale(1.035)}
.marketing-shell .audience-photo{flex-shrink:0}.marketing-shell .mission-photo img{min-height:390px}
.marketing-shell .info-card{transition:transform .3s ease,box-shadow .3s ease}
.marketing-shell .info-card:hover{transform:translateY(-5px);box-shadow:0 15px 32px #0049500c}
.marketing-shell .reveal{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.3,1);transition-delay:var(--reveal-delay,0ms)}
.marketing-shell .reveal.waiting{opacity:0;transform:translateY(26px)}
.marketing-shell .steps li{position:relative}.marketing-shell .steps li.is-visible .step-num{animation:step-pop .65s both;background:var(--ink);color:white;border-color:var(--ink)}
.marketing-shell .criteria-item.is-visible{animation:criteria-in .75s both}
.marketing-shell .demo-scene:not([hidden]) .role-row,.marketing-shell .demo-scene:not([hidden]) .upload-row,.marketing-shell .demo-scene:not([hidden]) .profile-pair,.marketing-shell .demo-scene:not([hidden]) .meeting{animation:arrive .65s both}
.marketing-shell .demo-scene:not([hidden]) .role-row:nth-of-type(2){animation-delay:.18s}
.marketing-shell .demo-scene:not([hidden]) .score-row{animation:arrive .8s .3s both}
.marketing-shell .demo-scene:not([hidden]) .score-ring{animation:step-pop .85s .4s both}
.marketing-shell .demo-scene:not([hidden]) .meeting-flow span{animation:arrive .7s both}
.marketing-shell .demo-scene:not([hidden]) .meeting-flow span:nth-child(2){animation-delay:.2s}
.marketing-shell .demo-scene:not([hidden]) .meeting-flow span:nth-child(3){animation-delay:.4s}
.marketing-shell .faqs details[open]>div{animation:arrive .35s ease}
@keyframes step-pop{0%{transform:scale(.85)}65%{transform:scale(1.1)}100%{transform:scale(1)}}
@keyframes criteria-in{from{opacity:.25;transform:translateX(18px)}to{opacity:1;transform:none}}
@media(max-width:1150px){.marketing-shell .photo-banner.has-side{gap:35px;grid-template-columns:1.1fr 1fr}}
@media(max-width:940px){.marketing-shell .photo-banner{padding:58px 28px}.marketing-shell .photo-banner.has-side{gap:28px;grid-template-columns:1fr 1fr}.marketing-shell .support-photo img{height:310px}}
@media(max-width:680px){.marketing-shell .photo-banner{padding:46px 22px;min-height:390px}.marketing-shell .photo-banner.has-side{grid-template-columns:1fr;gap:32px}.marketing-shell .photo-banner:after{background:linear-gradient(90deg,#002d32ed,#002d32bc)}.marketing-shell .photo-banner>.banner-image{object-position:60% center}.marketing-shell .support-photo{margin-top:26px}.marketing-shell .support-photo img{height:280px}.marketing-shell .mission-photo img{min-height:0}}
@media(prefers-reduced-motion:reduce){.marketing-shell .reveal,.marketing-shell .site-photo img,.marketing-shell .info-card{transition:none!important}.marketing-shell .reveal.waiting{opacity:1;transform:none}.marketing-shell .steps li.is-visible .step-num,.marketing-shell .criteria-item.is-visible,.marketing-shell .demo-scene *,.marketing-shell .faqs details[open]>div{animation:none!important}}
@media print{.marketing-shell .photo-banner{background:none;min-height:0;padding:0;overflow:visible}.marketing-shell .banner-image,.marketing-shell .photo-banner:after{display:none!important}.marketing-shell .photo-banner h1,.marketing-shell .photo-banner h1 em,.marketing-shell .photo-banner>div:first-of-type>.lead,.marketing-shell .photo-banner>div:first-of-type>.eyebrow{color:#000}.marketing-shell .reveal.waiting{opacity:1;transform:none}}

/* Een .text-link is navigatie naast een knop, geen knop zelf. De ↗ erachter was tot nu toe de
   enige aanwijzing dat het klikbaar was: de globale regel zet text-decoration op none en de kleur
   op inherit, dus zonder pijl bleef er alleen vetgedrukte tekst over. Vandaar een echte
   onderstreping in het olijfgroen van de huisstijl, die bij hover de tekstkleur aanneemt.
   inline-block en niet inline-flex: een onderstreping op een flexcontainer komt niet overal door.
   De flexopmaak hierboven is weggehaald, die lijnde alleen de pijl uit. */
.marketing-shell .text-link{display:inline-block;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px;text-decoration-color:var(--olive)}
.marketing-shell .text-link:hover{text-decoration-color:currentColor}
/* Op de foto-hero is de link wit; een olijfgroene streep valt daar weg tegen de afbeelding. */
.marketing-shell .photo-banner>div:first-of-type>.actions .text-link{text-decoration-color:#ffffffa6}

/* Tekst die alleen voor een schermlezer bedoeld is, bijvoorbeeld de mededeling dat een link de
   site verlaat. De marketingpagina's gebruiken hun eigen stylesheet, dus hier een eigen klasse. */
.marketing-shell .visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* De kaarten in dit blok hebben een knop onderin; die hoort op gelijke hoogte te staan ook als de
   ene kaart meer tekst heeft dan de andere. */
.marketing-shell .info-card{display:flex;flex-direction:column}
.marketing-shell .info-card>p{flex:1}
.marketing-shell .info-card>.btn{align-self:start;margin-top:20px}

/* Filterblok en paginering op de vacaturepagina. Een gewoon GET-formulier, dus de velden zijn
   kale input/select-elementen: die erven hun font al van .marketing-shell, maar niet de rand en
   de hoogte die bij de knoppen ernaast passen. */
.marketing-shell .vacature-filters{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:18px;align-items:end;margin-bottom:35px}
.marketing-shell .vacature-filters label{display:block;font-size:.75rem;letter-spacing:.09em;font-weight:700;margin-bottom:8px}
.marketing-shell .vacature-filters input,.marketing-shell .vacature-filters select{width:100%;padding:16px 15px;font-size:.9375rem;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--border);border-radius:6px}
.marketing-shell .vacature-filters input:focus-visible,.marketing-shell .vacature-filters select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.marketing-shell .vacature-filters-acties{display:flex;align-items:center;gap:18px}
.marketing-shell .vacature-paginering{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px;font-size:.875rem;font-weight:650}
@media(max-width:940px){.marketing-shell .vacature-filters{grid-template-columns:1fr 1fr;gap:15px}.marketing-shell .vacature-filters-acties{grid-column:1/-1}}
/* Onder 680px wordt .btn kleiner (14px padding, .875rem tekst); zonder deze regel staan de velden
   daar 5px hoger dan de zoekknop eronder. */
@media(max-width:680px){.marketing-shell .vacature-filters{grid-template-columns:1fr}.marketing-shell .vacature-filters input,.marketing-shell .vacature-filters select{padding:14px 15px;font-size:.875rem}}

/*
 * Correcties op het overgenomen stylesheet hierboven, voor tekst die het contrast niet haalde.
 *
 * Gemeten met tests-django/contrast.spec.ts: drie kleuren bleven onder de 4,5:1 die de frontendgids
 * eist. Het zijn dezelfde kleuren als op de bestaande site, dus die heeft hetzelfde gebrek; het
 * hoort daar op dezelfde manier gecorrigeerd te worden.
 *
 * Steeds dezelfde tint, net donker genoeg. Apart van het overgenomen deel zodat een volgende ronde
 * overnemen deze correcties niet wegschrijft.
 */
.marketing-shell .mini-label {
    /* 4,44:1 op het zachte vlak, bij 11px vet. */
    color: #637547;
}

.marketing-shell .profile-pair small {
    /* 4,36:1 op wit, bij 10px. */
    color: #6b7b61;
}

.marketing-shell .tick {
    /* 3,30:1 op wit. Een vinkje naast "Werkgever" is geen versiering maar bevestigt de regel. */
    color: #697d43;
}