/* css/example.css — the worked-example page's hero + facts panel.
 *
 * Lifted verbatim from the inline <style> block that lived in example.html until L3, when the
 * strict Content-Security-Policy work moved page styling out of the document. No rule changed;
 * only its address did. */

.ex-hero { background: var(--green-900); color: var(--green-100); padding: var(--s-8) 0; }
.ex-hero h1 { color: #fff; margin-bottom: var(--s-4); }
.ex-hero p { color: var(--green-100); opacity: .92; }
.ex-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--s-8); align-items: center; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; gap: var(--s-6); } }
.ex-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); overflow: hidden; }
.ex-facts li { background: var(--green-900); padding: 14px 20px; display: flex; justify-content: space-between; gap: 16px; font-size: .95rem; }
.ex-facts li span:first-child { color: var(--green-200); opacity: .75; }
.ex-facts li span:last-child { color: #fff; font-weight: 600; text-align: right; }
.ex-note { background: var(--amber-soft); border-bottom: 1px solid var(--rule); padding: 14px 0; }
.ex-note p { margin: 0; font-size: .95rem; color: #6E4A19; text-align: center; }