/* ---------------------------------------------------------------
   Datadog page. Small additions only: the product category tiles
   and paper overrides for the pillars list. The hero is the watch,
   in watch.css.
   Everything else comes from tokens.css and main.css.
   --------------------------------------------------------------- */

/* ---------- Pillars list on a paper chapter (02) ---------- */
.paper .pillars { border-top-color: var(--paper-line); }
.paper .pillars li { border-bottom-color: var(--paper-line); color: var(--text-on-paper-muted); }
.paper .pillars li b { color: var(--text-on-paper); }
.paper .pillars .mono { color: var(--text-on-paper-faint); }

/* ---------- Product category tiles (03) ---------- */
.cats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.cat { background: var(--ink-1); padding: clamp(1.5rem, 3vw, 2.4rem); }
.cat h3 { margin-bottom: 1.2rem; color: var(--text-on-ink); }
.cat ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.cat li { font-size: 0.9rem; line-height: 1.4; color: var(--text-on-ink-muted); }
.cats__foot { margin-top: 2.6rem; }

/* ---------- Contact heading runs longer here than on the home page ---------- */
.contact--dd .display { max-width: 20ch; }

/* ---------- Disclosure, quietly, above the footer ---------- */
.disclosure-band { border-top: 1px solid var(--ink-line); padding: 2.6rem 0; }
.disclosure-band .disclosure { margin: 0; max-width: 62em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .cats { grid-template-columns: 1fr; }
}