/* KB-landingspagina. Lokale fonts + designer-CSS (Steplab uitleg-13). */
/* Source Sans 3 — lokaal gebundeld (OFL-1.1, (c) Adobe). Geen externe
   aanroep; AVG-vriendelijk. Subsets: latin + latin-ext. */
@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-400i-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-400i-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-400-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/source-sans-3-400-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/source-sans-3-500-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/source-sans-3-500-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-600-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/source-sans-3-600-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-sans-3-700-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/source-sans-3-700-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/source-sans-3-800-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url('../fonts/source-sans-3-800-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* KB-app — landingspagina. Toetsrevolutie-huisstijl. */
:root{
  --blue-dark:#042768; --blue:#0081C0; --blue-700:#0a3a8a;
  --yellow:#F9BF30; --green:#1CAD72; --red:#EF5B85;
  --ink:#14233f; --muted:#5a6577; --faint:#8a94a6;
  --line:#dde4ee; --line-soft:#eef2f8; --bg:#f4f7fb; --tint:#eef4fc;
  --green-soft:rgba(28,173,114,.14); --green-ink:#0f7a4e;
  --accent:var(--yellow);
  --font:'Source Sans 3',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --shadow:0 1px 2px rgba(4,39,104,.05),0 10px 30px rgba(4,39,104,.08);
  --shadow-lg:0 24px 60px rgba(4,39,104,.18);
  --r:16px; --r-sm:10px; --r-lg:24px; --maxw:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); color:var(--ink); background:#fff;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; line-height:1.55;}
h1,h2,h3{margin:0; letter-spacing:-.02em; color:var(--blue-dark); line-height:1.12; text-wrap:balance;}
p{margin:0;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:inherit;
  font-size:16px; font-weight:800; letter-spacing:-.01em; cursor:pointer; border:0; border-radius:999px;
  padding:15px 26px; text-decoration:none; transition:transform .06s, filter .15s, background .15s;}
.btn:active{transform:translateY(1px);}
.btn--accent{background:var(--accent); color:var(--blue-dark); box-shadow:0 2px 0 rgba(4,39,104,.16);}
.btn--accent:hover{filter:brightness(.96);}
.btn--primary{background:var(--blue-dark); color:#fff;}
.btn--primary:hover{background:var(--blue-700);}
.btn--ghost{background:transparent; color:var(--blue-dark); border:1.5px solid var(--line);}
.btn--ghost:hover{border-color:var(--blue);}
.btn--lg{padding:17px 30px; font-size:17px;}

/* Nav */
.nav{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line-soft);}
.nav__in{display:flex; align-items:center; gap:18px; height:66px;}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px; color:var(--blue-dark); letter-spacing:-.01em;}
.brand__mark{width:34px; height:34px; border-radius:9px; background:var(--blue-dark); position:relative; flex:none;}
.brand__mark i{position:absolute; width:5px; height:5px; border-radius:1.5px;}
.brand__mark i:nth-child(1){background:var(--yellow); top:8px; right:8px;}
.brand__mark i:nth-child(2){background:var(--blue); top:15px; right:15px;}
.brand__mark i:nth-child(3){background:#fff; left:8px; bottom:8px;}
.nav__links{display:flex; gap:22px; margin-left:auto; align-items:center;}
.nav__links a{font-size:15px; font-weight:600; color:var(--ink); text-decoration:none;}
.nav__links a:hover{color:var(--blue);}
@media(max-width:840px){ .nav__links a:not(.btn){display:none;} }

/* Hero */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(120% 80% at 85% -20%, var(--tint) 0%, transparent 55%);}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:clamp(40px,6vw,84px) 0 clamp(48px,6vw,88px);}
@media(max-width:900px){ .hero__grid{grid-template-columns:1fr; gap:34px;} }
.hero h1{font-size:clamp(32px,5vw,52px); font-weight:800;}
.hero h1 .hl{color:var(--blue);}
.hero__lead{font-size:clamp(17px,2vw,21px); color:var(--muted); margin-top:18px; max-width:34ch; line-height:1.5;}
.hero__pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.pill{display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 13px; font-size:13.5px; font-weight:700; color:var(--blue-dark); box-shadow:var(--shadow);}
.pill svg{width:15px; height:15px; color:var(--green);}

