/* Hairline-inspired product figure adaptation. The actual Hairline npm engine
   is not loaded; the implementation is first-party, offline and CSP-safe. */
.system-tile{overflow:hidden;isolation:isolate;min-height:316px}
.system-tile .tile-symbol.hl-ready{position:relative;display:block;flex:0 0 auto;
 width:100%;height:auto;aspect-ratio:16/9;max-height:177px;margin:-7px 0 2px;
 border-radius:8px;background:radial-gradient(ellipse at 50% 55%,rgba(255,130,96,.085),transparent 72%);
 font-size:initial;text-shadow:none;color:inherit}
.hl-graphic{width:100%;height:100%;display:block;overflow:visible}
.hl-ground{fill:rgba(13,14,19,.18);stroke:rgba(251,180,153,.22);stroke-width:1}
.hl-grid{fill:none;stroke:rgba(245,163,136,.11);stroke-width:.7}
.hl-wire{fill:none;stroke:rgba(249,161,128,.33);stroke-width:1.5;
 stroke-dasharray:3 5;transition:stroke .24s,stroke-width .24s,opacity .24s}
.hl-wire[data-active="true"]{stroke:#ffc1a7;stroke-width:2;stroke-dasharray:none;
 filter:drop-shadow(0 0 4px rgba(255,158,124,.4))}
.hl-core path:first-child{fill:#5d3029;stroke:#ffb596;stroke-width:1.5}
.hl-core path:not(:first-child){fill:#241819;stroke:rgba(244,154,124,.55);stroke-width:1}
.hl-core text{font:700 7px system-ui,sans-serif;letter-spacing:1px;fill:#ffe8da}
.hl-node-body{transform:translateY(var(--hl-lift,0));transition:transform .22s cubic-bezier(.22,.8,.24,1)}
.hl-node-face{fill:#262126;stroke:#be8675;stroke-width:1.2;transition:fill .2s,stroke .2s}
.hl-node-side{fill:#1d171c;stroke:#986c61;stroke-width:1.1}
.hl-node-side-right{fill:#17151b}
.hl-node-shadow{fill:#a7685624;stroke:none}
.hl-node-text{font:600 7.1px system-ui,sans-serif;letter-spacing:.3px;fill:#ffe4d6}
.hl-node[data-active="true"] .hl-node-face,
.system-tile:focus-visible .hl-node:first-of-type .hl-node-face{
 fill:#794236;stroke:#ffd5bb}
.hl-node[data-active="true"] .hl-node-text{fill:white}
.hl-instruction{display:block;margin:0 0 3px;color:#bba39c;font-size:8px;
 font-weight:700;letter-spacing:.105em}
.hl-readout{display:block;min-height:20px;margin:0 0 12px;color:#ffbb9c;
 font-size:11px;line-height:1.45;letter-spacing:0}
.system-tile .tile-meta{margin-top:8px}
.system-tile .tile-more{margin-top:auto}
@media(max-width:980px){
 .system-tile{min-height:305px}
 .system-tile .tile-symbol.hl-ready{max-height:145px}
}
@media(max-width:700px){
 .systems-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .system-tile{min-height:292px;padding:15px}
 .system-tile .tile-symbol.hl-ready{margin:0 0 6px;max-height:137px}
 .hl-readout{font-size:10px}
 .hl-instruction{font-size:7px}
 .system-tile .tile-meta{font-size:8px;line-height:1.45}
 .system-tile h3{font-size:24px}
 .system-tile .tile-more{font-size:12px}
}
@media(max-width:490px){
 .systems-grid{grid-template-columns:1fr;gap:12px}
 .system-tile{min-height:0;padding:17px}
 .system-tile .tile-symbol.hl-ready{aspect-ratio:2/1;max-height:165px}
 .system-tile .tile-meta{margin:7px 0 6px}
 .hl-instruction{font-size:8px}
 .hl-readout{min-height:0;margin-bottom:10px}
}
@media(hover:none){.system-tile:hover{transform:none}}
@media(prefers-reduced-motion:reduce){
 .hl-node-body,.hl-wire,.hl-node-face{transition:none!important}
 .system-tile:hover{transform:none!important}
}