.solution { border-bottom: 1px solid var(--hairline); }
.solution:nth-of-type(odd) { background: var(--ground-2); }
.solution-layout { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 56px; align-items: center; }
.solution:nth-of-type(odd) .solution-layout { grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); }
.solution:nth-of-type(odd) .solution-copy { grid-column: 2; grid-row: 1; }
.solution:nth-of-type(odd) .solution-screen { grid-column: 1; grid-row: 1; }
.solution-number { color: var(--accent); font-size: 2.5rem; line-height: 1; margin-bottom: 20px; }
.solution-desc { color: var(--muted); margin-top: 24px; }
.solution-keywords { color: var(--accent-bright); font-size: .85rem; margin-top: 20px; }
.solution-screen { min-width: 0; }
.solution-screen .stage, .solution-screen .screen-image, .solution-screen .focus { transition: none; }
.solution-screen .cursor, .solution-screen .ripple { display: none; }
.workflow { display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr)); margin-top: 56px; }
.flow-step { position: relative; min-width: 0; padding: 24px 22px 0 0; }
.flow-step::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--accent); transform-origin: left; }
.flow-step::after { content: ''; position: absolute; top: -4px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.flow-step h3 { font-size: .98rem; margin-bottom: 22px; }
.flow-items { display: grid; gap: 16px; }
.flow-app { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: var(--muted); line-height: 1.5; overflow-wrap: anywhere; }
.flow-app:hover { color: var(--accent-bright); }
.flow-icon { flex: none; width: 36px; height: 36px; }
@media (prefers-reduced-motion: no-preference) {
  html[data-reveal] .workflow .flow-step::before { transform: scaleX(0); transition: transform 900ms; transition-delay: calc(var(--step) * 120ms); }
  html[data-reveal] .workflow.is-visible .flow-step::before { transform: scaleX(1); }
  html[data-reveal] .workflow.is-visible .flow-step > * { animation: flow-step-in 600ms both; animation-delay: calc(var(--step) * 120ms); }
}
@keyframes flow-step-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width: 1179.98px) {
  .solution-layout { gap: 36px; }
  .flow-app { flex-direction: column; align-items: flex-start; gap: 6px; }
}
@media (max-width: 899.98px) {
  .solution-layout, .solution:nth-of-type(odd) .solution-layout { grid-template-columns: minmax(0, 1fr); }
  .solution:nth-of-type(odd) .solution-copy, .solution:nth-of-type(odd) .solution-screen { grid-column: auto; grid-row: auto; }
  .solution-copy { max-width: 680px; }
  .workflow { display: block; }
  .flow-step { padding: 0 0 32px 28px; }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step::before { width: 2px; height: 100%; transform-origin: top; }
  .flow-step:last-child::before { display: none; }
  .flow-step::after { top: 4px; left: -4px; }
  .flow-step h3 { margin-bottom: 16px; }
  .flow-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-app { flex-direction: row; gap: 10px; }
}
@media (max-width: 899.98px) and (prefers-reduced-motion: no-preference) {
  html[data-reveal] .workflow .flow-step::before { transform: scaleY(0); }
  html[data-reveal] .workflow.is-visible .flow-step::before { transform: scaleY(1); }
}