/* Worked examples use open rows and literal point units, never decorative cards. */
.example-diagram { margin: 2rem 0; padding-block: 1.5rem; border-block: 2px solid var(--rwe-line-structural, #c4c4c4); font-family: 'IBM Plex Sans', system-ui, sans-serif; }
.example-diagram figcaption { border: 0; padding: 0; display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.example-diagram figcaption strong { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.5rem; }
.example-weight-list, .catalog-body .example-weight-list { padding: 0; margin: 0; list-style: none; }
.example-weight-list li, .catalog-body .example-weight-list li { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) 5rem 1.5rem; align-items: center; gap: .75rem; padding-block: .75rem; border-bottom: 1px solid var(--rwe-line, #d9d9d9); }
.example-weight-label { overflow-wrap: anywhere; }
.example-point-marks { display: flex; flex-wrap: wrap; gap: .25rem; }
.example-point-marks i { display: block; box-sizing: border-box; width: 1rem; height: 1rem; border: 2px solid var(--rwe-teal, #216465); background: var(--rwe-soft-teal, #e5eeea); }
.example-sum { display: flex; gap: 1rem; align-items: center; padding-top: 1.5rem; }
.example-sum > span { flex: 1; display: grid; gap: .25rem; font-size: .875rem; }
.example-sum strong { font-size: 2.5rem; line-height: 1.1; color: var(--rwe-ink, #242424); }
.example-total { border-bottom: 2px solid var(--rwe-teal, #216465); padding-bottom: .5rem; }
.example-limit { margin: 1.5rem 0 0; font-size: .875rem; color: var(--rwe-muted, #606060); }
@media (max-width: 480px) { .example-weight-list li, .catalog-body .example-weight-list li { margin: 0; grid-template-columns: minmax(0, 1fr) 3.25rem 1rem; } .example-sum { gap: .5rem; } .example-sum strong { font-size: 2rem; } }