/* ═══════════════════════════════════════════════════════════════════════════
   site-c.css — /software/ and /industries/ only (generated by
   tools/seo/gen_c.py). Loaded after /v2/css/tokens.css and /assets/site.css,
   which keep every colour, size and curve; this file adds three things those
   pages need and nothing else:
     · .c-first  — a limits box that has to be read BEFORE the rest (the
                   booking page, the channel manager, delivery apps), with a
                   real h2 so the outline does not skip a level
     · .c-rel    — related links grouped under small headings
     · .c-stat   — the one measured figure the site publishes
   ═══════════════════════════════════════════════════════════════════════════ */

.c-first { padding: 24px 0 0; }
.c-first .limits { margin-top: 0; border-left: 3px solid var(--warn); background: var(--surface); }
.c-first .limits h2 { font-size: 17px; line-height: 1.35; letter-spacing: var(--tr-subhead); margin-bottom: 10px; }
.c-first .limits li { font-size: 15px; }
.c-first .limits li b { color: var(--text); font-weight: 500; }

.c-rel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 20px; }
@media (max-width: 960px) { .c-rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .c-rel { grid-template-columns: 1fr; } }
.c-rel h3 { font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: 500;
            text-transform: uppercase; letter-spacing: var(--tr-micro); color: var(--muted); }
.c-rel .links { margin-top: 10px; }

.c-stat { margin-top: 24px; max-width: 820px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 22px;
          align-items: start; padding: 20px 22px; background: var(--surface); border: 1px solid var(--border);
          border-radius: var(--r-md); }
.c-stat .c-big { font-family: var(--font-display); font-size: clamp(34px, 5vw, 48px); line-height: 1;
                 font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.c-stat .c-big small { font-size: .42em; margin-left: 4px; color: var(--text-soft); }
.c-stat p { color: var(--text-soft); text-wrap: pretty; }
.c-stat p + p { margin-top: 8px; }
@media (max-width: 560px) { .c-stat { grid-template-columns: 1fr; } }

/* A caption under a worked example: the numbers are illustrative, said once. */
.c-note { margin-top: 10px; font-size: var(--fs-caption); color: var(--muted); max-width: 72ch; text-wrap: pretty; }

/* A table whose first column is a short label (a stage, a state, a line of a
   payslip): the label stays on one line instead of breaking "Checked / in". */
.c-tight tbody th { white-space: nowrap; }