/* pipeline layout for the product pages: 3D windows in a row, joined by live arrows.
   Rides on top of bimsuite-mockup.css - reuses .winwrap / .win / .bezel / .screen / .ribbon. */

.pipesec{position:relative;padding:70px 0 90px;overflow:hidden}
.pipesec .inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 28px}

/* section head */
.phead{margin-bottom:34px}
.phead .no{
  display:block;font-family:"Rubik",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.2em;color:rgb(var(--cd));margin-bottom:12px;direction:ltr;
}
.phead h2{
  font-family:"Rubik","Heebo",sans-serif;color:var(--ink);margin:0;
  font-size:clamp(26px,3.1vw,40px);font-weight:800;letter-spacing:-.03em;line-height:1.12;
}
.phead .lead{font-size:15.5px;line-height:1.75;color:var(--body);margin-top:12px;max-width:60ch}

/* the pipe */
.pipe{display:grid;align-items:center;gap:0;perspective:1500px}
.pipe.p3{grid-template-columns:1fr 76px 1fr 76px 1fr}
.pipe.p2{grid-template-columns:1fr 110px 1fr}
/* one column, each step feeding the next downward */
.pipe.col{grid-template-columns:minmax(0,780px);justify-content:center;gap:0}
@media (max-width:1000px){
  .pipe.p3,.pipe.p2{grid-template-columns:1fr}
  .pipe.p3 .parrow,.pipe.p2 .parrow{width:2px;height:52px;margin:18px auto;
    background:linear-gradient(to bottom, rgba(var(--c),.12), rgba(var(--c),.9))}
  .pipe.p3 .parrow::before,.pipe.p2 .parrow::before{top:auto;bottom:0;left:-4px;transform:rotate(-45deg)}
  .pipe.p3 .parrow::after,.pipe.p2 .parrow::after{animation-name:flowDown;left:-3px;right:auto}
}

/* vertical arrow between stacked steps */
.parrow.down{
  width:2px;height:74px;margin:22px auto;
  background:linear-gradient(to bottom, rgba(var(--c),.12), rgba(var(--c),.55) 55%, rgba(var(--c),.9));
}
.parrow.down::before{top:auto;bottom:0;left:-4px;transform:rotate(-45deg)}
.parrow.down::after{animation-name:flowDown;left:-3px;right:auto}

/* the live arrow: a charged line running from the right window into the left one */
.parrow{position:relative;height:2px;border-radius:2px;
  background:linear-gradient(to left, rgba(var(--c),.12), rgba(var(--c),.55) 55%, rgba(var(--c),.9));
}
.parrow::before{
  content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;
  border-left:2px solid rgb(var(--c));border-bottom:2px solid rgb(var(--c));
  transform:rotate(45deg);border-radius:1px;
}
.parrow::after{
  content:"";position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;
  background:rgb(var(--c));box-shadow:0 0 12px rgba(var(--c),.9), 0 0 26px rgba(var(--c),.5);
  animation:flowLeft 2.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes flowLeft{
  0%{right:0;opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{right:calc(100% - 8px);opacity:0}
}
@keyframes flowDown{
  0%{top:0;opacity:0}12%{opacity:1}85%{opacity:1}100%{top:calc(100% - 8px);opacity:0}
}
@media (prefers-reduced-motion:reduce){.parrow::after{animation:none;opacity:.9;right:50%}}

/* placeholder screen for a step that has no footage yet */
.mockscreen{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;color:#9c93bd;text-align:center;padding:20px;
  background:
    repeating-linear-gradient(-45deg, rgba(var(--c),.10) 0 12px, transparent 12px 24px),
    radial-gradient(ellipse at 50% 60%, rgba(var(--c),.16), transparent 66%),
    #140e28;
}
.mockscreen em{position:absolute;inset:16px;border:1px dashed rgba(var(--c),.45);border-radius:10px;font-style:normal}
.mockscreen strong{font-family:"Rubik",sans-serif;font-size:15px;font-weight:700;color:#d6cff0}
.mockscreen span{font-family:"Rubik",sans-serif;font-size:11px;letter-spacing:.16em;color:rgb(var(--c));direction:ltr}

/* a stacked step is wider than it is tall */
.pipe.col .screen{aspect-ratio:16/8}
.pipe.col .oneline{font-size:clamp(19px,2.1vw,26px)}
.pipe.col .steplist{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:14px;position:relative;z-index:3;
}
.pipe.col .steplist b{
  font-family:"Rubik",sans-serif;font-size:11.5px;font-weight:700;color:#fff;
  background:rgba(var(--c),.28);border:1px solid rgba(var(--c),.6);
  border-radius:999px;padding:5px 12px;backdrop-filter:blur(6px);
}

/* stage label above each window */
.stage{
  display:flex;align-items:center;gap:9px;margin-bottom:12px;
  font-family:"Rubik",sans-serif;font-size:11px;font-weight:800;letter-spacing:.16em;
  color:rgb(var(--cd));direction:ltr;
}
.stage::after{content:"";flex:1;height:1px;background:linear-gradient(to left,rgba(var(--c),.45),transparent)}

/* windows inside a pipe run tighter than the suite grid */
.pipe .winwrap{min-width:0}
.pipe .screen{aspect-ratio:4/3}
.pipe .oneline{font-size:clamp(17px,1.7vw,22px)}
.pipe .ribbon{padding:13px 16px 13px 18px}
.pipe .rname{font-size:clamp(14px,1.3vw,16px)}
.pipe .press{font-size:11.5px}
.pipe .press .arw{width:30px;height:30px;font-size:15px}

/* the "Pro" window: locked, and it says so */
.winwrap.pro .ribbon{
  background:linear-gradient(150deg,#191130 0%,#2b1e52 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 14px rgba(24,19,41,.34);
}
.probadge{
  position:absolute;top:14px;left:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;
  font-family:"Rubik",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  background:linear-gradient(140deg,#ffb266,var(--orange));color:var(--orange-ink);
  border-radius:999px;padding:5px 12px;box-shadow:0 3px 10px rgba(255,122,0,.4);
}
.probadge svg{width:12px;height:12px}

/* single wide panel under the pipe (the next family) */
.wide{margin-top:44px}
.wide .winwrap{max-width:none}
.wide .win{display:grid;grid-template-columns:minmax(0,380px) 1fr;align-items:stretch}
.wide .bezel{padding:14px}
.wide .screen{aspect-ratio:4/3;height:100%}
.wide .wbody{display:flex;flex-direction:column;justify-content:center;padding:26px 26px 26px 14px}
.wide .wtitle{
  font-family:"Rubik","Heebo",sans-serif;color:var(--ink);font-weight:800;
  font-size:clamp(20px,2.2vw,26px);letter-spacing:-.025em;margin:0 0 10px;
}
.wide .wtext{font-size:15px;line-height:1.8;color:var(--body);margin:0 0 20px}
@media (max-width:820px){ .wide .win{grid-template-columns:1fr} .wide .wbody{padding:22px} }