/* route: Utility (hub) — Blocco 8 · B7B1. Estratto da utility.html inline. */
[data-route="utility"] .lead { margin: 0 2px 16px; }

[data-route="utility"] .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
@media (min-width: 760px) {
  [data-route="utility"] .grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

[data-route="utility"] .tile {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column;
  box-shadow: 0 6px 20px rgba(60, 90, 60, .07);
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-route="utility"] .tile:active { transform: scale(.97); box-shadow: 0 3px 10px rgba(60, 90, 60, .12); }
[data-route="utility"] .tile img { width: 100%; height: 128px; object-fit: contain; background: #fff; padding: 8px 0 2px; }
[data-route="utility"] .tile .cap { padding: 11px 14px 13px; border-top: 1px solid var(--line); }
[data-route="utility"] .tile .cap b { font-size: .96rem; font-weight: 600; display: block; }
[data-route="utility"] .tile .cap span { font-size: .73rem; color: var(--muted); line-height: 1.3; display: block; margin-top: 2px; }