/* Product Strategy: sys cards + data-dictionary illustration. */
.sysGrid{grid-template-columns:1fr 1fr;align-items:start;gap:24px;padding:0;display:grid}
.sysCard{--sys-card-radius:var(--radius-lg);box-sizing:border-box;border-radius:var(--sys-card-radius);width:100%;color:inherit;text-align:left;cursor:pointer;font:inherit;background:0 0;border:0;margin:0;padding:8px;transition:background-color .15s ease-out;display:block;overflow:visible}
.sysCardInset{transform-origin:50%;border-radius:0;flex-direction:column;gap:12px;margin:-8px;padding:0;transition:transform .15s ease-out;display:flex}
.sysCard:hover,.sysCard:focus-visible{background:#1a1a1a;outline:none}
.sysCard:hover .sysCardInset,.sysCard:focus-visible .sysCardInset{transform:scale(var(--sys-sx,.95), var(--sys-sy,.95))}
.sysCardMedia{aspect-ratio:16/9;border-radius:var(--sys-card-radius);background:var(--sys-off-black);width:100%;transition:none;display:block;position:relative;overflow:hidden}
.sysCardMediaInner{border-radius:0;display:block;position:absolute;inset:0}
.sysCardMedia img{object-fit:cover;border-radius:0;width:100%;height:100%;position:absolute;inset:0}
.sysCardCopy{border-radius:0;flex-direction:column;gap:12px;min-width:0;padding:0;display:flex}
.sysCardTitle{font-family:var(--font-body);letter-spacing:0;color:var(--text);text-wrap:pretty;font-size:16px;font-weight:400;line-height:1.25}
.sysCardTags{border-radius:0;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}
.sysCardTags li{font-family:var(--font-label), ui-monospace, monospace;letter-spacing:var(--tracking-label);text-transform:uppercase;color:#fafafa;background:#2b2b2b;border-radius:4px;padding:7.5px 12px 6.5px;font-size:12px;font-weight:500;line-height:15px}
.sysCard:hover .sysCardBadge,.sysCard:focus-visible .sysCardBadge{background:var(--sys-glass-strong)}
.sysCard:active .sysCardBadge{background:var(--sys-glass-weak);transition-duration:var(--sys-press-ms)}
.sysCardBadge,.sysCardYear,.sysOverlaySectionLabel{position:relative;top:1px}
@media (max-width:720px) {
.sysGrid{grid-template-columns:1fr;gap:24px}
}
@media (prefers-reduced-motion:reduce) {
.sysOverlayScrim,.sysOverlayStage,.sysOverlayClose,.sysCardBadge{transition:none!important}
.sysCardInset{transition:none}
.sysCard:hover .sysCardInset,.sysCard:focus-visible .sysCardInset{transform:none}
}
@media (hover:none) {
.sysCard:hover,.sysCard:focus-visible{background:0 0}
.sysCard:hover .sysCardInset,.sysCard:focus-visible .sysCardInset{transform:none}
}