/* Kennisbank styles. Generated by .claude/skills/kennisbank/scripts/extract_css.py; edit the design, then regenerate. */

/* ==========================================================================
   Kennisbank: overzicht (/kennisbank/)
   Taken over from the approved design in _drafts/kennisbank/kennisbank.html;
   scoped to .kb-ov on <main>.
   ========================================================================== */
.kb-ov { font-size: 16px; }
.kb-ov h1, .kb-ov h2, .kb-ov h3 { font-family: var(--font-heading); font-weight: 600; line-height: inherit; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.kb-ov p { margin: 0; }
.kb-ov a { color: inherit; text-decoration: none; }
.kb-ov button { font: inherit; color: inherit; }
.kb-ov .kb-empty { margin-top: 24px; color: var(--color-muted); }
.kb-ov .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.kb-ov .section { padding-block: 52px; }
@media (min-width: 768px) {
  .kb-ov .section { padding-block: 72px; }
}
.kb-ov .bg-surface { background: var(--color-surface); }
.kb-ov .bg-white { background: var(--color-bg); }
.kb-ov .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.kb-ov .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
  .kb-ov .h2 { font-size: 2.25rem; }
}
.kb-ov .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.kb-ov .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.kb-ov .hero { position: relative; overflow: hidden; background: var(--color-bg); }
.kb-ov .hero h1 { font-size: 2.5rem; line-height: 1.1; max-width: 36rem; }
@media (min-width: 768px) {
  .kb-ov .hero h1 { font-size: 3.75rem; }
}
.kb-ov .hero h1 span { color: var(--color-brand); }
.kb-ov .hero p { margin-top: 16px; max-width: 32rem; font-size: 1.125rem; }
.kb-ov .kb-hero { padding-block:64px 56px; }
.kb-ov .kb-hero-grid { display:grid; gap:36px; }
@media (min-width:960px) {
  .kb-ov .kb-hero-grid { grid-template-columns:1.1fr .9fr; align-items:center; gap:64px; }
}
.kb-ov .kb-search { margin-top:28px; display:flex; align-items:center; gap:12px; max-width:34rem; background:#fff; border:1.5px solid var(--color-brand-45); border-radius:0; padding:0 0 0 18px; overflow:hidden; }
.kb-ov .kb-search .ib { width:52px; height:52px; background:var(--color-brand); display:flex; align-items:center; justify-content:center; flex:none; }
.kb-ov .kb-search .ib:hover { background:var(--color-brand-dark); }
.kb-ov .kb-search .ib svg { width:20px; height:20px; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.kb-ov .kb-search input { flex:1; border:0; outline:0; font:inherit; font-size:1rem; color:var(--color-ink); background:transparent; min-width:0; }
.kb-ov .kb-aud { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center; }
.kb-ov .kb-aud span.l { color:var(--color-muted); font-size:.92rem; margin-right:4px; }
.kb-ov .chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--color-brand-45); background:#fff; font-weight:600; font-size:.88rem; color:var(--color-ink); }
.kb-ov .chip.on { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.kb-ov .chip img { width:14px; height:14px; }
.kb-ov .kb-illu { display:block; width:100%; max-width:420px; margin:0 auto; }
.kb-ov .theme { background: color-mix(in oklab, var(--color-brand) 24%, white); border:0; border-radius:20px; padding:24px 26px; display:grid; grid-template-columns:28px 1fr; gap:18px; align-items:start; color:inherit; }
.kb-ov .theme svg { width:28px; height:28px; fill:none; stroke:var(--color-brand-dark); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; margin-top:2px; }
.kb-ov .theme b { font-family:var(--font-heading); font-weight:600; font-size:1.05rem; display:block; }
.kb-ov .theme p { margin-top:4px; font-size:.9rem; }
.kb-ov .sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 32px; }
.kb-ov .art { display:flex; flex-direction:column; padding:28px; color:inherit; }
.kb-ov .art h3 { font-family:var(--font-heading); font-weight:600; font-size:1.15rem; line-height:1.3; margin-top:14px; }
.kb-ov .art p { margin-top:8px; font-size:.92rem; color:var(--color-muted); }
.kb-ov .bg-white .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ov .bg-surface .art { background:#fff; border:0; }
.kb-ov .filters { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.kb-ov .kk { font-family:var(--font-heading); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand-dark); }
.kb-ov .kk span { color:var(--color-muted); }
.kb-ov .kk span::before { content:"\00b7"; margin:0 8px; color:var(--color-muted); }
.kb-ov .art .ft { margin-top:auto; padding-top:16px; border-top:1px solid var(--color-brand-45); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.82rem; color:var(--color-muted); }
.kb-ov .art .ft b { font-weight:600; color:var(--color-ink); }
.kb-ov .art .ft .arrow { width:16px; height:16px; fill:none; stroke:var(--color-brand-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ov .art .ft .kk { color:var(--color-brand-dark); }
.kb-ov .art .ft { margin-top:22px; }
.kb-ov .art { display:flex; flex-direction:column; }
.kb-ov .art .grow { flex:1; }
.kb-ov .art .tico { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kb-ov .art .tico svg { width:20px; height:20px; fill:none; stroke:var(--color-brand-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ov .sl-btn { width:44px; height:44px; border:1.5px solid var(--color-brand-dark); background:#fff; color:var(--color-brand-dark); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.kb-ov .sl-btn svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ov .sl-btn:hover { background:var(--color-brand-dark); color:#fff; }
.kb-ov .sl-btn[disabled] { opacity:.35; cursor:default; }
.kb-ov .sl-btn[disabled]:hover { background:#fff; color:var(--color-brand-dark); }
.kb-ov .sl-track { margin-top:36px; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px) / 3); gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.kb-ov .sl-track::-webkit-scrollbar { display:none; }
.kb-ov .sl-track > * { scroll-snap-align:start; }
@media (max-width:900px) {
  .kb-ov .sl-track { grid-auto-columns:80%; }
}
.kb-ov .sl-dots { display:flex; justify-content:center; gap:8px; margin-top:24px; }
.kb-ov .sl-dots span { cursor:pointer; width:8px; height:8px; border-radius:999px; background:var(--color-brand-45); }
.kb-ov .sl-dots span.on { background:var(--color-brand); width:24px; border-radius:4px; }
.kb-ov .theme { min-height:100%; }
.kb-ov .sl-row { display:grid; grid-template-columns:1fr 44px; gap:20px; align-items:center; margin-top:36px; }
.kb-ov .sl-row .sl-track { margin-top:0; }
.kb-ov .sl-btn.bare { border:0; background:transparent; color:var(--color-brand-dark); }
.kb-ov .sl-btn.bare:hover { background:transparent; color:var(--color-brand); }
.kb-ov .sl-btn.bare svg { width:28px; height:28px; stroke-width:2.4; }
.kb-ov .sl-row .sl-btn.l { display:none; }
.kb-ov .sl-row.scrolled .sl-btn.l { display:flex; }
.kb-ov .sl-row.two-when { grid-template-columns:1fr 44px; position:relative; }
.kb-ov .sl-row.two-when .sl-btn.l { display:none; position:absolute; left:-52px; top:50%; transform:translateY(-50%); }
.kb-ov .sl-row.two-when.scrolled .sl-btn.l { display:flex; }
@media (max-width:1100px) {
  .kb-ov .sl-row.two-when .sl-btn.l { display:none !important; }
}
.kb-ov .bg-white .theme { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ov .bg-white .chip.on { background:var(--color-brand); }
.kb-ov .chip { cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.kb-ov .chip:hover { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.kb-ov .bg-white .sl-row .sl-track { grid-auto-columns:calc((100% - 40px) / 3); gap:20px; grid-template-rows:1fr 1fr; grid-auto-flow:column; }
@media (max-width:900px) {
  /* Phones and tablets: one article per view (80%), like the other sliders. The rule above is more
     specific than the general 80% rule, so without this the articles stayed a third wide on phones. */
  .kb-ov .bg-white .sl-row .sl-track { grid-auto-columns:80%; grid-template-rows:auto; }
}
.kb-ov .bg-white .sl-track .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); height:100%; }
.kb-ov .theme > div { display:flex; flex-direction:column; height:100%; }
.kb-ov .sl-track .theme { height:100%; }
.kb-ov .sl-track.th4 .theme { display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:28px 20px; min-height:0; }
.kb-ov .sl-track.th4 .theme svg { margin-top:0; flex:none; }
.kb-ov .sl-track.th4 .theme b { line-height:1.3; }
.kb-ov .sl-track.th4 .theme .nb { white-space:nowrap; }
@media (min-width:901px) {
  .kb-ov .sl-row .sl-track.th4 { grid-auto-columns:calc((100% - 48px) / 4); }
}
@media (max-width:900px) {
  .kb-ov .sl-row .sl-track.th4 { grid-auto-columns:calc((100% - 16px) / 2); }
}
.kb-ov .sl-row .sl-track.th4 { padding:6px 12px 28px; margin-inline:-12px; scroll-padding-inline:12px; }
.kb-ov .sl-row:has(.th4) + .sl-dots { margin-top:4px; }
.kb-ov .sl-track.th4 .theme { background:#fff; border:0; box-shadow:0 1px 3px rgba(0,148,206,.06), 0 10px 22px -10px rgba(0,148,206,.24); transition:box-shadow .15s, transform .15s; }
.kb-ov .sl-track.th4 .theme:hover, .kb-ov .sl-track.th4 .theme:focus-visible { box-shadow:0 0 0 1.5px var(--color-brand-45), 0 14px 24px -10px rgba(0,148,206,.22); transform:translateY(-3px); outline:none; }
@media (prefers-reduced-motion: reduce) {
  .kb-ov .sl-track.th4 .theme { transition:none; }
  .kb-ov .sl-track.th4 .theme:hover { transform:none; }
}
.kb-ov .section a.card.art { transition:border-color .15s, box-shadow .15s, transform .15s; }
.kb-ov .section a.card.art:hover, .kb-ov .section a.card.art:focus-visible { border-color:var(--color-brand); transform:translateY(-3px); box-shadow:0 14px 24px -10px rgba(0,148,206,.30); outline:none; }
@media (prefers-reduced-motion: reduce) {
  .kb-ov .section a.card.art { transition:none; }
  .kb-ov .section a.card.art:hover { transform:none; }
}
.kb-ov .bg-white .sl-row .sl-track:not(.th4) { padding:6px 12px 24px; margin-inline:-12px; scroll-padding-inline:12px; }
.kb-ov .kb-aud .chip { border-radius:8px; background:var(--color-brand-10); border-color:var(--color-brand-10); color:var(--color-ink); }
.kb-ov .kb-aud .chip:hover, .kb-ov .kb-aud .chip:focus-visible { background:var(--color-brand-10); border-color:var(--color-brand); color:var(--color-brand-dark); outline:none; }
.kb-ov .kb-aud .chip .ci { width:16px; height:16px; flex:none; fill:none; stroke:var(--color-brand-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ov .section .filters { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--color-brand-10); border-radius:10px; }
.kb-ov .section .filters .chip { border:0; border-radius:8px; background:transparent; padding:9px 16px; color:var(--color-ink); transition:color .15s, background .15s, box-shadow .15s; }
.kb-ov .section .filters .chip:hover, .kb-ov .section .filters .chip:focus-visible { background:transparent; color:var(--color-brand-dark); outline:none; }
.kb-ov .section .filters .chip.on, .kb-ov .section .filters .chip.on:hover { background:#fff; color:var(--color-ink); box-shadow:0 2px 8px rgba(0,148,206,.18); }
@media (max-width:640px) {
  .kb-ov .section .filters { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
  .kb-ov .section .filters::-webkit-scrollbar { display:none; }
  .kb-ov .section .filters .chip { white-space:nowrap; flex:none; }
}

/* ==========================================================================
   Kennisbank: themapagina (/kennisbank/<thema>/)
   Taken over from the approved design in _drafts/kennisbank/kennisbank-thema-wet-dba.html;
   scoped to .kb-th on <main>.
   ========================================================================== */
.kb-th { font-size: 16px; }
.kb-th h1, .kb-th h2, .kb-th h3 { font-family: var(--font-heading); font-weight: 600; line-height: inherit; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.kb-th p { margin: 0; }
.kb-th a { color: inherit; text-decoration: none; }
.kb-th button { font: inherit; color: inherit; }
.kb-th .kb-empty { margin-top: 24px; color: var(--color-muted); }
.kb-th .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.kb-th .section { padding-block: 52px; }
@media (min-width: 768px) {
  .kb-th .section { padding-block: 72px; }
}
.kb-th .bg-surface { background: var(--color-surface); }
.kb-th .bg-white { background: var(--color-bg); }
.kb-th .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.kb-th .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
  .kb-th .h2 { font-size: 2.25rem; }
}
.kb-th .muted { color: var(--color-muted); }
.kb-th .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.kb-th .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.kb-th .kcard { background: color-mix(in oklab, var(--color-brand) 24%, white); border:0; padding:28px; display:flex; flex-direction:column; }
.kb-th .kcard b { font-family:var(--font-heading); font-weight:600; font-size:1.1rem; }
.kb-th .kcard p { margin-top:8px; font-size:.9rem; }
.kb-th .chip { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--color-brand-45); background:#fff; font-weight:600; font-size:.88rem; color:var(--color-ink); }
.kb-th .chip.on { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.kb-th .chip img { width:14px; height:14px; }
.kb-th .sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 32px; }
.kb-th .art { display:flex; flex-direction:column; padding:28px; color:inherit; }
.kb-th .art h3 { font-family:var(--font-heading); font-weight:600; font-size:1.15rem; line-height:1.3; margin-top:14px; }
.kb-th .art p { margin-top:8px; font-size:.92rem; color:var(--color-muted); }
.kb-th .bg-white .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-th .bg-surface .art { background:#fff; border:0; }
.kb-th .filters { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.kb-th .kk { font-family:var(--font-heading); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand-dark); }
.kb-th .kk span { color:var(--color-muted); }
.kb-th .kk span::before { content:"\00b7"; margin:0 8px; color:var(--color-muted); }
.kb-th .art .ft { margin-top:auto; padding-top:16px; border-top:1px solid var(--color-brand-45); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.82rem; color:var(--color-muted); }
.kb-th .art .ft b { font-weight:600; color:var(--color-ink); }
.kb-th .art .ft .arrow { width:16px; height:16px; fill:none; stroke:var(--color-brand-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kb-th .art .ft .kk { color:var(--color-brand-dark); }
.kb-th .art .ft { margin-top:22px; }
.kb-th .art { display:flex; flex-direction:column; }
.kb-th .art .grow { flex:1; }
.kb-th .art .tico { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kb-th .art .tico svg { width:20px; height:20px; fill:none; stroke:var(--color-brand-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kb-th .bg-white .chip.on { background:var(--color-brand); }
.kb-th .chip { cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.kb-th .chip:hover { background:var(--color-brand); border-color:var(--color-brand); color:#fff; }
.kb-th .th-arts { display:grid; gap:20px; margin-top:28px; }
@media (min-width:640px) {
  .kb-th .th-arts { grid-template-columns:1fr 1fr; }
}
@media (min-width:1000px) {
  .kb-th .th-arts { grid-template-columns:repeat(3,1fr); }
}
.kb-th .th-arts .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-th .thh { padding:56px 0 56px; }
.kb-th .thh .crumb { font-family:var(--font-heading); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted); display:flex; align-items:center; gap:8px; }
.kb-th .thh .crumb a { color:var(--color-muted); }
.kb-th .thh .crumb svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; }
.kb-th .thh .crumb span { color:var(--color-brand-dark); }
.kb-th .thh .g { display:grid; gap:36px; }
@media (min-width:960px) {
  .kb-th .thh .g { grid-template-columns:1.1fr .9fr; align-items:center; gap:64px; }
}
.kb-th .thh h1 { font-family:var(--font-heading); font-weight:700; font-size:clamp(2.2rem,4.4vw,3.2rem); line-height:1.08; letter-spacing:-.01em; margin-top:18px; }
.kb-th .thh h1 span { color:var(--color-brand); }
.kb-th .thh .lead { margin-top:20px; font-size:1.1rem; line-height:1.65; color:var(--color-muted); max-width:36rem; }
.kb-th .facts { display:grid; gap:20px; margin-top:36px; }
@media (min-width:900px) {
  .kb-th .facts { grid-template-columns:repeat(3,1fr); }
}
.kb-th .facts .card { padding:28px; }
.kb-th .facts .ico { display:flex; margin-bottom:14px; }
.kb-th .facts .ico svg { width:26px; height:26px; fill:none; stroke:var(--color-brand-dark); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.kb-th .facts b { font-family:var(--font-heading); font-weight:600; font-size:1.1rem; display:block; }
.kb-th .facts p { margin-top:8px; font-size:.95rem; }
.kb-th .th-arts { margin-top:28px; }
.kb-th .bg-surface .th-arts .art { background: color-mix(in oklab, var(--color-brand) 24%, white); border:0; }
.kb-th .bg-surface .th-arts .art .ft { border-top-color:var(--color-brand-45); }
.kb-th .section a.card.art { transition:border-color .15s, box-shadow .15s, transform .15s; }
.kb-th .section a.card.art:hover, .kb-th .section a.card.art:focus-visible { border-color:var(--color-brand); transform:translateY(-3px); box-shadow:0 14px 24px -10px rgba(0,148,206,.30); outline:none; }
@media (prefers-reduced-motion: reduce) {
  .kb-th .section a.card.art { transition:none; }
  .kb-th .section a.card.art:hover { transform:none; }
}
.kb-th .section .filters { display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--color-brand-10); border-radius:10px; }
.kb-th .section .filters .chip { border:0; border-radius:8px; background:transparent; padding:9px 16px; color:var(--color-ink); transition:color .15s, background .15s, box-shadow .15s; }
.kb-th .section .filters .chip:hover, .kb-th .section .filters .chip:focus-visible { background:transparent; color:var(--color-brand-dark); outline:none; }
.kb-th .section .filters .chip.on, .kb-th .section .filters .chip.on:hover { background:#fff; color:var(--color-ink); box-shadow:0 2px 8px rgba(0,148,206,.18); }
@media (max-width:640px) {
  .kb-th .section .filters { display:flex; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; max-width:100%; }
  .kb-th .section .filters::-webkit-scrollbar { display:none; }
  .kb-th .section .filters .chip { white-space:nowrap; flex:none; }
}
.kb-th .facts b { line-height:1.3; }

/* ==========================================================================
   Kennisbank: artikel (/kennisbank/<thema>/<artikel>/)
   Taken over from the approved design in _drafts/kennisbank/kennisbank-artikel.html;
   scoped to .kb-ar on <main>.
   ========================================================================== */
.kb-ar { font-size: 16px; }
.kb-ar h1, .kb-ar h2, .kb-ar h3 { font-family: var(--font-heading); font-weight: 600; line-height: inherit; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
.kb-ar p { margin: 0; }
.kb-ar a { color: inherit; text-decoration: none; }
.kb-ar button { font: inherit; color: inherit; }
.kb-ar .kb-empty { margin-top: 24px; color: var(--color-muted); }
.kb-ar .wrap { margin: 0 auto; padding-inline: 20px; max-width: 1200px; }
.kb-ar .wrap-md { max-width: 1100px; }
.kb-ar .section { padding-block: 52px; }
@media (min-width: 768px) {
  .kb-ar .section { padding-block: 72px; }
}
.kb-ar .bg-surface { background: var(--color-surface); }
.kb-ar .bg-white { background: var(--color-bg); }
.kb-ar .kicker { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--color-brand); }
.kb-ar .h2 { margin-top: 12px; font-size: 1.875rem; }
@media (min-width: 768px) {
  .kb-ar .h2 { font-size: 2.25rem; }
}
.kb-ar .muted { color: var(--color-muted); }
.kb-ar .btn { display: inline-flex; border-radius: 12px; align-items: center; gap: 8px; padding: 12px 24px; font-weight: 600; font-size: 0.95rem; font-family: var(--font-body); border: 2px solid transparent; cursor: pointer; transition: background .15s, color .15s; }
.kb-ar .btn-brand { background: var(--color-brand); color: var(--color-brand-fg); border-color: var(--color-brand); }
.kb-ar .btn-brand:hover { background: var(--color-brand-dark); border-color: var(--color-brand-dark); }
.kb-ar .btn-outline { border-color: var(--color-ink); color: var(--color-ink); background: transparent; }
.kb-ar .btn-outline:hover { background: var(--color-ink); color: #fff; }
.kb-ar .btn:focus-visible, .kb-ar a:focus-visible, .kb-ar summary:focus-visible { outline: 3px solid var(--color-brand-45); outline-offset: 2px; }
.kb-ar .arrow { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.4; fill: none; }
.kb-ar .card { border: 1.5px solid var(--color-brand-45); border-radius: 24px; background: var(--color-brand-5); }
.kb-ar .klink { display:inline-flex; align-items:center; gap:8px; margin-top:32px; font-weight:600; color:var(--color-brand-dark); }
.kb-ar .klink .arrow { width:16px; height:16px; }
.kb-ar .btns { display:flex; flex-wrap:wrap; gap:14px; margin-top:28px; align-items:center; }
.kb-ar .sec-head { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:16px 32px; }
.kb-ar .sec-head .klink { margin-top:0; }
.kb-ar .art { display:flex; flex-direction:column; padding:28px; color:inherit; }
.kb-ar .art h3 { font-family:var(--font-heading); font-weight:600; font-size:1.15rem; line-height:1.3; margin-top:14px; }
.kb-ar .art p { margin-top:8px; font-size:.92rem; color:var(--color-muted); }
.kb-ar .bg-white .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ar .bg-surface .art { background:#fff; border:0; }
.kb-ar .arts { display:grid; gap:20px; margin-top:28px; }
@media (min-width:640px) {
  .kb-ar .arts { grid-template-columns:1fr 1fr; }
}
@media (min-width:1000px) {
  .kb-ar .arts { grid-template-columns:repeat(3,1fr); }
}
.kb-ar .prose { max-width:44rem; }
.kb-ar .prose h2 { font-family:var(--font-heading); font-weight:600; font-size:1.5rem; margin-top:40px; }
.kb-ar .prose h2:first-child { margin-top:0; }
.kb-ar .prose p { margin-top:14px; font-size:1.02rem; line-height:1.7; }
.kb-ar .prose a { color:var(--color-brand-dark); font-weight:600; }
.kb-ar .prose ul.g { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:10px; }
.kb-ar .prose ul.g li { display:flex; gap:12px; align-items:flex-start; font-size:1rem; }
.kb-ar .prose ul.g li img { width:16px; height:16px; margin-top:6px; flex:none; }
.kb-ar .kk { font-family:var(--font-heading); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand-dark); }
.kb-ar .kk span { color:var(--color-muted); }
.kb-ar .kk span::before { content:"\00b7"; margin:0 8px; color:var(--color-muted); }
.kb-ar .arts.tint .art { background: color-mix(in oklab, var(--color-brand) 24%, white); border:0; }
.kb-ar .bg-white .arts.light .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ar .arts.tint .art h3 { margin-top:12px; }
.kb-ar .arts.tint .art { padding:26px 28px; }
.kb-ar .art .ft { margin-top:auto; padding-top:16px; border-top:1px solid var(--color-brand-45); display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:.82rem; color:var(--color-muted); }
.kb-ar .art .ft b { font-weight:600; color:var(--color-ink); }
.kb-ar .art .ft .arrow { width:16px; height:16px; fill:none; stroke:var(--color-brand-dark); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ar .art .ft .kk { color:var(--color-brand-dark); }
.kb-ar .art .ft { margin-top:22px; }
.kb-ar .art { display:flex; flex-direction:column; }
.kb-ar .art .grow { flex:1; }
.kb-ar .art .tico { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.kb-ar .art .tico svg { width:20px; height:20px; fill:none; stroke:var(--color-brand-dark); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.kb-ar .bg-white .arts.tint .art { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ar .ar-hero { padding:56px 0 24px; }
.kb-ar .ar-hero .crumb { font-family:var(--font-heading); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kb-ar .ar-hero .crumb a { color:var(--color-muted); }
.kb-ar .ar-hero .crumb svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.4; }
.kb-ar .ar-hero .crumb span { color:var(--color-brand-dark); }
.kb-ar .ar-hero h1 { font-family:var(--font-heading); font-weight:700; font-size:clamp(2rem,4vw,2.8rem); line-height:1.12; letter-spacing:-.01em; margin-top:22px; }
.kb-ar .ar-hero .lead { margin-top:20px; font-size:1.15rem; line-height:1.6; color:var(--color-muted); }
.kb-ar .ar-body { padding:24px 0 64px; }
.kb-ar .ar-body .prose { max-width:none; }
.kb-ar .prose h2 { font-family:var(--font-heading); font-weight:600; font-size:1.45rem; margin-top:44px; }
.kb-ar .prose p { margin-top:14px; font-size:1.05rem; line-height:1.75; }
.kb-ar .prose a { color:var(--color-brand-dark); font-weight:600; }
.kb-ar .kort { margin-top:32px; background: color-mix(in oklab, var(--color-brand) 24%, white); border-radius:20px; padding:26px 30px; }
.kb-ar .kort b { font-family:var(--font-heading); font-weight:600; font-size:1rem; display:block; margin-bottom:12px; }
.kb-ar .kort ul { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.kb-ar .kort li { display:flex; gap:12px; align-items:flex-start; font-size:1rem; line-height:1.55; }
.kb-ar .kort li img { width:16px; height:16px; margin-top:5px; flex:none; }
.kb-ar .prose ul.g { list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px; }
.kb-ar .prose ul.g li { display:flex; gap:12px; align-items:flex-start; font-size:1.02rem; line-height:1.6; }
.kb-ar .prose ul.g li img { width:16px; height:16px; margin-top:6px; flex:none; }
.kb-ar .bron { margin-top:48px; padding-top:22px; border-top:1px solid var(--color-brand-20); font-size:.88rem; color:var(--color-muted); line-height:1.7; }
.kb-ar .bron b { display:block; color:var(--color-ink); font-weight:600; font-family:var(--font-heading); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.kb-ar .ar-cta { padding:0 0 72px; }
.kb-ar .ar-cta .card { padding:32px 36px; display:grid; gap:20px; align-items:center; }
@media (min-width:800px) {
  .kb-ar .ar-cta .card { grid-template-columns:1fr auto; gap:40px; }
}
.kb-ar .ar-cta b { font-family:var(--font-heading); font-weight:600; font-size:1.2rem; display:block; }
.kb-ar .ar-cta p { margin-top:6px; }
.kb-ar .ar-grid { display:grid; gap:40px; }
@media (min-width:1000px) {
  .kb-ar .ar-grid { grid-template-columns:220px minmax(0,44rem); gap:64px; align-items:start; }
  .kb-ar .toc2 { position:sticky; top:96px; }
}
.kb-ar .toc2 { font-size:.9rem; }
.kb-ar .toc2 a { display:block; padding:8px 0; color:var(--color-muted); border-left:2px solid var(--color-brand-20); padding-left:14px; }
.kb-ar .toc2 a.on { color:var(--color-ink); font-weight:600; border-color:var(--color-brand); }
.kb-ar .tk { display:block; font-family:var(--font-heading); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand-dark); margin-bottom:12px; }
.kb-ar .lo3 { margin-top:18px; padding-left:18px; border-left:3px solid var(--color-border); font-size:1.02rem; line-height:1.7; color:var(--color-muted); }
.kb-ar .lo3 b { color:var(--color-ink); font-weight:600; }
.kb-ar .m3 { margin-top:26px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-top:18px; border-top:1px solid var(--color-brand-20); font-size:.88rem; color:var(--color-muted); }
.kb-ar .m3 .l { display:flex; align-items:center; gap:10px; }
.kb-ar .m3 .l img { width:22px; height:22px; }
.kb-ar .m3 .l b { color:var(--color-ink); font-weight:600; }
.kb-ar .m3 .r { display:flex; gap:18px; }
.kb-ar .m3 .aud { color:var(--color-brand-dark); font-weight:600; }
.kb-ar .tb { border-radius:20px; padding:22px 24px; }
.kb-ar .tb .tk { display:block; font-family:var(--font-heading); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-brand-dark); margin-bottom:10px; }
.kb-ar .tb a { display:block; color:var(--color-muted); font-size:.9rem; border:0; padding:7px 0; }
.kb-ar .tb a.on { color:var(--color-ink); font-weight:600; }
.kb-ar .tb.light { background:var(--color-brand-5); border:1.5px solid var(--color-brand-45); }
.kb-ar .tb.tint { background: color-mix(in oklab, var(--color-brand) 24%, white); }
.kb-ar .tb.dot a { position:relative; padding-left:16px; }
.kb-ar .tb.dot a.on::before { content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:999px; background:var(--color-brand); }
.kb-ar .section a.card.art { transition:border-color .15s, box-shadow .15s, transform .15s; }
.kb-ar .section a.card.art:hover, .kb-ar .section a.card.art:focus-visible { border-color:var(--color-brand); transform:translateY(-3px); box-shadow:0 14px 24px -10px rgba(0,148,206,.30); outline:none; }
@media (prefers-reduced-motion: reduce) {
  .kb-ar .section a.card.art { transition:none; }
  .kb-ar .section a.card.art:hover { transform:none; }
}
.kb-ar .arts.tint a.card.art:hover, .kb-ar .arts.tint a.card.art:focus-visible { box-shadow:0 0 0 1.5px var(--color-brand), 0 14px 24px -10px rgba(0,148,206,.30); }