/* ================================================================
   CRIS LANDING — VERTICZ MATURITY JOURNEY
   Rules: no inline styles, no !important, no media queries.
          Step themes set --mj (colour), --mj-bg, --mj-bd and --mj-next
          (the colour of the following step, used by the arrow).
          Range overrides live in landing-responsive.css.
   ================================================================ */

.plx-scale {
  overflow: hidden;
  padding: var(--sp-64) 0;
}

/* ── Head ── */
.plx-mj-head { margin-bottom: var(--sp-60); text-align: center; }
.plx-mj-title {
  color: var(--t1);
  font-size: var(--fs-36);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-10);
}
.plx-mj-brand { color: var(--green); }
.plx-mj-sub { color: var(--t4); font-size: var(--fs-14); margin: 0; }

/* ── Track ── */
.plx-mj-track {
  display: grid;
  gap: var(--sp-32);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: var(--sp-32) 0 0;
}

/* Step themes */
.plx-mj-step-red    { --mj: var(--red);    --mj-bg: var(--red-bg);    --mj-bd: var(--red-bd);    --mj-next: var(--amber); }
.plx-mj-step-amber  { --mj: var(--amber);  --mj-bg: var(--amber-bg);  --mj-bd: var(--amber-bd);  --mj-next: var(--green); }
.plx-mj-step-green  { --mj: var(--green);  --mj-bg: var(--green-bg);  --mj-bd: var(--green-bd);  --mj-next: var(--cyan); }
.plx-mj-step-cyan   { --mj: var(--cyan);   --mj-bg: var(--cyan-bg);   --mj-bd: var(--cyan-bd);   --mj-next: var(--purple); }
.plx-mj-step-purple { --mj: var(--purple); --mj-bg: var(--purple-bg); --mj-bd: var(--purple-bd); --mj-next: var(--purple); }

/* Card */
.plx-mj-step {
  background: linear-gradient(180deg, var(--mj-bg), var(--bg));
  border: 1px solid var(--mj-bd);
  border-radius: var(--br-inner);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  padding: var(--sp-40) var(--sp-16) var(--sp-24);
  position: relative;
  transition: border-color var(--t-default), box-shadow var(--t-default), transform var(--t-default);
}
.plx-mj-step:hover { border-color: var(--mj); box-shadow: 0 0 var(--sp-24) var(--mj-bd); transform: translateY(-4px); }

/* Arrow to the next step (sits in the track gap) */
.plx-mj-step:not(:last-child)::after {
  background: linear-gradient(90deg, var(--mj), var(--mj-next));
  clip-path: polygon(0 35%, 65% 35%, 65% 0, 100% 50%, 65% 100%, 65% 65%, 0 65%);
  content: '';
  height: var(--size-14);
  left: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--sp-32);
}

/* Hexagon badge, half outside the card */
.plx-mj-hex {
  align-items: center;
  background: var(--mj);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  height: var(--size-64);
  justify-content: center;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: var(--size-56);
}
.plx-mj-hex::before {
  background: var(--bg);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  content: '';
  inset: 2px;
  position: absolute;
}
.plx-mj-hex i { color: var(--mj); font-size: var(--size-24); position: relative; z-index: var(--z-1); }

/* Text */
.plx-mj-num { color: var(--mj); font-size: var(--fs-12); font-weight: 800; letter-spacing: .08em; }
.plx-mj-name { color: var(--mj); font-size: var(--fs-16); font-weight: 700; margin: 0; }
.plx-mj-desc { color: var(--t4); font-size: var(--fs-12); margin: 0; }