/* ================================================================
   CRIS LANDING — CONTINUOUS INTELLIGENCE (value tiles)
   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-val":
            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):
     --val-py --val-head-mb --val-fs-h2 --val-cols --val-gap --val-card-p
   Tile colours (lime / amber) set --val-accent on each tile.
   ================================================================ */

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

.plx-val-card-lime  { --val-accent: var(--lime); }
.plx-val-card-amber { --val-accent: var(--amber); }

/* ── 2. SECTION ── */
.plx-val {
  overflow: hidden;
  padding: var(--sp-64) 0;
  position: relative;
}
.plx-val::before {
  background: radial-gradient(ellipse 60% 50% at 50% 40%, var(--lime-a10), transparent 70%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.plx-val .container-xl { position: relative; z-index: var(--z-1); }
.plx-val-head { margin-bottom: var(--sp-40); }
.plx-val-eyebrow {
  color: var(--lime);
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: .2em;
  margin-bottom: var(--sp-14);
  text-transform: uppercase;
}
.plx-val-title {
  color: var(--t1);
  font-size: var(--fs-36);
  font-weight: 800;
  letter-spacing: -.02em;

  margin: 0;
}

/* ── 3. TILES ── */
.plx-val-grid {
  display: grid;
  gap: var(--sp-16);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.plx-val-card {
  align-items: center;
  background: var(--green-a05);
  border: 1px solid var(--green-bd);
  border-radius: var(--br-inner);
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
  min-width: 0;
  padding: var(--sp-20) var(--sp-14);
  text-align: center;
  transition: transform var(--t-default) cubic-bezier(0.4,0,0.2,1), background var(--t-default);
}
.plx-val-card:hover { background: var(--green-a05); transform: translateY(-3px); }
.plx-val-card i { color: var(--val-accent); font-size: var(--size-26);}
.plx-val-name { color: var(--t1); font-size: var(--fs-12); font-weight: 700;margin: 0; }
.plx-val-desc { color: var(--t3); font-size: var(--fs-12);margin: 0; }