/* pipeline (horizontal step nodes) */
.pipeline{display:flex;align-items:stretch;flex-wrap:wrap}
.pnode{flex:1 1 0;min-width:148px;background:var(--mist);border:1px solid var(--line);border-radius:15px;padding:15px 16px}
.dark .pnode{background:var(--ink-3);border-color:var(--line-d)}
.pnode .pn{font-family:var(--mono);font-size:10.5px;color:var(--teal-d);letter-spacing:.1em}
.dark .pnode .pn{color:var(--teal-l)}
.pnode h4{font-size:15px;margin:6px 0 0;letter-spacing:-.01em}
.pnode p{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.4}
.dark .pnode p{color:var(--muted-d)}
.pconn{display:flex;align-items:center;justify-content:center;color:var(--line-2);flex:0 0 24px}
.pconn svg{width:20px;height:20px}
.dark .pconn{color:rgba(255,255,255,.32)}
@media(max-width:760px){.pipeline{flex-direction:column}.pconn{transform:rotate(90deg);padding:5px 0}}

/* generic label under svg diagrams */
.dlabel{font-family:var(--mono);font-size:12px;fill:var(--muted)}
.dlabel-strong{font-family:var(--sans);font-weight:600;fill:var(--ink)}
.dark .dlabel-strong{fill:#fff}

/* kpi row */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kpis .kpi{padding:26px;border:1px solid var(--line);border-radius:18px}
.dark .kpis .kpi{border-color:var(--line-d)}
.kpi .lab{color:var(--muted);font-size:14px;margin-top:8px}
.dark .kpi .lab{color:var(--muted-d)}
@media(max-width:760px){.kpis{grid-template-columns:1fr}}

/* numbered process list */
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{position:relative;padding:18px 0 18px 56px;border-bottom:1px solid var(--line)}
.dark .steps li{border-color:var(--line-d)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);position:absolute;left:0;top:18px;font-family:var(--mono);font-size:13px;color:var(--teal-d);border:1px solid var(--line-2);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.dark .steps li::before{border-color:var(--line-d);color:var(--teal-l)}
.steps h4{font-size:17px}
.steps p{color:var(--muted);font-size:14.5px;margin-top:5px}
.dark .steps p{color:var(--muted-d)}

/* quote / vocabulary callout */
.pullquote{font-size:clamp(22px,2.6vw,30px);line-height:1.3;font-weight:600;letter-spacing:-.02em;max-width:24ch}
.pullquote .hl{color:var(--teal-d)}
.dark .pullquote .hl{color:var(--teal-l)}

/* glossary */
.gloss{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.gterm{border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.gterm dt{font-weight:700;font-size:16px;letter-spacing:-.01em}
.gterm .abbr{font-family:var(--mono);font-size:12px;color:var(--teal-d);margin-left:8px}
.gterm dd{margin:8px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:680px){.gloss{grid-template-columns:1fr}}

/* two-up feature row */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.rev .split-media{order:-1}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}.split.rev .split-media{order:0}}

/* toc chips on home */
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{border:1px solid var(--line);border-radius:980px;padding:8px 15px;font-size:13.5px;color:var(--ink);transition:border-color .15s,background .15s}
.chip:hover{background:var(--mist);border-color:var(--line-2)}
