/* ============ Toepassen van AI ============ */
.ai-aims,.ai-how,.ai-layer,.ai-check,.ai-paths,.ai-index{background:transparent}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ai-glass{background:linear-gradient(150deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.66) 100%);border:1px solid rgba(255,255,255,.85);border-radius:var(--radius-lg);box-shadow:0 2px 6px rgba(14,19,36,.04),0 16px 40px rgba(14,19,36,.07);backdrop-filter:blur(16px) saturate(1.5);-webkit-backdrop-filter:blur(16px) saturate(1.5)}
/* aims */
.ai-aim-panel{margin-top:40px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:rgba(255,255,255,.62);border:1px solid var(--ink-100);border-radius:var(--radius-lg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ai-aim{padding:30px 28px 26px;display:flex;flex-direction:column;gap:12px;border-left:1px solid var(--ink-100)}
.ai-aim:first-child{border-left:0}
.ai-aim h3{font-size:22px;font-weight:800;letter-spacing:-.015em;line-height:1.2;color:var(--ink-900);text-wrap:balance}
.ai-aim p{flex:1;color:var(--ink-500);font-size:15px;line-height:1.6;text-wrap:pretty}
.ai-aim-to{display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:14px;border-top:1px solid var(--ink-100)}
.ai-aim-to a{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--ink-700);text-decoration:none}
.ai-aim-to a:hover{color:var(--ink-900);text-decoration:none}
.ai-aim-to a:hover .ai-aim-dot{transform:scale(1.1)}
.ai-aim-dot{width:20px;height:20px;border-radius:50%;background:var(--lv);color:var(--ink-900);font-family:var(--font-display);font-size:11px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s}
.ai-aim-dot-x{background:var(--ink-100)}
@media (max-width:1000px){.ai-aim-panel{grid-template-columns:1fr 1fr}.ai-aim:nth-child(3){border-left:0}.ai-aim:nth-child(n+3){border-top:1px solid var(--ink-100)}}
@media (max-width:620px){.ai-aim-panel{grid-template-columns:1fr}.ai-aim{border-left:0;padding:24px 22px}.ai-aim+.ai-aim{border-top:1px solid var(--ink-100)}}
/* how */
.ai-how-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;margin-top:36px;align-items:start}
@media (max-width:960px){.ai-how-grid{grid-template-columns:1fr;gap:32px}}
.ai-how-text p{font-size:16px;line-height:1.7;color:var(--ink-700);margin-bottom:16px;text-wrap:pretty}
.ai-tags{display:flex;flex-wrap:wrap;gap:8px}
.ai-how-text .ai-tags{margin:4px 0 18px}
.ai-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--ink-800);padding:3px 10px 3px 8px;border-radius:99px;background:color-mix(in oklch,var(--tg),white 72%);white-space:nowrap}
.ai-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tg)}
.ai-note{font-size:14px!important;color:var(--ink-500)!important;line-height:1.55}
.ai-map{display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:14px}
.ai-map-list{display:flex;flex-direction:column;gap:10px}
.ai-map-row{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:var(--radius-md);background:linear-gradient(150deg,rgba(255,255,255,.92),rgba(255,255,255,.68));border:1px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(14,19,36,.04),0 10px 26px rgba(14,19,36,.06);color:var(--ink-900);text-decoration:none;transition:transform .18s,box-shadow .18s}
.ai-map-row:hover{transform:translateX(4px);box-shadow:0 2px 6px rgba(14,19,36,.05),0 14px 32px rgba(14,19,36,.1);text-decoration:none;color:var(--ink-900)}
.ai-map-n{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--lv);color:var(--ink-900);font-family:var(--font-display);font-weight:800;font-size:17px;display:inline-flex;align-items:center;justify-content:center}
.ai-map-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.ai-map-t b{font-family:var(--font-display);font-size:17px;font-weight:800}
.ai-map-t small{font-size:13px;color:var(--ink-500);line-height:1.4}
.ai-map-ax{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.ai-map-ax span{writing-mode:vertical-rl;transform:rotate(180deg)}
.ai-map-ax i{flex:1;width:2px;background:linear-gradient(to top,var(--ink-300),var(--ink-500));position:relative}
.ai-map-ax i::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);border:6px solid transparent;border-bottom:8px solid var(--ink-500);border-top:0}
.ai-dl{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.ai-dl-h{width:100%;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.ai-dl .ai-note{width:100%;margin-top:4px}
/* layer */
.ai-layer-head{display:flex;gap:22px;align-items:center}
.ai-layer-n{flex:0 0 auto;width:72px;height:72px;border-radius:22px;background:linear-gradient(150deg,color-mix(in oklch,var(--lv),white 25%),var(--lv));color:var(--ink-900);font-family:var(--font-display);font-weight:800;font-size:36px;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 10px 28px color-mix(in oklch,var(--lv),transparent 55%)}
.ai-layer-head > div{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.ai-layer-head .over-h2{margin:0}
@media (max-width:640px){.ai-layer-n{width:56px;height:56px;font-size:28px;border-radius:16px}}
.ai-fig{margin:36px 0 0;padding:28px 30px;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.66));border:1px solid rgba(255,255,255,.85);border-radius:var(--radius-lg);box-shadow:0 2px 6px rgba(14,19,36,.04),0 16px 40px rgba(14,19,36,.07);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ai-fig figcaption{margin-top:20px;padding-top:16px;border-top:1px solid var(--ink-100);font-size:14px;line-height:1.6;color:var(--ink-500);max-width:820px}
@media (max-width:640px){.ai-fig{padding:22px 18px}}
/* onion */
.ai-onion-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:center}
@media (max-width:760px){.ai-onion-wrap{grid-template-columns:1fr}}
.ai-ring{border-radius:28px;padding:14px 18px 18px;background:color-mix(in oklch,var(--c-purple),white 86%);border:1px solid color-mix(in oklch,var(--c-purple),white 55%)}
.ai-ring p{font-size:14px;color:var(--ink-700);line-height:1.45;margin-bottom:12px}
.ai-ring p b{color:var(--ink-900)}
.ai-ring .ai-ring{margin:0 0 0 clamp(8px,4%,40px)}
.ai-ring-1{background:color-mix(in oklch,var(--c-purple),white 74%)}
.ai-ring-2{background:color-mix(in oklch,var(--c-purple),white 60%)}
.ai-ring-3{background:color-mix(in oklch,var(--c-purple),white 40%);padding-bottom:14px}
.ai-ring-3 p{margin:0}
.ai-agi{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-700);padding:12px 16px;border:1.5px dashed var(--ink-300);border-radius:99px;white-space:nowrap}
.ai-agi-dot{width:12px;height:12px;border-radius:50%;background:var(--c-purple);box-shadow:0 0 0 5px color-mix(in oklch,var(--c-purple),white 70%)}
/* matrix */
.ai-matrix{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:stretch}
.ai-mx-ax{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--ink-500);text-align:center;padding-bottom:4px;align-self:end}
.ai-mx-row{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500);writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;align-self:center}
.ai-mx-cell{border-radius:var(--radius-md);padding:18px;background:color-mix(in oklch,var(--c-blue),white 82%);border:1px solid color-mix(in oklch,var(--c-blue),white 50%);font-size:14px;line-height:1.5;color:var(--ink-700);display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:96px}
.ai-mx-cell b{font-family:var(--font-display);font-size:16px;color:var(--ink-900)}
.ai-mx-hot{background:color-mix(in oklch,var(--c-blue),white 52%)}
/* ladder */
.ai-ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;position:relative}
.ai-rung{display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:16px;min-height:calc(70px + var(--i) * 46px);border-radius:var(--radius-md) var(--radius-md) 6px 6px;background:color-mix(in oklch,var(--c-green),white calc(80% - var(--i) * 16%));border:1px solid color-mix(in oklch,var(--c-green),white 40%);font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink-900);line-height:1.3}
.ai-rung span{width:26px;height:26px;border-radius:50%;background:white;display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800}
.ai-ladder-ax{grid-column:1/-1;font-size:13px;font-weight:600;color:var(--ink-500);border-top:2px solid var(--ink-300);padding-top:8px;margin-top:4px}
@media (max-width:620px){.ai-ladder{grid-template-columns:1fr 1fr}.ai-rung{min-height:calc(60px + var(--i) * 20px)}}
/* spectrum */
.ai-spec-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ai-spec-box{padding:18px;border-radius:var(--radius-md);background:color-mix(in oklch,var(--c-orange),white calc(82% - var(--i) * 22%));border:1px solid color-mix(in oklch,var(--c-orange),white 45%);display:flex;flex-direction:column;gap:4px}
.ai-spec-box b{font-family:var(--font-display);font-size:17px;color:var(--ink-900)}
.ai-spec-box span{font-size:14px;color:var(--ink-700)}
.ai-spec-ax{font-size:13px;font-weight:600;color:var(--ink-500);border-top:2px solid var(--ink-300);padding-top:8px;margin-top:12px}
.ai-spec-tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px;margin-left:auto;justify-content:flex-end}
.ai-spec-tl{font-size:13px;font-weight:600;color:var(--ink-700);margin-right:4px}
.ai-chip{font-size:13px;color:var(--ink-700);padding:5px 12px;border-radius:99px;background:white;border:1px solid var(--ink-100)}
@media (max-width:620px){.ai-spec-row{grid-template-columns:1fr}.ai-spec-tools{justify-content:flex-start}}
/* pyramid */
.ai-pyr{display:flex;flex-direction:column;gap:6px}
.ai-pyr-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.ai-pyr-bar{justify-self:center;width:calc(34% + var(--i) * 22%);text-align:center;padding:12px 10px;border-radius:8px;font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--ink-900);background:color-mix(in oklch,var(--c-red),white calc(30% + var(--i) * 18%))}
.ai-pyr-row p{font-size:14px;line-height:1.45;color:var(--ink-700)}
@media (max-width:620px){.ai-pyr-row{grid-template-columns:1fr;gap:4px}.ai-pyr-bar{justify-self:start}}
/* terms */
.ai-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
@media (max-width:900px){.ai-terms{grid-template-columns:1fr}}
.ai-terms > .reveal{display:flex}
.ai-term{width:100%;scroll-margin-top:110px;background:rgba(255,255,255,.82);border:1px solid var(--ink-100);border-radius:14px;padding:26px 28px 28px;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 2px rgba(14,19,36,.04)}
.ai-term:target{border-color:var(--ink-300);box-shadow:0 0 0 3px color-mix(in oklch,var(--lv),transparent 55%)}
.ai-term h3{display:flex;align-items:baseline;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.01em;padding-bottom:14px;margin-bottom:2px;border-bottom:1px solid var(--ink-100)}
.ai-term h3::before{content:"";flex:none;width:9px;height:9px;border-radius:2px;background:var(--lv);transform:translateY(-2px)}
.ai-term > p:not(.ai-ask){display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 16px;font-size:15px;line-height:1.6;color:var(--ink-700);text-wrap:pretty}
.ai-term > p b{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);line-height:1.4;padding-top:4px}
@media (max-width:520px){.ai-term{padding:22px 20px 24px}.ai-term > p:not(.ai-ask){grid-template-columns:1fr;gap:2px}}
.ai-ask{display:flex;gap:12px;align-items:flex-start;margin-top:4px;padding:12px 14px;border-radius:10px;background:var(--paper-50,#f7f7f5);border:1px solid var(--ink-100);font-weight:600;color:var(--ink-900)!important}
.ai-ask > span[aria-hidden]{flex:0 0 auto;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink-700);color:var(--ink-700);font-family:var(--font-display);font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.ai-fact{font-size:14px;line-height:1.6;color:var(--ink-500);padding-top:12px;border-top:1px dashed var(--ink-300)}
.ai-fact b{color:var(--ink-700)}
/* mini figures */
.ai-mini{padding:14px 16px;border-radius:var(--radius-md);background:white;border:1px solid var(--ink-100);display:flex;flex-direction:column;gap:8px}
.ai-mini small{font-size:12px;color:var(--ink-500)}
.ai-next p{font-size:14px;font-weight:600;color:var(--ink-900)}
.ai-next-row{display:grid;grid-template-columns:90px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:13px;color:var(--ink-700)}
.ai-next-row i{display:block;height:10px;border-radius:99px;background:var(--lv)}
.ai-next-row em{font-style:normal;text-align:right;color:var(--ink-500)}
.ai-tokens{display:flex;flex-wrap:wrap;gap:3px}
.ai-tokens span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:15px;padding:4px 8px;border-radius:6px;background:color-mix(in oklch,var(--lv),white 70%)}
.ai-tokens span:nth-child(even){background:color-mix(in oklch,var(--c-purple),white 75%)}
.ai-embed{position:relative;height:110px;border-radius:10px;background:radial-gradient(circle at 22% 40%,color-mix(in oklch,var(--lv),white 70%) 0 22%,transparent 23%),radial-gradient(circle at 72% 50%,color-mix(in oklch,var(--c-orange),white 75%) 0 22%,transparent 23%)}
.ai-embed span{position:absolute;font-size:12px;color:var(--ink-800);white-space:nowrap;padding-left:12px}
.ai-embed span::before{content:"";position:absolute;left:0;top:5px;width:7px;height:7px;border-radius:50%;background:var(--ink-700)}
.ai-flow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ai-flow span{font-size:13px;font-weight:600;padding:6px 10px;border-radius:8px;background:color-mix(in oklch,var(--lv),white 70%);color:var(--ink-900)}
.ai-flow b{color:var(--ink-400)}
.ai-loop{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;padding:4px}
.ai-loop span{font-size:13px;font-weight:600;text-align:center;padding:8px 10px;border-radius:8px;background:color-mix(in oklch,var(--lv),white 70%);color:var(--ink-900)}
.ai-loop .ai-loop-0{background:var(--ink-900);color:white}
.ai-loop .ai-loop-3{grid-column:1;grid-row:2}.ai-loop .ai-loop-2{grid-column:2;grid-row:2}
.ai-loop b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:22px;color:var(--ink-500)}
.ai-prompts{display:grid;grid-template-columns:1fr 1.5fr;gap:10px;background:transparent;border:0;padding:0}
@media (max-width:560px){.ai-prompts{grid-template-columns:1fr}}
.ai-prompts > div{padding:12px 14px;border-radius:var(--radius-md);background:white;border:1px solid var(--ink-100)}
.ai-prompts p{font-size:14px;line-height:1.5;color:var(--ink-700);margin-top:4px}
.ai-prompts > div:first-child p{text-decoration:line-through;text-decoration-color:rgba(226,88,88,.6)}
.ai-prompts .ai-prompt-good{border-color:color-mix(in oklch,var(--lv),white 20%)}
.ai-prompts small{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
/* learn */
.ai-learn{margin-top:24px;padding:24px 28px;border-radius:var(--radius-lg);background:rgba(255,255,255,.55);border:1px dashed var(--ink-300)}
.ai-learn h3{font-size:16px;font-weight:800;margin-bottom:14px}
.ai-learn ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ai-learn li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:baseline;font-size:15px;line-height:1.55;color:var(--ink-500)}
.ai-learn li .ai-tag{justify-self:start}
@media (max-width:620px){.ai-learn li{grid-template-columns:1fr;gap:4px}.ai-learn{padding:20px}}
.ai-learn a,.ai-path a,.ai-check-see a,.ai-index a{color:var(--ink-900);font-weight:600;text-decoration:none;border-bottom:1px solid var(--ink-300);transition:color .15s,border-color .15s}
.ai-learn a:hover,.ai-path a:hover,.ai-check-see a:hover,.ai-index a:hover{color:var(--c-blue);border-bottom-color:var(--c-blue);text-decoration:none}
/* checklist */
.ai-check-list{margin-top:36px;border-top:1px solid var(--ink-100)}
.ai-check-row{display:grid;grid-template-columns:200px minmax(0,1.6fr) minmax(0,1fr);gap:24px;padding:16px 0;border-bottom:1px solid var(--ink-100);font-size:15px;line-height:1.5;color:var(--ink-700);align-items:baseline}
.ai-check-head{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500);padding:12px 0}
.ai-check-c{font-family:var(--font-display);font-weight:700;color:var(--ink-900)}
.ai-check-see{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px}
@media (max-width:760px){.ai-check-head{display:none}.ai-check-row{grid-template-columns:1fr;gap:6px}}
/* paths */
.ai-path-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin-top:36px}
.ai-path-grid > .reveal{display:flex}
.ai-path{width:100%;background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.66));border:1px solid rgba(255,255,255,.85);border-radius:var(--radius-lg);padding:24px 26px 26px;box-shadow:0 2px 6px rgba(14,19,36,.04),0 16px 40px rgba(14,19,36,.07);display:flex;flex-direction:column;gap:12px}
.ai-path h3{font-size:18px;font-weight:700}
.ai-path p{font-size:15px;line-height:1.65;color:var(--ink-700);text-wrap:pretty}
/* index */
.ai-index-list{list-style:none;margin:32px 0 0;padding:0;columns:4 200px;column-gap:32px}
.ai-index-list li{break-inside:avoid;font-size:14px;line-height:1.5;color:var(--ink-500);padding:4px 0}
.ai-index-list a{font-weight:500}
.ai-ix-n{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--ink-100);font-size:11px;font-weight:700;color:var(--ink-700);margin-left:4px}
.ai-ix-alias{color:var(--ink-700)}

.ai-author{grid-template-columns:auto 1fr;gap:40px}.ai-au-who{display:flex;align-items:center;gap:20px}.ai-au-who img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}.ai-au-who>div{display:flex;flex-direction:column;gap:4px}.ai-au-eb{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}.ai-au-who strong{font-family:var(--font-display);font-size:22px;color:var(--ink-900)}.ai-au-role{font-size:15px;color:var(--ink-500)}.ai-au-cta{display:flex;align-items:center;justify-content:flex-end;gap:28px;flex-wrap:wrap;padding-left:40px;border-left:1px solid var(--ink-100)}.ai-au-cta h3{margin-bottom:6px}
@media (max-width:900px){.ai-author{grid-template-columns:1fr}.ai-au-cta{padding-left:0;border-left:0;justify-content:flex-start}}