/* The homepage hero's product card, lifted from the approved sample (Homepage hero samples artifact, version 17).
   Every rule is scoped under .heroviz so nothing here can reach the rest of the site, and the site's own .sev
   pill cannot reach in. The figures in the card are illustrative; the page says so under it. */
.heroviz{--s-ink:#101421;--s-ink2:#475063;--s-ink3:#7a8194;--s-line:#e2e5ed;--s-blue:#1a4fd8;--s-blue2:#2b8cff;--s-soft:#e9efff;
  --crit:#c4312b;--crit-bg:#fdecea;--high:#b45800;--high-bg:#fff1e3;--med:#866a00;--med-bg:#fbf4d9;--low:#2c6e49;--low-bg:#e6f4ec;
  --ok:#14804a;--ok-bg:#e3f5ea;--display:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,monospace;
  margin:0;min-width:0;color:var(--s-ink);font-family:var(--display);font-size:15px;line-height:1.5}
.heroviz figcaption{margin-top:10px;text-align:right;font:500 11px/1 var(--mono);color:var(--s-ink3)}
/* ---------- the product card ---------- */
.heroviz .card{background:#fff;border:1px solid var(--s-line);border-radius:18px;box-shadow:0 30px 60px -32px rgba(20,32,90,.38);overflow:hidden;min-width:0}
.heroviz .card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--s-line);font-size:12.5px;color:var(--s-ink3)}
.heroviz .card-top b{color:var(--s-ink);font-weight:600;font-size:13px}
.heroviz .live{display:inline-flex;align-items:center;gap:7px;font:500 11.5px/1 var(--mono);color:var(--s-ink2)}
.heroviz .live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--s-blue2);box-shadow:0 0 0 0 rgba(43,140,255,.5);animation:hv-ping 1.6s infinite}
@keyframes hv-ping{70%{box-shadow:0 0 0 7px rgba(43,140,255,0)}100%{box-shadow:0 0 0 0 rgba(43,140,255,0)}}
.heroviz .steps{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--s-line)}
.heroviz .steps span{position:relative;font:500 11px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--s-ink3);padding:13px 4px;text-align:center;transition:color .3s}
.heroviz .steps span::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--s-blue);transform:scaleX(0);transform-origin:left}
.heroviz .steps span.on{color:var(--s-ink)}
.heroviz .steps span.on::after{transform:scaleX(1);transition:transform .35s ease}
@keyframes hv-fill{to{transform:scaleX(1)}}
.heroviz .panes{position:relative;height:370px}
.heroviz .pane{position:absolute;inset:0;padding:16px;opacity:0;transform:translateY(6px);transition:opacity .15s ease,transform .15s ease;pointer-events:none}
.heroviz .pane.on{opacity:1;transform:none;transition:opacity .35s ease .18s,transform .35s ease .18s}

/* discover: radar + tallies */
.heroviz .disc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:16px;align-items:center;height:100%}
.heroviz .disc canvas{width:100%;aspect-ratio:1;max-width:260px;display:block;justify-self:center}
.heroviz .tally{display:grid;gap:9px}
.heroviz .tally div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px dashed var(--s-line);padding-bottom:8px;font-size:13px;color:var(--s-ink2)}
.heroviz .tally b{font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--s-ink);font-variant-numeric:tabular-nums}
.heroviz .tally .warn b{color:var(--high)}
.heroviz .tally .key{display:inline-flex;align-items:center;gap:7px}
.heroviz .tally .key::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c)}

/* assess: four layers */
.heroviz .lay{display:grid;gap:13px;padding-top:4px}
.heroviz .lay div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center;font-size:13.5px}
.heroviz .lay .nm{font-weight:500}
.heroviz .lay .st{font:500 11.5px/1 var(--mono);color:var(--s-ink3)}
.heroviz .lay .st.ok{color:var(--ok)}
.heroviz .lay .tr{grid-column:1/-1;height:6px;border-radius:99px;background:#eef0f5;overflow:hidden}
.heroviz .lay .tr i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--s-blue),var(--s-blue2))}
.heroviz .corr{margin-top:6px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--s-ink2);background:var(--s-soft);border-radius:10px;padding:10px 12px;opacity:0;transition:opacity .4s}
.heroviz .corr.in{opacity:1}

