.p8s-demo{background:#fff;border:1px solid #dcd3df;padding:30px;margin:0 auto 65px;scroll-margin-top:45px;color:#173546}.p8s-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:25px}.p8s-badge{font-size:9px;letter-spacing:.12em;font-weight:700;color:#59124c}.p8s-heading h3{font-size:30px;line-height:1.18;letter-spacing:-.035em;margin:9px 0 14px}.p8s-intro{font-size:14px;color:#50646d;max-width:760px;line-height:1.6}.p8s-controls{display:flex;gap:7px;flex-shrink:0}.p8s-controls button,.p8s-steps button{font-size:12px;padding:10px 13px;min-height:42px;border:1px solid #cbbdce;background:#fff;color:#59124c;cursor:pointer}.p8s-controls button:first-child{background:#59124c;color:white}.p8s-controls button:disabled{opacity:.5;cursor:default}.p8s-steps{display:flex;flex-wrap:wrap;gap:7px;margin:25px 0 18px}.p8s-steps button[aria-pressed=true]{background:#f3eaf4;border-color:#9e71a2;font-weight:600}.p8s-scrub{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;font-size:11px;color:#65736c;margin-bottom:16px}.p8s-scrub input{width:100%;min-width:0;accent-color:#59124c}.p8s-scrub output{min-width:60px;text-align:right;font-variant-numeric:tabular-nums}.ph-hint{font-size:12px;color:#65736c;margin:0 0 25px}.ph-campus{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(130px,.48fr) minmax(0,1fr);gap:20px;align-items:center}.ph-hospital{min-width:0;position:relative}.ph-roof{display:flex;align-items:center;gap:12px;padding:16px;background:#e5ecea;border:1px solid #ccd7d3;border-radius:14px 14px 0 0}.ph-hospital-sign{display:grid;place-items:center;width:28px;height:28px;border-radius:5px;background:#327baa;color:white;font-weight:700;font-size:20px}.ph-roof strong{font-size:10px;letter-spacing:.07em}.ph-roof-units{margin-left:auto;color:#8caaa6;font-size:20px;letter-spacing:4px}.ph-column-head{display:flex;justify-content:space-between;padding:12px 10px;font-size:10px;color:#65736c;background:#f0f4f1}.ph-plant{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 145px;gap:9px 13px;width:100%;text-align:left;border:1px solid #dce3df;border-bottom:0;border-left:4px solid var(--plant);background:#f9fbf8;padding:15px 12px;cursor:pointer;color:#173546}.ph-plant-info{display:flex;align-items:center;gap:10px;min-width:0}.ph-equipment{width:50px;height:46px;flex-shrink:0;color:var(--plant)}.ph-plant small{font-size:9px;color:#7a8782;line-height:1.3}.ph-plant h4{font-size:15px;line-height:1.3;margin:3px 0 5px}.ph-controller{font-size:10px;color:#50646d;display:block;line-height:1.4}.ph-measurements{grid-column:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.ph-point{font-size:9px;display:flex;align-items:center;justify-content:space-between;gap:4px;border:1px solid #e0e7e0;background:white;border-radius:3px;padding:5px;color:#65736c;min-width:0}.ph-point b{font-size:10px;font-weight:600;white-space:nowrap;color:#86928e}.ph-point.is-read b{color:#173546}.ph-connection{grid-column:2;grid-row:1/3;align-self:center;text-align:center;min-width:0}.ph-connection>strong{font-size:11px;color:var(--plant);line-height:1.5;display:block}.ph-connection>span{font-size:10px;display:block;color:#65736c;margin:4px 0 8px}.ph-wire{height:18px;position:relative;overflow:hidden}.ph-wire:before{content:'';position:absolute;left:0;right:0;top:8px;border-top:2px solid var(--plant);opacity:.25}.ph-wire>i{position:absolute;top:4px;width:9px;height:9px;border-radius:3px;background:var(--plant);opacity:0;box-shadow:0 0 0 2px white}.ph-wire>b{position:absolute;right:0;top:-4px;font-size:24px;color:var(--plant)}.ph-plant.is-selected{background:#f1edf5;box-shadow:inset 0 0 0 1px #ae92b4}.ph-plant.is-reading .ph-wire:before{opacity:1}.ph-plant:focus-visible,.ph-systems button:focus-visible{outline:3px solid #59124c;outline-offset:-3px}.ph-foundation{height:13px;background:#dce6e1;border:1px solid #ccd7d3}.ph-edge{text-align:center;position:relative;min-width:0}.ph-edge:before{content:'';position:absolute;left:-11px;top:-220px;bottom:100px;border-left:2px solid #d6c8dc;border-radius:10px;pointer-events:none}.ph-edge h4,.ph-platform>h4{font-size:10px;letter-spacing:.07em;color:#65736c;margin:0 0 20px;line-height:1.5}.ph-gateway{width:100%;display:block}.ph-edge>p{font-size:10px;line-height:1.6;color:#65736c}.ph-counter{margin:22px 0}.ph-counter strong{display:block;font-size:25px;color:#59124c}.ph-counter span{font-size:10px;color:#65736c}.ph-uplink svg{width:100%;display:block}.ph-lock{color:#bcaabe}.ph-secured .ph-lock{color:#59124c}.ph-uplink strong{font-size:11px;line-height:1.5;display:block;color:#59124c}.ph-uplink>span{font-size:9px;color:#65736c;line-height:1.6;display:block;margin-top:7px}.ph-platform{min-width:0}.ph-platform-card{background:#faf7fc;border:1px solid #dbc9df;border-radius:12px;padding:18px 12px}.ph-logo{width:90%;height:50px;object-fit:contain;display:block;margin:auto}.ph-model{font-size:10px;color:#705e73;text-align:center;margin:15px 0}.ph-total{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px 12px;padding:12px 0;border-top:1px solid #e2d8e6;border-bottom:1px solid #e2d8e6}.ph-total>strong{grid-row:1/3;font-size:27px;color:#59124c;white-space:nowrap}.ph-total>span{font-size:11px}.ph-total small{font-size:10px;color:#65736c}.ph-systems{padding:12px 0}.ph-systems button{display:grid;grid-template-columns:6px 1fr auto;align-items:center;gap:8px;width:100%;padding:11px 4px;border:0;border-bottom:1px solid #e6dfe9;background:transparent;color:#50646d;font-size:11px;text-align:left;cursor:pointer}.ph-systems i{width:6px;height:6px;border-radius:50%;background:var(--plant)}.ph-systems b{font-size:10px;white-space:nowrap;font-weight:400;color:#8e8492}.ph-systems .is-received b{color:#33785c}.ph-systems .is-selected{background:#eee2f2}.ph-selected{padding-top:12px}.ph-selected>span{font-size:9px;color:#705e73;text-transform:uppercase;letter-spacing:.08em}.ph-selected h4{font-size:17px;margin:7px 0}.ph-selected>p{font-size:9px;color:#705e73;margin:0 0 15px}.ph-field-head,.ph-field{display:grid;grid-template-columns:1fr 1.05fr auto;gap:5px;align-items:center}.ph-field-head{font-size:8px;color:#8e8492;border-bottom:1px solid #e2d8e6;padding-bottom:7px}.ph-field{font-size:9px;padding:11px 0;border-bottom:1px solid #e8e1eb;min-height:40px}.ph-field code{font-size:8px;overflow-wrap:anywhere;color:#8e8492}.ph-field strong{font-size:11px;white-space:nowrap;visibility:hidden}.ph-field.is-received strong{visibility:visible;color:#59124c}.p8s-status{font-size:14px;line-height:1.6;font-weight:600;margin-top:25px;border-top:1px solid #e6dee8;padding-top:18px;min-height:48px}.ph-benefits{background:#f7f4f8;padding:20px;border:1px solid #e5dce9;margin-top:20px}.ph-benefits>h4{font-size:18px;margin:0 0 17px}.ph-benefits>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ph-benefits article{background:white;border-top:3px solid #d9cedd;padding:14px;opacity:.4;transition:opacity .6s}.ph-benefits article.is-ready{opacity:1;border-color:#916a98}.ph-benefit-icon{display:block;font-size:32px;color:#59124c;height:45px;line-height:45px}.ph-benefits img{width:145px;max-width:100%;height:45px;object-fit:contain;object-position:left center}.ph-benefits h5{font-size:15px;margin:12px 0 9px}.ph-benefits p{font-size:12px;line-height:1.6;color:#50646d;margin:0}.ph-cost{background:#eaf2ed;padding:20px;margin-top:18px;border-left:3px solid #398364}.ph-cost>strong{font-size:19px;line-height:1.4;color:#23503e}.ph-cost>div{display:flex;gap:12px 25px;flex-wrap:wrap;margin-top:13px}.ph-cost span{font-size:12px;color:#3e6757}.ph-cost span:before{content:'✓';margin-right:7px;font-weight:700}.p8s-note{font-size:10px;line-height:1.7;color:#65736c;margin-top:20px}.p8s-source{display:inline-block;font-size:10px;text-decoration:underline;text-underline-offset:3px;color:#705e73;margin:10px 18px 0 0}
@media(max-width:1150px){.ph-campus{grid-template-columns:minmax(0,1.5fr) minmax(125px,.5fr) minmax(0,1fr);gap:15px}.ph-plant{grid-template-columns:minmax(0,1fr);padding:12px}.ph-measurements{grid-column:1}.ph-connection{grid-row:auto;grid-column:1;text-align:left}.ph-connection strong,.ph-connection>span{display:inline;margin-right:8px}.ph-wire{margin-top:5px}.ph-plant h4{font-size:14px}.ph-column-head span:last-child{display:none}.p8s-heading{flex-direction:column}.ph-field-head,.ph-field{grid-template-columns:1fr auto}.ph-field-head span:first-child,.ph-field code{display:none}}
@media(max-width:800px){.p8s-demo{padding:20px}.ph-campus{grid-template-columns:1fr 1fr;gap:25px;align-items:start}.ph-hospital{grid-column:1/-1}.ph-plant{grid-template-columns:minmax(0,1fr) 150px}.ph-connection{grid-row:1/3;grid-column:2;text-align:center}.ph-connection strong,.ph-connection>span{display:block;margin-right:0}.ph-column-head span:last-child{display:block}.ph-edge{padding-top:20px}.ph-edge:before{display:none}.ph-gateway{max-height:150px}.ph-benefits>div{gap:8px}.ph-benefits article{padding:10px}.ph-benefits h5{font-size:14px}}
@media(max-width:500px){.p8s-demo{padding:16px}.p8s-heading h3{font-size:26px}.p8s-intro{font-size:13px}.p8s-steps{display:grid;grid-template-columns:1fr 1fr;gap:5px}.p8s-steps button{font-size:10px;padding:8px 5px}.p8s-scrub{grid-template-columns:1fr auto;gap:7px}.p8s-scrub label{grid-column:1/-1}.ph-campus{grid-template-columns:1fr}.ph-plant{grid-template-columns:1fr;padding:12px}.ph-connection{grid-row:auto;grid-column:1;text-align:left}.ph-connection strong,.ph-connection>span{display:inline;margin-right:7px}.ph-column-head span:last-child{display:none}.ph-roof{padding:12px;gap:8px}.ph-roof strong{font-size:9px}.ph-roof-units{font-size:14px}.ph-edge{display:grid;grid-template-columns:1fr 1fr;gap:0 15px;align-items:center;padding-top:0}.ph-edge h4{grid-column:1/-1;margin:0 0 10px}.ph-gateway{grid-column:1;grid-row:2/4}.ph-edge>p{grid-column:2;grid-row:2;text-align:left}.ph-counter{grid-column:2;grid-row:3;margin:5px 0;text-align:left}.ph-uplink{grid-column:1/-1;max-width:235px;margin:10px auto}.ph-uplink svg{height:85px}.ph-platform-card{padding:20px 14px}.ph-field-head,.ph-field{grid-template-columns:1fr 1.05fr auto}.ph-field-head span:first-child,.ph-field code{display:block}.ph-field{font-size:10px}.ph-systems button{font-size:12px}.ph-point{font-size:10px}.ph-point b{font-size:11px}.ph-benefits{padding:14px}.ph-benefits>div{grid-template-columns:1fr}.ph-benefits article{display:grid;grid-template-columns:65px 1fr;gap:5px 10px;align-items:center}.ph-benefits img,.ph-benefit-icon{grid-column:1;grid-row:1/3;width:65px}.ph-benefits h5{margin:0}.ph-benefits p{font-size:11px}.ph-cost>strong{font-size:17px}.ph-cost>div{flex-direction:column;gap:10px}.p8s-status{font-size:12px}.ph-hint{font-size:11px}}
@media(prefers-reduced-motion:reduce){.p8s-demo *{transition:none!important;animation:none!important}}
.ph-campus{position:relative}.ph-network{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.ph-networked .ph-wire>i{visibility:hidden}.ph-networked .ph-wire:before{opacity:0}.ph-edge:before{display:none}@media(max-width:800px){.ph-network{display:none}}

/* Keep packet motion local to the visible part; readings and totals stay calm. */
.ph-networked .ph-streaming .ph-wire>i{visibility:visible}.ph-streaming .ph-wire>i{animation:ph-local-packet 3.8s linear infinite}.ph-streaming .ph-wire>i:nth-child(2){animation-delay:.75s}.ph-streaming .ph-wire>i:nth-child(3){animation-delay:1.5s}.ph-streaming .ph-wire>i:nth-child(4){animation-delay:2.25s}
@keyframes ph-local-packet{0%{left:0;opacity:0}12%{opacity:1}72%{opacity:1}85%,100%{left:91%;opacity:0}}
/* Inline packet positions belong to the intro; animations override them here. */

.ph-edge.ph-streaming .ph-cloud-packet{opacity:1!important;animation:ph-uplink-packet 4s ease-in-out infinite;transform-box:view-box;transform-origin:0 0;x:8px}
@keyframes ph-uplink-packet{0%,12%{transform:translateX(0);opacity:.1}30%,70%{opacity:1}88%,100%{transform:translateX(150px);opacity:.1}}
.ph-platform.ph-streaming .ph-systems i{animation:ph-received-pulse 4s ease-in-out infinite}.ph-platform.ph-streaming .ph-systems button:nth-child(2n) i{animation-delay:1s}
@keyframes ph-received-pulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 4px color-mix(in srgb,var(--plant) 18%,transparent)}}
.ph-counter span{display:block;line-height:1.5}.ph-total>span{line-height:1.5}.ph-systems button{grid-template-columns:6px minmax(0,1fr) auto}.ph-systems b{font-size:9px;white-space:normal;text-align:right;max-width:75px}.paused .ph-streaming *{animation-play-state:paused!important}





.ph-motion-paused .ph-streaming *{animation-play-state:paused!important}