.tools-intro,
.tool-directory { border-bottom: 1px solid var(--line); padding: 3.75rem max(7vw, 2rem); }

.tools-intro { display: grid; gap: .75rem; grid-template-columns: minmax(150px, .32fr) minmax(0, 1.68fr); }
.tools-intro-brand { grid-column: 1; grid-row: 1 / span 3; max-width: 72px; }
.tools-intro-brand img { display: block; height: auto; max-width: 100%; }
.tools-intro .section-label { grid-column: 1; margin: .35rem 0 0; }
.tools-intro h1 { grid-column: 2; margin: 0; }
.tools-intro > p:last-child { grid-column: 2; margin: 0; max-width: 56ch; }

.tool-directory { display: grid; gap: 2rem; grid-template-columns: minmax(170px, .38fr) minmax(0, 1.62fr); }
.directory-note { color: var(--muted); font-size: .9rem; margin: .8rem 0 0; max-width: 28ch; }
.tool-directory-heading h2 { font-size: clamp(1.55rem, 2.4vw, 2.35rem); margin: 0; }
.tool-list { display: grid; gap: 1.25rem; }
.tool-entry { border-left: 3px solid var(--green); padding: 1.1rem 1.25rem; }
.tool-entry:nth-child(2) { border-left-color: var(--orange); }
.tool-entry:nth-child(3) { border-left-color: var(--ink); }
.tool-entry h3 { font-size: 1.2rem; margin: 0; }
.tool-entry > p { margin: .7rem 0 0; max-width: 62ch; }
.tool-entry-heading { align-items: baseline; display: flex; gap: .9rem; justify-content: space-between; }
.tool-entry-heading .category-label { border: 0; margin: 0; padding: 0; }
.tool-meta { color: var(--muted); font-size: .86rem; }
.inactive-url { overflow-wrap: anywhere; }
.status-note { font-style: italic; }
.disclaimer { border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; line-height: 1.5; margin-top: .9rem !important; padding-top: .7rem; }

/* Instruction 0035: keep the directory note readable without stealing card width. */
.directory-note { max-width: 22ch; overflow-wrap: anywhere; }
.tools-intro-brand { max-width: 84px; }

footer a { color: #fff; }

@media (max-width: 760px) {
  .tools-intro,
  .tool-directory { display: block; padding-block: 2.75rem; }
  .tools-intro .section-label { margin-bottom: .75rem; }
  .tools-intro-brand { margin-bottom: 1.25rem; max-width: 60px; }
  .tools-intro h1 { margin-bottom: .75rem; }
  .tool-directory-heading { margin-bottom: 2rem; }
  .tool-entry-heading { align-items: flex-start; flex-direction: column; gap: .3rem; }
}

/* 0037 responsive height and wrapping correction. */
.tools-intro, .tool-directory { padding-block: 1.5rem; }
.tools-intro { gap: .5rem; }
.tool-directory { gap: 1rem; }
.tools-intro h1, .tools-intro > p:last-child, .tool-directory-heading h2 { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .tools-intro, .tool-directory { padding-block: 1.25rem; padding-inline: 1.25rem; }
  .tool-directory-heading { margin-bottom: 1rem; }
  .tools-intro h1, .tool-directory-heading h2 { font-size: 1.4rem; }
}

/* 0037 keep the directory in the available page width at every breakpoint. */
.tools-intro, .tool-directory { min-width: 0; width: 100%; }
.tools-intro > *, .tool-directory > *, .tool-entry { min-width: 0; max-width: 100%; }
.tool-list { min-width: 0; width: 100%; }
@media (max-width: 760px) {
  .tools-intro, .tool-directory { grid-template-columns: 1fr; }
  .tools-intro-brand, .tools-intro .section-label, .tools-intro h1, .tools-intro > p:last-child { grid-column: 1; grid-row: auto; }
  .tools-intro h1, .tools-intro > p:last-child, .directory-note { max-width: 100%; overflow-wrap: normal; }
}