/* Responsive, accessible architecture figures. SVG assets are hand-authored. */
.system-diagram-section { background: #1c2428; color: #e2e5e3; scroll-margin-top: 80px; padding: 48px 0; }
.system-diagram-section h2 { color: #faf7ef; font: 500 30px/1.2 var(--sans); }
.system-diagram-section .eyebrow { color: #dcae8d; }
.diagram-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 22px; }
.diagram-heading a { color: #f0c5a5; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.diagram-scroll { overflow-x: auto; border: 1px solid #526367; border-radius: 10px; }
.diagram-scroll:focus-visible { outline: 2px solid #f0c5a5; outline-offset: 4px; }
.diagram-scroll img { display: block; width: 100%; min-width: 780px; height: auto; }
.diagram-caption { max-width: 850px; margin-top: 20px; color: #c8d3d5; font-size: 14px; line-height: 1.7; }
.diagram-legend { display: flex; flex-wrap: wrap; gap: 12px 30px; list-style: none; font-size: 12px; color: #c8d3d5; margin-top: 18px; }
.diagram-legend li { display: flex; align-items: center; gap: 10px; }
.diagram-legend i { display: inline-block; width: 32px; border-top: 2px solid #b7d4d1; }
.diagram-legend .trial { border-top: 2px dashed #e0b793; }
.diagram-legend .media-line { border-color: #e0b793; }
.diagram-hint { display: none; font-size: 12px; margin-bottom: 10px; color: #c8d3d5; }
.frontier-hero-grid { display: block; }
.frontier-hero h1 { max-width: 900px; }
.frontier-deck { max-width: 740px; }
@media (max-width: 780px) { .diagram-heading { display: block; } .diagram-heading a { display: inline-block; margin-top: 16px; } .diagram-hint { display: block; } }