/* Free tools index (/tools, added 2026-10-27). Layers on styles.css; one
   ruled row per tool, no cards. The eyebrow, .dim and the CTA band are the
   home page's, copied here because home.css is home-only. */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-mock);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow::before {
  content: "";
  inline-size: 24px;
  block-size: 2px;
  background: var(--accent);
}
.dim { color: var(--muted); }
.hero { padding-block-end: var(--s-7); }
.hero .display { margin-block-start: var(--s-4); }

/* the list */
.tools { max-inline-size: 980px; }
.tool-list { border-block-start: 2px solid var(--ink); }
.tool-row {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6);
  border-block-end: 1px solid var(--line-2);
}
.tool-copy { display: grid; gap: var(--s-3); }
.tool-copy p { color: var(--muted); max-inline-size: 36em; text-wrap: pretty; }
.tool-copy a:hover { color: var(--muted); }
.tool-row .btn { justify-self: start; }

/* CTA band: a statement between two rules */
.cta-band { margin-block-start: var(--s-9); padding-block-end: var(--s-8); }
.cta-band-inner {
  display: grid;
  justify-items: center;
  gap: var(--s-6);
  padding-block: var(--s-8);
  border-block: 1px solid var(--line-3);
  text-align: center;
}
.cta-band-line {
  max-inline-size: 20em;
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
}

@media (min-width: 768px) {
  .hero { padding-block-end: var(--s-8); }
  .tool-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-7); }
}