/* Community Energy demo — inherits Customer Zone brand tokens: white, teal, DM Sans. */
.ce-shell{font-family:'DM Sans',Arial,sans-serif;color:#17323d;max-width:1400px;margin:auto}
.ce-shell h1,.ce-shell h2,.ce-shell h3{font-family:'Space Grotesk',Arial,sans-serif}
.ce-top,.ce-section-heading,.ce-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ce-top{align-items:flex-end;flex-wrap:wrap;margin-bottom:24px}
.ce-shell h1{font-size:clamp(30px,3.6vw,48px);letter-spacing:-.045em;line-height:1.1;margin:4px 0 12px}
.ce-shell h1 em{color:#0e7180;font-style:normal}
.ce-description{color:#60737a;font-size:15px}
.ce-top-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ce-demo-label{background:#e9f6f7;border:1px solid #bde0e4;color:#0e7180;padding:8px 12px;border-radius:5px;font-size:11px;letter-spacing:.08em;font-weight:800}
.ce-pulse{display:inline-block;background:#0e977a;height:7px;width:7px;border-radius:50%;margin-right:6px}
.ce-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:0 0 23px}
.ce-stat{min-width:0;background:linear-gradient(130deg,#fff,#f4f8f9);border:1px solid #dce8eb;border-radius:6px;padding:17px}
.ce-stat small,.ce-stat span{display:block;font-size:11px;color:#60737a}
.ce-stat strong{display:block;font-size:clamp(23px,2.4vw,32px);font-weight:750;letter-spacing:-.04em;margin:6px 0}
.ce-columns{display:grid;grid-template-columns:1fr 1.02fr;gap:20px}
.ce-section-heading{align-items:flex-start;margin:8px 0 14px;flex-wrap:wrap}
.ce-section-heading h2{font-size:24px;margin:0}
.ce-section-heading h3{font-size:18px;margin:0}
.ce-section-heading p,.ce-minor{font-size:12px;color:#60737a;margin:5px 0}
.ce-tag{padding:6px 9px;color:#0e7180;background:#e9f6f7;border:1px solid #c7e2e5;border-radius:5px;font-size:11px;white-space:nowrap}
.ce-building-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ce-building{background:#fff!important;color:#17323d!important;border:1px solid #dce8eb!important;border-radius:7px!important;text-align:left;padding:15px!important;min-width:0}
.ce-building.chosen,.ce-building:hover{background:#e9f6f7!important;border-color:#0e7180!important}
.ce-online{font-size:10px;color:#13775d;white-space:nowrap}
.ce-reading{margin-top:10px}.ce-reading b{font-size:20px;color:#17323d}.ce-reading span{font-size:12px;color:#60737a}
.ce-track{display:block;background:#dce8eb;overflow:hidden;border-radius:20px;height:7px;margin:11px 0}
.ce-track>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#0e7180,#39bed1)}
.ce-minor,.ce-minor span{font-size:11px;color:#60737a}
.ce-promo{margin-top:15px;border:1px solid #dce8eb;padding:22px;border-radius:7px;background:linear-gradient(120deg,#e9f6f7,#fff)}
.ce-promo h3{font-size:23px;margin:8px 0}
.ce-promo p:not(.eyebrow){color:#60737a;font-size:13px}
.ce-promo small{color:#60737a;font-size:11px}
.ce-detail{background:#fff;border:1px solid #dce8eb;border-radius:7px;padding:20px}
.ce-large{display:block;font-size:30px;color:#0e7180}
.ce-large small{font-size:15px}
.ce-subtitle{font-size:11px;color:#60737a}
.ce-soc{margin-top:10px;height:10px}
.ce-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:17px 0 19px}
.ce-flow-item{background:#f4f8f9;border:1px solid #dce8eb;border-radius:5px;padding:11px;min-width:0}
.ce-flow-item>small,.ce-flow-item span{display:block;font-size:10px;color:#60737a}
.ce-flow-item strong{display:block;font-size:22px;color:#0e7180;margin:8px 0}
.ce-flow-item strong small{font-size:12px}
.ce-meters-title{margin-bottom:5px}
.ce-meter-list{display:grid;gap:6px}
.ce-meter{background:#fff!important;color:#17323d!important;border:1px solid #dce8eb!important;border-radius:6px!important;text-align:left;padding:9px 10px!important;display:grid;grid-template-columns:110px 1fr 74px;gap:12px;align-items:center;width:100%}
.ce-meter.chosen,.ce-meter:hover{background:#e9f6f7!important;border-color:#0e7180!important}
.ce-meter small{display:block;color:#60737a;font-size:10px}
.ce-meter .ce-track{margin:0}
.ce-meter>b{text-align:right}
.ce-apartment{margin-top:12px;background:#f4f8f9;border:1px solid #dce8eb;border-radius:6px;padding:15px}
.ce-apartment .ce-between{padding:5px 0;flex-wrap:wrap}
.ce-apartment span,.ce-apartment p{font-size:11px;color:#60737a}
.ce-apartment p{margin-bottom:0}
.ce-disclaimer{margin:20px 0;font-size:11px;color:#60737a}
@media(max-width:1200px){.ce-stats{grid-template-columns:repeat(3,1fr)}.ce-columns{grid-template-columns:1fr}}
@media(max-width:700px){.ce-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ce-building-list{grid-template-columns:1fr}.ce-detail{padding:12px}.ce-flow{gap:5px}.ce-flow-item{padding:8px}.ce-flow-item strong{font-size:17px}.ce-top-actions{width:100%}}

/* Animate values in place between samples. A subtle energy shimmer remains visible. */
.ce-track>span{transition:width 1.35s cubic-bezier(.24,.7,.25,1);background-image:linear-gradient(100deg,#0e7180 0%,#39bed1 40%,#76dfec 52%,#39bed1 66%,#0e7180 100%);background-size:220% 100%;animation:ce-energy-flow 3.8s linear infinite;will-change:width,background-position}
@keyframes ce-energy-flow{from{background-position:0% 50%}to{background-position:220% 50%}}
.ce-pulse{animation:ce-live-pulse 2.4s ease-in-out infinite}
@keyframes ce-live-pulse{50%{opacity:.4;transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.ce-track>span{transition:none;animation:none;will-change:auto}.ce-pulse{animation:none}}