/* ==========================================================================
   Click On Screens · Our products & services: dot-matrix illustrations
   (js/products-viz.js). The visuals of the solution pages' spotlights
   (solutions/css/styles.css, light tone), restyled for the carousel card.
   Every entrance runs only under .is-live; a pane without it shows its
   final state.
   ========================================================================== */
.pviz {
  --accent: #dc4f35;
  --gold: #ce9a20;
  --fg: #17181f;
  --fg-2: #3d3f4a;
  --fg-3: #5f616c;
  --fg-4: rgba(23,24,31,.2);
  --line: rgba(23,24,31,.1);
  --line-2: rgba(23,24,31,.18);
  --hover-bg: rgba(23,24,31,.05);
  --dot-off: rgba(23,24,31,.11);
  --dot-dim: rgba(23,24,31,.32);
  --trace: rgba(23,24,31,.2);
  --bg: #f4f4f6;
  --ease: cubic-bezier(.2,.7,.1,1);
  position: relative;
  width: 100%; height: 100%;
  overflow: hidden;
  /* the panel: light grey card with a faint LED grid */
  background:
    radial-gradient(circle, rgba(23,24,31,.07) 1.2px, transparent 1.6px) 0 0 / 18px 18px,
    linear-gradient(180deg, #f7f7f8 0%, #eeeef1 100%);
  color: var(--fg);
  font: 13px/1.35 var(--f-body);
}
.pviz__pane { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease-inout), visibility 0s .5s; }
.pviz__pane.is-current { opacity: 1; visibility: visible; transition: opacity .5s var(--ease-inout); }
.pviz__fit { position: absolute; left: 0; top: 0; display: grid; place-items: center; transform-origin: 0 0; }
.pviz__in { width: 400px; display: grid; gap: 18px; }
.pviz svg { display: block; width: 100%; height: auto; overflow: visible; }
.pviz .ax { font: 11px var(--f-body); fill: var(--fg-3); }
.pviz .tx { font: 12px var(--f-body); fill: var(--fg-3); }
.pviz .mk { stroke: var(--fg-3); stroke-dasharray: 2 4; }

/* shared entrances */
@keyframes pv-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes pv-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pv-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pv-grow-x { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pv-grow-y { from { transform: scaleY(0); } to { transform: none; } }
@keyframes pv-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* LED-style selection (lists and tabs that are pictures, not controls) */
.pviz .pm-in span, .pviz .ds-pick span { display: flex; align-items: center; gap: 10px; padding: 7px 4px; color: var(--fg-3); transition: color .25s; }
.pviz .pm-in span::before, .pviz .ds-pick span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1.5px var(--line-2); transition: background .25s, box-shadow .25s, opacity .25s; }
.pviz .pm-in span.on, .pviz .ds-pick span.on { color: var(--fg); font-weight: 500; }
.pviz .pm-in span.on::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(220,79,53,.16), 0 0 10px rgba(220,79,53,.6); }

