/* Isolated workflow illustration. Main site owns typography and semantic theme tokens. */
.workflow-demo {
  --wf-surface: var(--surface, #eef2ef);
  --wf-raised: var(--surface-raised, var(--bg, #fafbf9));
  --wf-accent: var(--accent, #eabe61);
  --wf-accent-ink: var(--accent-ink, #152b38);
  --wf-positive: #69a783;
  --wf-negative: #d69191;
  width: 100%; min-width: 0; color: var(--text, #152b38); font: inherit;
}
.workflow-demo *, .workflow-demo *::before, .workflow-demo *::after { box-sizing: border-box; }
.workflow-demo [hidden] { display: none !important; }
.workflow-demo p, .workflow-demo h3, .workflow-demo figure, .workflow-demo dl { margin: 0; }
.workflow-demo button, .workflow-demo input { font: inherit; }
.workflow-demo button { cursor: pointer; touch-action: manipulation; }
.workflow-demo :is(button, input, [tabindex]):focus-visible { outline: 3px solid var(--text, #152b38); outline-offset: 4px; }
.workflow-demo .wf-disclosure { font-size: .75rem; color: var(--muted, #4a5c65); line-height: 1.6; margin-bottom: 1rem; }
.workflow-demo .wf-stage-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line, #ccd5d5); border-bottom: 1px solid var(--line, #ccd5d5); }
.workflow-demo .wf-stage-tabs button { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; min-height: 4.5rem; background: transparent; color: var(--muted, #4a5c65); border: 0; border-right: 1px solid var(--line, #ccd5d5); font-size: 1rem; text-align: left; transition: background .2s ease, color .2s ease; }
.workflow-demo .wf-stage-tabs button:last-child { border-right: 0; }
.workflow-demo .wf-stage-tabs button[aria-selected="true"] { background: var(--wf-accent); color: var(--wf-accent-ink); }
.workflow-demo .wf-stage-tabs button:hover:not([aria-selected="true"]) { background: var(--wf-surface); color: var(--text, #152b38); }
.workflow-demo .wf-step-number { font-size: .6875rem; font-variant-numeric: tabular-nums; }
.workflow-demo .wf-tab-arrow { margin-left: auto; font-size: 1.25rem; opacity: 0; }
.workflow-demo [aria-selected="true"] .wf-tab-arrow { opacity: 1; }
.workflow-demo .wf-stage { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(16rem, 1fr); align-items: center; gap: 2.5rem; padding: 2rem 0; border-bottom: 1px solid var(--line, #ccd5d5); animation: wf-panel-in .24s ease-out; }
.workflow-demo .wf-visual { min-width: 0; padding: 1rem 0 1.25rem; background: var(--wf-surface); border: 1px solid var(--line, #ccd5d5); }
.workflow-demo .wf-visual svg { width: 100%; height: auto; display: block; }
.workflow-demo .wf-visual figcaption { padding: 0 1.5rem; margin: 0; color: var(--muted, #4a5c65); font-size: .6875rem; line-height: 1.6; }
.workflow-demo .wf-explanation { min-width: 0; }
.workflow-demo .wf-kicker { font-size: .6875rem; line-height: 1.6; letter-spacing: .08em; color: var(--muted, #4a5c65); margin-bottom: 1rem; }
.workflow-demo .wf-explanation h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; font-weight: 500; letter-spacing: -.035em; max-width: 16ch; }
.workflow-demo .wf-explanation > p:not(.wf-kicker):not(.wf-fine):not(.wf-sr-only) { color: var(--muted, #4a5c65); font-size: .875rem; line-height: 1.75; margin-top: 1rem; }
.workflow-demo .wf-facts { margin-top: 1.5rem; border-top: 1px solid var(--line, #ccd5d5); }
.workflow-demo .wf-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--line, #ccd5d5); font-size: .75rem; line-height: 1.5; }
.workflow-demo .wf-facts dt { color: var(--muted, #4a5c65); }
.workflow-demo .wf-facts dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.workflow-demo .wf-fine { font-size: .6875rem; line-height: 1.7; margin-top: 1.25rem; color: var(--muted, #4a5c65); }
.workflow-demo .wf-switch { display: flex; align-items: center; gap: .75rem; min-height: 2.75rem; margin-top: 1rem; font-size: .75rem; cursor: pointer; }
.workflow-demo .wf-switch input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--wf-accent-ink); }
.workflow-demo .wf-grid-line { fill: none; stroke: var(--line, #ccd5d5); stroke-width: .5; }
.workflow-demo .wf-roof-face { fill: var(--wf-raised); stroke: var(--muted, #4a5c65); stroke-width: 2; }
.workflow-demo .wf-boundary { fill: none; stroke: var(--muted, #4a5c65); stroke-width: 1.5; stroke-dasharray: 7 6; }
.workflow-demo .wf-boundary-hidden { display: none; }
.workflow-demo .wf-corridor { fill: var(--wf-surface); }
.workflow-demo .wf-module rect { fill: var(--text, #152b38); stroke: var(--wf-accent); stroke-width: 1; }
.workflow-demo .wf-module path { fill: none; stroke: var(--wf-raised); stroke-width: .5; opacity: .5; }
.workflow-demo .wf-obstruction { stroke: var(--text, #152b38); stroke-width: 1.5; }
.workflow-demo .wf-hatch-line { stroke: var(--muted, #4a5c65); stroke-width: .75; }
.workflow-demo .wf-leader, .workflow-demo .wf-north { fill: none; stroke: var(--muted, #4a5c65); stroke-width: 1.5; }
.workflow-demo .wf-label { fill: var(--muted, #4a5c65); font-family: inherit; font-size: 13px; font-weight: 400; letter-spacing: .035em; }
.workflow-demo .wf-flow-rail { fill: none; stroke: var(--line, #ccd5d5); stroke-width: 1; }
.workflow-demo .wf-flow-path { fill: none; stroke: var(--text, #152b38); stroke-width: 2; }
.workflow-demo .wf-arrow { fill: var(--text, #152b38); }
.workflow-demo .wf-equipment { fill: var(--wf-raised); stroke: var(--text, #152b38); stroke-width: 2; }
.workflow-demo .wf-conversion, .workflow-demo .wf-grid-bus { fill: none; stroke: var(--text, #152b38); stroke-width: 2; }
.workflow-demo .wf-range-label { margin-top: 1.5rem; font-size: .75rem; display: flex; justify-content: space-between; gap: .5rem; align-items: center; }
.workflow-demo .wf-range-label output { font-size: 1.25rem; font-variant-numeric: tabular-nums; color: var(--text, #152b38); }
.workflow-demo .wf-range { width: 100%; display: block; height: 2.75rem; margin: .25rem 0 0; accent-color: var(--wf-accent); cursor: pointer; }
.workflow-demo .wf-range-limits { display: flex; justify-content: space-between; gap: .5rem; color: var(--muted, #4a5c65); font-size: .625rem; }
.workflow-demo .wf-chart-grid { fill: none; stroke: var(--line, #ccd5d5); stroke-width: 1; }
.workflow-demo .wf-negative-area { fill: var(--wf-negative); fill-opacity: .3; }
.workflow-demo .wf-positive-area { fill: var(--wf-positive); fill-opacity: .35; }
.workflow-demo .wf-zero-line { fill: none; stroke: var(--muted, #4a5c65); stroke-width: 1; }
.workflow-demo .wf-break-line { fill: none; stroke: var(--text, #152b38); stroke-width: 1.5; stroke-dasharray: 3 5; }
.workflow-demo .wf-cash-line { fill: none; stroke: var(--text, #152b38); stroke-width: 2.5; }
.workflow-demo .wf-break-dot { fill: var(--wf-accent); stroke: var(--text, #152b38); stroke-width: 2; }
.workflow-demo .wf-break-label { fill: var(--text, #152b38); font-weight: 600; font-size: 12px; }
.workflow-demo .wf-chart-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1.5rem; }
.workflow-demo .wf-chart-legend > span { display: flex; gap: .5rem; align-items: center; }
.workflow-demo .wf-chart-legend i { width: .625rem; height: .625rem; display: block; }
.workflow-demo .wf-legend-negative { background: var(--wf-negative); }
.workflow-demo .wf-legend-positive { background: var(--wf-positive); }
.workflow-demo .wf-deliver { align-items: start; }
.workflow-demo .wf-deliver .wf-explanation { padding-top: 4rem; }
.workflow-demo .wf-report-stack { padding: 1.5rem 2rem 2rem; min-width: 0; background: var(--wf-surface); border: 1px solid var(--line, #ccd5d5); }
.workflow-demo .wf-report-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.workflow-demo .wf-report-tabs button { flex: 1; border: 1px solid var(--line, #ccd5d5); background: transparent; color: var(--muted, #4a5c65); min-height: 2.75rem; font-size: .75rem; padding: .5rem; }
.workflow-demo .wf-report-tabs button[aria-selected="true"] { background: var(--text, #152b38); border-color: var(--text, #152b38); color: var(--wf-raised); }
.workflow-demo .wf-report-page { --text: #152b38; --muted: #4a5c65; --line: #ccd5d5; --wf-raised: #fafbf9; --wf-surface: #eef2ef; background: #fafbf9; color: #152b38; padding: 1.75rem; border: 1px solid #ccd5d5; min-height: 35rem; }
.workflow-demo .wf-report-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; padding-bottom: 1rem; border-bottom: 1px solid #ccd5d5; }
.workflow-demo .wf-report-masthead strong { font-size: 1rem; letter-spacing: -.04em; }
.workflow-demo .wf-report-masthead span { font-size: .5rem; letter-spacing: .08em; }
.workflow-demo .wf-report-eyebrow { font-size: .5625rem; letter-spacing: .1em; color: #4a5c65; padding-top: 1.75rem; }
.workflow-demo .wf-report-page h3 { margin-top: .75rem; font-size: clamp(1.5rem, 3vw, 2.75rem); line-height: 1.1; font-weight: 500; letter-spacing: -.04em; }
.workflow-demo .wf-report-intro { margin-top: 1rem; font-size: .75rem; line-height: 1.7; max-width: 36ch; }
.workflow-demo .wf-report-page svg { margin: 1rem 0; width: 100%; height: auto; display: block; }
.workflow-demo .wf-report-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .5625rem; border-top: 1px solid #ccd5d5; padding-top: 1rem; }
.workflow-demo .wf-report-disclaimer { margin-top: 1rem; font-size: .5625rem; line-height: 1.7; color: #4a5c65; }
.workflow-demo .wf-report-facts { margin-top: 1.5rem; }
.workflow-demo .wf-report-facts > div { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #ccd5d5; font-size: .6875rem; line-height: 1.5; }
.workflow-demo .wf-report-facts dt { color: #4a5c65; }
.workflow-demo .wf-report-facts dd { margin: 0; font-weight: 600; text-align: right; }
.workflow-demo .wf-report-callout { border-left: 2px solid #b3852c; padding-left: 1rem; margin-top: 1.5rem; font-size: .875rem; line-height: 1.6; }
.workflow-demo .wf-delivery-list { padding: 0; list-style: none; margin: 1.5rem 0 0; }
.workflow-demo .wf-delivery-list li { display: flex; gap: 1rem; font-size: .75rem; line-height: 1.7; border-top: 1px solid var(--line, #ccd5d5); padding: 1rem 0; }
.workflow-demo .wf-delivery-list span { font-size: .625rem; color: var(--muted, #4a5c65); }
.workflow-demo .wf-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes wf-panel-in { from { opacity: .6; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) {
  .workflow-demo .wf-stage { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .workflow-demo .wf-stage-tabs button { gap: .75rem; padding: 1rem; }
  .workflow-demo .wf-explanation h3 { max-width: none; }
  .workflow-demo .wf-deliver .wf-explanation { padding-top: 0; }
  .workflow-demo .wf-report-stack { width: 100%; max-width: 40rem; justify-self: center; }
}
@media (max-width: 480px) {
  .workflow-demo .wf-disclosure { font-size: .6875rem; }
  .workflow-demo .wf-stage-tabs button { display: block; padding: .75rem .5rem; min-height: 4rem; text-align: center; font-size: .8125rem; }
  .workflow-demo .wf-step-number { display: block; margin-bottom: .375rem; font-size: .5625rem; }
  .workflow-demo .wf-tab-arrow { display: none; }
  .workflow-demo .wf-stage { padding: 1.25rem 0; gap: 1.5rem; }
  .workflow-demo .wf-visual { padding: .75rem 0; }
  .workflow-demo .wf-visual figcaption { padding: 0 1rem; font-size: .625rem; }
  .workflow-demo .wf-chart-legend { justify-content: start; gap: .5rem; }
  .workflow-demo .wf-label { font-size: 16px; }
  .workflow-demo .wf-chart-labels { font-size: 15px; }
  .workflow-demo .wf-break-label { font-size: 13px; }
  .workflow-demo .wf-plan-note { display: none; }
  .workflow-demo .wf-report-stack { padding: 1rem .75rem; }
  .workflow-demo .wf-report-page { padding: 1rem; min-height: 30rem; }
  .workflow-demo .wf-report-tabs { gap: .25rem; margin-bottom: 1rem; }
  .workflow-demo .wf-report-page h3 { font-size: 1.875rem; }
  .workflow-demo .wf-report-masthead span { font-size: .4375rem; }
  .workflow-demo .wf-report-facts > div { font-size: .625rem; gap: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .workflow-demo *, .workflow-demo *::before, .workflow-demo *::after { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) {
  .workflow-demo [role="tab"][aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -3px; }
  .workflow-demo .wf-cash-line, .workflow-demo .wf-break-line, .workflow-demo .wf-zero-line { stroke: CanvasText; }
}

/* Product story edition. Clear process navigation and drafting-room surfaces. */
.product-led .workflow-demo .wf-disclosure{font-size:10px;margin-bottom:16px;color:var(--muted);letter-spacing:.025em}
.product-led .workflow-demo .wf-stage-tabs{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.product-led .workflow-demo .wf-stage-tabs button{min-height:70px;padding:18px 24px;font-size:15px;gap:14px}
.product-led .workflow-demo .wf-stage-tabs button[aria-selected=true]{color:var(--text);background:var(--surface-raised);box-shadow:inset 0 -3px var(--accent)}
.product-led .workflow-demo .wf-step-number{display:grid;place-items:center;width:26px;height:26px;font-size:9px;border:1px solid var(--line);border-radius:4px}
.product-led .workflow-demo [aria-selected=true] .wf-step-number{color:#1b2e39;background:var(--accent);border-color:var(--accent)}
.product-led .workflow-demo .wf-tab-arrow{font-size:16px;color:var(--accent-text)}
.product-led .workflow-demo .wf-stage{grid-template-columns:minmax(0,1.55fr) minmax(245px,1fr);gap:55px;padding-block:35px 0;border-bottom:0;align-items:center}
.product-led .workflow-demo .wf-visual{border-radius:7px;overflow:hidden;padding:12px 0 20px}
.product-led .workflow-demo .wf-module rect{fill:#1a3c54;stroke:#779aad;stroke-width:1.1}
.product-led .workflow-demo .wf-module path{stroke:#bed0db;opacity:.7}
.product-led .workflow-demo .wf-roof-face{stroke:#8ba0ad;stroke-width:1.5}
.product-led .workflow-demo .wf-boundary{stroke:#b79956;stroke-width:1.5}
.product-led .workflow-demo .wf-obstruction{stroke:#987a39;stroke-width:1.4}
.product-led .workflow-demo .wf-hatch-line{stroke:#a58a4e}
.product-led .workflow-demo .wf-grid-line{opacity:.65}
.product-led .workflow-demo .wf-explanation h3{font-size:32px;line-height:1.12;font-weight:450;letter-spacing:-.04em;max-width:17ch}
.product-led .workflow-demo .wf-kicker{font-size:8px;letter-spacing:.12em;color:var(--accent-text);margin-bottom:15px}
.product-led .workflow-demo .wf-explanation>p:not(.wf-kicker):not(.wf-fine):not(.wf-sr-only){font-size:12px;line-height:1.85;margin-top:18px}
.product-led .workflow-demo .wf-facts{margin-top:23px}.product-led .workflow-demo .wf-facts>div{padding:12px 0;font-size:10px}
.product-led .workflow-demo .wf-facts dd{font-weight:500}.product-led .workflow-demo .wf-fine{font-size:9px;line-height:1.8;margin-top:18px}
.product-led .workflow-demo .wf-visual figcaption{font-size:9px;padding-inline:23px}
.product-led .workflow-demo .wf-flow-path{stroke:#b59148;stroke-width:3}.product-led .workflow-demo .wf-arrow{fill:#b59148}
.product-led .workflow-demo .wf-equipment{fill:var(--surface-raised);stroke:#6c8d9f;stroke-width:1.8}
.product-led .workflow-demo .wf-conversion,.product-led .workflow-demo .wf-grid-bus{stroke:#8faaba;stroke-width:2}
.product-led .workflow-demo .wf-chart-grid{stroke-width:.5;opacity:.7}
.product-led .workflow-demo .wf-positive-area{fill:#789c8d;fill-opacity:.22}.product-led .workflow-demo .wf-negative-area{fill:#b8a883;fill-opacity:.22}
.product-led .workflow-demo .wf-cash-line{stroke:#b5924a;stroke-width:3}.product-led .workflow-demo .wf-break-line{stroke:#90a4b1;stroke-width:1}
.product-led .workflow-demo .wf-legend-negative{background:#b8a883}.product-led .workflow-demo .wf-legend-positive{background:#789c8d}
.product-led .workflow-demo .wf-report-stack{border-radius:7px;padding:24px 32px 30px}
.product-led .workflow-demo .wf-report-tabs button{border-radius:4px;font-size:10px;min-height:36px}
.product-led .workflow-demo .wf-report-page{border-color:#cbd5d9;box-shadow:0 6px 16px #152b3b0e;padding:30px;min-height:545px}
.product-led .workflow-demo .wf-report-page h3{font-size:39px;font-weight:450}
.product-led .workflow-demo .wf-report-page .wf-label{fill:#647d8b}
.product-led .workflow-demo .wf-deliver .wf-explanation{padding-top:20px}
.product-led .workflow-demo .wf-range-label{font-size:10px;margin-top:22px}.product-led .workflow-demo .wf-range-label output{font-size:24px}
.product-led .workflow-demo .wf-bom{margin:22px 23px 0;padding-top:14px;border-top:1px solid var(--line);font-size:10px}
.product-led .workflow-demo .wf-bom>div{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.product-led .workflow-demo .wf-bom .wf-bom-heading{font-size:7px;letter-spacing:.08em;color:var(--muted);padding:0 0 10px}
.product-led .workflow-demo .wf-bom small{font-size:8px;color:var(--muted);margin-left:10px}.product-led .workflow-demo .wf-bom strong{font-weight:500;font-variant-numeric:tabular-nums}
.product-led .workflow-demo .wf-bom>p{font-size:8px;line-height:1.7;color:var(--muted);margin-top:11px;max-width:450px}
@media(max-width:1000px){.product-led .workflow-demo .wf-stage{gap:30px}.product-led .workflow-demo .wf-explanation h3{font-size:29px}.product-led .workflow-demo .wf-stage-tabs button{padding:17px 20px}.product-led .workflow-demo .wf-report-stack{padding:22px}.product-led .workflow-demo .wf-report-page{padding:25px}}
@media(max-width:850px){.product-led .workflow-demo .wf-stage{grid-template-columns:1fr;gap:27px}.product-led .workflow-demo .wf-explanation h3{max-width:none}.product-led .workflow-demo .wf-explanation{max-width:650px}.product-led .workflow-demo .wf-report-stack{max-width:650px;width:100%}.product-led .workflow-demo .wf-deliver .wf-explanation{padding-top:0}.product-led .workflow-demo .wf-visual{width:100%}}
@media(max-width:480px){.product-led .workflow-demo .wf-stage-tabs button{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:12px 5px;font-size:12px;min-height:75px}.product-led .workflow-demo .wf-step-number{margin:0;width:22px;height:22px;font-size:8px}.product-led .workflow-demo .wf-tab-arrow{display:none}.product-led .workflow-demo .wf-explanation h3{font-size:29px}.product-led .workflow-demo .wf-stage{padding-top:24px}.product-led .workflow-demo .wf-explanation>p:not(.wf-kicker):not(.wf-fine):not(.wf-sr-only){font-size:12px}.product-led .workflow-demo .wf-disclosure{font-size:8px}.product-led .workflow-demo .wf-report-stack{padding:17px 13px}.product-led .workflow-demo .wf-report-page{padding:20px;min-height:470px}.product-led .workflow-demo .wf-report-page h3{font-size:31px}.product-led .workflow-demo .wf-bom{margin:18px 15px 0;font-size:9px}.product-led .workflow-demo .wf-bom small{display:block;margin:3px 0 0;font-size:8px}.product-led .workflow-demo .wf-report-facts>div{font-size:9px}.product-led .workflow-demo .wf-chart-labels{font-size:15px}.product-led .workflow-demo .wf-fine{font-size:9px}}
@media(prefers-reduced-motion:reduce){.product-led .workflow-demo *{animation:none!important;transition:none!important}}
