.ag-hero { position: relative; }
.ag-frameworks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ag-frameworks span { padding: 7px 9px; border: 1px solid rgba(92, 225, 228, .28); background: rgba(92, 225, 228, .04); color: #89cfd3; font: 700 9px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .07em; text-transform: uppercase; }
.ag-boundary { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr); gap: 22px; align-items: center; margin-top: 18px; padding: 22px 24px; border: 1px solid var(--sg-line); background: radial-gradient(circle at 82% 50%, rgba(92, 225, 228, .07), transparent 34%), rgba(6, 14, 20, .97); }
.ag-boundary h2 { max-width: 470px; margin: 7px 0 0; color: #dce8ef; font-size: 18px; line-height: 1.4; }
.ag-boundary ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.ag-boundary li { position: relative; min-width: 0; padding: 14px 12px; border: 1px solid #243b49; background: #061018; }
.ag-boundary li::after { position: absolute; top: 50%; right: -8px; z-index: 1; width: 8px; height: 1px; background: var(--sg-aqua); content: ""; opacity: .45; }
.ag-boundary li:last-child::after { display: none; }
.ag-boundary li span, .ag-boundary li strong, .ag-boundary li small { display: block; }
.ag-boundary li span { color: var(--sg-amber); font: 700 9px/1 "SFMono-Regular", Consolas, monospace; }
.ag-boundary li strong { margin: 9px 0 5px; color: #c5d4dc; font-size: 12px; }
.ag-boundary li small { color: #6f8999; font-size: 10px; line-height: 1.4; }
.ag-correlation ol { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ag-correlation li[data-state="gap"] { border-color: rgba(255, 116, 116, .55); background: rgba(255, 116, 116, .055); }
.ag-correlation li[data-state="signal"] { border-color: rgba(244, 173, 72, .5); background: rgba(244, 173, 72, .04); }
.ag-body .pt-event-row[data-kind="signal"] .pt-provider { color: var(--sg-amber); }
.ag-body .pt-event-row[data-kind="high"] { box-shadow: inset 2px 0 0 rgba(255, 116, 116, .7); }

@media (max-width: 1050px) {
  .ag-boundary { grid-template-columns: 1fr; }
  .ag-correlation ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .ag-boundary { padding: 18px 16px; }
  .ag-boundary ol, .ag-correlation ol { grid-template-columns: 1fr; }
  .ag-boundary li::after { top: auto; right: auto; bottom: -8px; left: 24px; width: 1px; height: 8px; }
}