/* Hero scene (owner 14.10.2026): a screenshot of the client's app → the conveyor through the Piperlink office, where two
   senior specialists test each screen by hand (tools/scene_art.py) → the test report the tickets ride into. DS section 8. */
.hero-machine.pipeline-scene{height:auto;min-height:0;margin:0;background:var(--pl-color-coral);padding:24px 28px 20px;color:var(--pl-color-ink);border-radius:2px}
.pipeline-scene::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#26282008 1px,transparent 1px),linear-gradient(90deg,#26282008 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.pipeline-header{display:flex;justify-content:space-between;align-items:center;gap:24px;position:relative;z-index:2}
.pipeline-header{font:10px/1.5 var(--pl-font-mono);letter-spacing:.04em}.pipeline-header>span:last-child{white-space:nowrap}
/* The cards share one row (owner 14.10.2026): the same height and top, a mirrored tilt, captions on the bottom edge. */
.pipeline-stage{position:relative;height:420px;max-width:1400px;margin:4px auto 0;display:grid;grid-template-columns:5% min(25%,300px) 1fr min(25%,300px) 5%;align-content:start;padding-top:34px}
.pipeline-visual{position:absolute;inset:0;pointer-events:none;perspective:1200px}
.pipeline-visual .pipeline-art{position:absolute;inset:0;width:100%;height:100%;will-change:auto}
.pipeline-card{position:relative;grid-row:1;display:flex;flex-direction:column;background:var(--pl-color-paper);color:var(--pl-color-ink);z-index:1;box-shadow:5px 8px 0 #7e301522;border:1px solid #26282026;transition:box-shadow var(--pl-duration-base),border-color var(--pl-duration-base)}
.pipeline-app{grid-column:2;transform:rotate(-4deg)}.pipeline-report{grid-column:4;transform:rotate(4deg)}
.pipeline-window-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;border-bottom:var(--pl-border);font:9px/1.5 var(--pl-font-mono);letter-spacing:.02em}.pipeline-window-bar>span:first-child{white-space:nowrap}
.pipeline-card h3{font-size:clamp(17px,1.55vw,20px);line-height:1.2;font-weight:650;letter-spacing:-.04em;margin:0}
.pipeline-card-foot{margin-top:auto;display:flex;justify-content:space-between;gap:8px;border-top:var(--pl-border);padding:10px 14px;font:9px/1.5 var(--pl-font-mono);text-transform:uppercase;letter-spacing:.02em}
/* The app card: a browser window with the client's checkout screen. It looks fine — the bug shows at the QA engineer. */
.app-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;height:22px;line-height:22px;padding:0 10px;border-radius:999px;background:#ebe9e1;color:var(--pl-color-muted)}
.app-shot{display:grid;gap:9px;padding:13px 16px 16px;font-family:var(--pl-font-sans)}
.app-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--pl-color-muted)}
.app-top b{font-size:15px;font-weight:800;letter-spacing:-.05em;color:var(--pl-color-ink)}
.app-row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-block:var(--pl-border);font-size:12px;line-height:1.3}
.app-field{display:grid;gap:4px}
.app-field small{font-size:10px;line-height:1.2;color:var(--pl-color-muted)}
.app-input,.app-pay{position:relative;display:flex;align-items:center}
.app-input{padding:7px 9px;border:1px solid #d6d4ca;background:#fffdf8;font-size:12px;line-height:1.3}
.app-pay{justify-content:center;padding:9px;background:var(--pl-color-ink);color:var(--pl-color-paper);font-size:12.5px;font-weight:700;line-height:1.3}
/* The report card: each ticket that rides in under it marks the next row (app.js). */
.pipeline-report-icon{font-size:18px;line-height:1;padding:2px 5px}
.pipeline-report-content{padding:16px}
.pipeline-report-content h3{font-size:clamp(17px,1.6vw,21px)}
.rep-app{margin:3px 0 12px;font-size:11.5px;line-height:1.4;color:var(--pl-color-muted)}
.rep-rows{list-style:none;margin:0;padding:0;border-top:var(--pl-border)}
.rep-row{display:grid;grid-template-columns:68px 1fr;align-items:center;gap:8px;padding:8px 4px;border-bottom:var(--pl-border);font-size:12px;line-height:1.35;font-weight:650;letter-spacing:-.01em}
.rep-row.is-hit{animation:rep-filed 1.3s ease-out}
.rep-sev{justify-self:start;padding:2px 6px;font:700 8.5px/1.4 var(--pl-font-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.rep-sev--critical{background:#c23b1c;color:#fff}.rep-sev--high{background:var(--pl-color-ink);color:var(--pl-color-paper)}.rep-sev--medium{background:#efe0bd;color:#5c4718}.rep-sev--vuln{background:#fffdf8;color:#a3341a;box-shadow:inset 0 0 0 1.2px #c23b1c}
.rep-note{margin:10px 0 0;font-size:11.5px;line-height:1.5;color:var(--pl-color-muted)}
html[data-motion="off"] .pipeline-scene *,html[data-hidden="true"] .pipeline-scene *, .pipeline-scene.motion-sleep *{animation-play-state:paused!important}
html[data-motion="off"] .pipeline-scene *{animation:none!important;transition:none!important}
@media(min-width:1500px){.pipeline-stage{height:470px;padding-top:50px}.pipeline-card h3{font-size:23px}.app-row,.app-input,.rep-row{font-size:13px}}
@media(max-width:1050px) and (min-width:701px){.pipeline-visual .pipeline-art{inset:auto;left:-7%;top:-4%;width:112%;height:112%}.hero-machine.pipeline-scene{padding:20px}.pipeline-stage{height:370px;padding-top:24px;grid-template-columns:1% min(28%,300px) 1fr min(28%,300px) 1%}.pipeline-header{font-size:9px;gap:12px}.pipeline-card h3{font-size:17px}.pipeline-window-bar{padding:9px 10px;font-size:8px}.pipeline-card-foot{padding:9px 10px;font-size:8px}.app-shot{gap:7px;padding:10px 12px 12px}.app-top{font-size:10px}.app-top b{font-size:13px}.app-row{padding:6px 0;font-size:11px}.app-input{padding:6px 8px;font-size:11px}.app-pay{padding:7px;font-size:11.5px}.pipeline-report-content{padding:12px}.rep-app{margin-bottom:8px;font-size:10.5px}.rep-row{grid-template-columns:1fr;gap:3px;padding:5px 2px;font-size:11px}.rep-note{display:none}}
/* Mobile: only the office, across the width (owner 14.10: «Лише офіс»): no cards (they stay for screen readers), no
   outer ramps and no curtain labels (.pipe-wide); its conveyor runs from IN to OUT inside it. The art is 3.02 times
   the stage, at most 1100px, cropped to the room (DS section 8). */
@media(max-width:700px){
.hero-machine.pipeline-scene{padding:16px;margin-inline:-6px}
.pipeline-header{align-items:flex-start;flex-direction:column;gap:4px;font-size:9px}
.pipeline-stage{display:flex;flex-direction:column;align-items:center;height:auto;gap:0;margin-top:16px;padding-top:0;isolation:isolate}
.pipeline-card{position:absolute;inset:auto;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;transform:none;box-shadow:none}
.pipeline-visual{position:relative;inset:auto;order:1;width:100%;height:auto;aspect-ratio:.9577;max-height:380px;margin:0;flex-shrink:0;overflow:hidden}
.pipeline-visual .pipeline-art{inset:0 auto auto;left:calc(50% - .5103 * min(1100px, 302.45%));margin-top:calc(-.00397 * min(1100px, 302.45%));width:min(1100px,302.45%);height:auto;aspect-ratio:1260/460;transform:none!important}
.pipeline-art .pipe-wide{display:none}
}
@keyframes rep-filed{0%{background:#e3f2c6}100%{background:transparent}}
@media(prefers-reduced-motion:reduce){.pipeline-scene *{animation:none!important;transition:none!important}}
/* The conveyor, the people and their marks run on the SVG clock (scene_art.py). */