.workflow-comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin: 42px 0; }
.comparison-side { padding: 36px; display: flex; flex-direction: column; }
.comparison-before { background: #e9e5dd; border-top: 3px solid #a6432e; }
.comparison-after { background: #e6ecdf; border-top: 3px solid #1e4a3f; }
.comparison-label { font: 600 .72rem/1.5 var(--font-body); letter-spacing: .13em; text-transform: uppercase; margin-bottom: 20px; }
.comparison-before .comparison-label { color: #873e2e; }
.comparison-after .comparison-label { color: #1e4a3f; }
.comparison-side > h2 { font: 500 clamp(1.8rem,2.5vw,2.4rem)/1.18 var(--font-display); letter-spacing: -.035em; margin-bottom: 20px; }
.comparison-context { font-size: .85rem; padding-bottom: 24px; margin-bottom: 0; border-bottom: 1px solid #b0b4b3; }
.comparison-steps { list-style: none; padding: 0; margin: 0 0 24px; }
.comparison-steps li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; padding: 24px 0; border-bottom: 1px solid rgba(24,24,22,.17); }
.comparison-number { font: 400 1.4rem/1.3 var(--font-display); color: #5a6057; }
.comparison-steps h3 { font: 600 1rem/1.5 var(--font-body); letter-spacing: -.015em; margin: 0 0 8px; }
.comparison-steps p { font-size: .94rem; line-height: 1.65; margin: 0; }
.comparison-outcome { margin: auto 0 0; font-size: .92rem; line-height: 1.65; }
.comparison-outcome strong { display: block; font-weight: 600; margin-bottom: 6px; }
@media (max-width:760px) {
  .workflow-comparison { grid-template-columns: 1fr; gap: 24px; }
  .comparison-side { padding: 26px; }
}
.flow-wrap { max-width: 1360px; padding: 54px clamp(24px,4vw,60px) 72px; }
.back-link { color: #263fa5; font-size: .84rem; font-weight: 500; }
.flow-intro { max-width: 900px; margin: 34px 0 48px; }
.flow-intro .eyebrow { font: 500 .7rem/1.6 var(--font-body); letter-spacing: .17em; margin-bottom: 16px; }
.flow-intro h1 { font: 500 clamp(2.6rem,4.6vw,4.4rem)/1.08 var(--font-display); letter-spacing: -.05em; max-width: 23ch; margin: 0 0 28px; }
.flow-intro p { font-size: 1.05rem; line-height: 1.7; max-width: 70ch; }
.flow-intro p:last-child { font-size: 1.05rem; color: #4c4c46; }
.flow-intro strong { font-weight: 500; }
.flow-track { gap: 26px; margin: 42px 0 52px; }
.flow-stage { padding: 24px 18px; border: 0; border-top: 1px solid #858d87; background: #e7ecdf; }
.flow-stage:nth-child(even) { background: var(--mist); }
.flow-stage:last-child { background: var(--sage); }
.flow-number { font: 500 .68rem/1.5 var(--font-body); color: #383a33; letter-spacing: .1em; }
.flow-stage h2 { font: 500 1.55rem/1.18 var(--font-display); letter-spacing: -.04em; margin: 20px 0 16px; }
.flow-stage p { font-size: .92rem; line-height: 1.6; }
.flow-stage:not(:last-child)::after { color: #315bff; right: -22px; font-weight: 400; }
.flow-example { background: var(--paper); border: 0; padding: 36px; gap: 50px; position: relative; overflow: hidden; }
.flow-example h2, .flow-example h3, .flow-questions h2 { font: 500 2rem/1.2 var(--font-display); letter-spacing: -.035em; }
.flow-example .eyebrow { font: 500 .69rem/1.5 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.flow-example h3 { font-size: 1.6rem; }
.flow-example p { font-size: .97rem; }
.flow-questions { max-width: 900px; margin: 52px 0 36px; }
.flow-questions h2 { font-size: clamp(2rem,3vw,2.7rem); max-width: 24ch; margin-bottom: 24px; }
.flow-questions summary { font-weight: 500; }
.flow-questions summary::marker { color: #315bff; }
.flow-note { border-left: 1px solid #315bff; padding-left: 24px; font-size: .92rem; color: #44443e; }
.closing-cta { background: var(--sage); padding: 56px 0; color: var(--ink); }
.closing-cta .wrap { max-width: 1360px; padding-inline: clamp(24px,4vw,60px); }
.closing-cta h2 { font: 500 clamp(2.1rem,3.4vw,3.2rem)/1.15 var(--font-display); letter-spacing: -.045em; color: var(--ink); max-width: 26ch; }
.closing-cta p { color: var(--ink); max-width: 68ch; line-height: 1.65; margin: 20px 0 26px; }
.closing-cta .btn-primary { background: var(--ink); border-color: var(--ink); }
@media (max-width:1100px) {
  .flow-track { max-width: none; grid-template-columns: 1fr; gap: 22px; }
  .flow-stage { display: grid; grid-template-columns: 100px 1fr 1.2fr; gap: 24px; align-items: start; padding: 24px; }
  .flow-stage h2 { margin: 0; }
  .flow-stage:not(:last-child)::after { right: 50%; bottom: -24px; top: auto; font-size: 18px; background: transparent; }
  .flow-example { grid-template-columns: 1fr 1fr; gap: 30px; }
}
@media (max-width:700px) {
  .flow-wrap { padding: 32px 24px 48px; }
  .flow-intro { margin-block: 26px 34px; }
  .flow-stage { display: block; padding: 24px; }
  .flow-stage h2 { margin: 14px 0 12px; }
  .flow-example { grid-template-columns: 1fr; padding: 26px; gap: 20px; }
  .flow-questions { margin-top: 38px; }
}

.workflow-next { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 60px); align-items: start; padding-top: 24px; }
.workflow-next .flow-questions { margin: 0; max-width: none; }
.workflow-next .flow-questions .eyebrow { font: 500 .69rem/1.6 var(--font-body); letter-spacing: .18em; text-transform: uppercase; margin-bottom: 18px; }
.workflow-next .flow-questions h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.workflow-next .closing-cta { padding: 36px; margin: 0; }
.workflow-next .closing-cta .wrap { padding: 0; }
.workflow-next .closing-cta h2 { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
.workflow-next .closing-cta p { margin-block: 22px 28px; }
@media (max-width: 850px) {
  .workflow-next { grid-template-columns: 1fr; gap: 36px; }
  .workflow-next .closing-cta { padding: 28px; }
}