/* "<product> at every stage of your pipeline" (views/partials/pm-journey.ejs), AK Oct 23.
   Light band (mist or white, from the template's tone). Desktop: the product on top, wires down to five columns of insight
   chips, a chevron pipeline underneath and a progress line. The lit stage (.is-on) turns gold; the rest stay lavender.
   Below 768px the pipeline turns vertical.
   Brand tokens only: gold #FFC61E, ink #110A33, violet #341D99, lavender #DDD6FF, mist #F6F4FF, cream #FFF4D2, slate #5B6478, white. */
html body .pjr { --pjr-bg: #F6F4FF; --pjr-card: #fff; padding: 64px 0 72px; background: var(--pjr-bg); color: #110A33; overflow: hidden; }
html body .pjr--white { --pjr-bg: #fff; --pjr-card: #F6F4FF; }
html body .pjr .section-header { margin-bottom: 28px; }
html body .pjr__viz { position: relative; max-width: 1180px; margin: 0 auto; }

/* the product */
html body .pjr__hub { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; width: max-content; margin: 0 auto; padding: 10px 20px 10px 12px; border-radius: 999px; background: #FFC61E; color: #110A33; font: 800 18px/1 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; box-shadow: 0 0 0 6px rgba(255, 198, 30, .25); }
html body .pjr__hub img { width: 28px; height: 28px; border-radius: 50%; background: #fff; object-fit: contain; }

/* wires: faint for every stage, a calm solid line into the lit one.
   Oct 27 (ANIMATION-POLISH-SPEC P1-1, Amar: "simpler is better"): no infinite flowing dashes and no hub pulse. When a stage lights,
   ONE bead travels each lit wire once (900ms, stagger 70ms per module via --k), then the block is still until the next stage. */
html body .pjr { --pjr-ease: cubic-bezier(.23, 1, .32, 1); --pjr-move: cubic-bezier(.65, 0, .35, 1); }
html body .pjr__wires { display: block; width: 100%; height: 72px; margin-top: -2px; overflow: visible; }
html body .pjr__wire, html body .pjr__flow { fill: none; vector-effect: non-scaling-stroke; }
html body .pjr__wire { stroke: #DDD6FF; stroke-width: 1.5; transition: stroke 320ms var(--pjr-ease); }
html body .pjr__wire.is-on { stroke: rgba(52, 29, 153, .45); }
html body .pjr__flow { stroke: #341D99; stroke-width: 6; stroke-linecap: round; stroke-dasharray: .1 200; stroke-dashoffset: .1; opacity: 0; animation: none; }
html body .pjr__flow.is-on { opacity: 1; animation: pjr-bead 900ms var(--pjr-move) calc(var(--k, 0) * 70ms) 1 both; }
@keyframes pjr-bead { 0% { stroke-dashoffset: .1; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }

/* stages */
html body .pjr__stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
html body .pjr__stage { display: flex; flex-direction: column; align-items: stretch; margin: 0; min-width: 0; }
html body .pjr__gets { list-style: none; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0; padding: 0 6px; }
html body .pjr__chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 6px 12px 6px 6px; border: 1px solid #DDD6FF; border-radius: 999px; background: var(--pjr-card); color: #5B6478; font: 600 14px/1.2 Manrope, "Manrope Fallback", Arial, sans-serif; white-space: nowrap; transition: background 320ms var(--pjr-ease), color 320ms var(--pjr-ease), border-color 320ms var(--pjr-ease), transform 320ms var(--pjr-ease), box-shadow 320ms var(--pjr-ease); transition-delay: calc(var(--k) * 70ms); }
html body .pjr__ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #F6F4FF; color: #341D99; transition: background 320ms var(--pjr-ease), color 320ms var(--pjr-ease); transition-delay: inherit; }
html body .pjr--mist .pjr__ico { background: #DDD6FF; }
html body .pjr__ico svg { width: 15px; height: 15px; }
html body .is-on .pjr__chip, html body .is-all .pjr__chip { background: #FFF4D2; border-color: #FFC61E; color: #110A33; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 10, 51, .08); }
html body .is-on .pjr__ico, html body .is-all .pjr__ico { background: #FFC61E; color: #110A33; }

/* the drop from the chips into the pipeline (stretches so every column meets its stage): a static connector. Oct 27 (spec P1-1): the
   infinite falling bead is gone (the one bead on the wire already shows the flow, and it animated top) */
html body .pjr__drop { position: relative; flex: 1; align-self: center; width: 2px; min-height: 28px; margin: 8px 0 6px; background: #DDD6FF; }
html body .pjr__drop::after { display: none; }

/* the pipeline: chevron segments */
html body .pjr__seg { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 76px; margin: 0; padding: 10px 26px 10px 28px; border: 0; background: #DDD6FF; color: #110A33; text-align: left; cursor: pointer; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%); transition: background 320ms var(--pjr-ease), color 320ms var(--pjr-ease); }
html body .pjr__stage:first-child .pjr__seg { padding-left: 18px; border-radius: 14px 0 0 14px; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); }
html body .pjr__stage:last-child .pjr__seg { border-radius: 0 14px 14px 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%); }
html body .pjr__name { font: 700 16px/1.2 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; text-wrap: balance; }
html body .is-on .pjr__seg, html body .is-all .pjr__seg { background: #FFC61E; }
html body .pjr__seg:focus-visible { outline: 2px solid #341D99; outline-offset: -4px; }

/* progress under the pipeline: Oct 27 (spec P1-2) removed at every width. It repeated what the gold chevron already shows, was the
   block's only gradient and animated width. */
html body .pjr__progress { display: none; }

/* tablets: tighter chips */
@media (max-width: 1100px) {
  html body .pjr__chip { padding: 5px 10px 5px 5px; gap: 6px; font-size: 12.5px; white-space: normal; }
  html body .pjr__ico { width: 22px; height: 22px; }
  html body .pjr__ico svg { width: 13px; height: 13px; }
  html body .pjr__name { font-size: 14px; }
}
/* phones: the pipeline runs down the left, insights sit beside each stage */
@media (max-width: 767px) {
  html body .pjr { padding: 44px 0 48px; }
  html body .pjr .section-header { margin-bottom: 20px; }
  html body .pjr__wires, html body .pjr__drop, html body .pjr__progress { display: none; }
  html body .pjr__hub { margin-bottom: 16px; font-size: 16px; }
  html body .pjr__stages { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html body .pjr__stage { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: stretch; gap: 12px; }
  html body .pjr__seg, html body .pjr__stage:first-child .pjr__seg, html body .pjr__stage:last-child .pjr__seg { grid-column: 1; grid-row: 1; min-height: 0; padding: 12px 12px 22px; border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 50% 100%, 0 calc(100% - 12px)); }
  html body .pjr__stage:first-child .pjr__seg { border-radius: 14px 14px 0 0; }
  html body .pjr__stage:last-child .pjr__seg { padding-bottom: 12px; border-radius: 0 0 14px 14px; clip-path: none; }
  html body .pjr__name { font-size: 14px; }
  html body .pjr__gets { grid-column: 2; grid-row: 1; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px; padding: 6px 0 14px; }
  html body .pjr__chip { font-size: 12.5px; }
}
/* W18 (P5 + X4): paused or finished (.is-still, set by the block script): nothing keeps moving */
html body .is-still .pjr__flow.is-on { animation: none; opacity: 0; }
html body .is-still .pjr__up i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html body .pjr__flow.is-on { animation: none; opacity: 0; }
  html body .pjr__chip, html body .pjr__ico, html body .pjr__seg, html body .pjr__wire { transition: none; }
}

/* Several modules (/products, jr.sources): a rail of module badges replaces the hub; wires run from each module to the stages
   it serves. The modules the lit stage uses turn on; the ones that lead it get a gold fill. Chips carry the module's mark. */
/* Oct 27 (spec P0-2): after Amar's renames ("Account Research Agent", "People Research Agent") the names no longer fit one line in a
   sixth of the row; nowrap cut them off and ran them into the next pill. Long names now wrap to two balanced lines inside their own
   column and every pill keeps one height (min-height), so the rail stays an even row. */
html body .pjr__rail { list-style: none; display: grid; grid-template-columns: repeat(var(--m), minmax(0, 1fr)); align-items: center; gap: 6px; margin: 0; padding: 0; }
html body .pjr__mod { display: flex; justify-content: center; margin: 0; min-width: 0; }
html body .pjr__mod a { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 46px; padding: 6px 14px 6px 6px; border: 1px solid rgba(221, 214, 255, .7); border-radius: 999px; background: rgba(221, 214, 255, .35); color: #5B6478; font: 700 14px/1.15 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; text-decoration: none; white-space: normal; text-align: left; text-wrap: balance; transition: background 320ms var(--pjr-ease), border-color 320ms var(--pjr-ease), transform 320ms var(--pjr-ease), box-shadow 320ms var(--pjr-ease); }
html body .pjr__mod a span { min-width: 0; overflow-wrap: break-word; }
html body .pjr__mod img { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; object-fit: contain; }
/* W18 (X4): a module the lit stage does not use is not faded with opacity (that took its name to about 2:1); it keeps slate text (#5B6478, 5:1 or better on its lavender fill) with a lighter border and fill. The ones in use turn white with ink text. */
html body .pjr__mod.is-on a, html body .is-all .pjr__mod a { background: var(--pjr-card); border-color: #DDD6FF; color: #110A33; }
html body .pjr__mod.is-on a { border-color: #341D99; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17, 10, 51, .08); }
html body .pjr__mod.is-lead a { background: #FFC61E; border-color: #FFC61E; box-shadow: 0 0 0 5px rgba(255, 198, 30, .25); }
html body .pjr__mod a:hover { border-color: #341D99; }
html body .pjr__mod a:focus-visible { outline: 2px solid #341D99; outline-offset: 2px; }
html body .pjr--multi .pjr__wires { height: 84px; }
html body .pjr__mk { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; object-fit: contain; }
/* outside the Webflow template pages (/products): its own band padding; the .pd-shell gives the side gutter */
html body .pjr--bare .pd-head { margin-bottom: 28px; }
@media (max-width: 1100px) {
  html body .pjr__mod a { gap: 6px; min-height: 40px; padding: 5px 10px 5px 5px; font-size: 13px; }
  html body .pjr__mod img { width: 22px; height: 22px; }
  html body .pjr__mk { width: 18px; height: 18px; }
}
/* tablets (768-1100px): a sixth of the row is about 110px, too narrow for "Account Research Agent" beside its mark, so the mark sits
   above the name and the name takes the pill's full width (two short lines) */
@media (min-width: 768px) and (max-width: 1100px) {
  html body .pjr__mod a { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 8px; border-radius: 18px; text-align: center; font-size: 12.5px; }
}
@media (max-width: 767px) {
  html body .pjr__rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; margin-bottom: 16px; }
  html body .pjr__mod a { padding: 4px 8px 4px 4px; font-size: 12px; white-space: normal; }
  /* Oct 27 (spec P1-6): phones drop the module rail; every chip already carries its module's mark, and the rail wrapped the long names
     to three lines in uneven pills (about 120px saved) */
  html body .pjr--multi .pjr__rail { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html body .pjr__mod, html body .pjr__mod a { transition: none; }
}
/* several modules: only the lit stage's wires show (all of them at once read as a tangle) */
html body .pjr--multi .pjr__wire, html body .pjr--multi .pjr__flow { opacity: 0; transition: opacity .45s ease; }
html body .pjr--multi .pjr__wire.is-on { opacity: 1; }
html body .pjr--multi .pjr__flow.is-on { opacity: 1; }
html body .pjr--multi.is-all .pjr__wire, html body .is-all .pjr__wire { opacity: 1; }
/* several modules, desktop: the insights ride on the wires (labels at 20% along each line, under their module); the chip lists
   under the stages are for phones only, where there are no wires */
html body .pjr__wirebox { position: relative; }
html body .pjr--multi .pjr__wires { height: 210px; }
html body .pjr__tag { position: absolute; top: 26%; display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: 170px; transform: translate(-50%, -50%); pointer-events: none; }
html body .pjr__tag b { display: block; padding: 5px 11px; border: 1px solid #FFC61E; border-radius: 999px; background: #FFF4D2; color: #110A33; font: 600 13px/1.25 Manrope, "Manrope Fallback", Arial, sans-serif; text-align: center; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity 320ms var(--pjr-ease), transform 320ms var(--pjr-ease); transition-delay: calc(var(--k) * 80ms); }
html body .pjr__tag.is-on b { opacity: 1; transform: none; }
html body .pjr--multi .pjr__gets { display: none; }
html body .pjr--multi .pjr__drop { min-height: 22px; margin-top: 0; }
@media (max-width: 1100px) {
  /* F7 Oct 28: a label never grows wider than the gap to the next module's label (89.6% = how far apart two neighbouring labels sit),
     so on tablets (768-880px) labels of neighbouring modules no longer overlap; desktop keeps 124px */
  html body .pjr__tag { max-width: min(124px, calc(89.6% / var(--m, 6) - 8px)); }
  html body .pjr__tag b { padding: 4px 8px; font-size: 12px; }
}
@media (min-width: 768px) and (max-width: 899px) {
  /* F7 Oct 28: narrower labels wrap to two lines, so a stack of three needs a taller wire box to stay clear of the module badges */
  html body .pjr--multi .pjr__wires { height: 250px; }
}
@media (max-width: 767px) {
  html body .pjr__wirebox { display: none; }
  html body .pjr--multi .pjr__gets { display: flex; }
}
@media (prefers-reduced-motion: reduce) { html body .pjr__tag b { transition: none; } }
/* optional tag on a stage (AK Oct 24: "New with Iriis" on /intent's first stage) */
/* Oct 27 (spec P0-4 + P1-3): the tag wraps at every width (on phones "New with Intent S..." ran past the 112px chevron), and it is a
   white pill with ink text, not an ink chip (AK: never ink chips); white reads on both the lavender and the gold chevron */
html body .pjr__new { align-self: flex-start; max-width: 100%; margin-top: 4px; padding: 2px 8px; border-radius: 10px; background: #fff; color: #110A33; font: 800 12px/16px Manrope, "Manrope Fallback", Arial, sans-serif; letter-spacing: 0; white-space: normal; }
@media (min-width: 1101px) { html body .pjr__tag b { white-space: nowrap; } }
/* the new piece in a tagged stage (AK Oct 24, /intent: Intent Scoring in Research and Planning) reads differently from the usual
   labels: a solid gold pill (Oct 27, spec P1-3: was an ink chip) */
html body .pjr__tag.is-new b { background: #FFC61E; border-color: #FFC61E; color: #110A33; }
html body .pjr__stage.has-new .pjr__chip.is-lead { background: #FFC61E; border-color: #FFC61E; color: #110A33; }
html body .pjr__stage.has-new .pjr__chip.is-lead .pjr__mk { box-shadow: 0 0 0 2px #fff; }
/* F7 Oct 28: every chevron in the pipeline is the same height and sits on one line (a stage tagged "New with ..." or a name on
   two or three lines used to push its chevron 4-20px above the others). The stages share three rows: insights, drop, chevron.
   Tablet and desktop only; phones keep their stacked layout above. Oct 27 merge: not on Amar's flipped /start layout (.pjr--flip). */
@media (min-width: 768px) {
  html body .pjr:not(.pjr--flip) .pjr__stages { grid-template-rows: auto minmax(28px, 1fr) auto; gap: 0 6px; }
  html body .pjr:not(.pjr--flip) .pjr__stage { display: grid; grid-row: span 3; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); }
  html body .pjr:not(.pjr--flip) .pjr__gets { grid-row: 1; }
  html body .pjr:not(.pjr--flip) .pjr__drop { grid-row: 2; justify-self: center; align-self: stretch; }
  html body .pjr:not(.pjr--flip) .pjr__seg { grid-row: 3; }
}

/* Flipped (AK Oct 26, /start/ae, jr.flip): outcomes on top, then the stages, then the modules at the bottom, wires flowing up.
   jrShell / jrH2 pages (outside /products and the template pages) get the sub line from .pjr__sub. */
html body .pjr__sub { max-width: 640px; margin: -32px auto 32px; text-align: center; font: 400 17px/1.55 Manrope, "Manrope Fallback", Arial, sans-serif; color: #5B6478; text-wrap: balance; }
html body .pjr--flip .pjr__viz { display: flex; flex-direction: column; }
html body .pjr--flip .pjr__outs { order: 1; } html body .pjr--flip .pjr__stages { order: 2; } html body .pjr--flip .pjr__wirebox { order: 3; } html body .pjr--flip .pjr__rail { order: 4; }
html body .pjr--flip .pjr__progress { display: none; }
html body .pjr--flip .pjr__wires { transform: scaleY(-1); }
/* Oct 27: in the flipped view a stack of labels hangs UP from its point near the module (it used to be centred on it, so a stack of
   three, or two-line labels on tablets, ran down into the module pills) */
html body .pjr--flip .pjr__tag { top: auto; bottom: 12%; transform: translateX(-50%); }
html body .pjr--flip .pjr__stage .pjr__seg { order: 1; } html body .pjr--flip .pjr__stage .pjr__drop { order: 2; margin: 6px 0 0; min-height: 18px; }
html body .pjr__outs { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
html body .pjr__out { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0; padding: 10px 14px; border: 1px dashed #DDD6FF; border-radius: 16px; background: var(--pjr-card); font: 700 16px/1.25 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; color: #5B6478; text-align: center; text-wrap: balance; transition: background 320ms var(--pjr-ease), border-color 320ms var(--pjr-ease), color 320ms var(--pjr-ease), transform 320ms var(--pjr-ease); }
/* Oct 27 (spec P1-1 + P1-3): the lit outcome is gold 300 with a gold edge (it ties to the gold chevron under it; AK: never ink chips),
   and it lights last, once the dot has travelled up from the stage (turning off stays instant) */
html body .pjr__out.is-on, html body .is-all .pjr__out { border: 1px solid #FFC61E; background: #FFE8A5; color: #110A33; transform: translateY(-2px); }
html body .pjr__out.is-on { transition-delay: 1100ms; }
html body .pjr__out-m { display: none; }
@media (max-width: 767px) {
  html body .pjr__outs { display: none; }
  html body .pjr--flip .pjr__rail { order: 0; }
  html body .pjr__out-m { display: block; grid-column: 2; grid-row: 2; margin: -6px 0 6px; font: 700 13px/1.3 Manrope, Arial, sans-serif; color: #341D99; }
  html body .pjr--flip .pjr__stage { grid-template-rows: auto auto; }
  html body .pjr--flip .pjr__stage .pjr__seg { grid-row: 1 / span 2; }
}
@media (max-width: 767px) {
  /* Oct 27 (spec P1-3): a plain "what you get" line over the chips, not an ink pill on every stage */
  html body .pjr--flip .pjr__out-m { grid-row: 1; margin: 6px 0 0; align-self: start; justify-self: start; padding: 0; border-radius: 0; background: none; color: #110A33; font: 700 15px/1.25 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; text-wrap: balance; }
  html body .pjr--flip .pjr__stage .pjr__gets { grid-row: 2; padding-top: 4px; }
}

/* Flip, v2 (AK Oct 26): each stage flows UP into its outcome (a line, an arrowhead and a moving dot when the stage is lit); the
   bead between the stage and the modules also travels up; the stages sit closer to the modules, with more room above them. */
html body .pjr__up { display: none; }
@media (min-width: 768px) {
  html body .pjr--flip .pjr__outs { margin-bottom: 0; }
  html body .pjr--flip .pjr__stage .pjr__up { order: 0; position: relative; display: block; align-self: center; width: 2px; height: 52px; margin: 4px 0 8px; background: #DDD6FF; }
  html body .pjr--flip .pjr__stage .pjr__up::before { content: ""; position: absolute; left: 50%; top: -2px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 8px solid #DDD6FF; }
  html body .pjr--flip .pjr__stage .pjr__up i { position: absolute; left: 50%; bottom: 0; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #341D99; opacity: 0; }
  html body .pjr--flip .pjr__stage.is-on .pjr__up, html body .pjr--flip.is-all .pjr__up { background: #110A33; }
  html body .pjr--flip .pjr__stage.is-on .pjr__up::before, html body .pjr--flip.is-all .pjr__up::before { border-bottom-color: #110A33; }
  /* Oct 27 (spec P1-1): the dot travels stage -> outcome ONCE, after the wire beads (900ms in), on transform (it animated bottom, forever) */
  html body .pjr--flip .pjr__stage.is-on .pjr__up i { animation: pjr-up 500ms var(--pjr-move) 900ms 1 both; }
  html body .pjr--flip .pjr__wires { height: 150px; }
  html body .pjr--flip .pjr__stage .pjr__drop { min-height: 12px; margin: 4px 0 0; }
}
@media (min-width: 768px) and (max-width: 1100px) {
  /* tablets: labels wrap to two lines, so the stacks need a taller wire box to stay clear of the chevrons above */
  html body .pjr--flip .pjr__wires { height: 210px; }
}
@keyframes pjr-up { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-44px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html body .pjr--flip .pjr__stage.is-on .pjr__up i { animation: none; } html body .pjr__out, html body .pjr__mod a, html body .pjr__tag b { transition: none; } }

/* Role pages (AK Oct 26): stages that are not the role's stay dimmed and do not cycle; a "For your ..." row names who each stage is for. */
/* Oct 27 (spec P0-3, the X4 rule again): a stage that is not the role's is not faded with opacity (that took its name and outcome to
   about 2:1). It keeps slate text on a lighter lavender fill (5:1 or better), so it still reads as "not your stage". */
html body .pjr__stage.is-dim .pjr__seg { background: rgba(221, 214, 255, .35); color: #5B6478; cursor: default; }
html body .pjr__out.is-dim { opacity: 1; background: transparent; border-color: rgba(221, 214, 255, .7); color: #5B6478; }
html body .pjr__roles { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; order: 0; }
/* Oct 27 (spec P1-4): "For your AEs and BDRs" reads as a plain sentence-case label, not an uppercase eyebrow */
html body .pjr__role { margin: 0; text-align: center; font: 700 13px/18px Manrope, "Manrope Fallback", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: #5B6478; text-wrap: balance; }
html body .pjr__role.is-on { color: #110A33; }
html body .pjr__role.is-dim { opacity: 1; color: #5B6478; }
@media (max-width: 767px) { html body .pjr__roles { display: none; } html body .pjr__stage.is-dim { display: none; } }

/* Loop wrap (AK Oct 27 night): after the last stage rests, the block dips for 320 ms (no snap), the first stage lights, it comes back. */
html body .pjr__viz { transition: opacity 280ms cubic-bezier(.23, 1, .32, 1); }
html body .pjr__viz.is-wrap { opacity: .25; }
@media (prefers-reduced-motion: reduce) { html body .pjr__viz { transition: none; } html body .pjr__viz.is-wrap { opacity: 1; } }
/* AK Oct 28: longer product names (Account Research Agent, People Research Agent) no longer spill out of their capsule:
   the name wraps onto two lines inside a taller capsule when its column is too narrow. */
html body .pjr__mod a { white-space: normal; text-wrap: balance; text-align: left; line-height: 1.12; border-radius: 22px; min-height: 42px; }
html body .pjr__mod a span, html body .pjr__mod a b { min-width: 0; }
/* Nov 5 (AK review: "Visitor ID is so far away from all the others, spacing should be equal for all of them, wherever it's used"):
   the module chips used to be as wide as their own text, centred in equal columns, so short names (Visitor ID) floated far from their
   neighbours. Every chip now fills its column, so the gap between any two chips is the same (the grid gap) and the row stays centred and
   even; the wires still start at each column's centre. The rail is hidden on phones (see above), so no lone chip can wrap. Used on /product,
   /solutions(/sales) and /start(/ae, /bdr, /account-manager): partials/pm-journey.ejs. */
html body .pjr__rail { gap: 8px; justify-content: stretch; align-items: stretch; }
html body .pjr__mod a { width: 100%; height: 100%; justify-content: center; text-align: center; }
html body .pjr__mod a span { text-align: center; }

/* ---------- Nov 5 late (AK review of /product "Best-in-class Intelligence under the hood"; same block on /solutions, /solutions/sales,
   /start/*, the product pages: views/partials/pm-journey.ejs) ----------
   (a) ONE active look for every stage: hovering Negotiation and Closing or Retention and Expansion used to turn some module badges, a
       label or a chip solid gold ("lead" / "new" styling) while the other stages never did. Now every lit stage looks the same: its chevron
       gold, its modules white with a violet edge, its labels and chips cream with a gold edge. */
html body .pjr__mod.is-lead a { background: var(--pjr-card); border-color: #341D99; color: #110A33; box-shadow: 0 6px 16px rgba(17, 10, 51, .08); }
html body .pjr__tag.is-new b { background: #FFF4D2; border-color: #FFC61E; color: #110A33; }
html body .pjr__stage.has-new .pjr__chip.is-lead { background: var(--pjr-card); border-color: #DDD6FF; color: #5B6478; }
html body .pjr__stage.has-new.is-on .pjr__chip.is-lead { background: #FFF4D2; border-color: #FFC61E; color: #110A33; }
/* (b) the connectors: no pre-drawn tick above the stage boxes. Several modules: the wires run straight into the top edge of each box (the
       script ends every wire on the real centre of its box). One product: the wire lands on the first insight and one unbroken line runs
       from the last insight down into the box. */
html body .pjr--multi .pjr__drop { display: none; }
@media (min-width: 768px) {
  html body .pjr--multi:not(.pjr--flip) .pjr__stages { grid-template-rows: auto 0 auto; }
  html body .pjr:not(.pjr--multi):not(.pjr--flip) .pjr__gets { align-self: stretch; }
  html body .pjr:not(.pjr--multi):not(.pjr--flip) .pjr__gets::after { content: ""; flex: 1 0 8px; width: 2px; margin-top: 2px; background: #DDD6FF; transition: background-color 320ms var(--pjr-ease); }
  html body .pjr:not(.pjr--multi):not(.pjr--flip) .pjr__drop { width: 2px; min-height: 20px; margin: 0; }
  html body .pjr:not(.pjr--multi):not(.pjr--flip) .pjr__stage.is-on .pjr__gets::after, html body .pjr:not(.pjr--multi):not(.pjr--flip) .pjr__stage.is-on .pjr__drop { background: rgba(52, 29, 153, .45); }
}
/* phones: a clean stack, one stage per block: the stage name on a full-width bar, its insights wrapping underneath (was a tall chevron
   column beside a list, most of it empty) */
@media (max-width: 767px) {
  html body .pjr:not(.pjr--flip) .pjr__stages { gap: 16px; }
  html body .pjr:not(.pjr--flip) .pjr__stage { display: flex; flex-direction: column; gap: 8px; }
  html body .pjr:not(.pjr--flip) .pjr__seg, html body .pjr:not(.pjr--flip) .pjr__stage:first-child .pjr__seg, html body .pjr:not(.pjr--flip) .pjr__stage:last-child .pjr__seg { order: -1; min-height: 44px; padding: 10px 16px; border-radius: 14px; clip-path: none; }
  html body .pjr:not(.pjr--flip) .pjr__gets { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; padding: 0; }
  html body .pjr:not(.pjr--flip) .pjr__chip { font-size: 13px; }
}

/* Nov 5 late (Krish at 49:28, "keep focus on the active text, dim the rest"; Amar: "grey and lighter shades" for what is not in focus).
   Every stage graphic (/account-research-agent "From first research to renewal" and the other product pages, /product, /solutions/*,
   /start/*): only the lit stage's text is full strength. The other stages' names go slate on a lighter bar and their insights go a lighter
   grey with faded icons, easing over 320ms as the lit stage moves. Still readable: #687083 is 4.5:1+ on white, mist and cream.
   The script adds .pjr-dim only when motion is on; reduced motion and no JS keep everything full strength. */
html body .pjr__seg { transition: background-color 320ms var(--pjr-ease), color 320ms var(--pjr-ease); }
html body .pjr-dim .pjr__stage:not(.is-on):not(.is-dim) .pjr__seg { background: rgba(221, 214, 255, .6); color: #5B6478; }
html body .pjr-dim .pjr__stage:not(.is-on) .pjr__chip { color: #687083; border-color: rgba(221, 214, 255, .6); box-shadow: none; }
html body .pjr-dim .pjr__stage:not(.is-on) .pjr__ico { opacity: .55; transition: opacity 320ms var(--pjr-ease), background 320ms var(--pjr-ease), color 320ms var(--pjr-ease); }
html body .pjr-dim .pjr__stage:not(.is-on) .pjr__mk { opacity: .6; }
html body .pjr-dim .pjr__out:not(.is-on) { color: #687083; border-color: rgba(221, 214, 255, .55); }
html body .pjr-dim .pjr__role:not(.is-on) { color: #687083; }
html body .pjr-dim .pjr__stage:not(.is-on) .pjr__out-m { color: #687083; }
@media (prefers-reduced-motion: reduce) { html body .pjr-dim .pjr__stage .pjr__seg, html body .pjr-dim .pjr__stage .pjr__chip { transition: none; } }