/* Production Pipelines page (/pipelines/). Everything here is scoped to that page. */
/* ---------- Production Pipelines (concept) — three turning wheels under the posters; the site's own fonts, palette and glitter ---------- */
.pp { --thick: 12; position: relative; isolation: isolate; padding: clamp(40px, calc(4.5 * var(--vw)), 72px) 0 clamp(64px, calc(7 * var(--vw)), 112px); }
/* backgrounds to choose from */
.pp, .pp[data-bg="lavender"] { background: linear-gradient(180deg, #fbfaff 0%, #f1edff 35%, #e9e3ff 100%); }
.pp[data-bg="per"] { background: linear-gradient(180deg, #fdfcff 0%, #f5f2ff 45%, #f1eefc 100%); }
.pp[data-bg="mint"] { background: linear-gradient(180deg, #fbfefd 0%, #edf8f2 45%, #e3f3ea 100%); }
.pp[data-bg="butter"] { background: linear-gradient(180deg, #fffefa 0%, #fdf7e6 45%, #faf0d6 100%); }
.pp[data-bg="warmwhite"] { background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 50%, #f9f4ec 100%); }
.pp[data-bg="warmgray"] { background: linear-gradient(180deg, #f7f7f9 0%, #f1efed 50%, #ebe6e1 100%); }
.pp[data-bg="blue"] { background: linear-gradient(180deg, #eef3ff 0%, #f5f8ff 50%, #ffffff 100%); }
.pp[data-bg="none"] { background: #fff; box-shadow: none; }
/* each pipeline's own soft tint (used by "Per pipeline") */
.pc-pipe[data-p="trad"] { --tint: #fdf6e3; --tint2: #faefd2; --accent: #c9a45e; }
.pc-pipe[data-p="alin"] { --tint: #eaf6f0; --tint2: #dcf0e5; --accent: #6fb38a; }
.pc-pipe[data-p="agame"] { --tint: #fdf1e8; --tint2: #fbe5d5; --accent: #e0956a; }
.pp-wrap { max-width: 1180px; margin: 0 auto; }

/* heading */
.pp-head { text-align: center; }
.pp-title { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, calc(4.6 * var(--vw)), 64px); line-height: 1.2; padding-bottom: .08em; letter-spacing: .06em; color: var(--ink);
  background-image: linear-gradient(180deg, #0500a3 0%, #3e38d9 55%, #8c88ff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-wrap: balance; }
.pp-sub { margin: 6px 0 0; font: 600 13px/1.2 var(--font-nav); letter-spacing: .22em; text-transform: uppercase; color: rgba(105,101,255,.75); }
.pp-soon { display: inline-flex; align-items: center; gap: 14px; margin: 22px 0 0; padding: 12px 24px 12px 18px; border-radius: 999px;
  background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #b3afff, #8ff2ff, #6965ff, #ffb0a3, #b3afff) border-box; border: 1.5px solid transparent;
  background-size: 100% 100%, 300% 100%; animation: ppBorder 8s linear infinite; box-shadow: 0 12px 28px -14px rgba(62,56,217,.5); }
.pp-soon i { width: 20px; height: 20px; flex: none; background: var(--sp-star4-pw) center/contain no-repeat; animation: ppTwinkle 3.2s ease-in-out infinite; }
.pp-soon span { font: 600 13px/1 var(--font-nav); letter-spacing: .18em; text-transform: uppercase; color: rgba(105,101,255,.7); white-space: nowrap; }
.pp-soon b { font: 600 19px/1 var(--font-display); letter-spacing: .08em; padding-left: 14px; border-left: 1.5px solid var(--rule); color: #3e38d9; white-space: nowrap;
  background-image: linear-gradient(100deg, #3e38d9 0%, #3e38d9 40%, #8ff2ff 50%, #3e38d9 60%, #3e38d9 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ppShine 4.5s ease-in-out infinite; }
@keyframes ppBorder { to { background-position: 0 0, -300% 0; } }
@keyframes ppTwinkle { 0%, 100% { transform: scale(.88) rotate(0); opacity: .8; } 50% { transform: scale(1.06) rotate(30deg); opacity: 1; } }
@keyframes ppShine { 0% { background-position: 100% 0; } 60%, 100% { background-position: -50% 0; } }
.pp-by { margin: 22px auto 0; font: 500 15px/1.5 var(--font-nav); color: rgba(62,56,217,.75); }
.pp-by b { font: 600 19px/1.2 var(--font-display); letter-spacing: .03em; color: #3e38d9; }
.pp-by span { display: block; font-size: 13.5px; color: rgba(62,56,217,.55); }
.pp-agents { margin: 12px auto 0; font: 600 12px/1.5 var(--font-nav); letter-spacing: .14em; text-transform: uppercase; color: rgba(62,56,217,.7); }
.pp-agents b { font: 600 26px/1 var(--font-display); letter-spacing: 0; vertical-align: -3px; margin-right: 4px;
  background-image: linear-gradient(180deg, #0500a3, #8c88ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--ink); }
.pp-agents span { display: block; font-weight: 500; letter-spacing: .02em; text-transform: none; font-size: 13.5px; color: rgba(62,56,217,.6); }

/* preview options (not part of the design) */
.pp-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; max-width: 980px; margin: clamp(30px, calc(3.4 * var(--vw)), 46px) auto 0; padding: 16px 20px;
  border-radius: 20px; background: rgba(255,255,255,.7); box-shadow: inset 0 0 0 1.5px rgba(105,101,255,.16); }
.pp-opts__k { grid-column: 1 / -1; margin: 0; text-align: center; font: 600 10.5px/1 var(--font-nav); letter-spacing: .2em; text-transform: uppercase; color: rgba(105,101,255,.6); }
.pp-opt { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pp-opt > span { flex: none; width: 82px; font: 600 11px/1 var(--font-nav); letter-spacing: .12em; text-transform: uppercase; color: rgba(62,56,217,.6); }
.pp-seg { display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 4px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--rule); }
.pp-seg button { appearance: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: 999px; background: none; color: var(--brand); font: 600 12px/1 var(--font-nav); white-space: nowrap; }
.pp-seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }
.pp-seg button:focus-visible, .pp-tabs button:focus-visible, .pc-btn:focus-visible, .pc-tick:focus-visible, .pc-view:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pp-opt input[type=range] { flex: 1; min-width: 120px; accent-color: var(--brand); }
.pp-opt output { font: 600 12px/1 var(--font-nav); color: #3e38d9; font-variant-numeric: tabular-nums; width: 44px; }

/* tabs (only for "One at a time") */
.pp-tabs { display: none; justify-content: center; gap: 6px; margin: 34px auto 0; padding: 5px; border-radius: 999px; width: max-content; max-width: 100%; flex-wrap: wrap;
  background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 1.5px var(--rule), 0 12px 26px -18px rgba(62,56,217,.5); }
.pp[data-layout="tabs"] .pp-tabs { display: flex; }
.pp-tabs button { appearance: none; border: 0; cursor: pointer; padding: 11px 18px; border-radius: 999px; background: none; font: 600 13px/1 var(--font-nav); letter-spacing: .04em; color: var(--brand); }
.pp-tabs button[aria-selected="true"] { background: var(--brand); color: #fff; }

/* the three pipelines */
.pp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, calc(1.8 * var(--vw)), 26px); margin-top: clamp(30px, calc(3.4 * var(--vw)), 48px); }
.pc-pipe { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 26px 16px 24px; border-radius: 30px;
  background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.9), 0 24px 50px -34px rgba(62,56,217,.5); }
.pp[data-bg="per"] .pc-pipe { background: linear-gradient(180deg, var(--tint) 0%, var(--tint2) 100%); }
.pc-head { text-align: center; padding: 0 6px 6px; }
.pc-kicker { margin: 0; font: 600 11px/1 var(--font-nav); letter-spacing: .2em; color: var(--accent); }
.pc-head h3 { margin: 8px 0 0; font: 600 26px/1.15 var(--font-display); letter-spacing: .04em; color: #3e38d9; }
.pc-chip { display: inline-block; margin-top: 10px; padding: 6px 12px; border-radius: 999px; font: 600 10.5px/1 var(--font-nav); letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: var(--accent); }
.pc-chip--h { color: #b0507f; background: #fbe6f1; box-shadow: inset 0 0 0 1px #f3c4dc; }
.pc-blurb { margin: 12px auto 0; max-width: 30ch; font: 500 14.5px/1.45 var(--font-nav); color: rgba(62,56,217,.72); text-wrap: balance; }

/* the wheel */
.pc-wheelwrap { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 6px; margin-top: 10px; }
.pc-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-btn { appearance: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; background: #fff; color: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--rule), 0 8px 18px -12px rgba(62,56,217,.6); transition: transform .2s; }
.pc-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pc-btn:hover { transform: scale(1.06); }
.pc-count { display: flex; flex-direction: column; align-items: center; font: 600 11px/1.1 var(--font-nav); color: rgba(62,56,217,.55); }
.pc-count b { font: 600 15px/1 var(--font-display); color: #3e38d9; }
.pc-rail { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; }
.pc-rail::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: rgba(105,101,255,.18); }
.pc-tick { appearance: none; position: relative; width: 22px; height: 15px; border: 0; padding: 0; background: none; cursor: pointer; }
.pc-tick i { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(105,101,255,.35); transition: transform .3s, background-color .3s; }
.pc-tick.on i { background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent); transform: scale(1.3); }
.pc-tick.near i { box-shadow: inset 0 0 0 1.5px var(--c); }

.pc-view { position: relative; height: var(--vh, 330px); overflow: hidden; cursor: grab; -webkit-user-select: none; user-select: none; touch-action: none; outline: none;
  -webkit-mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); mask: linear-gradient(180deg, transparent 0, #000 22%, #000 78%, transparent 100%); }
.pc-view.is-dragging { cursor: grabbing; }
.pc-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }
.pc-spin { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.pc-tile { position: absolute; transform-style: preserve-3d; }
.pc-slab { position: absolute; inset: 0; transform-style: preserve-3d; }
/* thickness: stacked layers behind the face, with the same soft round corners as the posters */
.pc-layer { position: absolute; inset: 0; border-radius: 20px; background: color-mix(in srgb, var(--c) 52%, #fff);
  transform: translateZ(calc(var(--thick) * var(--k) * -.1px)); }
.pc-layer[style="--k:10"] { background: color-mix(in srgb, var(--c) 62%, #fff); box-shadow: 0 16px 26px -16px color-mix(in srgb, var(--c) 70%, #3e38d9); }
.pc-face { position: absolute; inset: 0; display: flex; align-items: center; gap: 14px; padding: 0 18px; border-radius: 20px; transform: translateZ(.5px);
  background: linear-gradient(180deg, #fff 0%, color-mix(in srgb, var(--cl) 60%, #fff) 100%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.pc-icon { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--cl); color: color-mix(in srgb, var(--c) 72%, #3a2f6e);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff); }
.pc-icon svg { width: 23px; height: 23px; }
.pc-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.pc-num { font: 600 10.5px/1 var(--font-nav); letter-spacing: .16em; color: color-mix(in srgb, var(--c) 75%, #3a2f6e); }
.pc-txt b { font: 600 19px/1.15 var(--font-display); letter-spacing: .02em; color: #3e38d9; }
.pc-human { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font: 600 9px/1 var(--font-nav); letter-spacing: .12em; text-transform: uppercase;
  color: #b0507f; background: #fbe6f1; box-shadow: inset 0 0 0 1px #f3c4dc; }
.pc-pipe[data-p="trad"] .pc-human { display: none; }
/* her glitter, top-left of each card — uses the site's own glitter shapes, so it follows them */
.pc-glyph { position: absolute; left: -7px; top: -8px; width: 18px; height: 18px; background: var(--c); transition: transform .6s var(--ease); }
.pc-glyph.g-star4 { -webkit-mask: var(--sp-star4-wh) center/contain no-repeat; mask: var(--sp-star4-wh) center/contain no-repeat; }
.pc-glyph.g-kite { -webkit-mask: var(--sp-kite-wh) center/contain no-repeat; mask: var(--sp-kite-wh) center/contain no-repeat; width: 14px; height: 18px; }
.pc-tile.is-front .pc-glyph { animation: ppGlyph 6s ease-in-out infinite; }
@keyframes ppGlyph { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(14deg) scale(1.08); } }
/* card styles */
.pp[data-tile="outline"] .pc-face { background: #fff; box-shadow: inset 0 0 0 2px var(--c); }
.pp[data-tile="outline"] .pc-glyph { display: none; }
.pp[data-tile="glow"] .pc-face { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 40%, #fff), 0 0 26px -4px color-mix(in srgb, var(--c) 70%, transparent); }
.pp[data-tile="glow"] .pc-glyph { display: none; }
.pc-hint { position: absolute; right: 2px; top: 6px; transform: none; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.85); font: 600 9.5px/1 var(--font-nav);
  letter-spacing: .16em; text-transform: uppercase; color: rgba(105,101,255,.7); pointer-events: none; transition: opacity .5s; z-index: 2; }
.pc-pipe.is-touched .pc-hint { opacity: 0; }

/* what the front card uses, listed underneath */
.pc-detail { margin-top: 12px; min-height: var(--dh, 190px); }
.pc-progs { text-align: center; }
.pc-progs__k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px; font: 600 11px/1 var(--font-nav); letter-spacing: .18em; text-transform: uppercase; color: #3e38d9; }
.pc-progs__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.pc-progs ul { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pc-progs li { position: relative; width: 220px; max-width: 100%; padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c, #b3afff) 35%, #fff), 0 8px 18px -14px rgba(62,56,217,.55);
  font: 500 14px/1.2 var(--font-nav); color: #3e38d9; opacity: 0; transform: translateY(6px); animation: ppIn .5s var(--ease) forwards; }
.pc-progs li:nth-child(2) { animation-delay: .06s; } .pc-progs li:nth-child(3) { animation-delay: .12s; } .pc-progs li:nth-child(4) { animation-delay: .18s; } .pc-progs li:nth-child(5) { animation-delay: .24s; }
@keyframes ppIn { to { opacity: 1; transform: none; } }

/* Stacked and One at a time: each pipeline gets a wide band — about it | wheel | programs */
.pp[data-layout="stack"] .pp-grid, .pp[data-layout="tabs"] .pp-grid { grid-template-columns: minmax(0, 1fr); }
.pp[data-layout="stack"] .pc-pipe, .pp[data-layout="tabs"] .pc-pipe { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) minmax(0, 260px); align-items: center; gap: 24px; padding: 30px 30px; }
.pp[data-layout="stack"] .pc-head, .pp[data-layout="tabs"] .pc-head { text-align: left; }
.pp[data-layout="stack"] .pc-blurb, .pp[data-layout="tabs"] .pc-blurb { margin-left: 0; }
.pp[data-layout="stack"] .pc-head h3, .pp[data-layout="tabs"] .pc-head h3 { font-size: 30px; }
.pp[data-layout="stack"] .pc-detail, .pp[data-layout="tabs"] .pc-detail { margin-top: 0; }
.pp[data-layout="stack"] .pp-grid { gap: 28px; }
.pp[data-layout="tabs"] .pc-pipe:not(.is-tab) { display: none; }

@media (max-width: 900px) {
  .pp-opts { grid-template-columns: minmax(0, 1fr); padding: 14px; }
  .pp-opt > span { width: 100%; }
  .pp-grid, .pp[data-layout] .pp-grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pp[data-layout] .pc-pipe { display: flex; padding: 24px 12px 22px; }
  .pp[data-layout="tabs"] .pc-pipe:not(.is-tab) { display: none; }
  .pp[data-layout] .pc-head { text-align: center; } .pp[data-layout] .pc-blurb { margin-left: auto; }
  .pp[data-layout] .pc-detail { margin-top: 12px; }
  .pp-tabs button { padding: 10px 12px; font-size: 12px; }
  .pc-txt b { font-size: 17px; }
  .pp-soon { gap: 10px; padding: 10px 16px 10px 13px; } .pp-soon span { font-size: 10.5px; letter-spacing: .14em; } .pp-soon b { font-size: 16px; padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) { .pp-soon, .pp-soon i, .pp-soon b, .pc-tile.is-front .pc-glyph, .pc-progs li { animation: none !important; opacity: 1; transform: none; } }

/* who does the work, under each title: leadership on the traditional side, the agents on the agentic side */
.pc-crew { margin: 16px auto 0; max-width: 330px; }
.pc-crew__k { margin: 0 0 8px; font: 600 10.5px/1 var(--font-nav); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.pc-crew ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pc-crew li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; background: rgba(255,255,255,.72); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.95), 0 8px 18px -16px rgba(62,56,217,.6); text-align: center; }
.pc-crew b { font: 600 17px/1 var(--font-display); color: #3e38d9; }
.pc-pipe:not([data-p="trad"]) .pc-crew b { font-size: 24px; background-image: linear-gradient(180deg, #0500a3, #8c88ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.pc-crew span { font: 500 11.5px/1.25 var(--font-nav); color: rgba(62,56,217,.7); }
.pp[data-layout="stack"] .pc-crew, .pp[data-layout="tabs"] .pc-crew { margin-left: 0; }
@media (max-width: 900px) { .pp[data-layout] .pc-crew { margin-left: auto; } }
/* long step names wrap to two lines on the cards */
.pc-txt b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- backgrounds taken from the home page's poster gradient ---- */
.pp[data-bg="home"] { background: linear-gradient(0deg, #fff 0%, #9e7fff 33%, #6a80ff 66%, #fff 100%); }
.pp[data-bg="home-soft"] { background: linear-gradient(0deg, #fff 0%, #dcd0ff 30%, #ccd5ff 68%, #fff 100%); }
.pp[data-bg="home-top"] { background: linear-gradient(180deg, #fff 0%, #c9bbff 14%, #b9c4ff 34%, #e9ecff 62%, #fff 100%); }
.pp[data-bg="home-mist"] { background:
  radial-gradient(42% 30% at 18% 28%, rgba(158,127,255,.32), transparent 70%),
  radial-gradient(40% 30% at 84% 46%, rgba(106,128,255,.30), transparent 70%),
  radial-gradient(48% 34% at 40% 82%, rgba(158,127,255,.22), transparent 70%), #fff; }
/* panels: tinted per pipeline, frosted glass, or white */
.pp[data-panel="tint"] .pc-pipe { background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 88%, transparent) 0%, color-mix(in srgb, var(--tint2) 88%, transparent) 100%); }
.pp[data-panel="glass"] .pc-pipe { background: rgba(255,255,255,.5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.pp[data-panel="white"] .pc-pipe { background: rgba(255,255,255,.96); }
.pp[data-bg="home"] .pp-title { background-image: linear-gradient(180deg, #0500a3 0%, #2b25b8 60%, #4b46d6 100%); }
.pp[data-bg="home"] .pp-sub, .pp[data-bg="home"] .pp-by { color: #2b25b8; }
.pp[data-bg="home"] .pp-by span { color: rgba(43,37,184,.75); }

/* ---- step icons: back to a colour fill, in the site's soft palette ---- */
.pc-icon { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 70%); color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--c) 35%, #fff), 0 8px 16px -8px var(--c); }
.pc-icon svg { stroke-width: 1.9; }

/* ---- phase cards (fewer boxes): a short line of the steps inside ---- */
.pc-sub { font: 500 11.5px/1.3 var(--font-nav); color: rgba(62,56,217,.6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-tile[data-set] { display: none; }
.pc-tile.is-set { display: block; }
.pc-step + .pc-step { margin-top: 16px; }
.pc-step .pc-progs__k::before { background: var(--c); }

/* ---- declutter options ---- */
/* programs */
.pp[data-prog="plain"] .pc-progs ul, .pp[data-prog="line"] .pc-progs ul { gap: 2px; }
.pp[data-prog="plain"] .pc-progs li, .pp[data-prog="line"] .pc-progs li { width: auto; padding: 3px 0; background: none; box-shadow: none; font-size: 15px; color: #3e38d9; }
.pp[data-prog="line"] .pc-progs ul { flex-direction: row; flex-wrap: wrap; justify-content: center; max-width: 360px; }
.pp[data-prog="line"] .pc-progs li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--c, #958fea); font-weight: 700; }
.pp[data-prog="plain"] .pc-progs__k, .pp[data-prog="line"] .pc-progs__k { margin-bottom: 8px; }
.pp[data-prog="hide"] .pc-detail { display: none; }
.pp[data-prog="hide"][data-layout="stack"] .pc-pipe, .pp[data-prog="hide"][data-layout="tabs"] .pc-pipe { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
@media (min-width: 901px) {
  .pp[data-layout="stack"][data-prog="plain"] .pc-progs, .pp[data-layout="tabs"][data-prog="plain"] .pc-progs { text-align: left; }
  .pp[data-layout="stack"][data-prog="plain"] .pc-progs ul, .pp[data-layout="tabs"][data-prog="plain"] .pc-progs ul { align-items: flex-start; padding-left: 16px; }
  .pp[data-layout="stack"][data-prog="line"] .pc-progs, .pp[data-layout="tabs"][data-prog="line"] .pc-progs { text-align: left; }
  .pp[data-layout="stack"][data-prog="line"] .pc-progs ul, .pp[data-layout="tabs"][data-prog="line"] .pc-progs ul { justify-content: flex-start; margin-left: 0; padding-left: 16px; }
}
/* team / agent counts */
.pp[data-crew="hide"] .pc-crew { display: none; }
.pp[data-crew="plain"] .pc-crew ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
.pp[data-crew="plain"] .pc-crew ul { align-items: center; } .pp[data-crew="plain"] .pc-crew li { flex-direction: row; align-items: center; line-height: 1.2; gap: 5px; padding: 0; background: none; box-shadow: none; }
.pp[data-crew="plain"] .pc-crew li:not(:last-child)::after { content: "·"; margin: 0 9px; color: var(--accent); font-weight: 700; }
.pp[data-crew="plain"] .pc-crew b, .pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew b { font-size: 16px; }
.pp[data-crew="plain"] .pc-pipe[data-p="trad"] .pc-crew span { display: none; }
.pp[data-crew="plain"] .pc-crew span { font-size: 13px; }
@media (min-width: 901px) { .pp[data-crew="plain"][data-layout="stack"] .pc-crew ul, .pp[data-crew="plain"][data-layout="tabs"] .pc-crew ul { justify-content: flex-start; } }
/* wheel controls */
.pp[data-rail="simple"] .pc-rail { display: none; }
.pp[data-rail="bare"] .pc-side { display: none; }
.pp[data-rail="bare"] .pc-wheelwrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) { .pp[data-layout] .pc-pipe { align-items: stretch; } }

/* ---- card fill + icon readability ---- */
.pp { --ink: #2f2a7a; }
.pc-tile { --deep: color-mix(in srgb, var(--c) 62%, var(--ink)); --mid: color-mix(in srgb, var(--c) 80%, var(--ink)); }
/* icons */
.pp[data-icon="invert"] .pc-icon { background: #fff; color: var(--deep); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff), 0 6px 14px -8px var(--deep); }
.pp[data-icon="deep"] .pc-icon { background: radial-gradient(circle at 50% 30%, var(--mid), var(--deep) 75%); color: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4.5px color-mix(in srgb, var(--c) 40%, #fff), 0 8px 16px -8px var(--deep); }
.pp[data-icon="invert"] .pc-icon svg, .pp[data-icon="deep"] .pc-icon svg { stroke-width: 2.2; width: 24px; height: 24px; }
/* full color */
.pp[data-fill="solid"] .pc-face { background: linear-gradient(160deg, var(--mid), var(--deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 24px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.pp[data-fill="solid"] .pc-layer { background: color-mix(in srgb, var(--c) 50%, var(--ink)); }
.pp[data-fill="solid"] .pc-txt b { color: #fff; }
.pp[data-fill="solid"] .pc-num { color: rgba(255,255,255,.75); }
.pp[data-fill="solid"] .pc-sub { color: rgba(255,255,255,.85); }
.pp[data-fill="solid"] .pc-human { background: #fff; }
.pp[data-fill="solid"] .pc-glyph { background: #fff; }
.pp[data-fill="solid"][data-icon="deep"] .pc-icon { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
/* full color, lighter */
.pp[data-fill="bright"] .pc-face { background: linear-gradient(160deg, var(--mid), var(--deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 24px -6px color-mix(in srgb, var(--c) 70%, transparent); }
.pp[data-fill="bright"] .pc-layer { background: color-mix(in srgb, var(--c) 50%, var(--ink)); }
.pp[data-fill="bright"] .pc-txt b { color: #fff; }
.pp[data-fill="bright"] .pc-num { color: rgba(255,255,255,.75); }
.pp[data-fill="bright"] .pc-sub { color: rgba(255,255,255,.85); }
.pp[data-fill="bright"] .pc-human { background: #fff; }
.pp[data-fill="bright"] .pc-glyph { background: #fff; }
.pp[data-fill="bright"][data-icon="deep"] .pc-icon { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.pp[data-fill="bright"] .pc-tile { --mid: color-mix(in srgb, var(--c) 94%, var(--ink)); --deep: color-mix(in srgb, var(--c) 76%, var(--ink)); }
.pp[data-fill="bright"] .pc-txt b { text-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 35%, transparent); }
/* soft tint */
.pp[data-fill="tint"] .pc-face { background: linear-gradient(160deg, #fff, var(--cl) 60%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 55%, #fff), 0 0 22px -8px color-mix(in srgb, var(--c) 70%, transparent); }
.pp[data-fill="tint"] .pc-num { color: var(--deep); }
/* color edge */
.pp[data-fill="band"] .pc-face { background: #fff; box-shadow: inset 7px 0 0 var(--mid), inset 0 0 0 1px color-mix(in srgb, var(--c) 35%, #fff), 0 0 22px -8px color-mix(in srgb, var(--c) 70%, transparent); padding-left: 24px; }
.pp[data-fill="band"] .pc-num { color: var(--deep); }

/* ---- ruler scroll (like the reels wheel): fine lines, a coloured marker that slides with the wheel ---- */
.pc-ruler { display: none; position: relative; width: 26px; margin: 4px 0; }
.pp[data-rail="ruler"] .pc-ruler { display: block; }
.pp[data-rail="ruler"] .pc-count, .pp[data-rail="ruler"] .pc-rail, .pp[data-rail="bare"] .pc-count { display: none; }
.pp[data-rail="simple"] .pc-ruler { display: none; }
.pc-rt { appearance: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 8px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.pc-rt i { display: block; width: 12px; height: 1.5px; border-radius: 2px; background: rgba(105,101,255,.55); transition: width .3s var(--ease), background-color .3s; }
.pc-rt--m { cursor: default; } .pc-rt--m i { width: 6px; background: rgba(105,101,255,.3); }
button.pc-rt:hover i { width: 16px; background: rgba(105,101,255,.7); }
.pc-rmark { position: absolute; left: 50%; top: 4px; width: 22px; height: 3px; margin: -1.5px 0 0 -11px; border-radius: 3px; pointer-events: none;
  background: color-mix(in srgb, var(--c, #958fea) 75%, #2f2a7a); box-shadow: 0 0 0 2px #fff, 0 0 10px 1px color-mix(in srgb, var(--c, #958fea) 60%, transparent); transition: background-color .35s; }
.pp[data-rail="ruler"] .pc-side { gap: 12px; }
/* ---- icon motion: small loops on the front card's icon ---- */
.pc-icon svg { transform-origin: 50% 55%; }
.pp[data-anim="float"]  .pc-tile.is-front .pc-icon svg, .pp[data-anim="mix"] .pc-tile.is-front:nth-of-type(4n+1) .pc-icon svg { animation: icFloat 1.8s ease-in-out infinite; }
.pp[data-anim="wiggle"] .pc-tile.is-front .pc-icon svg, .pp[data-anim="mix"] .pc-tile.is-front:nth-of-type(4n+2) .pc-icon svg { animation: icWiggle 1.95s ease-in-out infinite; }
.pp[data-anim="pop"]    .pc-tile.is-front .pc-icon svg, .pp[data-anim="mix"] .pc-tile.is-front:nth-of-type(4n+3) .pc-icon svg { animation: icPop 1.7s var(--ease) infinite; }
.pp[data-anim="draw"]   .pc-tile.is-front .pc-icon svg *, .pp[data-anim="mix"] .pc-tile.is-front:nth-of-type(4n) .pc-icon svg * { stroke-dasharray: 1; animation: icDraw 2.25s ease-in-out infinite; }
@keyframes icFloat { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-2px); } }
@keyframes icWiggle { 0%, 55%, 100% { transform: rotate(0); } 62% { transform: rotate(-11deg); } 72% { transform: rotate(9deg); } 82% { transform: rotate(-5deg); } 90% { transform: rotate(2deg); } }
@keyframes icPop { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.18); } 80% { transform: scale(.95); } 88% { transform: scale(1.04); } }
@keyframes icDraw { 0% { stroke-dashoffset: 1; } 45%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@media (prefers-reduced-motion: reduce) { .pp .pc-icon svg, .pp .pc-icon svg * { animation: none !important; } }


/* team + agents read the same in plain text: one bold line each */
.pc-cp { display: none; }
.pp[data-crew="plain"] .pc-crew b, .pp[data-crew="plain"] .pc-crew span { display: none; }
.pp[data-crew="plain"] .pc-crew .pc-cp { display: inline; font: 600 16px/1.2 var(--font-display); font-style: normal; color: #3e38d9; }
/* ---- description colour + glitter bullets (from the site's own glitter shapes) ---- */
.pc-step { --deep: color-mix(in srgb, var(--c) 62%, #2f2a7a); }
.pp:is([data-desc="glitter"],[data-desc="tint"],[data-desc="panel"]) .pc-progs li { padding-left: 20px; }
.pp:is([data-desc="glitter"],[data-desc="tint"],[data-desc="panel"]) .pc-progs li::before { content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 0;
  background: var(--c); -webkit-mask: var(--sp-star4-wh) center/contain no-repeat; mask: var(--sp-star4-wh) center/contain no-repeat; }
.pp:is([data-desc="glitter"],[data-desc="tint"],[data-desc="panel"]) .pc-progs__k::before { width: 12px; height: 14px; border-radius: 0; box-shadow: none; background: var(--c);
  -webkit-mask: var(--sp-kite-wh) center/contain no-repeat; mask: var(--sp-kite-wh) center/contain no-repeat; }
.pp:is([data-desc="tint"],[data-desc="panel"]) .pc-progs__k { color: var(--deep); }
.pp:is([data-desc="tint"],[data-desc="panel"]) .pc-progs li { color: var(--deep); }
.pp[data-desc="panel"] .pc-step { padding: 12px 18px 12px 14px; border-radius: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 16%, #fff), color-mix(in srgb, var(--c) 8%, #fff)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, #fff); }
.pp[data-desc="panel"] .pc-step + .pc-step { margin-top: 10px; }
@media (min-width: 901px) { .pp[data-desc="panel"][data-layout="stack"] .pc-progs ul { padding-left: 4px; } }
@media (max-width: 900px) { .pp[data-desc="panel"] .pc-step { display: inline-block; text-align: left; } .pp:is([data-desc="glitter"],[data-desc="tint"],[data-desc="panel"]) .pc-progs ul { align-items: flex-start; display: inline-flex; } }
.pp[data-desc="panel"] .pc-progs__k { letter-spacing: .12em; } .pp[data-desc="panel"] .pc-step { max-width: 100%; }


/* ---- edit words mode ---- */
.pp[data-edit="on"] [contenteditable="true"] { cursor: text; -webkit-user-select: text; user-select: text; outline: 1.5px dashed rgba(105,101,255,.35); outline-offset: 3px; border-radius: 4px; }
.pp[data-edit="on"] [contenteditable="true"]:hover { outline-color: rgba(105,101,255,.7); }
.pp[data-edit="on"] [contenteditable="true"]:focus { outline: 2px solid #6965ff; background: rgba(255,255,255,.18); }
.pp[data-edit="on"] .pc-view { cursor: default; }
.pp[data-fill="solid"][data-edit="on"] .pc-face [contenteditable], .pp[data-fill="bright"][data-edit="on"] .pc-face [contenteditable] { outline-color: rgba(255,255,255,.7); }
.pp[data-case="typed"] :is(.pp-sub, .pp-soon span, .pc-chip, .pc-progs__k, .pc-crew__k, .pc-kicker) { text-transform: none; }
.pp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pp-tools button { appearance: none; border: 0; cursor: pointer; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--brand); font: 600 12px/1 var(--font-nav); box-shadow: inset 0 0 0 1.5px rgba(105,101,255,.3); }
.pp-tools button:hover { background: var(--brand); color: #fff; }
.pp-tools output { font: 500 12px/1.3 var(--font-nav); color: rgba(62,56,217,.75); }

/* ---- arrows + a single number; no numbers on the cards, so the title sits centred ---- */
.pp[data-rail="simple"] .pc-count span { display: none; }
.pp[data-rail="simple"] .pc-count b { font: 600 18px/1 var(--font-display); color: var(--pa, #3e38d9); min-width: 1.2em; text-align: center; }
.pp[data-rail="simple"] .pc-side { gap: 12px; }
.pc-num { display: none; }
/* ---- icon colour strength ---- */
.pp[data-iconb="bright"] .pc-icon svg { filter: brightness(1.3) saturate(1.15); }
.pp[data-iconb="vivid"] .pc-icon svg { filter: saturate(1.6) brightness(1.05); }
.pp[data-iconb="deep"] .pc-icon svg { filter: brightness(.72) saturate(1.3); }
/* ---- each pipeline's own text colour (deep for text, light for gradient ends) ---- */
.pc-pipe[data-p="trad"]  { --pa: #9c7426; --pb: #d8ad5c; }
.pc-pipe[data-p="alin"]  { --pa: #2e8558; --pb: #86cfa5; }
.pc-pipe[data-p="agame"] { --pa: #b5622c; --pb: #f0b07f; }
.pp[data-pcolor="none"] .pc-pipe { --pa: #3e38d9; --pb: #8c88ff; }
.pp:is([data-pcolor="title"],[data-pcolor="both"],[data-pcolor="text"]) .pc-head h3 { color: var(--pa); }
.pp[data-pcolor="text"] .pc-pipe :is(.pc-kicker, .pc-crew__k, .pc-cp, .pc-crew b, .pc-progs__k, .pc-progs li, .pc-count b) { color: var(--pa); }
.pp[data-pcolor="text"] .pc-pipe .pc-blurb { color: color-mix(in srgb, var(--pa) 82%, #fff); }
.pp:is([data-pcolor="outline"],[data-pcolor="both"]) .pc-pipe { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pa) 45%, #fff), 0 24px 50px -30px color-mix(in srgb, var(--pa) 60%, transparent); }
.pp:is([data-pcolor="outline"],[data-pcolor="none"]) .pc-head h3 { color: #3e38d9; }
.pp[data-pcolor="outline"] .pc-pipe { --pa2: var(--pa); }
/* ---- title style ---- */
.pp:not([data-tstyle="plain"]) .pc-head h3 { background-image: linear-gradient(100deg, var(--pa) 15%, var(--pb) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-bottom: .06em; }
.pp[data-pcolor="outline"]:not([data-tstyle="plain"]) .pc-head h3 { background-image: linear-gradient(100deg, #3e38d9 15%, #8c88ff 100%); }
.pp[data-tstyle="line"] .pc-head h3::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--pa), var(--pb)); }
.pp[data-tstyle="glit"] .pc-head h3 { position: relative; padding-left: 30px; }
.pp[data-tstyle="glit"] .pc-head h3::before { content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -11px; background: linear-gradient(135deg, var(--pa), var(--pb)); -webkit-mask: var(--sp-star4-wh) center/contain no-repeat; mask: var(--sp-star4-wh) center/contain no-repeat; }
.pp[data-tstyle="big"] .pc-head h3 { font-size: 34px; letter-spacing: .02em; }
.pp[data-tstyle="big"][data-layout="stack"] .pc-head h3, .pp[data-tstyle="big"][data-layout="tabs"] .pc-head h3 { font-size: 38px; }
@media (max-width: 900px) { .pp[data-tstyle="line"] .pc-head h3::after { margin-left: auto; margin-right: auto; } }
.pp[data-pcolor="outline"] .pc-head h3::after, .pp[data-pcolor="none"] .pc-head h3::after { background: linear-gradient(90deg, #3e38d9, #8c88ff); }

/* ---- special loops: the animator walks, the sound pulses like a level meter ---- */
.pc-icon .ic-part { transform-box: view-box; }
.pc-icon .ic-legA, .pc-icon .ic-legB { transform-origin: 12px 13.5px; }
.pc-icon .ic-armA, .pc-icon .ic-armB { transform-origin: 12px 8.6px; }
.pc-icon .ic-legA { transform: rotate(22deg); } .pc-icon .ic-legB { transform: rotate(-22deg); }
.pc-icon .ic-armA { transform: rotate(-28deg); } .pc-icon .ic-armB { transform: rotate(28deg); }
.pc-icon .ic-bar { transform-box: fill-box; transform-origin: center; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic] svg, .pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic] svg * { animation: none; stroke-dasharray: none; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-body { animation: icBob .5s ease-in-out infinite alternate; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-legA { animation: icSwingA 1s ease-in-out infinite alternate; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-legB { animation: icSwingB 1s ease-in-out infinite alternate; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-armA { animation: icArmA 1s ease-in-out infinite alternate; }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-armB { animation: icArmB 1s ease-in-out infinite alternate; }
@keyframes icSwingA { from { transform: rotate(24deg); } to { transform: rotate(-24deg); } }
@keyframes icSwingB { from { transform: rotate(-24deg); } to { transform: rotate(24deg); } }
@keyframes icArmA { from { transform: rotate(-30deg); } to { transform: rotate(30deg); } }
@keyframes icArmB { from { transform: rotate(30deg); } to { transform: rotate(-30deg); } }
@keyframes icBob { from { transform: translateY(.6px); } to { transform: translateY(-.5px); } }
.pp:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="wave"] .ic-bar { animation: icLevel 1.125s ease-in-out infinite; }
.pc-icon .ic-bar:nth-child(1) { animation-delay: -.35s !important; } .pc-icon .ic-bar:nth-child(2) { animation-delay: -.1s !important; }
.pc-icon .ic-bar:nth-child(3) { animation-delay: -.6s !important; } .pc-icon .ic-bar:nth-child(4) { animation-delay: -.25s !important; } .pc-icon .ic-bar:nth-child(5) { animation-delay: -.5s !important; }
@keyframes icLevel { 0%, 100% { transform: scaleY(.35); } 30% { transform: scaleY(1); } 55% { transform: scaleY(.55); } 75% { transform: scaleY(.85); } }
@media (prefers-reduced-motion: reduce) { .pc-icon .ic-part, .pc-icon .ic-bar { animation: none !important; } }
/* programs sit level with the front card (stacked / one-at-a-time, desktop) */
@media (min-width: 901px) {
  .pp[data-layout="stack"] .pc-detail, .pp[data-layout="tabs"] .pc-detail { align-self: center; display: flex; flex-direction: column; justify-content: center; transform: translateY(5px); }
}
/* readable "28 AI agents" / "The team" labels */
.pp .pc-pipe .pc-crew__k { font: 700 12.5px/1.2 var(--font-nav); letter-spacing: .14em; color: var(--pa, #3e38d9); margin-bottom: 9px; }
.pp .pc-pipe .pc-kicker { font-size: 12px; font-weight: 700; color: var(--pa, #3e38d9); }

/* ---- pipeline titles are the hero: one line across the top of each panel ---- */
.pc-head--title { padding-bottom: 0; }
.pc-head--info { padding-top: 0; }
.pc-head--info .pc-blurb { margin-top: 10px; }
.pp .pc-pipe .pc-head--title h3 { margin: 0; font-size: 32px; line-height: 1.1; }
@media (min-width: 901px) {
  .pp[data-layout="stack"] .pc-head--title, .pp[data-layout="tabs"] .pc-head--title { grid-column: 1 / -1; margin-bottom: -6px; }
  .pp[data-layout="stack"] .pc-pipe .pc-head--title h3, .pp[data-layout="tabs"] .pc-pipe .pc-head--title h3 { font-size: 42px; letter-spacing: .03em; white-space: nowrap; }
  .pp[data-layout="stack"] .pc-pipe, .pp[data-layout="tabs"] .pc-pipe { padding-top: 34px; row-gap: 10px; }
  .pp[data-layout="stack"] .pc-head--info .pc-blurb, .pp[data-layout="tabs"] .pc-head--info .pc-blurb { margin-top: 0; }
}
.pp[data-tstyle="big"] .pc-pipe .pc-head--title h3 { font-size: 38px; }
@media (min-width: 901px) { .pp[data-tstyle="big"][data-layout="stack"] .pc-pipe .pc-head--title h3, .pp[data-tstyle="big"][data-layout="tabs"] .pc-pipe .pc-head--title h3 { font-size: 50px; } }
@media (max-width: 900px) { .pp .pc-pipe .pc-head--title h3 { font-size: 30px; } }

/* ---- programs in one bubble that points at the selected card ---- */
.pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-step { --deep: color-mix(in srgb, var(--c) 62%, #2f2a7a); position: relative; padding: 16px 18px 18px; border-radius: 20px; text-align: left;
  background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--c) 14%, #fff) 100%);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 45%, #fff), 0 14px 30px -18px color-mix(in srgb, var(--c) 80%, #2f2a7a); }
.pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-step + .pc-step { margin-top: 12px; }
.pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs__k { display: flex; margin: 0 0 12px; color: var(--deep); font-size: 11.5px; }
.pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs ul { padding: 0; margin: 0; }
.pp[data-prog="bubble"] .pc-progs ul { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 7px; }
.pp[data-prog="bubble"] .pc-progs li { width: auto; padding: 7px 13px; border-radius: 999px; background: #fff; font-size: 14.5px; font-weight: 600; color: var(--deep);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 35%, #fff); }
.pp[data-prog="bubblelist"] .pc-progs ul { align-items: flex-start; gap: 6px; }
.pp[data-prog="bubblelist"] .pc-progs li { width: auto; padding: 0 0 0 16px; background: none; box-shadow: none; font-size: 15px; font-weight: 600; color: var(--deep); }
.pp[data-prog="bubblelist"] .pc-progs li::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--c); }
/* the little pointer toward the card (desktop, side-by-side columns) */
@media (min-width: 901px) {
  .pp[data-layout="stack"]:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs .pc-step:first-child::before,
  .pp[data-layout="tabs"]:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs .pc-step:first-child::before {
    content: ""; position: absolute; left: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; transform: rotate(45deg); border-radius: 3px;
    background: #fff; box-shadow: -1.5px 1.5px 0 0 color-mix(in srgb, var(--c) 45%, #fff); }
  .pp[data-layout="stack"]:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-detail, .pp[data-layout="tabs"]:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-detail { padding-left: 4px; }
}
@media (max-width: 900px) { .pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs { max-width: 340px; margin: 0 auto; } }
.pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs__k { line-height: 1.4; align-items: flex-start; } .pp:is([data-prog="bubble"],[data-prog="bubblelist"]) .pc-progs__k::before { margin-top: 4px; flex: none; }

/* ---- page heading: same look as her name + tagline on the home page ---- */
.pp .pp-title { font-size: clamp(2rem, calc(5.3 * var(--vw)), 64px); line-height: 1.05; letter-spacing: .07em; }
.pp .pp-sub { margin: 12px 0 0; font: 600 clamp(.96rem, calc(2.77 * var(--vw)), 17px)/1.55 var(--font-nav); letter-spacing: .09em; text-transform: none; color: var(--brand); }

/* in development / coming soon: bigger, and "In development" reads clearly */
.pp .pp-soon { gap: 16px; margin-top: 26px; padding: 15px 30px 15px 22px; }
.pp .pp-soon span { font-size: 15px; font-weight: 700; letter-spacing: .16em; color: #4a44e0; }
.pp .pp-soon b { font-size: 24px; padding-left: 16px; }
.pp .pp-soon i { width: 26px; height: 26px; background: none; position: relative; }
.pp .pp-soon i::before { content: ""; position: absolute; inset: 0; -webkit-mask: var(--sp-star4-wh) center/contain no-repeat; mask: var(--sp-star4-wh) center/contain no-repeat; background: #ff9a8b; }
.pp[data-star="aq"] .pp-soon i::before { background: #4fd8ea; }
.pp[data-star="mix"] .pp-soon i::before { background: linear-gradient(135deg, #ff9a8b, #b3afff, #4fd8ea); background-size: 300% 300%; animation: ppStarShift 4s ease-in-out infinite alternate; }
@keyframes ppStarShift { from { background-position: 0 0; } to { background-position: 100% 100%; } }
@media (max-width: 520px) { .pp .pp-soon { padding: 12px 20px 12px 16px; gap: 12px; } .pp .pp-soon span { font-size: 12.5px; } .pp .pp-soon b { font-size: 20px; } }

/* ---- pipeline title palettes ---- */
.pp[data-tpal="rich"] .pc-pipe[data-p="trad"]  { --pa: #8a5a0f; --pb: #dd9f2e; }
.pp[data-tpal="rich"] .pc-pipe[data-p="alin"]  { --pa: #0d7550; --pb: #36c088; }
.pp[data-tpal="rich"] .pc-pipe[data-p="agame"] { --pa: #ad4710; --pb: #f2883a; }
.pp[data-tpal="pastel"] .pc-pipe[data-p="trad"]  { --pa: #b0802c; --pb: #efcd88; }
.pp[data-tpal="pastel"] .pc-pipe[data-p="alin"]  { --pa: #3d9a6d; --pb: #a6e1c1; }
.pp[data-tpal="pastel"] .pc-pipe[data-p="agame"] { --pa: #c46a32; --pb: #f6bd93; }
.pp[data-tpal="topurple"] .pc-pipe { --pb: #7d78ff; }
.pp[data-tpal="brand"] .pc-pipe { --pa: #3e38d9; --pb: #8c88ff; }
/* ---- pipeline title gradient ---- */
.pp .pc-pipe { --tg: linear-gradient(180deg, color-mix(in srgb, var(--pa) 72%, #120a40) 0%, var(--pa) 55%, var(--pb) 100%); }
.pp[data-tgrad="lr"] .pc-pipe { --tg: linear-gradient(100deg, var(--pa) 15%, var(--pb) 100%); }
.pp[data-tgrad="soft"] .pc-pipe { --tg: linear-gradient(100deg, var(--pa) 0%, color-mix(in srgb, var(--pa) 55%, var(--pb)) 100%); }
.pp[data-tgrad="shine"] .pc-pipe { --tg: linear-gradient(100deg, var(--pa) 0%, var(--pa) 35%, var(--pb) 50%, var(--pa) 65%, var(--pa) 100%); }
.pp[data-tpal="brand"][data-tgrad="tb"] .pc-pipe { --tg: linear-gradient(180deg, #0500a3 0%, #3e38d9 55%, #8c88ff 100%); }
.pp:not([data-tstyle="plain"]):not([data-pcolor="none"]):not([data-pcolor="outline"]) .pc-pipe .pc-head h3 { background-image: var(--tg); }
.pp[data-tgrad="shine"]:not([data-tstyle="plain"]) .pc-pipe .pc-head h3 { background-size: 250% 100%; animation: ppShine 5s ease-in-out infinite; }
.pp:not([data-pcolor="none"]):not([data-pcolor="outline"]) .pc-pipe .pc-head h3::after { background: linear-gradient(90deg, var(--pa), var(--pb)); }

/* ---- wheel number can follow the selected card's colour ---- */
.pc-count b { transition: color .35s; }
.pp[data-numc="card"] .pc-pipe .pc-count b { color: color-mix(in srgb, var(--cardc, #958fea) 72%, #2f2a7a); }
.pp[data-numc="card"] .pc-pipe .pc-btn { color: color-mix(in srgb, var(--cardc, #958fea) 72%, #2f2a7a); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cardc, #958fea) 40%, #fff), 0 6px 14px -8px var(--cardc, #958fea); transition: color .35s, box-shadow .35s; }

/* ---- agent names ---- */
.pc-cp .pre:empty { display: none; }
.pp[data-agent="agentic"] .pc-cp .pre, .pp[data-agent="ai"] .pc-cp .pre { display: inline; }
.pp[data-agent="agentic"] .pc-cp .pre::before { content: "Agentic "; }
.pp[data-agent="ai"] .pc-cp .pre::before { content: "AI "; }
.pp:is([data-agent="agentic"],[data-agent="ai"])[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew ul { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; row-gap: 4px; }
.pp:is([data-agent="agentic"],[data-agent="ai"])[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew li::after { content: none !important; }
@media (max-width: 900px) { .pp:is([data-agent="agentic"],[data-agent="ai"])[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew ul { align-items: center; } }

/* ---- softer panel backgrounds (less glare than pure white) ---- */
.pp[data-panel="warm"] .pc-pipe { background: linear-gradient(180deg, #fffdf9 0%, #faf6ef 100%); }
.pp[data-panel="mist"] .pc-pipe { background: linear-gradient(180deg, #faf9ff 0%, #efedff 100%); }
.pp[data-panel="wash"] .pc-pipe { background:
  radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%),
  radial-gradient(110% 90% at 100% 100%, color-mix(in srgb, var(--accent) 12%, transparent) 0%, transparent 55%),
  linear-gradient(180deg, #fdfcff, #f6f5ff); }
.pp[data-panel="spot"] .pc-pipe { background: radial-gradient(70% 80% at 55% 55%, #ffffff 0%, #f7f6ff 55%, color-mix(in srgb, var(--accent) 14%, #eeecff) 100%); }
.pp[data-panel="dots"] .pc-pipe { background:
  radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent) 1px, transparent 1.6px) 0 0 / 18px 18px,
  linear-gradient(180deg, #fdfcff, #f5f4ff); }
.pp .pc-crew .pc-cp .pre { font: inherit; color: inherit; letter-spacing: inherit; }

/* options panel retired: the current picks are locked in */
.pp .pp-opts[hidden] { display: none !important; }

/* ---- small "try these" panel ---- */
.pp .pp-opts--next { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
/* ---- bigger arrows + number; number takes the selected card's colour ---- */
.pp .pc-pipe .pc-btn { width: 42px; height: 42px; }
.pp .pc-pipe .pc-btn svg { width: 21px; height: 21px; }
.pp[data-rail="simple"] .pc-pipe .pc-count b { font-size: 26px; }
.pp[data-rail="simple"] .pc-side { gap: 14px; }
.pc-wheelwrap { grid-template-columns: 48px minmax(0, 1fr); }

/* ---- paragraph + team options ---- */
.pp:is([data-left="big"],[data-left="top"],[data-left="under"]) .pc-pipe .pc-blurb { font-size: 17px; line-height: 1.5; max-width: 32ch; color: rgba(62,56,217,.85); }
.pp:is([data-left="big"],[data-left="top"],[data-left="under"]) .pc-pipe .pc-crew__k { font-size: 13.5px; }
.pp:is([data-left="big"],[data-left="top"],[data-left="under"]) .pc-pipe .pc-crew .pc-cp { font-size: 19px; }
@media (min-width: 901px) {
  .pp[data-left="top"][data-layout="stack"] .pc-head--info { align-self: start; padding-top: 18px; }
  .pp[data-left="under"][data-layout="stack"] .pc-pipe { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  .pp[data-left="under"][data-layout="stack"] .pc-head--info { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 40px; margin-top: 4px; }
  .pp[data-left="under"][data-layout="stack"] .pc-head--info .pc-blurb { max-width: 44ch; margin: 0; }
  .pp[data-left="under"][data-layout="stack"] .pc-head--info .pc-crew { margin: 0; max-width: none; display: flex; align-items: baseline; gap: 14px; }
  .pp[data-left="under"][data-layout="stack"] .pc-head--info .pc-crew__k { margin: 0; white-space: nowrap; }
  .pp[data-left="under"][data-layout="stack"] .pc-wheelwrap { justify-self: end; width: min(100%, 560px); }
  .pp[data-left="under"][data-layout="stack"] .pc-detail { justify-self: start; }
}
/* ---- text size ---- */
.pp[data-tsize="m"] .pc-pipe .pc-blurb { font-size: calc(14.5px * 1.15); }
.pp[data-tsize="m"] .pc-pipe .pc-progs li { font-size: calc(15px * 1.15); }
.pp[data-tsize="m"] .pc-pipe .pc-progs__k { font-size: calc(11px * 1.15); }
.pp[data-tsize="m"] .pc-pipe .pc-crew .pc-cp { font-size: calc(16px * 1.15); }
.pp[data-tsize="l"] .pc-pipe .pc-blurb { font-size: calc(14.5px * 1.3); }
.pp[data-tsize="l"] .pc-pipe .pc-progs li { font-size: calc(15px * 1.3); }
.pp[data-tsize="l"] .pc-pipe .pc-progs__k { font-size: calc(11px * 1.3); }
.pp[data-tsize="l"] .pc-pipe .pc-crew .pc-cp { font-size: calc(16px * 1.3); }
.pp:is([data-left="big"],[data-left="top"],[data-left="under"])[data-tsize="m"] .pc-pipe .pc-blurb { font-size: 18.5px; }
.pp:is([data-left="big"],[data-left="top"],[data-left="under"])[data-tsize="l"] .pc-pipe .pc-blurb { font-size: 20px; }
.pp:is([data-left="big"],[data-left="top"],[data-left="under"])[data-tsize="l"] .pc-pipe .pc-crew .pc-cp { font-size: 21px; }

/* ---- real gold for release / ship / delivery ---- */
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-face {
  background: linear-gradient(115deg, #7a5214 0%, #b8862c 18%, #f3d27a 34%, #fff3c4 44%, #d8a840 56%, #a0731f 74%, #e6c066 90%, #8a5f18 100%);
  background-size: 220% 100%; animation: goldSheen 6s ease-in-out infinite;
  box-shadow: inset 0 1px 0 rgba(255,250,220,.8), inset 0 -2px 6px rgba(90,60,10,.35), 0 10px 26px -10px rgba(150,105,25,.7); }
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-layer { background: #8a6220; }
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-txt b { color: #fff; text-shadow: 0 1px 2px rgba(80,50,5,.65), 0 0 12px rgba(120,80,10,.35); }
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-icon { background: linear-gradient(160deg, #fffaf0, #f6e7c0); color: #8a5f18; box-shadow: 0 0 0 1.5px rgba(255,240,200,.9), 0 4px 10px -4px rgba(90,60,10,.6); }
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-icon svg { filter: none; }
@keyframes goldSheen { 0%, 100% { background-position: 0% 0; } 50% { background-position: 100% 0; } }
@media (prefers-reduced-motion: reduce) { .pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-face { animation: none; } }

/* ---- page title: the exact gradient of her name ---- */
.pp .pp-title, .pp[data-bg="home"] .pp-title { background-image: linear-gradient(180deg, #0500a3 0%, #3e38d9 55%, #8c88ff 100%); line-height: 1.08; padding-bottom: .06em; }

/* ---- arrows + number 25% smaller; arrows in the title colour, only the number follows the card ---- */
.pp .pc-pipe .pc-btn, .pp[data-numc="card"] .pc-pipe .pc-btn { width: 32px; height: 32px; color: var(--pa, #3e38d9); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--pa, #3e38d9) 30%, #fff), 0 6px 14px -8px color-mix(in srgb, var(--pa, #3e38d9) 70%, transparent); }
.pp .pc-pipe .pc-btn svg { width: 16px; height: 16px; }
.pp[data-rail="simple"] .pc-pipe .pc-count b { font-size: 20px; }
.pp[data-rail="simple"] .pc-side { gap: 11px; }
.pc-wheelwrap { grid-template-columns: 40px minmax(0, 1fr); }

/* ---- shine speed (gold + reflections) ---- */
.pp { --shine: 16s; }
.pp[data-gspeed="med"] { --shine: 9s; } .pp[data-gspeed="fast"] { --shine: 5s; }
.pp[data-gold="metal"] .pc-tile[data-role="release"] .pc-face { animation-duration: var(--shine); }
.pp[data-gspeed="off"][data-gold="metal"] .pc-tile[data-role="release"] .pc-face { animation: none; background-position: 30% 0; }

/* ---- candy tablet: glossy, bevelled, a little raised ---- */
.pp[data-gloss="candy"] .pc-face { border-radius: 22px; box-shadow: inset 0 2px 1px rgba(255,255,255,.55), inset 0 -4px 10px color-mix(in srgb, var(--deep, #333) 45%, transparent), inset 0 0 0 1px rgba(255,255,255,.25), 0 14px 24px -12px color-mix(in srgb, var(--c) 85%, #2f2a7a); }
.pp[data-gloss="candy"] .pc-face::before { content: ""; position: absolute; left: 10px; right: 10px; top: 5px; height: 42%; border-radius: 16px 16px 40% 40% / 16px 16px 100% 100%; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.06)); }
.pp[data-gloss="candy"] .pc-layer { border-radius: 22px; }

/* ---- reflection: a soft band of light across the card ---- */
.pc-face { overflow: hidden; }
.pp:not([data-refl="none"]) .pc-face::after { content: ""; position: absolute; inset: -20% -10%; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.42) 45%, rgba(255,255,255,.12) 52%, transparent 62%); background-size: 260% 100%; background-position: 70% 0; }
.pp[data-refl="focus"] .pc-tile:not(.is-front) .pc-face::after { opacity: 0; }
.pp[data-refl="focus"] .pc-tile.is-front .pc-face::after, .pp[data-refl="always"] .pc-face::after { animation: reflSweep var(--shine) ease-in-out infinite; }
.pp[data-gspeed="off"] .pc-face::after { animation: none !important; }
@keyframes reflSweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .pp .pc-face::after { animation: none !important; } }

/* ---- programs under the team on the left; the wheel gets the room and bigger cards ---- */
@media (min-width: 901px) {
  .pp[data-progpos="left"][data-layout="stack"] .pc-pipe, .pp[data-progpos="left"][data-layout="tabs"] .pc-pipe {
    grid-template-columns: minmax(0, 330px) minmax(0, 1fr); grid-template-areas: "title title" "info wheel" "detail wheel"; grid-template-rows: auto auto 1fr; align-items: start; }
  .pp[data-progpos="left"] .pc-head--title { grid-area: title; }
  .pp[data-progpos="left"] .pc-head--info { grid-area: info; align-self: start; }
  .pp[data-progpos="left"] .pc-wheelwrap { grid-area: wheel; align-self: center; margin-top: 0; }
  .pp[data-progpos="left"] .pc-detail { grid-area: detail; align-self: start; transform: none; min-height: 0; margin-top: 18px; display: block; }
  .pp[data-progpos="left"] .pc-progs, .pp[data-progpos="left"] .pc-progs__k { text-align: left; }
  .pp[data-progpos="left"] .pc-progs ul { align-items: flex-start; padding-left: 16px; }
  .pp[data-progpos="left"] .pc-head--info .pc-blurb { margin-top: 6px; }
}

/* ---- panel backgrounds ---- */
.pp[data-pbg="color"] .pc-pipe { background: linear-gradient(160deg, #ffffff 0%, #ffffff 35%, color-mix(in srgb, var(--pb) 22%, #fff) 100%); }
.pp[data-pbg="gray"] .pc-pipe { background: linear-gradient(180deg, #ffffff 0%, #f1f1f5 100%); }
.pp[data-pbg="glitter"] .pc-pipe { background: linear-gradient(180deg, #ffffff 0%, color-mix(in srgb, var(--pb) 8%, #fff) 100%); }
.pp[data-pbg="glitter"] .pc-pipe::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: .55;
  background: linear-gradient(135deg, var(--pa), var(--pb));
  -webkit-mask: var(--sp-star4-wh) 94% 9% / 22px no-repeat, var(--sp-kite-wh) 88% 16% / 11px 15px no-repeat, var(--sp-star4-wh) 97% 22% / 12px no-repeat,
                var(--sp-kite-wh) 3% 88% / 12px 16px no-repeat, var(--sp-star4-wh) 7% 95% / 17px no-repeat, var(--sp-star4-wh) 52% 97% / 10px no-repeat;
          mask: var(--sp-star4-wh) 94% 9% / 22px no-repeat, var(--sp-kite-wh) 88% 16% / 11px 15px no-repeat, var(--sp-star4-wh) 97% 22% / 12px no-repeat,
                var(--sp-kite-wh) 3% 88% / 12px 16px no-repeat, var(--sp-star4-wh) 7% 95% / 17px no-repeat, var(--sp-star4-wh) 52% 97% / 10px no-repeat;
  animation: ppTw 5s ease-in-out infinite alternate; }
.pp[data-pbg="glitter"] .pc-pipe > * { position: relative; z-index: 1; }
@keyframes ppTw { from { opacity: .35; } to { opacity: .7; } }

/* ---- "In development · Coming soon" now sits on the agentic pipelines' title rows ---- */
.pc-head--title { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 14px; }
.pp .pc-pipe .pp-soon--pipe { margin: 0 0 0 auto; padding: 11px 22px 11px 16px; gap: 12px; align-self: center; }
.pp .pc-pipe .pp-soon--pipe span { font-size: 12.5px; }
.pp .pc-pipe .pp-soon--pipe b { font-size: 19px; padding-left: 12px; }
.pp .pc-pipe .pp-soon--pipe i { width: 22px; height: 22px; }
@media (max-width: 900px) {
  .pc-head--title { flex-direction: column; }
  .pp .pc-pipe .pp-soon--pipe { margin: 4px auto 0; }
}
@media (max-width: 520px) { .pp .pc-pipe .pp-soon--pipe span { font-size: 11px; } .pp .pc-pipe .pp-soon--pipe b { font-size: 17px; } }

/* ---- team / agents block: one consistent look in every pipeline ---- */
.pp .pc-pipe .pc-head--info .pc-crew { margin-top: 20px; }
.pp .pc-pipe .pc-head--info .pc-crew__k { font: 600 17px/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase; color: var(--pa, #3e38d9); margin: 0 0 9px; }
.pp .pc-pipe .pc-head--info .pc-crew .pc-cp { font: 600 16px/1.3 var(--font-display); color: #3e38d9; }
.pp .pc-pipe .pc-head--info .pc-crew ul { row-gap: 5px; }
/* grouping */
.pp[data-grp="line"] .pc-pipe .pc-head--info .pc-crew { padding: 2px 0 2px 16px; box-shadow: inset 3px 0 0 color-mix(in srgb, var(--pa) 55%, #fff); }
.pp[data-grp="rule"] .pc-pipe .pc-head--info .pc-crew { display: inline-block; }
.pp[data-grp="rule"] .pc-pipe .pc-head--info .pc-crew__k { padding-bottom: 9px; margin-bottom: 11px; box-shadow: inset 0 -1.5px 0 color-mix(in srgb, var(--pa) 35%, #fff); }
.pp[data-grp="box"] .pc-pipe .pc-head--info .pc-crew { display: inline-block; padding: 14px 18px 15px; border-radius: 16px; background: color-mix(in srgb, var(--pa) 6%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pa) 22%, #fff); }
@media (max-width: 900px) {
  .pp[data-grp="line"] .pc-pipe .pc-head--info .pc-crew { box-shadow: none; padding: 14px 0 0; position: relative; }
  .pp[data-grp="line"] .pc-pipe .pc-head--info .pc-crew::before { content: ""; position: absolute; top: 0; left: 50%; width: 48px; height: 3px; margin-left: -24px; border-radius: 3px; background: color-mix(in srgb, var(--pa) 55%, #fff); }
}
/* paragraph weight + colour */
.pp:is([data-para="bold"],[data-para="boldcolor"]) .pc-pipe .pc-head--info .pc-blurb { font-weight: 600; }
.pp:is([data-para="bold"],[data-para="boldcolor"]) .pc-pipe .pc-head--info .pc-crew .pc-cp { font-weight: 500; }
.pp:is([data-para="color"],[data-para="boldcolor"]) .pc-pipe .pc-head--info .pc-blurb { color: var(--pa); }
@media (min-width: 901px) { .pp[data-progpos="left"] .pc-wheelwrap { justify-self: center; width: min(100%, 620px); } }

/* ---- program heading marker: her sparkle instead of the glowing dot ---- */
.pp .pc-pipe .pc-progs__k::before { width: 12px; height: 12px; border-radius: 0; box-shadow: none; background: var(--c);
  -webkit-mask: var(--sp-star4-wh) center/contain no-repeat; mask: var(--sp-star4-wh) center/contain no-repeat; }

/* ---- less empty space: the title sits beside the wheel, right above the paragraph ---- */
@media (min-width: 901px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-pipe { grid-template-columns: minmax(0, 360px) minmax(0, 1fr) minmax(0, 260px); grid-template-areas: "title wheel detail" "info wheel detail"; grid-template-rows: auto 1fr; row-gap: 0; padding-top: 30px; padding-bottom: 26px; align-items: start; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"][data-progpos="left"] .pc-pipe { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); grid-template-areas: "title wheel" "info wheel" "detail wheel"; grid-template-rows: auto auto 1fr; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-head--title { grid-area: title; grid-column: auto; margin: 0; flex-direction: column; align-items: flex-start; row-gap: 12px; padding-top: 6px; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-pipe .pc-head--title h3 { font-size: 34px; letter-spacing: .02em; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-head--info { grid-area: info; align-self: start; padding-top: 14px; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-wheelwrap { grid-area: wheel; align-self: center; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"] .pc-detail { grid-area: detail; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"]:not([data-progpos="left"]) .pc-detail { align-self: center; }
  .pp:is([data-compact="side"],[data-compact="tight"]) .pc-pipe .pp-soon--pipe { order: 2; margin: 2px 0 0; padding: 8px 16px 8px 12px; gap: 9px; }
  .pp:is([data-compact="side"],[data-compact="tight"]) .pc-pipe .pp-soon--pipe span { font-size: 11px; letter-spacing: .12em; }
  .pp:is([data-compact="side"],[data-compact="tight"]) .pc-pipe .pp-soon--pipe b { font-size: 16px; padding-left: 9px; }
  .pp:is([data-compact="side"],[data-compact="tight"]) .pc-pipe .pp-soon--pipe i { width: 18px; height: 18px; }
  .pp[data-compact="tight"][data-layout="stack"] .pc-pipe { padding-top: 24px; padding-bottom: 18px; }
  .pp[data-compact="tight"] .pc-pipe .pc-head--info .pc-crew { margin-top: 14px; }
}
@media (min-width: 901px) { .pp:is([data-compact="side"],[data-compact="tight"]) .pc-pipe .pp-soon--pipe { align-self: flex-start; } }

/* ---- card thickness: more slices so a thick edge stays smooth ---- */
.pc-layer { transform: translateZ(calc(var(--thick) * var(--k) * -1px / 16)); }
.pc-layer--back { box-shadow: 0 16px 26px -16px color-mix(in srgb, var(--c) 70%, #3e38d9); }
/* edge colour like the poster ring: light lavender at the top to a deeper lavender at the bottom */
.pp[data-tedge="poster"] .pc-tile:not([data-role="release"]) .pc-layer { background: linear-gradient(180deg, #eeedff 0%, #cfccff 55%, #aeaaff 100%); }
.pp[data-tedge="match"] .pc-tile:not([data-role="release"]) .pc-layer { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 35%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 70%, #2f2a7a) 100%); }
.pp[data-tedge="poster"][data-gold="metal"] .pc-tile[data-role="release"] .pc-layer, .pp[data-tedge="match"][data-gold="metal"] .pc-tile[data-role="release"] .pc-layer { background: linear-gradient(180deg, #f3d27a, #c9962e 55%, #8a5f18); }

/* ---- the box keeps one height: the program list always has room for its longest list ---- */
.pp[data-progpos="left"] .pc-pipe .pc-detail { min-height: var(--dh, 0px); }

/* ---- arrows + number 20% bigger ---- */
.pp .pc-pipe .pc-btn, .pp[data-numc="card"] .pc-pipe .pc-btn { width: 38px; height: 38px; }
.pp .pc-pipe .pc-btn svg { width: 19px; height: 19px; }
.pp[data-rail="simple"] .pc-pipe .pc-count b { font-size: 24px; }
.pc-wheelwrap { grid-template-columns: 46px minmax(0, 1fr); }

/* ---- team / agent names in the same colour as their heading ---- */
.pp .pc-pipe .pc-head--info .pc-crew .pc-cp { color: var(--pa, #3e38d9); }

/* ---- tighter, centred box: less white space between the text and the wheel ---- */
@media (min-width: 901px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"][data-progpos="left"] .pc-pipe {
    grid-template-columns: minmax(0, 340px) minmax(0, 600px); justify-content: center; column-gap: 36px; max-width: 1060px; margin-left: auto; margin-right: auto; width: 100%; }
  .pp:is([data-compact="side"],[data-compact="tight"])[data-progpos="left"] .pc-wheelwrap { width: 100%; justify-self: stretch; }
}

/* fade each piece of a card, not the card itself, so its 3D thickness isn't flattened */
.pc-tile > .pc-slab > .pc-layer, .pc-tile > .pc-slab > .pc-face { opacity: var(--o, 1); }

.pp[data-tedge="gray"] .pc-tile:not([data-role="release"]) .pc-layer { background: linear-gradient(180deg, #f4f4f7 0%, #dcdce3 55%, #bfbfca 100%); }
.pp[data-tedge="bp"] .pc-tile:not([data-role="release"]) .pc-layer { background: linear-gradient(180deg, #e3e3ff 0%, #b3b1f2 55%, #8d88e6 100%); }
.pp[data-tedge="candy"] .pc-tile:not([data-role="release"]) .pc-layer { background: linear-gradient(180deg, color-mix(in srgb, var(--c) 55%, #fff) 0%, color-mix(in srgb, var(--c) 85%, #fff) 45%, color-mix(in srgb, var(--c) 80%, #2f2a7a) 100%); }
.pp:is([data-tedge="gray"],[data-tedge="bp"],[data-tedge="candy"])[data-gold="metal"] .pc-tile[data-role="release"] .pc-layer { background: linear-gradient(180deg, #f3d27a, #c9962e 55%, #8a5f18); }

/* ---- short step description (Traditional), between the step name and its programs ---- */
.pc-desc { margin: -4px 0 10px; max-width: 34ch; font: 500 14.5px/1.45 var(--font-nav); color: rgba(62,56,217,.78); text-align: left; }
.pp[data-tsize="m"] .pc-desc { font-size: 15.5px; } .pp[data-tsize="l"] .pc-desc { font-size: 17px; }
@media (max-width: 900px) { .pc-desc { margin-left: auto; margin-right: auto; text-align: center; } }
/* programs on the right: the heading stays put; only the list grows downward.
   The block always has room for the longest list and sits centred beside the wheel. */
@media (min-width: 901px) {
  .pp[data-progpos="right"]:is([data-layout="stack"],[data-layout="tabs"]) .pc-pipe .pc-detail { align-self: center; display: flex; flex-direction: column; justify-content: flex-start; min-height: var(--dh, 0px); transform: none; }
}
/* one left edge for the step name, its description and its programs (all line up with the heading text) */
@media (min-width: 901px) {
  .pp:is([data-layout="stack"],[data-layout="tabs"]) .pc-pipe .pc-progs .pc-desc { padding-left: 20px; max-width: calc(34ch + 20px); }
  .pp:is([data-layout="stack"],[data-layout="tabs"]) .pc-pipe .pc-progs ul { padding-left: 20px !important; margin-left: 0; }
  .pp:is([data-layout="stack"],[data-layout="tabs"]) .pc-pipe .pc-progs li { padding-left: 0; }
}
/* phones: the "In development · Coming soon" badge always fits inside its panel */
@media (max-width: 520px) {
  .pp .pc-pipe .pp-soon--pipe { max-width: 100%; box-sizing: border-box; padding: 9px 14px 9px 11px; gap: 8px; }
  .pp .pc-pipe .pp-soon--pipe i { width: 18px; height: 18px; }
  .pp .pc-pipe .pp-soon--pipe span { font-size: 10px; letter-spacing: .1em; }
  .pp .pc-pipe .pp-soon--pipe b { font-size: 15px; padding-left: 8px; letter-spacing: .04em; }
}

/* ---- calmer audio pulse: same cadence as the other icon loops ---- */
.pp[data-pulse="calm"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="wave"] .ic-bar { animation: icLevelCalm 2.4s ease-in-out infinite; }
.pp[data-pulse="calm"] .pc-icon .ic-bar:nth-child(1) { animation-delay: -.9s !important; } .pp[data-pulse="calm"] .pc-icon .ic-bar:nth-child(2) { animation-delay: -.3s !important; }
.pp[data-pulse="calm"] .pc-icon .ic-bar:nth-child(3) { animation-delay: -1.5s !important; } .pp[data-pulse="calm"] .pc-icon .ic-bar:nth-child(4) { animation-delay: -.6s !important; } .pp[data-pulse="calm"] .pc-icon .ic-bar:nth-child(5) { animation-delay: -1.2s !important; }
@keyframes icLevelCalm { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

/* ---- new walk: hips, knees, elbows; legs swing and the back knee lifts, arms swing opposite, body bobs twice a stride ---- */
.pc-icon[data-ic="run"] svg { overflow: visible; }
.pc-icon[data-ic="run"] .ic-legA, .pc-icon[data-ic="run"] .ic-legB { transform-origin: 12px 13.2px; }
.pc-icon[data-ic="run"] .ic-shin { transform-origin: 12px 17.2px; }
.pc-icon[data-ic="run"] .ic-armA, .pc-icon[data-ic="run"] .ic-armB { transform-origin: 12.3px 8.6px; }
.pc-icon[data-ic="run"] .ic-fore { transform-origin: 12.3px 11.6px; transform: rotate(-35deg); }
.pc-icon[data-ic="run"] .ic-legA { transform: rotate(-16deg); } .pc-icon[data-ic="run"] .ic-legB { transform: rotate(14deg); }
.pc-icon[data-ic="run"] .ic-legB .ic-shin { transform: rotate(18deg); }
.pc-icon[data-ic="run"] .ic-armA { transform: rotate(18deg); } .pc-icon[data-ic="run"] .ic-armB { transform: rotate(-16deg); }
.pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-body { animation: wBob .6s ease-in-out infinite alternate; }
.pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] :is(.ic-legA,.ic-legB) { animation: wThigh 1.2s ease-in-out infinite; }
.pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] :is(.ic-legA,.ic-legB) .ic-shin { animation: wShin 1.2s linear infinite; }
.pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] :is(.ic-armA,.ic-armB) { animation: wArm 1.2s ease-in-out infinite; }
.pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] :is(.ic-legB,.ic-armB), .pp[data-walk="new"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-legB .ic-shin { animation-delay: -.6s; }
@keyframes wBob { from { transform: translate(0, .5px) rotate(5deg); } to { transform: translate(0, -.5px) rotate(5deg); } }
@keyframes wThigh { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(20deg); } }
@keyframes wShin { 0% { transform: rotate(0); } 40% { transform: rotate(6deg); } 62% { transform: rotate(48deg); } 82% { transform: rotate(14deg); } 100% { transform: rotate(0); } }
@keyframes wArm { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-22deg); } }
.pp[data-walk="old"]:not([data-anim="none"]) .pc-tile.is-front .pc-icon[data-ic="run"] .ic-fore { transform: none; }

/* ---- hover: the card in front lifts / glows a touch so it feels alive ---- */
.pc-face { transition: transform .35s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease); }
.pp:is([data-hover="lift"],[data-hover="both"]) .pc-tile.is-front:hover .pc-face { transform: translateZ(.5px) translateY(-4px) scale(1.015); }
.pp:is([data-hover="lift"],[data-hover="both"]) .pc-tile.is-front:hover .pc-layer--back { box-shadow: 0 22px 30px -16px color-mix(in srgb, var(--c) 80%, #3e38d9); }
.pp:is([data-hover="glow"],[data-hover="both"]) .pc-tile.is-front:hover .pc-face { filter: brightness(1.07) saturate(1.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 0 2px rgba(255,255,255,.55), 0 0 26px -2px color-mix(in srgb, var(--c) 85%, transparent); }
.pp .pc-tile.is-front { cursor: pointer; }
@media (hover: none) { .pp .pc-tile.is-front:hover .pc-face { transform: translateZ(.5px); filter: none; } }

/* ---- panel colour: each pipeline's own title colour on its white box ---- */
.pp:is([data-accent="border"],[data-accent="all"]) .pc-pipe { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pa) 55%, #fff), 0 24px 50px -30px color-mix(in srgb, var(--pa) 55%, transparent); }
.pp[data-accent="soft"] .pc-pipe { background: color-mix(in srgb, var(--pb) 12%, #fff); }
.pp:is([data-accent="grad"],[data-accent="all"]) .pc-pipe { background: linear-gradient(135deg, color-mix(in srgb, var(--pb) 26%, #fff) 0%, #fff 45%, #fff 60%, color-mix(in srgb, var(--pb) 18%, #fff) 100%); }

/* ---- page heading = exactly her name + tagline on the home page (same sizes at every screen width) ---- */
.pp .pp-title.display-name { font-size: clamp(2rem, calc(5.3 * var(--vw)), 64px); line-height: 1; letter-spacing: .07em; font-weight: 600; padding-bottom: .08em; }
.pp .pp-sub.display-tagline { font-size: clamp(.96rem, calc(2.77 * var(--vw)), 17px); line-height: 1.55; letter-spacing: .09em; font-weight: 600; margin-top: 10px; }
@media (min-width: 901px) {
  .pp .pp-title.display-name { font-size: clamp(2.07rem, calc(5.4855 * var(--vw)), 66.24px); }
  .pp .pp-sub.display-tagline { font-size: clamp(.9936rem, calc(2.867 * var(--vw)), 17.6px); }
}
/* ---- heading sits under the arch exactly like her name does on the home page ---- */
html.cx-on .main:has(#pipeline) .cx-rib--top { height: calc(17.1 * var(--vw)); }
.pp { padding-top: 21px; }

.pp .pp-sub.display-tagline { font-family: var(--font-display); color: var(--brand); }

/* ---- wheel keeps a good card shape at every desktop width (programs on the right) ---- */
@media (min-width: 901px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"]:not([data-progpos="left"]) .pc-pipe { grid-template-columns: minmax(240px, .9fr) minmax(360px, 1.75fr) minmax(200px, .8fr); column-gap: 24px; }
}

/* ---- tidy text sizes: paragraph a touch smaller, programs just under it, step note smallest ---- */
#pipeline.pp .pc-pipe .pc-head--info .pc-blurb { font-size: 17px; line-height: 1.5; max-width: 34ch; }
#pipeline.pp .pc-pipe .pc-progs li { font-size: 16px; }
#pipeline.pp .pc-pipe .pc-desc { font-size: 15px; }
@media (max-width: 520px) { #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { font-size: 16px; } }
@media (min-width: 901px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"]:not([data-progpos="left"]) .pc-pipe { grid-template-columns: minmax(200px, 1fr) minmax(340px, 1.2fr) minmax(180px, .9fr); }
  .pp:not([data-progpos="left"]) .pc-wheelwrap { justify-self: center; width: 100%; max-width: 460px; }
}
#pipeline.pp .pc-pipe .pc-progs .pc-desc { max-width: 100%; box-sizing: border-box; }

/* ---- phones: each pipeline fits on one screen ---- */
@media (max-width: 900px) {
  .pp[data-layout] .pc-pipe { padding: 18px 12px 14px; gap: 8px; row-gap: 8px; }
  .pp .pc-pipe .pc-head--title h3 { font-size: 27px; }
  .pp .pc-pipe .pp-soon--pipe { margin-top: 2px; }
  .pp .pc-pipe .pc-head--info .pc-blurb { margin-top: 8px; margin-bottom: 0; line-height: 1.4; }
  .pp .pc-pipe .pc-head--info .pc-crew { margin-top: 12px; }
  .pp .pc-pipe .pc-head--info .pc-crew__k { font-size: 15px; margin-bottom: 7px; }
  .pp[data-grp="rule"] .pc-pipe .pc-head--info .pc-crew__k { padding-bottom: 6px; margin-bottom: 7px; }
  .pp .pc-pipe .pc-head--info { padding-bottom: 0; }
  .pp .pc-pipe .pc-head--info .pc-crew .pc-cp { font-size: 15px; }
  .pp .pc-wheelwrap { margin-top: 4px; }
  .pp[data-layout] .pc-detail { margin-top: 4px; }
}

/* ---- programs appear quickly, so turning the wheel fast never feels held up ---- */
.pc-progs li { animation-duration: .2s; }
.pc-progs li:nth-child(2) { animation-delay: .03s; } .pc-progs li:nth-child(3) { animation-delay: .06s; } .pc-progs li:nth-child(4) { animation-delay: .09s; } .pc-progs li:nth-child(5) { animation-delay: .12s; }

/* ---- phones: smaller words so a whole pipeline fits on one screen (cards keep their size) ---- */
@media (max-width: 900px) {
  .pp .pc-pipe .pc-head--title h3 { font-size: 24px; }
  .pp .pc-pipe .pc-head--info .pc-blurb { font-size: 14px; line-height: 1.35; }
  .pp .pc-pipe .pc-head--info .pc-crew__k { font-size: 13.5px; margin-bottom: 5px; }
  .pp[data-grp="rule"] .pc-pipe .pc-head--info .pc-crew__k { padding-bottom: 5px; margin-bottom: 6px; }
  .pp .pc-pipe .pc-head--info .pc-crew .pc-cp { font-size: 13.5px; }
  .pp .pc-pipe .pc-head--info .pc-crew ul { row-gap: 2px; }
  .pp .pc-pipe .pc-progs__k { font-size: 12px; margin-bottom: 4px; }
  .pp .pc-pipe .pc-desc { font-size: 13.5px; line-height: 1.35; }
  .pp .pc-pipe .pc-progs li { font-size: 14px; padding-top: 1px; padding-bottom: 1px; }
}

/* ---- desktop: longer cards (same height), the middle column gets a bit more room ---- */
@media (min-width: 901px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"]:not([data-progpos="left"]) .pc-pipe { grid-template-columns: minmax(190px, 1fr) minmax(380px, 1.5fr) minmax(170px, .9fr); }
  .pp:not([data-progpos="left"]) .pc-wheelwrap { max-width: 540px; }
}

/* ---- arrows: the up arrow fades away on the first card, the down arrow on the last ---- */
.pp .pc-pipe .pc-btn { transition: transform .2s, opacity .18s ease, color .35s, box-shadow .35s; }
.pp .pc-pipe .pc-btn.is-off { opacity: 0; pointer-events: none; }

/* ---- phones: arrows and the card count sit in a row above the wheel, the wheel uses the full width ---- */
@media (max-width: 900px) {
  .pp[data-rail] .pc-pipe .pc-wheelwrap { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pp[data-rail] .pc-pipe .pc-side { flex-direction: row; justify-content: center; gap: 30px; order: -1; position: relative; z-index: 3; }
  .pp[data-rail] .pc-pipe .pc-view { margin-top: -14px; }
  .pp[data-rail] .pc-pipe .pc-count { flex-direction: row; align-items: baseline; justify-content: center; min-width: 52px; }
  .pp[data-rail] .pc-pipe .pc-count b { font-size: 24px; min-width: 0; }
  .pp[data-rail] .pc-pipe .pc-count span { display: inline; margin-left: 3px; font: 400 14px/1 var(--font-display); color: color-mix(in srgb, var(--pa, #3e38d9) 38%, #fff); }   /* small, light, sits right next to the number */
}

/* ---- in-between widths (tablets, a phone in "desktop site" mode): same three columns as desktop, a little tighter ---- */
@media (min-width: 901px) and (max-width: 1099px) {
  .pp:is([data-compact="side"],[data-compact="tight"])[data-layout="stack"]:not([data-progpos="left"]) .pc-pipe { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, .85fr); column-gap: 18px; padding-left: 24px; padding-right: 24px; }
}

/* ---- step note reads first: the sentence is larger than the program names under it ---- */
#pipeline.pp .pc-pipe .pc-progs .pc-desc { font-size: 17px; line-height: 1.45; color: rgba(62,56,217,.9); margin-bottom: 10px; }
#pipeline.pp .pc-pipe .pc-progs li { font-size: 14.5px; }
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-progs .pc-desc { font-size: 15.5px; line-height: 1.4; margin-bottom: 6px; }
  #pipeline.pp .pc-pipe .pc-progs li { font-size: 13px; }
}

/* ---- desktop: all three pipeline cards share one height (the tallest one's);
   phones keep their own heights so the shorter card doesn't end in a big gap ---- */
@media (min-width: 901px) { #pipeline.pp .pp-grid { grid-auto-rows: 1fr; } }

/* ---- desktop: the step note starts at the same height in every card, whatever its length ---- */
@media (min-width: 901px) {
  #pipeline.pp[data-layout] .pc-pipe .pc-detail { align-self: start; justify-content: flex-start; transform: none; min-height: 0; margin-top: 62px; }
}

/* ---- "In development" carries the shine that used to run across "Coming soon" ---- */
.pp .pc-pipe .pp-soon--pipe span {
  background-image: linear-gradient(100deg, #4a44e0 0%, #4a44e0 40%, #8ff2ff 50%, #4a44e0 60%, #4a44e0 100%); background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: ppShine 4.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .pp .pc-pipe .pp-soon--pipe span { animation: none; } }

/* ---- phones: one whole pipeline on one screen — shorter wheel (in pipelines.js),
   programs on one line, slightly smaller words ---- */
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--title h3 { font-size: 22px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe { padding: 6px 13px 6px 10px; gap: 8px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe i { width: 16px; height: 16px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe span { font-size: 10.5px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { font-size: 13.5px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew .pc-cp { font-size: 12.5px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew__k { font-size: 12.5px; }
  #pipeline.pp .pc-pipe .pc-progs .pc-desc { font-size: 14.5px; line-height: 1.35; margin-bottom: 4px; }
  #pipeline.pp .pc-pipe .pc-progs ul { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0; padding-left: 0; }
  #pipeline.pp .pc-pipe .pc-progs li { font-size: 13px; padding: 1px 0; }
  #pipeline.pp .pc-pipe .pc-progs li:not(:last-child)::after { content: "·"; margin: 0 7px; color: var(--c, #958fea); font-weight: 700; }
}
@media (max-width: 900px) {
  #pipeline.pp[data-layout] .pc-pipe { padding-top: 14px; padding-bottom: 10px; row-gap: 6px; gap: 6px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe { margin-top: 2px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { margin-top: 4px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew { margin-top: 8px; }
}
@media (max-width: 900px) {
  /* title and "In development" share one line */
  #pipeline.pp .pc-pipe .pc-head--title { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 12px; row-gap: 4px; }
  #pipeline.pp .pc-pipe .pc-head--title h3 { margin: 0; }
  #pipeline.pp .pc-pipe .pc-head--title .pp-soon--pipe { margin: 0; }
}
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--title { column-gap: 8px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe { padding: 5px 10px 5px 8px; gap: 6px; }
  #pipeline.pp .pc-pipe .pp-soon--pipe span { letter-spacing: .1em; }
}
@media (max-width: 900px) { #pipeline.pp[data-rail] .pc-pipe .pc-view { margin-top: 0; } }
@media (max-width: 900px) {
  /* breathing room under the arrows, and a heavier fade so the cards above and below melt away */
  #pipeline.pp[data-rail] .pc-pipe .pc-view { margin-top: 10px;
    -webkit-mask: linear-gradient(180deg, transparent 0, transparent 6%, #000 33%, #000 68%, transparent 96%);
            mask: linear-gradient(180deg, transparent 0, transparent 6%, #000 33%, #000 68%, transparent 96%); }
}

/* ---- phones: left-aligned text (agent list, paragraph, step note) ---- */
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew__k { text-align: left; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew ul { justify-content: flex-start; text-align: left; }
}
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
  #pipeline.pp .pc-pipe .pc-detail, #pipeline.pp .pc-pipe .pc-progs, #pipeline.pp .pc-pipe .pc-step { text-align: left; align-items: flex-start; }
  #pipeline.pp .pc-pipe .pc-progs .pc-desc { text-align: left; margin-left: 0; margin-right: 0; max-width: none; }
  #pipeline.pp .pc-pipe .pc-progs__k { justify-content: flex-start; }
  #pipeline.pp .pc-pipe .pc-progs ul { justify-content: flex-start; margin-left: 0; padding-left: 0; }
}
@media (max-width: 900px) { #pipeline.pp .pc-pipe .pc-detail { padding-left: 6px; } }

/* ---- phones: no program lists, and agent groups without their numbers ---- */
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-progs ul { display: none; }
  #pipeline.pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew .pc-cp { display: none; }
  #pipeline.pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew span { display: inline; font: 600 12.5px/1.2 var(--font-display); color: var(--pa, #3e38d9); }
}

/* ---- phones: with the program lists gone there is room again, so the words come back up a size ---- */
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--title h3 { font-size: 24px; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { font-size: 15px; line-height: 1.4; }
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew__k { font-size: 13.5px; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew .pc-cp,
  #pipeline.pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew span { font-size: 14px; }
  #pipeline.pp .pc-pipe .pc-progs__k { font-size: 12.5px; }
  #pipeline.pp .pc-pipe .pc-progs .pc-desc { font-size: 16px; line-height: 1.4; }
}
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--info .pc-crew { margin-left: 0; margin-right: 0; max-width: none; width: 100%; text-align: left; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew ul { justify-content: flex-start; }
  #pipeline.pp .pc-pipe .pc-head--info { text-align: left; }
}

/* ---- phones: the agent groups read as one sentence with commas, not a dotted grid ---- */
@media (max-width: 900px) {
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew ul { display: block; text-align: left; line-height: 1.45; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li { display: inline; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li:not(:last-child)::after { content: ","; margin: 0 6px 0 0; color: inherit; font-weight: inherit; }
  #pipeline.pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew li:not(:last-child)::after { color: var(--pa, #3e38d9); }
}
@media (max-width: 900px) {
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li { white-space: nowrap; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li:not(:last-child)::after { color: var(--pa, #3e38d9); margin-right: 8px; }
}
@media (max-width: 900px) { #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li { display: inline-block; } }
@media (max-width: 900px) {
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew ul { line-height: 1.3; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew li:not(:last-child)::after { margin-right: 5px; }
}
@media (max-width: 900px) {
  #pipeline.pp .pc-pipe .pc-head--info .pc-blurb { font-size: 14px; line-height: 1.4; }
  #pipeline.pp .pc-pipe .pc-progs .pc-desc { font-size: 14px; line-height: 1.4; }
  #pipeline.pp[data-crew="plain"] .pc-pipe .pc-crew .pc-cp,
  #pipeline.pp[data-crew="plain"] .pc-pipe:not([data-p="trad"]) .pc-crew span { font-size: 12.5px; }
}

/* top colour bar on each pipeline box: the pipeline's own colours, following the rounded corners */
#pipeline.pp .pc-pipe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, var(--pa), var(--pb)) top / 100% 7px no-repeat; }

/* wheel step tiles: about 18% more saturated so the colours pop (older browsers keep the normal colour) */
@supports (color: oklch(from red l c h)) {
  #pipeline.pp .pc-tile { --cs: oklch(from var(--c) min(calc(l * 1.1), .95) calc(c * 1.18) h);   /* 10% brighter too (the ochre steps keep their own colour below) */
    --mid: color-mix(in srgb, var(--cs) 80%, var(--ink)); --deep: color-mix(in srgb, var(--cs) 62%, var(--ink)); }
}

/* EFX and Lighting, Release, Ship: a warm yellow ochre instead of the old brown-gold */
#pipeline.pp .pc-tile[data-tone="ochre"] { --mid: #e6aa2c; --deep: #c98b17; }
#pipeline.pp .pc-tile[data-tone="ochre"] .pc-layer { background: #a8740f; }

/* mouse-wheel area around the wheel (desktop): a little past the wheel on every side, marked by the hand cursor */
@media (min-width: 901px) {
  #pipeline.pp .pc-wheelwrap::before { content: ""; position: absolute; z-index: 0; top: -14px; bottom: -10px; left: -24px; right: -36px; cursor: grab; }   /* the hand shows over exactly the area the wheel listens to */
  #pipeline.pp .pc-wheelwrap > * { position: relative; z-index: 1; }
}
@media (min-width: 901px) {
  /* empty space past the first/last card: no hand, the page scrolls there */
  #pipeline.pp .pc-wheelwrap.is-out .pc-view, #pipeline.pp .pc-wheelwrap.is-out::before { cursor: default; }
}

/* ---- phones: 20% more colour pop ---- */
@media (max-width: 900px) {
  @supports (color: oklch(from red l c h)) {
    /* step tiles (the ochre steps keep their own colour) */
    #pipeline.pp .pc-tile { --cs: oklch(from var(--c) min(calc(l * 1.1), .95) calc(c * 1.42) h); }
    /* pipeline colours: title text, the line under it, and the top colour bar */
    #pipeline.pp .pc-pipe[data-p="trad"]  { --pa: oklch(from #9c7426 l calc(c * 1.2) h); --pb: oklch(from #d8ad5c l calc(c * 1.2) h); }
    #pipeline.pp .pc-pipe[data-p="alin"]  { --pa: oklch(from #2e8558 l calc(c * 1.2) h); --pb: oklch(from #86cfa5 l calc(c * 1.2) h); }
    #pipeline.pp .pc-pipe[data-p="agame"] { --pa: oklch(from #b5622c l calc(c * 1.2) h); --pb: oklch(from #f0b07f l calc(c * 1.2) h); }
  }
}

/* Agent City under the pipeline cards */
.ac-city { margin-top: clamp(48px, 8vw, 96px); }
/* desktop: the Agent City header sits on the purple band, so it goes white; less empty space under the city */
@media (min-width: 701px) {
  .pp:has(.ac-city) { padding-bottom: 12px; }
  .pp .ac-head .pp-title, .pp[data-bg="home"] .ac-head .pp-title { background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #e4e1ff 100%); filter: drop-shadow(0 2px 10px rgba(43,37,184,.45)); }
  .pp .ac-head .pp-sub.display-tagline { color: #fff; text-shadow: 0 1px 10px rgba(43,37,184,.6); }
}

/* Desktop: each card's step note reserves room for its longest step (hidden notes still take up space, just invisible),
   so the cards never resize while you scroll through the steps and nothing below them bounces */
@media (min-width: 901px) {
  #pipeline.pp .pc-pipe .pc-detail { display: grid; }
  #pipeline.pp .pc-pipe .pc-detail > .pc-progs { grid-area: 1 / 1; }
  #pipeline.pp[data-steps="all"] .pc-pipe .pc-detail > .pc-progs[data-set="all"][hidden],
  #pipeline.pp:not([data-steps="all"]) .pc-pipe .pc-detail > .pc-progs[data-set="phase"][hidden] { display: block; visibility: hidden; }
}