/* A progressive enhancement: readable, compact stages without JavaScript. */
.process-story{--story-progress:0;--story-flow:0;--story-rules:0;--story-output:0;--story-loop:1;--story-source:1;--story-hub-opacity:0;--story-top:116px;--story-panel-height:460px;padding-block:72px}
.process-story>.section-heading{margin-bottom:30px}
.process-story .section-index{margin-bottom:12px}
.process-story .section-heading h2{font-size:40px}
.process-story .section-heading>p{font-size:15px}
.story-layout{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"stages visual";gap:58px;align-items:start}
.story-visual-wrap{grid-area:visual;min-width:0}
.story-visual{position:relative;border:1px solid #d8dece;border-radius:20px;background:#eeefe5;box-shadow:0 24px 65px #233f3109;overflow:hidden}
.story-visual-heading{display:flex;align-items:center;justify-content:space-between;padding:22px 25px 4px;font-size:12px;color:#55704e}
.story-visual-heading>span:first-child{display:flex;align-items:center;gap:8px}
.story-visual-heading i{width:6px;height:6px;border-radius:50%;background:#7a9467}
.story-counter{font-family:Arial,sans-serif;direction:ltr;font-size:11px;color:#809072;letter-spacing:1px}
.story-counter b{font-size:17px;color:#365841}
.story-canvas{padding:6px 7px 0}
.story-diagram{display:block;width:100%;height:auto;overflow:visible}
.story-diagram text{font-family:var(--font);font-size:13px;text-anchor:middle;font-weight:500;fill:#36543b;direction:rtl;unicode-bidi:plaintext}
.story-diagram .story-hub text{fill:#fffef9;font-size:16px}
.story-input-card{opacity:var(--story-source);transform-box:view-box}
.story-input-card rect{fill:#fffef9;stroke:#cfd9c2;stroke-width:1.2}
.story-input-card:nth-of-type(3) rect{stroke:#e2d4c2}
.story-svg-icon{fill:none;stroke:#718863;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.story-hub .story-svg-icon{stroke:#dbe6d2}
.story-paper-lines{fill:none;stroke:#d9dfce;stroke-width:2;stroke-linecap:round}
.story-loop{opacity:var(--story-loop)}
.story-connectors{opacity:var(--story-hub-opacity)}
.story-connectors path{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--story-flow))}
.story-hub{opacity:var(--story-hub-opacity);transform-origin:280px 180px;transform:scale(calc(.8 + var(--story-flow)*.2))}
.story-rules{opacity:var(--story-rules);transform:translateY(calc((1 - var(--story-rules))*14px))}
.story-rules rect{fill:#e5eddb;stroke:#cbd9bd}
.story-rules text{font-size:12px}
.story-output{opacity:var(--story-output);transform:translateY(calc((1 - var(--story-output))*16px))}
.story-output .story-result-title{text-anchor:start;fill:#fffef9;font-size:17px}
.story-result-row text{text-anchor:start;font-size:15px}
.story-output .story-result-note{font-size:11px;fill:#7b8d6c}
.story-visual-caption{padding:0 25px 18px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.story-visual-caption strong{font-size:16px;color:#35553c;font-weight:500}
.story-visual-caption>span{font-size:10px;color:#738267}
.story-jumps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:0;padding:0 15px 17px;font-size:11px}
.story-jumps a{display:flex;justify-content:center;align-items:center;gap:5px;min-height:38px;border:1px solid transparent;border-radius:6px;color:#6a795e;transition:background .2s,color .2s}
.story-jumps a>span{font:10px Arial,sans-serif;color:#9bab8d}
.story-jumps a:hover{background:#f7f8f0;color:#183e34}
.story-jumps a[aria-current="step"]{background:#fffef9;border-color:#d4dfc8;color:#294e35}
.story-jumps a[aria-current="step"]>span{color:#597748}
.story-progress{position:absolute;bottom:0;height:3px;inset-inline:0;background:#e3e7d9;overflow:hidden}
.story-progress i{display:block;width:100%;height:100%;background:#8da874;transform:scaleX(var(--story-progress));transform-origin:right}
.story-stages{grid-area:stages;list-style:none;padding:0;margin:0;min-width:0}
.story-stage{padding-block:20px;border-top:1px solid #dfe5d7;scroll-margin-top:128px}
.story-stage:first-child{padding-top:0;border-top:0}
.story-step-copy{display:grid;grid-template-columns:35px minmax(0,1fr);column-gap:16px;max-width:450px}
.story-step-label{grid-row:span 2;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:#798a6b;padding-top:2px}
.story-step-label b{font:11px Arial,sans-serif;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #d4ddc9;border-radius:50%;color:#738b61}
.story-step-label .icon{width:19px;height:19px}
.story-step-copy h3{font-size:27px;color:#294c3a;margin-bottom:8px;line-height:1.4}
.story-step-copy>p{font-size:15px;line-height:1.8;color:#687561}
.story-enhanced .story-layout{align-items:stretch}
.story-enhanced .story-visual-wrap{position:sticky;top:var(--story-top);align-self:start}
.story-enhanced .story-stage{min-height:135px;padding-block:21px;position:relative;scroll-margin-top:var(--story-anchor-offset,128px)}
.story-enhanced .story-stage:first-child{padding-top:0;min-height:113px}
.story-enhanced .story-stage.is-current .story-step-label b{background:#183e34;border-color:#183e34;color:#f8f8ee}
.story-enhanced .story-stage.is-current .story-step-label .icon{color:#b78054}
@media(max-width:1100px){.story-layout{gap:34px}.story-step-copy h3{font-size:24px}.story-step-copy>p{font-size:14px}.story-visual-heading{padding-inline:20px}.story-visual-caption{padding-inline:20px;gap:7px}.story-visual-caption strong{font-size:14px}.story-visual-caption>span{font-size:9px}.story-jumps{font-size:10px;padding-inline:8px}.story-jumps a{gap:4px}}
@media(max-width:850px){
  .process-story{--story-top:103px}
  .process-story{padding-block:54px}
  .process-story .section-heading h2{font-size:34px}
  .process-story .section-heading>p{font-size:14px}
  .story-layout{grid-template-columns:1fr;grid-template-areas:"visual" "stages";gap:22px}
  .story-visual-wrap{width:100%;max-width:600px;margin-inline:auto;z-index:5}
  .story-visual{border-radius:13px;box-shadow:0 12px 30px #213c3410}
  .story-visual-heading{padding:12px 18px 0;font-size:11px}
  .story-counter{font-size:9px}.story-counter b{font-size:14px}
  .story-canvas{height:clamp(140px,20svh,166px);padding:0 8px}.story-diagram{width:100%;height:100%}
  .story-diagram .story-input-card text{font-size:17px}
  .story-diagram .story-hub text{font-size:18px}
  .story-result-row text{font-size:18px}
  .story-output .story-result-title{font-size:20px}
  .story-visual-caption{padding:0 18px 5px}.story-visual-caption strong{font-size:12px}.story-visual-caption>span{font-size:9px}
  .story-jumps{padding:0 9px 7px;font-size:11px}.story-jumps a{min-height:30px}
  .story-stages{display:block}
  .story-stage{padding-block:17px;border-top:1px solid #dfe5d7;scroll-margin-top:105px}
  .story-stage:first-child{padding-top:0}
  .story-step-copy{max-width:600px;grid-template-columns:32px minmax(0,1fr);column-gap:14px}
  .story-step-copy h3{font-size:24px;margin-bottom:7px}.story-step-copy>p{font-size:15px}
  .story-enhanced .story-layout{display:block}
  .story-enhanced .story-stages{display:block;margin-top:22px}
  .story-enhanced .story-stage{min-height:0;padding-block:17px;scroll-margin-top:var(--story-anchor-offset,calc(var(--story-panel-height) + 24px))}
  .story-enhanced .story-stage:first-child{padding-top:0;min-height:0}
}
@media(max-width:650px){.process-story{--story-top:85px;padding-block:46px}.process-story>.section-heading{margin-bottom:23px}.process-story .section-heading h2{font-size:32px}.process-story .section-heading>p{margin-top:12px;font-size:14px}.story-layout{gap:22px}.story-step-copy h3{font-size:22px}.story-step-copy>p{font-size:14px;line-height:1.75}.story-step-label{font-size:11px;gap:8px}.story-step-label b{width:28px;height:28px}.story-step-label .icon{width:17px;height:17px}.story-visual-caption>span{font-size:8px}.story-jumps{font-size:10px}.story-jumps a>span{font-size:9px}}
@media(prefers-reduced-motion:reduce){
  .process-story .story-visual-wrap{position:static!important}
  .process-story .story-stage{min-height:0!important}
  .process-story .story-step-copy{opacity:1!important;transition:none!important}
  .story-jumps a{transition:none!important}
}