/* ---------- Manage ---------- */
.pviz .mg { display: grid; gap: 22px; }
.pviz .seg { justify-self: start; display: inline-flex; padding: 3px; gap: 2px; background: var(--hover-bg); border: 1px solid var(--line); border-radius: 8px; }
.pviz .seg span { display: grid; place-items: center; min-height: 32px; padding: 0 11px; border-radius: 6px; font-size: 12.5px; color: var(--fg-2); white-space: nowrap; transition: background .25s, color .25s; }
.pviz .seg span.on { background: var(--accent); color: #fff; }
.pviz .mg-net { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pviz .mg-site { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pviz .mg-site i { aspect-ratio: 4 / 3; border-radius: 4px; background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .35s var(--ease), box-shadow .35s; transition-delay: calc(var(--k, 0) * 22ms); }
.pviz .mg-site i.on { background: var(--accent); box-shadow: 0 6px 14px -8px rgba(220,79,53,.8); }
.pviz .mg-site span { grid-column: 1 / -1; margin-top: 4px; font-size: 12px; color: var(--fg-3); text-align: center; }

/* ---------- Schedule ---------- */
.pviz .sc { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: center; }
.pviz .sc-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font-size: 11px; letter-spacing: .04em; color: var(--fg-3); text-align: center; }
.pviz .sc-loc { font-size: 12px; color: var(--fg-3); white-space: nowrap; }
.pviz .sc-trk { position: relative; height: 30px; border-radius: 6px; background: var(--hover-bg); }
.pviz .sc-bar { position: absolute; top: 4px; bottom: 4px; left: calc(var(--s) / 7 * 100% + 2px); width: calc((var(--e) - var(--s)) / 7 * 100% - 4px); display: flex; align-items: center; padding: 0 9px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pviz .sc-phw { position: absolute; left: 86px; right: 0; top: 18px; bottom: -4px; pointer-events: none; }
.pviz .sc-ph { position: absolute; left: 100%; top: 0; bottom: 0; width: 0; opacity: 0; }
.pviz .sc-ph::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px; background: var(--accent); }
.pviz .sc-ph::after { content: ""; position: absolute; left: -3px; top: -3px; width: 7.5px; height: 7.5px; border-radius: 50%; background: var(--accent); }
@keyframes pv-sweep { from { left: 0; opacity: 1; } 92% { opacity: 1; } to { left: 100%; opacity: 0; } }
@keyframes pv-lit { from { opacity: .25; } to { opacity: 1; } }
.is-live .sc-ph { animation: pv-sweep 1.9s linear both; }
.is-live .sc-bar { animation: pv-lit .25s ease both; animation-delay: calc(var(--s) / 7 * 1.9s); }

/* ---------- Distribute ---------- */
.pviz .ds { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 26px; align-items: center; }
.pviz .ds-estate { display: grid; gap: 8px; }
.pviz .ds-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pviz .ds-s { position: relative; aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; background: var(--hover-bg); box-shadow: inset 0 0 0 1px var(--line-2); }
.pviz .ds-l { position: absolute; inset: 5px; border-radius: 3px; background: var(--c-bg); }
@keyframes pv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.is-live .ds-l { animation: pv-wipe .4s var(--ease) both; animation-delay: calc(.15s + var(--k, 0) * .14s); }
.pviz .ds-ctl { display: grid; gap: 12px; }
.pviz .ds-pick { display: grid; gap: 2px; }
.pviz .ds-pick span { font-size: 14px; }
.pviz .ds-pick span::before { background: var(--c); box-shadow: none; opacity: .35; }
.pviz .ds-pick span.on::before { opacity: 1; box-shadow: 0 0 0 3px rgba(23,24,31,.07); }
.pviz .ds-msg { padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg-3); }
.pviz .ds-msg b { font-weight: 500; color: var(--fg); }
.is-live .ds-msg { animation: pv-in .3s ease 1.1s both; }

/* ---------- Optimise ---------- */
.pviz .op-line { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 100; }
.pviz .op-mk circle { fill: var(--accent); stroke: #f4f4f6; stroke-width: 2; }
.pviz .op-mk text { font: 500 14px var(--f-body); fill: var(--fg-2); }
.pviz .op-mk { transform-box: fill-box; transform-origin: 50% 100%; }
.is-live .op-line { animation: pv-draw 1.5s var(--ease) both; }
.is-live .op-area { animation: pv-in .8s ease .5s both; }
.is-live .op-mk { animation: pv-pop .35s var(--ease) both; }
.is-live .op-mk.m1 { animation-delay: .35s; } .is-live .op-mk.m2 { animation-delay: .75s; } .is-live .op-mk.m3 { animation-delay: 1.15s; }

/* ---------- Scale ---------- */
.pviz .sn-hub { fill: var(--accent); }
.pviz .sn-hub-t { font: 500 12px var(--f-body); fill: #fff; }
.pviz .sn-bus { fill: none; stroke: var(--trace); stroke-width: 1.2; }
.pviz .sn-w { fill: none; stroke: var(--trace); stroke-width: 1.2; stroke-dasharray: 3 4; transition: stroke .4s; }
.pviz .sn-ph { fill: none; stroke: var(--line-2); stroke-dasharray: 3 3; }
.pviz .sn-live { opacity: 0; transform: scale(.85); transform-box: fill-box; transform-origin: center; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.pviz .sn-live rect.b { fill: #fff; stroke: var(--line-2); }
.pviz .sn-live rect.s { fill: var(--accent); }
.pviz .sn-site.on .sn-live { opacity: 1; transform: none; }
.pviz .sn-site.on .sn-w { stroke: var(--accent); stroke-dasharray: none; }
.pviz .sn-ctl { display: grid; gap: 10px; margin-top: 18px; }
.pviz .sn-out { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--fg-3); }
.pviz .sn-out b { font-weight: 500; color: var(--fg); }
.pviz .sn-bar { --p: 100%; position: relative; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--p), var(--line-2) var(--p)); }
.pviz .sn-bar::after { content: ""; position: absolute; top: 50%; left: var(--p); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--accent), 0 2px 6px rgba(0,0,0,.15); }

/* ---------- Advertising Management ---------- */
.pviz .pc { fill: var(--hover-bg); stroke: var(--line-2); }
.pviz .pc-sel { transform-box: fill-box; transform-origin: center; }
.pviz .pc-sel rect { fill: var(--accent); }
.pviz .pc-sel rect.pip { fill: rgba(255,255,255,.55); }
.pviz .pv-plan .tx { font-size: 13px; fill: var(--fg-2); }
.pviz .pv-plan .ax { font-size: 12px; }
.is-live .pc-sel { animation: pv-pop .4s var(--ease) both; animation-delay: calc(.2s + var(--k, 0) * .16s); }

/* ---------- Campaign Deployment ---------- */
.pviz .hub-r { fill: #15162b; }
.pviz .hub-t { font: 500 13px var(--f-body); fill: #fff; }
.pviz .dp { fill: none; stroke: var(--trace); stroke-width: 1.2; }
.pviz .dpp { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 8 92; opacity: 0; }
.pviz .scr-b { fill: #1b1c28; }
.pviz .scl rect { fill: var(--accent); }
.pviz .scl text { font: 500 12px var(--f-pixel); fill: #fff; }
@keyframes pv-pulse { 0% { stroke-dashoffset: 0; opacity: 1; } 95% { opacity: 1; } 100% { stroke-dashoffset: -92; opacity: 0; } }
.is-live .dpp { animation: pv-pulse .6s linear both; animation-delay: calc(.15s + var(--k, 0) * .16s); }
.is-live .scl { animation: pv-in .25s ease both; animation-delay: calc(.7s + var(--k, 0) * .16s); }

/* ---------- Creative Content (the image layer is a dot-matrix graphic) ---------- */
.pviz .cc { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.pviz .cc-screen { order: -1; position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #0d0e24; box-shadow: 0 0 0 4px #15162b, 0 18px 30px -18px rgba(0,0,0,.6); container-type: size; }
.pviz .cc-layers { list-style: none; margin: 0; padding: 0; display: grid; font-size: 13.5px; color: var(--fg); counter-reset: ly; }
.pviz .cc-layers li { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--line); counter-increment: ly; }
.pviz .cc-layers li:last-child { border-bottom: 1px solid var(--line); }
.pviz .cc-layers li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); flex: none; }
.pviz .cc-layers li::after { content: "Layer " counter(ly); margin-left: auto; font-size: 11.5px; color: var(--fg-3); white-space: nowrap; }
.pviz .cc-l { position: absolute; }
.pviz .cc-bg { inset: 0; background: linear-gradient(120deg, #a23c16, #dc4f35); }
.pviz .cc-img { right: 7%; top: 16%; width: 38%; height: auto; fill: rgba(255,255,255,.92); }
.pviz .cc-h { left: 7%; top: 18%; font: 500 15cqh/1 var(--f-pixel); color: #fff; }
.pviz .cc-h i { font-style: normal; color: #0e0f1e; }
.pviz .cc-h small { display: block; margin-top: 4cqh; font: 500 6.5cqh var(--f-body); letter-spacing: .08em; text-transform: uppercase; opacity: .9; }
.pviz .cc-cta { left: 7%; bottom: 14%; padding: 3cqh 6cqh; border-radius: 99px; background: #fff; color: #0e0f1e; font: 500 7cqh var(--f-body); }
.pviz .cc-guides { position: absolute; inset: 7%; border: 1px dashed rgba(255,255,255,.4); border-radius: 3px; opacity: 0; }
.pviz .cc-bg { --from: translateX(-8%); } .pviz .cc-img { --from: translateX(10%); } .pviz .cc-h { --from: translateY(10%); } .pviz .cc-cta { --from: scale(.6); }
@keyframes pv-layer { from { opacity: 0; transform: var(--from, none); } to { opacity: 1; transform: none; } }
@keyframes pv-tick { from { opacity: .25; } to { opacity: 1; } }
@keyframes pv-guides { 0% { opacity: .9; } 100% { opacity: 0; } }
.is-live .cc-l { animation: pv-layer .45s var(--ease) both; animation-delay: calc(.1s + var(--k, 0) * .4s); }
.is-live .cc-layers li { animation: pv-tick .3s ease both; animation-delay: calc(.1s + var(--k, 0) * .4s); }
.is-live .cc-guides { animation: pv-guides 1.4s ease both; }

/* ---------- Screens showing a creative (Promotional Content, Content performance) ---------- */
.pviz .pm-screen { position: relative; overflow: hidden; container-type: size; background: #05050c; }
.pviz .cr { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 3cqmin; padding: 8cqmin; background: var(--bg-c); color: var(--fg-c, #fff); isolation: isolate; }
.pviz .cr-kicker { font: 500 max(7px, 5.5cqmin) var(--f-body); letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.pviz .cr-title { font: 500 min(22cqmin, calc(150cqw / var(--len, 6)))/1 var(--f-pixel); letter-spacing: -0.01em; }
.pviz .cr-title i { font-style: normal; color: var(--dotc, #0e0f1e); }
.pviz .cr-pattern { position: absolute; inset: 0; z-index: -1; opacity: .35; background-image: radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.4px); background-size: 7cqmin 7cqmin; }
/* the LED pitch over the creative */
.pviz .pm-screen::after, .pviz .cp-screen::after { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px), radial-gradient(circle, transparent 0 .9px, rgba(0,0,0,.55) 1.5px) 0 0 / 3px 3px; }
@keyframes pv-scrwipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.is-live .cr { animation: pv-scrwipe .8s var(--ease) .15s both; }

/* ---------- Promotional Content ---------- */
.pviz .pm { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1.2fr); gap: 12px; align-items: center; }
.pviz .pm-in { display: grid; gap: 2px; font-size: 13px; line-height: 1.25; }
.pviz .pm-arrow { width: 22px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pviz .pm-screen { width: 100%; aspect-ratio: 16 / 10; border-radius: 4px; box-shadow: 0 0 0 4px #15162b, 0 0 30px rgba(220,79,53,.25); }

/* ---------- Multi-Site Campaigns ---------- */
.pviz .mu { position: relative; display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 14px 36px; align-items: center; }
.pviz .mu-w { position: absolute; left: 0; top: 0; width: 400px; height: 118px; z-index: 0; fill: none; stroke: var(--trace); stroke-width: 1.2; }
.pviz .mu-master, .pviz .mu-s { position: relative; z-index: 1; border-radius: 6px; background: #15162b; color: #fff; display: grid; place-items: center; text-align: center; }
.pviz .mu-master { height: 64px; align-content: center; box-shadow: 0 0 0 1px rgba(220,79,53,.5), 0 0 24px rgba(220,79,53,.2); align-self: start; margin-top: 26px; }
.pviz .mu-master .mu-t { color: var(--accent); }
.pviz .mu-master small, .pviz .mu-s small { font-size: 10px; line-height: 1.2; color: rgba(255,255,255,.6); }
.pviz .mu-sites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pviz .mu-s { height: 54px; align-content: center; background: var(--g); }
.pviz .mu-t { font: 500 15px/1.1 var(--f-pixel); }
.pviz .mu-t i { font-style: normal; color: #0e0f1e; }
.pviz .mu-s .mu-t { grid-area: 1 / 1; }
.pviz .mu-s small { grid-area: 2 / 1; color: rgba(255,255,255,.85); }
.pviz .mu-s .mu-t.a { opacity: 0; }
.pviz .mu-mode { grid-column: 1 / -1; display: grid; justify-self: start; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.pviz .mu-mode > span { grid-area: 1 / 1; }
.pviz .mu-mode .a { opacity: 0; }
/* consistent first (every site shows the master), then tailored per site group */
@keyframes pv-tailor { 0%, 45% { background: var(--accent); } 60%, 100% { background: var(--g); } }
@keyframes pv-show-a { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes pv-show-b { 0%, 50% { opacity: 0; } 60%, 100% { opacity: 1; } }
.is-live .mu-s { animation: pv-tailor 2.2s var(--ease) both; }
.is-live .mu-s .mu-t.a, .is-live .mu-mode .a { animation: pv-show-a 2.2s ease both; }
.is-live .mu-s .mu-t.b, .is-live .mu-mode .b { animation: pv-show-b 2.2s ease both; }
.is-live .mu-s .mu-t.b { animation-delay: calc(var(--k, 0) * 40ms); }

/* ---------- Customer traffic and engagement ---------- */
.pviz .tb { display: grid; gap: 14px; }
.pviz .tb-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: center; gap: 14px; }
.pviz .tb-l { font-size: 13px; line-height: 1.2; white-space: nowrap; color: var(--fg-2); }
.pviz .tb-track { position: relative; height: 20px; }
.pviz .tb-t { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 4px; background: var(--fg-4); transform-origin: left center; }
.pviz .tb-e { position: absolute; left: 0; top: 0; bottom: 0; width: var(--s); border-radius: 4px; background: var(--accent); opacity: .9; transform-origin: left center; }
.is-live .tb-t { animation: pv-grow-x .8s var(--ease) both; animation-delay: calc(.1s + var(--k, 0) * 90ms); }
.is-live .tb-e { animation: pv-grow-x .7s var(--ease) both; animation-delay: calc(.6s + var(--k, 0) * 90ms); }

/* legends */
.pviz .inst-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--fg-3); }
.pviz .inst-legend span { display: inline-flex; align-items: center; gap: 8px; }
.pviz .inst-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.pviz .inst-legend i.trf { background: var(--fg-4); border-radius: 2px; }
.pviz .inst-legend i.eng { border-radius: 2px; }
.pviz .heat-legend { gap: 6px; }
.pviz .heat-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- Location performance ---------- */
.pviz .land { fill: var(--dot-off); }
.pviz .pin path { fill: var(--dot-dim); }
.pviz .pin.top path { fill: var(--accent); }
.pviz .pin circle.hole { fill: var(--bg); }
.pviz .pin .halo { fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pviz .pin-l { font: 500 12px var(--f-body); fill: var(--fg-2); }
.pviz .pin-l.top { fill: var(--fg); }
@keyframes pv-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes pv-halo { 0% { opacity: .8; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.2); } }
.is-live .land { animation: pv-in .5s ease both; }
.is-live .pin { animation: pv-drop .5s var(--ease) both; animation-delay: calc(.3s + var(--k, 0) * 120ms); }
.is-live .pin.top .halo { animation: pv-halo 1.2s var(--ease) 1s 2; }

/* ---------- Campaign effectiveness ---------- */
.pviz .col { fill: var(--fg-4); transform-box: fill-box; transform-origin: bottom; }
.pviz .col.after { fill: var(--accent); }
.pviz .base-l { stroke: var(--line-2); }
.is-live .col { animation: pv-grow-y .6s var(--ease) both; animation-delay: calc(.15s + var(--k, 0) * 70ms); }

/* ---------- Customer interaction patterns ---------- */
.pviz .ip { display: grid; list-style: none; margin: 0; padding: 0; }
.pviz .ip-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.pviz .ip-row:first-child { border-top: 0; padding-top: 4px; }
.pviz .ip-pct { display: grid; gap: 6px; }
.pviz .ip-pct b { font: 500 22px/1 var(--f-display); letter-spacing: -0.02em; color: var(--fg); }
.pviz .ip-bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.pviz .ip-bar i { display: block; height: 100%; width: var(--w); background: var(--c); border-radius: 2px; transform-origin: left center; }
.pviz .ip-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; min-width: 0; }
.pviz .ip-name { font-size: 15px; font-weight: 500; color: var(--fg); white-space: nowrap; }
.pviz .ip-path { font-size: 13px; color: var(--fg-3); }
.pviz .ip-path i { font-style: normal; padding: 0 2px; color: var(--c); }
.is-live .ip-row { animation: pv-up .45s var(--ease) both; animation-delay: calc(.1s + var(--k, 0) * .15s); }
.is-live .ip-bar i { animation: pv-grow-x .7s var(--ease) both; animation-delay: calc(.4s + var(--k, 0) * .15s); }

/* ---------- Content performance ---------- */
.pviz .cp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: 20px; align-items: end; }
.pviz .cp-screen { position: relative; aspect-ratio: 9 / 14; container-type: size; padding: 5px; border-radius: 6px; background: #0b0b10; box-shadow: 0 18px 30px -18px rgba(0,0,0,.6); }
.pviz .cp-screen .cr { inset: 5px; border-radius: 3px; overflow: hidden; container-type: size; }
.pviz .cp-screen::after { inset: 5px; border-radius: 3px; }
.pviz .cp-chart .area { fill: rgba(220,79,53,.1); }
.pviz .cp-chart .curve { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.pviz .cp-chart .peak text { font: 500 12px var(--f-body); fill: var(--fg-2); }
.pviz .cp-chart .peak circle { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.pviz .cp-head { stroke: var(--fg-3); stroke-width: 1; stroke-dasharray: 2 3; }
.pviz .cp-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.is-live .cp-chart .area, .is-live .cp-chart .curve { animation: pv-in .5s ease both; }
.is-live .cp-chart .peak { animation: pv-in .3s ease 1s both; }

/* ---------- Operational trends ---------- */
.pviz .heat { fill: var(--accent); opacity: var(--a, 1); }
.pviz .now-band { fill: var(--fg); fill-opacity: .06; stroke: var(--accent); stroke-opacity: .55; stroke-width: 1.2; opacity: 0; }
@keyframes pv-heat { from { opacity: 0; } to { opacity: var(--a, 1); } }
@keyframes pv-hours { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 1; transform: translateX(var(--span)); } }
.is-live .heat { animation: pv-heat .35s ease both; animation-delay: calc(var(--k, 0) * 40ms); }
.is-live .now-band { animation: pv-hours 1.4s steps(5, jump-none) .7s both; }

@media (prefers-reduced-motion: reduce) {
  .pviz *, .pviz *::before, .pviz *::after { animation: none !important; transition: none !important; }
}