/*!
 * Chatbotistic — V4 icon glyphs.
 *
 * Renders an SVG-mask glyph inside every empty icon container so .f-ico,
 * .si-ico, .use-emoji, .int-logo, .op-node placeholders no longer look
 * like blank squares. Templates can still drop a real icon inside the
 * container — these styles only show when the container is empty.
 */

/* shared mask base */
.f-card .f-ico::before,
.solution-item .si-ico::before,
.use-card .use-emoji::before,
.int-tile .int-logo::before {
  content: "";
  display: block;
  width: 60%;
  height: 60%;
  background: linear-gradient(135deg, #6fa1ff, #c4a3ff);
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* feature card — generic "spark" glyph by default */
.f-card .f-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 13.8 8.2 20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/><circle cx='19' cy='5' r='1.4'/><circle cx='6' cy='19' r='1.1'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 13.8 8.2 20 10l-6.2 1.8L12 18l-1.8-6.2L4 10l6.2-1.8z'/><circle cx='19' cy='5' r='1.4'/><circle cx='6' cy='19' r='1.1'/></svg>");
}

/* per-card icon variants (apply via nth-of-type so each card differs) */
.features-grid .f-card:nth-child(4n+2) .f-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 4H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v4l5-4h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM7 11a1.2 1.2 0 1 1 0-2.4A1.2 1.2 0 0 1 7 11zm5 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4zm5 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 4H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3v4l5-4h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zM7 11a1.2 1.2 0 1 1 0-2.4A1.2 1.2 0 0 1 7 11zm5 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4zm5 0a1.2 1.2 0 1 1 0-2.4 1.2 1.2 0 0 1 0 2.4z'/></svg>");
}
.features-grid .f-card:nth-child(4n+3) .f-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v3H3zM3 11h18v3H3zM3 17h12v3H3z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v3H3zM3 11h18v3H3zM3 17h12v3H3z'/></svg>");
}
.features-grid .f-card:nth-child(4n) .f-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 4h-3V2h-2v2h-4V2H8v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zM7 12h4v4H7z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M19 4h-3V2h-2v2h-4V2H8v2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 16H5V10h14v10zM7 12h4v4H7z'/></svg>");
}

/* solution list — checkmark glyph */
.solution-item .si-ico::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>");
}

/* use case card — building / shop glyph */
.use-card .use-emoji::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 2 7v2h20V7zM4 10v9h4v-6h8v6h4v-9z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 2 2 7v2h20V7zM4 10v9h4v-6h8v6h4v-9z'/></svg>");
}

/* integration tile — plug glyph */
.int-tile .int-logo {
  background: linear-gradient(135deg, rgba(79,139,255,0.15), rgba(160,112,255,0.15));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
}
.int-tile .int-logo::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M14 2v6h-1V2h-2v6h-1V2H8v8a4 4 0 0 0 3 3.9V22h2v-8.1A4 4 0 0 0 16 10V2z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M14 2v6h-1V2h-2v6h-1V2H8v8a4 4 0 0 0 3 3.9V22h2v-8.1A4 4 0 0 0 16 10V2z'/></svg>");
}
.int-grid .int-tile:nth-child(10n+2) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 4h18v4H3zM3 10h12v4H3zM3 16h18v4H3z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 4h18v4H3zM3 10h12v4H3zM3 16h18v4H3z'/></svg>"); }
.int-grid .int-tile:nth-child(10n+3) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><path d='M12 7v5l3 2'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><circle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/><path d='M12 7v5l3 2'/></svg>"); }
.int-grid .int-tile:nth-child(10n+4) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v14H3zM3 9h18'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v14H3zM3 9h18'/></svg>"); }
.int-grid .int-tile:nth-child(10n+5) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 1 3 5v6c0 5 4 9 9 11 5-2 9-6 9-11V5z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M12 1 3 5v6c0 5 4 9 9 11 5-2 9-6 9-11V5z'/></svg>"); }
.int-grid .int-tile:nth-child(10n+6) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4 4h16v4H4zM4 16h16v4H4zM10 10h4v4h-4z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M4 4h16v4H4zM4 16h16v4H4zM10 10h4v4h-4z'/></svg>"); }
.int-grid .int-tile:nth-child(10n+7) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v3H3zM5 10h14v9H5z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M3 5h18v3H3zM5 10h14v9H5z'/></svg>"); }
.int-grid .int-tile:nth-child(10n+8) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M22 4H2v16h20zM2 8l10 6 10-6'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M22 4H2v16h20zM2 8l10 6 10-6'/></svg>"); }
.int-grid .int-tile:nth-child(10n+9) .int-logo::before { mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 2H4v20l8-4 8 4z'/></svg>"); -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M20 2H4v20l8-4 8 4z'/></svg>"); }

/* op-pipeline node — pulsing dot for live, gradient ring otherwise */
.op-stepcard .op-node:empty {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(79,139,255,0.45), rgba(160,112,255,0.05) 70%);
  border: 1px solid rgba(255,255,255,0.12);
  display: grid;
  place-items: center;
  position: relative;
}
.op-stepcard .op-node:empty::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue, #4f8bff), var(--violet, #a070ff));
  box-shadow: 0 0 14px rgba(79,139,255,0.4);
}

/* the use-card icon container needs explicit size + bg, since the
   previous template only added an empty <div class="use-emoji"></div> */
.use-card .use-emoji {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, rgba(79,139,255,0.18), rgba(160,112,255,0.18));
  border: 1px solid rgba(79,139,255,0.25);
  flex-shrink: 0;
}

/* Mobile responsive tightening — many V4 grids overflowed on phones */
@media (max-width: 720px) {
  .features-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .features-grid .f-card { min-height: 0; padding: 16px; }
  .int-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .use-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .split-2 { grid-template-columns: 1fr !important; gap: 24px !important; }
  .op-pipeline-track { grid-template-columns: 1fr !important; gap: 12px !important; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps::before { display: none; }
  .page-hero h1, .h-1, .h-2 { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1; }
  .cta-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-actions .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .features-grid, .use-grid, .int-grid, .steps { grid-template-columns: 1fr !important; }
  .container { padding-left: 18px; padding-right: 18px; }
  .section { padding: 48px 0; }
}