/* Studystead, reshape direction (jury 2026-10-14): blue-wash ground, navy ink, blue field + action, one yellow marker. */
/* fonts, self-hosted (2026-10-17): Bricolage Grotesque + Figtree, SIL OFL, from tools/self-host-fonts.mjs */
@font-face {font-family: 'Space Grotesk';font-style: normal;font-weight: 700;font-display: swap;src: url(assets/fonts/space-grotesk-latin-700.woff2) format('woff2');} /* Rei partner card only */
@font-face {font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 700;font-stretch: 100%;font-display: swap;src: url(assets/fonts/bricolage-grotesque-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 700;font-stretch: 100%;font-display: swap;src: url(assets/fonts/bricolage-grotesque-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: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(assets/fonts/bricolage-grotesque-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Bricolage Grotesque';font-style: normal;font-weight: 800;font-stretch: 100%;font-display: swap;src: url(assets/fonts/bricolage-grotesque-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: 'Figtree';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Figtree';font-style: normal;font-weight: 400;font-display: swap;src: url(assets/fonts/figtree-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: 'Figtree';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Figtree';font-style: normal;font-weight: 500;font-display: swap;src: url(assets/fonts/figtree-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: 'Figtree';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/fonts/figtree-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face {font-family: 'Figtree';font-style: normal;font-weight: 600;font-display: swap;src: url(assets/fonts/figtree-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;}
:root{
  --wash:#eef2fe; --navy:#0f1f5c; --navy-soft:#46557f; --blue:#2554e0; --blue-deep:#1c42b8;
  --white:#fff; --marker:#FFC83D; --line:#cdd9ff; --on-blue-soft:#c9d6ff;
  --shadow:0 1px 2px rgba(15,31,92,.08), 0 14px 36px -14px rgba(15,31,92,.28);
  --r:16px; --r-sm:10px; --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--wash)}
body{margin:0;background:var(--wash);color:var(--navy);font:400 18px/1.6 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--marker);color:var(--navy)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:4px}
a{color:var(--blue)}a:hover{color:var(--blue-deep)}
h1,h2,h3{font-family:"Bricolage Grotesque",Figtree,sans-serif;font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:40px}
h2{font-size:30px}
h3{font-size:22px;font-weight:700;line-height:1.2}
p{margin:0}
img{display:block;max-width:100%;height:auto}
.clip{overflow-x:clip}
.page{max-width:640px;margin:0 auto;padding:0 16px 40px}

/* header */
.top{max-width:640px;margin:0 auto;padding:18px 16px 10px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.wordmark{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em;color:var(--navy);text-decoration:none}
.top nav{display:flex;gap:18px;font-weight:500;font-size:17px;white-space:nowrap}
.top nav a{color:var(--navy);text-decoration:none}
.top nav a:hover{color:var(--blue)}

/* buttons */
.btn{font-family:inherit;display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;background:var(--blue);color:#fff;font-weight:600;font-size:18px;text-decoration:none;border:0;cursor:pointer;transition:background .18s,transform .18s}
.btn:hover{background:var(--blue-deep);color:#fff;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-light{background:#fff;color:var(--blue)}
.btn-light:hover{background:var(--wash);color:var(--blue-deep)}
.door-ai .btn-light{color:var(--blue)}
.door-ai .btn-light:hover{color:var(--blue-deep)}
.h1-tight{text-wrap:pretty;font-size:36px}
.door-plain{padding-bottom:32px}
.link{font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}

/* site headline above the doors */
.hero{padding:14px 8px 4px}
.hero h1{font-size:38px}
.hero p{margin-top:12px;font-size:19px;max-width:38ch;color:var(--navy-soft)}
.door-bijles h2{font-size:40px}

/* doors */
.door{border-radius:var(--r);padding:32px 24px}
.door-bijles{background:#fff;margin-top:12px;padding-bottom:96px;box-shadow:var(--shadow)}
.door-ai{background:var(--blue);color:#fff;margin-top:24px}
.door-ai h2{color:#fff;font-size:34px}
.door-ai a{color:#fff}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin-top:22px}
.amount{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:64px;line-height:1;letter-spacing:-.03em}
.per{font-weight:500;color:var(--navy-soft)}
.price-alt{color:var(--navy-soft);margin-top:4px}
.lead{margin-top:20px;font-size:19px}

/* worksheet card, crosses the door edge */
.sheet{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);margin:-72px 8px 0;padding:22px 20px 18px;box-shadow:var(--shadow);position:relative}
.sheet-title{font-weight:600}
.sheet-sub{color:var(--navy-soft);font-size:16px;margin-top:2px}
.q{margin-top:16px;padding-top:16px;border-top:1.5px solid var(--line)}
.reveal{display:inline-flex;align-items:center;gap:10px;margin-top:16px;min-height:48px;padding:0 20px;border-radius:999px;border:2px solid var(--blue);background:#fff;color:var(--blue);font:600 17px Figtree,sans-serif;cursor:pointer}
.reveal:hover{background:var(--wash)}
.reveal .lbl-close{display:none}
.reveal[aria-expanded="true"] .lbl-open{display:none}
.reveal[aria-expanded="true"] .lbl-close{display:inline}
.answer{margin-top:16px}
.answer[hidden]{display:none}
.answer mark{background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 0/0% 100%;color:inherit;padding:0 .1em;border-radius:3px}
.answer.swept mark{background-size:100% 100%;transition:background-size .6s var(--ease)}
.why{margin-top:12px;padding:12px 16px;background:var(--wash);border-radius:var(--r-sm);font-size:17px}

/* photo tile on the AI door */
.photo{margin:22px 0 0}
.photo img{border-radius:var(--r);width:100%;max-width:560px}
.photo figcaption{margin-top:10px;font-size:16px;color:var(--on-blue-soft)}
.facts{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:8px;font-weight:500}
.facts li{padding-left:30px;position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.42em;width:16px;height:16px;border-radius:50%;background:#fff}
.facts li::after{content:"";position:absolute;left:5px;top:calc(.42em + 4px);width:6px;height:6px;border-radius:50%;background:var(--blue)}
.note{margin-top:16px;color:var(--on-blue-soft);font-size:17px}
.door-ai .btn{margin-top:24px;width:100%}

/* who + terms */
.who{margin-top:40px;background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.who img{border-radius:var(--r);margin-top:18px}
.who p{margin-top:16px}
.terms{margin-top:40px;padding:0 8px}
.terms ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.terms li{display:flex;gap:12px;align-items:flex-start}
.terms svg{flex:none;margin-top:5px}

/* price table (bijles page) */
.pricing{background:#fff;border-radius:var(--r);padding:6px 22px;margin-top:28px;box-shadow:var(--shadow)}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:15px 0;border-top:1.5px solid var(--line)}
.row:first-child{border-top:0}
.row .lbl{font-weight:500}
.row .sub{display:block;color:var(--navy-soft);font-size:16px;font-weight:400}
.row .val{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;white-space:nowrap}
.reassure{margin-top:16px;color:var(--navy-soft);font-size:17px}

/* comparison bars */
.compare{margin-top:48px}
.bars{margin-top:18px;display:grid;gap:18px}
.bar{display:grid;grid-template-columns:132px 1fr;align-items:center;gap:12px;font-weight:500}
.bar .track{height:40px;border-radius:999px;background:#fff;border:1.5px solid var(--line);overflow:hidden}
.bar .fill{height:100%;width:0;border-radius:999px;background:var(--blue);display:flex;align-items:center;justify-content:flex-end;padding-right:12px;color:#fff;font-weight:600;font-size:16px;white-space:nowrap;transition:width .9s var(--ease)}
.bar.other .fill{background:var(--navy-soft)}
@media (max-width:520px){ /* phones: label above the bar, so the amount inside it is never clipped (2026-10-17) */
  .bar{grid-template-columns:1fr;gap:6px}
}
.bars.grown .fill{width:var(--w)}
.source{margin-top:14px;font-size:16px;color:var(--navy-soft)}

/* tutor card */
.tutor{margin-top:48px;background:#fff;border-radius:var(--r);padding:24px;box-shadow:var(--shadow)}
.tutor img{border-radius:var(--r);margin-top:18px}
.tutor h3{margin-top:18px}
.tag{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:var(--wash);color:var(--navy);font-size:15px;font-weight:600}
.tutor p{margin-top:12px}
.tutor .btn{margin-top:20px;width:100%}

/* lesson screenshot + report card */
.lesson{margin-top:48px}
.lesson figure{margin:18px 0 0}
.lesson img{border-radius:var(--r)}
.lesson figcaption{margin-top:10px;font-size:16px;color:var(--navy-soft)}
.mail{margin-top:18px;background:#fff;border-radius:var(--r);border:1.5px solid var(--line);padding:20px;box-shadow:var(--shadow);font-size:17px}
.mail .from{display:flex;justify-content:space-between;gap:12px;color:var(--navy-soft);font-size:15px;padding-bottom:12px;border-bottom:1.5px solid var(--line)}
.mail .subj{font-weight:600;margin-top:12px}
.mail p{margin-top:10px}

/* form */
.form{margin-top:48px;background:var(--blue);color:#fff;border-radius:var(--r);padding:28px 24px}
.form h2{color:#fff}
.form p{color:var(--on-blue-soft);margin-top:10px}
.field{margin-top:16px;display:grid;gap:6px}
.field label{font-weight:500;font-size:16px}
.field input,.field select,.field textarea{width:100%;min-height:52px;border-radius:var(--r-sm);border:0;padding:12px 14px;font:inherit;color:var(--navy);background:#fff;caret-color:var(--blue)}
.field textarea{min-height:96px;resize:vertical}
.form .btn-light{margin-top:22px;width:100%}
.form .small{font-size:15px;margin-top:14px}

footer{background:var(--navy);color:#fff;margin-top:48px;padding:32px 16px 40px}
footer .in{max-width:640px;margin:0 auto}
footer .wordmark{color:#fff}
footer p{margin-top:10px;color:var(--on-blue-soft);font-size:16px}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:18px;font-weight:500}
footer nav a{color:#fff;text-decoration:none}
footer nav a:hover{text-decoration:underline;text-underline-offset:4px}

/* one authored moment: the doors slide in from their own side, once */
@media (prefers-reduced-motion:no-preference){
  .door-bijles{animation:from-left .5s var(--ease) both}
  .door-ai{animation:from-right .5s var(--ease) .08s both}
  .sheet{animation:from-right .5s var(--ease) .16s both}
}
@keyframes from-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes from-right{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .answer mark{background-size:100% 100%}
  .bars .fill{width:var(--w);transition:none}
  .btn:hover{transform:none}
}
@media (min-width:600px){
  h1{font-size:48px}
  .door{padding:40px 36px}
  .door-bijles{padding-bottom:104px}
  .door-plain{padding-bottom:40px}
  .h1-tight{font-size:44px}
  .sheet{margin-left:24px;margin-right:24px}
}

/* desktop (PC) layout */
@media (min-width:900px){
  .top,.page,footer .in{zoom:.9} /* Senne 2026-10-14: PC felt a little too big; one even step down keeps the approved proportions. On the content boxes, not body, so full-width bands still reach the edges */
  .page,.top,footer .in{max-width:1160px}
  .top{padding:24px 24px 14px}
  .top nav{gap:32px;font-size:18px}
  .page{padding:0 24px 56px}
  h1{font-size:60px}
  h2{font-size:38px}
  .amount{font-size:96px}
  .lead{font-size:21px;max-width:34ch}
  .hero{padding:28px 0 20px}
  .hero h1{font-size:68px;max-width:16ch}
  .hero p{font-size:22px;max-width:44ch;margin-top:16px}
  .door-bijles h2{font-size:56px}
  .doors{display:grid;grid-template-columns:1.15fr 1fr;gap:36px;align-items:start}
  .doors .col{display:flex;flex-direction:column}
  .door{padding:48px 44px}
  .door-bijles{padding-bottom:120px}
  .sheet{margin:-80px 32px 0;padding:26px 28px 24px}
  .door-ai{margin-top:12px;min-height:100%}
  .door-ai h2{font-size:44px}
  .door-ai .btn{width:auto;padding:0 40px}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
  .two>*{margin-top:56px}
  .hero2{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
  .hero2 .pricing{margin-top:8px}
  .hero2 .actions{margin-top:32px}
  .door-plain{padding-bottom:48px}
  .h1-tight{font-size:54px}
  .bar{grid-template-columns:120px 1fr}
  .tutor .btn{width:auto;padding:0 36px}
  .form .btn-light{width:auto;padding:0 40px}
  footer{padding:48px 24px 56px}
}
@media (min-width:1280px){
  .door{padding:56px 56px}
  .door-bijles{padding-bottom:128px}
  .door-plain{padding-bottom:56px}
}

/* Leer AI page */
.door-hero{margin-top:12px}
.door-hero h1{color:#fff}
.lead-ai{margin-top:18px;font-size:19px;color:#fff;max-width:36ch}
.hero-ai .facts{margin-top:22px}
.hero-ai .btn{margin-top:24px;width:100%}
.hero-ai .photo{margin-top:28px}
.sessions{margin-top:40px}
.sessions .sub{margin-top:10px;color:var(--navy-soft);max-width:60ch}
.rows{margin-top:18px;display:grid;gap:12px}
.srow{background:#fff;border-radius:var(--r);padding:18px 20px;display:grid;gap:4px 16px;align-items:center;box-shadow:var(--shadow)}
.srow .month{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em}
.srow .meta{color:var(--navy-soft);font-size:16px}
.srow .free{font-weight:600}
.btn-sm{min-height:44px;padding:0 20px;font-size:16px;justify-self:start;margin-top:8px}
.outcomes{margin-top:40px;padding:0 8px}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:14px}
.checks li{display:flex;gap:12px;align-items:flex-start}
.checks svg{flex:none;margin-top:4px}
.note-dark{margin-top:18px;color:var(--navy-soft);font-size:17px}
.radios{border:0;padding:0;margin:16px 0 0}
.radios legend{font-weight:500;font-size:16px;padding:0;margin-bottom:6px}
.radios label{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500}
.radios input{width:20px;height:20px;accent-color:#fff;margin:0}
.faq{margin-top:40px;padding:0 8px}
.faq details{border-top:1.5px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1.5px solid var(--line)}
.faq summary{cursor:pointer;font-weight:600;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg);flex:none;margin-right:6px;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{padding:0 0 16px;color:var(--navy-soft)}
@media (min-width:900px){
  .hero-ai{display:grid;grid-template-columns:1fr .9fr;gap:48px;align-items:start}
  .hero-ai .photo{margin-top:0}
  .hero-ai .btn{width:auto;padding:0 40px}
  .door-hero h1{font-size:60px}
  .lead-ai{font-size:21px}
  .srow{grid-template-columns:170px 1.1fr 1.3fr .7fr .5fr auto;gap:16px;padding:20px 24px}
  .btn-sm{margin-top:0}
  .sessions{margin-top:56px}
  .outcomes,.faq{padding:0}
  .faq{margin-top:56px}
  .two>.outcomes{margin-top:56px}
}

/* Word tutor page */
.pay{background:var(--wash);border-radius:var(--r);padding:22px 20px;margin-top:28px}
.h3{font-size:24px}
.pay .bars{margin-top:14px}
.plain{margin-top:40px;padding:0 8px}
.steps-wrap{margin-top:40px;padding:0 8px}
.steps{margin:18px 0 0;padding:0;list-style:none;counter-reset:s;display:grid;gap:14px}
.steps li{counter-increment:s;display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.steps li span{padding-top:6px}
.steps li::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:18px}
.checks-f label{display:flex;align-items:center;gap:10px;min-height:44px;font-weight:500}
.checks-f input{width:20px;height:20px;accent-color:#fff;margin:0}
.field input[type=file]{padding:10px 12px;background:#fff}
.form-grid{display:grid;gap:0 24px}
.form-grid .field{align-content:start} /* a short field beside a tall one keeps its height (Leer AI phone, 2026-10-17) */
.form .wide{grid-column:1 / -1}

/* Docent (teacher area) */
.top .me{color:var(--navy-soft);font-weight:500}
.dash{padding-top:4px}
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.tabs a{white-space:nowrap;padding:10px 16px;border-radius:999px;font-weight:600;text-decoration:none;color:var(--navy);background:#fff;border:1.5px solid var(--line)}
.tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.dash section{margin-top:28px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sec-head h1{font-size:34px}
.sec-head h2{font-size:28px}
.count{color:var(--navy-soft);font-weight:500}
.dash .rows{margin-top:14px}
.trow{background:#fff;border-radius:var(--r);padding:16px 18px;display:grid;gap:4px 16px;align-items:center;box-shadow:var(--shadow)}
.trow .name{font-weight:600;font-size:19px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trow .meta{color:var(--navy-soft);font-size:16px}
.trow .btn-sm{margin-top:8px}
.trow.locked{background:var(--wash);box-shadow:none;border:1.5px solid var(--line)}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-size:14px;font-weight:600;background:var(--wash);color:var(--navy-soft);vertical-align:middle}
.chip-ok{background:#e3f6ea;color:#1b6b3a}
.chip-lock{background:var(--navy);color:#fff}
.chip-review{background:var(--marker);color:var(--navy)}
.dash .form{margin-top:28px}
.profile{margin-top:18px;display:grid;gap:20px}
.profile img{border-radius:var(--r)}
.profile .field{margin-top:12px}
.profile .field input,.profile .field textarea{border:1.5px solid var(--line)}
.lbl-s{font-weight:500;font-size:16px;margin-top:16px}
.subjects{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px}
.subjects li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1.5px solid var(--line)}
@media (min-width:900px){
  .pay{margin-top:8px}
  .plain,.steps-wrap{padding:0}
  .steps-wrap{margin-top:56px}
  .two>.plain{margin-top:56px}
  .form-grid{grid-template-columns:1fr 1fr}
  .form-grid .rij2{grid-row:span 2}
  .tabs{margin:0;padding:8px 0 12px}
  .trow{grid-template-columns:1.2fr 1fr 1.1fr 1fr auto;gap:16px;padding:18px 24px}
  .trow .btn-sm{margin-top:0}
  .trow.lesson-row{grid-template-columns:1.1fr 1.1fr 1.5fr auto auto}
  .dash section{margin-top:40px}
  .profile{grid-template-columns:360px 1fr;gap:32px;align-items:start}
}

/* brand lockup: mark + wordmark */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--navy);white-space:nowrap}
.brand .mark{width:34px;height:34px;flex:none}
.brand .wordmark{font-size:28px}
footer .brand{color:#fff}
@media (min-width:900px){.brand .mark{width:40px;height:40px}.brand .wordmark{font-size:34px}}

/* menu: inline from 960px (820 crowded the header once Inloggen became a button), hamburger below */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:12px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:#fff}
.menu nav{position:absolute;right:0;top:52px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:10px 8px;display:grid;gap:2px;min-width:200px;z-index:5}
.menu nav a{padding:12px 16px;border-radius:10px}
.menu nav a:hover{background:var(--wash)}
.top .me{display:none}
@media (min-width:960px){
  .menu summary{display:none}
  .menu nav{position:static;background:none;box-shadow:none;padding:0;display:flex;gap:32px;min-width:0}
  .menu nav a{padding:0;border-radius:0}
  .menu nav a:hover{background:none}
  .top .me{display:inline}
}

/* header actions (Senne 2026-10-14): Inloggen is the highlighted button, always visible (beside the menu on
   phone, right-most on PC); NL/EN is a small pill, inline on PC, at the bottom of the menu on phone */
.top-actions{display:flex;align-items:center;gap:6px}
.btn-nav{min-height:40px;padding:0 18px;font-size:15px}
.menu{order:1}
.lang{display:inline-flex;gap:2px;padding:3px;border:1.5px solid var(--line);border-radius:999px;background:#fff}
.menu nav .lang a,.top nav .lang a{padding:3px 10px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--navy-soft);text-decoration:none;line-height:1.5}
.menu nav .lang a:hover{background:var(--wash);color:var(--navy)}
.menu nav .lang a[aria-current]{background:var(--navy);color:#fff}
.menu nav .lang{justify-self:start;margin:8px 16px 6px}
@media (min-width:960px){
  .top-actions{gap:28px}
  .menu{order:0}
  .menu nav{align-items:center}
  .menu nav .lang{margin:0}
  .btn-nav{min-height:44px;padding:0 22px;font-size:16px}
}

.host h3{margin-top:24px}
.host .checks{margin-top:14px}
.host .checks li{font-size:17px}

/* login */
.login-page{min-height:60vh;display:flex;align-items:flex-start;justify-content:center}
.login{background:#fff;border-radius:var(--r);padding:32px 24px;box-shadow:var(--shadow);width:100%;max-width:440px;margin-top:24px}
.login .sub{margin-top:10px;color:var(--navy-soft)}
.login form{margin-top:8px}
.login .field{margin-top:16px}
.login .field input{border:1.5px solid var(--line)}
.login .btn{width:100%;margin-top:22px}
.login .links{margin-top:14px;text-align:center;font-size:16px}
.login .alt{margin-top:22px;padding-top:18px;border-top:1.5px solid var(--line);font-size:17px;color:var(--navy-soft)}
.login .form-status.bad{background:none;padding:0} /* the card is already white */
@media (min-width:900px){.login{padding:40px;margin-top:40px}}

.avatar{display:grid;justify-items:center;gap:10px;color:var(--navy-soft);font-size:16px}
.avatar svg{width:160px;height:160px}
@media (min-width:900px){.avatar svg{width:200px;height:200px}}

/* logo: marker wordmark (direction 1, chosen 2026-10-14) */
.wm{position:relative;display:inline-block;line-height:1}
.hlw{position:relative;display:inline-block}
.hl{position:absolute;left:-.04em;right:-.04em;bottom:.08em;height:.5em;background:var(--marker);border-radius:.12em;transform:rotate(-1.2deg);z-index:0}
.hlt{position:relative;z-index:1}
footer .hl{bottom:-.14em;height:.14em;transform:none;border-radius:.07em}
.brand .wordmark{font-size:30px}
@media (min-width:900px){.brand .wordmark{font-size:36px}}

/* sessions not yet open */
.srow.tba{background:transparent;box-shadow:none;border:1.5px dashed var(--line);color:var(--navy-soft)}
.srow.tba .month{color:var(--navy-soft)}
.soon{font-weight:600;font-size:15px;color:var(--navy-soft);justify-self:start;margin-top:4px}
.radios label.off{color:var(--on-blue-soft)}
.radios label.off input{accent-color:#c9d6ff}
@media (min-width:900px){.soon{margin-top:0}}

/* subject cloud on /bijles (Senne's "word web", grill Q17; research rails: HTML <a> chips, sqrt size by docent count,
   24px floor, count in the link text, search + alphabetical list beside it, bob ~4s then still, none under reduced motion) */
.vakken{margin-top:48px}
.vk-legend{margin-top:10px;color:var(--navy-soft);max-width:44ch}
.vk-search{margin-top:18px;display:grid;gap:6px}
.vk-search label{font-weight:500;font-size:16px}
.vk-search input{width:100%;min-height:52px;border-radius:999px;border:1.5px solid var(--line);padding:0 20px;font:inherit;color:var(--navy);background:#fff;caret-color:var(--blue)}
.vk-search input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--line)}
.vk-all{margin-top:14px}
.vk-all summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;gap:10px;list-style:none;color:var(--blue)}
.vk-all summary::-webkit-details-marker{display:none}
.vk-all summary::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.vk-all[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.vk-all ul{list-style:none;margin:4px 0 0;padding:0}
.vk-all li{border-top:1.5px solid var(--line)}
.vk-all li[hidden]{display:none}
.vk-all a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;min-height:44px;color:var(--navy);text-decoration:none;font-weight:500}
.vk-all .lv{display:block;color:var(--navy-soft);font-size:14px;font-weight:400;line-height:1.3}
.vk-all a:hover,.vk-all a[aria-current]{color:var(--blue)}
.vk-all .n{color:var(--navy-soft);font-size:15px;font-weight:400;white-space:nowrap}

.cloud{container-type:inline-size;margin-top:22px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:28px 16px;min-height:240px;
  display:flex;flex-wrap:wrap;justify-content:center;align-content:center;align-items:center;gap:6px 18px}
.word{--t:.5;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:min(calc(24px + 14px * var(--t)),calc((100cqi - 8px) / (var(--len) * .46)));white-space:nowrap;color:color-mix(in srgb,var(--navy) calc(55% + 45% * var(--t)),var(--navy-soft));
  text-decoration:none;display:inline-flex;align-items:baseline;gap:.18em;min-height:44px;padding:4px 4px;border-radius:10px;
  background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 82%/0% .34em;
  transition:color .2s,background-size .35s var(--ease),translate .25s var(--ease),opacity .2s}
.word .n{font-family:Figtree,sans-serif;font-weight:600;font-size:max(14px,.36em);letter-spacing:0;color:var(--navy-soft)}
.word:hover,.word:focus-visible{color:var(--blue);background-size:100% .34em;translate:0 -3px}
.word[aria-current]{color:var(--navy);background-size:100% .34em}
.word.dim{opacity:.16;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .cloud.live .word{animation:bob 2.1s ease-in-out calc(var(--i) * 110ms) 2}
}
@keyframes bob{0%,100%{transform:none}50%{transform:translateY(-5px)}}
@media (prefers-reduced-motion:reduce){
  .word{transition:none}
  .word:hover,.word:focus-visible{translate:none}
}

/* results under the cloud: docent cards (no price), Rei pinned for Japans, or the geen-match state */
.results{margin-top:22px}
.results:empty{display:none}
.res-list{align-items:start}
.res-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.res-head h3{font-size:24px}
.res-clear{font:600 16px Figtree,sans-serif;color:var(--blue);background:none;border:0;padding:8px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.res-list{margin-top:14px;display:grid;gap:14px}
.dcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px;display:grid;grid-template-columns:72px 1fr;gap:14px 16px;align-items:start}
.dcard img,.dcard .ini{width:72px;height:72px;border-radius:50%;object-fit:cover}
.dcard .ini{background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font:800 30px "Bricolage Grotesque",sans-serif}
.dcard .nm{font:700 22px/1.2 "Bricolage Grotesque",sans-serif;color:var(--navy);text-decoration:none}
.dcard .nm:hover{color:var(--blue)}
.dcard .tag{margin-top:6px}
.dcard .vk{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.dcard .meta{margin-top:10px;color:var(--navy-soft);font-size:16px}
.dcard .btn{grid-column:1 / -1;width:100%}
.dcard.partner{background:var(--navy);color:#fff;grid-template-columns:1fr}
.dcard.partner .nm{color:#fff}
.dcard.partner p{color:var(--on-blue-soft);margin-top:8px}
.dcard.partner .chip{background:var(--marker);color:var(--navy)}
.nomatch{background:var(--blue);color:#fff;border-radius:var(--r);padding:24px}
.nomatch h3{color:#fff;overflow-wrap:anywhere}
.nomatch p{color:var(--on-blue-soft);margin-top:10px}
.nomatch form{margin-top:6px}
.nomatch .btn-light{margin-top:18px;width:100%}
.nomatch .small{font-size:15px;margin-top:12px}
@media (min-width:900px){
  .vakken{margin-top:56px;display:grid;grid-template-columns:360px 1fr;gap:20px 36px;align-items:start}
  .vk-side{grid-row:1}
  .cloud{margin-top:0;grid-row:1;grid-column:2;align-self:center;min-height:380px;padding:40px 36px;gap:10px 28px}
  .word{font-size:min(calc(24px + 34px * var(--t)),calc((100cqi - 8px) / (var(--len) * .46)))}
  .results{grid-column:1 / -1;margin-top:20px}
  .res-list{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
  .dcard{grid-template-columns:88px 1fr;padding:24px}
  .dcard img,.dcard .ini{width:88px;height:88px}
  .dcard .btn{grid-column:2;justify-self:start;width:auto;padding:0 28px}
  .dcard.partner .btn{grid-column:1}
  .nomatch{padding:32px 36px;display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;align-items:start}
  .nomatch .btn-light{width:auto;padding:0 36px}
}
/* organic cloud (2026-10-15): site.js places every word on a spiral from the centre; the field takes the packed height */
.cloud-field{position:relative;width:100%;min-height:120px}
.cloud-field .word{position:absolute;left:0;top:0;min-height:0;padding:2px 6px;visibility:hidden}
.cloud-field.laid .word{visibility:visible}

/* Leerling (student/parent area, design 2026-10-15): reuses the docent area; additions below */
.btn-ghost{background:#fff;color:var(--blue);border:2px solid var(--blue)}
.btn-ghost:hover{background:var(--wash);color:var(--blue-deep)}
.row-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.row-acts .btn-sm{margin-top:0}
.trow .chip-lock{justify-self:start}
.book{margin-top:28px}
.slots{border:0;padding:0;margin:16px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.slots legend{font-weight:500;font-size:16px;padding:0;margin-bottom:8px}
.slots label{cursor:pointer;position:relative}
.slots input{position:absolute;opacity:0;pointer-events:none}
.slots span{display:grid;gap:2px;padding:12px 14px;border-radius:var(--r-sm);background:rgba(255,255,255,.12);border:2px solid transparent;font-size:15px;color:var(--on-blue-soft);transition:background .15s,border-color .15s}
.slots b{font:800 22px/1.1 "Bricolage Grotesque",sans-serif;color:#fff;letter-spacing:-.01em}
.slots label:hover span{background:rgba(255,255,255,.2)}
.slots input:checked+span{background:#fff;border-color:var(--marker);color:var(--navy-soft)}
.slots input:checked+span b{color:var(--navy)}
.slots input:focus-visible+span{outline:3px solid #fff;outline-offset:2px}
.book .btn-light{margin-top:22px;width:100%}
.reports{margin-top:14px;display:grid;gap:14px}
.reports .mail{margin-top:0}
.pack{margin-top:14px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;display:grid;gap:10px 16px;align-items:center}
.pack .lbl{display:block;font-weight:600;font-size:19px}
.pack .meta{color:var(--navy-soft);font-size:16px}
.pips{display:flex;gap:6px}
.pips i{width:28px;height:12px;border-radius:999px;background:var(--marker)}
.pips i.used{background:var(--line)}
.pack .left{font-weight:600}
.amt{font:800 22px "Bricolage Grotesque",sans-serif;letter-spacing:-.01em}
.dcard.pending{background:transparent;box-shadow:none;border:1.5px dashed var(--line)}
.dcard.pending .ini{background:var(--line);color:var(--navy)}
#docenten .actions{margin-top:20px}
.contact{margin-top:14px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:20px;display:grid;gap:16px;align-items:center}
.contact .lbl{font-weight:600;font-size:19px}
.contact .meta{color:var(--navy-soft);margin-top:6px;max-width:60ch}
.contact .btn{justify-self:start}
.nm-hint{margin-top:0;max-width:52ch}
@media (min-width:900px){
  .trow.lrow{grid-template-columns:1.3fr 1.1fr .6fr 1.2fr}
  .trow.wrow{grid-template-columns:1.2fr 1.6fr auto}
  .trow.frow{grid-template-columns:1.1fr 1.3fr .5fr .5fr auto}
  .book{padding:32px 36px}
  .book form{max-width:none}
  .slots{grid-template-columns:repeat(5,minmax(0,160px))}
  .book .btn-light{width:auto;padding:0 40px}
  .reports{grid-template-columns:1fr 1fr}
  .pack{grid-template-columns:1fr auto auto}
  .contact{grid-template-columns:1fr auto;padding:24px 28px}
  }
.trow .chip{justify-self:start}

/* forms (build step 2): spam trap off-screen, status + thank-you lines readable on the blue form */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:14px;font-weight:600;font-size:16px}
.form-status.bad{background:#fff;color:#a4161a;border-radius:var(--r-sm);padding:10px 14px}
.form-done,.form .form-done{margin-top:18px;background:#fff;color:var(--navy);border-radius:var(--r-sm);padding:16px 18px;font-weight:600;outline:none}

/* Leer AI (2026-10-15): outcomes beside the FAQ, host card full width (photo | text), sign-up form full width */
.host-wide{margin-top:40px}
@media (min-width:900px){
  .host-wide{margin-top:56px;padding:36px 40px}
  .host-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:start;margin-top:22px}
  .host-grid img{margin-top:0}
  .host-text>p:first-child{margin-top:0}
  .form-wide{margin-top:56px;padding:40px 44px}
  .form-wide .form-grid{gap:0 32px}
  .form-wide .btn-light{width:auto;padding:0 40px}
}

/* Full-width rows on PC (Senne 2026-10-15: no empty column beside a tall card). Phone layout unchanged.
   Photo cards: photo left, text right. Comparison: title + source left, bars right. Promises: two columns. */
@media (min-width:900px){
  .row-wide{margin-top:56px}
  .compare.row-wide{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;column-gap:72px;align-items:start}
  .compare.row-wide>h2{grid-column:1;grid-row:1}
  .compare.row-wide>.source{grid-column:1;grid-row:2;margin-top:14px}
  .compare.row-wide>.bars{grid-column:2;grid-row:1 / span 2;margin-top:0}
  .terms.row-wide{padding:0}
  .terms.row-wide ul{grid-template-columns:1fr 1fr;column-gap:44px}
}

/* Over ons (2026-10-15): mission + vision, how we work, the founder short at the bottom */
.about-hero{margin-top:12px;padding-bottom:32px}
.about .plain p{margin-top:14px}
.founder{margin-top:48px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:24px;display:grid;gap:14px;align-items:center}
.founder img{width:72px;height:72px;border-radius:50%;object-fit:cover}
.founder h2{font-size:24px}
.founder p{margin-top:8px;color:var(--navy-soft)}
.about-cta{margin-top:32px}
@media (min-width:900px){
  .about-hero{padding-bottom:48px}
  .founder{grid-template-columns:120px 1fr;padding:32px 40px;gap:32px;margin-top:56px}
  .founder img{width:120px;height:120px}
  .about .two>*{margin-top:56px}
}

/* portal, live data (session 2, 2026-10-16): built from the dashboard parts above, no new tokens */
[hidden]{display:none !important} /* components with display:grid/flex must still hide (avatar, form-grid) */
body.wacht main.dash{visibility:hidden} /* until the login check has passed: no flash of an empty page */
.leeg{margin-top:14px;background:#fff;border-radius:var(--r);padding:18px 20px;border:1.5px dashed var(--line);color:var(--navy-soft)}
.top nav[aria-label=Account]{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.btn-ghost-light{background:transparent;color:#fff;border:2px solid #fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.voorbeeld{margin-top:18px}
.voorbeeld .mail{color:var(--navy)}
.voorbeeld .mail p{color:var(--navy);white-space:pre-line}
.voorbeeld .mail .from{color:var(--navy-soft)}
.voorbeeld .actions{margin-top:20px}
.voorbeeld .btn-light{margin-top:0;width:auto}
.form .form-status:not(.bad){color:#fff}
.pr-foto{width:200px;height:200px;object-fit:cover;border-radius:var(--r);display:block;margin:0 auto}
.vak-acts{display:flex;align-items:center;gap:14px}
.vak-erbij{display:grid;gap:0 16px;align-items:end;margin-top:8px}
.vak-erbij .btn-sm{margin-top:16px}
.vak-erbij .field select{border:1.5px solid var(--line)}
@media (min-width:900px){.vak-erbij{grid-template-columns:1fr 1fr auto}.vak-erbij .form-status{grid-column:1/-1}}
.groep{font-weight:600;color:#fff;margin-top:22px;padding-top:14px;border-top:1.5px solid rgba(255,255,255,.25)}
.form .radios label{color:#fff}
.maand{display:flex;align-items:center;gap:10px;font-weight:500}
.maand input{min-height:44px;border-radius:var(--r-sm);border:1.5px solid var(--line);padding:6px 10px;font:inherit;color:var(--navy);background:#fff}
.totals{margin-top:14px;background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);display:grid;gap:12px}
.tot-kop{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:24px;letter-spacing:-.02em}
.tot-groep{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
.tot-groep .lbl-s{margin-top:0;color:var(--navy-soft);flex-basis:100%}
.tot{font-size:17px}
@media (min-width:900px){.tot-groep .lbl-s{flex-basis:auto;min-width:110px}}
.vak-acts .chip{white-space:nowrap}
.en-veld{display:grid;gap:4px;font-size:14px;color:var(--navy-soft);font-weight:500}
.en-veld input{min-height:40px;border-radius:var(--r-sm);border:1.5px solid var(--line);padding:6px 10px;font:inherit;font-size:16px;color:var(--navy)}
.login .check{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:16px;font-weight:500;min-height:44px;cursor:pointer}
.login .check input{width:20px;height:20px;accent-color:var(--blue);margin:0}
/* pay per age on Word docent (2026-10-16) */
.loon{width:100%;margin-top:18px;border-collapse:collapse;font-size:16px}
.loon caption{text-align:left;font-weight:600;padding-bottom:8px}
.loon th,.loon td{padding:7px 0;border-top:1.5px solid var(--line);text-align:left;font-weight:500}
.loon thead th{color:var(--navy-soft);font-size:14px;font-weight:600;border-top:0}
.loon td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.loon thead th:last-child{text-align:right}
.loon .basis{display:block;font-size:13px;font-weight:500;color:var(--navy-soft)} /* base wage under the all-in amount (2026-10-17) */
@media (min-width:900px){ /* two columns on PC, so the pay box does not leave a hole beside the hero text */
  .loon thead{display:none}
  .loon tbody{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}
  .loon tr{display:flex;justify-content:space-between;border-top:1.5px solid var(--line)}
  .loon th,.loon td{border-top:0}
}
/* beheer dashboard (2026-10-16): KPI tiles from the card parts above, no new tokens */
.kpis{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.kpi{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;display:grid;gap:4px}
.kpi b{font:800 28px/1.1 "Bricolage Grotesque",sans-serif;letter-spacing:-.02em;color:var(--navy)}
.kpi span{color:var(--navy-soft);font-size:15px}
.kpi-let{background:var(--marker)}
.kpi-let span{color:var(--navy)}
.kijk-balk{margin-bottom:10px}
.kijk-balk .link{margin-left:4px}
@media (min-width:900px){.kpis{grid-template-columns:repeat(4,1fr)}}
/* privacy page (2026-10-17): one reading column, centred on PC; the retention table reuses .loon */
.form .small a,.form p a,.nomatch .small a{color:#fff}
.legal .meta{margin-top:14px;font-size:15px;color:var(--navy-soft)}
.prose{margin-top:36px;padding:0 8px}
.prose h2{font-size:26px;margin-top:40px}
.prose p,.prose ul{margin-top:14px}
.prose ul{padding-left:22px}
.prose li+li{margin-top:8px}
.bewaar th{width:56%;padding-right:16px;vertical-align:top}
.bewaar td,.bewaar thead th:last-child{vertical-align:top;text-align:left}
@media (min-width:900px){
  .page.legal{max-width:880px}
  .prose{padding:0}
  .prose h2{font-size:32px;margin-top:48px}
  .bewaar thead{display:table-header-group}
  .bewaar tbody{display:table-row-group}
  .bewaar tr{display:table-row}
  .bewaar th,.bewaar td{border-top:1.5px solid var(--line)}
  .bewaar thead th{border-top:0}
  .bewaar td,.bewaar thead th:last-child{text-align:right}
}

/* Rei Japanese partner card in Rei's own brand (reijapanese.com: paper #fafafa, ink #101010, wave #2554e0, 4px corners,
   Space Grotesk headings, the waving mascot, a faint 零), Senne 2026-10-19 */
.dcard.partner.rei{position:relative;overflow:hidden;background:#fafafa;color:#101010;border:2px solid #101010;border-radius:4px;box-shadow:none;grid-template-columns:88px 1fr}
.dcard.partner.rei::after{content:"零";position:absolute;right:-10px;bottom:-34px;font:700 150px/1 "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;color:#f0f0ef;pointer-events:none}
.dcard.partner.rei > *{position:relative;z-index:1}
.dcard.partner.rei img{width:88px;height:88px;object-fit:contain;border-radius:0;background:none}
.dcard.partner.rei .chip{background:#2554e0;color:#fff;border-radius:4px;font-family:"Space Grotesk",sans-serif}
.dcard.partner.rei .nm{font:700 22px/1.2 "Space Grotesk",sans-serif;color:#101010}
.dcard.partner.rei .nm-2{color:#2554e0}
.dcard.partner.rei .jp{display:block;margin-top:4px;font:700 14px/1.4 "Noto Sans JP","Hiragino Sans","Yu Gothic",sans-serif;color:#2554e0}
.dcard.partner.rei p{color:#2a2a2a;margin-top:8px}
.dcard.partner.rei .btn{background:#2554e0;color:#fff;border:2px solid #2554e0;border-radius:4px;font-family:"Space Grotesk",sans-serif}
.dcard.partner.rei .btn:hover,.dcard.partner.rei .btn:focus-visible{background:#1c42b8;border-color:#1c42b8}
@media (min-width:900px){.dcard.partner.rei .btn{grid-column:2;white-space:nowrap}}

/* Leer AI: the theme of an evening under its date (2026-10-19) */
.srow .month .thema{display:block;margin-top:2px;font:600 15px/1.3 Figtree,system-ui,sans-serif;letter-spacing:0;color:var(--blue)}

/* Value comparison with Lyceo under the price bars (2026-10-19). Only rows with a public Lyceo source.
   Phone: one card per row, each cell labelled. PC: a three-column table across the full width. */
.vs{margin-top:20px;width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;font-size:16px}
.vs thead{display:none}
.vs tr{display:block;padding:16px 18px;border-top:1.5px solid var(--line)}
.vs tbody tr:first-child{border-top:0}
.vs th[scope=row]{display:block;text-align:left;font:800 19px/1.3 "Bricolage Grotesque",sans-serif;color:var(--navy)}
.vs td{display:block;margin-top:8px;color:var(--navy-soft)}
.vs td::before{content:attr(data-l);display:block;font-weight:700;font-size:14px;color:var(--navy)}
.vs tbody td:first-of-type{color:var(--navy)}
.vs tbody td:first-of-type::before{color:var(--blue)}
.vs-src{font-size:14px}
@media (min-width:900px){
  .compare.row-wide{grid-template-rows:auto 1fr auto auto}
  .compare.row-wide>.vs{grid-column:1 / -1;grid-row:3;margin-top:32px}
  .compare.row-wide>.source.vs-src{grid-column:1 / -1;grid-row:4}
  .vs{display:table}
  .vs thead{display:table-header-group}
  .vs tr{display:table-row;padding:0}
  .vs th,.vs td{display:table-cell;padding:16px 22px;vertical-align:top;border-top:1.5px solid var(--line)}
  .vs thead th,.vs thead td{border-top:0;padding-top:20px;padding-bottom:12px;text-align:left;font:800 19px/1.3 "Bricolage Grotesque",sans-serif}
  .vs thead th:nth-child(2){color:var(--blue)}
  .vs thead th:nth-child(3){color:var(--navy-soft)}
  .vs{table-layout:fixed}
  .vs thead td,.vs th[scope=row]{width:20%}
  .vs th[scope=row]{display:table-cell;font-size:17px}
  .vs td{margin:0}
  .vs td::before{display:none}
  .vs tbody td:first-of-type{background:#f7f9ff}
}

/* Leer AI voor teams (2026-10-26): the company offer. Darker and more formal than the family pages, scoped to
   body.teams only (Senne: "it should get the darker look yes"). Flat: hard rules instead of shadows, ink band on
   top, cool grey ground, blue only for actions, the marker only in the guarantee rule. */
html:has(body.teams){background:#f3f4f7}
.teams{--ink:#0b1640;--ink-soft:#b9c3e0;--ink-rule:rgba(255,255,255,.18);--t-ground:#f3f4f7;--t-rule:#d3d8e4;--t-soft:#4f5a7a;background:var(--t-ground)}
.t-band{background:var(--ink);color:#fff}
.t-band .wordmark,.t-band .brand{color:#fff}
.t-band .hl{bottom:-.14em;height:.14em;transform:none;border-radius:.07em}
.t-band .menu summary svg rect{fill:#fff}
.t-band .menu summary:hover{background:rgba(255,255,255,.1)}
.t-hero{max-width:640px;margin:0 auto;padding:20px 16px 48px}
.t-kicker{display:flex;align-items:center;gap:12px;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.t-kicker::before{content:"";width:28px;height:2px;background:var(--marker)}
.t-hero h1{color:#fff;margin-top:16px;font-size:38px;max-width:17ch}
.t-lead{margin-top:18px;font-size:19px;color:var(--ink-soft);max-width:40ch}
.t-facts{margin:28px 0 0;border-top:1.5px solid var(--ink-rule)}
.t-facts div{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:12px 0;border-bottom:1.5px solid var(--ink-rule)}
.t-facts dt{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);padding-top:3px}
.t-facts dd{margin:0;font-weight:500}
.t-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:28px}
.t-actions .btn{width:100%}
.t-link{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.t-band .t-link:hover{color:var(--ink-soft)}
.t-photo{margin:36px 0 0}
.t-photo img{border-radius:var(--r-sm);width:100%}
.t-photo figcaption{margin-top:10px;font-size:15px;color:var(--ink-soft)}

.t-page{padding-top:8px}
.t-sec{margin-top:56px}
.t-sec h2{max-width:22ch}
.t-sub{margin-top:12px;color:var(--t-soft);max-width:58ch}
.t-steps{list-style:none;margin:28px 0 0;padding:0;border-top:2px solid var(--navy)}
.t-steps li{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:1.5px solid var(--t-rule)}
.t-when{display:flex;align-items:baseline;gap:8px;color:var(--t-soft);font-weight:500;font-size:16px}
.t-when span{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-right:6px}
.t-when b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:34px;line-height:1;letter-spacing:-.02em;color:var(--navy)}
.t-steps h3{margin-top:4px}
.t-steps li>p:last-child{color:var(--t-soft)}
.t-three{display:grid;gap:28px;margin-top:24px}
.t-three>div{border-top:3px solid var(--navy);padding-top:16px}
.t-three p{margin-top:10px;color:var(--t-soft)}

.t-price{margin-top:56px;background:var(--ink);color:#fff;border-radius:var(--r);padding:32px 24px;display:grid;gap:28px}
.t-price h2{color:#fff;font-size:22px;font-weight:700;line-height:1.3}
.t-amount{display:block;font-size:64px;font-weight:800;line-height:1;letter-spacing:-.03em;margin-bottom:6px}
.t-price p{color:var(--ink-soft);margin-top:14px}
.t-guarantee{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:24px;line-height:1.25;letter-spacing:-.01em;color:#fff !important;margin-top:0 !important;border-left:4px solid var(--marker);padding-left:18px}
.t-promise .btn{margin-top:24px;width:100%}

.t-host{display:grid;gap:22px}
.t-host img{border-radius:var(--r-sm);width:100%}
.t-host p{margin-top:14px}
.t-host .t-cap{font-size:15px;color:var(--t-soft)}
.t-faq{padding:0}
.t-faq details{border-color:var(--t-rule)}
.t-faq>div{margin-top:20px}
.t-faq p{color:var(--t-soft)}

.teams .form{background:var(--ink)}
.teams .form p{color:var(--ink-soft)}
.teams .form .btn{margin-top:22px;width:100%}
.teams .form .form-status.bad{color:#a4161a}
.teams footer{background:var(--ink)}
@media (min-width:600px){.t-hero h1{font-size:48px}}
@media (min-width:900px){
  .t-hero{zoom:.9;max-width:1160px;padding:36px 24px 72px;display:grid;grid-template-columns:1.2fr .8fr;gap:64px;align-items:start}
  .t-hero h1{font-size:60px}
  .t-lead{font-size:21px}
  .t-facts div{grid-template-columns:130px 1fr;padding:14px 0}
  .t-actions .btn{width:auto;padding:0 40px}
  .t-photo{margin-top:8px}
  .t-sec{margin-top:80px}
  .t-steps li{grid-template-columns:200px 1fr 1.3fr;gap:32px;align-items:baseline;padding:24px 0}
  .t-when{flex-direction:column;align-items:flex-start;gap:6px}
  .t-when b{font-size:44px}
  .t-steps h3{margin-top:0}
  .t-three{grid-template-columns:repeat(3,1fr);gap:40px}
  .t-price{margin-top:80px;grid-template-columns:1fr 1fr;gap:64px;padding:48px 56px}
  .t-amount{font-size:96px}
  .t-price h2{font-size:26px}
  .t-guarantee{font-size:30px}
  .t-promise .btn{width:auto;padding:0 40px}
  .t-host{grid-template-columns:.9fr 1.1fr;gap:56px;align-items:center}
  .t-host h2{margin-top:0}
  .t-faq{display:grid;grid-template-columns:.8fr 1.6fr;gap:56px;align-items:start}
  .t-faq>div{margin-top:0}
  .teams .form .btn{width:auto;padding:0 40px}
}
@media (min-width:960px){
  .t-band .menu nav a{color:#fff}
  .t-band .menu nav a:hover{color:var(--ink-soft)}
  .t-band .lang{background:transparent;border-color:var(--ink-rule)}
  .t-band .menu nav .lang a{color:var(--ink-soft)}
  .t-band .menu nav .lang a[aria-current]{background:#fff;color:var(--navy)}
}

/* /bijles comparison with four providers (2026-10-26): a wider name column so "Online Huiswerkklas" stays on one line,
   and every competitor heading in the muted colour */
@media (min-width:521px){.compare .bar{grid-template-columns:172px 1fr}}
@media (min-width:900px){
  .vs4 thead th:nth-child(n+3){color:var(--navy-soft)}
  .vs4 thead td,.vs4 th[scope=row]{width:16%}
  .vs4 th,.vs4 td{padding:16px 18px}
}

/* comparison table folded into a dropdown (Senne 2026-10-26): bars + summary stay visible, the table opens on tap */
.vs-more{margin-top:20px}
.vs-more summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:0 20px;background:#fff;border:1.5px solid var(--line);border-radius:var(--r);font-weight:600;color:var(--navy)}
.vs-more summary::-webkit-details-marker{display:none}
.vs-more summary::after{content:"";width:12px;height:12px;border-right:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(45deg);flex:none;margin:-4px 6px 0 0;transition:transform .2s}
.vs-more[open] summary::after{transform:rotate(-135deg);margin-top:4px}
.vs-more summary:hover{border-color:var(--blue)}
.vs-more .vs{margin-top:12px}
@media (min-width:900px){
  .compare.row-wide>.vs-more{grid-column:1 / -1;grid-row:3;margin-top:32px}
}

/* /bijles lesson report as its own row (2026-10-26): heading left, the example report right; the form below spans the page */
.lesson-row{margin-top:48px}
@media (min-width:900px){
  .lesson-row{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;margin-top:72px}
  .lesson-row .mail{margin-top:0}
}

/* /bijles hero (Senne 2026-10-26): text left, the price on the right without a box or picture; the lowest price big
   and blue, the higher one small and grey */
.hero-price{margin-top:28px;display:grid;gap:8px}
.pr-big{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:52px;line-height:1;letter-spacing:-.03em;color:var(--blue)}
.pr-small{font-size:15px;color:var(--navy-soft)}
@media (min-width:900px){
  .hero-split{align-items:center}
  .hero-split .hero-price{margin-top:0;justify-items:start}
  .pr-big{font-size:88px}
  .pr-small{font-size:16px}
}
.pr-unit{font-family:Figtree,sans-serif;font-weight:600;font-size:.32em;letter-spacing:0;margin-left:.15em}
/* phones: the price sits right under the headline, before the lead and the button */
@media (max-width:899px){
  .hero-split{display:flex;flex-direction:column}
  .hero-split>div:first-child{display:contents}
  .hero-split>.price-collage{order:2;margin:20px 0 4px}
  .hero-split h1{order:1}
  .hero-split .hero-price{order:2;margin-top:20px}
  .hero-split .lead,.hero-split .actions,.hero-split .reassure{order:3}
}
/* the price owns the right column on PC (2026-10-26, after Senne's "look at it"): big enough to fill it, unit tight */
@media (min-width:900px){
  .hero-split{grid-template-columns:1.15fr .85fr;gap:24px}
  .hero-split .hero-price{justify-self:center;gap:14px}
  .pr-big{font-size:clamp(80px,8.2vw,112px);line-height:.95;white-space:nowrap}
  .pr-unit{font-size:.28em;margin-left:.1em;line-height:1}
  .pr-small{font-size:17px}
}
.lesson-sub{margin-top:14px;color:var(--navy-soft)}
.lesson-row .checks{margin-top:18px}
@media (max-width:899px){.lesson-row .mail{margin-top:24px}}
@media (min-width:900px){.lesson-row{align-items:center}}

/* /bijles hero: small lesson stills around the price (2026-10-26, placeholders until Senne's own photos) */
.price-collage{position:relative;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.price-collage .hero-price{order:-1;width:100%;position:relative;z-index:1}
.pc{display:block;width:calc(25% - 8px);height:auto;border-radius:8px;border:3px solid #fff;box-shadow:0 1px 2px rgba(15,31,92,.12),0 8px 18px -10px rgba(15,31,92,.4);transform:rotate(var(--r,0deg))}
.pc5,.pc6,.pc7,.pc8{display:none}
.pc1{--r:-4deg}.pc2{--r:3deg}.pc3{--r:-2deg}.pc4{--r:4deg}.pc5{--r:4deg}.pc6{--r:-4deg}.pc7{--r:2deg}.pc8{--r:-5deg}
@media (min-width:900px){
  .price-collage{display:block;align-self:stretch;min-height:440px}
  .price-collage .hero-price{position:absolute;inset:0;display:grid;align-content:center;justify-items:start;margin:0;padding-left:4%}
  .pc,.pc5,.pc6,.pc7,.pc8{display:block;position:absolute;width:29%}
  .pc1{top:0;left:0}.pc2{top:16px;left:25%}.pc3{top:-6px;left:50%}.pc4{top:12px;right:-2%}
  .pc5{bottom:4px;left:-1%}.pc6{bottom:-8px;left:24%}.pc7{bottom:10px;left:49%}.pc8{bottom:-4px;right:-1%}
}