.demo-content .solution-diagrams{padding:55px 0 30px}
.solution-diagrams-intro{max-width:760px;margin-bottom:28px}
.solution-diagrams-intro h2{font-size:clamp(28px,3.4vw,42px);line-height:1.25;margin:14px 0 18px;letter-spacing:-.035em}
.solution-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:8px;background:#edf3f0;border:1px solid #d7e4de;border-radius:13px;margin-bottom:20px}
.solution-tabs [role=tab]{flex:1 1 145px;border:0;background:transparent;color:#37564c;font-size:14px;font-weight:500;line-height:1.5;padding:13px 14px;border-radius:8px;cursor:pointer}
.solution-tabs [role=tab]:hover{background:#e0ebe5}
.solution-tabs [aria-selected=true]{background:#22634f;color:white;box-shadow:none}
.solution-tabs [role=tab]:focus-visible{outline:3px solid #c6964f;outline-offset:2px}
.demo-content .solution-panel{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:40px;padding:30px!important;background:linear-gradient(135deg,#f2f8f5,#fff 60%);border:1px solid #d7e4de;border-radius:18px;margin-bottom:25px;box-shadow:none}
.solution-panel[hidden]{display:none!important}
.solution-figure{margin:0;background:radial-gradient(ellipse at 95% 0%,#1f65584d,transparent 60%),linear-gradient(150deg,#0c2838,#143e3b);border:1px solid #2f5b56;border-radius:13px;padding:23px;color:#e8f3ee;min-width:0}
.diagram-label{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#a7d2c1;margin-bottom:24px}
.flow-row{display:grid;grid-template-columns:repeat(var(--node-count),minmax(0,1fr));gap:12px;justify-content:center}
.flow-node{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:90px;padding:14px 9px;border:1px solid #638c82;border-radius:8px;background:#234c4b;color:#eff7f3;gap:6px;overflow-wrap:anywhere}
.flow-node strong{font-size:14px;font-weight:600;line-height:1.45}.flow-node span{font-size:12px;color:#c3dbd0;line-height:1.5}
.flow-core{width:85%;justify-self:center;min-height:85px;background:linear-gradient(115deg,#2b735b,#205241);border-color:#70ab8e}
.flow-core strong{font-size:16px}.flow-core span{font-size:13px;color:#dbede4}
.flow-connectors{display:block;width:100%;height:38px;overflow:visible}
.solution-figure figcaption{font-size:12px;line-height:1.75;color:#b9d2c6;border-top:1px solid #ffffff24;padding-top:18px;margin-top:23px}
.solution-explanation h2{font-size:clamp(24px,2.3vw,32px);line-height:1.3;letter-spacing:-.025em;margin:15px 0 20px}
.solution-explanation p{font-size:16px!important;line-height:1.85}
.solution-explanation ul{margin:23px 0 30px;padding-left:20px;color:#4e6a60;display:grid;gap:9px;font-size:14px}
.solution-enquire{display:block;margin-top:20px;font-size:14px;font-weight:500;color:#22634f}
@media(max-width:1000px){.demo-content .solution-panel{grid-template-columns:1fr;gap:28px}.solution-figure{max-width:660px;width:100%;margin:auto}.solution-explanation{padding:0 8px}}
@media(max-width:560px){.demo-content .solution-panel{padding:14px!important;border-radius:12px}.solution-figure{padding:15px 10px}.flow-row{gap:6px}.flow-node{padding:12px 5px;min-height:96px}.flow-node strong{font-size:14px}.flow-node span{font-size:12px}.flow-core{width:95%}.flow-core strong{font-size:15px}.flow-core span{font-size:12px}.solution-tabs{gap:4px;padding:6px}.solution-tabs [role=tab]{flex-basis:42%;font-size:13px;padding:11px 8px}.diagram-label{font-size:11px;letter-spacing:.04em}.solution-explanation h2{font-size:25px}.demo-content .solution-diagrams{padding-top:35px}.solution-explanation .button{width:100%}}
@media print{.solution-tabs{display:none}.solution-panel[hidden],.demo-content .solution-panel{display:grid!important;break-inside:avoid}.solution-figure{print-color-adjust:exact;-webkit-print-color-adjust:exact}}
.diagram-instruction{font-size:13px!important;color:#d0e4d9!important;margin:0 0 16px;line-height:1.6}
button.flow-node{width:100%;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s;font-family:inherit}
button.flow-node.flow-core{width:85%}
button.flow-node:hover{background:#32645d;border-color:#9fceb6}
button.flow-node[aria-pressed=true]{background:#3c654c;border-color:#efc77d;box-shadow:none}
button.flow-node:focus-visible{outline:3px solid #efc77d;outline-offset:4px}
.flow-connectors.flow-active>g{stroke:#efc77d;stroke-width:2.5}
.diagram-detail{margin-top:18px;padding:16px;border:1px solid #608575;border-radius:10px;background:#ffffff0b;min-height:145px}
.diagram-detail-title{display:block;color:#f0d29b;font-size:15px;line-height:1.5}
.demo-content .diagram-detail-copy{color:#e0eee6!important;font-size:14px!important;line-height:1.75;margin:8px 0 0}
.diagram-explore-controls{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.diagram-explore-controls button{padding:9px 12px;min-height:40px;background:#20483e;color:#e5f1e9;border:1px solid #779c88;border-radius:6px;font-size:12px;cursor:pointer}
.diagram-explore-controls button:hover{background:#35654f}
@media(max-width:560px){button.flow-node.flow-core{width:95%}.diagram-detail{min-height:175px}.diagram-explore-controls button{flex:1 1 auto}}
.solution-figure{background:linear-gradient(140deg,#fff,#f6faf7);border-color:#d2e2d9;color:#173d32;padding:24px}
.diagram-label{color:#24644f;font-weight:600}.diagram-instruction{color:#5b7166!important}
.solution-flow{position:relative;isolation:isolate}.flow-motion-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.flow-row{position:relative;z-index:1;gap:14px}.flow-connectors{height:68px;visibility:hidden}
.flow-node{background:#eff8ec;border-color:#92b88b;color:#234336;border-radius:6px;box-shadow:none;min-height:94px}
.flow-node span{color:#567060}.flow-row:nth-of-type(2) .flow-node{background:#edf5fe;border-color:#91b3ce}
.flow-row:last-child .flow-node{background:#fff5e6;border-color:#d9b572}
.flow-core{background:#edf5fe;border-color:#8ab6cf}.flow-core span{color:#47687b}
button.flow-node:hover{background:#e4f2e9;border-color:#438363;transform:translateY(-1px)}
button.flow-node[aria-pressed=true]{background:#fff1d5;border-color:#c58b21;box-shadow:none}
.solution-figure figcaption{color:#587062;border-top-color:#d9e5dd}.diagram-detail{background:#eef5f0;border-color:#c9ddce;min-height:145px}.diagram-detail-title{color:#24644f}.demo-content .diagram-detail-copy{color:#456353!important}
.diagram-explore-controls button{background:#fff;color:#285a44;border-color:#a9c5b3}.diagram-explore-controls button:hover{background:#e5f1e9}
.flow-motion-control[hidden]{display:none!important}
@media(max-width:560px){.solution-figure{padding:16px 10px}.flow-row{gap:7px}.flow-connectors{height:58px}.flow-node strong{font-size:12px}.flow-node span{font-size:11px}.flow-core strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){button.flow-node{transition:none}button.flow-node:hover{transform:none}}
@media print{.flow-motion-control{display:none}}
.solution-figure .diagram-explore-controls{display:none!important}
.solution-explanation .diagram-detail{margin:0 0 26px;padding:22px;background:linear-gradient(135deg,#eaf4ed,#f7faf8);border:1px solid #bfd7c8;border-radius:12px;min-height:180px}
.solution-explanation .diagram-detail-title{font-size:19px;color:#24644f}
.demo-content .solution-explanation .diagram-detail-copy{font-size:14px!important;line-height:1.8;margin:10px 0 0;color:#456353!important}
@media(max-width:1000px){.solution-explanation .diagram-detail{min-height:0;margin-bottom:24px}}
.demo-content .solution-panel{grid-template-columns:minmax(0,1fr);align-items:start;gap:24px}
.solution-panel>.solution-figure{box-sizing:border-box;width:100%;max-width:none;margin:0}
.solution-panel>.solution-explanation{box-sizing:border-box;min-width:0;width:100%;padding:0}
.solution-explanation .diagram-detail{box-sizing:border-box;width:100%;min-height:0;margin:0 0 24px}
.flow-viewport{width:100%;overflow-x:auto;padding:5px 0 12px}
.solution-flow{display:flex;align-items:stretch;gap:64px;min-width:700px}
.solution-flow>.flow-row{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:16px}
.solution-flow>.flow-connectors{display:none}
.solution-flow .flow-node,.solution-flow button.flow-node.flow-core{box-sizing:border-box;width:100%;min-height:94px}
@media(max-width:560px){.solution-flow{gap:42px;min-width:650px}.solution-flow .flow-node strong{font-size:13px}.solution-flow .flow-node span{font-size:12px}}
.solution-panel>.solution-figure{padding:16px}
.solution-figure .diagram-label{margin-bottom:10px}
.solution-figure .diagram-instruction{margin-bottom:10px;font-size:12px!important}
.solution-flow{gap:38px;min-width:640px}
.solution-flow>.flow-row{gap:10px}
.solution-flow .flow-node,.solution-flow button.flow-node.flow-core{min-height:64px;padding:8px;gap:3px}
.solution-flow .flow-node strong{font-size:13px;line-height:1.35}
.solution-flow .flow-node span{font-size:11px;line-height:1.4}
.solution-figure figcaption{margin-top:10px;padding-top:10px;line-height:1.5}
.flow-viewport{padding-bottom:6px}

/* Ingrowlogy palette: teal #33D3AB, orange #FF8000, gold #FFD400. */
.demo-content .solution-diagrams{
 --diagram-teal:#33D3AB;--diagram-green:#103a31;--diagram-orange:#FF8000;--diagram-gold:#FFD400;
}
.demo-content .solution-panel{background:linear-gradient(135deg,#eafaf5,#fffaf0);border-color:#a8d8c8}
.solution-panel>.solution-figure{background:linear-gradient(135deg,#f0fffa,#fffdf5);border-color:#b1daca;border-top:4px solid #33D3AB}
.solution-figure .diagram-label{color:#125e50;font-weight:700}
.solution-figure .solution-flow>.flow-row:first-of-type .flow-node{background:linear-gradient(135deg,#c5f7e9,#e4fff5);border:1px solid #159b7b;color:#103a31}
.solution-figure .solution-flow .flow-core{background:linear-gradient(130deg,#103a31,#17644f);border:2px solid #33D3AB;color:#fff}
.solution-figure .solution-flow .flow-core span{color:#ddfff3}
.solution-figure .solution-flow>.flow-row:last-child .flow-node{background:linear-gradient(130deg,#fff1c4,#ffe2bd);border:1px solid #df7300;color:#5b3500}
.solution-figure .solution-flow .flow-node span{color:inherit;opacity:1}
.solution-figure .solution-flow button.flow-node:hover{border-color:#103a31;box-shadow:0 2px 8px #103a3118;transform:none}
.solution-figure .solution-flow button.flow-node[aria-pressed=true]{background:linear-gradient(115deg,#FFD400,#ffb74a);border:2px solid #b85b00;color:#173a31;box-shadow:0 0 0 2px #ffd40030}
.solution-figure .solution-flow button.flow-node[aria-pressed=true] span{color:#173a31}
.solution-figure .solution-flow button.flow-node:focus-visible{outline:3px solid #103a31;outline-offset:3px}
.solution-figure .flow-motion-overlay path[stroke="#61796d"]{stroke:#17816b}
.solution-figure .flow-motion-overlay path[stroke="#cb8500"]{stroke:#e27600}
.solution-figure .flow-motion-overlay marker path{fill:#17816b}
.solution-figure .flow-motion-overlay circle{fill:#FF8000}
.solution-figure figcaption{color:#305c4f;border-top-color:#a8d8c8}
.solution-explanation .diagram-detail{background:linear-gradient(115deg,#103a31,#185342);border:1px solid #17644f;border-left:5px solid #33D3AB}
.solution-explanation .diagram-detail-title{color:#FFD400}
.demo-content .solution-explanation .diagram-detail-copy{color:#f0fff8!important}
.solution-diagrams .solution-tabs{background:#e2f5ed;border-color:#acd9c8}
.solution-diagrams .solution-tabs [aria-selected=true]{background:#103a31;color:#fff;box-shadow:inset 0 -3px #FFD400}
.solution-diagrams .solution-tabs [role=tab]:focus-visible{outline-color:#b85b00}