:root {
    /* The product's own palette: NeuraTool's teal and navy, with neutrals biased
       toward the accent rather than a flat grey. */
    --teal: #1ab394;
    --teal-deep: #0f8a74;
    --navy: #22323f;
    --body-text: #4d5b63;
    --muted: #71808a;
    --faint: #93a1a9;
    --rule: #dde5e3;
    --rule-soft: #e9efed;
    --ground: #fbfcfb;
    --surface: #ffffff;
    --wash: #f2faf7;
    --band-1: #b7e2d6;
    --band-2: #6ec9b1;
    --band-3: #27a58c;
    --band-4: #0f8a74;
    --band-5: #095f51;
    --offer-ground: #22323f;
    --shadow: 0 1px 2px rgba(34, 50, 63, 0.05), 0 8px 24px rgba(34, 50, 63, 0.06);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --navy: #e7efec;
      --body-text: #b9c6c2;
      --muted: #94a4a0;
      --faint: #74847f;
      --rule: #2b3a38;
      --rule-soft: #243230;
      --ground: #121a19;
      --surface: #182322;
      --wash: #16302a;
      --offer-ground: #0e1716;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
    }
  }

  :root[data-theme="dark"] {
    --navy: #e7efec;
    --body-text: #b9c6c2;
    --muted: #94a4a0;
    --faint: #74847f;
    --rule: #2b3a38;
    --rule-soft: #243230;
    --ground: #121a19;
    --surface: #182322;
    --wash: #16302a;
    --offer-ground: #0e1716;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.35);
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
  }

  /* The masthead is sticky and about 62px tall, so an anchor that scrolls to the
     very top puts its own content underneath it. Every jump target clears it. */
  #top, #new, #how, #analysis, #applications, #offer {
    scroll-margin-top: calc(72px + env(safe-area-inset-top, 0px));
  }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--body-text);
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

  .wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }

  h1, h2, h3 {
    font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
    color: var(--navy);
    text-wrap: balance;
    margin: 0;
  }

  .eyebrow {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 11.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--teal-deep);
    margin: 0;
  }

  a { color: var(--teal-deep); }

  a:focus-visible, .btn:focus-visible {
    outline: 2px solid var(--teal-deep);
    outline-offset: 3px;
  }

  /* ---------- masthead ---------- */

  header.top {
    border-bottom: 1px solid var(--rule);
    background: var(--surface);
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 10;
  }

  .top-inner { display: flex; align-items: center; gap: 16px; padding-block: 14px; flex-wrap: wrap; }

  .mark {
    display: flex; align-items: center; gap: 10px;
    font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px;
    letter-spacing: -0.015em; color: var(--navy); text-decoration: none;
  }

  .top-links {
    margin-left: auto; display: flex; align-items: center; gap: 18px;
    font-family: Archivo, sans-serif; font-size: 14px;
  }

  .top-links a { color: var(--body-text); text-decoration: none; }
  .top-links a:hover { color: var(--teal-deep); }

  .btn {
    display: inline-block; font-family: Archivo, sans-serif; font-size: 14.5px;
    font-weight: 600; padding: 10px 20px; border-radius: 3px; text-decoration: none;
    border: 1px solid var(--teal); background: var(--teal); color: #ffffff;
  }

  .btn:hover { background: var(--teal-deep); border-color: var(--teal-deep); }
  .btn.ghost { background: transparent; color: var(--teal-deep); }
  .btn.ghost:hover { background: var(--wash); }

  /* ---------- hero ---------- */

  .hero {
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 48px;
    align-items: center; padding-block: 34px 52px;
  }

  .returning {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
    letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-deep);
    background: var(--wash); border: 1px solid var(--band-1);
    border-radius: 2px; padding: 5px 11px;
  }

  .hero h1 {
    font-size: clamp(33px, 5vw, 52px); line-height: 1.07; font-weight: 700;
    letter-spacing: -0.025em; margin-block: 20px 20px;
  }

  .lede { font-size: 19.5px; line-height: 1.6; max-width: 34em; margin: 0; }

  .hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

  /* The button says "free"; this says who it is free for, before a first-time
     visitor decides the offer is aimed at somebody else and stops reading. */
  .hero-note { margin-top: 12px; font-size: 14.5px; color: var(--faint); }

  .ring-card {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
    padding: 20px; box-shadow: var(--shadow);
  }

  .ring-card svg { display: block; width: 100%; height: auto; }

  .ring-caption {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint);
    letter-spacing: 0.06em; text-transform: uppercase; margin: 14px 0 0; text-align: center;
  }

  /* ---------- sections ---------- */

  section { padding-block: 54px; }

  .section-head { max-width: 46em; }

  .section-head h2 {
    font-size: clamp(25px, 3.4vw, 33px); font-weight: 600; letter-spacing: -0.02em;
    line-height: 1.16; margin-block: 12px 14px;
  }

  .section-head p { margin: 0; }

  .banded { background: var(--surface); border-block: 1px solid var(--rule); }

  /* ---------- what's new ---------- */

  .news { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; margin-top: 36px; }

  .news-item { display: flex; flex-direction: column; gap: 8px; }

  .news-item .bar { width: 34px; height: 3px; border-radius: 2px; background: var(--teal); }

  .news-item h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }

  .news-item p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

  .proof {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
    margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--rule);
  }

  .stat .figure {
    font-family: Archivo, sans-serif; font-size: 27px; font-weight: 700;
    color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1;
  }

  .stat .label { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); line-height: 1.45; }

  /* ---------- the four levels ---------- */

  .ladder {
    display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 36px;
    border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; background: var(--surface);
  }

  .rung {
    padding: 20px 20px 24px; border-right: 1px solid var(--rule-soft);
    display: flex; flex-direction: column; gap: 8px;
  }

  .rung:last-child { border-right: 0; }
  .rung-bar { height: 3px; border-radius: 2px; }
  .rung h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
  .rung p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--muted); }

  .rung .count {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--faint);
  }

  /* ---------- analysis grid ---------- */

  .features {
    /* Sixteen cards, four across: the grid fills exactly, with no half-empty last row. */
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 36px;
    background: var(--rule); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
  }

  .feature { background: var(--surface); padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 7px; }
  .feature h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
  .feature p { margin: 0; font-size: 14.5px; line-height: 1.52; color: var(--muted); }

  .tag {
    align-self: flex-start; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--teal-deep);
    background: var(--wash); border: 1px solid var(--band-1); border-radius: 2px; padding: 2px 6px;
  }

  /* ---------- suites ---------- */

  .suites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 34px; }

  .suite {
    background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
    padding: 22px 20px 24px; display: flex; flex-direction: column; gap: 10px;
  }

  .suite h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.015em; }
  .suite p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }

  .suite ul { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

  .suite li {
    font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--body-text);
    padding-left: 16px; position: relative; line-height: 1.5;
  }

  .suite li::before {
    content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px;
    border-radius: 1px; background: var(--band-2);
  }

  .placeholder-note {
    margin-top: 22px; font-size: 14.5px; color: var(--faint); font-style: italic;
  }

  /* ---------- featured application (products page) ---------- */

  .featured {
    background: var(--surface);
    border: 1px solid var(--rule); border-top: 3px solid var(--teal);
    border-radius: 4px; padding: 30px 30px 32px; margin-top: 40px;
  }

  .featured-head { max-width: 44em; }
  .featured-head p { margin: 0; }

  .featured h2 {
    font-size: clamp(21px, 2.8vw, 27px); font-weight: 600;
    letter-spacing: -0.02em; line-height: 1.2; margin-block: 12px 12px;
  }

  .domains-label {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--faint);
    margin: 28px 0 13px; padding-top: 24px; border-top: 1px solid var(--rule-soft);
  }

  .domains {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 26px;
  }

  .domains li {
    position: relative; padding-left: 18px;
    font-size: 15px; line-height: 1.45; color: var(--body-text);
  }

  .domains li::before {
    content: ""; position: absolute; left: 0; top: 8px;
    width: 6px; height: 6px; border-radius: 1px; background: var(--band-2);
  }

  .featured-foot { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--rule-soft); }

  .featured-foot blockquote {
    margin: 0 0 18px; padding: 2px 0 2px 20px; border-left: 3px solid var(--band-1);
    font-size: 17px; line-height: 1.55; color: var(--navy);
  }

  .featured-foot cite {
    display: block; margin-top: 10px; font-style: normal;
    font-family: Archivo, sans-serif; font-size: 13.5px; color: var(--muted);
  }

  /* Body color, not the muted grey: fourteen sector names at 15px in --muted sits
     around 4:1 on white, which is exactly the thin-and-grey problem again. */
  .featured-note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body-text); }

  /* ---------- offer ---------- */

  .offer { background: var(--offer-ground); border-radius: 5px; padding: 40px; }
  .offer-head { max-width: 40em; }
  .offer h2 { color: #ffffff; font-size: clamp(24px, 3.2vw, 31px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.18; margin-block: 12px 14px; }
  .offer p { color: #c6d6d1; margin: 0; }
  .offer .eyebrow { color: var(--band-2); }

  /* Two routes, not a ranking — numbered because the reader picks one of them. */
  .routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 28px; }

  .route {
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(183, 226, 214, 0.28);
    border-radius: 4px; padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 9px;
  }

  .route .num {
    font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
    color: var(--band-2); text-transform: uppercase;
  }

  .route h3 { color: #ffffff; font-size: 17px; font-weight: 600; letter-spacing: -0.015em; }
  .route p { color: #cddedb; font-size: 15px; line-height: 1.55; margin: 0; }

  /* What "free" actually covers. Check marks are drawn, not typed, so the list
     needs no icon font and no image request. */
  .included {
    list-style: none; margin: 24px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 26px;
  }

  /* Sans, not the page serif. A serif's thin strokes bloom against a dark panel
     and the line goes soft even at a contrast ratio that passes on paper; Archivo
     at 500 holds its edges. Near-white rather than the muted body color, because
     these four lines are the terms of the offer and have to survive a skim. */
  .included li {
    position: relative; padding-left: 26px;
    font-family: Archivo, 'Helvetica Neue', Arial, sans-serif;
    font-size: 15px; font-weight: 500; line-height: 1.5;
    color: #edf4f2;
  }

  .included li::before {
    content: ""; position: absolute; left: 3px; top: 6px;
    width: 10px; height: 6px;
    border-left: 2.5px solid var(--band-2); border-bottom: 2.5px solid var(--band-2);
    transform: rotate(-45deg);
  }

  .offer-foot {
    margin-top: 26px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding-top: 22px; border-top: 1px solid rgba(183, 226, 214, 0.22);
  }

  .offer-foot p { font-size: 15.5px; }

  /* ---------- footer ---------- */

  footer { border-top: 1px solid var(--rule); padding-block: 32px 44px; color: var(--muted); font-size: 14.5px; }
  .foot-inner { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; }
  .foot-inner .right { margin-left: auto; }

  /* ---------- responsive ---------- */

  @media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 32px; padding-block: 26px 36px; }
    .news { grid-template-columns: repeat(2, 1fr); }
    .proof { grid-template-columns: repeat(2, 1fr); }
    .ladder { grid-template-columns: repeat(2, 1fr); }
    .rung:nth-child(2) { border-right: 0; }
    .features { grid-template-columns: repeat(2, 1fr); }
    .feature { padding: 20px; }
    .suites { grid-template-columns: 1fr; }
    .domains { grid-template-columns: 1fr; }
    .featured { padding: 24px 22px 26px; }
    .routes { grid-template-columns: 1fr; }
    .included { grid-template-columns: 1fr; }
    .offer { padding: 28px; }
  }

  @media (max-width: 560px) {
    body { font-size: 16.5px; }

    /* The masthead goes two rows on a phone: brand above, links below. The links
       themselves stay on ONE line and scroll if they must — four items plus a
       button do not justify a hamburger, and "How it works" wrapping to three
       lines was the whole problem. */
    .top-inner { gap: 10px; }

    .top-links {
      width: 100%;
      margin-left: 0;
      /* Budgeted for 375px: 335px of usable width against roughly 322px of links,
         gaps and button. Tight, but it fits without clipping the button. */
      gap: 12px;
      font-size: 13px;
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow-x: auto;
      scrollbar-width: none;          /* Firefox */
      -ms-overflow-style: none;       /* old Edge */
      padding-bottom: 2px;
    }

    .top-links::-webkit-scrollbar { display: none; }

    /* Nothing in the strip may shrink or wrap — that is what pushed it to three lines. */
    .top-links a { flex: 0 0 auto; }

    .top-links .btn { flex: 0 0 auto; padding: 7px 12px; font-size: 13px; }
  }

  /* The narrowest phones still in use (320px). Four links plus a button will not
     fit on one line there, and a half-visible primary button is worse than an
     honest second row — so the links keep their line and Sign in takes its own,
     full width, which reads as a deliberate phone control rather than a wrap. */
  @media (max-width: 360px) {
    .top-links {
      flex-wrap: wrap;
      gap: 12px;
      row-gap: 10px;
      font-size: 13px;
      overflow-x: visible;
    }

    .top-links .btn {
      width: 100%;
      text-align: center;
      padding: 8px 12px;
      font-size: 13.5px;
    }
  }

  @media (max-width: 560px) {
    .news { grid-template-columns: 1fr; }
    .proof { grid-template-columns: 1fr; gap: 18px; }
    .ladder { grid-template-columns: 1fr; }
    .rung { border-right: 0; border-bottom: 1px solid var(--rule-soft); }
    .rung:last-child { border-bottom: 0; }
    .features { grid-template-columns: 1fr; }
    .top-links { width: 100%; margin-left: 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

/* ------------------------------------------------------------------
   Inner pages
   The home page is a landing page; these are read. Narrower measure,
   real paragraph rhythm, and one comparison table that carries the
   argument the old site made better than any chart could.
   ------------------------------------------------------------------ */

.page-head { padding-block: 40px 8px; }

.page-head h1 {
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-block: 16px 16px;
}

.page-head .lede { font-size: 19px; }

.prose { max-width: 38em; padding-block: 8px 48px; }

.prose h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-block: 38px 12px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-block: 28px 8px;
}

.prose p { margin-block: 0 16px; }

.prose p:last-child { margin-bottom: 0; }

.pull {
  border-left: 3px solid var(--teal);
  padding: 4px 0 4px 20px;
  margin-block: 26px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy);
}

/* The traditional-versus-this comparison. Two columns of claims, paired
   row by row, because the pairing is the argument. */
.compare-wrap { overflow-x: auto; margin-top: 30px; }

.compare {
  border-collapse: collapse;
  width: 100%;
  min-width: 620px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.compare th {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: Archivo, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy);
  width: 50%;
}

.compare th.mine { color: var(--teal-deep); }

.compare td {
  padding: 11px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  vertical-align: top;
}

.compare td.mine { color: var(--body-text); background: var(--wash); }

.compare tr:last-child td { border-bottom: 0; }

/* A quote that a real client actually gave. */
.quote {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 26px 28px;
  margin-block: 36px;
  max-width: 44em;
}

.quote p {
  margin: 0 0 14px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--navy);
}

