/* A navigable project pathway with room for the work. */
.demo-operations-stage { display: block; min-height: 0; }
.demo-operations-rail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr); gap: 65px; align-items: center; padding: 29px 38px 32px; }
.operation-header { min-width: 0; }
.operation-eyebrow { display: flex; justify-content: space-between; gap: 16px; max-width: 280px; font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: #b9c9d3; }
.operation-eyebrow span { color: #c3d3ff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.operation-header h3 { font-size: 31px; font-weight: 450; line-height: 1.03; letter-spacing: -.04em; margin: 16px 0 0; }
.operation-header-note { font-size: 10px; line-height: 1.6; color: #b9c9d3; margin-top: 12px; }
.demo-operations-rail .demo-step-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 0; position: relative; }
.demo-operations-rail .demo-step-controls::before { content: ""; position: absolute; height: 1px; background: #6b7d8a; left: 17px; right: calc(33.333% - 17px); top: 17px; }
.demo-operations-rail .demo-step-button { border: 0; min-height: 100px; padding: 0 15px 13px 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 18px; position: relative; font-size: 14px; color: #b9c9d3; }
.demo-operations-rail .demo-step-button > span { width: 35px; height: 35px; font-size: 10px; background: #19242c; border-color: #8295a2; position: relative; z-index: 1; }
.demo-operations-rail .demo-step-button[aria-pressed="true"] { color: #fff; }
.demo-operations-rail .demo-step-button[aria-pressed="true"] > span { background: #315ac7; border-color: #b6c9ff; box-shadow: 0 0 0 5px #19242c; }
.demo-operations-rail .demo-step-button:focus-visible { outline-color: #b6c9ff; outline-offset: 3px; }
.demo-operations-body { padding: 36px 38px 40px; }
.demo-brief-example > div { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; }
.demo-brief-example dt, .demo-brief-example dd { font-size: 12px; }
.demo-handoff-items { gap: 24px; }
.demo-handoff-item { padding: 30px 24px 24px; min-height: 170px; }
.demo-handoff-item::before { left: 24px; }
.demo-handoff-item strong { font-size: 15px; }
.demo-handoff-item p { font-size: 12px; }
@media (max-width: 900px) {
  .demo-operations-rail { gap: 35px; padding-inline: 28px; }
  .demo-operations-body { padding-inline: 28px; }
  .operation-header h3 { font-size: 28px; }
  .demo-handoff-items { gap: 15px; }
  .demo-handoff-item { padding-inline: 18px; }
  .demo-handoff-item::before { left: 18px; }
}
@media (max-width: 650px) {
  .demo-operations-rail { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 26px 20px 16px; }
  .operation-eyebrow { max-width: none; }
  .operation-header h3 { font-size: 31px; }
  .operation-header-note { font-size: 11px; }
  .demo-operations-rail .demo-step-button { min-height: 89px; font-size: 13px; gap: 15px; padding-right: 8px; }
  .demo-operations-body { padding: 28px 20px 32px; }
  .demo-brief-example > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .demo-brief-example dt, .demo-brief-example dd { font-size: 11px; }
  .demo-handoff-items { gap: 20px; }
  .demo-handoff-item { padding: 22px 20px; min-height: 0; }
  .demo-handoff-item::before { left: 20px; }
  .demo-handoff-item p { font-size: 11px; }
}
@media (max-width: 380px) {
  .demo-operations-rail, .demo-operations-body { padding-inline: 16px; }
  .operation-header h3 { font-size: 28px; }
  .demo-operations-rail .demo-step-button { flex-direction: column; justify-content: flex-start; font-size: 12px; }
}
@media print {
  .demo-operations-rail { background: white; color: black; border-bottom: 1px solid #b8c3ca; }
  .operation-eyebrow, .operation-eyebrow span, .operation-header-note { color: #19242c; }
}