/* b4 · the zone builds: numbered list + plan pinned together; one step per ~70 % of a screen of scrolling */
#pogl-04 .b4-pin{position:relative;height:calc(var(--n) * 55vh + 100vh)}
#pogl-04 .b4-stage{position:sticky;top:78px;height:calc(100vh - 110px);display:grid;grid-template-columns:minmax(300px,.85fr) 1.4fr;gap:clamp(20px,3vw,48px);align-items:center;padding:0 clamp(16px,3vw,40px)}
#pogl-04 .b4-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
#pogl-04 .b4-list li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s}
#pogl-04 .b4-list li.in{opacity:.45;transform:none}
#pogl-04 .b4-list li.now{opacity:1}
#pogl-04 .b4-list .n{width:30px;height:30px;border-radius:50%;border:1px solid #1c1c1a;display:grid;place-items:center;font:600 13px/1 'Inter Tight',sans-serif}
#pogl-04 .b4-list li.now .n{background:var(--yellow)}
#pogl-04 .b4-list p{margin:3px 0 0;font:400 clamp(14px,1.05vw,17px)/1.4 'Inter Tight',sans-serif}
#pogl-04 .b4-fig{margin:0}
#pogl-04 .b4-count{font:600 13px 'Inter Tight',sans-serif}
@media (max-width:820px){
  #pogl-04 .b4-pin{height:calc(var(--n) * 48vh + 100vh)}
  #pogl-04 .b4-stage{top:64px;height:calc(100svh - 84px);grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:12px;padding:0 4px}
  #pogl-04 .b4-fig{order:-1}
  #pogl-04 .b4-list{position:relative;min-height:10em}
  #pogl-04 .b4-list li{position:absolute;inset:0 0 auto 0}
  #pogl-04 .b4-list li.in{opacity:0}
  #pogl-04 .b4-list li.now{opacity:1}
}