:root { --support-mint:#dfe9df; --support-dark:#123e31; --support-gold:#bc8d45; }
.visual-heading {display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:end;margin-bottom:42px;}
.visual-heading h2 {max-width:620px;}
.visual-heading>p {font-size:18px;max-width:440px;}
.workflow-map,.control-flow {padding-bottom:100px;}
.workflow-canvas {position:relative;min-height:390px;border:1px solid #cad3c9;border-radius:18px;background:radial-gradient(circle at 48% 42%,#e7eee5 0,transparent 35%),#f3f1ea;overflow:hidden;padding:38px;}
.workflow-lines {position:absolute;inset:30px 3%;width:94%;height:330px;color:#527265;overflow:visible;}
.workflow-lines path {fill:none;stroke:currentColor;stroke-width:2;marker-end:url(#workflow-arrow);}
.workflow-lines .path-write {color:var(--support-gold);stroke-width:3;}
.workflow-lines .branch {stroke-dasharray:5 7;}
.workflow-node {position:absolute;display:flex;flex-direction:column;justify-content:center;min-height:104px;padding:18px 20px;border:1px solid #bfcac0;border-radius:12px;background:#fffdf8;box-shadow:0 12px 30px #17382c0d;}
.workflow-node strong {font-size:17px;line-height:1.22;letter-spacing:-.01em;}
.workflow-node small,.control-step small {display:block;color:var(--muted);font-size:12px;margin-top:6px;}
.node-kicker,.step-number {display:block;color:#587166;font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px;}
.input-node {left:4%;top:58px;width:17%;}.axum-node {left:31%;top:58px;width:18%;background:var(--support-dark);color:white;border-color:var(--support-dark);}.axum-node .node-kicker,.axum-node small {color:#bfd1c8;}
.draft-node {left:55%;top:58px;width:16%;}.review-node {left:73%;top:58px;width:18%;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;border-color:#d2b278;}.system-node {right:4%;top:230px;width:17%;}.insight-node {left:31%;top:230px;width:40%;}
.review-mark {display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f1e2c4;color:#775318;font-weight:700;flex:none;}
.path-key {position:absolute;left:4%;bottom:23px;display:flex;gap:22px;color:var(--muted);font-size:11px;}.path-key span,.control-legend span {display:flex;align-items:center;gap:8px;}.read-key,.write-key {display:inline-block;width:24px;height:2px;background:#527265;}.write-key {height:3px;background:var(--support-gold);}
.method-sequence {position:relative;}.method-sequence:before {content:"";position:absolute;left:max(calc((100% - var(--max))/2 + 6px),56px);top:0;bottom:30px;width:1px;background:linear-gradient(var(--green),var(--line));}.method-sequence .index {position:relative;z-index:1;background:var(--paper);padding-block:8px;}
.implementation-scene {display:grid;grid-template-columns:1.1fr .9fr;gap:70px;align-items:center;padding:55px 0 105px;}.implementation-scene .editorial-photo {margin:0;}.implementation-scene .editorial-photo img {aspect-ratio:1.35;}.implementation-scene h2 {font-size:clamp(32px,3.5vw,48px);}.implementation-scene>div>p:last-child {font-size:18px;margin-top:24px;}
.control-flow {padding-top:5px;}.control-canvas {display:grid;grid-template-columns:1fr auto 1fr auto 1.18fr auto 1fr;gap:14px;align-items:center;border:1px solid #cbd4cb;border-radius:18px;background:#f0f2eb;padding:38px 30px;}
.control-step {min-height:126px;padding:18px;border:1px solid #c6d0c6;border-radius:11px;background:#fffdf8;display:flex;flex-direction:column;justify-content:center;}.control-step strong {font-size:16px;line-height:1.2;}.control-step.processing {background:var(--support-dark);color:white;border-color:var(--support-dark);}.control-step.processing small,.control-step.processing .step-number {color:#c5d4cd;}.control-step.pending {flex-direction:row;align-items:center;gap:12px;border-color:#d2b278;background:#fff9ed;}.status-dot {width:12px;height:12px;border:3px solid #c08e3b;border-radius:50%;box-shadow:0 0 0 5px #efdcb8;flex:none;}.flow-arrow {font-size:24px;color:#527265;}.flow-arrow.write {color:var(--support-gold);font-weight:700;}.control-legend {display:flex;justify-content:flex-end;gap:24px;margin-top:16px;color:var(--muted);font-size:12px;}
.review-card {grid-column:1/-1;display:grid;grid-template-columns:.8fr 1fr;column-gap:70px;align-items:center;}.review-card h2,.review-card p {grid-column:2;}.pending-mini {grid-column:1;grid-row:1/3;border:1px solid #d3b67d;border-radius:12px;background:#fff9ed;padding:25px;display:flex;flex-direction:column;}.pending-mini span {color:#8a6427;font-size:11px;text-transform:uppercase;letter-spacing:.07em;}.pending-mini strong {font-size:18px;margin:14px 0 5px;}.pending-mini small {color:var(--muted);}
.company-ambition {display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:center;border-top:1px solid var(--line);padding-block:85px;}.company-ambition h2 {font-size:clamp(36px,4vw,56px);}.company-ambition p:last-child {font-size:19px;margin-top:24px;max-width:470px;}.company-dots {width:100%;max-height:360px;background:#eff1ea;border-radius:18px;}.company-dots circle {fill:#6c8b7d;}.company-dots .dots-scattered circle {opacity:.5;}.company-dots path {fill:none;stroke:#759184;stroke-width:2;stroke-dasharray:4 7;}.company-dots .decision-dot {fill:var(--green);}
@media(max-width:900px){.workflow-node {padding:14px;}.workflow-node strong {font-size:14px;}.review-node {gap:7px}.control-canvas {gap:8px;padding-inline:18px}.control-step {padding:12px}.control-step strong {font-size:14px}}
@media(max-width:760px){.visual-heading {grid-template-columns:1fr;gap:20px;margin-bottom:28px}.visual-heading>p {font-size:16px}.workflow-map,.control-flow {padding-bottom:64px}.workflow-canvas {min-height:auto;padding:24px;display:grid;gap:14px}.workflow-lines,.path-key {display:none}.workflow-node {position:relative;inset:auto;width:auto;min-height:0}.workflow-node:not(:last-of-type):after {content:"↓";position:absolute;left:50%;bottom:-20px;color:#527265;z-index:2}.workflow-node.system-node:after,.workflow-node.insight-node:after {display:none}.insight-node {margin-top:10px;border-style:dashed}.method-sequence:before {left:28px}.implementation-scene {grid-template-columns:1fr;gap:30px;padding-block:35px 70px}.implementation-scene .editorial-photo img {aspect-ratio:1.25;object-position:center}.control-canvas {grid-template-columns:1fr;gap:10px;padding:22px}.control-step {min-height:98px}.flow-arrow {transform:rotate(90deg);justify-self:center;line-height:1}.control-legend {justify-content:flex-start;flex-wrap:wrap}.review-card {display:block}.pending-mini {margin-bottom:26px}.company-ambition {grid-template-columns:1fr;gap:35px;padding-block:58px}.company-dots {max-height:300px}}
@media(prefers-reduced-motion:reduce){.workflow-node,.control-step,.company-dots * {animation:none!important;transition:none!important}}

/* Stack dense flow diagrams before their labels become cramped. */
@media(min-width:761px) and (max-width:1100px){
.workflow-canvas{min-height:auto;padding:28px;display:grid;gap:16px}
.workflow-lines,.path-key{display:none}
.workflow-node{position:relative;inset:auto;width:auto;min-height:0;padding:20px}
.workflow-node strong{font-size:17px}
.workflow-node:after{content:"↓";position:absolute;left:50%;bottom:-22px;color:#527265;z-index:2}
.workflow-node.system-node:after,.workflow-node.insight-node:after{display:none}
.insight-node{margin-top:12px;border-style:dashed}
.control-canvas{grid-template-columns:1fr;gap:10px;padding:26px}
.control-step{min-height:98px;padding:20px}
.control-step strong{font-size:17px}
.flow-arrow{transform:rotate(90deg);justify-self:center;line-height:1}
}
.workflow-node>span,.control-step>div{min-width:0}