/* v5: story cards that replay the actual work, once, then rest */
.pane svg{max-height:380px}
@keyframes fadeup{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes fadeout{to{opacity:0}}
.pane .cap2{font-family:var(--serif);font-style:italic;font-size:15px;fill:#4a5262;text-anchor:middle}
.pane .lg text{font-size:11.5px;fill:#4a5262}

/* 1. screen many, choose few, in order */
.pane .c1-map{fill:#b3bac6;opacity:0}
.pane.on .c1-map{animation:fadein .9s ease .05s forwards}
.pane .c1-x{fill:#b9985c;opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c1-x{animation:c1in .45s ease var(--a) forwards,c1out .6s ease var(--d) forwards}
@keyframes c1in{from{opacity:0;transform:scale(.3)}to{opacity:.85;transform:none}}
@keyframes c1out{to{opacity:.35;fill:#9aa3b2;transform:scale(.55)}}
.pane .c1-dot{fill:#b9985c;opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c1-dot{animation:c1in .45s ease var(--a) forwards,c1keep .6s var(--ease) var(--d) forwards}
@keyframes c1keep{to{opacity:1;fill:#8c6d33;transform:scale(1.45)}}
.pane .c1-ring{fill:none;stroke:#8c6d33;stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c1-ring{animation:c1ring .7s var(--ease) var(--d) forwards}
@keyframes c1ring{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:none}}
.pane text.c1-num{font-family:var(--serif);font-size:15px;fill:#0e1a2c;text-anchor:middle;opacity:0}
.pane.on text.c1-num{animation:fadeup .5s ease var(--n) forwards}
.pane .c1-seq{fill:none;stroke:#8c6d33;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1}
.pane.on .c1-seq{animation:draw 1.4s var(--ease) 4.4s forwards}
.pane .c1-sweep{opacity:0}
.pane.on .c1-sweep{animation:sweep 1.9s cubic-bezier(.45,0,.55,1) 1.7s forwards}
@keyframes sweep{0%{opacity:0;transform:translateX(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateX(420px)}}
.pane .c1-sweep path{stroke:#8c6d33;stroke-width:1.5;filter:drop-shadow(0 0 6px rgba(140,109,51,.7))}
.pane .c1-sweep text{font-size:10px;letter-spacing:.14em;text-transform:uppercase;fill:#8c6d33}
.pane .lg-x{fill:#9aa3b2;opacity:.6}.pane .lg-k{fill:#8c6d33}

/* 2. map the shelf, find the gap */
.pane .c2-cell{fill:rgba(140,109,51,0);stroke:#e1e4ea;stroke-width:1}
.pane.on .c2-cell{animation:c2flash .55s ease var(--d) 1}
@keyframes c2flash{40%{fill:rgba(140,109,51,.14)}100%{fill:rgba(140,109,51,0)}}
.pane.on .c2-cell.sel{animation:c2sel .8s ease var(--d) forwards}
@keyframes c2sel{to{fill:rgba(140,109,51,.15);stroke:#8c6d33}}
.pane .c2-ax{stroke:#9aa3b2;fill:none}
.pane text.c2-axl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:#4a5262}
.pane .c2-c{fill:#b8bfcb;opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c2-c{animation:c2drop .55s var(--ease) var(--d) forwards}
@keyframes c2drop{from{opacity:0;transform:translateY(-22px)}to{opacity:1;transform:none}}
.pane text.c2-open{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:#8c6d33;opacity:0}
.pane.on text.c2-open{animation:fadein .6s ease 3.2s forwards}
.pane .c2-prod{opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c2-prod{animation:c2place .8s cubic-bezier(.3,1.4,.5,1) 3.5s forwards}
@keyframes c2place{from{opacity:0;transform:translateY(-26px) scale(.6)}to{opacity:1;transform:none}}
.pane .c2-you{fill:#8c6d33}
.pane .c2-ping{fill:none;stroke:#8c6d33;opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c2-ping{animation:ripple 1.6s ease-out 4.2s 2}
.pane text.c2-lab{font-family:var(--serif);font-size:15px;fill:#0e1a2c;opacity:0}
.pane.on text.c2-lab{animation:fadein .6s ease 4s forwards}

/* 3. benchmark every market, price each one */
.pane text.c3-top{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:#4a5262}
.pane text.c3-row{font-size:11px;letter-spacing:.12em;text-transform:uppercase;fill:#1b2433}
.pane .c3-axis{stroke:#e1e4ea;fill:none}
.pane .c3-t{stroke:#8f98a8;stroke-width:2;stroke-linecap:round;opacity:0}
.pane.on .c3-t{animation:c3t .45s var(--ease) var(--d) forwards}
@keyframes c3t{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.pane .c3-br{fill:none;stroke:#9aa3b2;stroke-dasharray:1;stroke-dashoffset:1}
.pane.on .c3-br{animation:draw .6s ease var(--d) forwards}
.pane .c3-mk path{fill:#8c6d33;stroke:#fbf9f4;stroke-width:2}
.pane .c3-mk{opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c3-mk{animation:c3snap .6s cubic-bezier(.3,1.5,.5,1) var(--d) forwards}
@keyframes c3snap{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:none}}
.pane .lg-t{stroke:#8f98a8;stroke-width:2}.pane .lg-mk{fill:#8c6d33}

/* 4. the loop that keeps turning, in every market */
.pane .c4-orbit{fill:none;stroke:#d3d7df;stroke-width:1.5}
.pane .c4-reo{fill:none;stroke:none}
.pane text.c4-reot{font-family:var(--serif);font-style:italic;font-size:12.5px;fill:#8c6d33}
.pane .c4-n{fill:#fff;stroke:#0e1a2c;stroke-width:1.5;transform-box:fill-box;transform-origin:center}
.pane.on .c4-n{animation:c4n 3s ease-in-out var(--d) infinite}
@keyframes c4n{0%,100%{fill:#fff;transform:none}6%{fill:#8c6d33;transform:scale(1.25)}24%{fill:#fff;transform:none}}
.pane .c4-p{fill:#8c6d33}
.pane text.c4-b{font-family:var(--serif);font-size:15px;fill:#0e1a2c}
.pane text.c4-l{font-size:12.5px;fill:#1b2433}
.pane text.c4-s{font-family:var(--serif);font-size:24px;fill:#8c6d33}
.pane text.c4-c{font-size:11px;fill:#4a5262}
.pane text.c4-run{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;fill:#4a5262}
.pane .c4-chip rect{fill:#fff;stroke:#c9cfd9}
.pane .c4-chip text{font-size:11px;fill:#4a5262}
.pane.on .c4-chip rect{animation:chip 9s ease var(--d) infinite}
.pane.on .c4-chip text{animation:chipt 9s ease var(--d) infinite}
@keyframes chip{0%,30%{fill:#0e1a2c;stroke:#0e1a2c}34%,100%{fill:#fff;stroke:#c9cfd9}}
@keyframes chipt{0%,30%{fill:#fff}34%,100%{fill:#4a5262}}

/* 5. the product file, cleared line by line */
.pane .c5-doc{fill:#fff;stroke:#c9cfd9;filter:drop-shadow(0 10px 22px rgba(14,26,44,.10))}
.pane .c5-fold{fill:#f1f2f5;stroke:#c9cfd9}
.pane text.c5-h{font-family:var(--serif);font-size:18px;fill:#0e1a2c}
.pane text.c5-s{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;fill:#4a5262}
.pane .c5-rule{stroke:#e1e4ea}
.pane text.c5-l{font-size:13px;fill:#1b2433}
.pane .c5-ph{stroke:#e6e9ee;stroke-width:4;stroke-linecap:round}
.pane .c5-pend rect{fill:none;stroke:#c3c9d3}.pane .c5-pend text{font-size:11px;fill:#6b7482}
.pane .c5-done rect{fill:#8c6d33}.pane .c5-done text{font-size:11px;fill:#fff;font-weight:500}
.pane .c5-done{opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c5-done{animation:c5done .5s cubic-bezier(.3,1.5,.5,1) var(--d) forwards}
.pane.on .c5-pend{animation:fadeout .3s ease var(--d) forwards}
@keyframes c5done{from{opacity:0;transform:scale(1.5)}to{opacity:1;transform:none}}
.pane .c5-stamp{opacity:0;transform-box:fill-box;transform-origin:center}
.pane .c5-stamp rect{fill:rgba(251,249,244,.94);stroke:#8c6d33;stroke-width:2}
.pane .c5-stamp rect.in{fill:none;stroke-width:1}
.pane .c5-stamp text{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;fill:#8c6d33;font-weight:600}
.pane.on .c5-stamp{animation:stamp .55s cubic-bezier(.2,1.4,.4,1) 4s forwards}
@keyframes stamp{from{opacity:0;transform:scale(1.8)}to{opacity:1;transform:none}}

/* 6. long list to the partner we approach */
.pane text.c6-h1,.pane text.c6-h2{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:#4a5262}
.pane text.c6-h2{opacity:0;fill:#8c6d33}
.pane.on text.c6-h1{animation:fadeout .4s ease 1.6s forwards}
.pane.on text.c6-h2{animation:fadein .4s ease 1.9s forwards}
.pane .c6-card rect{fill:#fff;stroke:#c9cfd9}
.pane .c6-card circle{fill:#e3e6ec}
.pane .c6-card path{stroke:#e3e6ec;stroke-width:4;stroke-linecap:round}
.pane .c6-card{opacity:0}
.pane.on .c6-card{animation:fadeup .4s ease var(--a) forwards}
.pane.on .c6-card.out{animation:fadeup .4s ease var(--a) forwards,c6out .5s ease var(--o) forwards}
@keyframes c6out{to{opacity:.22}}
.pane.on .c6-card.sl rect{animation:c6sl .5s ease 2.2s forwards}
.pane.on .c6-card.ch rect{animation:c6ch .5s ease 2.6s forwards}
@keyframes c6sl{to{stroke:#8c6d33;stroke-width:1.5}}
@keyframes c6ch{to{stroke:#8c6d33;stroke-width:2;fill:rgba(185,152,92,.16)}}
.pane .c6-link{fill:none;stroke:#8c6d33;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1}
.pane.on .c6-link{animation:draw .6s ease 2.8s forwards}
.pane .c6-panel{opacity:0}
.pane.on .c6-panel{animation:fadeup .6s ease 2.9s forwards}
.pane .c6-pn{fill:#fff;stroke:#c9cfd9;filter:drop-shadow(0 10px 22px rgba(14,26,44,.08))}
.pane text.c6-t{font-family:var(--serif);font-size:17px;fill:#0e1a2c}
.pane text.c6-s{font-size:11px;fill:#4a5262}
.pane .c6-rule{stroke:#e1e4ea}
.pane text.c6-l{font-size:12px;fill:#1b2433}
.pane .c6-tr{fill:#e6e9ee}
.pane .c6-b{fill:#8c6d33;transform-box:fill-box;transform-origin:left;transform:scaleX(0)}
.pane.on .c6-b{animation:bandin .8s var(--ease) var(--d) forwards}
.pane .c6-badge{opacity:0;transform-box:fill-box;transform-origin:center}
.pane.on .c6-badge{animation:c5done .5s cubic-bezier(.3,1.5,.5,1) 4.1s forwards}
.pane .c6-badge rect{fill:#0e1a2c}
.pane .c6-badge text{font-size:11.5px;fill:#fff;letter-spacing:.04em}

@media (max-width:640px){ .panel{padding:18px 8px 14px} .pbar,.seg,.phead,.tip,.story-hint{margin-left:6px;margin-right:6px} }
@media (prefers-reduced-motion:reduce){
  .pane.on *{animation-delay:0s!important;animation-duration:.01s!important;animation-iteration-count:1!important}
}