/* Production-Ready AI Engineering — 7-stage SDLC rail (DIFWEB-125).
   Used on Home, About, and the new AI Engineering page. Dark navy theme to
   match body { background:#131426 }. Who-pill colors: Human=teal, AI=violet,
   Combined=blue. Self-contained (only relies on the theme .wrap-v4 width). */

.production-ready-ai {
  background: #131426;
  color: #fff;
  padding: 80px 0;
}

.production-ready-ai__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9aa0c0;
}

.production-ready-ai__title {
  margin: 0 0 20px;
  max-width: 16em;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.15;
  font-weight: 700;
}

.production-ready-ai__lede {
  margin: 0 0 40px;
  max-width: 62em;
  font-size: 17px;
  line-height: 1.6;
  color: #c4c8e0;
}
.production-ready-ai__lede em { font-style: italic; }
.production-ready-ai__lede strong { color: #fff; font-weight: 600; }

/* Stage rail — DIFWEB-165: a wrapping grid so all 7 stages are visible at once.
   (Was a horizontal overflow-x rail; on desktop that hid stages 4-7 off-screen
   with no scrollbar/affordance — a "blocked screen". auto-fit collapses to a
   single column on mobile, so the cards stack and the page scrolls normally.) */
.production-ready-ai__rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
}

.production-ready-ai__stage {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px 22px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top: 3px solid #4f8dfd;
  border-radius: 16px;
}
.production-ready-ai__stage[data-who="human"]    { border-top-color: #21c5a8; }
.production-ready-ai__stage[data-who="ai"]        { border-top-color: #a974ff; }
.production-ready-ai__stage[data-who="combined"]  { border-top-color: #4f8dfd; }

.production-ready-ai__num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
.production-ready-ai__stage[data-who="human"]   .production-ready-ai__num { color: #21c5a8; }
.production-ready-ai__stage[data-who="ai"]      .production-ready-ai__num { color: #a974ff; }
.production-ready-ai__stage[data-who="combined"].production-ready-ai__num,
.production-ready-ai__stage[data-who="combined"] .production-ready-ai__num { color: #4f8dfd; }

.production-ready-ai__stage h4 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
}

.production-ready-ai__pill {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.production-ready-ai__stage[data-who="human"]   .production-ready-ai__pill { color: #21c5a8; background: rgba(33, 197, 168, 0.14);  border-color: rgba(33, 197, 168, 0.45); }
.production-ready-ai__stage[data-who="ai"]      .production-ready-ai__pill { color: #b78bff; background: rgba(169, 116, 255, 0.16); border-color: rgba(169, 116, 255, 0.45); }
.production-ready-ai__stage[data-who="combined"] .production-ready-ai__pill { color: #7fb0ff; background: rgba(79, 141, 253, 0.16);  border-color: rgba(79, 141, 253, 0.45); }

.production-ready-ai__what {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: #c4c8e0;
}
.production-ready-ai__what em { color: #fff; font-style: italic; }

.production-ready-ai__loop {
  margin: 22px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #7fb0ff;
}
.production-ready-ai__loop .arrow { font-size: 19px; }
.production-ready-ai__loop em { font-style: italic; }

.production-ready-ai__promise {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 48px;
}
.production-ready-ai__promise-item { max-width: 20em; }
.production-ready-ai__promise-item strong { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 700; }
.production-ready-ai__promise-item span { font-size: 14px; color: #9aa0c0; }

.production-ready-ai__legend {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 13px;
  color: #9aa0c0;
}
.production-ready-ai__legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 7px;
  border-radius: 3px;
  vertical-align: -1px;
}
.production-ready-ai__legend i[data-who="human"]    { background: #21c5a8; }
.production-ready-ai__legend i[data-who="ai"]        { background: #a974ff; }
.production-ready-ai__legend i[data-who="combined"]  { background: #4f8dfd; }

@media (max-width: 767px) {
  .production-ready-ai { padding: 56px 0; }
  .production-ready-ai__lede { font-size: 16px; }
}