/* SPICE Insight™ product page: Neel's insight.jpg in HTML (markup in template-parts/fig-insight.php). */
.fig-insight .fg-insight-fig{--ink:#141b33;--navy:#16203d;container-type:inline-size;max-width:1240px;margin:0 auto;-webkit-font-smoothing:antialiased}
.fig-insight .fg-insight-fig *{box-sizing:border-box}
.fig-insight .fg-insight-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.fig-insight svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.fig-insight a{text-decoration:none;color:inherit}
.fig-insight a:focus-visible{outline:2px solid #ff3d5a;outline-offset:3px}

/* the picture's 1400×720 grid */
.fig-insight .fg-insight-stage{position:relative;aspect-ratio:1400/720;border-radius:2cqw;
  background:radial-gradient(60% 50% at 50% 30%,#fff,#f4f5f9 80%)}
.fig-insight .fg-insight-wires{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.fig-insight .fg-insight-paths path{opacity:.85;transition:opacity .3s,stroke-width .3s}
.fig-insight .fg-insight-logo{position:absolute;z-index:3;right:.9%;top:1.9%;width:12.7%;height:9.7%;display:grid;place-items:center;border-radius:1.1cqw;background:#0b0f1e;box-shadow:0 .4cqw 1.2cqw rgba(17,24,47,.25)}
.fig-insight .fg-insight-logo svg{width:76%;height:auto}

/* document cards */
.fig-insight .fg-insight-docs{list-style:none;margin:0;padding:0}
.fig-insight .fg-insight-docs>li{position:absolute;z-index:3;top:15.56%;width:16.29%;height:30.83%}
.fig-insight .fg-insight-c1{left:3.14%}.fig-insight .fg-insight-c2{left:22.57%}.fig-insight .fg-insight-c3{left:41.86%}.fig-insight .fg-insight-c4{left:61.29%}.fig-insight .fg-insight-c5{left:80.71%}
.fig-insight .fg-insight-card{--c:#ff7a00;display:flex;flex-direction:column;height:100%;padding:1.3cqw 1.05cqw 1.1cqw;border-radius:1.2cqw;background:#fff;color:#141b33;
  box-shadow:0 .1cqw .3cqw rgba(17,24,47,.06),0 1.2cqw 2.6cqw -1cqw rgba(17,24,47,.25);transition:transform .25s,box-shadow .25s}
.fig-insight .fg-insight-c2 .fg-insight-card{--c:#ff2a5a}.fig-insight .fg-insight-c3 .fg-insight-card{--c:#ff2a3d}.fig-insight .fg-insight-c4 .fg-insight-card{--c:#b8148f}.fig-insight .fg-insight-c5 .fg-insight-card{--c:#a3104f}
.fig-insight .fg-insight-card:hover,.fig-insight .fg-insight-card:focus-visible{transform:translateY(-.3cqw);box-shadow:0 0 0 .15cqw var(--c),0 1.4cqw 3cqw -1cqw rgba(17,24,47,.35)}
.fig-insight .is-alert .fg-insight-card{background:linear-gradient(#fff6f6,#fff);box-shadow:0 0 0 .15cqw #ff3d4f,0 0 1.6cqw rgba(255,40,60,.45),0 0 4cqw rgba(255,40,60,.25);animation:fg-insight-alarm 2.4s ease-in-out infinite}
@keyframes fg-insight-alarm{50%{box-shadow:0 0 0 .15cqw #ff3d4f,0 0 .8cqw rgba(255,40,60,.3),0 0 2cqw rgba(255,40,60,.12)}}
.fig-insight .fg-insight-head{display:flex;align-items:center;gap:.95cqw}
.fig-insight .fg-insight-ic{position:relative;display:grid;place-items:center;width:3.2cqw;height:3.6cqw;border-radius:.5cqw;background:var(--c);color:#fff;font-size:2.4cqw;flex:none}
.fig-insight .fg-insight-ic svg.i{stroke-width:1.7}
.fig-insight .fg-insight-badge{position:absolute;right:-.8cqw;bottom:-.7cqw;display:grid;place-items:center;width:1.9cqw;height:1.9cqw;border-radius:50%;background:var(--c);border:.2cqw solid #fff;font-size:1.3cqw}
.fig-insight .fg-insight-badge svg.i{stroke-width:3}
.fig-insight .fg-insight-head b{font-size:.98cqw;font-weight:800;letter-spacing:.01em;text-transform:uppercase}
.fig-insight .fg-insight-lines{display:flex;flex-direction:column;gap:.25cqw;margin-top:1.4cqw;font-size:1.1cqw;line-height:1.25}
.fig-insight .fg-insight-lines span{font-weight:700}
.fig-insight .fg-insight-lines small{font-size:1cqw;color:#6b7187}
.fig-insight .is-alert .fg-insight-lines span{color:#e01b2f}
.fig-insight .is-alert .fg-insight-lines small{color:#ff3d4f;font-weight:600}
.fig-insight .fg-insight-who{display:flex;align-items:center;gap:.6cqw;margin-top:.9cqw;padding:.45cqw .5cqw;border-radius:.7cqw;background:#ffe9eb;font-size:.95cqw;font-weight:600}
.fig-insight .fg-insight-av{display:grid;place-items:center;width:2.1cqw;height:2.1cqw;border-radius:50%;background:#d81b30;color:#fff;font-size:1.25cqw}
.fig-insight .fg-insight-late{display:inline-flex;align-items:center;gap:.3cqw;margin-left:auto;padding:.2cqw .6cqw;border-radius:99px;background:#ff3d4f;color:#fff;font-size:.85cqw}
.fig-insight .fg-insight-chain{display:flex;align-items:center;justify-content:center;gap:.4cqw;margin-top:auto;color:#8a90a6;font-size:2.3cqw}
.fig-insight .fg-insight-chain svg.i{stroke-width:1.3}
.fig-insight .fg-insight-chain i{width:1.4cqw;height:.12cqw;background:#9aa0b5;position:relative}
.fig-insight .fg-insight-chain i::after{content:'';position:absolute;right:0;top:-.25cqw;border:.3cqw solid transparent;border-left-color:#9aa0b5;border-right:0}

/* the dark Insight panel */
.fig-insight .fg-insight-panel{position:absolute;z-index:1;left:2.57%;top:55.28%;width:95%;height:40.28%;border-radius:2cqw;
  background:radial-gradient(60% 70% at 50% 30%,#1f2b52,var(--navy) 70%);box-shadow:0 1.4cqw 3cqw -1cqw rgba(17,24,47,.5)}
.fig-insight .fg-insight-hub{position:absolute;z-index:3;left:49.9%;top:22.1%;width:25.6%;height:22.8%;transform:translate(-50%,-50%);display:grid;place-items:center;border-radius:99px;
  color:#fff;font-size:2.15cqw;font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  background:linear-gradient(#141b33,#141b33) padding-box,linear-gradient(90deg,#ff8a1a,#ff2a3d 50%,#e0158f) border-box;border:.25cqw solid transparent;
  box-shadow:0 0 1.2cqw rgba(255,90,60,.55),0 0 3.5cqw rgba(255,40,110,.3);transition:box-shadow .25s,transform .25s}
.fig-insight .fg-insight-hub:hover,.fig-insight .fg-insight-hub:focus-visible{box-shadow:0 0 1.8cqw rgba(255,110,60,.85),0 0 5cqw rgba(255,40,110,.45);transform:translate(-50%,-50%) scale(1.03)}
.fig-insight .fg-insight-views{list-style:none;margin:0;padding:0}
.fig-insight .fg-insight-views li{position:absolute;z-index:3;top:62.8%;width:20%;transform:translate(-50%,-3.15cqw)}
.fig-insight .fg-insight-views li:nth-child(1){left:14.4%}.fig-insight .fg-insight-views li:nth-child(2){left:38.7%}.fig-insight .fg-insight-views li:nth-child(3){left:61.2%}.fig-insight .fg-insight-views li:nth-child(4){left:85.3%}
.fig-insight .fg-insight-views a{display:flex;flex-direction:column;align-items:center;color:#fff;text-align:center}
.fig-insight .fg-insight-ring{--c:#ff7a1a;display:grid;place-items:center;width:6.3cqw;height:6.3cqw;border-radius:50%;font-size:3cqw;color:#fff;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,transparent),rgba(20,27,51,.9) 70%);border:.2cqw solid var(--c);
  box-shadow:0 0 1cqw color-mix(in srgb,var(--c) 70%,transparent),inset 0 0 1cqw color-mix(in srgb,var(--c) 50%,transparent);transition:transform .25s,box-shadow .25s}
.fig-insight .fg-insight-views li:nth-child(2) .fg-insight-ring{--c:#ff3d2a}.fig-insight .fg-insight-views li:nth-child(3) .fg-insight-ring{--c:#e8155f}.fig-insight .fg-insight-views li:nth-child(4) .fg-insight-ring{--c:#d81bb0}
.fig-insight .fg-insight-views b{margin-top:1.1cqw;font-size:1.3cqw;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.fig-insight .fg-insight-views small{margin-top:.5cqw;font-size:.95cqw;line-height:1.3;color:rgba(255,255,255,.75);opacity:0;transform:translateY(-.3cqw);transition:opacity .25s,transform .25s}
.fig-insight .fg-insight-views a:hover .fg-insight-ring,.fig-insight .fg-insight-views a:focus-visible .fg-insight-ring{transform:scale(1.08);box-shadow:0 0 2cqw var(--c),inset 0 0 1.4cqw var(--c)}
.fig-insight .fg-insight-views a:hover small,.fig-insight .fg-insight-views a:focus-visible small{opacity:1;transform:none}

/* light the wire of the card being pointed at */
.fig-insight .fg-insight-stage:has(.fg-insight-docs a:hover,.fg-insight-docs a:focus-visible) .fg-insight-paths path{opacity:.3}
.fig-insight .fg-insight-stage:has(.fg-insight-c1 a:hover,.fg-insight-c1 a:focus-visible) .fg-insight-w1,
.fig-insight .fg-insight-stage:has(.fg-insight-c2 a:hover,.fg-insight-c2 a:focus-visible) .fg-insight-w2,
.fig-insight .fg-insight-stage:has(.fg-insight-c3 a:hover,.fg-insight-c3 a:focus-visible) .fg-insight-w3,
.fig-insight .fg-insight-stage:has(.fg-insight-c4 a:hover,.fg-insight-c4 a:focus-visible) .fg-insight-w4,
.fig-insight .fg-insight-stage:has(.fg-insight-c5 a:hover,.fg-insight-c5 a:focus-visible) .fg-insight-w5{opacity:1;stroke-width:5}

/* phones: the cards stack above the panel */
@container (max-width:640px){
  .fig-insight .fg-insight-stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:14px;padding:16px 12px;border-radius:16px}
  .fig-insight .fg-insight-wires{display:none}
  .fig-insight .fg-insight-logo{position:static;align-self:flex-end;width:96px;height:40px;border-radius:10px}
  .fig-insight .fg-insight-docs{display:flex;flex-direction:column;gap:22px}
  .fig-insight .fg-insight-docs>li{position:relative;inset:auto;width:auto;height:auto}
  .fig-insight .fg-insight-docs>li+li::before{content:'↓';position:absolute;top:-21px;left:50%;transform:translateX(-50%);color:#ff4a2a;font-weight:800;font-size:15px}
  .fig-insight .fg-insight-card{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;padding:12px 14px;border-radius:12px}
  .fig-insight .fg-insight-head{gap:12px}
  .fig-insight .fg-insight-ic{width:32px;height:36px;border-radius:6px;font-size:22px}
  .fig-insight .fg-insight-badge{width:18px;height:18px;font-size:12px;border-width:2px;right:-7px;bottom:-6px}
  .fig-insight .fg-insight-head b{font-size:13px}
  .fig-insight .fg-insight-lines{margin:0;font-size:13px;text-align:right}
  .fig-insight .fg-insight-lines small{font-size:12px}
  .fig-insight .fg-insight-who{grid-column:1/-1;margin:2px 0 0;padding:6px;font-size:12px;gap:8px;border-radius:8px}
  .fig-insight .fg-insight-av{width:22px;height:22px;font-size:13px}
  .fig-insight .fg-insight-late{font-size:11px;padding:2px 8px;gap:4px}
  .fig-insight .fg-insight-chain{display:none}
  .fig-insight .fg-insight-panel{position:relative;inset:auto;width:auto;height:auto;margin-top:6px;padding:22px 12px 18px;border-radius:16px;display:flex;flex-direction:column;align-items:center;gap:20px}
  .fig-insight .fg-insight-hub{position:static;transform:none;width:auto;height:auto;padding:12px 24px;font-size:16px;border-width:2px}
  .fig-insight .fg-insight-hub:hover,.fig-insight .fg-insight-hub:focus-visible{transform:scale(1.03)}
  .fig-insight .fg-insight-views{display:grid;grid-template-columns:1fr 1fr;gap:18px 10px;width:100%}
  .fig-insight .fg-insight-views li{position:static;transform:none;width:auto}
  .fig-insight .fg-insight-ring{width:56px;height:56px;font-size:26px;border-width:2px}
  .fig-insight .fg-insight-views b{margin-top:8px;font-size:12px;letter-spacing:.08em}
  .fig-insight .fg-insight-views small{opacity:1;transform:none;font-size:11.5px;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .fig-insight .fg-insight-pulses{display:none}
  .fig-insight *{animation:none!important;transition:none!important}
}