/* FluxFront — work orders / inspections / estimates flow (#workflow). Five numbered steps in one row on wide
   screens (auto-fit), then a photo + three facts. */
/* ===================== PAPER FLOW ===================== */
.paper { background: var(--surface); }
.paper-steps { list-style: none; margin: 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.paper-steps li { position: relative; padding: 20px 20px 22px; border-radius: var(--r-lg); background: var(--cream); border: 1px solid var(--hairline);
  display: flex; flex-direction: column; gap: 6px; }
.paper-steps li b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; margin-top: 4px; }
.paper-steps li span:not(.ps-n) { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.5; }
.ps-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono);
  font-size: 0.8rem; font-weight: 600; color: #fff; background: var(--brand-grad); }
.paper-media { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 20px; margin-top: 22px; align-items: stretch; }
.paper-photo { aspect-ratio: 16 / 9; }
.paper-facts { display: grid; gap: 14px; align-content: stretch; }
.pf { padding: 20px 22px; border-radius: var(--r-lg); background: var(--cream); border: 1px solid var(--hairline); display: flex; flex-direction: column; justify-content: center; }
.pf b { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; }
.pf > span { font-size: var(--t-sm); color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
.pf .soon-badge { margin-left: 6px; }
@media (max-width: 900px) { .paper-media { grid-template-columns: 1fr; } .paper-facts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }