/* ====================================================================
 * HOME PAGE 2026 SECTIONS (post 8073)
 *
 * The KPI band under the hero, the internal tools section, the IT
 * security section, the three Why CartCraft pillars and the client logo
 * grid were built as native Elementor sections, and their look lives in
 * the section settings where it belongs. That includes the parts one
 * would expect to find here: the ghost numerals behind the idea cards,
 * the security steps and the Why pillars, the hair line between two tool
 * cards, the line running through the step strip, the orange circle of a
 * step, the orange marker of the note box, the raster of the logo grid
 * and the offset of the light band across its tiles.
 *
 * All of that was checked against the rendered page and is deliberately
 * NOT repeated here. A second definition would either draw the same
 * thing twice or drift away from the first one the next time somebody
 * edits the section.
 *
 * What is left is one correction, below. The effect classes come at
 * runtime from inc/ccx-home26.php, so the page data stays clean.
 * ==================================================================== */


/* --------------------------------------------------------------------
 * KPI BAND: the divider on the phone
 *
 * The section stylesheet draws the divider between two figures as an
 * upright hair line on the left edge of the second and third cell. That
 * is right as long as the three cells stand side by side. Below 768px
 * the band turns into a column, and the same rule then puts a short
 * upright line against the left edge of two stacked blocks, where it
 * reads as a stray mark rather than as a divider.
 *
 * This turns it on its side, exactly the way the section stylesheet
 * already does it for the three Why CartCraft pillars one section
 * further down, and with the same 6 percent inset, so both bands behave
 * alike on a phone.
 *
 * The class name is repeated to match the weight of the section rule,
 * which reaches the element through the page class, the element class
 * and elementor-element. Media queries add no weight of their own, so
 * without the repetition the section rule would keep its upright line
 * and only the height would arrive from here.
 *
 * The radius has nothing to do with the line. It belongs to the rim glow
 * this module hands to the cells: the ring traces the radius of its
 * host, and without one it would draw a hard cornered rectangle around a
 * block of centred type. The cell keeps no background, so nothing is
 * painted until the pointer comes near.
 * -------------------------------------------------------------------- */
.cckpi-item {
  border-radius: 16px;
}

@media (max-width: 767px) {
  .cckpi-item.cckpi-item.cckpi-item + .cckpi-item.cckpi-item.cckpi-item::before {
    left: 6%;
    right: 6%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.18) 50%,
      rgba(255, 255, 255, 0) 100%);
  }
}