.tools { color: var(--ink); background: var(--paper); }
.tools :focus-visible { outline-color: var(--cobalt); }
.tools .eyebrow { color: var(--cobalt); }
.tools .section-lead { color: #4A5D78; }
.tool-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tool-group { min-width: 0; padding: 26px; border: 1px solid #D8E2EF; border-radius: 20px; background: var(--ice); }
.tool-group h3 { margin-bottom: 22px; }
.tool-group ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tool-group li { min-width: 0; padding: 11px 12px; border: 1px solid #DFE8F3; border-radius: 9px; color: #233B5C; background: var(--paper); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.74rem; line-height: 1.55; overflow-wrap: anywhere; }
.tool-decision { border-color: rgb(25 82 232 / 38%); background: #EEF3FF; }
.tool-decision li { color: var(--paper); border-color: var(--navy-2); background: var(--navy-2); }
.tools-boundary { margin: 28px 0 0; padding: 22px 24px; border-left: 3px solid var(--cobalt); color: #334A69; background: var(--ice); font-weight: 650; }

@media (prefers-reduced-motion: no-preference) {
  html.io .tools .tool-group:nth-child(2) { transition-delay: 80ms; }
  html.io .tools .tool-group:nth-child(3) { transition-delay: 160ms; }
}

@media (max-width: 1000px) {
  .tool-groups { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .tool-group { padding: 22px; }
  .tools-boundary { padding: 18px 20px; }
}