/* Tool-card imagery and the supplied PixelOrigen four-square mark. */
.tool-visual.has-tool-image {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 0 !important;
  background: #071522;
}

.advanced-tool-visual svg { width: 100%; height: 100%; min-height: 210px; display: block; object-fit: cover; }
.advanced-tool-visual { overflow: hidden; background: #071727; }

.tool-visual.has-tool-image > :not(.tool-image):not(.tool-badge) {
  display: none !important;
}

.tool-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.55s var(--ease), filter 0.3s ease;
}

.tool-visual.has-tool-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 13, 24, 0.01) 35%, rgba(4, 13, 24, 0.3) 100%);
}

.tool-visual.has-tool-image .tool-badge {
  z-index: 2;
  color: #dff8ff;
  background: rgba(4, 16, 28, 0.76);
  border-color: rgba(114, 230, 255, 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.tool-card:hover .tool-image {
  transform: scale(1.035);
  filter: saturate(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .tool-image {
    transition: none;
  }

  .tool-card:hover .tool-image {
    transform: none;
  }
}


/* OCR card keeps its scan indicators visible over the real tool image. */
.image-to-text-visual.has-tool-image > .ocr-scan-beam,
.image-to-text-visual.has-tool-image > .ocr-text-chip {
  display: block !important;
  z-index: 2;
  pointer-events: none;
}

.image-to-text-visual.has-tool-image .ocr-scan-beam {
  left: 13%;
  right: 13%;
  top: 50%;
}

.image-to-text-visual.has-tool-image .ocr-text-chip {
  right: 8%;
  bottom: 12%;
  background: rgba(4, 16, 28, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* =====================================================
   New browser-side utility card visuals
   Pure SVG/CSS keeps the landing page lightweight.
===================================================== */
.generated-tool-visual {
  position: relative;
  background: #071727;
}

.generated-tool-visual > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.generated-tool-visual .gtv-bg { fill: #071727; }
.generated-tool-visual .gtv-paper-shadow { fill: rgba(0,0,0,.28); }
.generated-tool-visual .gtv-paper,
.generated-tool-visual .qr-sheet { fill: #f8fbff; }
.generated-tool-visual .gtv-lines { fill: none; stroke: #7790a6; stroke-width: 13; stroke-linecap: round; opacity: .62; }
.generated-tool-visual .gtv-lines.small { stroke-width: 8; }
.generated-tool-visual .gtv-arrow { fill: none; stroke: #61ddf7; stroke-width: 16; stroke-linecap: round; }
.generated-tool-visual .gtv-output { fill: #e8f5fb; stroke: #65dff6; stroke-width: 7; }
.generated-tool-visual .gtv-chip rect { fill: rgba(9, 31, 49, .94); stroke: rgba(112, 226, 249, .44); stroke-width: 3; }
.generated-tool-visual .gtv-chip text { fill: #eaffff; font: 600 28px/1 system-ui, sans-serif; }
.generated-tool-visual .gtv-chip path,
.generated-tool-visual .gtv-chip line { fill: none; stroke: #75ebc1; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }

.doc-scanner-card-visual .scan-outline { fill: none; stroke: #66e1f8; stroke-width: 9; stroke-linejoin: round; }
.doc-scanner-card-visual .scan-corner { fill: #7af0c8; stroke: #052638; stroke-width: 7; }

.qr-card-visual .qr-modules { fill: #092236; }
.qr-card-visual .scan-frame { fill: none; stroke: #6ce6fb; stroke-width: 11; stroke-linecap: round; }
.qr-card-visual .scan-frame line { stroke: #79f0c9; opacity: .9; }
.qr-card-visual .qr-chip circle { fill: #77efc8; }

.favicon-card-visual .fav-source { fill: #102e48; stroke: #63e0f8; stroke-width: 6; }
.favicon-card-visual .fav-mark { fill: #76edc8; }
.favicon-card-visual .fav-icons rect { fill: #123553; stroke: #7297ff; stroke-width: 5; }
.favicon-card-visual .fav-icons rect:nth-child(2n) { stroke: #65e2f8; }

.watermark-card-visual .wm-photo { fill: #173f54; stroke: #5bd9f2; stroke-width: 5; }
.watermark-card-visual .wm-sun { fill: #ffdc78; opacity: .82; }
.watermark-card-visual .wm-mountains { fill: #356e70; }
.watermark-card-visual .wm-text { fill: rgba(255,255,255,.52); font: 700 42px/1 system-ui, sans-serif; transform: rotate(-27deg); transform-origin: 500px 338px; }
.watermark-card-visual .wm-controls rect { fill: rgba(9,31,49,.94); stroke: rgba(112,226,249,.34); stroke-width: 4; }
.watermark-card-visual .wm-controls text { fill: #dff8ff; font: 600 28px/1 system-ui, sans-serif; }
.watermark-card-visual .wm-controls line,
.watermark-card-visual .wm-controls path { fill: none; stroke: #75e7fb; stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.watermark-card-visual .wm-controls circle { fill: #79f0c8; }

@media (max-width: 640px) {
  .generated-tool-visual .gtv-chip text { font-size: 31px; }
}

/* New tool card illustrations live on the landing cards only. */
.generated-tool-visual .new-tool-card-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
}