/* findings */
.heroviz .rows{display:grid;gap:7px}
.heroviz .row{transition-duration:.7s!important;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;border:1px solid var(--s-line);border-radius:12px;padding:9px 11px;font-size:13.2px;opacity:0;transform:translateX(12px);transition:opacity .35s ease,transform .35s ease}
.heroviz .row.in{opacity:1;transform:none}
.heroviz .row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.heroviz .row .area{font:500 10.5px/1 var(--mono);color:var(--s-ink3);text-transform:uppercase;letter-spacing:.04em}
.heroviz .sev{display:inline-flex;justify-content:center;font:600 10.5px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;border-radius:6px;padding:5px 6px;white-space:nowrap}
.heroviz .sev.crit{color:var(--crit);background:var(--crit-bg)}.heroviz .sev.high{color:var(--high);background:var(--high-bg)}
.heroviz .sev.med{color:var(--med);background:var(--med-bg)}.heroviz .sev.low{color:var(--low);background:var(--low-bg)}
.heroviz .ev{display:flex;gap:6px;margin-top:9px;font-size:12px;color:var(--s-ink3);align-items:center;flex-wrap:wrap}
.heroviz .ev span{border:1px solid var(--s-line);border-radius:999px;padding:4px 9px;color:var(--s-ink2)}

/* follow up */
.heroviz .fu{border:1px solid var(--s-line);border-radius:14px;padding:14px}
.heroviz .fu-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.heroviz .fu h4{margin:9px 0 12px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.heroviz .kv{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px;margin:0}
.heroviz .kv dt{color:var(--s-ink3)}.heroviz .kv dd{margin:0;font-weight:500}
.heroviz .status{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:12px;border-radius:999px;padding:4px 10px;background:var(--s-soft);color:var(--s-blue);transition:background .3s,color .3s}
.heroviz .status.done{background:var(--ok-bg);color:var(--ok)}
.heroviz .tl{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:14px}
.heroviz .tl span{font-size:11.5px;color:var(--s-ink3);border-top:3px solid var(--s-line);padding-top:7px;transition:border-color .3s,color .3s}
.heroviz .tl span.on{border-color:var(--s-blue);color:var(--s-ink)}
.heroviz .tl span.ok{border-color:var(--ok);color:var(--ok)}

@media (max-width:520px){
  .heroviz .panes{height:470px}
  .heroviz .disc{grid-template-columns:1fr;gap:10px;align-content:start}
  .heroviz .disc canvas{max-width:170px}
  .heroviz .row{grid-template-columns:62px minmax(0,1fr)}.heroviz .row .area{display:none}.heroviz .row .t{white-space:normal;line-height:1.3}
}

/* follow up: the assignment, played as a cursor would do it */
.heroviz .fu{position:relative}
.heroviz .fu-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
.heroviz .status.open{background:#f1f2f6;color:var(--s-ink2)}
.heroviz .kv dd{display:flex;align-items:center}
.heroviz .pick{display:inline-flex;align-items:center;gap:10px;min-width:150px;border:1px solid var(--s-line);border-radius:8px;padding:5px 10px;background:#fff;
  color:var(--s-ink3);font-weight:400;transition:border-color .2s,box-shadow .2s}
.heroviz .pick.focus{border-color:var(--s-blue);box-shadow:0 0 0 3px rgba(26,79,216,.14)}
.heroviz .pick.set{color:var(--s-ink);font-weight:500}
.heroviz .caret{margin-left:auto;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--s-ink3)}
.heroviz .menu{position:absolute;left:var(--mx,0px);top:var(--my,0px);z-index:3;display:grid;min-width:170px;padding:5px;background:#fff;border:1px solid var(--s-line);
  border-radius:10px;box-shadow:0 16px 32px -14px rgba(20,32,90,.4);opacity:0;transform:translateY(-4px);transition:opacity .2s,transform .2s;pointer-events:none}
.heroviz .menu.open{opacity:1;transform:none}
.heroviz .menu span{padding:7px 10px;border-radius:7px;font-size:13px;color:var(--s-ink)}
.heroviz .menu span.hover{background:var(--s-soft);color:var(--s-blue)}
.heroviz .cursor{position:absolute;left:0;top:0;width:13px;height:20px;z-index:4;pointer-events:none;opacity:0;translate:var(--cx,300px) var(--cy,250px);transition:translate .7s cubic-bezier(.45,0,.2,1),opacity .25s ease}
.heroviz .cursor.on{opacity:1}
.heroviz .ripple{position:absolute;left:0;top:0;z-index:3;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;pointer-events:none;border:2px solid rgba(26,79,216,.55);opacity:0;translate:var(--rx,0px) var(--ry,0px)}
.heroviz .ripple.go{animation:hv-ripple .5s ease-out}
@keyframes hv-ripple{0%{opacity:1;scale:.3}100%{opacity:0;scale:1.25}}
.heroviz .mail{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--s-blue);opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s}
.heroviz .mail.in{opacity:1;transform:none}
.heroviz .pop{animation:hv-pop .4s ease}
.heroviz .pick.flash{animation:hv-flash .6s ease}
@keyframes hv-flash{0%{box-shadow:0 0 0 0 rgba(26,79,216,.35)}100%{box-shadow:0 0 0 7px rgba(26,79,216,0)}}
@keyframes hv-pop{0%{transform:scale(.94)}60%{transform:scale(1.04)}100%{transform:none}}
/* fixed: the score over the last scans, rising after the fix */
.heroviz .trendbox{margin-top:14px;padding-top:12px;border-top:1px dashed var(--s-line)}
.heroviz .th{display:flex;align-items:baseline;gap:10px;font-size:12.5px;color:var(--s-ink2)}
.heroviz .th b{font-size:24px;font-weight:600;letter-spacing:-.02em;color:var(--s-ink);font-variant-numeric:tabular-nums}
.heroviz .th em{font-style:normal;font-weight:600;font-size:12px;color:var(--ok);background:var(--ok-bg);border-radius:999px;padding:3px 9px;opacity:0;transition:opacity .4s}
.heroviz .th em.in{opacity:1}
.heroviz #spark{display:block;width:100%;height:84px;margin-top:4px;overflow:visible}
.heroviz .tx{display:flex;justify-content:space-between;font:500 10.5px/1 var(--mono);color:var(--s-ink3);text-transform:uppercase;letter-spacing:.05em;margin-top:6px}

