.catalog-family{padding:40px 0;border-bottom:1px solid var(--line);counter-increment:fam;position:relative}
#catalog{counter-reset:fam}
.catalog-family:last-child{border-bottom:none}
.catalog-family h2{margin-bottom:6px;position:relative;padding-inline-start:56px}
.catalog-family h2::before{
  content:counter(fam,decimal-leading-zero);position:absolute;inset-inline-start:0;top:50%;
  transform:translateY(-50%);font-size:15px;font-weight:800;color:var(--white);
  background:var(--teal);width:36px;height:36px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
}
.catalog-family .lede{margin-bottom:20px}
/* CSS grid auto-flow would place dt/dd side-by-side instead of stacked (dt in col 1, its dd
   pushed to col 2 next to the FOLLOWING dt) - multi-column keeps each dt+dd pair together
   since they stay adjacent in normal block flow, just wrapped into two visual columns. */
.catalog-list{column-count:2;column-gap:32px}
@media (max-width:700px){.catalog-list{column-count:1}}
.catalog-list dt{font-weight:800;font-size:15px;margin-top:14px;display:flex;align-items:center;gap:8px;break-inside:avoid}
.dt-icon{width:20px;height:20px;border-radius:4px;flex-shrink:0}
.catalog-list dd{break-inside:avoid}
/* Catalog entries that have a deep page are marked by the link itself - teal plus a standing
   underline - not by a badge. An earlier build appended a "deep page" tag to every linked row;
   it said nothing the link colour did not already say, so it was removed. The underline is
   permanent rather than hover-only because hover does not exist on touch. */
.catalog-list dt a{color:var(--teal);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--teal) 45%,transparent)}
.catalog-list dt a:hover{color:var(--teal-d);text-decoration-color:var(--teal-d)}
.catalog-list dd{margin:2px 0 0;color:var(--muted);font-size:14px}
.tag-note{font-size:12px;background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 7px;font-weight:700;color:var(--muted)}