:root{
  --mx-ink:#16212e;
  --mx-graphite:#17231f;
  --mx-green:#0e8a6e;
  --mx-green-deep:#154f3b;
  --mx-green-soft:#2aa07f;
  --mx-green-light:#7fd3bd;
  --mx-bg:#ffffff;
  --mx-bg-soft:#f5f8f6;
  --mx-bg-mint:#f3faf7;
  --mx-line:#e3eae7;
  --mx-muted:#5e6b7a;
  --mx-muted-2:#7a8a85;
  --mx-gold:#f2c80f;
  --mx-red:#fd625e;
  --mx-shadow:0 28px 70px rgba(22,33,46,.16),0 10px 24px rgba(14,138,110,.1);
  --mx-shadow-soft:0 12px 30px rgba(22,33,46,.06);
}

.mx-mock{
  position:relative;
  overflow:hidden;
  border:1px solid #d9e6e0;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--mx-shadow);
}
.mx-mock::after{
  content:attr(data-watermark);
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:5;
  padding:4px 10px;
  border:1px solid var(--mx-line);
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--mx-muted);
  font-size:7px;
  font-weight:800;
  letter-spacing:.03em;
}
.mx-mock-hd{
  display:flex;
  align-items:center;
  gap:10px;
  height:44px;
  padding:0 14px;
  background:var(--mx-graphite);
}
.mx-mock-dots{display:flex;gap:5px}
.mx-mock-dots i{
  display:block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:rgba(255,255,255,.16);
}
.mx-mock-heading{
  min-width:0;
  flex:1;
  text-align:center;
}
.mx-mock-heading strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.82);
  font-size:10px;
  font-weight:700;
}
.mx-mock-heading span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:rgba(255,255,255,.45);
  font-size:8px;
}
.mx-mock-badge{
  padding:4px 8px;
  border-radius:999px;
  font-size:7px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  white-space:nowrap;
}
.mx-mock-badge.green{background:rgba(127,211,189,.15);color:var(--mx-green-light)}
.mx-mock-badge.amber{background:rgba(242,200,15,.16);color:#d2af26}

.mx-mock-toolbar{
  display:flex;
  align-items:center;
  gap:5px;
  height:32px;
  padding:0 12px;
  border-bottom:1px solid var(--mx-line);
  background:var(--mx-bg-soft);
}
.mx-mock-toolbar span{
  padding:4px 8px;
  border-radius:7px;
  color:var(--mx-muted-2);
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-mock-toolbar .on{
  background:#eaf5f1;
  color:var(--mx-green);
}

.mx-mock-body{
  position:relative;
  min-height:390px;
  padding:18px;
  background:
    radial-gradient(circle at top, rgba(127,211,189,.16), transparent 32%),
    linear-gradient(180deg,#f8fcfa 0%,#f3f8f5 42%,#eef5f1 100%);
}
.mx-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.mx-metric{
  padding:11px 12px;
  border:1px solid var(--mx-line);
  border-radius:12px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 24px rgba(22,33,46,.06);
}
.mx-metric small{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-metric i{
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--mx-green-soft);
}
.mx-metric b{
  display:block;
  margin-top:6px;
  color:var(--mx-ink);
  font-size:22px;
  line-height:1;
  font-weight:800;
  font-family:var(--f-disp,'Sora',system-ui,sans-serif);
}
.mx-panel{
  border:1px solid var(--mx-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--mx-shadow-soft);
}

.mx-roadmap{padding:14px}
.mx-road-head{
  display:grid;
  grid-template-columns:130px 1fr;
  padding-bottom:8px;
  border-bottom:1px solid var(--mx-line);
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-road-months{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  text-align:center;
}
.mx-road-row{
  display:grid;
  grid-template-columns:130px 1fr;
  gap:10px;
  align-items:center;
  margin-top:10px;
}
.mx-road-copy strong{
  display:block;
  color:var(--mx-ink);
  font-size:10px;
}
.mx-road-copy span{
  display:block;
  margin-top:4px;
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:700;
}
.mx-track{
  position:relative;
  height:28px;
  border:1px solid #eef3f0;
  border-radius:10px;
  background:repeating-linear-gradient(90deg,#fbfdfc 0,#fbfdfc calc(16.66% - 1px),#e7efeb calc(16.66% - 1px),#e7efeb 16.66%);
}
.mx-track .dep{
  position:absolute;
  top:50%;
  left:var(--left);
  z-index:2;
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--mx-green);
  transform:translate(-50%,-50%) rotate(45deg);
}
.mx-track i{
  position:absolute;
  top:50%;
  left:var(--left);
  width:var(--width);
  height:12px;
  border-radius:999px;
  background:var(--track-color,#2aa07f);
  transform:translateY(-50%);
  box-shadow:0 6px 14px rgba(42,160,127,.2);
}
.mx-track i::after{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:var(--progress,100%);
  border-radius:999px 0 0 999px;
  background:rgba(255,255,255,.28);
}
.mx-status{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:10px 12px;
  border:1px solid #dce9e3;
  border-radius:14px;
  background:var(--mx-bg-mint);
}
.mx-status strong{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--mx-green);
  font-size:9px;
  font-weight:800;
}
.mx-status strong::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--mx-green-soft);
}
.mx-status-meter{
  display:flex;
  align-items:center;
  gap:8px;
}
.mx-status-meter .bar{
  width:118px;
  height:8px;
  border-radius:999px;
  background:#fff;
  overflow:hidden;
}
.mx-status-meter .bar i{
  display:block;
  width:72%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--mx-green-soft),var(--mx-green-light));
}
.mx-status-meter b{
  color:var(--mx-green);
  font-size:10px;
  font-weight:800;
}

