/* =========================================================================
   page-pipeline-index.css — pilots/pipeline/index.html
   Bespoke pipeline-hub components. Tokens, .btn-*, .site-hero, injected footer
   come from the canonical system. Migrated from an inline <style> block that
   redefined :root (drift incl. --maxw), added leaky global resets + footer
   override, and duplicated canonical .hero / .btn. Note: this page reuses the
   class name `.card` for a dashed stage sub-card — scoped to `.column .card`
   here so it does NOT shadow the canonical .card component.
   ========================================================================= */

.pipeline { padding: 32px 0 48px; }

.pipeline-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.column {
  background: #fff;
  border: 1px solid rgba(14, 59, 46, 0.12);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.column h3 { margin: 0 0 8px; font-family: var(--font-head); font-size: 18px; }

/* Dashed stage sub-card (scoped so it doesn't override the canonical .card). */
.column .card {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px dashed rgba(14, 59, 46, 0.20);
  background: rgba(14, 59, 46, 0.03);
  box-shadow: none;
}
.column .card strong { display: block; font-size: 14px; margin-bottom: 4px; }

.pipeline-note { margin-top: 18px; color: var(--hvb-slate); font-size: 15px; }
.stage-description { margin: 6px 0 12px; color: var(--hvb-slate); font-size: 15px; }

.pipeline-flow {
  margin: 20px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.pipeline-flow article {
  background: #fff;
  border: 1px solid rgba(14, 59, 46, 0.12);
  border-radius: var(--radius-card);
  padding: 14px;
  box-shadow: var(--shadow-1);
}
.pipeline-flow h4 { margin: 0 0 6px; font-size: 16px; font-family: var(--font-head); }
.pipeline-flow p { margin: 0; color: var(--hvb-slate); font-size: 14px; }

.pipeline-cta { padding: 28px 0; }
.cta-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border-radius: var(--radius-card);
  border: 1px solid rgba(14, 59, 46, 0.15);
  padding: 20px;
  box-shadow: var(--shadow-1);
}
.cta-card h2 { margin: 0; font-size: 24px; font-family: var(--font-head); }
.cta-card p { margin: 0; color: var(--hvb-slate); }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }