/* layout.css — grids + responsive */
.grid { display:grid; gap: var(--s-3); }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .grid-4,
  .grid-3 { grid-template-columns: 1fr; }
}

.hero {
  background: #eef2f7;
  border-bottom: 1px solid rgba(15, 23, 42, 0.12);
}

.hero-inner {
  max-width: 900px;
  padding: 56px 0 40px;
}

.section {
  background: #ffffff;
}

h2 {
  margin-top: 32px;
}

.insight-compare-callout {
  margin: 24px 0 32px;
  padding: 20px 24px;
  background: #f8fafc;
  border-left: 4px solid #4f46e5;
  border-radius: 12px;
  max-width: 760px;
}

.insight-compare-callout p {
  margin: 0;
}

.insight-compare-callout p + p {
  margin-top: 10px;
}