/* Precision product drawings: shared strokes, controlled layering, quiet emerald. */
body #sandbox-benefits .infra-card{background:linear-gradient(145deg,#121919,#0a0f0e);border-color:#293831;box-shadow:inset 0 1px #ffffff05;display:flex;flex-direction:column;min-height:0;padding:0;gap:0}
body #sandbox-benefits .infra-copy{padding:28px 28px 0;max-width:100%}
body #sandbox-benefits .infra-copy>p{max-width:390px;min-height:44px}
body #sandbox-benefits .infra-main .infra-copy{padding:28px 28px 0}
body #sandbox-benefits .infra-main .infra-checks{padding:0 28px 24px;order:3;margin:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:10px}
body #sandbox-benefits .infra-main .infra-boot,body #sandbox-benefits .volume-visual,body #sandbox-benefits .deployment-map,body #sandbox-benefits .mini-desktop{display:none}
.precision-art{position:relative;width:100%;margin-top:auto;padding-top:18px;isolation:isolate}
.precision-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b100f,transparent 12%,transparent 88%,#0b100f);pointer-events:none;opacity:.4}
.precision-art img{width:100%;height:auto;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.infra-card:hover .precision-art img{transform:translateY(-3px)}
body #sandbox-benefits .infra-main .precision-art{max-width:560px;align-self:center;margin-top:auto}
body #sandbox-benefits .infra-main{grid-column:span 6}.infra-volume,.infra-deploy{grid-column:span 3}
body #sandbox-benefits .regions-visual{background:linear-gradient(150deg,#17201b,#0c1310);box-shadow:0 18px 35px #0004,inset 0 1px #ffffff08;border-color:#34493c;margin:36px 24px 24px;border-radius:8px}
body #sandbox-benefits .region-point{background:none;box-shadow:none}
body #sandbox-benefits .region-flag{filter:saturate(.7);font-size:34px}
body #sandbox-benefits .metrics-visual{border-color:#34493c;background:linear-gradient(140deg,#15201a,#0c130f);box-shadow:0 18px 35px #0004,inset 0 1px #ffffff08;margin:36px 24px 24px;border-radius:8px}
body #sandbox-benefits .chart-fill{opacity:.1}body #sandbox-benefits .chart-curve{stroke:#8dceaa;stroke-width:1.5}body #sandbox-benefits .chart-memory{stroke:#58786a;stroke-width:1}body #sandbox-benefits .chart-scan{display:none}
/* Equal-width cards keep every technical drawing large enough to read. */
@media(min-width:851px){body #sandbox-benefits .infra-main,body #sandbox-benefits .infra-volume,body #sandbox-benefits .infra-deploy{grid-column:span 4}html body #sandbox-benefits .infra-main h3{font-size:22px!important}body #sandbox-benefits .infra-main .infra-checks{display:none}}
body #sandbox-benefits .regions-visual,body #sandbox-benefits .metrics-visual{margin-top:auto;margin-bottom:28px}
body #sandbox-benefits .infra-regions .infra-copy,body #sandbox-benefits .infra-metrics .infra-copy{padding-bottom:28px}

@media(max-width:850px){body #sandbox-benefits .infra-card{grid-column:span 6}}
@media(max-width:700px){body #sandbox-benefits .infra-card{grid-column:span 12}}
@media(prefers-reduced-motion:reduce){.precision-art img{transition:none}}
/* Sculptural dot-matrix illustrations, inspired by computational printmaking. */
body #sandbox-benefits .infra-card{background:linear-gradient(140deg,#111714,#0a100c 80%);border-color:#29362d}
body #sandbox-benefits .precision-art{padding:5px 10px 15px;min-height:220px;display:flex;align-items:center;justify-content:center}
body #sandbox-benefits .precision-art img{width:100%;height:auto;filter:none}
.precision-art:after{display:none}
body #sandbox-benefits .infra-copy{padding-bottom:12px}
body #sandbox-benefits .infra-copy>p{color:#a0afa6}
body #sandbox-benefits .infra-category{color:#aabbb1}
body #sandbox-benefits .regions-visual,body #sandbox-benefits .metrics-visual{background:linear-gradient(140deg,#17241b,#0c150f);box-shadow:0 12px 35px #0004,inset 0 1px #b3e6bb0a;border-color:#3a5140}
@media(max-width:700px){body #sandbox-benefits .precision-art{min-height:190px;padding:0 4px 14px}}

/* Signals share the artwork's coordinate system, so they stay on its surfaces. */
.precision-drawing{position:relative;width:100%;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
body #sandbox-benefits .infra-card:hover .precision-art img{transform:none}
.infra-card:hover .precision-drawing{transform:translateY(-3px)}
.precision-motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;stroke:#9ae8ba;stroke-width:1.4;stroke-linecap:round}
.precision-signal{stroke-dasharray:9 91;animation:precision-flow 4.8s linear infinite;opacity:.8}
.precision-orbit{stroke-dasharray:12 88;animation:precision-flow 7s linear infinite;opacity:.8}
.precision-orbit-inner{animation-duration:5.5s;animation-direction:reverse;opacity:.5}
.precision-core{fill:#70d69c;fill-opacity:.025;stroke-opacity:.2;animation:precision-core 4.8s ease-in-out infinite}
.precision-browser-scan{stroke-width:1;animation:precision-scan 5.6s ease-in-out infinite;opacity:0}
body #sandbox-benefits .precision-chart-signal{stroke:#b4efd0;stroke-width:1.7;stroke-dasharray:9 91;animation:precision-flow 7s linear infinite;opacity:.85}
body #sandbox-benefits .region-point em i{animation:precision-status 3.6s ease-in-out infinite}
body #sandbox-benefits .region-eu em i{animation-delay:-1.8s}
@keyframes precision-flow{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes precision-core{0%,100%{fill-opacity:.025;stroke-opacity:.2}45%{fill-opacity:.12;stroke-opacity:.8}}
@keyframes precision-scan{0%,100%{transform:translate(0,0);opacity:0}12%{opacity:.65}80%{transform:translate(38px,118px);opacity:.65}94%{transform:translate(38px,118px);opacity:0}}
@keyframes precision-status{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){
 body #sandbox-benefits .precision-motion,body #sandbox-benefits .precision-chart-signal{display:none}
 body #sandbox-benefits .region-point em i{animation:none}
 .precision-drawing{transition:none}.infra-card:hover .precision-drawing{transform:none}
}

/* Let the regions panel use the card's available space instead of a blank auto margin. */
body #sandbox-benefits .infra-regions .infra-copy{padding-bottom:0}
body #sandbox-benefits .infra-regions .infra-copy>p{min-height:0}
body #sandbox-benefits .infra-regions .regions-visual{flex:1 0 auto;height:auto;min-height:180px;margin-top:24px}
/* Keep the metrics panel beside its explanation; let the chart fill the card. */
body #sandbox-benefits .infra-metrics .infra-copy{padding-bottom:0}
body #sandbox-benefits .infra-metrics .infra-copy>p{min-height:0}
body #sandbox-benefits .infra-metrics .metrics-visual{margin-top:24px;flex:1 0 auto;display:flex;flex-direction:column;min-height:180px}
body #sandbox-benefits .infra-metrics .metrics-visual>svg{flex:1 0 87px;min-height:87px}
body #sandbox-benefits .infra-metrics .metrics-top,body #sandbox-benefits .infra-metrics .mini-log{flex-shrink:0}
@media(max-width:700px){body #sandbox-benefits .infra-regions .regions-visual{min-height:176px}}

/* Deploy: a readable six-second source → packet → node sequence. */
.deploy-core{fill:#72e6a5;stroke:#a7f3c5;stroke-width:1.8;animation:deploy-source 6s ease-in-out infinite}
.deploy-circuit{stroke:#9aefbb;stroke-width:1.5;stroke-dasharray:22 78;animation:precision-flow 6s linear infinite;opacity:.85}
.deploy-link{stroke:#8ae8af;stroke-width:1.5;opacity:.25}
.deploy-packet,.deploy-packet-halo{fill:#b7ffd1;stroke:none;opacity:0;animation:deploy-packet 6s ease-in-out var(--deploy-delay) infinite}
.deploy-packet-halo{fill:#64d99a;fill-opacity:.18}
.deploy-node{fill:#69e69d;stroke:#9af0bd;stroke-width:1.5;fill-opacity:0;stroke-opacity:0;animation:deploy-node 6s ease-in-out var(--deploy-delay) infinite}
@keyframes deploy-source{0%,100%{fill-opacity:.025;stroke-opacity:.25}12%,24%{fill-opacity:.2;stroke-opacity:1}65%{fill-opacity:.04;stroke-opacity:.4}}
@keyframes deploy-packet{0%,15%{transform:translate(0,0);opacity:0}19%{transform:translate(0,0);opacity:1}39%{transform:translate(var(--packet-x),var(--packet-y));opacity:1}44%,100%{transform:translate(var(--packet-x),var(--packet-y));opacity:0}}
@keyframes deploy-node{0%,34%,85%,100%{fill-opacity:0;stroke-opacity:.12}42%,55%{fill-opacity:.18;stroke-opacity:1}70%{fill-opacity:.04;stroke-opacity:.35}}

/* Regions are the focal point of this card. */
body #sandbox-benefits .infra-regions .region-flag{font-size:44px}
body #sandbox-benefits .infra-regions .region-point{padding-inline:8px;column-gap:12px}
body #sandbox-benefits .infra-regions .region-point b{font-size:20px;letter-spacing:.06em}
body #sandbox-benefits .infra-regions .region-point small{font-size:12px;line-height:1.5}
@media(max-width:420px){
 body #sandbox-benefits .infra-regions .regions-visual{padding-inline:12px;column-gap:12px}
 body #sandbox-benefits .infra-regions .region-point{padding-inline:0;column-gap:8px}
 body #sandbox-benefits .infra-regions .region-flag{font-size:36px}
 body #sandbox-benefits .infra-regions .region-point b{font-size:18px}
 body #sandbox-benefits .infra-regions .region-point small{font-size:11px}
}

/* Telemetry is a technical drawing, with the same depth and line weight as its neighbors. */
body #sandbox-benefits .infra-metrics .precision-art{margin-top:24px;padding-top:0;min-height:0}
body #sandbox-benefits .infra-metrics .precision-signal{stroke:#c2f4d2;stroke-width:1.8;stroke-dasharray:5 95;animation-duration:6s}