/* ============================================================
   FEATURES — Design 2 tinted-icon cards
============================================================ */
/* The middle chapter mirrors: opener tick and heading swap to the right
   margin, so the three openers alternate left-right-left down the page
   instead of stacking on one edge. Only #features flips — the
   capabilities rail and sub-head live in #products and stay left. */
#features > .wrap::after{left:auto;right:28px;}
#features .section-head.center{text-align:right;margin-left:auto;margin-right:0;}
#features .section-head.center p{margin-left:auto;margin-right:0;}

.features-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:16px;}
.feature{
  position:relative;padding:32px 28px;
  border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--bg-card);
  transition:border-color .3s ease, transform .3s ease;
}
.feature:hover{border-color:var(--line-strong);transform:translateY(-3px);}
/* Bare icon in ink: no tinted tile */
.feature .ficon{ display:block; margin:0 0 18px; font-size:30px; line-height:1; color:var(--ink); }
.feature h3{font-size:20px;letter-spacing:-0.01em;font-weight:500;margin-bottom:8px;}
.feature p{color:var(--ink-dim);font-size:14px;line-height:1.55;}

@media (max-width: 1080px){
  .features-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width: 760px){
  .features-grid{grid-template-columns:1fr;}
}