/* ================================================================
   CRIS LANDING — VALUE LOOP
   Loaded after landing-base.css (shared tokens).
   Rules: no inline styles, no !important, no media queries.
          Responsive values are custom properties set per range in
          responsive.css under ".plx-loop":
            xs ≤575.98 | sm 576-767.98 | md 768-991.98
            lg 992-1199.98 | xl 1200-1399.98 | xxl ≥1400

   Variables set per range (responsive.css):
     --loop-py --loop-gap --loop-steps-gap --loop-fs-h2 --loop-cols
     --loop-steps-cols --loop-hex-size --loop-arrow-display
   Step colours (teal / indigo / blue / yellow / aqua / green) set
   --loop-accent on each step.
   ================================================================ */

/* ── 1. TOKENS (non-responsive) ── */

/* ── 2. STEP THEMES ── */
.plx-loop-step-teal   { --loop-accent: var(--green); }
.plx-loop-step-indigo { --loop-accent: var(--purple); }
.plx-loop-step-blue   { --loop-accent: var(--indigo-600); }
.plx-loop-step-yellow { --loop-accent: var(--amber-hover); }
.plx-loop-step-aqua   { --loop-accent: var(--green); }
.plx-loop-step-green  { --loop-accent: var(--green); }

/* ── 3. SECTION ── */
.plx-loop {
  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}
.plx-loop::before {
  background: radial-gradient(ellipse 60% 60% at 70% 50%, var(--green-a05), transparent 70%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.plx-loop .container-xl { position: relative; z-index: var(--z-1); }
.plx-loop-grid {
  align-items: center;
  display: grid;
  gap: var(--sp-40);
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
}
.plx-loop-eyebrow {
  color: var(--lime);
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: var(--sp-14);
  text-transform: uppercase;
}
.plx-loop-title {
  color: var(--t1);
  font-size: var(--fs-36);
  font-weight: 800;
  letter-spacing: -.02em;

  margin: 0;
}

/* ── 4. STEPS ── */
.plx-loop-steps {
  display: grid;
  gap: var(--sp-40);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.plx-loop-step {
  min-width: 0;
  position: relative;
  text-align: center;
}
.plx-loop-step::after {
  color: var(--t3);
  content: '\2192';
  display: none;
  font-size: var(--fs-20);
  left: calc(100% + var(--sp-40) / 2);

  position: absolute;
  top: calc(var(--sp-64) / 2);
  transform: translate(-50%, -50%);
}
.plx-loop-step:last-child::after { display: none; }
.plx-loop-hex {
  align-items: center;
  color: var(--loop-accent);
  display: inline-flex;
  filter: drop-shadow(0 0 10px var(--loop-accent));
  height: var(--size-64);
  justify-content: center;
  margin-bottom: var(--sp-14);
  position: relative;
  width: calc(var(--size-64) * .89);
}
.plx-loop-hex svg { height: 100%; inset: 0; position: absolute; width: 100%; }
.plx-loop-hex polygon {
  fill: var(--loop-accent);
  fill-opacity: var(--opacity-faint);
  stroke: var(--loop-accent);
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.plx-loop-hex i {
  font-size: calc(var(--fs-36) * .38);

  position: relative;
}
.plx-loop-name { color: var(--t1); font-size: var(--fs-14); font-weight: 700; margin-bottom: var(--sp-4); }
.plx-loop-desc { color: var(--t3); font-size: var(--fs-12);margin: 0; }