/* ============================================================================
   Landing page — quality improvement and audit.

   The chart, the driver diagram and the audit bars are the doctor demo's own
   VTE QIP and consent audit, drawn the way the app draws them, so a visitor
   who clicks through finds exactly this.
   ========================================================================== */
.qi-show{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,2.2vw,28px)}
.qi-panel{
  margin:0;position:relative;border-radius:24px;padding:clamp(20px,2.4vw,28px);
  background:rgba(255,255,255,.82);border:1px solid var(--line);box-shadow:var(--lift);
  backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
}
.qi-panel-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#6B55C8;margin-bottom:12px}

/* run chart */
.qi-chart-panel figcaption{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.qi-kind{grid-row:span 2;font-size:10.5px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;
  color:#5B45C0;background:#EEEAFE;border-radius:8px;padding:6px 9px}
.qi-chart-panel figcaption b{font-size:16px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.qi-chart-panel figcaption small{font-size:12.5px;color:var(--ink-faint)}
.qi-chart{display:block;width:100%;height:auto;margin-top:14px;overflow:visible}
.qi-chart .g{stroke:#E6ECF3;stroke-width:1}
.qi-chart .yl{font-size:11px;fill:#8A97AD;text-anchor:end}
.qi-chart .t{stroke:#1F9D63;stroke-width:1.5;stroke-dasharray:3 4}
.qi-chart .tl{font-size:11.5px;font-weight:700;fill:#1F9D63;text-anchor:end}
.qi-chart .m{stroke:#8A97AD;stroke-width:1.3;stroke-dasharray:7 5}
.qi-chart .ml{font-size:11.5px;font-weight:650;fill:#7A879C;text-anchor:end}
.qi-chart .p{stroke:#7C5CE7;stroke-width:1.2;stroke-dasharray:3 3}
.qi-chart .pl{font-size:11px;font-weight:700;fill:#6B55C8}
.qi-chart .line{fill:none;stroke:#6FA886;stroke-width:2.4;stroke-linejoin:round}
.qi-chart .base{fill:#fff;stroke:#6FA886;stroke-width:2}
.qi-chart .hot{fill:#6B55C8;stroke:#fff;stroke-width:1.5}
.qi-signal{margin:10px 0 0;font-size:13px;font-weight:650;color:#1F7A4C}

/* driver diagram */
.qi-dd{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr);gap:12px;align-items:center}
.qi-dd-aim{padding:13px 14px;border-radius:14px;color:#fff;font-size:13px;font-weight:650;line-height:1.4;
  background:linear-gradient(145deg,#7C5CE7,#5B45C0);box-shadow:0 12px 26px -12px rgba(91,69,192,.6)}
.qi-dd-rest{display:grid;gap:9px;padding-left:12px;border-left:2px solid #CFC6F6}
.qi-dd-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.qi-dd-row span{font-size:11.5px;line-height:1.3;font-weight:560;padding:8px 9px;border-radius:10px;border:1px solid}
.qi-dd-row .p{background:#F1EEFD;border-color:#D8CFFA;color:#3E2F8F}
.qi-dd-row .s{background:#FFF5EC;border-color:#F6D9BD;color:#7A4A12}
.qi-dd-row .c{background:#EFF8F3;border-color:#C7E6D4;color:#1D5E3C}
.qi-dd-row .c.off{background:#F6F7F9;border-color:#E2E6EC;color:#8A97AD;text-decoration:line-through;text-decoration-color:rgba(138,151,173,.5)}
.qi-note{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* the six steps */
.qi-steps{list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;counter-reset:qi;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,18px)}
.qi-steps li{counter-increment:qi;position:relative;padding:18px 18px 18px 58px;border-radius:18px;
  background:rgba(255,255,255,.7);border:1px solid var(--line)}
.qi-steps li::before{content:counter(qi);position:absolute;left:16px;top:16px;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;font-size:13px;font-weight:750;color:#fff;background:#6B55C8;
  box-shadow:0 0 0 4px rgba(107,85,200,.14)}
.qi-steps b{display:block;font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--ink)}
.qi-steps span{display:block;margin-top:4px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);font-weight:350}

/* audit */
.qi-audit{margin-top:clamp(18px,2.2vw,26px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(18px,2.6vw,36px);align-items:center;border-radius:24px;padding:clamp(22px,2.6vw,32px);
  background:linear-gradient(150deg,rgba(14,154,167,.10),rgba(255,255,255,.85));
  border:1px solid rgba(14,154,167,.22);box-shadow:var(--lift)}
.qi-audit .qi-panel-tag{color:#0B7A84}
.qi-audit h3{margin:0;font-size:clamp(20px,1.9vw,26px);font-weight:650;letter-spacing:-.028em;line-height:1.2}
.qi-audit p{margin:10px 0 0;font-size:15px;line-height:1.58;color:var(--ink-soft);font-weight:350;max-width:48ch}
.qi-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:12.5px;color:var(--ink-soft)}
.qi-legend span{display:inline-flex;align-items:center;gap:7px}
.qi-legend i{width:14px;height:9px;border-radius:3px;display:inline-block}
.qi-legend .b1{background:#C9D3DF}.qi-legend .b2{background:#0E9AA7}.qi-legend .tg{width:2px;height:13px;background:#1F9D63;border-radius:0}
.qi-audit-chart{display:grid;gap:14px}
.qi-crit-name{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:5px}
.qi-bars{position:relative;display:grid;gap:4px}
.qi-bars i{position:relative;display:block;height:14px;width:var(--w);border-radius:0 7px 7px 0;min-width:30px}
.qi-bars .b1{background:#C9D3DF}
.qi-bars .b2{background:#0E9AA7}
.qi-bars .b2.met{background:linear-gradient(90deg,#0E9AA7,#1F9D63)}
.qi-bars i b{position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:10.5px;font-weight:700;color:#fff;font-style:normal}
.qi-bars .b1 b{color:#44546A}
.qi-bars em{position:absolute;top:-3px;bottom:-3px;left:var(--t);width:2px;background:#1F9D63;border-radius:2px}

/* calls to action */
.qi-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 18px;margin-top:clamp(26px,3vw,40px)}
.qi-link{font-size:14.5px;font-weight:650;color:#5B45C0;text-decoration:none;border-bottom:1.5px solid rgba(91,69,192,.3)}
.qi-link:hover{border-bottom-color:#5B45C0}
.newcard-demo a{color:inherit;font-weight:650;text-decoration:none;border-bottom:1.5px solid color-mix(in srgb,var(--nc) 40%,transparent)}

@media(max-width:980px){
  .qi-show,.qi-audit{grid-template-columns:1fr}
  .qi-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .qi-steps{grid-template-columns:1fr}
  .qi-dd{grid-template-columns:1fr}
  .qi-dd-rest{padding-left:0;border-left:0;gap:16px}
  .qi-dd-row{grid-template-columns:1fr}
  .qi-dd-row .s{display:none}
}