/* ============================================================
   insider-threat.css — TOTAL Insider Threat page
   Reuses the shared product-page system (styles.css + idv.css).
   The only page-specific piece is the kill-chain cost curve in
   section 2; every other section uses the shared .idv-* system.
   Orange stays reserved for ONE thing: the Persona.
   ============================================================ */

/* Hero lede: this page's intro is longer, so widen its column to land in 3 lines (shared default is 640px). */
.idv-hero .idv-lede { max-width: 830px; }

/* Prediction-engine lede (section 3) runs longer; widen its column so it lands in 5 lines, not 6. */
.idv-lede.it-lede-wide { max-width: 800px; }

/* ---- Kill-chain cost curve (the problem: catch late = 612x) ----
   Framed to match the screenshot panels (.idv-frame) so every section's
   figure reads as the same kind of object. */
.it-killchain {
  position: relative;
  margin: 60px 0 0;
  padding: 48px 52px 40px;
  background: #0c0c0d;
  border: .5px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 50px 130px -58px rgba(0,0,0,.92);
}
.it-killchain::after { content: ""; position: absolute; inset: 0; border-radius: 16px; border: 1px solid rgba(255,255,255,.045); pointer-events: none; }
.it-killchain svg { display: block; width: 100%; height: auto; overflow: visible; }

.it-kc-grid { stroke: rgba(255,255,255,.045); stroke-width: 1; stroke-dasharray: 3 5; }
.it-kc-axis { stroke: var(--border); stroke-width: 1; }
/* axis framing: direction arrows + rotated/centered axis titles (cost vs kill chain) */
.it-kc-axis-arrow { fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.it-kc-axis-title { fill: var(--text-3); font-family: "Inter Tight", sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.it-kc-area { stroke: none; }
.it-kc-drop { stroke: rgba(255,255,255,.12); stroke-width: 1; stroke-dasharray: 4 4; }
/* curve stroke colour comes from the kc-stroke gradient (grey -> red) set on the SVG path */
.it-kc-curve { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 7px rgba(239,68,68,.42)); stroke-dasharray: 1300; stroke-dashoffset: 1300; }
.reveal.in .it-kc-curve { animation: it-trajdraw 2.1s var(--ease) .2s forwards; }
@keyframes it-trajdraw { to { stroke-dashoffset: 0; } }

/* two-line x-axis: remediation cost (top) over kill-chain phase (bottom) */
.it-kc-cost { fill: var(--text-2); font-family: "Inter Tight", sans-serif; font-size: 13.5px; font-weight: 600; }
.it-kc-xphase { fill: var(--text-3); font-family: "Inter Tight", sans-serif; font-size: 12.5px; }
.it-kc-cost.danger, .it-kc-xphase.danger { fill: #ef4444; }

.it-kc-bignum { fill: var(--text); font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 60px; letter-spacing: -.02em; }
.it-kc-bigx { fill: #ef4444; }
.it-kc-sub { fill: var(--text-3); font-family: "Inter Tight", sans-serif; font-size: 13px; }

/* TOTAL's early-catch zone: orange band over the cheap intent phases (mirror of the deck's red 'expensive' RHS band) */
.it-kc-intent-band { stroke: none; }
.it-kc-intent-edge { stroke: rgba(226,99,46,.4); stroke-width: 1; stroke-dasharray: 4 4; }
.it-kc-total-dot { fill: #e2632e; filter: drop-shadow(0 0 8px rgba(226,99,46,.75)); }
.it-kc-total-label { fill: #f18e61; font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 600; }
.it-kc-mid-dot { fill: #0c0c0d; stroke: var(--text-2); stroke-width: 2; }
.it-kc-mid-label { fill: var(--text-2); font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 600; }
.it-kc-late-dot { fill: #0c0c0d; stroke: #ef4444; stroke-width: 2.5; }
.it-kc-late-label { fill: #ef4444; font-family: "Inter Tight", sans-serif; font-size: 14px; font-weight: 600; }

/* the 0-1 narrative: quiet lurk (low and slow, grey track) -> swift exfiltration (rapid damage, red spike) */
.it-kc-lurk-label { fill: var(--text-2); font-family: "Inter Tight", sans-serif; font-size: 12px; letter-spacing: .02em; }
.it-kc-lurk-line { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 4; }
.it-kc-lurk-arrow { fill: none; stroke: var(--text-3); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.it-kc-exfil-label { fill: #ef4444; font-family: "Inter Tight", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: .01em; }

/* fade-in delay is set per-element by JS (left-to-right, synced with the line draw); falls back to a single fade if JS is off */
.reveal .it-kc-fade { opacity: 0; transition: opacity .6s var(--ease) .2s; }
.reveal.in .it-kc-fade { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal .it-kc-fade { transition-duration: .3s; } }

@media (max-width: 760px) {
  .it-killchain { padding: 26px 22px 24px; }
  .it-kc-bignum { font-size: 44px; }
  .it-kc-sub { font-size: 11px; }
  .it-kc-cost { font-size: 11.5px; }
  .it-kc-xphase { font-size: 10.5px; }
  .it-kc-lurk-label, .it-kc-exfil-label, .it-kc-total-label, .it-kc-mid-label, .it-kc-late-label { font-size: 11px; }
  .idv-uc { grid-template-columns: 1fr; }
  .idv-hero-shot { margin-top: 36px; }
}