/* Account card */
.signup{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  padding:26px 26px 24px; position:relative; overflow:hidden;}
.signup::before{content:""; position:absolute; inset:0 0 auto 0; height:5px;
  background:linear-gradient(90deg,var(--yellow),var(--blue) 60%,var(--green));}
.signup h2{font-size:21px; margin-bottom:3px;}
.signup .sub{font-size:14px; color:var(--muted); margin-bottom:16px;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:13px; font-weight:700; color:var(--blue-dark); margin-bottom:5px;}
.field input{width:100%; font-family:inherit; font-size:15px; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; transition:border-color .15s, box-shadow .15s;}
.field input:focus{outline:0; border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,129,192,.16);}
.field--row{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.signup .btn{width:100%; margin-top:6px;}
.optin{display:flex; align-items:flex-start; gap:9px; margin-top:6px; cursor:pointer;}
.optin input{margin-top:2px; width:17px; height:17px; flex:none; accent-color:var(--blue);}
.optin span{font-size:13px; color:var(--muted); line-height:1.45;}
.signup .fineprint{font-size:12.5px; color:var(--faint); text-align:center; margin-top:12px; line-height:1.5;}
.signup .fineprint a{color:var(--blue); font-weight:600;}

/* Sections */
.section{padding:clamp(48px,7vw,92px) 0;}
.section--tint{background:var(--bg);}
.section--dark{background:var(--blue-dark); color:#fff;}
.section--dark h2,.section--dark h3{color:#fff;}
.section__head{max-width:680px; margin:0 auto clamp(32px,4vw,52px); text-align:center;}
.section__head h2{font-size:clamp(26px,3.4vw,38px); margin-top:10px;}
.section__head p{font-size:clamp(16px,1.8vw,19px); color:var(--muted); margin-top:14px;}
.section--dark .section__head p{color:#bcd0ec;}

/* Waarom — kaarten */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
@media(max-width:820px){ .cards{grid-template-columns:1fr;} }
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow);}
.section--dark .card{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14);}
.card__ic{width:46px; height:46px; border-radius:12px; background:var(--tint); color:var(--blue);
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.section--dark .card__ic{background:rgba(255,255,255,.1); color:var(--yellow);}
.card__ic svg{width:24px; height:24px;}
.card h3{font-size:19px; margin-bottom:7px;}
.card p{font-size:15px; color:var(--muted); line-height:1.55;}
.section--dark .card p{color:#cdddf0;}

/* Wetenschap-strook met cijfers */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:8px;}
@media(max-width:700px){ .stats{grid-template-columns:1fr;} }
.stat{text-align:center;}
.stat b{display:block; font-size:clamp(34px,5vw,52px); font-weight:800; color:var(--yellow); letter-spacing:-.02em; line-height:1;}
.stat span{display:block; font-size:15px; color:#bcd0ec; margin-top:8px;}

/* Wat je ziet — showcase */
.showcase{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center;}
@media(max-width:880px){ .showcase{grid-template-columns:1fr;} }
.showcase--flip .showcase__text{order:2;}
.showcase__text h3{font-size:clamp(22px,2.6vw,28px); margin-bottom:12px;}
.showcase__text p{font-size:16.5px; color:var(--muted); line-height:1.6; margin-bottom:14px;}
.showcase__list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px;}
.showcase__list li{display:flex; align-items:flex-start; gap:10px; font-size:15.5px; color:var(--ink);}
.showcase__list svg{width:20px; height:20px; color:var(--green); flex:none; margin-top:1px;}
.frame{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden;}
.frame__bar{height:38px; background:#f1f4f9; border-bottom:1px solid var(--line-soft); display:flex; align-items:center; gap:6px; padding:0 14px;}
.frame__bar i{width:10px; height:10px; border-radius:50%; display:block; background:#cdd6e3;}
.frame__bar i:nth-child(1){background:#f0a5b8;} .frame__bar i:nth-child(2){background:#f7d488;} .frame__bar i:nth-child(3){background:#a5d8b9;}

/* Hoe het werkt — stappen */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step;}
@media(max-width:820px){ .steps{grid-template-columns:1fr;} }
.step{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; position:relative; box-shadow:var(--shadow);}
.step__n{width:40px; height:40px; border-radius:11px; background:var(--blue-dark); color:#fff; font-weight:800;
  font-size:18px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.step h3{font-size:18px; margin-bottom:7px;}
.step p{font-size:15px; color:var(--muted);}

/* Voor wie / vakken */
.tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:760px; margin:0 auto;}
.tag{background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-size:15px; font-weight:700; color:var(--blue-dark); box-shadow:var(--shadow);}
.tag--on{background:var(--blue-dark); color:#fff; border-color:var(--blue-dark);}

/* Prijs */
.price{max-width:480px; margin:0 auto; background:#fff; border:2px solid var(--blue); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:34px 30px; text-align:center; position:relative; overflow:hidden;}
.price__tag{font-size:13px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--green-ink);
  background:var(--green-soft); display:inline-block; padding:5px 14px; border-radius:999px; margin-bottom:14px;}
.price__big{font-size:54px; font-weight:800; color:var(--blue-dark); letter-spacing:-.03em; line-height:1;}
.price__big span{font-size:19px; font-weight:700; color:var(--muted);}
.price__list{list-style:none; padding:0; margin:20px 0 24px; display:flex; flex-direction:column; gap:11px; text-align:left;}
.price__list li{display:flex; align-items:flex-start; gap:10px; font-size:15.5px;}
.price__list svg{width:20px; height:20px; color:var(--green); flex:none; margin-top:1px;}

/* FAQ */
.faq{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:12px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden;}
.faq summary{cursor:pointer; list-style:none; padding:18px 20px; font-size:17px; font-weight:700; color:var(--blue-dark);
  display:flex; align-items:center; justify-content:space-between; gap:14px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; width:12px; height:12px; flex:none; border-right:2.5px solid var(--blue);
  border-bottom:2.5px solid var(--blue); transform:rotate(45deg); transition:transform .2s; margin-top:-4px;}
.faq details[open] summary::after{transform:rotate(225deg); margin-top:2px;}
.faq .faq__a{padding:0 20px 18px; font-size:15.5px; color:var(--muted); line-height:1.6;}

/* Afsluitende CTA */
.cta-final{background:var(--blue-dark); border-radius:var(--r-lg); padding:clamp(36px,5vw,60px); text-align:center;
  color:#fff; position:relative; overflow:hidden;}
.cta-final::after{content:""; position:absolute; right:-30px; top:-30px; width:180px; height:180px;
  background:radial-gradient(circle, rgba(249,191,48,.25), transparent 70%);}
.cta-final h2{color:#fff; font-size:clamp(26px,3.4vw,38px);}
.cta-final p{color:#bcd0ec; font-size:18px; margin:14px auto 26px; max-width:50ch;}

/* Footer */
.footer{background:#fff; border-top:1px solid var(--line); padding:34px 0;}
.footer__in{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--muted); font-size:14px;}
.footer a{color:var(--muted); text-decoration:none;}
.footer a:hover{color:var(--blue);}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;} }

/* Hero "probeer het" link + nav demo */
.hero__try{margin-top:18px;}
.linkbtn{display:inline-flex; align-items:center; gap:9px; background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:16px; font-weight:700; color:var(--blue); padding:4px 0;}
.linkbtn svg{width:20px; height:20px;}
.linkbtn:hover{color:var(--blue-700); text-decoration:underline;}
.navdemo{background:none; border:0; cursor:pointer; font-family:inherit; font-size:15px; font-weight:600; color:var(--ink);}
.navdemo:hover{color:var(--blue);}
@media(max-width:840px){ .navdemo{display:none;} }

/* Demo overlay */
.demo__overlay{position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vw,40px); background:rgba(4,39,104,.46); backdrop-filter:blur(4px); animation:demoIn .18s ease;}
@keyframes demoIn{from{opacity:0;} to{opacity:1;}}
.demo__panel{position:relative; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  width:min(880px,100%); max-height:92vh; overflow-y:auto; padding:clamp(24px,3vw,40px);}
.demo__close{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:var(--bg); color:var(--ink); display:flex; align-items:center; justify-content:center;}
.demo__close:hover{background:var(--line);}
.demo__close svg{width:20px; height:20px;}
.demo__top{margin-bottom:18px;}
.demo__progress{height:9px; background:#e3e9f3; border-radius:999px; overflow:hidden;}
.demo__progress span{display:block; height:100%; background:linear-gradient(90deg,var(--green),#28c187); border-radius:999px; transition:width .35s ease;}
.demo__meta{font-size:13px; font-weight:700; color:var(--muted); margin-top:8px;}
.demo__q{font-size:clamp(20px,2.6vw,27px); text-align:center; margin:6px auto 22px; max-width:24ch;}
.demo__pair{display:grid; grid-template-columns:1fr auto 1fr; gap:16px; align-items:stretch;}
@media(max-width:680px){ .demo__pair{grid-template-columns:1fr;} .demo__vs{justify-self:center;} }
.demo__item{background:#fff; border:1.5px solid var(--line); border-radius:var(--r); padding:16px; display:flex; flex-direction:column; gap:12px; transition:border-color .15s, box-shadow .15s;}
.demo__item.is-picked{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,129,192,.16);}
.demo__label{font-size:13px; font-weight:800; color:var(--blue-dark); text-transform:uppercase; letter-spacing:.04em;}
.demo__text{font-size:16px; line-height:1.6; color:var(--ink); flex:1;}
.demo__choose{margin-top:auto; font-family:inherit; font-size:15px; font-weight:800; cursor:pointer;
  border:0; border-radius:10px; padding:12px; background:var(--blue); color:#fff; transition:background .15s;}
.demo__item.is-picked .demo__choose{background:var(--green);}
.demo__choose:hover{background:var(--blue-700);}
.demo__vs{align-self:center; width:40px; height:40px; border-radius:50%; background:var(--bg); border:1.5px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; color:var(--muted);}
.demo__hint{text-align:center; font-size:13.5px; color:var(--muted); margin-top:18px;}
.demo__result{text-align:center; padding:10px 0;}
.demo__check{width:64px; height:64px; border-radius:50%; background:var(--green-soft); color:var(--green-ink);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.demo__check svg{width:32px; height:32px;}
.demo__result h2{font-size:clamp(22px,3vw,30px); margin-bottom:12px;}
.demo__result p{font-size:16.5px; color:var(--muted); line-height:1.6; max-width:48ch; margin:0 auto 12px;}
.demo__note{font-size:15px !important; background:var(--bg); border-radius:var(--r-sm); padding:14px 16px; color:var(--ink) !important;}
.demo__actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px;}

/* Demo-overlay: verborgen tot JS opent (vanilla i.p.v. React-mount). */
.demo__overlay[hidden]{display:none!important;}

/* Smalle telefoons: wachtwoord + school onder elkaar. */
@media(max-width:480px){ .field--row{grid-template-columns:1fr;} }
/* Aanmeldkaart: korte huisregels (wat mag wel en niet). */
.signup__rules{ background:#f4f7fb; border:1px solid #e3e9f3; border-radius:10px; padding:10px 12px; margin:2px 0 4px; }
.signup__rules strong{ display:block; font-size:13px; color:var(--blue-dark,#042768); margin-bottom:5px; }
.signup__rules ul{ list-style:none; margin:0; padding:0; }
.signup__rules li{ position:relative; padding-left:22px; font-size:12.5px; line-height:1.45; color:var(--muted,#5a6577); margin:3px 0; }
.signup__rules li::before{ position:absolute; left:0; top:0; font-weight:800; }
.signup__rules li.ok::before{ content:"\2713"; color:var(--green,#1CAD72); }
.signup__rules li.no::before{ content:"\2715"; color:var(--red,#EF5B85); }
/* Smalle telefoons: menu met twee knoppen (Klascode + CTA) compact houden i.p.v. overlopen. */
@media(max-width:480px){
  .nav__in{ gap:10px; flex-wrap:wrap; height:auto; padding-top:10px; padding-bottom:10px; }
  .nav__links{ gap:8px; margin-left:auto; }
  .nav__links .btn{ padding:9px 13px !important; font-size:13px !important; }
}
/* Inloggen-link in het menu (blijft zichtbaar op mobiel). */
.nav__login{ font-weight:700; color:var(--blue-dark,#042768); text-decoration:none; white-space:nowrap; }
.nav__login:hover{ color:var(--blue,#0081C0); }
@media(max-width:840px){ .nav__links a.nav__login{ display:inline-flex !important; } }