/* Cut out only the matte outside each original raster card. Coordinates follow
   the source PNG canvas; sizing, positioning and animation stay in styles.css.
   The source artwork and its text are retained without regeneration/resampling. */
.neo-workflow-cards img {
  -webkit-mask-image: var(--card-cutout);
  mask-image: var(--card-cutout);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.neo-workflow-cards img:first-child {
  --card-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1096' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M85 0H1415Q1455 28 1455 77V882Q1455 965 1372 965H126Q43 965 43 882V76Q43 28 85 0Z'/%3E%3C/svg%3E");
}

.neo-workflow-cards img:last-child {
  --card-cutout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1500 1306' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M107 0H1393Q1445 21 1445 74V1105Q1445 1166 1384 1166H116Q55 1166 55 1105V74Q55 22 107 0Z'/%3E%3C/svg%3E");
}




/* Replace the embedded demo metric with editable Turkish text. The overlay uses
   the artwork's own viewBox, so it stays aligned throughout responsive scaling
   and the existing parent transition. Tie it to the displayed image, not the
   selected tab, because the existing image swap happens after its fade-out. */
.neo-step-visual {
  position: relative;
}

.neo-step-image-label,
.neo-step-brand {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.neo-step-visual img[src$="/BRYQbNFP21XSdbOpg2tEs4MO0aY.png"] + .neo-step-image-label {
  display: block;
}

/* Follow the first step's actual image swap, including automatic transitions. */
.neo-step-visual img[src$="/ykcQXfkRR4KTqMLXTbg0T9PB8zk-71b55c0334.png"] ~ .neo-step-brand {
  display: block;
}

/* Match the original security image's occupied area and responsive fitting. */
.neo-security-diagram {
  display: block;
  width: 92%;
  height: 92%;
}

/* Keep the orbit/core geometry; let the square brand mark read clearly. */
.neo-orbit-core img[src$="/ornitoreng-mark.png"] {
  width: 84px;
  height: 84px;
}