/* Shared article styles (A.R.I.E.S article layout) */
.zigzag-img { transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out; cursor: zoom-in; }
.zigzag-img:hover { transform: scale(1.05); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25) !important; }
.zigzag-img.zoom-soft:hover { transform: scale(1.015); }
pre { background-color: #1e1e1e; color: #d4d4d4; padding: 1rem; border-radius: 8px; font-size: 0.875rem; white-space: pre-wrap; word-break: break-word; }
.max-w-75 { max-width: 75%; }
@media (max-width: 767px) { .max-w-75 { max-width: 100%; } }

/* step flow */
.flow { display: grid; gap: .9rem; }
.flow-3 { grid-template-columns: repeat(3, 1fr); } .flow-4 { grid-template-columns: repeat(4, 1fr); }
.flow-5 { grid-template-columns: repeat(5, 1fr); } .flow-6 { grid-template-columns: repeat(6, 1fr); }
.flow .step { position: relative; background: #fff; border: 1px solid #e9ecef; border-top: 4px solid #ffc107; border-radius: 12px; padding: 1.15rem 1rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.05); }
.flow .step:not(:last-child)::after { content: "\203A"; position: absolute; right: -.7rem; top: 42%; font-size: 1.7rem; color: #ffc107; font-weight: 700; z-index: 2; }
.flow .step i { color: #212529; font-size: 1.35rem; }
.flow .step h6 { font-weight: 700; margin: .6rem 0 .3rem; font-size: 1.05rem; }
.flow .step p { font-size: .9rem; color: #6c757d; margin: 0; line-height: 1.5; }
@media (max-width: 991px) { .flow-4, .flow-5, .flow-6 { grid-template-columns: repeat(2, 1fr); } .flow .step::after { display: none; } }
@media (max-width: 575px) { .flow { grid-template-columns: 1fr !important; } }

/* at-a-glance tiles and tables */
.stat-tile { background: #fff; border: 1px solid #e9ecef; border-radius: 14px; padding: 1.2rem; height: 100%; text-align: center; box-shadow: 0 .125rem .25rem rgba(0,0,0,.05); }
.stat-tile b { display: block; font-size: 2rem; color: #212529; line-height: 1.1; }
.stat-tile span { font-size: .78rem; color: #6c757d; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.snap-table td, .snap-table th { font-size: .95rem; padding: .7rem .9rem; vertical-align: top; }
.snap-table tbody th { width: 28%; color: #495057; background: #f8f9fa; }
.snap-table thead th { background: #f8f9fa; color: #495057; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }