/* Synapse Build 3.10 — live product flow alignment. */
[data-product-flow-panel] {
  border: 1px solid color-mix(in srgb, var(--line, #d8e8e4) 76%, white 24%);
  background: color-mix(in srgb, var(--paper, #fffaf0) 82%, var(--field, #eaf4ef) 18%);
  border-radius: 1.25rem;
  padding: clamp(1rem, 3vw, 1.55rem);
  box-shadow: 0 16px 40px rgba(18, 52, 58, .07);
}
[data-product-flow-panel] h2,
[data-product-flow-panel] h3 { margin-top: 0; }
.product-flow-rail {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  align-items: center;
  margin-top: .95rem;
}
.product-flow-rail a[aria-current='page'],
.viewport-lifecycle a[aria-current='page'],
.target-switch a[aria-current='page'] {
  outline: 2px solid color-mix(in srgb, var(--teal, #0b506c) 42%, white 58%);
  outline-offset: 2px;
}
.route-card[data-product-route] p,
.route-card[data-product-action] p {
  max-width: 58ch;
}
[data-product-action='viewport-opens-action-chamber'] {
  cursor: pointer;
}
@media (max-width: 720px) {
  .product-flow-rail .button,
  .product-flow-rail a { width: 100%; justify-content: center; }
}