/* Shift to invoice: field input, daily report, dashboard, then payroll,
   billing and job cost. Used on /platform/ and the /solutions/ hub.
   Four across on desktop, two on tablets, stacked on phones so every crop
   shows at full column width and its text stays readable. */
.flw { padding-block: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--line); }
.flw__head { max-width: 46rem; }
.flw__head .h2 { margin-top: .9rem; }
.flw__intro { margin: 1.1rem 0 0; max-width: 52ch; color: var(--sc-ink-soft); font-size: var(--sc-t-lg); line-height: 1.5; text-wrap: pretty; }

.flw__steps { list-style: none; margin: clamp(2.5rem, 5vw, 3.75rem) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.25rem; }
.flw__steps > li { min-width: 0; }

/* The step number sits on a rail that runs into the next step. */
.flw__n { display: flex; align-items: center; gap: .75rem; margin: 0 0 .9rem;
  font-family: var(--sc-font-mono); font-size: .82rem; letter-spacing: .08em; color: var(--gold); }
.flw__n b { font-weight: 600; }
.flw__n::after { content: ""; flex: 1; height: 1px; margin-right: -1.25rem;
  background: linear-gradient(90deg, rgba(232, 168, 68, .55), rgba(232, 168, 68, .12)); }
.flw__steps > li:last-child .flw__n::after { margin-right: 0; background: linear-gradient(90deg, rgba(232, 168, 68, .55), transparent); }

.flw__shot { margin: 0; aspect-ratio: 780 / 600; overflow: hidden; border-radius: 14px;
  border: 1px solid var(--line); background: #0B0B0D; }
.flw__shot img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(#000 86%, transparent);
          mask-image: linear-gradient(#000 86%, transparent); }

.flw__t { margin: 1.1rem 0 0; font-family: var(--font-ui); font-weight: 500; color: var(--white);
  font-size: 1.2rem; line-height: 1.25; text-wrap: balance; }
.flw__steps p:not(.flw__n) { margin: .5rem 0 0; color: var(--sc-ink-soft); font-size: 1rem; line-height: 1.5; text-wrap: pretty; }

.flw__q { margin-top: clamp(3rem, 6vw, 4.5rem); max-width: 44rem; padding-left: 1.25rem; border-left: 2px solid var(--gold); }

@media (max-width: 1100px) {
  .flw__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flw__steps > li:nth-child(2n) .flw__n::after { margin-right: 0; background: linear-gradient(90deg, rgba(232, 168, 68, .55), transparent); }
}
@media (max-width: 760px) {
  .flw { padding-block: 3rem; }
  .flw__steps { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  /* The number moves onto the title line, so the stack stays short. */
  .flw__steps { counter-reset: flw; }
  .flw__steps > li { counter-increment: flw; }
  .flw__n { display: none; }
  .flw__t { font-size: 1.15rem; margin-top: .9rem; }
  .flw__t::before { content: "0" counter(flw); margin-right: .6rem; font-family: var(--sc-font-mono); font-size: .82rem; letter-spacing: .08em; color: var(--gold); vertical-align: .1em; }
}