.tools-directory { margin: 30px 0 42px; }
.directory-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 1rem;
}
.directory-heading h2 { margin: 0 0 .45rem; color: #28352c; font-size: clamp(25px, 3vw, 34px); }
.directory-intro { max-width: 45rem; margin: 0; color: #5b685c; font-size: 15px; line-height: 1.65; }
.tools-directory .tools-search { width: min(100%, 31rem); margin: 0; padding: 15px 17px; border: 1px solid #dce3da; border-radius: 12px; background: #fff; box-shadow: 0 8px 26px #20302010; }
.tools-directory .tools-search > label { display: block; margin-bottom: 7px; color: #354439; font-size: 14px; font-weight: 700; }
.tools-directory .tools-search > div { display: flex; align-items: stretch; gap: 8px; }
.tools-directory .tools-search input { min-width: 0; min-height: 44px; flex: 1; padding: 10px 12px; border: 1px solid #cbd5ca; border-radius: 8px; background: #fbfcfa; color: #26312b; font: inherit; }
.tools-directory .tools-search button { min-height: 44px; padding: 9px 12px; border: 1px solid #d4ddd2; border-radius: 8px; background: #f3f6f0; color: #495b42; font: inherit; font-weight: 650; cursor: pointer; }
.tools-directory .tools-search input:focus-visible,
.tools-directory .tools-search button:focus-visible,
.directory-filters button:focus-visible { outline: 3px solid #66874b; outline-offset: 3px; }
.tools-directory .tools-search-message { min-height: 1.3em; margin: 8px 0 0; color: #64734f; font-size: 13px; }
.directory-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.directory-filters button { min-height: 40px; padding: 8px 13px; border: 1px solid #d1ddc9; border-radius: 999px; background: #f2f6ee; color: #475c3b; font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.directory-filters button[aria-pressed="true"] { border-color: #597447; background: #597447; color: #fff; }
.directory-filters[hidden] { display: none; }
.tools-quick-starts { margin: 24px 0 22px; }
.tools-quick-starts > h3 { margin: 0 0 4px; color: #28352c; font-size: 20px; }
.tools-quick-starts > p { margin: 0 0 13px; color: #69766b; font-size: 13px; }
.tools-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tools-quick-card { overflow: hidden; border: 1px solid #dce3da; border-radius: 12px; background: #fff; color: inherit; text-decoration: none; box-shadow: 0 5px 18px #2030200a; transition: transform .16s ease, box-shadow .16s ease; }
.tools-quick-card:hover, .tools-quick-card:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px #20302016; }
.tools-quick-card:focus-visible { outline: 3px solid #66874b; outline-offset: 3px; }
.tools-quick-card > div:last-child { padding: 14px 16px 16px; }
.tools-quick-card h3 { margin: 5px 0; color: #263b2c; font-size: 17px; line-height: 1.35; }
.tools-quick-card p { margin: 0 0 11px; color: #566254; font-size: 13px; line-height: 1.5; }
.tools-quick-art { display: flex; height: 124px; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(125deg, #eef4e8, #f7f8f4 72%, #e7eee0); }
.tools-quick-card[data-topic="email"] .tools-quick-art { background: linear-gradient(125deg, #e9f5f3, #f6f9f7 72%, #dcefeb); }
.tools-quick-card[data-topic="network"] .tools-quick-art { background: linear-gradient(125deg, #eaf2f8, #f7f9fa 72%, #dfeaf2); }
.tools-quick-card[data-topic="security"] .tools-quick-art { background: linear-gradient(125deg, #f8f1e6, #faf9f5 72%, #f0e7d8); }
.tools-quick-art svg { width: 100%; height: 91px; padding: 8px 22px 0; color: #647e4e; }
.tools-quick-card[data-topic="email"] .tools-quick-art svg { color: #197873; }
.tools-quick-card[data-topic="network"] .tools-quick-art svg { color: #39729a; }
.tools-quick-card[data-topic="security"] .tools-quick-art svg { color: #927147; }
.tools-quick-art > span { padding-bottom: 8px; color: #69766b; font-size: 10px; }
.tools-directory .tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.tools-directory .tools-grid > [hidden] { display: none !important; }
.directory-card { display: flex; min-width: 0; flex-direction: column; padding: 16px 18px; border: 1px solid #dce3da; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px #2030200a; transition: transform .16s ease, box-shadow .16s ease; }
.directory-card-art { display: grid; min-height: 112px; place-items: center; gap: 0; margin: -16px -18px 13px; padding: 9px 12px 6px; border-radius: 12px 12px 0 0; background: linear-gradient(125deg, #edf7f6, #f1f5f9 70%, #e4eef4); color: #127d78; }
.directory-card-art svg { display: block; width: 132px; height: 84px; }
.directory-card-art > span { color: #69766b; font-size: 10px; line-height: 1.3; }
.directory-card-art[data-visual="email"], .directory-card-art[data-visual="browser"] { background: linear-gradient(125deg, #eef4fb, #f4f6f8 70%, #e6edf4); color: #3a6692; }
.directory-card-art[data-visual="license"], .directory-card-art[data-visual="certificate"] { background: linear-gradient(125deg, #fbf3e9, #f7f7f3 70%, #f1e7d9); color: #8b6740; }
.directory-card-art[data-visual="identity"], .directory-card-art[data-visual="security"] { background: linear-gradient(125deg, #f1f6ec, #f8f8f2 70%, #e8efe1); color: #617a48; }
.directory-card:hover, .directory-card:focus-within { transform: translateY(-2px); box-shadow: 0 12px 28px #20302016; }
.directory-category { color: #64734f; font-size: 11px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.directory-card h2 { margin: 7px 0 8px; font-size: 18px; line-height: 1.35; }
.directory-card h2 a { color: #263b2c; text-decoration: none; }
.directory-card h2 a:hover { text-decoration: underline; }
.directory-card p { flex: 1; margin: 0 0 15px; color: #566254; font-size: 14px; line-height: 1.65; }
.directory-action { align-self: flex-start; color: #516c3e; font-size: 14px; font-weight: 700; text-decoration: none; }
.directory-action:hover { text-decoration: underline; }
.directory-action:focus-visible, .directory-card h2 a:focus-visible { outline: 3px solid #66874b; outline-offset: 3px; border-radius: 4px; }
.tools-no-results { margin: 0 0 20px; color: #5b685c; }
@media (max-width: 950px) { .tools-directory .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .directory-heading { display: block; }
  .tools-directory .tools-search { width: 100%; margin-top: 16px; }
  .tools-directory .tools-grid { grid-template-columns: 1fr; gap: 12px; }
  .tools-quick-grid { grid-template-columns: 1fr; }
  .tools-quick-art { height: 100px; }
  .tools-quick-art svg { height: 72px; }
  .directory-card:hover, .directory-card:focus-within { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .directory-card { transition: none; } .directory-card:hover, .directory-card:focus-within { transform: none; } }