/* Enlace: a single pass through connections, always-readable text, no loops. */
.lab-hero-link{font-size:13px;color:var(--link);padding:7px 0;min-height:38px;display:inline-flex;align-items:center;gap:8px}
.lab-hero-link::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--link)}
.lab-section{display:grid;grid-template-columns:1fr 1fr;gap:36px 80px;align-items:center;padding-block:70px}
.lab-copy h2{font-size:44px;line-height:1.12}.lab-copy .lead{font-size:18px}.lab-copy>.button{margin-top:10px}.lab-copy>.underlink{display:block;width:fit-content;margin-top:4px}
.lab-board{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:28px;position:relative;overflow:hidden}
.lab-board figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:14px;margin-bottom:28px;color:var(--muted)}
.lab-tag{border:1px solid var(--line);border-radius:20px;padding:4px 10px;font-size:12px;color:var(--link)}
.lab-slot{display:flex;align-items:center;gap:14px;border:1px solid var(--link);border-radius:14px;padding:18px;background:var(--soft);position:relative}
.lab-slot .app-logo{width:32px;height:32px;object-fit:contain}.lab-slot h3{font-size:18px;margin:0 0 4px}.lab-slot p{font-size:12px;margin:0;color:var(--muted)}
.lab-state{margin-left:auto;font-size:12px;color:var(--link);white-space:nowrap}.lab-slot.waiting{border-style:dashed;border-color:var(--muted);background:var(--bg)}.waiting .lab-state{color:var(--muted)}
.lab-connector{height:60px;position:relative;display:grid;place-items:center}.lab-connector svg{position:absolute;width:100%;height:30px}.lab-connector span{position:relative;background:var(--surface);padding:4px 12px;color:var(--muted);font-size:12px}
.wire-base,.wire-draw{fill:none;stroke:var(--line);stroke-width:2;stroke-linecap:round}.wire-draw{stroke:var(--link);stroke-dasharray:1;stroke-dashoffset:0}
.lab-session{border-top:1px solid var(--line);margin-top:26px;padding-top:22px}.lab-session>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.lab-session span{font-size:13px;color:var(--muted)}.lab-session strong{font-family:Outfit,sans-serif;font-size:28px;font-weight:500}.lab-session svg{display:block;width:100%;height:8px;margin:12px 0}.lab-session p{font-size:12px;color:var(--muted)}.lab-board>.small{margin:20px 0 0;font-size:11px}
.lab-limits{grid-column:1/-1;border-top:1px solid var(--line);padding-top:24px;scroll-margin-top:24px}.lab-limits h3{font-size:22px}.lab-limits ul{padding:0;margin:20px 0;display:grid;grid-template-columns:1fr 1fr;gap:18px 44px;list-style:none}.lab-limits li{font-size:14px;color:var(--muted);padding-left:16px;border-left:2px solid var(--line)}.lab-limits strong{color:var(--ink)}
.lab-price-note{display:flex;justify-content:space-between;align-items:center;gap:32px;border:1px solid var(--link);border-radius:18px;padding:28px;background:var(--soft);margin-bottom:36px}.lab-price-note h2{font-size:28px;margin-bottom:10px}.lab-price-note p:last-child{font-size:15px;max-width:670px;margin-bottom:0;color:var(--muted)}.lab-price-note .button{flex-shrink:0}.lab-price-note .eyebrow{font-size:12px}
.motion-preference{display:flex;gap:12px;align-items:center;padding-block:8px 18px}.motion-preference button{font-size:12px;padding-left:0}.motion-preference button:disabled{color:var(--muted);cursor:default;text-decoration:none}
/* Flow wires are decorative. The ordered list remains the complete reading order. */
.flow-node+.flow-node::before{border-color:var(--link);transform-origin:top}.flow-node::after{content:'';width:6px;height:6px;border-radius:50%;background:var(--link);position:absolute;left:27px;top:-25px;visibility:hidden;pointer-events:none}.flow-node:first-child::after{display:none}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=reduce]) .motion-ready.motion-seen [data-motion-item]{animation:enlace-arrive 620ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--motion-order,0)*380ms)}
 html:not([data-motion=reduce]) .motion-ready.motion-seen .flow-node{animation:enlace-arrive 620ms cubic-bezier(.22,1,.36,1) both,enlace-node 650ms ease-out forwards;animation-delay:calc(var(--motion-order,0)*750ms)}
 html:not([data-motion=reduce]) .motion-ready.motion-seen .flow-node+.flow-node::before{animation:enlace-wire 650ms cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--motion-order,0)*750ms - 250ms)}
 html:not([data-motion=reduce]) .motion-ready.motion-seen .flow-node+.flow-node::after{animation:enlace-packet 650ms ease-out both;animation-delay:calc(var(--motion-order,0)*750ms - 250ms)}
 html:not([data-motion=reduce]) .motion-ready.motion-seen .wire-draw{animation:enlace-draw 1400ms cubic-bezier(.22,1,.36,1) both;animation-delay:300ms}
 html:not([data-motion=reduce]) .motion-ready.motion-seen .lab-session .wire-draw{animation-delay:800ms}
 html:not([data-motion=reduce]) [data-motion-card].motion-seen{animation:enlace-card 700ms ease-out backwards}
 html:not([data-motion=reduce]) .project-composition.motion-seen .project-component::before{animation:enlace-wire 700ms ease-out both;transform-origin:top;animation-delay:300ms}
}
@keyframes enlace-arrive{from{transform:translateY(10px)}to{transform:translateY(0)}}
@keyframes enlace-node{from{border-color:var(--line)}to{border-color:var(--link)}}
@keyframes enlace-wire{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes enlace-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes enlace-packet{0%{visibility:visible;transform:translateY(0)}99%{visibility:visible;transform:translateY(25px)}100%{visibility:hidden;transform:translateY(25px)}}
@keyframes enlace-card{0%{transform:translateY(8px);border-color:var(--link)}100%{transform:translateY(0);border-color:var(--line)}}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-motion=reduce]) .app-grid li{transition:transform 180ms ease,border-color 180ms ease}
 html:not([data-motion=reduce]) .app-grid li:hover,html:not([data-motion=reduce]) .app-grid li:focus-within{transform:translateY(-3px);border-color:var(--link)}
}
/* Site control shares the exact static final state of the device preference. */
html[data-motion=reduce]{scroll-behavior:auto}
html[data-motion=reduce] *,html[data-motion=reduce] *::before,html[data-motion=reduce] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion=reduce] .terminal-line{clip-path:none}
html[data-motion=reduce] .scroll-ribbon{stroke-dashoffset:0}
html[data-motion=reduce] .request-picker,html[data-motion=reduce] .request-screen,html[data-motion=reduce] .request-controls,html[data-motion=reduce] .request-list summary{display:none!important}
html[data-motion=reduce] .sequence-stage{border-color:var(--link)}
html[data-motion=reduce] .sequence-stage.final{border-color:var(--success)}
html[data-motion=reduce] .final-status{color:var(--success)}
html[data-motion=reduce][data-theme=light] .final-status{color:var(--ink)}
html[data-motion=reduce] .primary:hover,html[data-motion=reduce] .price:hover,html[data-motion=reduce] .price:focus-within{transform:none}
html[data-motion=reduce]::view-transition-old(root),html[data-motion=reduce]::view-transition-new(root){animation:none!important}
@media(prefers-reduced-motion:reduce){.wire-draw{stroke-dashoffset:0}.flow-node::after{display:none}.primary:hover,.price:hover,.price:focus-within{transform:none}}
@media(max-width:1190px){.lab-section{gap:32px 40px}.lab-copy h2{font-size:36px}}
@media(max-width:900px){.lab-section{grid-template-columns:1fr;padding-block:42px}.lab-board{width:100%;max-width:650px}.lab-limits{grid-column:auto}.lab-price-note{align-items:flex-start;flex-direction:column;gap:20px}}
@media(max-width:600px){.lab-copy h2{font-size:32px}.lab-copy .lead{font-size:16px}.lab-board{padding:20px 16px;border-radius:20px}.lab-slot{padding:14px 12px;gap:10px;flex-wrap:wrap}.lab-slot .app-logo{width:28px;height:28px}.lab-slot h3{font-size:16px}.lab-state{font-size:11px}.lab-slot p{font-size:11px}.lab-limits ul{grid-template-columns:1fr;gap:16px}.lab-limits h3{font-size:22px}.lab-price-note{padding:22px}.lab-price-note h2{font-size:24px}.motion-preference{flex-direction:column;gap:0;align-items:flex-start}.motion-preference>span{font-size:11px}.flow-node::after{left:25px}}

