/* Prywatność (scena 8): „0 klatek”, schemat lokal → chmura, trzy punkty */
.priv{display:grid;gap:clamp(36px,5vw,56px)}
.priv-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.stat{display:grid;gap:10px;justify-items:start;container-type:inline-size}
/* „0 klatek” ma ok. 2,6 em szerokości: rozmiar do 34% kolumny zostawia zapas, więc liczba nigdy nie wchodzi w odstęp obok */
.stat b{font-size:clamp(56px,min(10.5vw,34cqi),150px);font-variant-numeric:tabular-nums;color:var(--on-night);white-space:nowrap}
.stat span{font-size:clamp(20px,2.2vw,28px);color:var(--on-night-2);font-weight:500;max-width:22ch;line-height:1.25}

/* schemat: lokal, linia z pakietami, chmura */
.flowd{display:grid;grid-template-columns:minmax(0,1fr) minmax(64px,.5fr) minmax(0,1fr);align-items:stretch}
.fbox{background:var(--night-2);border:1px solid var(--night-line);border-radius:var(--r-media);padding:22px;display:grid;gap:16px;align-content:start;min-width:0}
.fbox h3{font-size:18px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.fbox h3 small{font-size:12.5px;font-weight:500;color:var(--on-night-2)}
.dev{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px;border-radius:14px;background:color-mix(in srgb,var(--on-night) 4%,transparent);--ic:var(--on-night-2)}
.dev b{display:block;font-size:15px}
.dev span{font-size:13.5px;color:var(--on-night-2)}
.dev.device{--ic:var(--blue-bright)}
.dev.trash{background:color-mix(in srgb,var(--plan-crit) 8%,transparent);--ic:var(--plan-crit)}
.ico-bg{fill:var(--ic);fill-opacity:.14}
.ico-ln{fill:none;stroke:var(--ic);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}

.pipe{position:relative;display:grid;place-items:center}
.pipe::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--night-line)}
.pipe i{position:absolute;top:calc(50% - 4px);left:0;width:8px;height:8px;border-radius:50%;background:var(--blue-bright);box-shadow:0 0 12px var(--blue-bright);animation:packet 2.2s linear infinite}
.pipe i:nth-child(2){animation-delay:.73s}
.pipe i:nth-child(3){animation-delay:1.46s}
@keyframes packet{from{left:0;opacity:0}15%{opacity:1}85%{opacity:1}to{left:calc(100% - 8px);opacity:0}}
.pipe span{position:relative;background:var(--night);padding:4px 10px;border-radius:999px;font-size:12px;color:var(--on-night-2);border:1px solid var(--night-line);white-space:nowrap}

/* zdarzenia w chmurze: nowe na górze, najwyżej 4 */
.flow-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-height:212px;align-content:start}
.flow-list li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;font-size:14px;
  background:color-mix(in srgb,var(--blue-bright) 8%,transparent);border:1px solid color-mix(in srgb,var(--blue-bright) 18%,transparent);animation:flowIn .5s ease}
.flow-list li:not(:first-child){opacity:.82}
.flow-list b{font-weight:650}
.flow-list span{color:var(--on-night-2)}
.flow-list time{font-size:12.5px;color:var(--on-night-2)}
@keyframes flowIn{from{opacity:0;transform:translateY(-6px)}}

/* przycisk pauzy animacji pod schematem, z prawej (WCAG 2.2.2) */
.flow-pause{justify-self:end;margin-top:calc(-1 * clamp(20px,3vw,36px));display:inline-flex;align-items:center;gap:8px;border:1px solid var(--night-line);cursor:pointer;
  font:600 13px var(--f-sans);padding:5px 12px 5px 10px;border-radius:999px;background:color-mix(in srgb,var(--on-night) 6%,transparent);color:var(--on-night-2)}
.flow-pause::before{content:"";width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor;box-sizing:border-box}
.flow-pause.is-paused::before{border:0;border-left:8px solid currentColor;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent}
.flow-pause:hover{color:var(--on-night);border-color:var(--on-night-2)}
.flowd.paused .pipe i,.flowd.paused .flow-list li{animation-play-state:paused}

.priv-points{list-style:none;margin:0;padding:28px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid var(--night-line)}
.priv-points li{color:var(--on-night-2);font-size:15px}
.priv-points b{display:block;color:var(--on-night);font-weight:600;margin-bottom:4px}

@media (max-width:980px){
  .priv-head,.priv-points{grid-template-columns:minmax(0,1fr)}
  .flowd{grid-template-columns:minmax(0,1fr)}
  .pipe{height:64px}
  .pipe::before{left:50%;right:auto;top:0;bottom:0;border-top:0;border-left:2px dashed var(--night-line)}
  .pipe i{left:calc(50% - 4px);top:0;animation-name:packetV}
  @keyframes packetV{from{top:0;opacity:0}15%{opacity:1}85%{opacity:1}to{top:calc(100% - 8px);opacity:0}}
}
@media (prefers-reduced-motion:reduce){
  .pipe i{display:none}
  .flow-pause{display:none}
}
/* pakiety przesuwane przewijaniem przy pierwszym wejściu (T-033, privacy-flow.js) */
.pipe.is-scrubbed i{animation:none}