/* Design-system loop diagram (.dsl-*) — vendored verbatim from petebartsch.com
   case-studies/case-study.css (lines 405-453). Keep in sync with the main site. */
.dsl-stage {
    margin: 40px 0;
    padding: 28px 20px 16px;
    background: #ffffff;
    border: 1px solid #CFE0FF;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 102, 255, 0.07);
    overflow: hidden;
}
.dsl { width: 100%; height: auto; display: block; margin: 0 auto; }
.dsl--radial { max-width: 640px; }
.dsl--stacked { display: none; max-width: 300px; }
@media (max-width: 720px) {
    .dsl-stage { padding: 20px 12px 12px; margin: 32px -8px; }
    .dsl--radial { display: none; }
    .dsl--stacked { display: block; }
}
.dsl text { font-family: var(--font-display, 'Space Mono', monospace); }
.dsl-node circle { fill: #EEF4FF; stroke: #0066FF; stroke-width: 2; }
.dsl-hub { fill: #E3EDFF; stroke: #0066FF; stroke-width: 2.5; }
.dsl-node-title { fill: #1c1b19; font-weight: 700; letter-spacing: 0.5px; }
.dsl-node-sub { fill: #3d4c66; }
.dsl-hub-title { fill: #1c1b19; font-weight: 700; letter-spacing: 0.5px; }
.dsl-hub-kicker { fill: #0066FF; font-weight: 600; letter-spacing: 2px; }
.dsl-hub-sub { fill: #4a5a78; }
.dsl-edge text, .dsl-edge-stacked { fill: #12213f; font-weight: 600; }
/* radial sizes (viewBox 1000, renders ~0.64×) */
.dsl--radial .dsl-node-title { font-size: 19px; }
.dsl--radial .dsl-node-title--sm { font-size: 14px; }
.dsl--radial .dsl-node-sub { font-size: 13px; }
.dsl--radial .dsl-hub-title { font-size: 28px; }
.dsl--radial .dsl-hub-kicker { font-size: 11.5px; }
.dsl--radial .dsl-hub-sub { font-size: 11.5px; }
.dsl--radial .dsl-edge text { font-size: 15px; }
/* stacked sizes (viewBox 320, renders ~1×) */
.dsl--stacked .dsl-node-title { font-size: 13px; }
.dsl--stacked .dsl-node-sub { font-size: 10px; }
.dsl--stacked .dsl-hub-title { font-size: 16px; }
.dsl--stacked .dsl-hub-kicker { font-size: 9px; letter-spacing: 1.5px; }
.dsl--stacked .dsl-hub-sub { font-size: 8px; }
.dsl--stacked .dsl-edge-stacked { font-size: 10px; font-style: italic; }
.dsl-caption {
    font-family: var(--font-body);
    font-size: 12px;
    color: #4a5a78;
    text-align: center;
    margin: 14px 0 0;
    letter-spacing: 0.3px;
}