/* ==========================================================================
   Feature grid: ruled cards for the rest of the workflow.
   ========================================================================== */

.grid-section { border-bottom: 1px solid var(--line); }

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--line);
}
/* Cells stay see-through so the page background runs under the grid; each
   draws its rule into the 1px gap. */
.f-card {
  padding: 28px 24px;
  outline: 1px solid var(--line);
  transition: background-color 200ms ease;
}
.f-card:hover { background: var(--texture), var(--white); }
/* Icons are Iconoir regular icons (MIT licence, https://iconoir.com). */
.f-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.f-icon { flex-shrink: 0; color: var(--ink); }
.f-card p { font-size: 15px; color: var(--muted); }

@media (max-width: 1020px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .feature-grid { grid-template-columns: 1fr; }
}