/* Hyper scroll scenes (Home "factory", Features "integrations"). Component scoped: every rule starts with .fy or .ig. */
.fy,.ig{position:relative;background:radial-gradient(circle at 50% 45%,#fcfaf5 0,var(--bg) 80%);border-block:1px solid var(--line)}
.fyRun{position:relative;height:var(--runH,520vh)}
.ig .fyRun{--runH:460vh}
.fySticky{position:sticky;top:var(--hdrH);height:calc(100vh - var(--hdrH));height:calc(100svh - var(--hdrH));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:12px 20px;overflow:hidden}

/* ----- Factory ----- */
.fyStage{position:relative;width:min(1120px,100%,calc((100vh - var(--hdrH) - 76px) * 1.96));width:min(1120px,100%,calc((100svh - var(--hdrH) - 76px) * 1.96));aspect-ratio:1100/560}
.fySvg{display:block;width:100%;height:100%;overflow:visible;user-select:none}
.fyAsset,.fyPuff{will-change:transform}
.fyOut{--r:0;position:absolute;left:77%;top:50%;width:min(34%,380px);display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;opacity:var(--r);transform:translate(calc(-50% + (1 - var(--r)) * -56px),-50%) scale(calc(.96 + .04 * var(--r)))}
.fyLogo{font-size:clamp(46px,6.4vw,92px);color:var(--ink)}
.fyLogo .logoDot{width:.15em;height:.15em;gap:0;margin-left:.02em}
.fyLine{margin:.9em 0 0;max-width:24ch;font-size:clamp(14px,1.35vw,18px);line-height:1.45;color:var(--mut2);font-weight:500}
.fyNote{margin:0;max-width:620px;text-align:center;font-size:12.5px;line-height:1.5;color:var(--mut2)}
.fy[data-layout=compact] .fyStage{aspect-ratio:auto;width:min(100%,560px)}
.fy[data-layout=compact] .fySvg{height:auto}
.fy[data-layout=compact] .fyOut{position:static;width:100%;margin-top:6px;transform:translateY(calc((1 - var(--r)) * 16px))}
.fy[data-layout=compact] .fyLogo{font-size:clamp(46px,16vw,68px)}

/* ----- Integrations ----- */
.igCanvas{position:relative;width:min(1080px,100%);background:#FDFBF7;border:1px solid #E5D7C3;border-radius:20px;padding:clamp(14px,2.2vw,34px) clamp(14px,3vw,48px) clamp(10px,1.4vw,20px);box-shadow:0 18px 45px rgba(31,33,36,.04);overflow:hidden}
.igCanvas::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#C5A880,transparent)}
.igHeader{text-align:center;margin-bottom:clamp(4px,1.2vh,18px)}
.igTitle{margin:0;font-size:clamp(20px,2.6vw,34px);font-weight:700;letter-spacing:-.025em;line-height:1.2;color:var(--ink)}
.igStage{position:relative;margin:0 auto;aspect-ratio:960/580;width:min(100%,calc((100vh - var(--hdrH) - 210px) * 1.655));width:min(100%,calc((100svh - var(--hdrH) - 210px) * 1.655))}
.igSvg{display:block;width:100%;height:100%;overflow:visible;max-width:none;filter:drop-shadow(0 14px 28px rgba(90,75,55,.06))}
.igSvg svg{max-width:none}
.igLabels{position:absolute;inset:0;pointer-events:none}
.igLabel{position:absolute;right:52.6%;width:34.4%;text-align:right;transform:translateY(-50%)}
.igHead{display:inline-flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-bottom:.2rem}
.igDot{width:6.5px;height:6.5px;border-radius:50%;border:1.5px solid #C4BAAC;background:transparent;display:inline-block;transition:all .35s ease}
.igLabel b{font:700 clamp(12px,1.75vw,18px)/1.2 Roboto,Arial,sans-serif;color:var(--ink);letter-spacing:-.015em}
.igJob{display:block;margin-left:auto;max-width:96%;font-size:clamp(10.5px,1.2vw,13.8px);line-height:1.42;color:#5F636A;transition:color .3s ease}
.igLabel.is-active .igDot{border-color:#E5B96B;background:#E5B96B;box-shadow:0 0 10px rgba(229,185,107,.85)}
.igLabel.is-active .igJob{color:#383A3F}
.igFooter{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:clamp(6px,1.2vh,16px);padding-top:10px;border-top:1px solid #ECE6DC;font-size:12px;color:#8C877E;letter-spacing:.02em}
.igStatus{display:flex;align-items:center;gap:.45rem;text-transform:uppercase;font-weight:600;letter-spacing:.05em}
.igLed{width:7px;height:7px;border-radius:50%;background:#B5ABA0;transition:background-color .4s ease,box-shadow .4s ease}
.igLed.is-live{background:#E5B96B;box-shadow:0 0 10px rgba(229,185,107,.85)}
.igHint{display:flex;align-items:center;gap:.65rem}
.igMeter{width:90px;height:4px;background:#ECE5DB;border-radius:2px;overflow:hidden}
.igMeterBar{width:0;height:100%;background:linear-gradient(90deg,#C5A880,#E5B96B);border-radius:2px}
@media (max-width:720px){
  .igJob{display:none}
  .igStage{width:min(100%,calc((100vh - var(--hdrH) - 190px) * 1.655));width:min(100%,calc((100svh - var(--hdrH) - 190px) * 1.655))}
  .igLabel b{font-size:clamp(11px,3.2vw,14px)}
  .igFooter{font-size:10.5px}
  .igMeter{width:56px}
}
.igList{list-style:none;margin:0;padding:0;display:grid;gap:10px;max-width:760px;font-size:15px;line-height:1.55;color:var(--mut2)}
.igList b{color:var(--ink)}
.js .igList{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ----- No JavaScript or reduced motion: no pinning, the finished state is shown ----- */
html:not(.js) .fyRun{height:auto}
html:not(.js) .fySticky{position:static;height:auto;padding:48px 20px}
html:not(.js) .fyOut{--r:1}
html:not(.js) .igSvg,html:not(.js) .igLabels,html:not(.js) .igFooter{display:none}
@media (prefers-reduced-motion:reduce){
  .fyRun,.ig .fyRun{height:auto}
  .fySticky{position:static;height:auto;padding:48px 20px}
  .fyAsset,.fyPuff{will-change:auto}
}
@media print{.fyRun{height:auto}.fySticky{position:static;height:auto}}