/* Video case study extension for the shared field-note article pattern. */
.fn-demo{
  background:var(--dark);
  border:1px solid #364132;
  border-radius:6px;
  color:var(--paper);
  overflow:hidden;
  padding:28px;
}
.fn-demo-head{
  align-items:start;
  display:flex;
  gap:24px;
  justify-content:space-between;
}
.fn-demo .fn-label{color:#b8c2af;margin:0 0 8px}
.fn-demo h2{color:var(--paper);margin:0}
.fn-demo-head>span{
  border:1px solid #56634c;
  border-radius:999px;
  color:var(--lime);
  flex:0 0 auto;
  font:500 11px/1 var(--mono);
  letter-spacing:.08em;
  padding:9px 12px;
  text-transform:uppercase;
}
.fn-demo-intro{
  color:#bec5bb;
  font-size:16px;
  line-height:1.65;
  margin:16px 0 22px;
}
.fn-demo figure{margin:0}
.fn-demo video{
  aspect-ratio:16/9;
  background:#0a0f12;
  border:1px solid #56634c;
  display:block;
  height:auto;
  width:100%;
}
.fn-demo figcaption{
  color:#b8c2af;
  font-size:13px;
  line-height:1.55;
  margin-top:12px;
}
.fn-demo-download{
  align-items:center;
  background:var(--orange);
  color:var(--ink)!important;
  display:inline-flex;
  font:600 13px/1.2 Manrope,Arial,sans-serif;
  gap:12px;
  margin-top:20px;
  padding:13px 16px;
  text-decoration:none!important;
}
.fn-demo-download:hover{background:#ff9973!important}

/* Tactical production evidence inside this case study. */
.training-pipeline{
  counter-reset:training-step;
  list-style:none;
  margin:28px 0 34px!important;
  padding:0!important;
}
.training-pipeline li{
  align-items:start;
  border-top:1px solid var(--line);
  counter-increment:training-step;
  display:grid;
  gap:4px 18px;
  grid-template-columns:34px minmax(0,1fr);
  margin:0!important;
  padding:16px 0;
}
.training-pipeline li::before{
  color:var(--brick);
  content:counter(training-step,decimal-leading-zero);
  font:500 12px/1.7 var(--mono);
  grid-row:1/3;
}
.training-pipeline strong{font:600 17px/1.45 Manrope,Arial,sans-serif}
.training-pipeline span{color:#4b554a;font-size:16px;line-height:1.6}
.training-signal{
  background:var(--sage);
  border-left:3px solid var(--orange);
  color:#263028;
  font-size:17px;
  line-height:1.65;
  margin:28px 0;
  padding:20px 22px;
}
.training-code{
  background:var(--dark);
  border-radius:5px;
  color:#e6ecdf;
  font:14px/1.75 var(--mono);
  margin:24px 0 30px;
  overflow:auto;
  padding:22px 24px;
  white-space:pre-wrap;
}
.training-code code{background:transparent;color:inherit;font:inherit;padding:0}
.training-figure-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:30px 0 34px;
}
.training-figure-grid figure,.training-wide{
  background:#e8e9df;
  border:1px solid #cfd6c4;
  margin:0;
  min-width:0;
  overflow:hidden;
}
.training-figure-grid a,.training-wide a{display:block}
.training-figure-grid img,.training-wide img{
  display:block;
  height:auto;
  object-fit:contain;
  width:100%;
}
.training-figure-grid figcaption,.training-wide figcaption{
  border-top:1px solid #cfd6c4;
  color:#566052;
  font:12px/1.55 var(--mono);
  padding:12px 14px;
}
.training-wide{margin:30px 0 34px}
@media(max-width:600px){
  .fn-demo{padding:20px 16px}
  .fn-demo-head{align-items:flex-start;flex-direction:column;gap:12px}
  .training-code{font-size:11.5px;padding:18px 14px}
  .training-figure-grid{gap:8px;margin-inline:-8px}
  .training-figure-grid figcaption{font-size:10px;padding:9px}
}