html, body { overflow-y: auto; }
.supported-tools {
  position: relative;
  z-index: 2;
  padding: 46px 0 54px;
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid rgba(20, 20, 26, 0.06);
}
.tools-inner {
  width: min(var(--content-width), calc(100% - 2 * var(--page-gutter)));
  margin-inline: auto;
}
.supported-tools h2 {
  margin: 0 0 26px;
  color: #171717;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.025em;
}
.tools-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.tool-card {
  min-width: 0;
  min-height: 140px;
  padding: 24px 12px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 18px;
  background: #f8f8f8;
  color: #222;
}
.tool-icon { display: block; width: 40px; height: 40px; object-fit: contain; }
.tool-icon-codex { padding: 6px; background: #111; border-radius: 10px; }
.tool-icon-trae { border-radius: 9px; }
.tool-icon-claude { width: 48px; height: 40px; }
.tool-name { font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; }
@media (max-width: 620px) {
  .supported-tools { padding: 30px 0 36px; }
  .supported-tools h2 { margin-bottom: 20px; }
  .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tool-card { min-height: 126px; border-radius: 14px; }
}