.heroviz .av{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;flex:none;font:600 9.5px/1 var(--display);font-style:normal;
  color:#fff;background:#8a93a8;margin-right:8px;letter-spacing:.02em}
.heroviz .menu .av{background:#5b6b93}
.heroviz #pPick .av,.heroviz .pick.set .av{background:var(--s-blue)}
.heroviz .pick .av{margin-right:0;background:#c4c9d6}
.heroviz .menu span{display:flex;align-items:center}
.heroviz .cal{width:15px;height:15px;flex:none;fill:none;stroke:var(--s-ink3);stroke-width:1.7;stroke-linecap:round}
.heroviz .pick.set .cal{stroke:var(--s-blue)}
.heroviz .pick{min-width:172px}
.heroviz .menu .tm{display:block;padding:6px 10px 4px;font:500 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s-ink3)}
.heroviz #spark{display:block;width:100%;height:96px;margin-top:4px;overflow:visible}
.heroviz #spark text{font:500 10px var(--mono);fill:var(--s-ink3)}
.heroviz #spark .vlab{font:600 11px var(--display);fill:var(--s-ink)}
.heroviz #spark .vlab.ok{fill:var(--ok)}

/* find: the first finding opens into its evidence and what to do */
.heroviz .rows{transition:opacity .45s ease,transform .45s ease}
.heroviz .rows.away{opacity:0;transform:translateY(-6px)}
.heroviz .fd{position:absolute;inset:0;border:1px solid var(--s-line);border-radius:14px;padding:14px;background:#fff;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.32,.72,0,1);pointer-events:none}
.heroviz .fd.in{opacity:1;transform:none;transition-delay:.35s}
.heroviz .fd h4{margin:9px 0 10px;font-size:15px;font-weight:600;letter-spacing:-.01em}
.heroviz .fdk{gap:6px 16px}
.heroviz .fdk dd{font-weight:500}
.heroviz .ev{font-weight:600;font-size:12px;border-radius:999px;padding:4px 10px;background:var(--s-soft);color:var(--s-blue)}
.heroviz .todo{margin-top:12px;padding:10px 12px;border-radius:10px;background:#f6f8fc;border:1px solid var(--s-line)}
.heroviz .todo b{display:block;font:500 10.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--s-ink3);margin-bottom:7px}
.heroviz .todo ol{margin:0;padding-left:18px;font-size:13px;line-height:1.5}
.heroviz .todo li{opacity:0;transform:translateX(6px);transition:opacity .4s ease,transform .4s ease}
.heroviz .todo li.in{opacity:1;transform:none}
.heroviz .todo li::marker{color:var(--s-blue);font-weight:600}
.heroviz .addfu{display:inline-flex;align-items:center;gap:7px;margin-top:12px;padding:8px 14px;border-radius:999px;background:var(--s-blue);color:#fff;
  font-weight:600;font-size:13px;opacity:0;transform:translateY(4px);transition:opacity .35s ease,transform .35s ease,background .2s ease,box-shadow .2s ease}
.heroviz .addfu.in{opacity:1;transform:none}
.heroviz .addfu.hover{background:#1642b8;box-shadow:0 0 0 4px rgba(26,79,216,.15)}
.heroviz .fd.fly{opacity:0;transform:translate(var(--fx,0px),var(--fy,0px)) scale(.18);
  transition:opacity .55s ease .05s,transform .6s cubic-bezier(.55,0,.25,1)}
.heroviz .steps span.catch{color:var(--s-ink)}
.heroviz .steps span.catch::after{transform:scaleX(1);transition:transform .35s ease .25s}
.heroviz .addfu svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.heroviz *{transition:none!important;animation:none!important}}