.mx-value-grid{
  display:grid;
  grid-template-columns:1.35fr .92fr;
  gap:12px;
}
.mx-value-chart{padding:14px}
.mx-chart-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.mx-chart-head strong{
  display:block;
  color:var(--mx-ink);
  font-size:10px;
  font-weight:800;
}
.mx-chart-head span{
  display:block;
  margin-top:4px;
  color:var(--mx-muted-2);
  font-size:8px;
}
.mx-progress-pill{
  padding:5px 8px;
  border-radius:999px;
  background:var(--mx-bg-mint);
  color:var(--mx-green);
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-wf-svg{
  display:block;
  width:100%;
  height:auto;
  margin-top:14px;
}
.mx-insight-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.mx-insight-card{
  padding:14px;
  display:flex;
  flex-direction:column;
}
.mx-insight-card strong{
  display:block;
  color:var(--mx-ink);
  font-size:10px;
  font-weight:800;
}
.mx-insight-card svg{
  flex:1;
  min-height:112px;
}
.mx-insight-card p{
  margin:10px 0 0;
  color:var(--mx-muted);
  font-size:8px;
  line-height:1.55;
}
.mx-insight-rows{
  margin-top:10px;
  display:grid;
  gap:8px;
}
.mx-insight-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:10px;
  background:#fff;
  color:var(--mx-muted);
  font-size:8px;
}
.mx-insight-row b{
  color:var(--mx-ink);
  font-size:10px;
}

