.escalation-feature {
  margin-block: 34px;
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
}
.ef-heading > .eyebrow { color: var(--yellow); }
.ef-heading h2 {
  max-width: 22ch;
  margin-block: 10px 15px;
  font-family: var(--font-display);
  font-size: clamp(31px, 4vw, 48px);
  font-weight: 400;
  line-height: 1.12;
  text-transform: uppercase;
  text-wrap: balance;
}
.ef-heading > p:last-child { max-width: 65ch; }
.ef-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin: 25px 0 0;
  padding: 0;
  list-style: none;
}
.ef-steps > li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  padding-block: 19px;
  border-top: 1px solid #697061;
}
.ef-step-number {
  margin-top: 3px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
}
.ef-date { font-size: 13px; font-weight: 600; }
.ef-date:hover, .ef-more:hover { color: var(--yellow); }
.ef-steps h3 {
  margin-block: 7px 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.ef-steps p { font-size: 15px; line-height: 1.65; }
.ef-bind {
  max-width: 56ch;
  margin-top: 8px;
  padding-top: 22px;
  border-top: 1px solid #697061;
  color: var(--yellow);
  font-family: var(--font-letter);
  font-size: clamp(23px, 2.5vw, 30px);
  line-height: 1.3;
  text-wrap: balance;
}
.ef-more { display: inline-block; margin-top: 18px; font-size: 15px; font-weight: 600; }
.ef-controls { margin-top: 20px; }
.ef-controls .ef-replay { color: var(--paper); border-color: #697061; }
.ef-controls .ef-replay:not(:disabled):hover { color: var(--yellow); border-color: var(--yellow); }
.ef-controls .ex-play-status { color: var(--paper); }
.escalation-feature.ex-replaying [data-ex-step] { animation-name: ef-highlight; }
@keyframes ef-highlight {
  0%,70% { box-shadow: inset 3px 0 0 var(--yellow); background: #30382c; }
  100% { box-shadow: inset 0 0 0 transparent; background: transparent; }
}
html.motion-off .escalation-feature [data-ex-step] { animation: none !important; }
@media(prefers-reduced-motion:reduce) { .escalation-feature [data-ex-step] { animation: none !important; } }
.escalation-feature--compact .ef-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.escalation-feature--compact .ef-steps > li { display: block; }
.escalation-feature--compact .ef-step-number { display: block; margin-bottom: 12px; }
.escalation-feature--compact .ef-bind { max-width: 66ch; font-size: 23px; }
@media (max-width: 760px) {
  .escalation-feature--compact .ef-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
}
@media (max-width: 540px) {
  .escalation-feature { margin-block: 26px; padding: 23px 18px; }
  .ef-steps, .escalation-feature--compact .ef-steps { grid-template-columns: minmax(0, 1fr); }
  .escalation-feature--compact .ef-steps > li { display: grid; }
  .escalation-feature--compact .ef-step-number { margin: 3px 0 0; }
  .ef-heading h2 { font-size: 34px; }
}
@media print {
  .escalation-feature { color: #20251f; background: transparent; border: 1px solid #697061; }
  .ef-heading > .eyebrow, .ef-step-number, .ef-bind { color: #20251f; }
  .ef-steps > li { break-inside: avoid; }
}