.workflow-launch .hero-builder{min-height:500px;width:360px}
.workflow-launch-copy>p:last-child{max-width:410px;font-size:20px;line-height:1.55}
.workflow-launch .builder-label{top:2px;left:50%;transform:translateX(-50%);white-space:nowrap}
.workflow-launch .builder-proof{bottom:7px;left:50%;transform:translateX(-50%);white-space:nowrap}
.workflow-launch .node-learning{bottom:-58px;padding:0 18px}
.workflow-launch .app-node{width:82px;height:82px}
.workflow-launch .node-form{top:54px;left:7px}.workflow-launch .node-whatsapp{top:10px;left:139px}.workflow-launch .node-gmail{top:54px;right:7px}.workflow-launch .node-calendar{bottom:55px;right:7px}.workflow-launch .node-webhook{bottom:10px;left:139px}.workflow-launch .node-sheet{bottom:55px;left:7px}
.workflow-launch .first-step{width:174px;height:174px}
.workflow-launch .first-step-plus{display:none}
.workflow-launch .picker-label{display:none}
.workflow-launch .hero-builder.is-open{width:min(680px,100%)}
.workflow-launch .hero-builder.is-open .node-picker{inset:auto;top:50%;left:50%;display:flex;width:100%;transform:translate(-50%,-50%);align-items:center;justify-content:center;gap:11px;pointer-events:auto}
.workflow-launch .hero-builder.is-open .node-picker:before{content:"";position:absolute;z-index:-1;left:7%;right:7%;top:50%;height:2px;background:linear-gradient(90deg,transparent,#35e879 12%,#a5ffbf 50%,#35e879 88%,transparent);box-shadow:0 0 15px rgba(53,232,121,.72)}
.workflow-launch .hero-builder.is-open .node-picker:after{content:"";position:absolute;z-index:-1;top:calc(50% - 5px);left:7%;width:10px;height:10px;border-radius:50%;background:#c9ffd8;box-shadow:0 0 16px 4px rgba(53,232,121,.9);animation:workflow-pulse 2.7s linear infinite}
.workflow-launch .hero-builder.is-open .app-node{position:relative;inset:auto!important;flex:0 0 82px;opacity:1;transform:scale(1);pointer-events:auto}
.workflow-launch .hero-builder.is-open .app-node:hover{transform:translateY(-6px) scale(1.04)!important}
.workflow-launch .hero-builder.is-open .first-step{opacity:0;transform:scale(.5);pointer-events:none}
.workflow-launch .node-learning span{display:block;margin-top:7px;color:#d7d3df}
.workflow-launch .hero-builder.is-open .builder-proof{opacity:0}
.workflow-launch .hero-builder.is-open .node-learning{top:calc(50% + 76px);bottom:auto;font-size:16px;line-height:1.45;letter-spacing:-.015em}
.workflow-launch .hero-builder.is-open .node-learning strong{color:#fff;font:600 16px/1.45 var(--sans);letter-spacing:-.015em}
.workflow-launch .flow-spark{display:none}.workflow-launch .hero-builder.is-open .app-node{animation:node-flow-highlight 3.4s ease-in-out infinite}.workflow-launch .hero-builder.is-open .node-webhook{animation-delay:.2s}.workflow-launch .hero-builder.is-open .node-calendar{animation-delay:.82s}.workflow-launch .hero-builder.is-open .node-form{animation-delay:1.44s}.workflow-launch .hero-builder.is-open .node-sheet{animation-delay:2.06s}.workflow-launch .hero-builder.is-open .node-gmail{animation-delay:2.68s}@keyframes workflow-pulse{0%{left:7%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:92%;opacity:0}}@keyframes node-flow-highlight{0%,68%,100%{border-color:rgba(255,255,255,.2);box-shadow:0 12px 22px rgba(8,5,32,.25);filter:none}10%,22%{border-color:#b7ffd0;box-shadow:0 0 0 4px rgba(53,232,121,.14),0 0 27px rgba(53,232,121,.68),0 15px 27px rgba(8,5,32,.35);filter:brightness(1.14)}}
@media (max-width:760px){.workflow-launch .hero-builder{width:min(100%,350px);min-height:485px}.workflow-launch-copy>p:last-child{font-size:18px}.workflow-launch .app-node{width:78px;height:78px}.workflow-launch .node-form{left:0}.workflow-launch .node-gmail{right:0}.workflow-launch .node-sheet{left:0}.workflow-launch .node-calendar{right:0}.workflow-launch .hero-builder.is-open{width:100%;overflow-x:auto}.workflow-launch .hero-builder.is-open .node-picker{width:max-content;left:18px;transform:translateY(-50%);justify-content:flex-start;padding:0 18px}.workflow-launch .hero-builder.is-open .node-picker:before{left:32px;right:32px}.workflow-launch .hero-builder.is-open .app-node{flex-basis:70px;width:70px;height:70px}.workflow-launch .node-learning{bottom:-62px}.workflow-launch{padding-bottom:125px!important}}

/* Keep the first workflow close to the hero without cramping its interaction. */
@media (min-width:761px){
  .workflow-launch{
    align-items:start;
    padding-top:clamp(52px,6vw,78px);
    padding-bottom:clamp(58px,7vw,88px);
  }

  .workflow-launch .hero-builder{min-height:410px;}
}

/* Give the first action the visual language of an n8n canvas. */
.workflow-launch .hero-builder{
  width:min(100%,460px);
  min-height:390px;
  place-items:center;
  border:1px solid rgba(172,157,255,.28);
  border-radius:22px;
  background-color:rgba(20,16,55,.34);
  background-image:radial-gradient(circle,rgba(218,211,255,.38) 1.15px,transparent 1.35px),radial-gradient(circle at 50% 45%,rgba(124,106,245,.24),transparent 48%);
  background-size:18px 18px,100% 100%;
  box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 56px rgba(4,3,24,.24);
}
.workflow-launch .builder-label{top:18px;}
.workflow-launch .builder-proof{bottom:18px;}
.workflow-launch .first-step{width:186px;height:186px;border-color:rgba(215,208,255,.72);border-radius:18px;background:transparent;box-shadow:none}
.workflow-launch .first-step-plus{display:block;color:#a89cff;font-size:64px;text-shadow:0 0 26px rgba(168,156,255,.55)}
.workflow-launch .first-step:hover{border-color:#c3b9ff;box-shadow:0 0 42px rgba(124,106,245,.34)}

/* Extend the canvas grid across the learning section without competing with the copy. */
.hero{border-bottom:0}.workflow-launch{border-top:0;background-image:linear-gradient(180deg,#151716 0,#1a1535 120px,#27203d 100%);background-size:100% 100%;}
.workflow-launch-copy{position:relative;z-index:1;text-shadow:0 2px 24px rgba(20,14,53,.55)}
.workflow-launch .title-reveal{display:inline-block;opacity:0;transform:translateY(30px);clip-path:inset(0 0 100% 0);transition:opacity .5s var(--reveal-delay) ease,transform .75s var(--reveal-delay) cubic-bezier(.16,.82,.26,1),clip-path .75s var(--reveal-delay) cubic-bezier(.16,.82,.26,1)}
.workflow-launch.is-revealed .title-reveal{opacity:1;transform:translateY(0);clip-path:inset(0 0 0 0)}
.workflow-launch .n8n-title-logo{width:1.6em;max-width:150px;height:auto;vertical-align:middle;margin-left:.1em}

/* The canvas fades into the section; the invitation itself carries the motion. */
.workflow-launch .hero-builder{border-color:transparent;background:transparent;background-image:none;box-shadow:none}
.workflow-launch .first-step{position:relative;isolation:isolate}
.workflow-launch .first-step:before{content:"";position:absolute;z-index:-2;inset:-64px;border-radius:50%;background:radial-gradient(circle,rgba(143,127,255,.42) 0,rgba(113,93,245,.18) 31%,transparent 68%);filter:blur(7px);animation:first-step-glow 2.8s ease-in-out infinite;pointer-events:none}
.workflow-launch .first-step:after{content:"";position:absolute;z-index:-1;inset:-16px;border:1px solid rgba(170,156,255,.42);border-radius:26px;opacity:.1;animation:first-step-ripple 2.8s ease-out infinite;pointer-events:none}
@keyframes first-step-glow{0%,100%{transform:scale(.84);opacity:.45}50%{transform:scale(1.16);opacity:1}}@keyframes first-step-ripple{0%{transform:scale(.82);opacity:.62}70%,100%{transform:scale(1.22);opacity:0}}
@media (prefers-reduced-motion:reduce){.workflow-launch .first-step:before,.workflow-launch .first-step:after{animation:none}}
@media (prefers-reduced-motion:reduce){.workflow-launch .title-reveal{opacity:1;transform:none;clip-path:none;transition:none}}

@media (max-width:760px){
  .workflow-launch .hero-builder{min-height:410px;border-radius:18px;}
  .workflow-launch .first-step{width:174px;height:174px;}
}