/* ============================================================
   THE AI AGENT PLAYBOOK (/ai-agent-playbook). Prefix pb-.
   Page markup is generated by scripts/playbook/gen_playbook.py from flows.py; never hand-edit it.

   Three lanes carry the page's one idea, and their colours mean the same everywhere on it:
     workflow automation  white card, black outline, the branch mark on cream
     AI agent             white card, blue outline, the star mark on blue-light
                          (not a blue-light card: blue-light is also the Operations team colour)
     a person             yellow card, the person mark (no red anywhere on this page: Justin, 2026-09-22)
   Green is the finished outcome only. Team pastels mark the team (tabs, stage icons, systems).

   Layout: without JS, and on phones, every workflow is a vertical list of stage cards, complete
   and readable. With JS at 900px and up (.pb-x.is-grid) a workflow becomes the lane map: stages
   are columns, lanes are rows, and one job line runs through the cells in order. Selecting a
   stage "zooms": its column widens to show the full sentences and the panel under the map swaps
   the workflow summary for that stage's detail. Nothing moves the page: the map rows are fixed
   and the panel's min-height is locked by playbook.js to the tallest state at the current width.

   Motion: one loop on the page (the hero rider). The explorer's run plays once and rests.
   Every base style is the finished frame, so reduced motion and no JS show a complete picture.
   ============================================================ */
.pb-page { --pb-shadow: 10px 10px 0 -2px rgba(0,0,0,.06); --pb-blue: #397ae7;
  --pb-auto: #fdfcf8; --pb-agent: #f4f8ff; --pb-person: #fffae4; --pb-yellow: #ffeba1; --pb-yellow-ink: #6b5a00; --pb-green: #caf0be;
  --fn-ops: #c6dbff; --fn-support: #fcccbf; --fn-finance: #caf0be; --fn-sales: #ffeba1; --fn-compliance: #ddd4ff; --fn-hr: #ffdff4;
  --pb-ease: cubic-bezier(.16, 1, .3, 1); }
