/* A post's scene "1800 companies" (.scSort, R77): dots like the homepage's gear and the Automation page, copper #ff6528 / amber #ffb547, Space Grotesk for headings and digits,
   IBM Plex Sans for text, mono only for letters. Without JS the four steps simply stand one under another (no canvas, no numbers). */
/* as on the Automation page: clip instead of hidden, so the pinned scene works on a phone */
main.iclHeroV3Main:has(.scSort){overflow:clip}
.iclspShell:has(.scSort){--iclsp-accent:#ff6528;--iclsp-accent-inv:#009ad7;--iclsp-accent-rgb:255,101,40}
.scSort{--sc-acc:#ff6528;--sc-acc-rgb:255,101,40;--sc-amb:#ffb547;--sc-text:#f4f7f8;--sc-muted:#a7b0b5;--sc-top:calc(var(--pk-top,80px) + var(--pk-bar,47px));position:relative;isolation:isolate}
.scWrap{width:min(1240px,calc(100% - 200px));margin:0 auto;display:grid;grid-template-columns:minmax(300px,.36fr) 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.scTxt{position:relative;display:grid;gap:28px;align-content:center}
.scEy{display:flex;align-items:center;gap:14px;color:var(--sc-acc);font:600 11px/1 var(--iclpv-fontMono);letter-spacing:.2em;text-transform:uppercase}
.scEy::after{content:"";width:64px;height:1px;background:linear-gradient(90deg,var(--sc-acc),transparent)}
.scActs{display:grid;gap:24px}
.scN{display:block;margin-bottom:14px;color:var(--sc-acc);font:700 13px/1 var(--iclpv-fontDisplay);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.scN i{font-style:normal;color:#5d666b}
.scAct h3{margin:0 0 14px;color:var(--sc-text);font:600 clamp(30px,2.7vw,42px)/1.06 var(--iclpv-fontDisplay);letter-spacing:-.035em;text-wrap:balance}
.scAct p{margin:0;max-width:400px;color:#c3cacf;font:400 clamp(15px,1.15vw,17px)/1.6 var(--iclpv-fontBody)}
.scTag{color:#8f989a;font:500 11px/1 var(--iclpv-fontBody);letter-spacing:.04em}
.scStats,.scDots,.scViz canvas{display:none}

/* with JS: pinned to the screen, steered by scrolling */
.scJs.scSort{height:460vh}
.scJs .scStage{position:sticky;top:var(--sc-top);height:calc(100vh - 127px);min-height:520px;display:flex;align-items:center;overflow:hidden}
.scJs .scStage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(60% 55% at 68% 50%,rgba(var(--sc-acc-rgb),.09),transparent 70%),radial-gradient(40% 40% at 12% 20%,rgba(0,242,255,.025),transparent 70%)}
.scJs .scWrap{flex:1 1 auto;min-width:0;height:100%}
.scJs .scActs{gap:0}
.scJs .scAct{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.scJs .scAct.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s ease .24s,transform .6s cubic-bezier(.2,.7,.2,1) .24s}
.scJs .scStats{display:flex;gap:clamp(20px,3vw,40px);padding-top:22px;border-top:1px solid rgba(255,255,255,.07)}
.scStats div{display:grid;gap:6px}
.scStats b{color:var(--sc-text);font:600 clamp(26px,2.3vw,34px)/1 var(--iclpv-fontDisplay);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.scStats div:first-child b{color:var(--sc-acc)}
.scStats div:last-child b{color:var(--sc-amb)}
.scStats span{color:var(--sc-muted);font:400 13px/1.3 var(--iclpv-fontBody)}
.scJs .scDots{display:flex;gap:8px}
.scDots i{width:22px;height:2px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .5s,width .5s}
.scDots i.on{width:40px;background:var(--sc-acc);box-shadow:0 0 10px rgba(var(--sc-acc-rgb),.6)}
.scJs .scViz{position:relative;height:min(78%,640px);min-height:380px}
.scJs .scViz canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.scJs .scTag{position:absolute;top:0;right:0}
@media (max-width:860px){
  .scWrap{grid-template-columns:1fr;width:auto;margin:0 16px 0 52px}
  .scJs.scSort{height:520vh}
  .scJs .scStage{min-height:0}
  .scJs .scWrap{grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:12px;padding-block:18px 14px}
  .scTxt{gap:14px;align-content:start}
  .scEy{font-size:10px}
  .scAct h3{font-size:clamp(25px,7vw,30px);margin-bottom:8px}
  .scAct p{font-size:14.5px;line-height:1.5}
  .scJs .scStats{padding-top:12px;gap:24px}
  .scStats b{font-size:24px}
  .scJs .scDots{display:none}
  .scJs .scViz{height:auto;min-height:0}
}
@media (prefers-reduced-motion:reduce){.scJs .scAct{transition:none}}
/* the end of the scene: less emptiness before the button (the bottom of the scene is empty) */
@media (min-width:861px){
  .pkWide:has(.scJs){margin-bottom:-14vh}
  .iclPk .scWrap{width:100%;box-sizing:border-box;margin:0;padding-left:var(--pk-ax,24px);padding-right:var(--pk-axr,24px)}
}
.pkWide:has(.scSort)+.iclspSection{position:relative;z-index:2}