.engagement-grid .engagement-card {
  background: #f5f7ff;
  border: 1px solid #dbe1ef;
  border-radius: 24px;
  padding: 0;
}
.engagement-card summary {
  display: grid;
  gap: 10px;
  padding: 20px;
  cursor: pointer;
  list-style: none;
  border-radius: 24px;
}
.engagement-card summary::-webkit-details-marker { display: none; }
.engagement-card summary:focus-visible { outline: 3px solid #0022cb; outline-offset: 3px; }
.engagement-card summary p, .engagement-detail p { margin: 0; }
.engagement-visual {
  width: 100%;
  height: 128px;
  color: #0022cb;
  background: #e8edff;
  border-radius: 16px;
}
.engagement-accent { transition: transform 220ms ease; }
.engagement-card summary:focus-visible .engagement-accent,
.engagement-card details[open] .engagement-accent { transform: translate(4px, -4px); }
@media (hover: hover) {
  .engagement-card summary:hover .engagement-accent { transform: translate(4px, -4px); }
}
.engagement-card .engagement-label { color: #0022cb; font-weight: 600; }
.engagement-label::after { content: " +"; }
.engagement-card details[open] .engagement-label::after { content: " −"; }
.engagement-detail { padding: 0 20px 20px; animation: engagement-reveal 220ms ease-out; }
@keyframes engagement-reveal { from { opacity: 0; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .engagement-accent { transition: none; }
  .engagement-detail { animation: none; }
}
html:has(#motion-toggle[aria-pressed="true"]) .engagement-accent { transition: none; }
html:has(#motion-toggle[aria-pressed="true"]) .engagement-detail { animation: none; }