/* process.css — inherits site theme; override per-page if needed */
@import url("styles.css");

/* ---- Process page (cards + gates + toolchain) ---- */
.proc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 22px;
}
.int-card.proc-card { padding: 26px; }
.proc-card { position: relative; counter-increment: process-step; overflow: hidden; }
.proc-grid { counter-reset: process-step; }
.proc-card::after { content: "0" counter(process-step); position: absolute; top: 22px; right: 24px; color: rgba(17,17,17,.16); font-size: 1.05rem; font-weight: 850; letter-spacing: .12em; }
.proc-card.proc-wide { grid-column: 1 / -1; }
.proc-sub { color: var(--muted); font-weight: 700; margin: 0 0 10px; }
.proc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.proc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.proc-list { list-style: none; padding: 0; margin: 0; }
.proc-list li { position: relative; padding-left: 16px; margin: 6px 0; }
.proc-list li::before { content: "•"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

.gate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.gate-card { padding: 20px; }

.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}
.tool-card { padding: 20px; }
.proc-hero.integrations { padding-top: 84px; }
.collaboration { padding-top: 20px; }
.collaboration .section-intro-row { margin-top: 0; }
.proc-cta .cta-band { border-radius: 28px; background: #111111; box-shadow: 0 24px 64px rgba(17,17,17,.2); }
.proc-cta .cta-band h2, .proc-cta .cta-band .lede { color: #fff; }
.proc-cta .cta-band .lede { opacity: .7; }
.proc-cta .btn-ghost { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; box-shadow: none; }

@media (max-width: 1100px) {
  .proc-grid { grid-template-columns: 1fr; }
  .proc-columns { grid-template-columns: 1fr; }
  .gate-grid { grid-template-columns: 1fr 1fr; }
  .tool-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .gate-grid { grid-template-columns: minmax(0, 1fr); }
}