/* Toolbox: one panel per tool, its art as the background */
.tbx { max-width:1100px; margin:0 auto; padding:40px 16px 72px; }
.tbx .pageHead h1 { font:900 46px/1 "Big Shoulders Display", Impact, "Arial Narrow", sans-serif; text-transform:uppercase; letter-spacing:.01em; margin:0 0 8px; }
.tbx .pageHead p { color:var(--dim); margin:0 0 28px; max-width:640px; }
.tbx code { background:var(--card2); border:1px solid var(--line); padding:1px 6px; border-radius:5px; font-size:.9em; }
.tools { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px; }
.tool:last-child:nth-child(odd) { grid-column:1 / -1; } /* an odd last tool fills the row */
.tool { position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:320px; padding:22px; border-radius:18px; overflow:hidden;
  border:1px solid var(--line2); background:#0e0e0f; color:var(--text); text-decoration:none; isolation:isolate;
  transition:transform .2s, border-color .2s, box-shadow .2s; }
.tool img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.tool::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(14,14,15,0) 25%, rgba(14,14,15,.82) 62%, rgba(14,14,15,.97)); }
.tool:hover, .tool:focus-visible { transform:translateY(-3px); border-color:rgba(198,255,26,.55); box-shadow:0 18px 50px rgba(0,0,0,.5), 0 0 0 4px rgba(198,255,26,.08); text-decoration:none; }
.tool:hover img, .tool:focus-visible img { transform:scale(1.05); }
.tool .no { position:absolute; top:16px; left:20px; font:900 34px/1 "Big Shoulders Display", Impact, sans-serif; color:var(--acc); text-shadow:0 2px 12px rgba(0,0,0,.6); }
.tool h2 { font:900 30px/1.05 "Big Shoulders Display", Impact, sans-serif; text-transform:uppercase; letter-spacing:.01em; margin:0 0 6px; }
.tool p { margin:0; color:#c9c9cc; font-size:14px; max-width:440px; }
.tool .go { align-self:flex-start; margin-top:16px; padding:8px 14px; border-radius:6px; background:var(--acc); color:#141a00; font-weight:700; font-size:14px;
  box-shadow:3px 3px 0 var(--acc2); transition:box-shadow .15s; }
.tool:hover .go { box-shadow:5px 5px 0 var(--acc2); }
.tbx .note { color:var(--dim); margin-top:22px; font-size:13px; }
.tbx .note b { color:var(--text); }
@media (max-width:760px) { .tools { grid-template-columns:1fr; } .tool { min-height:280px; } }
@media (prefers-reduced-motion: reduce) { .tool, .tool img { transition:none; } .tool:hover img { transform:none; } }