/* Solutions: hairline cell grid on ink (1px gaps over a line-coloured backdrop draw every divider) */
.solutions { overflow: hidden; }
.cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 56px; background: var(--line-2); border: 1px solid var(--line-2); }
.bx { display: flex; flex-direction: column; padding: 28px 24px; min-height: 280px; background: var(--bg); transition: background-color var(--dur-fast) var(--ease); }
.bx:hover { background: var(--bg-2); }
.bx-ic { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border: 1px solid var(--line-2); border-radius: var(--r); color: var(--accent); }
.bx-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.bx .gr { margin: 28px 0 8px; font: 400 11px var(--mono); letter-spacing: 0.1em; color: var(--text-3); }
.bx h3 { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
.bx p { color: var(--text-2); font-size: 14px; }
.bx ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.bx li { padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r); font-size: 12px; color: var(--text-2); }

@media (max-width: 1024px) { .cells { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cells { grid-template-columns: minmax(0, 1fr); } .bx { min-height: 0; } .bx p { font-size: 15px; } }