.pb-page :focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.pb-page h1 em, .pb-page h2 em, .pb-page h3 em { font-style: normal; color: var(--blue); }
.pb-page main { display: block; }
.pb-skip { position: fixed; top: -100px; left: 20px; background: #fff; color: #000; padding: 12px 20px; z-index: 9999; }
.pb-skip:focus { top: 12px; }
.pb-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.pb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.pb-mono { font: 500 11px/1.3 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.pb-page [data-fn="finance"] { --fn: var(--fn-finance); }
.pb-page [data-fn="sales"] { --fn: var(--fn-sales); }
.pb-page [data-fn="ops"] { --fn: var(--fn-ops); }
.pb-page [data-fn="hr"] { --fn: var(--fn-hr); }
.pb-page [data-fn="support"] { --fn: var(--fn-support); }
.pb-page [data-fn="compliance"] { --fn: var(--fn-compliance); }

/* shared parts */
.pb-ic { width: 100%; height: 100%; display: block; fill: none; stroke: #000; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pb-glyph { width: 30px; height: 30px; flex: 0 0 30px; border: 1.5px solid #000; border-radius: 50%; background: var(--fn, #fff); display: grid; place-items: center; }
.pb-glyph .pb-ic { width: 15px; height: 15px; }
/* the three lane marks: one shape per role, used on the bands, in the cells, the roles band and the summary */
.pb-mark, .pb-band__mark, .pb-cell__mark, .pb-why__mark, .pb-sum__mark, .pb-role__mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1.5px solid #000; border-radius: 8px; background: #fff; }
.pb-mark .pb-ic, .pb-band__mark .pb-ic, .pb-cell__mark .pb-ic, .pb-why__mark .pb-ic, .pb-sum__mark .pb-ic, .pb-role__mark .pb-ic { width: 16px; height: 16px; }
.pb-mark--auto, .pb-band__mark--auto, .pb-cell__mark--auto, .pb-why__mark--auto, .pb-sum__mark--auto, .pb-role__mark--auto { background: var(--pb-auto); }
.pb-mark--agent, .pb-band__mark--agent, .pb-cell__mark--agent, .pb-why__mark--agent, .pb-sum__mark--agent, .pb-role__mark--agent { background: var(--blue-light); }
.pb-mark--person, .pb-band__mark--person, .pb-cell__mark--person, .pb-why__mark--person, .pb-sum__mark--person, .pb-role__mark--person { background: var(--pb-yellow); }

.pb-section { padding: 136px 0; }
.pb-section--cream { background: var(--cream); border-top: 1.5px solid #000; border-bottom: 1.5px solid #000; }
.pb-head { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.pb-head .lead { max-width: 680px; margin: 0; }
.pb-punch { max-width: 720px; margin: 56px auto 0; text-align: center; font: 500 22px/1.4 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: balance; }
.pb-aside { max-width: 720px; margin: 48px auto 0; text-align: center; font: 400 17px/1.55 "Neue Montreal", system-ui, sans-serif; color: var(--muted); text-wrap: pretty; }
.pb-aside a, .pb-link { color: var(--blue); font-weight: 500; text-decoration: none; }
.pb-aside a:hover, .pb-link:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- hero ---------- */
.pb-hero { padding: 64px 0 120px; }
.pb-hero__inner { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.12fr); gap: 64px; align-items: center; }
.pb-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.pb-hero__badge { background: var(--pb-green); }
.pb-hero__title { margin: 0; font: 500 56px/1.08 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.02em; text-wrap: balance; }
.pb-hero__lead { margin: 0; max-width: 540px; font: 400 19px/1.55 "Neue Montreal", system-ui, sans-serif; color: var(--muted); text-wrap: pretty; }
.pb-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
/* the six teams, as a table of contents: each opens its first workflow */
.pb-hero__teams { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 560px; }
.pb-hero__team { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 5px; border: 1.5px solid rgba(0,0,0,.16); border-radius: 99px; background: #fff; color: #000; text-decoration: none; font: 500 14px/1 "Neue Montreal", system-ui, sans-serif; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.pb-hero__team:hover { border-color: #000; transform: translateY(-1px); }
.pb-hero__team-glyph { width: 26px; height: 26px; flex-basis: 26px; }
.pb-hero__team-glyph .pb-ic { width: 13px; height: 13px; }
.pb-hero__art { margin: 0; }
.pb-hero__art svg { display: block; width: 100%; height: auto; overflow: visible; }
/* the hero's front card cycles through three workflows on one clock (keyframes are generated into the
   page head from the real route lengths): each map fades in, its job rides the lanes and each cell
   lifts as the job reaches it. Under reduced motion only the first map shows, finished. */
.pb-hm, .pb-hr, .pb-hc { animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-fill-mode: both; }
.pb-hm--0 { animation-name: pb-hm0; } .pb-hm--1 { animation-name: pb-hm1; opacity: 0; } .pb-hm--2 { animation-name: pb-hm2; opacity: 0; }
.pb-hr { offset-rotate: 0deg; offset-distance: 100%; }
.pb-hc { transform-box: fill-box; transform-origin: center; }

/* ---------- the three roles ---------- */
.pb-roles { list-style: none; margin: 72px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.pb-role { display: flex; flex-direction: column; padding: 18px 18px 32px; background: #fff; border: 1.5px solid #000; border-radius: 20px; box-shadow: var(--pb-shadow); }
.pb-role__art { margin: 0 0 22px; height: 170px; border: 1.5px solid #000; border-radius: 14px; overflow: hidden; }
.pb-role--auto .pb-role__art { background: var(--pb-auto); }
.pb-role--agent .pb-role__art { background: var(--pb-agent); }
.pb-role--person .pb-role__art { background: var(--pb-person); }
.pb-role__art svg { display: block; width: 100%; height: 100%; }
.pb-role__tag { display: flex; align-items: center; gap: 10px; margin: 0 8px; color: #333; }
.pb-role h3 { margin: 14px 8px 0; font: 500 26px/1.15 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; }
.pb-role p:last-child { margin: 10px 8px 0; font: 400 16px/1.5 "Neue Montreal", system-ui, sans-serif; color: #333; }

/* quiet loops in the role and method drawings: each one shows its own verb (moves, reads, decides) */
.pb-ra, .pb-oa { animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.45, 0, .25, 1); }
.pb-ra--move { offset-rotate: 0deg; offset-distance: 100%; animation: pb-move 2.8s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pb-move { 0% { offset-distance: 0%; } 70%, 100% { offset-distance: 100%; } }
.pb-ra--scan { animation: pb-scan 3.8s cubic-bezier(.45, 0, .25, 1) infinite alternate; }
@keyframes pb-scan { from { transform: none; } to { transform: translateY(42px); } }
.pb-ra--breathe { transform-box: fill-box; transform-origin: center; animation: pb-breathe 3.8s ease-in-out infinite; }
@keyframes pb-breathe { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
.pb-ra--cursor { animation: pb-cursor 4.2s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes pb-cursor { 0%, 12% { transform: translate(52px, 26px); } 42%, 56% { transform: none; } 62% { transform: scale(.9); } 68%, 80% { transform: none; } 100% { transform: translate(52px, 26px); } }
.pb-ra--ok { transform-box: fill-box; transform-origin: center; animation: pb-ok 4.2s ease-out infinite; }
@keyframes pb-ok { 0%, 58% { transform: none; } 64% { transform: scale(.94); } 72%, 100% { transform: none; } }
.pb-oa--ride { offset-rotate: 0deg; offset-distance: 100%; animation: pb-move 3.4s cubic-bezier(.45, 0, .25, 1) infinite; }
.pb-oa--p1, .pb-oa--p2 { transform-box: fill-box; transform-origin: center; animation: pb-breathe 3.2s ease-in-out infinite; }
.pb-oa--p2 { animation-delay: -1.6s; }
.pb-oa--ring { animation: pb-ring 6s linear infinite; }
@keyframes pb-ring { to { stroke-dashoffset: -28; } }

/* ---------- explorer: tabs and picks ---------- */
.pb-x { margin-top: 72px; }
.pb-tabs { display: none; }
.pb-picks { display: none; }
.pb-team + .pb-team { margin-top: 72px; }
.pb-team__title { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font: 500 28px/1.2 "Neue Montreal", system-ui, sans-serif; }
.pb-team__lander { margin-left: auto; font: 500 15px/1 "Neue Montreal", system-ui, sans-serif; color: var(--blue); text-decoration: none; }
.pb-team__lander:hover { text-decoration: underline; text-underline-offset: 4px; }
.pb-wf + .pb-wf { margin-top: 40px; }
.pb-x.is-js .pb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pb-tab { display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 6px; background: transparent; border: 1.5px solid transparent; border-radius: 99px; font: 500 15px/1 "Neue Montreal", system-ui, sans-serif; color: #000; cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease); }
.pb-tab .pb-glyph { width: 32px; height: 32px; flex-basis: 32px; }
.pb-tab .pb-glyph .pb-ic { width: 14px; height: 14px; }
.pb-tab:hover { border-color: rgba(0,0,0,.25); }
.pb-tab[aria-selected="true"] { background: #fff; border-color: #000; }
.pb-tab[aria-disabled="true"] { cursor: default; color: #333; }
.pb-tab[aria-disabled="true"]:hover { border-color: transparent; }
.pb-tab[aria-disabled="true"] .pb-glyph { background: #fff; border-style: dashed; border-color: #8a8a8a; }
.pb-tab__soon { color: #656567; margin-left: 2px; }
.pb-x.is-js .pb-team { margin-top: 36px; }
.pb-x.is-js .pb-team[hidden] { display: none; }
.pb-x.is-js .pb-team__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; margin: 0; }
.pb-x.is-js .pb-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0 0 28px; }
.pb-pick { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; text-align: left; background: transparent; border: 1.5px solid rgba(0,0,0,.18); border-radius: 14px; cursor: pointer; font: inherit; color: #000; transition: background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); }
.pb-pick b { font: 500 17px/1.25 "Neue Montreal", system-ui, sans-serif; }
.pb-pick span { font: 400 14px/1.4 "Neue Montreal", system-ui, sans-serif; color: var(--muted); }
.pb-pick:hover { border-color: #000; }
.pb-pick[aria-checked="true"] { background: #fff; border-color: #000; box-shadow: 4px 4px 0 rgba(0,0,0,.08); }
.pb-x.is-js .pb-wf { margin-top: 0; }
.pb-x.is-js .pb-wf[hidden] { display: none; }

/* ---------- the frame around one workflow ---------- */
.pb-frame { background: #fff; border: 1.5px solid #000; border-radius: 18px; box-shadow: var(--pb-shadow); overflow: hidden; }
.pb-frame__bar { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px 12px 18px; border-bottom: 1.5px solid #000; background: #fff; }
.pb-frame__glyph { width: 28px; height: 28px; flex-basis: 28px; }
.pb-frame__glyph .pb-ic { width: 14px; height: 14px; }
.pb-frame__title { margin: 0; font: 500 18px/1.2 "Neue Montreal", system-ui, sans-serif; }
.pb-frame__line { font: 400 15px/1.3 "Neue Montreal", system-ui, sans-serif; color: var(--muted); }
.pb-frame__tools { margin-left: auto; display: flex; gap: 8px; }
.pb-frame__btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: #fff; border: 1.5px solid #000; border-radius: 99px; font: 500 13.5px/1 "Neue Montreal", system-ui, sans-serif; color: #000; cursor: pointer; }
.pb-frame__btn:hover { background: var(--cream); }
.pb-frame__btn[hidden] { display: none; }
.pb-frame__back { width: 14px; height: 14px; transform: scaleX(-1); }
.pb-view { position: relative; padding: 32px 28px 36px; background: #fff; }

/* ---------- the stacked layout: no JS, and phones ---------- */
.pb-map { position: relative; display: flex; flex-direction: column; gap: 12px; max-width: 820px; margin: 0 auto; }
.pb-map::before { content: ""; position: absolute; left: 27px; top: 24px; bottom: 24px; border-left: 1.5px solid rgba(0,0,0,.35); }
.pb-band, .pb-line { display: none; }
.pb-end { position: relative; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: start; padding: 14px 16px 14px 12px; border: 1.5px solid #000; border-radius: 16px; background: #fff; }
.pb-end--in { border-style: dashed; }
.pb-end--out { background: var(--pb-green); }
.pb-end__ic { grid-row: span 3; width: 30px; height: 30px; display: grid; place-items: center; background: #fff; border: 1.5px solid #000; border-radius: 9px; }
.pb-end__ic .pb-ic { width: 17px; height: 17px; }
.pb-end__k { margin: 0; color: #333; }
.pb-end__t { margin: 2px 0 0; font: 500 17px/1.25 "Neue Montreal", system-ui, sans-serif; }
.pb-end__d { margin: 4px 0 0; font: 400 14.5px/1.45 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-stage { position: relative; padding: 12px 14px 14px 12px; background: #fff; border: 1.5px solid #000; border-radius: 16px; }
.pb-stage__head { display: grid; grid-template-columns: 30px auto 1fr; align-items: center; column-gap: 10px; width: 100%; padding: 0; background: none; border: 0; font: inherit; color: #000; text-align: left; cursor: default; }
.pb-stage__ic { width: 30px; height: 30px; display: grid; place-items: center; background: var(--fn, #fff); border: 1.5px solid #000; border-radius: 9px; }
.pb-stage__ic .pb-ic { width: 17px; height: 17px; }
.pb-stage__n { color: #656567; }
.pb-stage__name { font: 500 17px/1.25 "Neue Montreal", system-ui, sans-serif; }
.pb-cell { position: relative; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 6px; align-items: start; margin: 10px 0 0 42px; padding: 10px 12px 10px 10px; border: 1.5px solid #000; border-radius: 12px; background: #fff; font: 400 14.5px/1.45 "Neue Montreal", system-ui, sans-serif; }
.pb-cell--auto { border-color: #000; }
.pb-cell--agent { border-color: var(--pb-blue); }
.pb-cell--person { background: var(--pb-yellow); }
.pb-cell__mark { grid-row: 1; }
.pb-cell > :not(.pb-cell__mark) { grid-column: 2; }
.pb-cell > .pb-cell__full { align-self: center; }
.pb-cell__short { display: none; }
.pb-if { justify-self: start; padding: 3px 8px; border: 1px dashed rgba(0,0,0,.45); border-radius: 99px; background: rgba(255,255,255,.7); font: 500 10px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
.pb-if__k { font-weight: 600; }
.pb-fan { display: flex; flex-wrap: wrap; gap: 5px; }
.pb-fan span { padding: 3px 7px; border: 1px solid rgba(0,0,0,.35); border-radius: 7px; background: var(--pb-auto); font: 500 10px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .05em; text-transform: uppercase; }
.pb-no { display: flex; align-items: center; gap: 6px; font: 400 13px/1.35 "Neue Montreal", system-ui, sans-serif; color: var(--pb-yellow-ink); }
.pb-no__ic { width: 14px; height: 14px; flex: none; transform: scaleX(-1); }
.pb-no__ic { stroke: var(--pb-yellow-ink); }
.pb-more { margin: 14px 0 0 42px; padding-top: 14px; border-top: 1px dashed rgba(0,0,0,.28); display: grid; gap: 14px; }
.pb-more__k { margin: 0 0 6px; color: #656567; }
.pb-more__col > .pb-more__k:not(:first-child) { margin-top: 14px; }
.pb-more__v { margin: 0; font: 400 15px/1.45 "Neue Montreal", system-ui, sans-serif; }
.pb-more__v--done { display: flex; gap: 8px; align-items: baseline; }
.pb-more__v--done::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.2px solid #000; border-radius: 50%; background: var(--pb-green); transform: translateY(-1px); }
.pb-why { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pb-why__row { display: flex; gap: 10px; align-items: flex-start; font: 400 14.5px/1.45 "Neue Montreal", system-ui, sans-serif; }
.pb-why__mark { width: 22px; height: 22px; border-radius: 7px; }
.pb-why__mark .pb-ic { width: 13px; height: 13px; }
.pb-why__row b { font-weight: 500; }
.pb-syss { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pb-sys { display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 3px; background: #fff; border: 1.2px solid #000; border-radius: 99px; font: 500 13px/1.2 "Neue Montreal", system-ui, sans-serif; }
.pb-sys__ic { width: 22px; height: 22px; display: grid; place-items: center; border: 1.2px solid #000; border-radius: 50%; background: var(--fn, #fff); }
.pb-sys__ic .pb-ic { width: 12px; height: 12px; }
.pb-agent { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; background: #fff; border: 1.5px solid #000; border-radius: 12px; color: #000; text-decoration: none; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.pb-agent:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 #000; }
.pb-agent__glyph { width: 28px; height: 28px; flex: 0 0 28px; }
.pb-agent__glyph .pb-ic { width: 14px; height: 14px; }
.pb-agent b { display: block; font: 500 14.5px/1.25 "Neue Montreal", system-ui, sans-serif; }
.pb-agent small { display: block; margin-top: 2px; font: 400 12.5px/1.35 "Neue Montreal", system-ui, sans-serif; color: var(--muted); }

/* ---------- the panel under each map: the summary, or the selected stage ---------- */
.pb-panel { box-sizing: border-box; margin-top: 20px; padding: 30px 32px; background: var(--pb-auto); border: 1.5px solid #000; border-radius: 18px; }
.pb-panel__step:empty { display: none; }
.pb-sum__col { min-width: 0; }
.pb-sum { display: grid; }
.pb-sum__pitch { margin: 0 0 20px; font: 500 20px/1.4 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; text-wrap: pretty; }
.pb-sum__split { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px dashed rgba(0,0,0,.22); display: grid; gap: 10px; }
.pb-sum__split li { display: grid; grid-template-columns: 24px 22px 1fr; align-items: center; gap: 10px; font: 400 14.5px/1.35 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-sum__split .pb-sum__mark { width: 24px; height: 24px; border-radius: 7px; }
.pb-sum__split b { font: 500 18px/1 "Neue Montreal", system-ui, sans-serif; color: #000; text-align: right; }
.pb-figs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pb-fig { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; row-gap: 4px; align-items: center; padding: 14px 16px; background: #fff; border: 1.5px solid #000; border-radius: 14px; }
.pb-fig > .pb-fig__ic { grid-row: 1 / span 2; }
.pb-fig > .pb-fig__nums { grid-column: 3; grid-row: 1 / span 2; justify-content: flex-end; flex-wrap: nowrap; }
.pb-fig__ic { width: 20px; height: 20px; }
.pb-fig__label { margin: 0; font: 400 14px/1.35 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-fig__nums { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-fig__nums s { white-space: nowrap; font: 400 15px/1.2 "Neue Montreal", system-ui, sans-serif; color: var(--muted); text-decoration-thickness: 1.5px; }
.pb-fig__nums b { white-space: nowrap; font: 500 22px/1.1 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; }
.pb-fig__arrow { width: 16px; height: 16px; }
.pb-fig__tag { white-space: nowrap; justify-self: start; margin-top: 2px; padding: 3px 8px; border: 1.2px dashed #8a8a8a; border-radius: 99px; color: #656567; }
.pb-fig__src { justify-self: start; margin-top: 2px; color: var(--blue); text-decoration: none; }
.pb-fig__src:hover { text-decoration: underline; }
.pb-sum__agents { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-sum__cta { display: inline-block; margin-top: 16px; color: var(--blue); font: 500 15px/1.3 "Neue Montreal", system-ui, sans-serif; text-decoration: none; }
.pb-sum__cta:hover { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- the lane map (JS, 900px and up) ---------- */
.pb-x.is-grid .pb-map { --pb-l: 112px; --pb-t: 132px; display: grid; max-width: none; margin: 0; gap: 12px 16px;
  grid-template-columns: var(--pb-cols, var(--pb-l) var(--pb-t) repeat(var(--n), minmax(0, 1fr)) var(--pb-t));

  transition: grid-template-columns .52s var(--pb-ease); }
.pb-x.is-grid .pb-map::before { display: none; }
.pb-x.is-grid .pb-band { display: flex; align-items: center; gap: 10px; grid-column: 1 / -1; grid-row: var(--r); padding: 0 14px; border-radius: 16px; }
.pb-x.is-grid .pb-band span { max-width: 64px; color: #333; font-size: 10px; line-height: 1.25; }
.pb-x.is-grid .pb-band--auto { background: var(--cream); }
.pb-x.is-grid .pb-band--agent { background: var(--pb-agent); }
.pb-x.is-grid .pb-band--person { background: var(--pb-person); }
.pb-x.is-grid .pb-end { grid-row: 2 / 5; z-index: 2; margin: 18px 0; grid-template-columns: 1fr; align-content: center; padding: 14px 12px; overflow: hidden; }
.pb-x.is-grid .pb-end--in { grid-column: 2; }
.pb-x.is-grid .pb-end--out { grid-column: -2; }
.pb-x.is-grid .pb-end__ic { grid-row: auto; margin-bottom: 10px; }
.pb-x.is-grid .pb-end__t { font-size: 15px; }
.pb-x.is-grid .pb-end__d { font-size: 12.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pb-x.is-grid .pb-stage { display: contents; }
.pb-x.is-grid .pb-stage__head { grid-column: var(--c); grid-row: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 6px; padding: 6px 8px; border: 1.5px solid transparent; border-radius: 12px; cursor: pointer; overflow: hidden; transition: background .2s var(--ease), border-color .2s var(--ease); }
.pb-x.is-grid .pb-stage__head:hover { border-color: rgba(0,0,0,.22); }
.pb-x.is-grid .pb-stage__head[aria-expanded="true"] { background: #fff; border-color: #000; }
.pb-x.is-grid .pb-stage__ic { width: 26px; height: 26px; border-radius: 8px; }
.pb-x.is-grid .pb-stage__ic .pb-ic { width: 15px; height: 15px; }
.pb-x.is-grid .pb-stage__head { display: grid; grid-template-columns: 26px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-content: start; padding-top: 8px; }
.pb-x.is-grid .pb-stage__n { align-self: center; }
.pb-x.is-grid .pb-stage__name { grid-column: 1 / -1; font-size: 14px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pb-x.is-grid .pb-cell { grid-column: var(--c); grid-row: var(--r); z-index: 2; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; padding: 12px 14px; overflow: hidden; font-size: 13.5px; line-height: 1.38; overflow-wrap: break-word; cursor: pointer; transition: box-shadow .3s var(--ease); }
.pb-x.is-grid .pb-cell__mark { display: none; }
.pb-x.is-grid .pb-cell__short { display: block; }
.pb-x.is-grid .pb-map:not(.is-zoom) .pb-cell { justify-content: center; }
.pb-x.is-grid .pb-map:not(.is-zoom) .pb-cell > .pb-if { position: absolute; top: 6px; left: 8px; }
.pb-x.is-grid .pb-cell__full { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.pb-x.is-grid .pb-fan, .pb-x.is-grid .pb-no { display: none; }
.pb-x.is-grid .pb-if { font-size: 9px; padding: 2px 6px; }
/* zoomed out, a condition shows as a small IF tag; the words appear when the stage is zoomed into */
.pb-x.is-grid .pb-map:not(.is-zoom) .pb-if__v { display: none; }
/* the zoomed-out map marks a fan-out or a decline with a small corner tag instead of the full chips */
.pb-x.is-grid .pb-cell[data-fan], .pb-x.is-grid .pb-cell[data-no] { padding-right: 30px; }
.pb-x.is-grid .pb-cell[data-fan]::after, .pb-x.is-grid .pb-cell[data-no]::after { content: ""; position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border: 1px solid rgba(0,0,0,.4); border-radius: 6px; background: var(--pb-auto) center/12px 12px no-repeat; }
.pb-x.is-grid .pb-cell[data-fan]::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h6M10 12l9-6M10 12h9M10 12l9 6'/%3E%3C/svg%3E"); }
.pb-x.is-grid .pb-cell[data-no]::after { background-color: #fff; border-color: rgba(107,90,0,.5); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b5a00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H6M10.5 7.5 6 12l4.5 4.5'/%3E%3C/svg%3E"); }
.pb-x.is-grid .pb-more { display: none; }
.pb-x.is-grid .pb-line { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.pb-line__path { fill: none; stroke: #000; stroke-width: 1.5; stroke-opacity: .55; stroke-linecap: round; stroke-linejoin: round; }
.pb-line__dot { fill: var(--pb-blue); stroke: #000; stroke-width: 1.2; offset-rotate: 0deg; offset-distance: 100%; }
.pb-line__halo { fill: var(--pb-blue); fill-opacity: .16; stroke: none; offset-rotate: 0deg; offset-distance: 100%; }
.pb-cell.is-lit { box-shadow: 0 0 0 4px rgba(57,122,231,.28); }
.pb-cell--person.is-lit { box-shadow: 0 0 0 5px rgba(230,190,40,.4); }

/* the What if row: each step's estimate under its column, the workflow's total under the outcome */
.pb-roi-cell__short { display: none; }
.pb-roi-cell { margin: 10px 0 0 42px; font: 500 13px/1.4 "Neue Montreal", system-ui, sans-serif; color: #2f5a1f; }
.pb-roi-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 12px 16px; border: 1.5px solid #000; border-radius: 14px; background: #f0faec; font: 500 16px/1.3 "Neue Montreal", system-ui, sans-serif; }
.pb-roi-total .pb-mono { color: #2f5a1f; }
.pb-band__mark--roi { background: #f0faec; }
.pb-x.is-grid .pb-map { grid-template-rows: 84px repeat(3, var(--pb-lane, 124px)) auto; }
.pb-x.is-grid .pb-band--roi { background: none; border-top: 1px dashed rgba(0,0,0,.22); border-radius: 0; margin-top: 2px; }
.pb-x.is-grid .pb-roi-cell { grid-column: var(--c); grid-row: 5; margin: 8px 0 2px; display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 6px 6px; border: 1px solid rgba(47,90,31,.35); border-radius: 10px; background: #f0faec; text-align: center; overflow: hidden; white-space: nowrap; font: 500 12px/1.2 ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .02em; }
.pb-x.is-grid .pb-roi-cell b { color: #000; font-weight: 600; }
.pb-x.is-grid .pb-roi-cell__short { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pb-x.is-grid .pb-roi-cell__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.pb-x.is-grid .pb-roi-total { grid-column: -2; grid-row: 5; margin: 8px 0 2px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; padding: 6px 10px; border-radius: 10px; font: 600 12px/1.25 ui-monospace, "SF Mono", Menlo, monospace; }
.pb-x.is-grid .pb-roi-total .pb-mono { font-size: 9.5px; }
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-roi-cell__short, .pb-map.is-zoom .pb-roi-total > * { visibility: hidden; }
.pb-map.is-zoom .pb-stage.is-focus .pb-roi-cell { font: 500 14px/1.3 "Neue Montreal", system-ui, sans-serif; letter-spacing: 0; color: #2f5a1f; }
.pb-map.is-zoom .pb-stage.is-focus .pb-roi-cell__short { display: none; }
.pb-map.is-zoom .pb-stage.is-focus .pb-roi-cell__long { position: static; width: auto; height: auto; clip: auto; overflow: visible; white-space: normal; }
.pb-more__roi { margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(47,90,31,.35); border-radius: 12px; background: #f0faec; }
.pb-more__roi-n { margin: 0; font: 400 16px/1.4 "Neue Montreal", system-ui, sans-serif; }
.pb-more__roi-n b { font-weight: 500; }
.pb-more__roi-how { margin: 4px 0 0; font: 400 13.5px/1.4 "Neue Montreal", system-ui, sans-serif; color: #333; }
/* the workflow total in the summary */
.pb-roi { display: grid; gap: 10px; }
.pb-roi__n { display: grid; grid-template-columns: 22px auto 1fr; align-items: baseline; column-gap: 10px; padding: 14px 16px; background: #fff; border: 1.5px solid #000; border-radius: 14px; }
.pb-roi__n--money { background: #f0faec; }
.pb-roi__ic { width: 20px; height: 20px; align-self: center; }
.pb-roi__n b { font: 500 24px/1.1 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; white-space: nowrap; }
.pb-roi__n span { font: 400 14px/1.35 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-roi__basis { margin: 2px 2px 0; font: 400 13px/1.45 "Neue Montreal", system-ui, sans-serif; color: var(--muted); }

/* zoomed into one stage: its column takes the room, the rest keep their colour and mark */
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-stage__name,
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-stage__n { opacity: 0; }
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-cell__short,
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-if,
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-cell::after { visibility: hidden; }
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-cell { align-items: center; justify-content: center; }
.pb-map.is-zoom .pb-stage:not(.is-focus) .pb-cell__mark { display: grid; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; }
.pb-map.is-zoom .pb-end__k, .pb-map.is-zoom .pb-end__t, .pb-map.is-zoom .pb-end__d { visibility: hidden; }
.pb-map.is-zoom .pb-end { align-content: center; justify-items: center; padding: 10px 6px; }
.pb-map.is-zoom .pb-end__ic { margin: 0; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell { font-size: 14px; line-height: 1.4; gap: 6px 10px; display: grid; grid-template-columns: auto 1fr; align-content: start; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell > * { grid-column: 1 / -1; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell > .pb-if { grid-column: 1; grid-row: 1; align-self: center; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell > .pb-no { grid-column: 2; grid-row: 1; justify-self: end; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell:not(:has(.pb-if)) > .pb-no { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell__short { display: none; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell__full { position: static; width: auto; height: auto; clip: auto; white-space: normal; overflow: visible; animation: pb-in .32s ease-out .22s backwards; }
.pb-map.is-zoom .pb-stage.is-focus .pb-fan, .pb-map.is-zoom .pb-stage.is-focus .pb-no { display: flex; animation: pb-in .32s ease-out .28s backwards; }
.pb-map.is-zoom .pb-stage.is-focus .pb-cell::after { display: none; }
.pb-map.is-zoom .pb-stage.is-focus .pb-stage__name { font-size: 15px; }
@keyframes pb-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* the panel under the map, desktop: summary when zoomed out, the stage's detail when zoomed in */
.pb-x.is-grid .pb-panel__step .pb-more { display: grid; margin: 0; padding: 0; border: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 48px; animation: pb-in .3s ease-out backwards; }
.pb-x.is-grid .pb-panel.is-step .pb-sum { display: none; }

/* phones with JS: stage cards are tappable, and open in place */
.pb-x.is-js:not(.is-grid) .pb-stage__head { cursor: pointer; }
.pb-x.is-js:not(.is-grid) .pb-stage__head::after { content: ""; justify-self: end; width: 9px; height: 9px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translateY(-3px) rotate(45deg); transition: transform .25s var(--ease); }
.pb-x.is-js:not(.is-grid) .pb-stage__head[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.pb-x.is-js:not(.is-grid) .pb-stage__head { grid-template-columns: 30px auto 1fr 16px; }
.pb-x.is-js:not(.is-grid) .pb-stage:not(.is-open) .pb-more { display: none; }

/* ---------- map your own ---------- */
.pb-own { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pb-own__step { display: flex; flex-direction: column; padding: 16px 16px 28px; background: #fff; border: 1.5px solid #000; border-radius: 20px; }
.pb-own__art { margin: 0 0 18px; height: 120px; border: 1.5px solid #000; border-radius: 14px; background: var(--bg); overflow: hidden; }
.pb-own__art svg { display: block; width: 100%; height: 100%; }
.pb-own__n { margin: 0 8px; color: #656567; }
.pb-own__step h3 { margin: 10px 8px 0; font: 500 22px/1.2 "Neue Montreal", system-ui, sans-serif; letter-spacing: -.01em; }
.pb-own__step p { margin: 10px 8px 0; font: 400 16px/1.5 "Neue Montreal", system-ui, sans-serif; color: #333; }

/* ---------- FAQ and CTA ---------- */
.pb-faq { max-width: 840px; margin: 56px auto 0; border-top: 1.5px solid #000; }
.pb-faq__item { border-bottom: 1.5px solid #000; }
.pb-faq__item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 24px 4px; font: 500 20px/1.35 "Neue Montreal", system-ui, sans-serif; }
.pb-faq__item summary::-webkit-details-marker { display: none; }
.pb-faq__item summary::after { content: "+"; flex: none; font: 400 26px/1 "Neue Montreal", system-ui, sans-serif; }
.pb-faq__item[open] summary::after { content: "\2212"; }
.pb-faq__answer { padding: 0 4px 26px; max-width: 720px; font: 400 17px/1.6 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; margin-top: 8px; }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .pb-hm, .pb-hr, .pb-hc, .pb-ra, .pb-oa { animation: none !important; }
  .pb-hm--0 { opacity: 1; } .pb-hm--1, .pb-hm--2 { display: none; }
  .pb-page *, .pb-page *::before, .pb-page *::after { animation: none !important; transition: none !important; }
}

/* ---------- responsive ---------- */
@media (min-width: 1240px) {
  .pb-x.is-grid { margin-left: -40px; margin-right: -40px; }
}
/* The map sizes to its own workflow's width (container queries on .pb-wf), not the window, so it
   holds up in any layout the navigation puts it in. Under 1190px wide it drops its lane labels to
   marks and narrows the start and end cards; under 1060 the lanes grow taller for narrower cells;
   under 900 taller again. Re-run the clipping check at 1440, 1359, 1181, 1099 and 1024 after any
   copy change: every cell, zoomed out and in, scrollHeight <= clientHeight. */
.pb-x.is-grid .pb-wf { container: pbwf / inline-size; }
@container pbwf (max-width: 1189px) {
  .pb-x.is-grid .pb-map { --pb-l: 44px; --pb-t: 110px; --pb-lane: 132px; gap: 12px 12px; }
  .pb-frame__line { display: none; }
  .pb-view { padding: 24px 20px 28px; }
  .pb-x.is-grid .pb-band { padding: 0 8px; }
  .pb-x.is-grid .pb-band span { display: none; }
  .pb-x.is-grid .pb-band__mark { width: 24px; height: 24px; }
  .pb-x.is-grid .pb-cell { font-size: 13px; padding: 10px 11px; }
  .pb-x.is-grid .pb-cell[data-fan], .pb-x.is-grid .pb-cell[data-no] { padding-right: 26px; }
  .pb-x.is-grid .pb-cell[data-fan]::after, .pb-x.is-grid .pb-cell[data-no]::after { top: 5px; right: 5px; width: 17px; height: 17px; }
  .pb-map.is-zoom .pb-stage.is-focus .pb-cell { font-size: 13.5px; }
  .pb-sum, .pb-x.is-grid .pb-panel__step .pb-more { gap: 28px; }
}
@container pbwf (max-width: 1059px) {
  .pb-x.is-grid .pb-map { --pb-t: 96px; --pb-lane: 150px; gap: 12px 10px; }
  .pb-x.is-grid .pb-cell { font-size: 12.5px; padding: 9px 9px; }
  .pb-map.is-zoom .pb-stage.is-focus .pb-cell { font-size: 13px; }
  .pb-x.is-grid .pb-roi-cell { font-size: 11px; padding: 6px 4px; }
}
@container pbwf (max-width: 899px) {
  .pb-x.is-grid .pb-map { --pb-t: 84px; --pb-lane: 164px; gap: 10px 8px; }
  .pb-x.is-grid .pb-cell { font-size: 12px; padding: 8px 8px; }
  .pb-x.is-grid .pb-roi-cell { font-size: 10px; }
  .pb-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pb-sum > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 900px) and (max-width: 1239px) {
  .pb-x.is-grid { margin-left: -48px; margin-right: -48px; }
}
@media (max-width: 1180px) {
  .pb-hero__title { font-size: 48px; }
}
@media (max-width: 1100px) {
  .pb-roles, .pb-own { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 899px) {
  .pb-section { padding: 88px 0; }
  .pb-hero { padding: 32px 0 72px; }
  .pb-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pb-hero__title { font-size: 40px; }
  .pb-hero__lead { font-size: 17.5px; }
  /* the margin notes don't fit a phone: drop them and let the map card fill the column */
  .pb-hero__art { overflow: hidden; margin: 0 -8px; }
  .pb-hero__art svg { width: 134%; }
  .pb-hero__notes { display: none; }
  .pb-x.is-js .pb-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; width: calc(100% + 24px); margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
  .pb-x.is-js .pb-tabs::-webkit-scrollbar { display: none; }
  .pb-tab { flex: none; }
  .pb-x.is-js .pb-picks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .pb-pick { padding: 12px 14px; }
  .pb-frame__bar { flex-wrap: wrap; }
  .pb-view { padding: 14px 12px; }
  .pb-map::before { left: 26px; }
  .pb-stage, .pb-end { padding-left: 11px; }
  .pb-cell, .pb-more { margin-left: 0; }
  .pb-panel { padding: 18px 16px; }
  .pb-sum { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .pb-faq__item summary { font-size: 18px; padding: 20px 2px; }
}
@media (max-width: 480px) {
  .pb-hero__title { font-size: 36px; }
  .pb-figs { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   THE INDEX (Justin's pick, 2026-09-22): every workflow listed by team beside the map.
   The explorer breaks out of the page column so the map keeps its width beside the list, and
   Focus slides the list away so one workflow gets the whole width. Under 1100 the list sits
   above the map; on phones each team folds open on its own.
   ============================================================ */
.pb-idx { display: none; }
.pb-badge-roi { text-transform: none; display: inline-flex; align-self: flex-start; padding: 3px 8px; border: 1px solid rgba(47,90,31,.35); border-radius: 99px; background: #f0faec; color: #2f5a1f; font-size: 10px; }
.pb-x--index .pb-team__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; margin: 0; }
.pb-x--index.is-js .pb-team[hidden] { display: none; }
.pb-x--index.is-js .pb-team { margin-top: 0; }
.pb-x--index.is-js { --pbw: min(1520px, calc(100vw - 80px)); --pb-side: 264px; width: var(--pbw); margin-left: calc((100% - var(--pbw)) / 2); margin-right: 0; display: grid; grid-template-columns: var(--pb-side) minmax(0, 1fr); column-gap: 32px; align-items: start; transition: grid-template-columns .45s var(--pb-ease), column-gap .45s var(--pb-ease); }
.pb-x--index.is-js .pb-idx { display: block; position: sticky; top: 92px; max-height: calc(100vh - 116px); overflow-y: auto; padding: 18px 14px 18px 18px; background: #fff; border: 1.5px solid #000; border-radius: 18px; transition: opacity .3s var(--ease); }
.pb-idx__title { margin: 0 0 14px 4px; color: #656567; }
.pb-idx__team + .pb-idx__team { margin-top: 16px; }
.pb-idx__head { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 0; background: none; border: 0; font: 500 15px/1.2 "Neue Montreal", system-ui, sans-serif; color: #000; text-align: left; cursor: default; }
.pb-idx__head .pb-glyph { width: 26px; height: 26px; flex-basis: 26px; }
.pb-idx__head .pb-glyph .pb-ic { width: 13px; height: 13px; }
.pb-idx__caret { display: none; }
.pb-idx ul { list-style: none; margin: 0 0 0 12px; padding: 0 0 0 13px; border-left: 1.5px solid rgba(0,0,0,.12); display: grid; gap: 2px; }
.pb-idx__wf { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; padding: 8px 10px; text-align: left; background: none; border: 1.5px solid transparent; border-radius: 10px; cursor: pointer; font: 400 14.5px/1.3 "Neue Montreal", system-ui, sans-serif; color: #000; transition: background .2s var(--ease), border-color .2s var(--ease); }
.pb-idx__wf:hover { border-color: rgba(0,0,0,.2); }
.pb-idx__wf[aria-pressed="true"] { background: var(--cream); border-color: #000; font-weight: 500; }
/* focus: the list slides away and the workflow takes the whole width */
.pb-x--index.is-focus { grid-template-columns: 0 minmax(0, 1fr); column-gap: 0; }
.pb-x--index.is-focus .pb-idx { opacity: 0; visibility: hidden; }
.pb-frame__focus .pb-ic { width: 14px; height: 14px; }

/* the panel under the map: two roomy columns, the ROI card carrying its own call to action */
.pb-sum { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px 48px; }
.pb-sum__agents-row { grid-column: 1 / -1; padding-top: 22px; border-top: 1px dashed rgba(0,0,0,.22); }
.pb-sum__agents-row .pb-sum__agents { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.pb-roicard { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px 22px; border: 1.5px solid #000; border-radius: 16px; background: #f0faec; }
.pb-roicard .pb-more__k { margin: 0; color: #2f5a1f; }
.pb-roicard__n { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; font: 400 16px/1.35 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-roicard__n b { font: 500 22px/1.2 "Neue Montreal", system-ui, sans-serif; color: #000; letter-spacing: -.01em; }
.pb-roicard__n--big { flex-direction: column; }
.pb-roicard__n--big b { font-size: 30px; }
.pb-roicard__how { margin: 0; font: 400 14px/1.45 "Neue Montreal", system-ui, sans-serif; color: #333; }
.pb-roicard__cta { margin-top: 6px; background: #2f6b24; color: #fff; border-color: #2f6b24; transition: background .2s ease, border-color .2s ease; }
.pb-roicard__cta:hover, .pb-roicard__cta:focus-visible { background: #24541b; border-color: #24541b; color: #fff; }
/* Every ROI card CTA is dark green to sit in the green card, and all go to /agents (Justin, 2026-09-22). */
.pb-roicard__arrow { white-space: nowrap; margin-left: .25em; }
.pb-roicard--total { height: 100%; justify-content: center; }
.pb-idx__main { min-width: 0; }
.pb-x.is-grid .pb-panel__step .pb-more { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 32px 48px; }
.pb-more { grid-template-columns: minmax(0, 1fr); }
.pb-flow { margin: 20px 0 0; display: grid; gap: 14px; }
.pb-flow div { display: grid; gap: 4px; }
.pb-flow dt { color: #656567; }
.pb-flow dd { margin: 0; font: 400 15.5px/1.45 "Neue Montreal", system-ui, sans-serif; }
.pb-more__sys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.pb-more__col > .pb-more__k:not(:first-child) { margin-top: 20px; }
.pb-more__sys .pb-more__k { margin-top: 0 !important; }

@media (max-width: 1239px) {
  .pb-x--index.is-js { --pbw: calc(100vw - 48px); --pb-side: 232px; column-gap: 24px; }
}
@media (max-width: 1099px) {
  .pb-x--index.is-js { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .pb-x--index.is-js .pb-idx { position: static; max-height: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .pb-idx__title { grid-column: 1 / -1; margin-bottom: 0; }
  .pb-idx__team + .pb-idx__team { margin-top: 0; }
  .pb-frame__focus { display: none !important; }
}
@media (max-width: 899px) {
  .pb-x--index.is-js { --pbw: 100%; margin-left: 0; }
  .pb-x--index.is-js .pb-idx { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px; }
  .pb-idx__head { cursor: pointer; padding: 8px 4px; margin: 0; }
  .pb-idx__caret { display: block; margin-left: auto; width: 8px; height: 8px; border-right: 1.5px solid #000; border-bottom: 1.5px solid #000; transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
  .pb-idx__team.is-open .pb-idx__caret { transform: translateY(1px) rotate(-135deg); }
  .pb-idx__team:not(.is-open) ul { display: none; }
  .pb-idx ul { margin-bottom: 8px; }
  .pb-sum { grid-template-columns: minmax(0, 1fr); }
  .pb-more__sys { grid-template-columns: minmax(0, 1fr); }
}
/* the panel keeps one height per workflow, so its contents spread to fill it rather than leave a gap
   at the bottom: the ROI card and the reasons sit at the top, the flow and the systems at the foot */
.pb-x.is-grid .pb-panel { display: flex; flex-direction: column; }
.pb-x.is-grid .pb-panel > .pb-sum { flex: 1; grid-template-rows: 1fr auto; }
.pb-x.is-grid .pb-panel.is-step .pb-panel__step { flex: 1; display: flex; }
.pb-x.is-grid .pb-panel__step .pb-more { flex: 1; }
.pb-x.is-grid .pb-panel__step .pb-more__col { display: flex; flex-direction: column; }
.pb-stepnav { display: none; }
.pb-x.is-grid .pb-panel__step .pb-more { grid-template-rows: auto 1fr; }
.pb-x.is-grid .pb-panel__step .pb-stepnav { grid-column: 1 / -1; align-self: end; display: flex; align-items: center; gap: 8px; padding-top: 18px; border-top: 1px dashed rgba(0,0,0,.22); }
.pb-stepnav .pb-mono { margin-right: auto; color: #656567; }
.pb-stepnav .pb-frame__btn .pb-ic { width: 14px; height: 14px; }
.pb-stepnav .pb-frame__btn:disabled { opacity: .45; cursor: default; }