/* Solution · "Any age. Any brand. One screen." (ag.js). Black / white / grey + orange; idle in burnt orange. */
.sxh-sec .sxh { display: block; }
.sxh-sec .sxh-copy { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.sxh-sec .sxh-copy p { margin-left: auto; margin-right: auto; }
.ag { width: 100%; max-width: 1200px; margin: clamp(36px, 4vw, 56px) auto 0; }
.ag-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: Inter, system-ui, sans-serif; }
.ag * { animation-play-state: paused; } .ag.play * { animation-play-state: running; }
/* machine card */
.ag-card { fill: #fff; stroke: #eadfd2; stroke-width: 1.5; filter: drop-shadow(0 26px 34px rgba(120,70,20,.16)); }
.ag-mi { opacity: 0; transition: none; }
.ag-yr { font-size: 30px; font-weight: 800; letter-spacing: -.02em; fill: #fff; }
.ag-nm { font-size: 14px; font-weight: 700; fill: #fff; opacity: .92; }
.ag.idle0 .ag-yr, .ag.idle0 .ag-nm, .ag.idle0 .ag-proto { opacity: 0; }
.ag-proto rect { fill: #fff; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); } .ag-proto circle { fill: #f7861e; }
.ag-proto text { font-size: 11.5px; font-weight: 800; fill: #111; }
/* timeline */
.ag-tl { stroke: #e6ddd2; stroke-width: 2; stroke-linecap: round; }
.ag-tlon { stroke: #f7861e; stroke-width: 2.5; stroke-linecap: round; transition: x2 .6s cubic-bezier(.16,1,.3,1); }
.ag-tk circle { fill: #fff; stroke: #d9cfc3; stroke-width: 2; transition: fill .3s, stroke .3s; }
.ag-tk text { font-size: 10.5px; font-weight: 800; fill: #b0a79c; text-anchor: middle; transition: fill .3s; }
.ag-tk.on circle { fill: #111; stroke: #111; } .ag-tk.on text { fill: #3a3a3a; }
.ag-tk.now circle { fill: #f7861e; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(247,134,30,.6)); } .ag-tk.now text { fill: #e56f06; }
/* cables */
.ag-cab { fill: none; stroke: #e2d8cc; stroke-width: 2; stroke-dasharray: 3 6; }
.ag-cabon { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.ag-plug rect { fill: #111; }
.ag-pk { fill: #f7861e; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 3px rgba(247,134,30,.8)); }
.ag.flow .ag-pk { opacity: 1; }
/* gateway */
.ag-gd { fill: #fff; stroke: #f1e3d3; stroke-width: 1.5; filter: drop-shadow(0 18px 24px rgba(120,70,20,.18)); }
.ag-rip { fill: none; stroke: #f7861e; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ag.flow .ag-rip { animation: ag-rip 2.4s ease-out infinite; } .ag.flow .ag-rip.d2 { animation-delay: 1.2s; }
@keyframes ag-rip { from { transform: scale(1); opacity: .55; } to { transform: scale(1.5); opacity: 0; } }
.ag-gl { font-size: 13px; font-weight: 800; fill: #111; text-anchor: middle; }
.ag-gs { font-size: 11px; font-weight: 600; fill: #8a8a8a; text-anchor: middle; } .ag-gp { fill: #e56f06; font-weight: 800; }
/* dashboard */
.ag-db { fill: #fff; stroke: #eadfd2; stroke-width: 1.5; filter: drop-shadow(0 26px 34px rgba(120,70,20,.14)); }
.ag-dh { font-size: 14px; font-weight: 800; fill: #111; } .ag-dc { font-size: 11px; font-weight: 800; letter-spacing: .06em; fill: #e56f06; text-anchor: end; }
.ag-dl { stroke: #f0e9e1; }
.ag-row { opacity: .28; transition: opacity .45s; }
.ag-row .ag-rb { fill: transparent; transition: fill .35s; }
.ag-rd { fill: #d4cbbf; transition: fill .3s; } .ag-rn { font-size: 12.5px; font-weight: 800; fill: #111; } .ag-ry { font-size: 10px; font-weight: 600; fill: #8a8a8a; }
.ag-rs { fill: none; stroke: #d9d0c5; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; }
.ag-rv { font-size: 12.5px; font-weight: 800; fill: #b0a79c; text-anchor: end; transition: fill .3s; }
.ag-row.on { opacity: 1; } .ag-row.on .ag-rd { fill: #f7861e; } .ag-row.on .ag-rs { stroke: #f7861e; } .ag-row.on .ag-rv { fill: #111; }
.ag-row.now .ag-rb { fill: #fff3e6; }
.ag-row.on .ag-rn { animation: ag-in .5s cubic-bezier(.16,1,.3,1); }
@keyframes ag-in { from { opacity: 0; transform: translateX(-8px); } }
.ag-all { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.ag.done .ag-all { opacity: 1; transform: none; }
.ag-all rect { fill: #111; } .ag-all text { font-size: 11.5px; font-weight: 800; fill: #fff; text-anchor: middle; }
@media (max-width: 760px) {
  .ag { overflow: visible; margin-top: 28px; } .ag-svg { min-width: 0; }
  .ag-tn { font-size: 12px; } .ag-tp { font-size: 10px; } .ag-dh { font-size: 14px; } .ag-dc { font-size: 10.5px; }
  .ag-gl2 { text-anchor: start; font-size: 13px; } .ag-gs2 { text-anchor: start; font-size: 11px; }
  .ag-rn { font-size: 12px; } .ag-ry { font-size: 9.5px; } .ag-rv { font-size: 11px; }
}

/* v2: six machines, each with its own cable (no years) */
.ag-tb { fill: #fff; stroke: #ece4da; stroke-width: 1.2; filter: drop-shadow(0 10px 16px rgba(120,70,20,.08)); transition: stroke .35s, fill .35s; }
.ag-ti { filter: grayscale(1); opacity: .55; transition: filter .5s, opacity .5s; }
.ag-tn { font-size: 13.5px; font-weight: 800; fill: #9a9a9a; transition: fill .3s; }
.ag-tp { font-size: 11px; font-weight: 700; fill: #b5ada3; transition: fill .3s; }
.ag-port { fill: #fff; stroke: #d9cfc3; stroke-width: 2; transition: fill .3s, stroke .3s; }
.ag-tile.on .ag-ti { filter: none; opacity: 1; } .ag-tile.on .ag-tn { fill: #111; } .ag-tile.on .ag-tp { fill: #e56f06; }
.ag-tile.on .ag-port { fill: #111; stroke: #111; }
.ag-tile.now .ag-tb { stroke: #f7861e; stroke-width: 2; }
.ag-plug { opacity: 0; transition: opacity .2s; } .ag-plug.on { opacity: 1; }
.ag-plug rect { fill: #111; } .ag-plug.in { opacity: 0; transition: opacity .3s .1s; }
.ag-pkg { opacity: 0; transition: opacity .3s; } .ag-pkg.on { opacity: 1; }
.ag-pko { opacity: 0; transition: opacity .3s; } .ag.flow .ag-pko { opacity: 1; }
.ag-outon { fill: none; stroke: #111; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); }
.ag-gn { fill: #111; font-weight: 800; }
.ag-rv { font-size: 12px; }
.ag-rs { stroke-width: 1.4; }
/* v3 balance: both columns share one top and bottom; dashboard rows line up with the machines */
.ag-all { display: none; }
.ag-cnt rect { fill: #fff3e6; transition: fill .3s; } .ag-cnt .ag-dc { text-anchor: middle; }
.ag.done .ag-cnt rect { fill: #111; } .ag.done .ag-cnt .ag-dc { fill: #fff; }
.ag-lc { fill: #9a9a9a; }
.ag-dh { font-size: 15px; }
.ag-rn { font-size: 12.5px; } .ag-ry { font-size: 10.5px; } .ag-rv { font-size: 12.5px; }
.ag-rs { display: none; }
.ag-row.on .ag-rd { animation: ag-live 1.8s ease-in-out infinite; }
@keyframes ag-live { 50% { opacity: .35; } }