.tool-page {
  padding-block: var(--space-6) var(--space-9);
}

.tools-hero {
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-6);
  padding-block: var(--space-6) var(--space-7);
}

.tools-hero h1 {
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: var(--tracking-tight);
  line-height: 0.98;
  margin: 0;
  max-width: 12ch;
}

.tools-hero__copy > p:last-child {
  color: var(--muted);
  font-size: var(--step-1);
  line-height: var(--leading-body);
  max-width: 42rem;
}

.tools-hero__principles {
  align-self: end;
  border-top: 1px solid var(--hairline);
  margin: 0;
}

.tools-hero__principles div {
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 6rem 1fr;
  padding-block: var(--space-3);
}

.tools-hero__principles dt { font-weight: 700; }
.tools-hero__principles dd { color: var(--muted); margin: 0; }

.tools-category-nav {
  align-items: center;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-block: var(--space-4);
}

.tools-category-nav span {
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 700;
  margin-right: var(--space-2);
  text-transform: uppercase;
}

.tools-category-nav a {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
}

.tools-category-nav a:hover,
.tools-category-nav a:focus-visible { border-color: var(--brand-700); }

.tools-catalog { padding-block: var(--space-8); }

.tools-section-heading {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

.tools-section-heading h2,
.tools-method h2,
.tools-ecosystem h2 {
  font-size: clamp(1.75rem, 4vw, 3rem);
  letter-spacing: var(--tracking-tight);
  margin: 0;
  max-width: 20ch;
}

.tools-section-heading > p {
  color: var(--muted);
  line-height: var(--leading-body);
  max-width: var(--measure);
}

.tool-category {
  border-top: 1px solid var(--hairline);
  padding-block: var(--space-6);
  scroll-margin-top: var(--space-7);
}

.tool-category__header { margin-bottom: var(--space-4); }
.tool-category__header h3 { font-size: var(--step-2); margin: 0; }
.tool-category__header p { color: var(--muted); margin-bottom: 0; max-width: var(--measure); }

.tool-card-grid { display: grid; gap: var(--space-4); }

.tool-card {
  background: var(--muted-bg);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 18rem;
  padding: var(--space-5);
}

.tool-card__meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: var(--step--1);
  justify-content: space-between;
}

.tool-status {
  border: 1px solid var(--hairline);
  border-radius: 999px;
  color: var(--ink);
  padding: 0.2rem 0.55rem;
}

.tool-card h4 { font-size: var(--step-2); margin-block: var(--space-5) var(--space-2); }
.tool-card > p { color: var(--muted); line-height: var(--leading-body); }
.tool-card dl { border-top: 1px solid var(--hairline); margin: auto 0 0; padding-top: var(--space-3); }
.tool-card dt { color: var(--muted); font-size: var(--step--1); }
.tool-card dd { margin: var(--space-1) 0 0; }

.tools-method {
  background: var(--ink);
  color: var(--paper);
  display: grid;
  gap: var(--space-7);
  margin-inline: calc(var(--space-5) * -1);
  padding: var(--space-7) var(--space-5);
}

.tools-method .eyebrow { color: var(--paper); opacity: 0.7; }
.tools-method ol { list-style: none; margin: 0; padding: 0; }
.tools-method li { border-top: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); display: grid; gap: var(--space-2); padding-block: var(--space-4); }
.tools-method li span { color: var(--paper); opacity: 0.72; }

.tools-ecosystem { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-4); }
.tools-ecosystem__links { border-top: 1px solid var(--hairline); }
.tools-ecosystem__links a { color: var(--ink); display: grid; gap: var(--space-1); padding-block: var(--space-4); text-decoration: none; border-bottom: 1px solid var(--hairline); }
.tools-ecosystem__links a:hover strong,
.tools-ecosystem__links a:focus-visible strong { color: var(--brand-700); }
.tools-ecosystem__links span { color: var(--muted); }

@media (min-width: 48rem) {
  .tools-hero { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.7fr); }
  .tools-section-heading,
  .tools-method,
  .tools-ecosystem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tools-method { margin-inline: 0; padding: var(--space-8); }
  .tools-method li { grid-template-columns: 11rem 1fr; }
}