/* Local visual hierarchy for Web, SEO methodology and RAG examples. */
.solution-page .gb-service-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  margin-block: 24px 28px;
}
.solution-page .gb-service-grid > div {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 18px 16px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-elev);
  box-shadow: none;
  overflow: visible;
  transition: none;
}
.solution-page .gb-service-grid > div:hover {
  border-color: var(--border);
  box-shadow: none;
  transform: none;
}
.solution-page .gb-service-grid h3 {
  align-self: center;
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.solution-page .gb-service-grid p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.solution-page .gb-visual-section > h2 {
  margin: 12px 0 0;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.3;
  letter-spacing: -.025em;
  scroll-margin-top: 90px;
}
.solution-page .gb-service-grid--web > div { grid-template-rows: auto auto 1fr; }
.solution-page .gb-service-grid--web h3 { grid-column: 1 / -1; }
/* Reuse the accepted secondary control; the legacy Web rule used a pale surface. */
.web-service-page .btn-row .btn:not(.btn-primary) {
  color: var(--button-label);
  border-color: var(--button-glass-border);
  background: var(--button-glass-reflection), var(--button-glass-surface);
  box-shadow: var(--button-glass-shadow);
}
.gb-service-glyph {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  flex: none;
  border: 1px solid #aeb9c4;
  border-radius: 13px;
  color: #324356;
  background:
    linear-gradient(126deg, #ffffffd9 0%, #ffffff52 39%, transparent 40%),
    linear-gradient(145deg, #eaf0f4 0%, #c8d3dd 56%, #edf2f5 100%);
  box-shadow: inset 0 0 0 2px #ffffffa6, inset 0 -4px 8px #657b9129, 0 6px 12px #21384e14;
}
.gb-service-glyph::before {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: -1;
  border: 1px solid #7b91a04d;
  border-top-color: #ffffffed;
  border-radius: 7px;
  pointer-events: none;
}
.gb-service-glyph::after {
  content: "";
  position: absolute;
  right: 11px;
  bottom: 7px;
  width: 12px;
  height: 3px;
  border-radius: 2px;
  background: #ff783d;
  pointer-events: none;
}
.gb-service-glyph > .gb-icon {
  width: 30px;
  height: 30px;
  stroke-width: 1.6;
}
[data-theme="dark"] .gb-service-glyph {
  border-color: #70828f;
  color: #eef6fc;
  background:
    linear-gradient(126deg, #ffffff26 0%, #ffffff08 39%, transparent 40%),
    linear-gradient(145deg, #384d5f 0%, #1e2d3a 56%, #415868 100%);
  box-shadow: inset 0 0 0 2px #dcefff26, inset 0 -4px 8px #07111b52, 0 6px 12px #0003;
}
[data-theme="dark"] .gb-service-glyph::before {
  border-color: #c1d4e126;
  border-top-color: #dcefff70;
}
@media (min-width: 641px) {
  .solution-page .gb-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  .solution-page :is(.gb-service-grid--web, .gb-service-grid--examples) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 420px) {
  .solution-page .gb-service-grid > div { padding: 18px; gap: 16px 14px; }
}
@media (forced-colors: active) {
  .gb-service-glyph { background: Canvas; border-color: CanvasText; color: CanvasText; box-shadow: none; }
  .gb-service-glyph::before { border-color: CanvasText; }
  .gb-service-glyph::after { background: CanvasText; }
}