/* A workflow canvas, open to the hero background rather than framed as a UI window. */
.service-page-hero-n8n .service-hero-grid{grid-template-columns:1fr 1.2fr;gap:4%;min-height:610px}
.service-page-hero-n8n .service-page-copy{padding-block:32px}
.service-visual.n8n-visual{width:100%;margin:0;padding-top:22px}
.flow-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-left:4%}
.flow-heading p{font-size:clamp(18px,1.5vw,23px);line-height:1.4;letter-spacing:-.035em;color:#bdbcb5}
.flow-heading strong{font-weight:600;color:var(--white)}
.flow-index{font-size:11px;letter-spacing:.1em;padding-top:8px;color:#bdbcb5;white-space:nowrap}
.flow-canvas{isolation:isolate}
svg.flow-graph{display:block;width:100%;height:auto;overflow:visible}
svg.flow-graph-compact{display:none}
.flow-wire{fill:none;stroke:#676761;stroke-width:1.5}
.flow-wire-active{fill:none;stroke:var(--orange);stroke-width:2;stroke-dasharray:100;stroke-dashoffset:0;stroke-linecap:round;opacity:.85}
.flow-packet{fill:none;stroke:var(--white);stroke-width:3;stroke-dasharray:5 95;stroke-linecap:round;opacity:0}
.flow-node-body{fill:#1d1d1a;stroke:#64645f;stroke-width:1}
.flow-node-hub .flow-node-body{fill:#23231f;stroke:#bdbcb5}
.flow-node-edge{fill:none;stroke:var(--orange);stroke-width:1.5;opacity:.6}
.flow-node-hub .flow-node-edge{stroke-width:2}
svg.flow-node-icon{width:38px;height:38px;color:var(--paper)}
.flow-node-label,.flow-node-detail,.flow-hub-name{text-anchor:middle;fill:var(--paper);font-family:var(--font)}
.flow-node-label{font-weight:600;font-size:17px;letter-spacing:-.35px}
.flow-node-detail{font-size:12px;fill:#bdbcb5}
.flow-hub-name{font-size:23px;font-weight:800;letter-spacing:-.5px}
.flow-port{fill:var(--ink);stroke:#c8c5bf;stroke-width:1.5}
.flow-node-check circle{fill:var(--orange);stroke:var(--ink);stroke-width:3}
.flow-node-check path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.n8n-visual figcaption{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0 4%;padding-top:18px;border-top:1px solid var(--dark-line);text-align:left;font-size:14px;color:var(--paper)}
.n8n-visual figcaption small{font-size:11px;color:#bdbcb5}
.flow-controls{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:18px;min-height:44px}
.flow-controls[hidden]{display:none}
.flow-controls button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:10px 13px;border:1px solid transparent;border-radius:24px;background:none;color:var(--paper);font:inherit;font-size:12px;cursor:pointer;transition:color .2s,border-color .2s}
.flow-controls button:last-child{border-color:#64645f}
.flow-controls button:hover{color:var(--orange);border-color:var(--orange)}
.flow-controls button:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
.flow-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.flow-play-symbol{display:none}
.flow-controls [aria-pressed="true"] .flow-play-symbol{display:block}
.flow-controls [aria-pressed="true"] .flow-pause-symbol{display:none}
@media(min-width:1101px) and (max-width:1280px){
 .service-page-hero-n8n .service-title{font-size:clamp(46px,4.4vw,56px)}
 .service-page-hero-n8n .service-hero-grid{gap:2%;grid-template-columns:1fr 1.25fr}
}
@media(max-width:1100px){
 .service-page-hero-n8n .service-hero-grid{grid-template-columns:1fr;gap:12px;min-height:0}
 .service-page-hero-n8n .service-page-copy{max-width:720px;padding-block:12px}
 .service-page-hero-n8n .service-title{font-size:clamp(52px,7.4vw,76px)}
 .service-visual.n8n-visual{max-width:750px;margin:24px auto 0;padding-top:0}
 .flow-heading p{font-size:22px}
}
@media(max-width:640px){
 .service-page-hero-n8n .service-title{font-size:clamp(40px,10.5vw,56px)}
 .service-visual.n8n-visual{margin-top:30px}
 .flow-heading{padding-left:0;gap:8px}
 .flow-heading p{font-size:19px}
 .flow-index{font-size:10px}
 svg.flow-graph-wide{display:none}
 svg.flow-graph-compact{display:block;max-width:420px;margin-inline:auto}
 .flow-node-label{font-size:18px}
 .flow-node-detail{font-size:13px}
 .n8n-visual figcaption{margin:0;gap:7px;font-size:13px}
 .flow-controls{justify-content:flex-start;gap:3px}
 .flow-controls button{padding-inline:10px;font-size:11px}
}
@media(max-width:380px){svg.flow-graph-compact{width:calc(100% + 24px);max-width:none;margin-inline:-12px}}
@media(prefers-reduced-motion:reduce){.flow-controls{display:none}.flow-controls button{transition:none}}