/* Case-pagina, bouwt voort op machinekamer.css + site.css-tokens */
.case-eyebrow {
  font-family: var(--font-mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--koper);
  margin-bottom: 16px; max-width: none;
}

.case-stats-sectie { background: var(--wit); padding: 0 0 clamp(20px, 3vw, 40px); }
.case-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.case-stat {
  padding: 20px 18px;
  border: 1px solid var(--haarlijn);
  border-radius: 12px;
}
.case-cijfer {
  display: block;
  font-family: var(--font-kop); font-weight: 800;
  font-size: clamp(24px, 3vw, 38px);
  color: var(--navy);
  line-height: 1;
}
.case-stat > span:last-child { display: block; font-size: 12.5px; color: var(--tekst-muted); margin-top: 8px; }

.case-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  margin-top: clamp(20px, 3vw, 32px);
}
.case-split .mk-intro { margin-top: 0; }
.case-pijn { list-style: none; padding: 0; margin: 0; }
.case-pijn li {
  position: relative;
  padding: 12px 0 12px 26px;
  border-top: 1px solid #DDE4EE;
  font-size: 15px; color: var(--inkt);
}
.case-pijn li:last-child { border-bottom: 1px solid #DDE4EE; }
.case-pijn li::before {
  content: "";
  position: absolute; left: 2px; top: 17px;
  width: 11px; height: 11px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%238494AB' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}

.case-lagen {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 3vw, 32px);
  margin-top: clamp(28px, 4vw, 46px);
}
.case-laag { border-top: 2px solid var(--koper); padding-top: 18px; }
.case-laag-nr { font-family: var(--font-mono); font-size: 12px; color: var(--label); }
.case-laag h3 { font-family: var(--font-kop); font-weight: 600; font-size: clamp(19px, 2.2vw, 23px); color: var(--navy); margin-top: 8px; }
.case-laag p { font-size: 15px; color: var(--tekst-muted); margin-top: 10px; max-width: none; }

.case-motor {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: 20px;
  border-top: 1px solid var(--mk-rand-donker);
  color: var(--mk-tekst-donker);
  font-size: 14.5px;
  max-width: 78ch;
}
.mono-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--koper-hover);
  margin-right: 10px;
}

.case-slot { text-align: center; }
.case-slot .mk-kop, .case-slot .mk-intro { margin-left: auto; margin-right: auto; }
.case-slot .mk-acties { justify-content: center; }

@media (max-width: 720px) {
  .case-split { grid-template-columns: 1fr; }
  .case-lagen { grid-template-columns: 1fr; }
}

/* Live-demo blok (RA-case): tekst + knop naast een gekaderde chat-preview */
.case-demo{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.75rem;
  align-items:center;
  margin-top:1.5rem;
}
.case-demo-tekst .mk-intro{margin-top:0;}
.case-demo-frame{margin:0;max-width:none;}
@media (max-width:760px){
  .case-demo{grid-template-columns:1fr;gap:1.75rem;}
}

/* Echte-platform-screenshot in de case */
.case-shot{margin:2.25rem 0 0;}
.case-shot img{
  width:100%;height:auto;display:block;
  border-radius:14px;
  border:1px solid rgba(11,21,38,.12);
  box-shadow:0 30px 60px -22px rgba(11,21,38,.40);
}
.case-shot figcaption{
  margin-top:1rem;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:.82rem;line-height:1.6;letter-spacing:.01em;
  color:#5a6472;max-width:60ch;
}