/* Native HTML figures remain legible without images or colour distinctions. */
.concept-figure { margin: 1.8rem 0; padding: 1.25rem; border: 1px solid currentColor; }
.concept-source, .concept-process { position: relative; max-width: 22rem; margin: 0 auto 2.4rem; border: 1px solid currentColor; padding: .7rem 1rem; text-align: center; }
.concept-source p, .concept-process p { margin: 0; }
.concept-source::after, .concept-process::after { content: "↓"; position: absolute; left: 0; right: 0; bottom: -2rem; text-align: center; }
.concept-figure .concept-outputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0; margin: 0 0 1.4rem; list-style: none; }
.concept-outputs li { margin: 0; padding: .8rem; border: 1px solid currentColor; text-align: center; overflow-wrap: anywhere; }
.concept-figure figcaption { margin-top: 1rem; font-size: .9em; line-height: 1.8; }
@media (max-width: 420px) { .concept-figure { padding: .8rem; } .concept-figure .concept-outputs { grid-template-columns: 1fr; } }