.flow-node{border-color:var(--link)}

/* Scroll story: the base is the complete, static, accessible diagram.
   Only capable browsers with motion enabled get the decorative timeline.
   No scroll listeners, text fades, hidden steps or changing live regions. */
.automation-scroll{display:block;padding:0}
.automation-scene{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;padding-block:70px}
.automation-scroll .automation-flow{gap:34px}
.automation-scroll .flow-node{padding-right:42px;min-width:0;background:var(--soft)}
.automation-scroll .flow-node>div{min-width:0}
.automation-scroll .flow-node>.app-logo,.automation-scroll .flow-node>.ui-icon{flex:none}
.automation-scroll .flow-node::before,.automation-scroll .flow-node::after{display:none}
.flow-progress{height:2px;background:var(--line);margin:-8px 0 26px;overflow:hidden}
.flow-progress>span{display:block;width:100%;height:100%;background:var(--link);transform-origin:left}
.flow-connector{position:absolute;left:26px;top:-35px;width:20px;height:34px;overflow:visible;pointer-events:none}
.flow-track,.flow-trace{fill:none;stroke-width:2;stroke:var(--line)}
.flow-trace{stroke:var(--link);stroke-dasharray:1;stroke-dashoffset:0}
.flow-signal{fill:var(--link);visibility:hidden}
.flow-check{position:absolute;right:14px;top:50%;margin-top:-10px;width:20px;height:20px;border:1px solid var(--link);border-radius:50%;color:var(--link)}
.flow-check path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flow-product .flow-check{background:#54fd7e;border-color:var(--success);color:#0c1421}
@media(max-width:1190px){.automation-scene{gap:40px}}
@media(max-width:900px){.automation-scene{grid-template-columns:1fr;gap:30px;padding-block:42px}}
@media(max-width:600px){.automation-scene{gap:22px}.flow-connector{left:22px}.automation-scroll .flow-node{padding-right:36px}.flow-check{right:9px;width:18px;height:18px;margin-top:-9px}}

@keyframes flow-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes flow-first{0%{border-color:var(--line);background:var(--bg)}14%,100%{border-color:var(--link);background:var(--soft)}}
@keyframes flow-second{0%,32%{border-color:var(--line);background:var(--bg)}50%,100%{border-color:var(--link);background:var(--soft)}}
@keyframes flow-third{0%,66%{border-color:var(--line);background:var(--bg)}86%,100%{border-color:var(--link);background:var(--soft)}}
@keyframes flow-trace-second{0%,14%{stroke-dashoffset:1}46%,100%{stroke-dashoffset:0}}
@keyframes flow-trace-third{0%,50%{stroke-dashoffset:1}82%,100%{stroke-dashoffset:0}}
@keyframes flow-signal-second{0%,14%{visibility:hidden;transform:translateY(0)}15%{visibility:visible;transform:translateY(0)}45%{visibility:visible;transform:translateY(28px)}46%,100%{visibility:hidden;transform:translateY(28px)}}
@keyframes flow-signal-third{0%,50%{visibility:hidden;transform:translateY(0)}51%{visibility:visible;transform:translateY(0)}81%{visibility:visible;transform:translateY(28px)}82%,100%{visibility:hidden;transform:translateY(28px)}}
@keyframes flow-check-first{0%,13.99%{visibility:hidden}14%,100%{visibility:visible}}
@keyframes flow-check-second{0%,49.99%{visibility:hidden}50%,100%{visibility:visible}}
@keyframes flow-check-third{0%,85.99%{visibility:hidden}86%,100%{visibility:visible}}

@supports (animation-timeline:view()) and (animation-range:contain 0% contain 100%){
 @media(prefers-reduced-motion:no-preference){
  html:not([data-motion=reduce]) .automation-diagram{view-timeline-name:--automation-scene;view-timeline-axis:block;--flow-range:cover 10% cover 55%}
  html:not([data-motion=reduce]) .automation-scroll .flow-progress>span{--flow-animation:flow-progress}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(1){--flow-animation:flow-first}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(2){--flow-animation:flow-second}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(3){--flow-animation:flow-third}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(2) .flow-trace{--flow-animation:flow-trace-second}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(3) .flow-trace{--flow-animation:flow-trace-third}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(2) .flow-signal{--flow-animation:flow-signal-second}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(3) .flow-signal{--flow-animation:flow-signal-third}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(1) .flow-check{--flow-animation:flow-check-first}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(2) .flow-check{--flow-animation:flow-check-second}
  html:not([data-motion=reduce]) .automation-scroll .flow-node:nth-child(3) .flow-check{--flow-animation:flow-check-third}
  /* These must follow the animation shorthands, which reset timeline/range. */
  html:not([data-motion=reduce]) .automation-scroll :is(.flow-progress>span,.flow-node,.flow-trace,.flow-signal,.flow-check){animation:var(--flow-animation) linear both;animation-timeline:--automation-scene;animation-range:var(--flow-range);animation-duration:auto}
 }
 @media(min-width:1100px) and (min-height:780px) and (prefers-reduced-motion:no-preference){
  html:not([data-motion=reduce]) .automation-scroll{min-height:calc(100svh + 600px);view-timeline-name:--automation-scene;view-timeline-axis:block;--flow-range:contain 0% contain 100%}
  html:not([data-motion=reduce]) .automation-scene{position:sticky;top:0;min-height:100svh;padding-block:40px}
  html:not([data-motion=reduce]) .automation-diagram{view-timeline-name:none;--flow-range:contain 0% contain 100%}
 }
}