/* ============================================================
   INTEGRATION (7.0) — the settlement pipeline
   A scroll-scrubbed racetrack: a payment packet travels
   ERP → Frame → Rails → settles → returns as a receipt to
   your Ledger. Closed loop. Blueprint aesthetic.
   ============================================================ */

.pipe { overflow: clip; padding: 0; }
.pipe__pin {
  height: 100svh; position: relative;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-h) + clamp(14px, 3vh, 40px)) var(--gutter) clamp(28px, 4vh, 48px);
}

/* engineering grid wash */
.pipe__grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    linear-gradient(rgba(99,157,205,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99,157,205,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(130% 95% at 50% 46%, #000 38%, transparent 80%);
          mask-image: radial-gradient(130% 95% at 50% 46%, #000 38%, transparent 80%);
}

/* the diagram flexes to fill the space between header and message */
.pipe__fit { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
/* fixed coordinate space, uniformly scaled to fit */
.pipe__sizer { position: relative; }
.pipe__scene { position: absolute; top: 0; left: 0; width: 1280px; height: 560px; transform-origin: top left; }
.pipe__rail { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ---- pinned header (top) ---- */
.pipe__head {
  flex: none; z-index: 20; text-align: center; align-self: center;
  max-width: 92vw; display: grid; gap: 12px; justify-items: center;
}
.pipe__head .h2 { font-size: clamp(1.5rem, 2.6vw, 2.4rem); max-width: 30ch; }

/* ---- zone bracket: "your infrastructure" ---- */
.pzone {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;
  display: flex; align-items: center; gap: 10px;
}
.pzone__line { width: 2px; background: var(--frame-conduit); }
.pzone__tag {
  font-family: var(--font-condensed); font-weight: 700; font-size: 13px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--frame-conduit);
  writing-mode: vertical-rl; transform: rotate(180deg);
}

/* ---- nodes ---- */
.pnode {
  position: absolute; transform: translate(-50%, -50%);
  width: 210px; min-height: 140px; padding: 22px 22px 20px;
  background: var(--ink-850); border: 1px solid var(--line-2);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 17px), calc(100% - 17px) 100%, 0 100%);
  display: flex; flex-direction: column; gap: 12px; z-index: 6;
  transition: border-color .4s var(--ease-standard), background .4s var(--ease-standard), box-shadow .4s var(--ease-standard);
}
.pnode--frame { width: 256px; min-height: 204px; }
.pnode--erp { width: 252px; }
.pnode--rails { width: 214px; }
.pnode.is-on {
  border-color: var(--frame-deepwater); background: var(--ink-800);
  box-shadow: 0 0 0 1px var(--frame-deepwater), 0 18px 50px rgba(15,76,129,.32);
}
.pnode__top { display: flex; align-items: center; gap: 13px; }
.pnode__ico {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  background: var(--ink-750); color: var(--frame-coldroll);
  transition: background .4s, color .4s;
}
.pnode.is-on .pnode__ico { background: var(--frame-deepwater); color: #fff; }
.pnode__ico .material-symbols-sharp { font-size: 29px; font-variation-settings: 'FILL' 1, 'wght' 600; }
.pnode__lab {
  font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; line-height: 1; color: var(--frame-clearspan); font-size: 19px;
}
.pnode__sub {
  font-family: var(--font-condensed); font-weight: 600; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--frame-foundry);
}

/* node chips (ERP systems, routing selections) */
.pchips { display: flex; flex-wrap: wrap; gap: 7px; }
.pchip {
  font-family: var(--font-condensed); font-weight: 600; font-size: 13px;
  letter-spacing: .04em; padding: 5px 9px; color: var(--frame-galvanized);
  border: 1px solid var(--line-2); background: rgba(7,10,13,.4);
  opacity: .4; transition: opacity .35s, color .35s, border-color .35s;
}
.pchip.is-sel { opacity: 1; color: #fff; border-color: var(--frame-conduit); }

/* brand-logo chips (ERP systems, on-chain networks) */
.pchips--logos { gap: 8px; }
.pchip--logo { display: inline-flex; align-items: center; padding: 6px 9px; }
.pchip--logo .plogo { height: 16px; width: auto; display: block; }

/* FRAME internal ops (screen / score / route) */
.pops { display: grid; gap: 7px; margin-top: 2px; }
.pop {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-condensed); font-weight: 600; font-size: 14.5px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--frame-foundry);
  transition: color .35s;
}
.pop__dot {
  width: 19px; height: 19px; flex: none; display: grid; place-items: center;
  border: 1.5px solid var(--line-3); color: transparent;
  transition: border-color .3s, color .3s, background .3s;
}
.pop__dot .material-symbols-sharp { font-size: 15px; font-variation-settings: 'FILL' 1, 'wght' 700; }
.pop.is-done { color: var(--frame-clearspan); }
.pop.is-done .pop__dot { border-color: var(--frame-patina, #2E7C6C); background: var(--frame-patina, #2E7C6C); color: #fff; }

/* RAILS network dots */
.pnet { display: flex; gap: 8px; align-items: center; }
.pnet i {
  width: 13px; height: 13px; border-radius: 50%; background: var(--ink-750);
  border: 1px solid var(--line-3); transition: background .3s, box-shadow .3s;
}
.pnet i.is-live { background: var(--frame-conduit); box-shadow: 0 0 10px rgba(99,157,205,.9); border-color: var(--frame-conduit); }

/* reconciled stamp on ledger */
.pstamp {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  font-family: var(--font-condensed); font-weight: 700; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  padding: 5px 10px; background: var(--frame-patina, #2E7C6C); opacity: 0; transform: scale(.8);
}
.pstamp .material-symbols-sharp { font-size: 15px; font-variation-settings: 'FILL' 1, 'wght' 700; }

/* ---- the travelling packet ---- */
.ppacket {
  position: absolute; left: 0; top: 0; margin-left: -64px; margin-top: -27px;
  width: 128px; height: 54px; z-index: 12; opacity: 0;
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
  background: var(--frame-deepwater); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  box-shadow: 0 14px 38px rgba(15,76,129,.5);
}
.ppacket__ico { flex: none; display: grid; place-items: center; }
.ppacket__ico .material-symbols-sharp { font-size: 22px; font-variation-settings: 'FILL' 1, 'wght' 700; }
.ppacket__tx { display: grid; line-height: 1.1; }
.ppacket__amt { font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.ppacket__lab { font-family: var(--font-condensed); font-weight: 600; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.ppacket--receipt { background: var(--frame-patina, #2E7C6C); box-shadow: 0 14px 38px rgba(46,124,108,.5); }

/* proof tag that latches onto the packet after settlement */
.pproof {
  position: absolute; left: 0; top: 0; margin-left: -30px; margin-top: -54px;
  z-index: 13; opacity: 0; transform: translateY(6px);
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px;
  background: var(--ink-850); border: 1px solid var(--frame-conduit); color: var(--frame-conduit);
  font-family: var(--font-condensed); font-weight: 700; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.pproof .material-symbols-sharp { font-size: 14px; font-variation-settings: 'FILL' 1, 'wght' 700; }

/* ---- phase message (bottom) ---- */
.pipe__msg {
  flex: none; z-index: 18; text-align: center; align-self: center;
  width: min(760px, 90vw); display: grid; gap: 10px; justify-items: center;
  margin-top: clamp(14px, 2.4vh, 32px);
}
.pipe__msg-head { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 1.4vw, 18px); flex-wrap: wrap; }
.pipe__msg-no {
  flex: none; width: clamp(38px, 3.6vw, 48px); height: clamp(38px, 3.6vw, 48px);
  display: grid; place-items: center; background: var(--frame-deepwater); color: #fff;
  font-family: var(--font-condensed); font-weight: 700; font-size: clamp(16px, 1.9vw, 22px);
}
.pipe__msg-title {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: 1; color: #fff; font-size: clamp(1.5rem, 3vw, 2.4rem);
}
.pipe__msg-cap {
  font-family: var(--font-body); font-size: clamp(1.02rem, 1.45vw, 1.32rem);
  line-height: 1.45; color: var(--frame-coldroll); max-width: 50ch; margin: 0;
}
.pipe__msg-cap b { color: #fff; font-weight: 600; }

/* ---- mobile / reduced-motion fallback ---- */
.pipe__static { display: none; }
@media (max-width: 880px) {
  /* the desktop scrubbed pipe is hidden; collapse the empty pinned shell
     entirely (it otherwise leaves a dead black band) and let the animated
     mobile module carry the story */
  .pipe__pin { display: none; }
  .pipe__static {
    display: grid; gap: 0; padding: clamp(76px, 16vw, 120px) var(--gutter) clamp(40px, 9vw, 64px);
  }
  .pipe__static .shead { margin-bottom: clamp(36px, 8vw, 56px); }
  .pflow { display: grid; border: 1px solid var(--line-1); border-bottom: 0; }
  .pflow__step { padding: clamp(22px, 6vw, 30px); border-bottom: 1px solid var(--line-1); display: grid; gap: 10px; position: relative; }
  .pflow__step .n { font-family: var(--font-condensed); font-weight: 700; font-size: 13px; letter-spacing: .2em; color: var(--frame-conduit); }
  .pflow__step h3 { color: var(--frame-clearspan); }
  .pflow__step p { margin: 0; color: var(--frame-foundry); line-height: 1.6; }
  /* when the animated module is present it supersedes the plain step list */
  .pipe__mobile ~ .pipe__static { display: none; }
}