.quote cite {
  font-style: normal;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Contact block on the about page. */
.contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
  max-width: 44em;
}

.contact div {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 22px;
}

.contact h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.contact p { margin: 0; font-size: 15px; line-height: 1.6; }

@media (max-width: 560px) {
  .contact { grid-template-columns: 1fr; }
  .prose { padding-bottom: 36px; }
}

/* ---------- product catalog (products page) ----------

   The descriptions in this catalog run from five words to a hundred and twenty, which
   rules out a card grid: uniform cards would either clip the long ones or leave the short
   ones floating in white space, and ragged card heights read as broken rather than varied.

   So the entry is a two-column row - name left, description right - which absorbs any
   length without the layout noticing, and puts all 42 names in one scannable column for
   the visitor who already knows what they are looking for. Below 760px it stacks, because
   a 260px label column on a phone leaves nothing for the sentence. */

.cat-head { padding-top: 54px; max-width: 46em; }

.cat-head h2 {
  font-size: clamp(22px, 2.9vw, 28px); font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.18; margin-bottom: 12px;
}

.cat-head p { margin: 0; }

/* The suite index. Nine destinations, so a wrapping row of chips rather than a sidebar -
   it costs one line of vertical space and needs no sticky positioning to stay useful. */
.cat-index {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}

