/* /platform (v2) — capabilities as use cases (job → module → the panel it opens),
   then the engine, the queue, coverage, the pipeline and the integrations. */

/* hero board */
.pf-hero .wrap>*{min-width:0}
.pf-board{padding:22px}
.pf-board-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pf-board-h b{font-size:13px;letter-spacing:.02em}
.pf-live{display:inline-flex;align-items:center;gap:7px;font:600 11px var(--mono);color:var(--teal);padding:5px 10px;border-radius:999px;background:rgba(67,227,191,.08);border:1px solid rgba(67,227,191,.25)}
.pf-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 12px var(--teal);animation:pf-pulse 1.4s infinite}
@keyframes pf-pulse{50%{opacity:.35}}
.pf-board-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.pf-tile{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto;gap:2px 10px;align-items:center;padding:11px 12px;border-radius:14px;border:1px solid var(--line);background:rgba(0,0,0,.2);min-width:0}
.pf-tile .ico{grid-row:span 2;width:30px;height:30px;padding:6px;border-radius:9px;background:rgba(146,81,255,.16);color:var(--v2)}
.pf-tile span{font-size:11.5px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-tile strong{font-size:20px;font-weight:800;letter-spacing:-.03em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-tile strong small{font:500 11px var(--mono);color:var(--muted);margin-left:5px;letter-spacing:0}
.pf-board-f{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font:600 11.5px var(--mono);color:var(--muted)}
.pf-board-f i{color:var(--v2)}

/* in-page path */
.pf-bar{position:sticky;top:84px;z-index:15;display:flex;justify-content:center;padding:0 16px;margin-top:20px}

.pf-sec{scroll-margin-top:140px}
.pf-sec .sec-head .lead{max-width:720px}

/* use cases */
.pf-uc+.pf-uc{margin-top:46px}
.pf-uc-h{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.pf-uc-h .num{margin:0;flex:none}
.pf-uc-h .h3{margin-bottom:2px}
.pf-uc-h p{font-size:14px}
.pf-cap{padding:24px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pf-need{display:flex;gap:8px;align-items:flex-start;font:600 12px var(--mono);color:var(--teal);letter-spacing:.02em}
.pf-mod{display:flex;align-items:center;gap:12px}
.pf-mod .ic{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center;background:rgba(146,81,255,.16);color:var(--v2);font-size:20px}
.pf-mod h3{font-size:19px}
.pf-cap>p{color:var(--muted);font-size:14px}
.pf-prev{margin-top:auto;border-radius:16px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(146,81,255,.1),rgba(0,0,0,.22));padding:8px}
.pf-prev-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:4px}
.pf-prev-h>span{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pf-prev-h strong{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1;white-space:nowrap}
.pf-prev-h strong small{font:500 12px var(--mono);color:var(--muted);margin-left:6px;letter-spacing:0}
.pf-prev .det{padding:8px 10px}

/* engine chart */
.pf-chart{padding:26px;min-width:0}
.pf-chart-h{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:18px}
.pf-k{display:block;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.pf-big{display:block;font-size:56px;font-weight:800;letter-spacing:-.05em;line-height:1;margin-top:8px}
.pf-chart-n{max-width:340px;font-size:13.5px;color:var(--muted)}
.pf-chart-n b{color:var(--v2)}
.pf-plot{height:250px;border-radius:14px;overflow:hidden;background:rgba(0,0,0,.18);border:1px solid var(--line)}
.pf-plot svg{display:block;width:100%;height:100%}
.pf-x{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--faint);margin:8px 2px 16px}
.pf-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-legend li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--line);background:rgba(0,0,0,.16);font-size:12.5px;color:var(--muted);min-width:0}
.pf-legend li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-legend li b{font-family:var(--mono);color:#fff}
.pf-legend li em{font-style:normal;color:var(--faint);font-weight:500}
.pf-legend i{width:10px;height:10px;border-radius:3px;flex:none}
.pf-legend .c0{background:#8449FF}.pf-legend .c1{background:#5AAEFF}.pf-legend .c2{background:#36DCA0}
.pf-legend .c3{background:#FF5773}.pf-legend .c4{background:#C13BFF}.pf-legend .c5{background:#FFC658}

.pf-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.pf-mini{padding:22px;flex:1}
.pf-mix{display:flex;gap:3px;height:14px;margin:16px 0 14px;border-radius:99px;overflow:hidden;background:rgba(255,255,255,.06)}
.pf-mix i{display:block;height:100%;width:var(--w,0)}
.pf-mix .crit,.pf-mix-l .crit{background:#FF5773}.pf-mix .high,.pf-mix-l .high{background:#FF8A4C}
.pf-mix .med,.pf-mix-l .med{background:#FFC658}.pf-mix .low,.pf-mix-l .low{background:#5AAEFF}
.pf-mix-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:12.5px;color:var(--muted)}
.pf-mix-l li{display:flex;align-items:center;gap:8px}
.pf-mix-l i{width:10px;height:10px;border-radius:3px}
.pf-mix-l b{margin-left:auto;font-family:var(--mono);color:#fff}
.pf-hist{display:grid;gap:10px;margin:16px 0 4px}
.pf-hist .meter .tr i{background:linear-gradient(90deg,var(--v),var(--teal))}
.pf-mini-n{margin-top:14px;font-size:12.5px;color:var(--faint)}

/* one queue */
.pf-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.pf-note{margin-top:18px;padding:14px 16px;border-left:2px solid var(--v2);border-radius:0 12px 12px 0;background:rgba(146,81,255,.06);color:var(--muted);font-size:14px}
.pf-queue{padding:20px}
.pf-queue-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.pf-queue-h b{font-size:13px}

/* coverage */
.pf-cov{padding:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pf-cov-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pf-cov-h h3{font-size:18px}
.pf-marks{display:flex;flex-wrap:wrap;gap:6px}
.pf-marks span{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.03);font-size:12.5px;color:var(--text)}
.pf-marks .ico{color:var(--v2);font-size:14px}
.pf-cov p{color:var(--muted);font-size:13.5px;margin-top:auto}
.pf-gap{display:flex;gap:10px;align-items:flex-start;margin-top:20px;padding:14px 18px;border-radius:14px;border:1px dashed var(--line2);color:var(--faint);font-size:13.5px}
.pf-gap i{color:var(--amber);font-size:16px}

/* pipeline */
.pf-pipe{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:pp}
.pf-pipe li{padding:22px;position:relative;overflow:visible;min-width:0}
.pf-pipe li+li::before{content:"\F285";font-family:bootstrap-icons;position:absolute;left:-13px;top:34px;z-index:2;width:12px;text-align:center;color:var(--v2);font-size:12px}
.pf-pipe-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.pf-pipe-h .num{margin:0}
.pf-pipe-h i{font-size:20px;color:var(--teal)}
.pf-pipe h3{font-size:18px;margin-bottom:8px}
.pf-pipe p{color:var(--muted);font-size:13.5px}

@media (max-width:1180px){
  .pf-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-pipe li+li::before{display:none}
  .pf-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bento>.pf-side{grid-column:span 12;flex-direction:row}
  .bento>.pf-chart{grid-column:span 12}
}
@media (max-width:860px){
  .pf-split{grid-template-columns:minmax(0,1fr);gap:28px}
  .pf-pipe{grid-template-columns:minmax(0,1fr)}
  .bento>.pf-side{flex-direction:column}
  .pf-chart-h{flex-direction:column;align-items:flex-start;gap:10px}
  .pf-chart{padding:20px}
  .pf-plot{height:190px}
  .pf-bar .seg>a span{display:none}
  .pf-bar .seg>a{padding:9px 13px}
}
@media (max-width:520px){
  .pf-board-g,.pf-legend{grid-template-columns:minmax(0,1fr)}
  .pf-big{font-size:44px}
  .pf-prev-h strong{font-size:26px}
}