/* ==========================================================================
   Vertical page template — shared layout styles
   Used by all pages in pages/use-cases/ and pages/solutions/
   ========================================================================== */

/* Value props — 3-column grid */
.value-props {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 38px;
  background: rgba(127, 216, 190, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.value-prop {
  background: var(--surface-card);
  padding: 36px 28px;
  transition: background 0.2s;
}
.value-prop:hover { background: var(--surface-card-hover); }
.vp-icon {
  width: 42px; height: 42px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127, 216, 190, 0.1);
  border-radius: 10px; padding: 9px;
}
.vp-icon svg { width: 22px; height: 22px; }

/* Features — 3-column grid */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 38px;
  background: rgba(127, 216, 190, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.feature-card {
  background: var(--surface-card);
  padding: 28px 24px;
  transition: background 0.2s;
}
.feature-card:hover { background: var(--surface-card-hover); }
.feat-icon {
  width: 38px; height: 38px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(127, 216, 190, 0.1);
  border-radius: 9px; padding: 8px;
}
.feat-icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: 15px; margin-bottom: 8px; }
.feature-card p  { font-size: 13px; }

/* Integrations — 2-column grid */
.integrations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 38px;
}
.integration-group {
  padding: 24px;
  background: var(--surface-card);
  border-radius: 11px;
  border: 1px solid var(--border-faint);
}
.integration-group h3 {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-accent); margin-bottom: 14px;
}

/* Stats — 4-column override */
.stats-4 { grid-template-columns: repeat(4, 1fr); }

/* How it works — 3-column steps */
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-top: 38px;
  background: rgba(127, 216, 190, 0.07);
  border-radius: 14px;
  overflow: hidden;
}
.how-step {
  background: var(--surface-card);
  padding: 36px 28px;
  transition: background 0.2s;
}
.how-step:hover { background: var(--surface-card-hover); }
.how-step-num {
  font-family: var(--font-display); font-size: 38px;
  font-weight: 700; color: rgba(127, 216, 190, 0.2);
  line-height: 1; margin-bottom: 18px;
}
.how-step h3 { font-size: 16px; margin-bottom: 10px; }

/* Responsive */
@media (max-width: 768px) {
  .value-props,
  .features-grid,
  .how-steps      { grid-template-columns: 1fr; }
  .integrations-grid { grid-template-columns: 1fr; }
  .stats-4        { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .stats-4 { grid-template-columns: 1fr; }
}