/* 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); }
}