/* P. 09 Private by design: a live line-art diagram of the client's data centre inside a thin red network boundary. */
.priv-mod { position: relative; overflow-x: clip; }
.priv-head .lead { max-width: 48ch; }
.priv-fig { position: relative; margin: 0; isolation: isolate; }
.priv-fig::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: 110%; height: 120%; transform: translate(-50%, -50%); background: radial-gradient(50% 50% at 50% 50%, rgba(183, 57, 31, 0.1), transparent 70%); pointer-events: none; }
.priv-stage { position: relative; border-radius: calc(var(--r-lg) + 6px); background: radial-gradient(90% 80% at 50% 45%, rgba(23, 26, 32, 0.9), rgba(11, 13, 16, 0.6)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 60px 120px -60px rgba(0, 0, 0, 0.9); }
.priv-canvas { display: block; width: 100%; aspect-ratio: 2 / 1; }
.priv-hits { position: absolute; inset: 0; pointer-events: none; }
.priv-hit { position: absolute; pointer-events: auto; border-radius: 14px; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.priv-hit:focus-visible { outline: 2px solid var(--red-lift); outline-offset: 4px; }
.priv-cap { display: flex; align-items: flex-start; justify-content: center; gap: 10px; margin-top: 18px; font: 500 0.8rem/1.5 var(--f-mono); letter-spacing: 0.02em; color: var(--fg-2); text-align: center; min-height: 2.4em; }
.priv-cap__dot { flex: none; width: 6px; height: 6px; margin-top: 0.55em; border-radius: 50%; background: var(--green-lift); box-shadow: 0 0 10px rgba(70, 199, 156, 0.7); }
.priv-cap__text i { font-style: normal; color: var(--red-lift); margin: 0 4px; }
.priv-cap__text b { font-weight: 600; color: var(--fg); }

.priv-points { list-style: none; margin: clamp(36px, 4.4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.priv-points li { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 18px 22px; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px var(--line); font: 600 clamp(1rem, 0.94rem + 0.3vw, 1.18rem)/1.3 var(--f-disp); letter-spacing: -0.015em; color: var(--fg); }
.priv-points svg { flex: none; width: 34px; height: 34px; color: var(--fg-2); }

@media (max-width: 900px) {
  .priv-points { grid-template-columns: minmax(0, 1fr); }
  .priv-points li { min-height: 64px; padding: 14px 18px; }
}
@media (max-width: 640px) {
  .priv-canvas { aspect-ratio: 10 / 16; }
  .priv-cap { justify-content: flex-start; text-align: left; font-size: 0.75rem; }
}