/* Shared original cybersecurity artwork. Motion never carries essential meaning. */
.security-graphic{--sg-ink:#102a3b;--sg-accent:#146b68;--sg-alert:#924b18;--sg-surface:#f4f1e8;--sg-line:#526f70;box-sizing:border-box;background:var(--sg-surface);color:var(--sg-ink);margin:0;padding:20px;border:1px solid var(--line);border-radius:5px;min-width:0}
.dark-mode .security-graphic{--sg-ink:#f4f1e8;--sg-accent:#48d2bf;--sg-alert:#f0be73;--sg-surface:#101f2a;--sg-line:#a7b9bd}
.security-graphic .security-art{display:block;width:100%;height:auto;aspect-ratio:3/2;font-family:'DM Sans',sans-serif}
.security-hero-visual{min-width:0;align-self:start;display:grid;gap:18px}
.security-hero-visual .product-summary{margin:0;padding:22px}
.security-hero-visual .product-summary h2{font-size:22px;margin-bottom:14px}
.security-hero-visual .product-summary dl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:10px 14px;align-items:start}
.security-hero-visual .product-summary dt{margin:0;font-size:16px}
.security-hero-visual .product-summary dd{margin:0;font-size:17px}
.security-hero-visual .product-summary .summary-note{margin-top:16px;padding-top:14px;font-size:16px}
.security-overview{max-width:560px;margin:28px auto}
.security-graphic figcaption{font-size:16px;line-height:1.5;color:var(--sg-ink)}
@media(max-width:800px){.security-graphic{padding:14px}.security-hero-visual{margin-top:10px}.security-overview{max-width:480px}.security-hero-visual .product-summary{padding:20px}}
@media(prefers-reduced-motion:reduce){.security-graphic *{animation:none!important;transition:none!important}}
/* Original overview illustration. Parent supplies the five --sg-* tokens.
   Intentionally static: every state, including reduced motion, is final art. */
.security-graphic--overview {
  margin: 0;
  width: 100%;
  color: var(--sg-ink);
  background: var(--sg-surface);
}
.security-graphic--overview .security-art--overview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  overflow: visible;
  font-family: inherit;
}
.security-graphic--overview .overview-heading,
.security-graphic--overview .overview-business-label {
  fill: var(--sg-ink);
  font-family: inherit;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.6px;
}
.security-graphic--overview .overview-secondary {
  fill: var(--sg-accent);
  font-family: inherit;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: 1px;
}
.security-graphic--overview .overview-outline {
  fill: var(--sg-surface);
  stroke: var(--sg-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.security-graphic--overview .overview-detail {
  fill: none;
  stroke: var(--sg-ink);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.security-graphic--overview .overview-accent,
.security-graphic--overview .overview-connector {
  fill: none;
  stroke: var(--sg-accent);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.security-graphic--overview .overview-node {
  fill: var(--sg-accent);
}
.security-graphic--overview figcaption {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--sg-line);
  color: var(--sg-ink);
  font: inherit;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Inline SVG illustration. The host owns all state changes; no asset runtime. */
.security-graphic--itdr { margin:0; color:var(--sg-ink,#102a3b); }
.security-graphic--itdr .security-art--itdr { display:block; width:100%; height:auto; overflow:hidden; font-family:inherit; }
.security-graphic--itdr .itdr-ink { stroke:var(--sg-ink,#102a3b); }
.security-graphic--itdr .itdr-surface { fill:var(--sg-surface,#f4f1e8); }
.security-graphic--itdr .itdr-accent { stroke:var(--sg-accent,#146b68); }
.security-graphic--itdr .itdr-alert { stroke:var(--sg-alert,#936019); }
.security-graphic--itdr .itdr-route { stroke:var(--sg-line,#738986); }
.security-graphic--itdr .itdr-construction { stroke:var(--sg-line,#738986); opacity:.38; }
.security-graphic--itdr .itdr-labels { fill:var(--sg-ink,#102a3b); }
.security-graphic--itdr figcaption { margin:12px 0 0; font-size:16px; line-height:1.5; color:inherit; }
.security-graphic--itdr[data-state="playing"] .itdr-token { animation:itdr-token-settle 900ms ease-out 1; transform-box:fill-box; transform-origin:center; }
.security-graphic--itdr[data-state="playing"] .itdr-anomaly { animation:itdr-attention 1400ms ease-out 450ms 1; }
.security-graphic--itdr[data-state="playing"] .itdr-lens { animation:itdr-inspect 1800ms ease-out 900ms 1; transform-box:fill-box; transform-origin:center; }
@keyframes itdr-token-settle { from {transform:translateX(-8px);} to {transform:translateX(0);} }
@keyframes itdr-attention { 0%,100% {stroke-opacity:1;} 45% {stroke-opacity:.55;} }
@keyframes itdr-inspect { from {transform:translate(5px,3px) rotate(2deg);} to {transform:translate(0,0) rotate(0);} }
@media (prefers-reduced-motion:reduce) {
  .security-graphic--itdr[data-state="playing"] .itdr-token,
  .security-graphic--itdr[data-state="playing"] .itdr-anomaly,
  .security-graphic--itdr[data-state="playing"] .itdr-lens { animation:none; transform:none; }
}

/* Inline SVG companion. Parent supplies theme variables and motion lifecycle. */
.security-graphic--edr { margin:0; color:var(--sg-ink, #102a3b); font-family:inherit; }
.security-graphic--edr .security-art--edr { display:block; width:100%; height:auto; overflow:visible; }
.security-graphic--edr .edr-label { fill:var(--sg-ink, #102a3b); font-family:inherit; font-size:24px; font-weight:500; letter-spacing:-.5px; }
.security-graphic--edr .edr-ink-line,
.security-graphic--edr .edr-route { fill:none; stroke:var(--sg-ink, #102a3b); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.security-graphic--edr .edr-device { fill:var(--sg-surface, #f4f1e8); stroke:var(--sg-ink, #102a3b); stroke-width:2.5; }
.security-graphic--edr .edr-screen { fill:var(--sg-surface, #f4f1e8); stroke:var(--sg-line, #78918e); stroke-width:1.5; }
.security-graphic--edr .edr-node { fill:var(--sg-surface, #f4f1e8); stroke:var(--sg-ink, #102a3b); stroke-width:2.5; }
.security-graphic--edr .edr-process-trace { fill:none; stroke:var(--sg-alert, #94601a); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.security-graphic--edr .edr-lens { fill:var(--sg-surface, #f4f1e8); stroke:var(--sg-accent, #146b68); stroke-width:3.5; }
.security-graphic--edr .edr-lens-handle { stroke-width:7; }
.security-graphic--edr .edr-alert-shape { fill:var(--sg-surface, #f4f1e8); stroke:var(--sg-alert, #94601a); stroke-width:2.5; }
.security-graphic--edr .edr-alert-mark { fill:none; stroke:var(--sg-alert, #94601a); stroke-width:3; stroke-linecap:round; }
.security-graphic--edr .edr-containment { fill:none; stroke:var(--sg-accent, #146b68); stroke-width:2; stroke-dasharray:7 7; }
.security-graphic--edr .edr-accent-line,
.security-graphic--edr .edr-gate-line { fill:none; stroke:var(--sg-accent, #146b68); stroke-width:3; stroke-linecap:round; }
.security-graphic--edr .edr-accent-text,
.security-graphic--edr .edr-network-dot { fill:var(--sg-accent, #146b68); }
.security-graphic--edr figcaption { margin-top:18px; font:inherit; font-size:16px; line-height:1.55; max-width:54ch; color:var(--sg-ink, #102a3b); }
/* Everything stays visible: motion adds emphasis, never supplies the story. */
.security-graphic--edr[data-state="playing"] .edr-investigation { animation:security-edr-investigate 1.8s ease-out 1; }
.security-graphic--edr[data-state="playing"] .edr-containment { animation:security-edr-boundary 3.2s ease-out 1; }
.security-graphic--edr[data-state="playing"] .edr-gate { transform-box:fill-box; transform-origin:center; animation:security-edr-gate 3.2s ease-out 1; }
@keyframes security-edr-investigate { 0% { transform:translate(-7px,-3px); } 65%,100% { transform:translate(0,0); } }
@keyframes security-edr-boundary { from { stroke-dashoffset:28; } to { stroke-dashoffset:0; } }
@keyframes security-edr-gate { 0%,40% { transform:scaleY(.8); } 75%,100% { transform:scaleY(1); } }
@media (prefers-reduced-motion:reduce) {
  .security-graphic--edr[data-state="playing"] .edr-investigation,
  .security-graphic--edr[data-state="playing"] .edr-containment,
  .security-graphic--edr[data-state="playing"] .edr-gate { animation:none; }
}