/* Process improvement: scoped composition using the approved Comans components. */
.cs-page-process .pi-hero { padding-block:56px; }
.cs-page-process .pi-hero-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; }
.cs-page-process .pi-hero h1 { text-wrap:balance; }
.cs-page-process .pi-hero .cs-eyebrow { color:var(--cs-text); }
.cs-page-process .pi-hero .cs-lead { margin-top:32px; }
.cs-page-process .pi-hero-diagram, .cs-page-process .pi-proof-flow { --diagram-line:#7d8594; --diagram-node:#ffffff04; margin:0; padding:32px; border:1px solid var(--cs-line); border-radius:10px; background:var(--cs-navy); color:var(--cs-text); min-width:0; }
.cs-page-process .pi-hero-stages { --stage-gap:24px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--stage-gap); margin:0; padding:0; list-style:none; }
.cs-page-process .pi-hero-stages li { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; text-align:center; margin:0; min-width:0; }
.cs-page-process .pi-hero-stages strong { display:block; font-size:15px; font-weight:500; line-height:1.5; }
.cs-page-process .pi-hero-stages li>div>span { display:block; margin-top:8px; font-size:14px; line-height:1.5; color:var(--cs-muted); }
.cs-page-process .pi-hero-stages .cs-art, .cs-page-process .pi-proof-flow .cs-art { width:64px; height:64px; flex:none; fill:var(--diagram-node); }
.cs-page-process .pi-art-accent { fill:var(--cs-red); stroke:var(--cs-red); }
.cs-page-process .pi-art-on-accent { fill:none; stroke:#fff; }
.cs-page-process .pi-art-highlight { fill:none; stroke:var(--cs-red); }
.cs-page-process .pi-hero-arrow { position:absolute; left:calc(100% + var(--stage-gap) / 2 - 12px); top:24px; width:24px; height:16px; }
.cs-page-process .pi-scope { padding-block:40px 64px; }
.cs-page-process .pi-scope-grid { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:64px; }
.cs-page-process .pi-scope h2 { font-size:32px; margin-bottom:0; max-width:440px; text-wrap:balance; }
.cs-page-process .pi-scope p { margin-bottom:16px; }
.cs-page-process .pi-scope p:last-child { margin-bottom:0; }
.cs-page-process .pi-deliverables-panel { border-radius:10px; padding:48px; }
.cs-page-process .pi-output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:48px; row-gap:32px; list-style:none; margin:0; padding:0; }
.cs-page-process .pi-output-grid li { border-top:1px solid var(--cs-paper-line); padding-top:24px; margin:0; min-width:0; }
.cs-page-process .pi-output-grid h3 { font-size:26px; font-weight:500; line-height:1.3; margin-bottom:16px; text-wrap:balance; }
.cs-page-process .pi-journey { --marker-size:48px; --row-inset:8px; margin:0; padding:0; list-style:none; }
.cs-page-process .pi-journey li { position:relative; display:grid; grid-template-columns:var(--marker-size) minmax(0,.85fr) minmax(0,1.5fr); align-items:start; gap:32px; padding:24px 0 24px var(--row-inset); margin:0; }
.cs-page-process .pi-journey li:not(:last-child)::before { content:''; position:absolute; left:calc(var(--row-inset) + var(--marker-size) / 2); top:calc(24px + var(--marker-size)); bottom:-24px; width:1.5px; transform:translateX(-50%); background:#7d8594; }
.cs-page-process .pi-step-number { display:grid; place-items:center; width:var(--marker-size); height:var(--marker-size); border:1.5px solid #7d8594; border-radius:50%; font-size:16px; font-weight:500; line-height:1; color:var(--cs-text); background:var(--cs-ink); }
.cs-page-process .pi-journey h3 { font-size:26px; font-weight:500; line-height:1.3; margin:4px 0 0; }
.cs-page-process .pi-journey p { margin:0; }
.cs-page-process .pi-fees { padding-bottom:96px; }
.cs-page-process .pi-fees-inner { padding-top:48px; border-top:1px solid var(--cs-line); }
.cs-page-process .pi-fees-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; }
.cs-page-process .pi-fees-grid>div+div { border-left:1px solid var(--cs-line); padding-left:48px; }
.cs-page-process .pi-fees-grid h3 { font-size:26px; font-weight:500; line-height:1.3; margin-bottom:16px; }
.cs-page-process .cs-main .pi-completion { margin-top:24px; }
.cs-page-process .pi-examples { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; }
.cs-page-process .pi-example { display:grid; grid-template-rows:subgrid; grid-row:span 3; gap:24px; min-width:0; }
.cs-page-process .pi-example-copy .pi-client-name { font-size:18px; font-weight:500; color:var(--cs-ink); margin-bottom:12px; }
.cs-page-process .pi-example h3 { font-size:26px; font-weight:500; line-height:1.3; margin-bottom:16px; }
.cs-page-process .pi-example>.cs-link { justify-self:start; }
.cs-page-process .pi-proof-flow { display:flex; flex-direction:column; }
.cs-page-process .pi-proof-flow figcaption { text-align:left; margin:0 0 24px; color:var(--cs-text); font-size:15px; font-weight:500; line-height:1.5; }
.cs-page-process .pi-proof-body { display:flex; flex-direction:column; justify-content:center; flex:1; }
.cs-page-process .pi-app-map { display:grid; grid-template-columns:minmax(80px,.65fr) minmax(0,1.35fr); gap:40px; align-items:center; }
.cs-page-process .pi-app-source { position:relative; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; min-width:0; }
.cs-page-process .pi-app-source>span { font-size:14px; line-height:1.5; color:var(--cs-muted); }
.cs-page-process .pi-app-source::after { content:''; position:absolute; top:50%; left:calc(50% + 24px); width:50%; height:1.5px; background:var(--diagram-line); }
.cs-page-process .pi-app-targets { position:relative; display:grid; grid-template-rows:repeat(3,1fr); gap:12px; padding:0; margin:0; list-style:none; }
.cs-page-process .pi-app-targets::before { content:''; position:absolute; left:-20px; top:calc((100% - 24px) / 6); bottom:calc((100% - 24px) / 6); width:1.5px; background:var(--diagram-line); }
.cs-page-process .pi-app-targets li { position:relative; display:flex; align-items:center; padding:10px 12px; border:1.5px solid var(--diagram-line); border-radius:6px; background:var(--diagram-node); color:var(--cs-text); font-size:14px; line-height:1.5; margin:0; min-width:0; }
.cs-page-process .pi-app-targets li>span { min-width:0; }
.cs-page-process .pi-branch-arrow { position:absolute; left:-21px; top:calc(50% - 8px); width:20px; height:16px; }
.cs-page-process .pi-lifecycle { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:0; padding:0; list-style:none; }
.cs-page-process .pi-lifecycle li { border:1.5px solid var(--diagram-line); border-radius:6px; padding:12px 8px; font-size:14px; line-height:1.5; text-align:center; margin:0; display:grid; place-content:center; }
.cs-page-process .pi-branch-connector { width:100%; height:40px; }
.cs-page-process .pi-data-step { border:1.5px solid var(--diagram-line); border-radius:6px; display:flex; align-items:center; gap:16px; padding:16px; }
.cs-page-process .pi-data-step strong, .cs-page-process .pi-check-outcomes strong { display:block; font-size:15px; font-weight:500; line-height:1.5; }
.cs-page-process .pi-data-step span, .cs-page-process .pi-check-outcomes span { display:block; font-size:14px; line-height:1.5; color:var(--cs-muted); margin-top:4px; }
.cs-page-process .pi-check-outcomes { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cs-page-process .pi-check-outcomes>div { padding:12px; border:1.5px solid var(--diagram-line); border-radius:6px; }
.cs-page-process .pi-check-outcomes .pi-review-step { border-top:3px solid var(--cs-red); padding-top:10.5px; }
.cs-page-process .pi-check-outcomes span { margin:0 0 4px; }
.cs-page-process .pi-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
@media (min-width:1001px) and (max-width:1200px) {
  .cs-page-process .pi-hero-grid { gap:40px; }
  .cs-page-process .pi-hero h1 { font-size:46px; }
  .cs-page-process .pi-hero-diagram { padding:28px; }
  .cs-page-process .pi-hero-stages { grid-template-columns:1fr; }
  .cs-page-process .pi-hero-stages li { flex-direction:row; text-align:left; }
  .cs-page-process .pi-hero-arrow { left:20px; top:calc(100% + var(--stage-gap) / 2 - 8px); transform:rotate(90deg); }
}
@media (max-width:1100px) {
  .cs-page-process .pi-examples { gap:32px; }
  .cs-page-process .pi-proof-flow { padding:24px; }
  .cs-page-process .pi-app-map { grid-template-columns:1fr; gap:32px; }
  .cs-page-process .pi-app-source { flex-direction:row; gap:16px; text-align:left; }
  .cs-page-process .pi-app-source::after { top:100%; left:32px; height:32px; width:1.5px; }
  .cs-page-process .pi-app-targets { margin-left:32px; padding-left:28px; }
  .cs-page-process .pi-app-targets::before { left:0; top:0; }
  .cs-page-process .pi-branch-arrow { left:-29px; width:28px; }
}
@media (max-width:1000px) {
  .cs-page-process .pi-hero-grid { grid-template-columns:1fr; gap:32px; }
  .cs-page-process .pi-hero h1 { max-width:720px; }
  .cs-page-process .pi-scope-grid { grid-template-columns:1fr; gap:24px; }
  .cs-page-process .pi-scope h2 { max-width:650px; }
}
@media (max-width:900px) {
  .cs-page-process .pi-deliverables-panel { padding:32px; }
  .cs-page-process .pi-output-grid { column-gap:32px; }
  .cs-page-process .pi-journey { --marker-size:40px; }
  .cs-page-process .pi-journey li { grid-template-columns:var(--marker-size) minmax(0,1fr); gap:12px 24px; }
  .cs-page-process .pi-step-number { grid-column:1; grid-row:1 / span 2; }
  .cs-page-process .pi-journey h3, .cs-page-process .pi-journey p { grid-column:2; }
  .cs-page-process .pi-journey h3 { margin-top:2px; }
  .cs-page-process .pi-fees-grid { grid-template-columns:1fr; gap:32px; }
  .cs-page-process .pi-fees-grid>div+div { border-left:0; border-top:1px solid var(--cs-line); padding:32px 0 0; }
  .cs-page-process .pi-examples { grid-template-columns:1fr; gap:48px; }
  .cs-page-process .pi-example { display:grid; grid-template-rows:auto; grid-row:auto; }
  .cs-page-process .pi-example+.pi-example { padding-top:40px; border-top:1px solid var(--cs-paper-line); }
  .cs-page-process .pi-proof-flow { max-width:650px; width:100%; }
}
@media (max-width:600px) {
  .cs-page-process .pi-hero { padding-block:48px; }
  .cs-page-process .pi-hero .cs-lead { margin-top:24px; }
  .cs-page-process .pi-hero-diagram { padding:24px; }
  .cs-page-process .pi-hero-stages { grid-template-columns:1fr; gap:32px; --stage-gap:32px; }
  .cs-page-process .pi-hero-stages li { flex-direction:row; text-align:left; gap:16px; }
  .cs-page-process .pi-hero-stages .cs-art, .cs-page-process .pi-proof-flow .cs-art { width:56px; height:56px; }
  .cs-page-process .pi-hero-arrow { left:16px; top:calc(100% + var(--stage-gap) / 2 - 8px); transform:rotate(90deg); }
  .cs-page-process .pi-scope { padding-block:16px 48px; }
  .cs-page-process .pi-scope h2 { font-size:26px; }
  .cs-page-process .pi-deliverables-panel { padding:24px; }
  .cs-page-process .pi-output-grid { grid-template-columns:1fr; gap:24px; }
  .cs-page-process .pi-output-grid h3, .cs-page-process .pi-journey h3, .cs-page-process .pi-fees-grid h3, .cs-page-process .pi-example h3 { font-size:24px; }
  .cs-page-process .pi-journey { --marker-size:32px; }
  .cs-page-process .pi-journey li { column-gap:16px; }
  .cs-page-process .pi-step-number { font-size:14px; }
  .cs-page-process .pi-journey h3 { margin-top:0; }
  .cs-page-process .pi-fees { padding-bottom:64px; }
  .cs-page-process .pi-fees-inner { padding-top:32px; }
  .cs-page-process .pi-fees .cs-section-heading { margin-bottom:32px; }
  .cs-page-process .pi-app-source::after { left:28px; }
  .cs-page-process .pi-app-targets { margin-left:28px; }
  .cs-page-process .pi-lifecycle { gap:8px; }
  .cs-page-process .pi-lifecycle li { padding:10px 4px; }
  .cs-page-process .pi-data-step { padding:12px; gap:12px; }
  .cs-page-process .pi-check-outcomes { gap:12px; }
}
@media (max-width:360px) {
  .cs-page-process .pi-hero-diagram, .cs-page-process .pi-deliverables-panel, .cs-page-process .pi-proof-flow { padding:20px; }
  .cs-page-process .pi-hero-stages li { gap:12px; }
  .cs-page-process .pi-check-outcomes>div { padding-inline:10px; }
  .cs-page-process .pi-data-step { flex-direction:column; align-items:flex-start; }
}