.cat-index a {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 14px; line-height: 1.3; text-decoration: none; color: var(--body-text);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 3px;
  padding: 7px 11px;
}

.cat-index a:hover { border-color: var(--band-2); color: var(--teal-deep); background: var(--wash); }

.cat-index a span {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint);
}

.cat-index a:hover span { color: var(--teal-deep); }

.cat-suite { padding-top: 44px; }

/* scroll-margin so a jump from the index does not tuck the heading under the sticky header. */
.cat-suite[id] { scroll-margin-top: 78px; }

.cat-suite-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding-bottom: 12px; border-bottom: 2px solid var(--teal);
}

.cat-suite-head h2 {
  font-size: 20.5px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2;
}

.cat-count {
  font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint);
  margin-left: auto;
}

.cat-item {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 4px 30px;
  padding-block: 19px; border-bottom: 1px solid var(--rule-soft);
}

.cat-item:last-child { border-bottom: 0; }

.cat-name {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.4; color: var(--navy); margin: 0;
}

.cat-desc { margin: 0; font-size: 15px; line-height: 1.58; color: var(--muted); }

/* Two of the descriptions are written as labelled halves rather than prose. Keeping that
   shape is more honest than flattening them into one paragraph with a dash in the middle. */
.cat-parts {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 9px;
}

.cat-parts li { font-size: 15px; line-height: 1.58; color: var(--muted); }
.cat-parts b { color: var(--body-text); font-weight: 600; }

.cat-states-label {
  margin: 14px 0 0; font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint);
}

.cat-states-label span { letter-spacing: 0.04em; }

.cat-states {
  list-style: none; margin: 9px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 5px;
}

.cat-states li {
  font-size: 12.5px; line-height: 1.3; color: var(--teal-deep);
  background: var(--wash); border: 1px solid var(--band-1); border-radius: 2px;
  padding: 3px 7px;
}

@media (max-width: 760px) {
  .cat-item { grid-template-columns: 1fr; gap: 7px; }
  .cat-count { margin-left: 0; }
}