.module-workflow-page { padding-block: 40px 80px; }
.module-workflow-page .breadcrumb { color: #786b83; }
.module-workflow { --module-ink: #342d42; --module-muted: #645d6d; --module-line: #ded9e6; --module-paper: #fff; color: var(--module-ink); }
.module-eyebrow { color: var(--workflow-accent); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.module-workflow-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); gap: 42px; align-items: center; padding: 44px; border: 1px solid var(--module-line); border-top: 4px solid var(--workflow-accent); border-radius: 18px; background: var(--module-paper); }
.module-workflow-hero h1 { margin: 10px 0 0; color: var(--module-ink); max-width: 690px; }
.module-workflow-hero .project-tags { margin-top: 17px; }
.module-lead { max-width: 690px; margin-top: 27px; font-size: 1.15rem; line-height: 1.68; }
.module-context { max-width: 650px; margin-top: 15px; color: var(--module-muted); font-size: .88rem; line-height: 1.65; }
.module-workflow-hero-diagram { display: grid; justify-items: center; gap: 8px; padding: 24px; border-radius: 14px; background: #f4f1f7; text-align: center; color: #5a4a70; font-size: .87rem; }
.module-workflow-hero-diagram span:first-child, .module-workflow-hero-diagram strong, .module-workflow-hero-diagram span:last-child { display: block; width: 100%; padding: 13px 8px; border: 1px solid #d8cde2; border-radius: 8px; background: #fff; }
.module-workflow-hero-diagram strong { border-color: var(--workflow-accent); color: #473362; font-weight: 700; }
.module-workflow-hero-diagram span[aria-hidden] { font-size: 1.15rem; line-height: 1; }
.module-stages, .module-example, .module-outputs { margin-top: 68px; }
.module-section-heading { max-width: 750px; margin-bottom: 23px; }
.module-section-heading h2 { margin-top: 6px; color: var(--module-ink); font-size: clamp(1.7rem, 3vw, 2.2rem); }
.module-section-heading > p:last-child:not(.module-eyebrow) { margin-top: 10px; color: var(--module-muted); font-size: .94rem; }
.module-stage-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin: 0; padding: 0; list-style: none; }
.module-stage-list li { min-width: 0; min-height: 245px; display: flex; flex-direction: column; padding: 22px; border: 1px solid var(--module-line); border-radius: 13px; background: var(--module-paper); }
.module-stage-number { color: var(--workflow-accent); font-size: .74rem; font-weight: 700; letter-spacing: .1em; }
.module-stage-list h3 { margin-top: 12px; color: var(--module-ink); font-size: 1.02rem; }
.module-stage-list p { margin-top: 9px; color: var(--module-muted); font-size: .84rem; line-height: 1.58; }
.module-stage-list small { margin-top: auto; padding-top: 18px; color: var(--workflow-accent); font-size: .72rem; font-weight: 600; }
.module-example-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(250px, .45fr); gap: 18px; align-items: stretch; }
.module-heatmap { margin: 0; padding: 18px; border: 1px solid var(--module-line); border-radius: 14px; background: #fff; }
.module-heatmap img { width: 100%; height: auto; }
.module-heatmap figcaption { margin-top: 14px; color: var(--module-muted); font-size: .78rem; line-height: 1.6; }
.module-example-note { padding: 24px; border: 1px solid var(--module-line); border-radius: 14px; background: #faf9fb; color: var(--module-muted); }
.module-example-note-label { display: block; margin-bottom: 20px; color: var(--workflow-accent); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.module-example-note p { font-size: .87rem; line-height: 1.7; }
.module-example-note p + p { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--module-line); }
.module-example-note code { font-size: .85em; }
.module-output-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.module-output-grid > div { padding: 21px 24px; border-left: 3px solid var(--workflow-accent); background: #fff; }
.module-output-grid h3 { color: var(--module-ink); font-size: .97rem; }
.module-output-grid p { margin-top: 8px; color: var(--module-muted); font-size: .85rem; line-height: 1.62; }
.module-boundary { max-width: 860px; margin-top: 68px; padding: 27px 30px; border: 1px solid var(--module-line); border-radius: 13px; background: #f8f6fa; }
.module-boundary h2 { font-size: 1.4rem; }
.module-boundary p { margin-top: 14px; color: var(--module-muted); font-size: .9rem; line-height: 1.76; }
@media (max-width: 900px) {
  .module-workflow-hero { grid-template-columns: 1fr; }
  .module-workflow-hero-diagram { max-width: 550px; }
  .module-stage-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module-stage-list li { min-height: 205px; }
  .module-example-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .module-workflow-page { padding-block: 28px 58px; }
  .module-workflow-hero { padding: 25px 21px; gap: 24px; }
  .module-workflow-hero h1 { font-size: clamp(2.15rem, 10vw, 3rem); }
  .module-lead { font-size: 1rem; margin-top: 20px; }
  .module-stages, .module-example, .module-outputs { margin-top: 46px; }
  .module-stage-list, .module-output-grid { grid-template-columns: 1fr; }
  .module-stage-list li { min-height: 0; }
  .module-heatmap { padding: 10px; }
  .module-heatmap figcaption { padding: 3px 5px; }
  .module-example-note { padding: 20px; }
  .module-boundary { margin-top: 46px; padding: 22px; }
}

.module-review-entry { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding: 24px 28px; border: 1px solid var(--module-line); border-radius: 13px; background: #fff; scroll-margin-top: 24px; }
.module-review-entry > div { min-width: 0; max-width: 790px; }
.module-review-entry h2 { margin: 7px 0 10px; color: var(--module-ink); font-size: 1.4rem; }
.module-review-entry p:not(.module-eyebrow) { color: var(--module-muted); font-size: .87rem; line-height: 1.7; }
.module-review-link { flex-shrink: 0; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--workflow-accent); font-size: .85rem; font-weight: 650; text-underline-offset: 3px; }
@media (max-width: 620px) { .module-review-entry { align-items: flex-start; flex-direction: column; gap: 12px; padding: 22px; } }