/* D-047 hero A, Pipeline. Possible needs flow along a glass pipe; Operations confirms a few at the gate;
   each confirmed one converges on the dock and rises into the illustrative opportunity card. Positions are
   shared with pipeline.js through --gate-x and --dock-x. The bottom padding reserves the pipe's band, so
   the copy can never run into it. */
.hv-pipeline{--pipe-b:clamp(110px,15vh,150px);--pipe-h:112px;--gate-x:57%;--dock-x:80%;--tether:72px;
  align-items:start;padding-top:clamp(132px,17vh,168px);padding-bottom:calc(var(--pipe-b) + var(--pipe-h) + 28px);min-height:max(640px,calc(100svh - 12px));
  background:radial-gradient(40% 46% at var(--gate-x) 76%,rgba(32,56,40,.8) 0%,rgba(11,18,14,0) 70%),radial-gradient(60% 50% at 84% 26%,#13231a 0%,rgba(11,18,14,0) 70%),#0b120e}
.hvp-visual{position:absolute;inset:0;z-index:1;pointer-events:none}
.hvp-beam{position:absolute;left:var(--gate-x);top:0;bottom:calc(var(--pipe-b) + var(--pipe-h) / 2);width:340px;margin-left:-170px;background:radial-gradient(36% 100% at 50% 100%,rgba(192,238,131,.15),rgba(192,238,131,0) 78%)}
.hvp-pipe{position:absolute;left:0;right:0;bottom:var(--pipe-b);height:var(--pipe-h);overflow:hidden;
  background:linear-gradient(180deg,rgba(220,240,208,.085) 0%,rgba(220,240,208,.03) 16%,rgba(4,8,6,.5) 52%,rgba(220,240,208,.02) 84%,rgba(220,240,208,.06) 100%);
  border-top:1px solid rgba(220,240,208,.17);border-bottom:1px solid rgba(220,240,208,.08);
  box-shadow:inset 0 14px 24px -16px rgba(220,240,208,.22),inset 0 -18px 30px -12px rgba(0,0,0,.65),0 60px 90px -50px #000}
.hvp-pipe canvas{position:absolute;inset:0;width:100%;height:100%}
.hvp-sheen{position:absolute;left:0;right:0;top:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(230,250,214,0),rgba(230,250,214,.3) 30%,rgba(230,250,214,.08) 75%,rgba(230,250,214,0))}
.hvp-gate{position:absolute;left:var(--gate-x);bottom:calc(var(--pipe-b) - 26px);width:58px;height:calc(var(--pipe-h) + 52px);margin-left:-29px;border-radius:16px;
  background:linear-gradient(90deg,#17231c,#26382d 48%,#141f19);border:1px solid #3b5343;box-shadow:0 26px 50px -22px #000,inset 0 1px 0 rgba(255,255,255,.07)}
/* D-049: the gate visibly works: a crisp scan line sweeps through it. */
.hvp-gate{overflow:hidden}
.hvp-scan{position:absolute;left:9px;right:9px;top:0;height:2px;border-radius:1px;background:#d6f8ab;box-shadow:0 0 6px rgba(192,238,131,.8);animation:hvp-scan 2.4s ease-in-out infinite alternate}
@keyframes hvp-scan{from{transform:translateY(8px)}to{transform:translateY(calc(var(--pipe-h) + 18px))}}
@media (prefers-reduced-motion:reduce){.hvp-scan{animation:none}}
.hvp-gate-light{position:absolute;left:50%;top:14px;bottom:14px;width:2px;margin-left:-1px;border-radius:2px;background:#c0ee83;box-shadow:0 0 12px #c0ee83,0 0 32px rgba(192,238,131,.55);opacity:.55}
/* Captions sit under the pipe and never drop into the note's band at the hero's foot. */
.hvp-label{position:absolute;bottom:max(calc(var(--pipe-b) - 64px),64px);margin:0;font-size:13px;font-weight:650;line-height:1.35;color:#c9d6cb;text-align:center;white-space:nowrap;transform:translateX(-50%)}
.hvp-label small{display:block;margin-top:2px;font-size:11.5px;font-weight:550;color:#7f9184}
.hvp-label.is-in{left:24%;color:#9fb0a3}
.hvp-label.is-gate{left:var(--gate-x)}
.hvp-label.is-out{left:var(--dock-x);color:#c0ee83}
.hvp-tether{position:absolute;left:var(--dock-x);bottom:calc(var(--pipe-b) + var(--pipe-h) - 1px);width:26px;height:calc(var(--tether) + 2px);margin-left:-13px;overflow:hidden;transform-origin:50% 100%;
  background:linear-gradient(90deg,rgba(220,240,208,.2) 0%,rgba(220,240,208,.06) 20%,rgba(4,8,6,.6) 52%,rgba(220,240,208,.05) 80%,rgba(220,240,208,.16) 100%);
  border-left:1px solid rgba(220,240,208,.32);border-right:1px solid rgba(220,240,208,.16);box-shadow:0 0 22px -2px rgba(192,238,131,.3)}
/* D-049: the tether is a small glass pipe. It stays empty; only a confirmed lead travels up it (owner request). */
/* Where the tube meets the main pipe, a soft intake glow shows the pull. */
.hvp-intake{position:absolute;left:var(--dock-x);bottom:calc(var(--pipe-b) + var(--pipe-h) - 6px);width:40px;height:14px;margin-left:-20px;border-radius:50%;border:1px solid rgba(220,240,208,.35);background:radial-gradient(closest-side,rgba(192,238,131,.55),rgba(192,238,131,.08));box-shadow:0 0 18px rgba(192,238,131,.35);opacity:.5;pointer-events:none}
.hv-pipeline:not(.is-onscreen) :is(.hvp-scan){animation-play-state:paused}
/* The handoff: the docked capsule leaves the pipe and rises up the tether into the card. */
.hvp-fly{position:absolute;z-index:1;left:var(--dock-x);bottom:calc(var(--pipe-b) + var(--pipe-h) / 2 - 3px);width:26px;height:6px;margin-left:-13px;border-radius:3px;background:#e2fbc4;box-shadow:0 0 8px 1px rgba(192,238,131,.8);opacity:0}
.hvp-deck{position:absolute;left:var(--dock-x);bottom:calc(var(--pipe-b) + var(--pipe-h) + var(--tether));width:360px;margin-left:-180px}
/* The stack: the two cards behind the front one peek above it with their titles, so landings read as a pile
   of newly confirmed requirements. The tally sits beside the tether, counts the current batch, then fades. */
.hvp-ghost{position:absolute;display:block;overflow:hidden;padding:0 16px;border-radius:13px 13px 0 0;border:1px solid rgba(255,255,255,.08);border-bottom:0;
  font-size:11.5px;font-weight:650;line-height:1;letter-spacing:-.005em;white-space:nowrap;text-overflow:ellipsis}
.hvp-ghost.is-1{left:14px;right:14px;bottom:calc(100% - 14px);height:44px;padding-top:11px;background:#26342b;color:#b6c5b9}
.hvp-ghost.is-2{left:30px;right:30px;bottom:calc(100% + 14px);height:34px;padding-top:5px;background:#18231c;color:#8fa093;font-size:10.5px}
.hvp-tally{position:absolute;left:calc(50% + 22px);top:calc(100% + var(--tether) / 2 - 12px);z-index:2;display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;
  background:#c0ee83;color:#0b120e;font-size:11.5px;font-weight:650;white-space:nowrap;box-shadow:0 8px 22px -8px rgba(192,238,131,.7);opacity:0;transform-origin:0 50%}
.hvp-tally b{font-weight:800;font-variant-numeric:tabular-nums}
.hvp-card{position:relative;width:auto}
.hv-pipeline .hero-note{left:clamp(24px,5vw,72px);right:auto}

@media (min-width:1600px) and (min-height:900px){.hv-pipeline{--pipe-h:128px}.hvp-deck{width:390px;margin-left:-195px}}
@media (min-width:900px) and (max-width:1199px){.hv-pipeline{--gate-x:52%;--dock-x:78%}.hvp-deck{width:330px;margin-left:-165px}.hvp-label.is-in{left:20%}}
/* Laptop heights: a slimmer pipe, one-line captions and a tighter card keep everything in the first view. */
@media (min-width:900px) and (max-height:820px){
  .hv-pipeline{--pipe-b:100px;--pipe-h:96px;--tether:46px}
  .hvp-label{bottom:64px}
  .hvp-label small{display:none}
  .hvp-card{padding:16px 20px}
  .hvp-card .opp-title{margin-top:12px;font-size:24px}
  .hvp-card .opp-scope{margin-top:10px;padding-top:10px}
  .hvp-card .opp-proof{margin-top:8px}
  .hvp-card .opp-sealed{margin-top:8px;padding:8px 12px}
}
@media (min-width:900px) and (max-height:700px){.hv-pipeline{--pipe-h:84px;padding-top:112px}}

@media (max-width:899px){
  .hv-pipeline{--pipe-b:64px;--pipe-h:84px;--gate-x:24%;--dock-x:50%;--tether:44px;min-height:0;padding-top:104px;padding-bottom:0;
    background:radial-gradient(80% 36% at 50% 88%,rgba(32,56,40,.75) 0%,rgba(11,18,14,0) 70%),#0b120e}
  .hvp-visual{position:relative;inset:auto;order:3;align-self:stretch;height:600px;margin:14px -22px 0}
  .hvp-beam{display:none}
  .hvp-gate{width:46px;margin-left:-23px}
  .hvp-deck{width:318px;margin-left:-159px}
  .hvp-card{padding:16px 18px}
  .hvp-card .opp-title{font-size:23px}
  .hvp-label{bottom:calc(var(--pipe-b) - 44px);font-size:11.5px}
  .hvp-label small{display:none}
  .hvp-label.is-in{display:none}
  .hv-pipeline .hero-note{order:4;padding:10px 0 26px}
}
/* Phones: the product comes up sooner; the caption for confirmed demand sits beside the tether. */
@media (max-width:599px){
  .hv-pipeline .hero-eyebrow{display:none}
  .hv-pipeline h1{margin-top:0}
  .hvp-label.is-out{left:calc(var(--dock-x) + 12px);transform:none;text-align:left}
}