/* ================================================================
   CRIS LANDING — ABOUT
   Rules: no inline styles, no !important, no media queries.
          Responsive values are set per range in responsive.css
          under ".plx-about": --about-py
   ================================================================ */

.plx-about {
  /* colour */

  /* shape + type */

  padding: var(--sp-64) 0;
}
.plx-about-desc {
  color: var(--t3);
  font-size: var(--fs-14);

  margin-bottom: var(--sp-16);
}

.plx-about-last { margin-bottom: 0; }

/* Feature timeline (right side) */
.plx-feature-timeline { position: relative; }
.plx-feature-timeline::before {
  background: linear-gradient(180deg, transparent, var(--border-md) 10%, var(--border-md) 90%, transparent);
  bottom: 0;
  content: '';
  left: var(--pos-24);
  position: absolute;
  top: 0;
  width: 1px;
  z-index: 0;
}
.plx-feature-item {
  align-items: flex-start;
  display: flex;
  gap: var(--sp-20);
  padding: 0 0 var(--sp-32);
  position: relative;
  z-index: var(--z-1);
}
.plx-feature-item:last-child { padding-bottom: 0; }
.plx-feature-icon {
  align-items: center;
  background: linear-gradient(var(--ic-tint), var(--ic-tint)), var(--bg);
  border-radius: var(--br-inner);
  display: flex;
  flex-shrink: 0;
  font-size: var(--size-18);
  height: var(--size-44);
  justify-content: center;
  width: var(--size-44);
}
.plx-feature-icon.plx-ic-lime   { --ic-tint: var(--lime-bg);   color: var(--lime); }
.plx-feature-icon.plx-ic-cyan   { --ic-tint: var(--cyan-bg);   color: var(--cyan); }
.plx-feature-icon.plx-ic-purple { --ic-tint: var(--purple-bg); color: var(--purple); }
.plx-feature-icon.plx-ic-amber  { --ic-tint: var(--amber-bg);  color: var(--amber); }
.plx-feature-title { color: var(--t1); font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--sp-4); }
.plx-feature-desc  { color: var(--t4); font-size: var(--fs-12);margin: 0; }