.mx-tree-panel{padding:16px}
.mx-tree-top{
  width:31.5%;
  margin:0 auto;
  padding:13px 14px;
  border:1px solid var(--mx-line);
  border-radius:14px;
  background:#fbfdfc;
  box-shadow:var(--mx-shadow-soft);
  text-align:left;
  font-size:10px;
  font-weight:800;
  line-height:1.45;
}
.mx-tree-top .bar{
  height:6px;
  margin-top:12px;
  border-radius:999px;
  background:#e3eae7;
  overflow:hidden;
}
.mx-tree-top .bar i{
  display:block;
  height:100%;
  width:47%;
  border-radius:999px;
  background:var(--mx-gold);
}
.mx-tree-line{
  width:1px;
  height:20px;
  margin:0 auto;
  background:#c9d8d1;
}
.mx-tree-row{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.mx-tree-row::before{
  content:'';
  position:absolute;
  left:16.6%;
  right:16.6%;
  top:0;
  height:1px;
  background:#c9d8d1;
}
.mx-node{
  position:relative;
  padding:13px 14px;
  border:1px solid var(--mx-line);
  border-radius:14px;
  background:#fbfdfc;
  box-shadow:var(--mx-shadow-soft);
  font-size:10px;
}
.mx-node::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  border-radius:14px 0 0 14px;
  background:var(--mint-accent,#2aa07f);
}
.mx-node .kicker{
  display:block;
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-node strong{
  display:block;
  min-height:40px;
  margin-top:8px;
  color:var(--mx-ink);
  font-size:10px;
  line-height:1.45;
}
.mx-node .bar{
  height:6px;
  margin-top:12px;
  border-radius:999px;
  background:#e3eae7;
  overflow:hidden;
}
.mx-node .bar i{
  display:block;
  height:100%;
  width:var(--w,50%);
  border-radius:999px;
  background:var(--mint-accent,#2aa07f);
}
.mx-node .pct{
  display:block;
  margin-top:8px;
  color:var(--mx-ink);
  font-size:9px;
  font-weight:800;
}

.mx-stage{padding:14px}
.mx-stage-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.mx-stage-name{
  font-size:12px;
  font-weight:800;
  color:var(--mx-ink);
}
.mx-stage-copy{
  font-size:8px;
  color:var(--mx-muted-2);
  margin-top:4px;
}
.mx-stage-badge{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(242,200,15,.16);
  color:#83672a;
  font-size:7px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-stage-tabs{
  display:flex;
  gap:6px;
  margin-top:12px;
  margin-bottom:12px;
}
.mx-stage-tabs span{
  padding:5px 8px;
  border-radius:8px;
  background:#f7faf8;
  border:1px solid var(--mx-line);
  color:var(--mx-muted-2);
  font-size:7px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mx-stage-tabs .on{
  background:#eaf5f1;
  color:var(--mx-green);
}
.mx-stage-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:12px;
}
.mx-stage-kpi{
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--mx-line);
  background:#fff;
  box-shadow:var(--mx-shadow-soft);
}
.mx-stage-kpi.teal{background:#f4fbf8}
.mx-stage-kpi.gold{background:#fffaf0}
.mx-stage-kpi small{
  display:block;
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-stage-kpi b{
  display:block;
  margin-top:8px;
  font-size:22px;
  line-height:1;
  color:var(--mx-ink);
  font-weight:800;
  font-family:var(--f-disp,'Sora',system-ui,sans-serif);
}
.mx-stage-kpi span{
  display:block;
  margin-top:6px;
  color:var(--mx-muted-2);
  font-size:8px;
}
.mx-stage-grid{
  display:grid;
  grid-template-columns:1.35fr .72fr;
  gap:12px;
}
.mx-stage-flow{
  padding:12px;
  border:1px solid var(--mx-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--mx-shadow-soft);
}
.mx-stage-flow-head,
.mx-stage-gauge-head{
  display:flex;
  justify-content:space-between;
  color:var(--mx-muted-2);
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mx-stage-track{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.mx-stage-pill{
  position:relative;
  padding:10px 8px;
  border:1px solid var(--mx-line);
  border-radius:14px;
  background:#fbfdfc;
  text-align:center;
}
.mx-stage-pill.active{
  border-color:rgba(242,200,15,.4);
  background:#fffdf4;
}
.mx-stage-pill strong{
  display:block;
  font-size:16px;
  color:var(--mx-green);
}
.mx-stage-pill b{
  display:block;
  margin-top:6px;
  color:var(--mx-ink);
  font-size:9px;
}
.mx-stage-pill span{
  display:block;
  margin-top:4px;
  color:var(--mx-muted-2);
  font-size:7px;
}
.mx-stage-side{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.mx-stage-gauge,
.mx-stage-bars{
  padding:12px;
  border:1px solid var(--mx-line);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--mx-shadow-soft);
}
.mx-stage-gauge-arc{
  width:124px;
  height:66px;
  margin:14px auto 6px;
  border:9px solid #dde7e2;
  border-bottom:none;
  border-radius:124px 124px 0 0;
  position:relative;
  overflow:hidden;
}
.mx-stage-gauge-arc::after{
  content:'';
  position:absolute;
  inset:-9px;
  border:9px solid transparent;
  border-top-color:var(--mx-green);
  border-right-color:var(--mx-green);
  border-radius:124px 124px 0 0;
  transform:rotate(-22deg);
  transform-origin:center bottom;
}
.mx-stage-gauge strong{
  display:block;
  text-align:center;
  font-size:22px;
  color:var(--mx-ink);
  font-family:var(--f-disp,'Sora',system-ui,sans-serif);
}
.mx-stage-gauge span{
  display:block;
  margin-top:4px;
  text-align:center;
  color:var(--mx-muted);
  font-size:8px;
}
.mx-stage-bars .row{
  display:grid;
  grid-template-columns:82px 1fr 32px;
  align-items:center;
  gap:7px;
  margin-top:8px;
}
.mx-stage-bars .row:first-of-type{margin-top:12px}
.mx-stage-bars .row label{
  color:var(--mx-muted);
  font-size:7px;
  font-weight:700;
}
.mx-stage-bars .track{
  height:7px;
  border-radius:999px;
  background:#e3eae7;
  overflow:hidden;
}
.mx-stage-bars .track i{
  display:block;
  height:100%;
  width:var(--w,60%);
  border-radius:999px;
  background:var(--bar-color,var(--mx-green));
}
.mx-stage-bars .row b{
  text-align:right;
  color:var(--mx-ink);
  font-size:7px;
}

@media(max-width:980px){
  .mx-value-grid,
  .mx-stage-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:800px){
  .mx-mock-body{min-height:330px;padding:14px}
  .mx-metrics,
  .mx-stage-kpis{grid-template-columns:1fr}
  .mx-tree-row{grid-template-columns:1fr}
  .mx-tree-row::before,.mx-tree-line{display:none}
  .mx-tree-top{width:100%}
  .mx-road-head,.mx-road-row{grid-template-columns:1fr}
  .mx-road-head{gap:8px}
  .mx-road-months{font-size:7px}
}