/*
 * Feature template — /features/{inventory,product,order}-syncing/, 3 pages.
 *
 * Rendered here as inventory syncing. Nothing below is inventory-specific: the
 * other two pages swap copy, the capability column and the mockup, and reuse
 * this file unchanged.
 *
 * Everything else the page needs is already in shared.css, fx.css and
 * p-shared.css. What is left is one layout that only makes sense with a source
 * channel and a list of destinations.
 *
 * Load order is shared.css -> fx.css -> p-shared.css -> p-feature.css.
 * Same constraint as the rest: no literal colour, radius or font size.
 */

/* The sale on one channel and its effect on the other ten, side by side. The
   right panel grows with the number of connected channels, so the pair is
   aligned to the top rather than centred — otherwise the source card floats
   in the middle of a tall ledger. */
.sale-flow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 860px) {
  .sale-flow { grid-template-columns: 1fr; }
}