/* /pitching-ai, rebuilt 2026-10-21 on the /agents page architecture, with drawings made for this page.
   The job: a champion has to bring an AI project to four people. The page shows them, in this order, what it
   is (the hero: the proposal running past each person), what each person needs (one panel, a tab per person,
   each with its own link to forward), what they're asking to approve (three ways in), how we build (the
   pipeline, for the CTO), the people who'll use it, and the next step.
   Grammar, from /agents and the explainers: full-bleed bands alternating #fdfcf8 and cream; a centred head on
   every section; one framed module after it, at most one line under it. Windows are a thin ink outline on a
   warm ground; the row being worked lifts as a blue-ringed card, a person's decision is lavender, done is
   green, waiting is dashed grey. Every base style is the finished frame: only .ps-js and :not(.is-seen) hold
   something back, so no-JS and reduced motion get the whole picture. */

.ps-page{--ps-ease:cubic-bezier(.22,1,.36,1);--ps-ground:#e8e4d8;--ps-lav:#f4f0ff;--ps-lav-mk:#ddd4ff;--ps-lav-ink:#4a3a99;--ps-ok-bg:#dff3d6;--ps-ok-ink:#2f5a1f;--ps-hair:rgba(0,0,0,.13)}
.ps-page .ex-section{background:#fdfcf8}
.ps-page .ps-cream{background:var(--cream)}
.ps-page .ps-cta{background:#fff}  /* Next step is white; overrides the explainer CTA tint */
.ps-av--peach{background-color:#fcccbf}
/* the person: Justin's build-team face from /agents (av-crew) */
.ps-face{display:inline-block;flex:none;width:36px;height:36px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px #fff,0 0 0 3.5px rgba(0,0,0,.12)}
.ps-face svg{display:block;width:100%;height:100%}
.ps-dots{display:inline-flex;gap:5px}
.ps-dots i{width:8px;height:8px;border:1.2px solid #000;border-radius:50%}
.ps-mono{font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---- 01 hero: the offer on the left, the proposal running on the right ---- */
.ps-hx{padding:150px 0 112px}
.ps-hx__in{max-width:1360px;display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);gap:64px;align-items:center}
.ps-hx__copy{min-width:0}
.ps-hx__title{margin:24px 0 0;font:500 clamp(46px,4.6vw,66px)/1.02 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.ps-hx__title em{font-style:normal;color:var(--blue)}
.ps-hx__sub{margin:24px 0 0;max-width:470px;font:400 19.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.ps-hx__go{display:flex;flex-wrap:wrap;gap:14px;margin:36px 0 0}
.ps-hx__go .btn{height:48px;padding:0 28px}

.ps-win{position:relative;margin:0;background:#fff;border:1.25px solid #000;border-radius:18px;box-shadow:6px 6px 0 var(--ps-ground);overflow:hidden}
.ps-win__bar{display:flex;align-items:center;gap:12px;padding:15px 22px;border-bottom:1px solid var(--line)}
.ps-win__bar b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.ps-win__state{margin-left:auto;display:flex;align-items:center;gap:7px;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;color:var(--ps-ok-ink);white-space:nowrap}
.ps-win__state::before{content:"";width:7px;height:7px;border-radius:50%;background:#3aa35a;animation:ps-breathe 3.2s ease-in-out infinite}
@keyframes ps-breathe{50%{opacity:.4}}

/* the hero scene: the proposal in the middle and the four people round it. Each one raises a question that turns
   into a tick, and once all four have, the proposal is approved. Almost no words: it is the page's idea at a glance.
   Placed in stage percent so it holds its proportions at any width; sizes come off the stage width (cqw).
   The base styles are the finished scene; .is-on (set by the script while it's on screen) plays the loop. */
.ph{position:relative;margin:0;aspect-ratio:4/3;border:1.25px solid #000;border-radius:18px;box-shadow:6px 6px 0 var(--ps-ground);container-type:inline-size;overflow:hidden;
  background:#fdfcf8 radial-gradient(circle,rgba(0,0,0,.12) 1px,transparent 1.3px) 0 0 / 18px 18px}
.ph__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ph__lines path{fill:none;stroke:rgba(0,0,0,.32);stroke-width:1.5;stroke-dasharray:5 6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.ph__lines path.is-ok{stroke:#3aa35a;stroke-dasharray:none;opacity:.7}
.ph__doc{position:absolute;left:31%;top:21%;width:38%;height:58%;display:flex;flex-direction:column;background:#fff;border:1.5px solid #000;border-radius:clamp(10px,2.2cqw,14px);box-shadow:8px 8px 0 -2px rgba(0,0,0,.07);overflow:hidden}
.ph__doc>div:first-child{display:flex;align-items:center;gap:8px;padding:2.4cqw 3cqw;border-bottom:1.5px solid #000;background:#fdfcf8;font:500 clamp(11px,2.3cqw,15px)/1.1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap}
.ph__doc .ps-dots i{width:clamp(5px,1.1cqw,8px);height:clamp(5px,1.1cqw,8px)}
.ph__body{flex:1;display:flex;flex-direction:column;gap:1.7cqw;padding:3cqw}
.ph__body i{display:block;height:clamp(4px,.95cqw,7px);border-radius:4px;background:#d6d3ca}
.ph__body i:first-child{width:62%;background:#000}
.ph__chart{display:flex;align-items:flex-end;gap:1.4cqw;height:9cqw;margin-top:auto}
.ph__chart b{flex:1;border:1.2px solid #000;border-radius:3px 3px 0 0;background:var(--blue-light)}
.ph__seal{position:absolute;z-index:2;left:50%;top:79%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:1.2cqw;height:clamp(24px,5.6cqw,36px);padding:0 2.6cqw 0 1.8cqw;border:1.5px solid #000;border-radius:999px;background:#caf0be;font:500 clamp(11px,2.3cqw,15px)/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;box-shadow:3px 3px 0 #000}
.ph__seal svg{width:clamp(11px,2.4cqw,16px);height:clamp(11px,2.4cqw,16px);fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ph__p{position:absolute;display:flex;flex-direction:column;align-items:center;gap:1.2cqw;transform:translate(-50%,-50%)}
.ph__p .ps-face{width:clamp(38px,9cqw,60px);height:clamp(38px,9cqw,60px)}
.ph__p>span:last-child{font:500 clamp(9.5px,1.75cqw,11.5px)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;color:var(--muted)}
.ph__p--1{left:12%;top:23%}.ph__p--2{left:12%;top:74%}.ph__p--3{left:88%;top:23%}.ph__p--4{left:88%;top:74%}
.ph__b{position:absolute;display:grid;place-items:center;width:clamp(24px,5.4cqw,34px);height:clamp(24px,5.4cqw,34px);transform:translate(-50%,-50%)}
.ph__b>span{grid-area:1/1;display:grid;place-items:center;width:100%;height:100%;border:1.5px solid #000;border-radius:50%;font:500 clamp(12px,2.6cqw,17px)/1 "Neue Montreal",system-ui,sans-serif}
.ph__b svg{width:55%;height:55%;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ph__q{background:#fff;opacity:0}
.ph__ok{background:#caf0be}
.ph__b--1{left:22%;top:12%}.ph__b--2{left:22%;top:63%}.ph__b--3{left:78%;top:12%}.ph__b--4{left:78%;top:63%}

/* the loop: 11s; each person 1.3s after the last; the seal lands once all four ticks have */
@media (prefers-reduced-motion:no-preference){
  .ph.is-on .ph__q{animation:ph-q 11s var(--ease) infinite;animation-delay:calc(.4s + var(--i) * 1.3s)}
  .ph.is-on .ph__ok{animation:ph-ok 11s var(--ps-ease) infinite;animation-delay:calc(.4s + var(--i) * 1.3s)}
  .ph.is-on .ph__p .ps-face{animation:ph-lift 11s var(--ps-ease) infinite;animation-delay:calc(.4s + var(--i) * 1.3s)}
  .ph.is-on .ph__lines path.is-ok{animation:ph-line 11s var(--ease) infinite;animation-delay:calc(.4s + var(--i) * 1.3s)}
  .ph.is-on .ph__seal{animation:ph-seal 11s var(--ps-ease) infinite .4s}
  .ph.is-on .ph__chart b{animation:ph-bar 11s var(--ps-ease) infinite;animation-delay:calc(.4s + var(--i) * .12s)}
}
@keyframes ph-q{0%{opacity:0;transform:scale(.6)}3%,10%{opacity:1;transform:none}12%,100%{opacity:0;transform:scale(.9)}}
@keyframes ph-ok{0%,10%{opacity:0;transform:scale(.6)}13%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.9)}}
@keyframes ph-lift{0%{transform:none}4%{transform:translateY(-4%) scale(1.06)}10%,100%{transform:none}}
@keyframes ph-line{0%,10%{opacity:0}14%,84%{opacity:.7}90%,100%{opacity:0}}
@keyframes ph-seal{0%,52%{opacity:0;transform:translate(-50%,-20%) scale(.85)}57%,86%{opacity:1;transform:translate(-50%,-50%)}92%,100%{opacity:0;transform:translate(-50%,-40%) scale(.95)}}
@keyframes ph-bar{0%,52%{transform:scaleY(.35)}60%,86%{transform:none}94%,100%{transform:scaleY(.35)}}
.ph__chart b{transform-origin:bottom}
.ph__b svg path,.ph__seal svg path{vector-effect:non-scaling-stroke}   /* one weight at every size (stroke probe) */

/* ---- 02 the four people: one panel, a tab each (the /agents team picker) ---- */
.ps-four{max-width:1180px;margin:64px auto 0;padding:22px 28px 30px;background:#fff;border:1.5px solid #000;border-radius:22px;box-shadow:8px 8px 0 #000;text-align:left}
.ps-four__bar{display:flex;align-items:center;justify-content:center;gap:18px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.ps-four__pick{flex:none}
.ps-four__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ps-tab{display:inline-flex;align-items:center;gap:9px;padding:5px 15px 5px 5px;border:1.5px solid rgba(0,0,0,.14);border-radius:999px;background:#fff;font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;text-decoration:none;cursor:pointer;transition:border-color .25s var(--ease),background-color .3s var(--ease),box-shadow .3s var(--ease)}
.ps-tab .ps-face{width:28px;height:28px;box-shadow:0 0 0 1.5px #fff,0 0 0 2.5px rgba(0,0,0,.12)}
.ps-tab small{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;color:var(--muted)}
.ps-tab:hover{border-color:#000}
.ps-tab:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.ps-tab.is-on{border-color:#000;background:color-mix(in srgb,var(--c) 45%,#fff);box-shadow:2px 2px 0 #000}
html:not(.ps-js) .ps-four__bar{display:none}
.ps-four__stage{display:grid}
.ps-js .ps-four__panel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--ease),transform .6s var(--ps-ease),visibility 0s .4s}
.ps-js .ps-four__panel.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease) .06s,transform .7s var(--ps-ease) .06s,visibility 0s}
.ps-four__panel{min-width:0;display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:28px 44px;align-content:start;padding-top:28px;scroll-margin-top:110px}
html:not(.ps-js) .ps-four__panel+.ps-four__panel{margin-top:28px;border-top:1px solid var(--line)}
.ps-four__id h3{margin:12px 0 0;font:500 30px/1.12 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.ps-four__id h3 em{font-style:normal;color:var(--blue)}
.ps-four__id>p{margin:12px 0 0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.ps-gist{margin:20px 0 0;padding:14px 16px;border-radius:12px;background:var(--cream)}
.ps-gist p{margin:6px 0 0;font:500 16.5px/1.4 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.005em;color:#000;text-wrap:pretty}
.ps-read{margin:16px 0 0}
.ps-read p{display:flex;flex-direction:column;gap:6px;margin:8px 0 0}
.ps-read a{font:500 15px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep);text-decoration:none}
.ps-read a::after{content:" \2192"}
.ps-read a:hover{text-decoration:underline;text-underline-offset:4px}
/* one client voice under the results, as on /agents (av-quote) */
.ps-quote{margin:26px auto 0;max-width:640px;text-align:center}
.ps-quote blockquote{margin:0;font:400 17px/1.45 "Neue Montreal",system-ui,sans-serif;color:#1d1d1d;text-wrap:balance}
.ps-quote figcaption{margin-top:8px;font:500 11.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
/* the results run as one row under both columns, so the panel stays short and the three read side by side */
.ps-four__proof{grid-column:1/-1;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.ps-four__k{display:block;margin:0}
.ps-four__lands{margin:14px auto 0;max-width:1000px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;text-align:left}
.ps-land{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#fdfcf8;color:inherit;text-decoration:none;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
a.ps-land:hover{border-color:#000;background:#fff}
.ps-land b{font:500 24px/1.05 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ps-land b.is-words{font-size:18px;line-height:1.2}
.ps-land span{font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}
.ps-land em{margin-top:auto;padding-top:6px;font:500 12.5px/1.3 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:var(--blue-deep)}
/* a small, quiet 'Next role' link in the bottom-right of each proof block;
   a sibling of the lands, deliberately unobtrusive so the role tabs above
   remain the main control (hover brings it forward) */
.ps-next{display:inline-flex;align-items:center;gap:6px;margin-top:22px;float:right;color:#656567;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.005em;text-decoration:none;transition:color .2s var(--ease),gap .2s var(--ease)}
.ps-next svg{width:12px;height:12px;transition:transform .2s var(--ease)}
.ps-next:hover,.ps-next:focus-visible{color:#000}
.ps-next:hover svg,.ps-next:focus-visible svg{transform:translateX(2px)}
.ps-four__proof::after{content:"";display:table;clear:both}

.ps-qs__k{display:block;margin:4px 0 8px}
.ps-qs__list{border-top:1px solid var(--ps-hair)}
.ps-q{border-bottom:1px solid var(--ps-hair);padding:0 18px;transition:background-color .35s ease,border-radius .35s ease,border-color .35s ease}
.ps-q[open],.ps-q:has(+ .ps-q[open]){border-bottom-color:transparent}
.ps-q summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 0;cursor:pointer;font:500 17.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ps-q summary::-webkit-details-marker{display:none}
.ps-q summary::after{content:"";flex:none;width:32px;height:32px;border:1.2px solid #000;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.5 7 9l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
  transition:background-color .3s ease,transform .45s var(--ps-ease)}
.ps-q summary:hover::after{background-color:var(--ps-lav-mk)}
.ps-q:not([open]):hover{background:rgba(107,82,201,.035)}
.ps-q[open]{background:#f7f5ff;border-radius:14px}
.ps-q[open] summary::after{transform:rotate(180deg);background-color:var(--ps-lav-mk)}
.ps-q summary:focus-visible{outline:none}
.ps-q summary:focus-visible::after{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--blue)}
.ps-q__a{padding:0 0 20px;max-width:660px}
.ps-q__a p{margin:0;font:400 16px/1.6 "Neue Montreal",system-ui,sans-serif;color:#333}
.ps-q__a p+p{margin-top:12px}
.ps-q[open] .ps-q__a{animation:ps-q-in .55s var(--ps-ease)}
@keyframes ps-q-in{from{opacity:0;transform:translateY(-4px)}}
.ps-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:14px!important;font-size:14.5px!important}
.ps-more>span{font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ps-more a{font-weight:500;color:var(--blue);text-decoration:none}
.ps-more a::after{content:" \2192"}
.ps-more a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- 03 three ways in: a card each, with its own small drawing on a dotted board ---- */
.ps-doors{max-width:1180px;margin:64px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;text-align:left}
.ps-door{position:relative;display:flex;flex-direction:column;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden}
.ps-door--main{box-shadow:8px 8px 0 #000}
.ps-door__k{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.ps-door__tag{height:24px;display:inline-flex;align-items:center;padding:0 10px;border-radius:999px;background:var(--yellow);border:1.2px solid #000;font:500 12px/1 "Neue Montreal",system-ui,sans-serif}
.ps-door__art{position:relative;height:172px;border-bottom:1.5px solid #000;background:#fdfcf8 radial-gradient(circle,rgba(0,0,0,.13) 1px,transparent 1.3px) 0 0 / 18px 18px}
.ps-door__body{flex:1;display:flex;flex-direction:column;gap:10px;padding:22px 24px 24px}
.ps-door__body h3{margin:2px 0 0;font:500 23px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.ps-door__body>p{margin:0;font:400 15.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.ps-door__facts{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px}
.ps-door__facts li{position:relative;padding-left:22px;font:400 14.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}
.ps-door__facts li::before{content:"";position:absolute;left:0;top:2px;width:14px;height:14px;border-radius:50%;background:#caf0be url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4 7.2 6 9l4-4.4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;box-shadow:inset 0 0 0 1px #000}
.ps-door__go{margin-top:auto;padding-top:12px;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep);text-decoration:none}
.ps-door__go:hover{text-decoration:underline;text-underline-offset:4px}

/* shared pieces of the three drawings: a job card, the AI disc, a done chip, a dashed link */
.pd{position:absolute;inset:0}
.pd-job{position:absolute;width:74px;height:46px;padding:9px 10px;border:1.5px solid #000;border-radius:9px;background:#fff;box-shadow:4px 4px 0 -1px rgba(0,0,0,.07);display:grid;align-content:start;gap:6px}
.pd-job i{display:block;height:5px;border-radius:3px;background:#b9b9b9}
.pd-job i:first-child{width:70%;background:#000}
.pd-job i:last-child{width:46%}
.pd-ai{position:absolute;width:44px;height:44px;border:1.5px solid #000;border-radius:50%;background:var(--blue-light);display:grid;place-items:center;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.pd-ok{position:absolute;height:30px;display:inline-flex;align-items:center;gap:7px;padding:0 12px 0 8px;border:1.5px solid #000;border-radius:999px;background:#caf0be;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap}
.pd-ok svg{width:14px;height:14px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pd-link{position:absolute;height:0;border-top:1.5px dashed rgba(0,0,0,.4);transform-origin:left}

/* one agent: three jobs queue, one goes through the agent, a done chip lands */
.pd-agent .pd-job--3{left:calc(50% - 128px);top:46px;opacity:.45}
.pd-agent .pd-job--2{left:calc(50% - 124px);top:58px;opacity:.75}
.pd-agent .pd-job--1{left:calc(50% - 120px);top:70px}
.pd-agent .pd-link--a{left:calc(50% - 42px);width:20px;top:93px}
.pd-agent .pd-ai{left:calc(50% - 22px);top:71px}
.pd-agent .pd-link--b{left:calc(50% + 22px);width:20px;top:93px}
.pd-agent .pd-ok{left:calc(50% + 44px);top:78px}

/* a Jumpstart: the workflow mapped as five steps, the slow one found, a prototype built on it */
.pd-map{position:absolute;left:50%;top:30px;transform:translateX(-50%);display:flex;align-items:center}
.pd-map span{width:30px;height:30px;border:1.5px solid #000;border-radius:8px;background:#fff}
.pd-map span.is-slow{background:var(--yellow);box-shadow:0 0 0 4px rgba(255,235,161,.55)}
.pd-map i{width:16px;border-top:1.5px solid #000}
.pd-proto{position:absolute;left:50%;top:84px;width:176px;transform:translateX(-50%);border:1.5px solid #000;border-radius:9px;background:#fff;box-shadow:4px 4px 0 -1px rgba(0,0,0,.07);overflow:hidden}
.pd-proto>div:first-child{height:12px;border-bottom:1.5px solid #000;background:#fdfcf8}
.pd-proto ul{list-style:none;margin:0;padding:8px 10px;display:grid;gap:6px}
.pd-proto li{display:flex;align-items:center;gap:7px}
.pd-proto li i{height:5px;border-radius:3px;background:#b9b9b9}
.pd-proto li b{width:10px;height:10px;border:1.2px solid #000;border-radius:3px;background:#caf0be}
.pd-proto li:nth-child(2) b{background:var(--yellow)}
.pd-pin{position:absolute;left:calc(50% - 1px);top:62px;height:22px;border-left:1.5px dashed rgba(0,0,0,.4);transform-origin:top}

/* the Studio: one window, its modules filling in, with a person and the AI on it together */
.pd-sys{position:absolute;left:50%;top:26px;width:208px;transform:translateX(-50%);border:1.5px solid #000;border-radius:10px;background:#fff;box-shadow:4px 4px 0 -1px rgba(0,0,0,.07);overflow:hidden}
.pd-sys>div:first-child{height:14px;border-bottom:1.5px solid #000;background:#fdfcf8}
.pd-sys__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:9px}
.pd-sys__grid span{height:30px;border:1.2px solid #000;border-radius:6px;background:var(--c,#fff)}
.pd-sys .pd-who{position:absolute;right:-1px;bottom:-1px}
.pd-team{position:absolute;left:calc(50% + 72px);top:118px;display:flex}
.pd-team>*+*{margin-left:-8px}
.pd-team .ps-face,.pd-team .pd-ai{position:static;width:32px;height:32px;flex:0 0 32px;font-size:11px}

@media (prefers-reduced-motion:no-preference){
  .ex-js .ps-doors:not(.is-seen) .pd-agent .pd-job--1{transform:translateX(-14px);opacity:0}
  .ex-js .ps-doors:not(.is-seen) .pd-ok,.ex-js .ps-doors:not(.is-seen) .pd-proto,.ex-js .ps-doors:not(.is-seen) .pd-team{opacity:0}
  .ex-js .ps-doors:not(.is-seen) .pd-link{transform:scaleX(0)}
  .ex-js .ps-doors:not(.is-seen) .pd-pin{transform:scaleY(0)}
  .ex-js .ps-doors:not(.is-seen) .pd-map span{opacity:.3}
  .ex-js .ps-doors:not(.is-seen) .pd-map span.is-slow{background:#fff;box-shadow:none}
  .ex-js .ps-doors:not(.is-seen) .pd-sys__grid span{background:#fff;border-style:dashed;border-color:#b9b9b9}
  .ps-doors.is-seen .pd-agent .pd-job--1{animation:pd-rise .6s var(--ps-ease) .2s backwards}
  .ps-doors.is-seen .pd-agent .pd-ai{animation:pd-swell .6s var(--ps-ease) .8s}
  .ps-doors.is-seen .pd-agent .pd-link--a{animation:pd-reach .3s var(--ease) .6s backwards}
  .ps-doors.is-seen .pd-agent .pd-link--b{animation:pd-reach .3s var(--ease) 1.2s backwards}
  .ps-doors.is-seen .pd-agent .pd-ok{animation:pd-pop .55s var(--ps-ease) 1.45s backwards}
  .ps-doors.is-seen .pd-map span{animation:pd-on .35s var(--ease) calc(.25s + var(--i) * .16s) backwards}
  .ps-doors.is-seen .pd-map span.is-slow{animation:pd-on .35s var(--ease) calc(.25s + var(--i) * .16s) backwards,pd-slow .6s var(--ps-ease) 1.2s backwards}
  .ps-doors.is-seen .pd-pin{animation:pd-drop .4s var(--ease) 1.75s backwards}
  .ps-doors.is-seen .pd-proto{animation:pd-land .6s var(--ps-ease) 2.1s backwards}
  .ps-doors.is-seen .pd-sys__grid span{animation:pd-fill .45s var(--ease) calc(.3s + var(--i) * .18s) backwards}
  .ps-doors.is-seen .pd-team{animation:pd-pop .55s var(--ps-ease) 1.5s backwards}
}
@keyframes pd-rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pd-swell{50%{transform:scale(1.12)}}
@keyframes pd-pop{from{opacity:0;transform:scale(.8)}}
@keyframes pd-on{from{opacity:.3}}
@keyframes pd-slow{from{background:#fff;box-shadow:none}}
@keyframes pd-reach{from{transform:scaleX(0)}}   /* a link draws from where the work comes from */
@keyframes pd-drop{from{transform:scaleY(0)}}
@keyframes pd-land{from{opacity:0;transform:translateX(-50%) translateY(-6px) scale(.96)}}   /* keeps the centring transform */
@keyframes pd-fill{from{background:#fff;border-color:#b9b9b9}}

/* ---- 04 the people who'll use it ---- */
.ps-people .ex-aside{max-width:680px}

/* ---- 05 next step: the two ways forward, then the rehearsal prompt ---- */
.ps-cta__art svg *{vector-effect:non-scaling-stroke}   /* one weight at every size (stroke probe) */
.ps-cta__art .ps-cta__tile{fill:#caf0be}
.ps-cta__art .ps-cta__ok{transform-box:fill-box;transform-origin:center}
.ex-js .ps-cta__art .ps-cta__rider{opacity:0}
#who-weighs-in .ex-prompt{max-width:1180px;margin-top:40px}
@media (prefers-reduced-motion:no-preference){
  .ex-js .ps-cta__art:not(.is-seen) .ps-cta__ok{opacity:.35;transform:scale(.6)}
  .ex-js .ps-cta__art:not(.is-seen) .ps-cta__tile{fill:#fff}
  .ps-cta__art.is-seen .ps-cta__ok{animation:ps-cta-ok .5s var(--ps-ease) calc(.3s + var(--i) * .35s) backwards}
  .ps-cta__art.is-seen .ps-cta__tile{animation:ps-cta-call .5s var(--ease) 1.8s backwards}
  .ps-cta__art.is-seen .ps-cta__rider{animation:ps-cta-ride 7s cubic-bezier(.45,0,.55,1) 2.4s infinite}
}
@keyframes ps-cta-ok{from{opacity:.35;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ps-cta-call{from{fill:#fff}to{fill:#caf0be}}
@keyframes ps-cta-ride{0%{transform:translateX(0);opacity:0}8%{opacity:1}86%{transform:translateX(414px);opacity:1}100%{transform:translateX(414px);opacity:0}}

/* ---- responsive ---- */
@media (max-width:1180px){
  .ps-hx__in{grid-template-columns:1fr;gap:48px;max-width:760px}
  .ps-hx__copy{text-align:center}
  .ps-hx__sub{margin-left:auto;margin-right:auto}
  .ps-hx__go{justify-content:center}
  .ps-four__bar{flex-direction:column;gap:12px}
  .ps-doors{grid-template-columns:1fr;max-width:560px}
}
@media (max-width:900px){
  .ps-four{padding:18px 18px 24px}
  .ps-four__panel{grid-template-columns:1fr;gap:26px}
  .ps-four__lands{grid-template-columns:1fr}
  .ps-js .ps-four__panel:not(.is-on){display:none}   /* stacked on a phone, so each tab takes only its own height */
}
@media (max-width:640px){
  .ps-hx{padding:120px 0 80px}
  .ps-hx__title{font-size:42px}
  .ps-hx__sub{font-size:18px}
  .ps-win__bar{padding:13px 16px}
  .ps-tab{padding-right:12px;gap:7px}
  .ps-tab__n{display:none}   /* on a phone the tab is the role, so all four fit one row and nobody has to remember who is the CFO */
  .ps-tab small{font-size:12px;letter-spacing:.04em;color:#000}
  .ps-four__tabs{flex-wrap:nowrap;gap:6px}
  .ps-q{padding:0 12px}
  .ps-q summary{padding:16px 0;gap:16px;font-size:16.5px}
  .ps-q summary::after{width:30px;height:30px}
}
@media (prefers-reduced-motion:reduce){
  .ps-win__state::before{animation:none}
  .ps-q,.ps-q summary::after{transition:none}
  .ps-q[open] .ps-q__a{animation:none}
}