/* One reading path: short headline, concrete operation, business gain. */
.inline-process{max-width:1080px;margin-top:25px}
.inline-process .story-route{gap:10px;margin:0 0 35px;display:flex}
.inline-process .story-route:before,.inline-process .story-route button:before{display:none}
.inline-process .story-route button{line-height:1.3;padding:13px 8px;border-bottom:2px solid #e3e7ef;flex:1;font-size:0;border-radius:0;transition:border-color .3s,background .3s}
.inline-process .story-route button span{font-size:13px;margin:0;line-height:1.4}
.inline-process .story-route button[aria-pressed=true]{border-color:#7d62bc;background:linear-gradient(0deg,#f2eef9,transparent)}
.inline-process .story-route button.complete{border-color:#81b9a6}
.inline-process .step-theater{display:flex;flex-direction:column;gap:22px;min-height:0}
.inline-process .step-copy{display:contents}
.inline-process .story-heading{order:0;text-align:center;width:100%;margin:0}
.inline-process .story-heading h2{font-size:clamp(28px,3vw,38px)!important;max-width:800px;margin:0 auto!important}
.inline-process #story-step,.inline-process #story-description,.inline-process .story-takeaway,.inline-process #story-status{display:none}
.inline-process .step-scene{order:1;width:100%;background:none}
.inline-process .step-gain{order:2;border:0;padding:12px 24px;margin:5px 0 10px;max-width:none;border-radius:35px;background:linear-gradient(100deg,#e4f4eb,#f2faf5);text-align:center}
.inline-process .step-gain>span{display:none}
.inline-process .step-gain strong{font-size:20px;color:#187a56;max-width:none;font-weight:500}
.inline-process .step-gain strong:before{content:"✓ ";font-weight:700}
.inline-process .story-controls{justify-content:center;padding:10px 0}
.inline-process .illustration-label{margin:14px 0;color:#8693a5}
.real-scene{display:flex;align-items:center;justify-content:center;gap:28px;min-height:310px;padding:30px 20px;background:radial-gradient(ellipse,#f2f6fc,transparent 70%);font-family:inherit}
.real-scene small{font-size:10px;letter-spacing:.1em;color:#8c7aa2;display:block}
.real-scene strong{display:block;color:#355b80;font-size:27px;font-weight:500;line-height:1.25;margin:18px 0}
.real-scene span{font-size:15px;color:#72859a}
.order-sheet{width:205px;padding:25px;background:#fff;border:1px solid #dae3ed;border-radius:8px;box-shadow:8px 10px 0 #eaf0f7;transform:rotate(-3deg)}
.scene-arrow{font-size:28px;color:#aa8ec9}
.operation-chain{min-width:200px;text-align:center}
.operation-chain div{padding:10px 25px;border-left:3px solid #b29bd1;background:#f5f4fb}
.operation-chain b{color:#46658b;font-size:18px;font-weight:500}
.operation-chain small{font-size:12px;letter-spacing:0;color:#7e90a5;margin-top:5px}
.operation-chain i{font-style:normal;color:#b39acd;display:block;margin:5px}
.scene-insight{max-width:200px;padding-left:15px}
.demo-badge{font-size:9px;letter-spacing:.08em;color:#8b75a5}
.scene-insight strong{font-size:24px}
.rule-engine,.draft-sheet,.check-column{padding:28px 32px;border:1px solid #d9e2ee;border-radius:10px;background:white;min-width:280px}
.rule-result{display:block;background:#edf5f2;padding:12px 18px;border-radius:6px;color:#258461}
.change-request{padding:20px;max-width:280px}
.scope-list{min-width:270px}.scope-list>div{display:flex;flex-direction:column;padding:14px 20px;border-bottom:1px solid #e1e7ef;gap:6px}.scope-list b{color:#477f72;font-weight:500}.scope-list .scope-later b{color:#8a8d9d}.scope-later{opacity:.65}
.draft-sheet code{display:block;font-size:16px;line-height:1.9;color:#486889;margin:20px 0}.draft-sheet em{font-style:normal;color:#9b69b2}
.review-tag{display:block;font-size:11px;color:#8f7b9f;margin-top:15px}
.check-column{width:320px;min-width:0}.check-column strong{font-size:25px}
.inline-process .scenario-controls{margin:0 auto 10px;gap:8px}
@media(max-width:760px){.inline-process .story-route{gap:4px;overflow-x:auto;justify-content:flex-start;margin-bottom:28px}.inline-process .story-route button{flex:0 0 100px;padding:10px 5px}.inline-process .story-route button span{font-size:12px}.real-scene{gap:15px;padding:20px 5px;min-height:290px;flex-wrap:wrap}.real-scene strong{font-size:22px}.order-sheet{width:160px;padding:17px}.operation-chain{min-width:150px}.operation-chain div{padding:8px 12px}.scene-insight{max-width:none;width:100%;text-align:center;padding:0}.scene-insight strong{margin:6px;font-size:19px}.scene-insight .demo-badge{display:none}.rule-engine,.draft-sheet{min-width:0;width:100%;max-width:310px;padding:20px}.rule-scene .order-sheet{display:none}.rule-scene .scene-arrow{display:none}.scope-scene,.build-scene,.check-scene{flex-direction:column}.change-request{text-align:center;padding:0}.change-request strong{margin:10px}.scope-list{width:100%;min-width:0;max-width:320px}.check-column{width:100%;max-width:320px;padding:18px}.check-column strong{margin:10px 0}.check-scene .scene-arrow,.scope-scene .scene-arrow,.build-scene .scene-arrow{display:none}.inline-process .step-gain strong{font-size:17px}.inline-process .step-gain{padding:12px 18px}.inline-process .story-controls{flex-direction:row}.inline-process .story-controls>div{justify-content:center}.inline-process .story-heading h2{font-size:28px!important}}
@media(prefers-reduced-motion:reduce){.inline-process .story-route button{transition:none}}
/* Benefits and demonstration share one scroll-driven story. */
.business-scroll-track{position:relative;height:430vh}
.business-scroll-track .inline-process{position:sticky;top:20px;margin-top:0;padding:20px 0 14px;background:#fff}
.business-scroll-track .story-content{overflow:visible;padding-top:0}
.business-scroll-track .story-route{margin-bottom:20px}
.business-case{display:flex;justify-content:center;align-items:center;gap:15px;margin:0 0 20px;color:#506987;font-size:13px}
.business-case>span:first-child{font-size:9px;letter-spacing:.1em;color:#8e76a7}
.business-case strong{font-size:15px;font-weight:500;color:#36577c}
.case-preserve{border-left:1px solid #dce4ee;padding-left:15px;color:#8393a5;font-size:12px}
.gain-audience{display:block;color:#427b65;font-size:9px;letter-spacing:.08em;margin-bottom:5px}
.business-scroll-track .real-scene{min-height:275px;padding:20px}
.business-scroll-track .step-theater{gap:15px}
.business-scroll-track .illustration-label{margin:7px 0}
.business-scroll-track .story-controls{padding:5px 0}
.business-scroll-track .story-heading h2{font-size:clamp(25px,2.5vw,34px)!important}
.order-sheet>span{display:block;font-size:12px;margin-top:7px}
@media(max-width:760px){.business-scroll-track{height:480vh}.business-scroll-track .inline-process{top:0;padding:12px 0}.business-case{gap:6px;flex-wrap:wrap;margin-bottom:10px}.case-preserve{border:0;padding:0;width:100%;text-align:center}.business-scroll-track .real-scene{padding:10px 0;min-height:235px}.business-scroll-track .story-route{margin-bottom:15px}.business-scroll-track .scene-insight{display:none}.business-scroll-track .step-theater{gap:10px}.business-scroll-track .story-heading h2{font-size:25px!important}.business-scroll-track .step-gain{margin:0;padding:9px 13px}.business-scroll-track .check-column{padding:12px 18px}}
@media(max-height:740px) and (min-width:761px){.business-scroll-track .real-scene{min-height:215px;padding:10px}.business-scroll-track .business-case{margin-bottom:10px}.business-scroll-track .operation-chain div{padding:5px 20px}.business-scroll-track .story-route{margin-bottom:12px}}
.clarity-inline{grid-column:1/-1;font-size:15px;color:#73849b;margin:5px 0 0}
.stock-visual{margin:15px 0}.stock-visual>span{font-size:12px;color:#607a94}
.stock-visual>div{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:270px;margin:9px 0}
.stock-visual i{height:15px;border-radius:3px;background:#5ea99a}
.stock-visual i.missing{background:#f0e7f6;border:1px dashed #b69bcb}
.stock-visual>small{letter-spacing:0;font-size:11px;color:#6c7f94}
.rule-engine{min-width:330px}.rule-engine strong{margin:12px 0;font-size:25px}
.build-flow{display:flex;flex-direction:column;gap:5px;margin:20px 0;text-align:center}
.build-flow span{font-size:17px;color:#547493}.build-flow i{font-style:normal;color:#af91c7}
.build-flow strong{font-size:18px;color:#6e5a9d;margin:8px 0}
@media(max-width:760px){.rule-scene .order-sheet{display:block;width:auto;box-shadow:none;transform:none;padding:10px 18px}.rule-scene .order-sheet small,.rule-scene .order-sheet>span{display:none}.rule-scene .order-sheet strong{font-size:18px;margin:0}.rule-engine{min-width:0;width:100%}.stock-visual{margin:10px 0}.business-scroll-track .rule-scene{gap:10px}.rule-engine strong{font-size:23px}}
/* Product process precedes the applied demo. */
.cobol-process{padding:85px 0 70px;text-align:center;scroll-margin-top:35px}
.cobol-process .section-intro{max-width:900px;margin:0 auto 35px}
.cobol-process .section-intro h2{font-size:clamp(32px,4vw,48px);line-height:1.12}
.cobol-process .section-intro p{font-size:17px;color:#73849b;margin:20px auto}
.process-input{margin:25px auto 40px;padding:20px 0;border-top:1px solid #e5e9f1;border-bottom:1px solid #e5e9f1;max-width:750px}
.process-input>span,.process-review>span{display:block;font-size:10px;letter-spacing:.12em;color:#8b74a5;margin-bottom:10px}
.process-input strong{font-size:21px;font-weight:500;color:#486b90}
.process-input i{font-style:normal;color:#bca7d2;padding:0 18px}
.process-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;text-align:left;margin:40px 0}
.process-number{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#f1edf8;color:#8767ad;font-size:13px;margin-bottom:20px}
.process-actions h3{font-size:26px;color:#315477;margin-bottom:16px}
.process-actions p{font-size:16px;line-height:1.6;color:#75869b;max-width:32ch;min-height:78px}
.process-actions article>strong{display:block;font-size:16px;font-weight:500;color:#277e61;padding-top:15px;border-top:1px solid #dfebe5}
.process-review{margin:35px 0 28px}.process-review p{font-size:16px;color:#677f98;margin:0}
#demo{scroll-margin-top:35px}
@media(max-width:760px){.cobol-process{padding:55px 0}.process-actions{grid-template-columns:1fr;gap:30px;max-width:420px;margin:30px auto}.process-actions p{min-height:0;max-width:none}.process-number{float:left;margin:0 15px 8px 0}.process-actions h3{padding-top:5px;font-size:23px}.process-actions p{clear:both;padding-top:8px}.process-input strong{font-size:16px}.process-input i{padding:0 5px}.process-review p{font-size:15px}}
/* Open illustrated process, using the shared Dicsys object system. */
.process-visual-route{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px;margin:28px auto 38px;text-align:left}
.process-visual-step{min-width:0}
.process-illustration{height:265px;max-width:360px;margin:0 auto 14px}
.process-illustration svg{display:block;width:100%;height:100%;overflow:visible}
.process-caption{font-size:10px;letter-spacing:.11em;color:#8874aa;display:block;margin-bottom:15px}
.process-visual-step h3{font-size:clamp(24px,2.3vw,30px);line-height:1.15;letter-spacing:-.03em;color:#25486e;margin:0 0 15px}
.process-visual-step p{font-size:16px;line-height:1.6;color:#75879e;margin-bottom:20px}
.process-visual-step>strong{display:inline-flex;align-items:center;gap:8px;color:#237e61;font-size:16px;font-weight:500}
.process-visual-step>strong:before{content:"✓";display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e8f5ee;font-size:12px}
.cobol-process .process-review{margin:25px 0}.cobol-process .process-review>span{display:none}
.process-visible .process-illustration{animation:process-arrive .75s both}
.process-visible article:nth-child(2) .process-illustration{animation-delay:.16s}
.process-visible article:nth-child(3) .process-illustration{animation-delay:.32s}
.process-visible .process-wire{stroke-dasharray:600;animation:process-connect 1.5s ease-out both}
@keyframes process-arrive{from{opacity:.25;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes process-connect{from{stroke-dashoffset:600}to{stroke-dashoffset:0}}
@media(max-width:760px){.process-visual-route{grid-template-columns:1fr;gap:40px;max-width:420px;text-align:center}.process-illustration{height:235px;margin-bottom:10px}.process-visual-step h3{font-size:27px}.process-visual-step p{font-size:16px;margin-bottom:12px}.process-caption{font-size:9px}.cobol-process .section-intro p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.process-visible .process-illustration,.process-visible .process-wire{animation:none}}