/* ================================================================
   CRIS LANDING — HOW CRIS WORKS (hex journey)
   Rules: no inline styles, no !important, no media queries.
          Stage colour themes set --hw-accent and --hw-glow (r,g,b).
          Responsive values are set per range in responsive.css
          under ".plx-how-works":
     --hw-py --hw-layout-dir --hw-layout-gap --hw-left-flex --hw-left-max
     --hw-left-w --hw-stages-wrap --hw-stages-gap --hw-stages-justify
     --hw-stage-w --hw-hex-w --hw-hex-h --hw-hex-ico --hw-sname-fs
     --hw-sdesc-display --hw-arr-display --hw-arr-mt --hw-arr-min
   ================================================================ */

.plx-how-works {
  /* colour */

  /* type */

  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}
.plx-how-works::before {
  background: radial-gradient(ellipse 80% 50% at 60% 50%, var(--lime-a10), transparent 65%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}

/* Layout */
.plx-hw-layout {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--sp-60);
  position: relative;
  z-index: var(--z-1);
}
.plx-hw-left { flex: none; max-width: 100%; width: auto; }
.plx-hw-h2 {
  color: var(--t1);
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 900;
  letter-spacing: -.8px;

  margin-bottom: var(--sp-16);
}
.plx-hw-sub { color: var(--t4); font-size: var(--fs-14);margin-bottom: var(--sp-32); }
.plx-hw-right { flex: 1; min-width: 0; width: 100%; }

/* Stages */
.plx-hw-stages {
  align-items: flex-start;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  width: 100%;
}
.plx-hw-stage {
  flex: 0 0 auto;
  position: relative;
  text-align: center;
  transition: transform var(--t-default) cubic-bezier(0.4,0,0.2,1);
  width: var(--size-110);
}
.plx-hw-stage:hover { transform: translateY(-4px); }

/* Connector arrow */
.plx-hw-arr { align-self: flex-start; display: block; flex: 1; margin-top: var(--sp-40); min-width: var(--size-32); }
.plx-hw-arr-svg { display: block; height: var(--size-22); width: 100%; }

/* Hexagon */
.plx-hw-hex-wrap { height: var(--size-80); margin: 0 auto var(--sp-16); position: relative; width: var(--size-80); }
.plx-hw-hex-svg { display: block; filter: drop-shadow(0 0 8px rgba(var(--hw-glow), .6)); height: 100%; transition: filter var(--t-default); width: 100%; }
.plx-hw-stage:hover .plx-hw-hex-svg { filter: drop-shadow(0 0 16px rgba(var(--hw-glow), .85)); }
.plx-hw-hex-ico {
  align-items: center;
  display: flex;
  font-size: var(--fs-26);
  inset: 0;
  justify-content: center;
  position: absolute;
}

/* Stage themes */
.plx-hws-c1 { --hw-accent: #00E5FF; --hw-glow: 0,229,255;  color: var(--hw-accent); }
.plx-hws-c2 { --hw-accent: #00CCA0; --hw-glow: 0,204,160;  color: var(--hw-accent); }
.plx-hws-c3 { --hw-accent: #7DE000; --hw-glow: 125,224,0;  color: var(--hw-accent); }
.plx-hws-c4 { --hw-accent: #B7FF2A; --hw-glow: 183,255,42; color: var(--hw-accent); }

/* Labels */
.plx-hw-sname { color: var(--hw-accent); font-size: var(--fs-14); font-weight: 800; letter-spacing: -.25px; margin-bottom: var(--sp-4); }
.plx-hw-sdesc { color: var(--t4); display: block; font-size: var(--fs-12);margin: 0; }