.v8 section{overflow-x:clip}
.anim{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.anim.in{opacity:1;transform:none}
/* SOP */
.sop .flow div{transition:border-color .4s,background .4s,color .4s}
.sop .flow div.on{border-color:var(--accent);background:#1c3024}
.sop .flow div.done small:after{content:" \2713";color:var(--accent)}
.sop .prog{height:2px;background:rgba(242,243,241,.08);margin:18px 0 0;position:relative;overflow:hidden;border-radius:3px}
.sop .prog b{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent);transition:width .6s ease}
.sop .chk li:before{transition:background .3s,border-color .3s}
.sop .chk li.d{color:var(--onDark)}
/* connections */
.conn{position:relative;aspect-ratio:16/11;background:#132019}
.conn svg{position:absolute;inset:0;width:100%;height:100%}
.conn line{stroke:rgba(230,233,230,.35);stroke-width:1.2;stroke-dasharray:4 6;animation:dash 3s linear infinite}
@keyframes dash{to{stroke-dashoffset:-40}}
.conn .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--accent);color:var(--ink);font-family:var(--serif);font-size:17px;padding:12px 18px;border-radius:6px;white-space:nowrap}
.conn .hub:after{content:"";position:absolute;inset:-10px;border:1px solid rgba(230,233,230,.35);border-radius:8px;animation:pulse 2.8s ease-out infinite}
@keyframes pulse{0%{opacity:.9;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}
.conn .node{position:absolute;transform:translate(-50%,-50%);background:#16261d;border:1px solid rgba(242,243,241,.16);border-radius:6px;padding:9px 12px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:rgba(242,243,241,.86);white-space:nowrap;min-width:118px;text-align:center}
.conn .node span{display:inline-block;transition:opacity .35s,transform .35s}
.conn .node span.out{opacity:0;transform:translateY(-6px)}
/* monitoring */
.mon .kpis b{font-variant-numeric:tabular-nums}
.spark path{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 2.2s ease .3s}
.in .spark path,.spark.in path{stroke-dashoffset:0}
.chip{display:inline-block;font-size:11px;font-weight:600;padding:3px 8px;border-radius:4px;margin-left:auto;flex:none}
.chip.ok{background:rgba(230,233,230,.16);color:var(--accent)}
.chip.wait{background:rgba(233,200,120,.14);color:#e8d9a8}
.chip.done{background:rgba(242,243,241,.08);color:rgba(242,243,241,.6)}
.mon .chk li:before{display:none}
.thread{margin-top:20px}
.msg{display:flex;gap:12px;padding:12px 0;border-top:1px solid rgba(242,243,241,.07);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.in .msg{opacity:1;transform:none}
.in .msg:nth-child(2){transition-delay:.9s}.in .msg:nth-child(3){transition-delay:1.8s}
.msg .av{width:28px;height:28px;border-radius:50%;background:#1f3a2b;color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.msg .who{font-size:12px;color:rgba(242,243,241,.55)}
.msg p{margin:2px 0 0;color:rgba(242,243,241,.86)!important;font-size:13px}
.stack2{display:grid;gap:16px}
/* docs */
.docs{position:relative;height:440px;max-width:760px;margin:0 auto}
.doc{position:absolute;left:50%;top:20px;width:250px;height:330px;margin-left:-125px;background:#f3f4f2;color:#16261d;border-radius:4px;padding:26px 22px;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);border:1px solid rgba(22,38,29,.12)}
.doc .k{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#16261d;font-weight:600}
.doc h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.2;margin:14px 0 0}
.doc .ln{height:5px;background:rgba(22,38,29,.1);border-radius:3px;margin:9px 0}
.doc .foot{position:absolute;left:22px;right:22px;bottom:20px;font-size:10px;color:#56605a;border-top:1px solid rgba(22,38,29,.14);padding-top:8px}
.doc:nth-child(1){transform:rotate(-2deg)}.doc:nth-child(2){transform:rotate(-1deg)}.doc:nth-child(3){transform:rotate(1deg)}.doc:nth-child(4){transform:rotate(2deg)}
.docs.in .doc:nth-child(1){transform:translateX(-250px) translateY(26px) rotate(-11deg)}
.docs.in .doc:nth-child(2){transform:translateX(-86px) translateY(4px) rotate(-4deg)}
.docs.in .doc:nth-child(3){transform:translateX(86px) translateY(4px) rotate(4deg)}
.docs.in .doc:nth-child(4){transform:translateX(250px) translateY(26px) rotate(11deg)}
.doc.dkc{background:#16261d;color:var(--onDark);border-color:rgba(242,243,241,.14)}.doc.dkc .k{color:var(--accent)}.doc.dkc .ln{background:rgba(242,243,241,.12)}.doc.dkc .foot{color:rgba(242,243,241,.55);border-color:rgba(242,243,241,.14)}
/* scale wave */
.scale{position:relative;overflow:hidden;padding:150px 0!important}
.scale .wave{position:absolute;inset:0;border:0;border-radius:0;background:transparent;pointer-events:none}
.scale .wave svg{position:absolute;left:0;top:50%;width:200%;height:420px;transform:translateY(-50%);animation:drift 26s linear infinite}
@keyframes drift{to{transform:translate(-50%,-50%)}}
.scale .wrap{position:relative;z-index:2}
.figs{display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:72px}
.figs .v{font-family:var(--serif);font-size:clamp(64px,7vw,104px);line-height:1;color:var(--onDark);font-variant-numeric:lining-nums tabular-nums}
.figs p{margin:16px 0 0;font-size:17px;max-width:16em}
@media (max-width:760px){
 .figs{grid-template-columns:1fr;gap:44px}
 .docs{height:380px}.doc{width:190px;height:255px;margin-left:-95px;padding:20px 16px}.doc h4{font-size:17px}
 .docs.in .doc:nth-child(1){transform:translateX(-96px) translateY(30px) rotate(-10deg)}
 .docs.in .doc:nth-child(2){transform:translateX(-34px) translateY(8px) rotate(-4deg)}
 .docs.in .doc:nth-child(3){transform:translateX(32px) translateY(8px) rotate(4deg)}
 .docs.in .doc:nth-child(4){transform:translateX(94px) translateY(30px) rotate(10deg)}
 .conn{aspect-ratio:4/5}.conn .node{min-width:0;font-size:11px;padding:7px 9px}
}
@media (prefers-reduced-motion:reduce){
 .anim,.msg,.doc,.spark path,.sop .prog b{transition:none!important}
 .anim{opacity:1;transform:none}.msg{opacity:1;transform:none}.spark path{stroke-dashoffset:0}
 .conn line,.conn .hub:after,.scale .wave svg{animation:none!important}
}

.viz{position:relative;box-shadow:0 50px 100px -40px rgba(0,0,0,.75),0 0 0 1px rgba(242,243,241,.04) inset;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.viz:hover{transform:translateY(-4px)}
.viz.glow:before{content:"";position:absolute;inset:-1px;border-radius:8px;pointer-events:none;background:radial-gradient(600px 220px at 30% -10%,rgba(242,243,241,.10),transparent 70%);z-index:0}
.viz .body,.viz .bar{position:relative;z-index:1}
.vstage{position:relative}
.vstage .float{position:absolute;z-index:3;width:230px;font-size:12px}
.vstage .float .body{padding:14px 16px}
.stg>*{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease;transition-delay:calc(var(--i,0)*90ms)}
.in .stg>*,.stg.in>*{opacity:1;transform:none}
.mbars rect{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.in .mbars rect{transform:scaleY(1)}
.mline{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.4s ease .5s}
.in .mline{stroke-dashoffset:0}
.mdot{opacity:0;transition:opacity .4s 2.8s}.in .mdot{opacity:1}
.mdot circle.p{animation:ring 2.4s ease-out 3s infinite;transform-box:fill-box;transform-origin:center}
@keyframes ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(3.2);opacity:0}}
.viz .redact{background:linear-gradient(90deg,rgba(242,243,241,.10),rgba(242,243,241,.22),rgba(242,243,241,.10));background-size:200% 100%;animation:shim 2.6s linear infinite}
@keyframes shim{to{background-position:-200% 0}}
.conn .node{display:flex;align-items:center;justify-content:center;gap:8px;min-width:150px;padding:10px 14px;transition:border-color .4s}
.conn .node span{display:inline-flex;align-items:center;gap:8px}
.conn .node img{width:16px;height:16px;filter:invert(1);opacity:.92}
.conn .node.hot{border-color:rgba(242,243,241,.55)}
.conn .pulse{fill:#fff}
.disc{font-size:12px;color:rgba(242,243,241,.5);margin-top:14px}
.grey .disc{color:#5a625d}
@media (max-width:760px){.vstage .float{display:none}.conn .node{min-width:0;padding:7px 9px}.conn .node img{width:13px;height:13px}}
@media (prefers-reduced-motion:reduce){.stg>*,.mbars rect,.mline,.mdot{transition:none!important;opacity:1;transform:none;stroke-dashoffset:0}.redact,.mdot circle.p{animation:none!important}.viz{transition:none}}

/* v14 sticky header */
.top,.top.over{position:sticky;top:0;z-index:60;background:rgba(11,18,14,.94);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid rgba(242,243,241,.10)}
.top.over{margin-bottom:-77px}
@media (max-width:760px){.top.over{margin-bottom:-65px}}
/* v14 integrations */
.conn .hub{background:#16261d;border:1px solid rgba(242,243,241,.35);padding:16px 18px;display:flex;align-items:center;justify-content:center}
.conn .hub img{width:52px;height:auto;display:block}
.conn .node{background:#f2f3f1;border-color:rgba(242,243,241,.4);color:#16261d}
.conn .node img{filter:none;opacity:1;width:auto;height:15px}
.conn .node .wm{font-weight:700;letter-spacing:-.01em}
@media (max-width:760px){.conn .node:nth-of-type(4){left:79%!important}.conn .node:nth-of-type(7){left:21%!important}.conn .node:nth-of-type(6){left:27%!important}.conn .node:nth-of-type(3),.conn .node:nth-of-type(5){left:73%!important}.conn .node:nth-of-type(2){left:27%!important}.conn .node{font-size:11px}.conn .hub img{width:38px}.conn .hub{padding:11px 12px}}
/* v14 draft components */
.kit .ph{padding:56px 0;border-top:1px solid rgba(22,38,29,.18)}
.kit .ph:first-of-type{margin-top:48px}
.kit .ph .pn{font-family:var(--serif);font-size:15px;color:#4a524d;letter-spacing:.02em}
.kit .ph h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;color:#16261d;margin:8px 0 12px}
.kit .ph .pi{color:#3d4540;font-size:18px;max-width:40em;margin:0 0 36px}
.kit .items{columns:2;column-gap:72px}
.kit .it{break-inside:avoid;margin:0 0 32px}
.kit .it h4{font-family:var(--serif);font-weight:400;font-size:22px;color:#16261d;margin:0 0 8px}
.kit .it h4 span{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.1em;color:#4a524d;margin-right:12px}
.kit .it p{color:#3d4540;font-size:16.5px;line-height:1.6;margin:0}
@media (max-width:760px){.kit .items{columns:1}.kit .ph{padding:40px 0}}

/* v16 job loop */
.jl{position:relative;aspect-ratio:16/11;background:#132019;overflow:hidden}
.jl svg{position:absolute;inset:0;width:100%;height:100%}
.jl svg.mob{display:none}
.jl .sp{stroke:rgba(230,233,230,.16);stroke-width:.35}
.jl .seg{fill:none;stroke:#e6e9e6;stroke-width:.55;stroke-linecap:round;stroke-dashoffset:var(--l);animation:jlseg 8.6s linear infinite}
.jl .tok{fill:#fff;animation:jltok 8.6s linear infinite}
.jl .hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#16261d;border:1px solid rgba(242,243,241,.35);border-radius:6px;padding:16px 18px;display:flex}
.jl .hub img{width:52px;height:auto;display:block}
.jl .nd{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);background:#f2f3f1;color:#16261d;border:1px solid rgba(242,243,241,.4);border-radius:6px;padding:9px 13px;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 0 0 0 rgba(242,243,241,0)}
.jl .nd span{display:inline-flex;align-items:center;gap:7px}
.jl .nd img{height:15px;width:auto;display:block}
.jl .nd .wm{font-weight:700;letter-spacing:-.01em}
.jl .st{position:absolute;left:50%;transform:translateX(-50%);font-style:normal;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:#f2f3f1;background:#1f3a2b;border:1px solid rgba(242,243,241,.35);border-radius:4px;padding:4px 8px;white-space:nowrap;opacity:0}
.jl .st.b{top:calc(100% + 8px)}.jl .st.t{bottom:calc(100% + 8px)}
.jl .st:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#7fd19b;margin-right:6px;vertical-align:1px}
@media (max-width:760px){.jl{aspect-ratio:4/5}.jl svg.dsk{display:none}.jl svg.mob{display:block}.jl .nd{left:var(--mx);top:var(--my);font-size:11px;padding:7px 9px}.jl .nd img{height:12px}.jl .nd span{gap:5px}.jl .hub{padding:11px 12px}.jl .hub img{width:38px}.jl .st{font-size:10.5px;padding:3px 7px}}
@keyframes jltok{0%{opacity:0}2%{opacity:1}95.35%{opacity:1}97.67%{opacity:0}100%{opacity:0}}
@keyframes jls0{0%,15.12%{stroke-dashoffset:var(--l)}22.09%,95.35%{stroke-dashoffset:0;opacity:1}98.84%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:var(--l);opacity:0}}.jl .seg0{animation-name:jls0}
@keyframes jls1{0%,33.72%{stroke-dashoffset:var(--l)}40.7%,95.35%{stroke-dashoffset:0;opacity:1}98.84%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:var(--l);opacity:0}}.jl .seg1{animation-name:jls1}
@keyframes jls2{0%,52.33%{stroke-dashoffset:var(--l)}59.3%,95.35%{stroke-dashoffset:0;opacity:1}98.84%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:var(--l);opacity:0}}.jl .seg2{animation-name:jls2}
@keyframes jls3{0%,70.93%{stroke-dashoffset:var(--l)}77.91%,95.35%{stroke-dashoffset:0;opacity:1}98.84%{stroke-dashoffset:0;opacity:0}100%{stroke-dashoffset:var(--l);opacity:0}}.jl .seg3{animation-name:jls3}
@keyframes jln0{0%,1.74%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}3.49%,15.12%{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}18.6%,100%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}}@keyframes jlt0{0%,2.91%{opacity:0}5.81%,15.12%{opacity:1}18.02%,100%{opacity:0}}.jl .a0{animation:jln0 8.6s ease infinite}.jl .a0 .st{animation:jlt0 8.6s ease infinite}
@keyframes jln1{0%,20.35%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}22.09%,33.72%{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}37.21%,100%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}}@keyframes jlt1{0%,21.51%{opacity:0}24.42%,33.72%{opacity:1}36.63%,100%{opacity:0}}.jl .a1{animation:jln1 8.6s ease infinite}.jl .a1 .st{animation:jlt1 8.6s ease infinite}
@keyframes jln2{0%,38.95%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}40.7%,52.33%{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}55.81%,100%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}}@keyframes jlt2{0%,40.12%{opacity:0}43.02%,52.33%{opacity:1}55.23%,100%{opacity:0}}.jl .a2{animation:jln2 8.6s ease infinite}.jl .a2 .st{animation:jlt2 8.6s ease infinite}
@keyframes jln3{0%,57.56%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}59.3%,70.93%{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}74.42%,100%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}}@keyframes jlt3{0%,58.72%{opacity:0}61.63%,70.93%{opacity:1}73.84%,100%{opacity:0}}.jl .a3{animation:jln3 8.6s ease infinite}.jl .a3 .st{animation:jlt3 8.6s ease infinite}
@keyframes jln4{0%,76.16%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}77.91%,95.35%{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}98.84%,100%{box-shadow:0 0 0 0 rgba(242,243,241,0);border-color:rgba(242,243,241,.4)}}@keyframes jlt4{0%,77.33%{opacity:0}80.23%,95.35%{opacity:1}98.26%,100%{opacity:0}}.jl .a4{animation:jln4 8.6s ease infinite}.jl .a4 .st{animation:jlt4 8.6s ease infinite}
@media (prefers-reduced-motion:reduce){.jl .seg{animation:none;stroke-dashoffset:0}.jl .tok{display:none}.jl .nd,.jl .st{animation:none!important}.jl .a4{box-shadow:0 0 0 4px rgba(242,243,241,.22);border-color:#fff}.jl .a4 .st{opacity:1}}