/* The finder and "Every playbook" for /playbooks: GENERATED by orchestration-menu-handover/playbooks-finder/export_site.mjs from its src.html. Do not edit here. */
.finder,.pw-all{container-type:inline-size;container-name:frame}
.finder *,.pw-all *{box-sizing:border-box}
.finder [hidden],.pw-all [hidden]{display:none!important}
.finder button,.finder input,.pw-all button{font:inherit}
.finder svg,.pw-all svg{flex-shrink:0}
.pw-band,.pw{scroll-margin-top:88px}

.cta-2:focus-visible,.chip:focus-visible,.pbm-go:focus-visible,.pbm-trig:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---- the finder ---- */
.finder{padding:52px 0 60px;background:var(--bg);scroll-margin-top:64px}
.finder h2{font-size:34px;line-height:1.1;letter-spacing:-.02em;margin:12px 0 24px}
.f-top{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:24px;align-items:stretch}
.f-steps{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px}
.step+.step{border-top:1px solid var(--border);margin-top:20px;padding-top:20px}
.step-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin:0}
.num{width:26px;height:26px;border-radius:50%;background:var(--night);color:#fff;font:700 13px/26px 'Space Mono',monospace;text-align:center;flex-shrink:0}
.step-b{margin-left:36px}
.helper{font-size:13px;margin:4px 0 12px;color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{border:1.5px solid var(--border);background:#fff;border-radius:100px;padding:9px 14px;font:700 14px/1 'Space Mono',monospace;cursor:pointer;color:var(--text)}
.chip[aria-pressed="true"]{background:var(--night);color:#fff;border-color:var(--night)}
.other{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.other input{width:200px;border:1.5px solid var(--border);border-radius:100px;padding:9px 16px;font:700 14px/1 'Space Mono',monospace;color:var(--text);-moz-appearance:textfield;appearance:textfield}
.other input::-webkit-outer-spin-button,.other input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}   /* JB 29 Sep: "make this part bigger, it doesn't fit"; the number arrows covered the end of the text */
.other input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.other input::placeholder{color:#4B5563;opacity:1}
.err{font-size:12px;font-weight:700;color:#B42318;margin-top:8px}
.pct{font:700 28px/1.1 'Space Mono',monospace;color:var(--accent);margin:6px 0 10px}
.drag{-webkit-appearance:none;appearance:none;width:100%;height:24px;margin:0;background:transparent;cursor:ew-resize}
.drag::-webkit-slider-runnable-track{height:12px;border-radius:100px;background:linear-gradient(90deg,var(--accent) calc(var(--v) * 1%),transparent calc(var(--v) * 1%)),repeating-linear-gradient(135deg,#B9C4F7 0 4px,#E4E9FD 4px 8px)}
.drag::-moz-range-track{height:12px;border-radius:100px;background:linear-gradient(90deg,var(--accent) calc(var(--v) * 1%),transparent calc(var(--v) * 1%)),repeating-linear-gradient(135deg,#B9C4F7 0 4px,#E4E9FD 4px 8px)}
.drag::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-6px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.drag::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.drag:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:100px}
.leg{display:flex;justify-content:space-between;font:700 12px/1.3 'Space Mono',monospace;margin:8px 0 12px}
/* the TAM map, compact and following the answers */
.pbm-map{text-align:left;border-radius:16px;padding:20px;background:var(--night);color:#fff;height:100%}
.pbm-head{display:flex;align-items:center;gap:8px}
.pbm-k{font:700 12px/1.2 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.pbm-eg{font:700 11px/1 'Space Mono',monospace;color:var(--night);background:var(--ice);border-radius:100px;padding:4px 8px}
.pbm-total{font:700 22px/1.2 'Space Mono',monospace;color:#fff;margin:4px 0 12px}
.pbm-row{display:flex;align-items:center;justify-content:space-between;gap:10px;position:relative;overflow:hidden}
.pbm-name{font-weight:600;font-size:14px}
.pbm-count{font:700 14px/1.3 'Space Mono',monospace}
.pbm-out{border:1.5px dashed rgba(255,255,255,.4);border-radius:10px;padding:11px 14px;margin-bottom:10px;color:#fff}
.pbm-crm{background:var(--accent);border-radius:10px;padding:12px}
.pbm-crm-h{display:flex;align-items:center;gap:8px;color:#fff;font-weight:700;font-size:13px;margin-bottom:4px}
.logos{display:inline-flex;gap:4px}
.logos img{width:16px;height:16px;border-radius:4px;background:#fff;padding:2px;display:block}
.pbm-stage{background:rgba(255,255,255,.16);color:#fff;border:2px solid transparent;border-radius:8px;padding:8px 12px;margin-top:6px}
.pbm-stage.lit{background:#fff;color:var(--text);box-shadow:0 0 0 2px var(--ice)}
.pbm-out.lit{border-style:solid;border-color:var(--ice);background:rgba(143,237,255,.12)}
.row-r{display:flex;align-items:center;gap:8px}
.rk{font:700 11px/1 'Space Mono',monospace;background:var(--ice);color:var(--night);border-radius:100px;padding:4px 7px}
.share{position:absolute;left:0;bottom:0;height:3px;transition:width .35s ease}
.pbm-out .share{background:var(--ice)}
.pbm-stage .share{background:var(--ice)}
.pbm-stage.lit .share{background:var(--accent)}
/* the ranking */
.f-res{margin-top:28px}
.res-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;margin:0 0 14px}
.res-grid{display:grid;grid-template-columns:1.45fr 1fr 1fr;gap:16px;align-items:stretch}
.res{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:8px}
.res.first{border:2px solid var(--accent);box-shadow:0 8px 24px rgba(18,55,224,.12)}
.res-rank{font:700 12px/1.3 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.res h3{font-size:22px;line-height:1.2;margin:0}
.res-why{font-weight:700;font-size:15px;line-height:1.4}
.res-what{font-size:14px;line-height:1.5}
.res .still{width:100%;height:auto;border-radius:10px;border:1px solid var(--border);display:block;margin-top:4px}
.pbm-go{align-self:flex-start;margin-top:auto;display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:14px;border:1.5px solid var(--accent);border-radius:100px;padding:9px 16px;text-decoration:none}
.pbm-go svg{width:14px;height:14px}
.pbm-trig-h{font:700 12px/1.3 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;margin:24px 0 10px}
.pbm-trigs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pbm-trig{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:10px;padding:11px 14px;background:#fff;text-decoration:none;font-size:14px}
.pbm-trig svg{width:16px;height:16px;fill:var(--accent)}
.pbm-trig span{margin-left:auto;font-size:13px}
.next{padding:52px 0;background:#fff;border-top:1px solid #eee}
.next h2{font-size:28px;margin:12px 0 16px;letter-spacing:-.02em}
.all{display:flex;flex-wrap:wrap;gap:8px}
.all span{border:1px solid var(--border);border-radius:100px;padding:8px 14px;font-weight:700;font-size:14px}

/* ---- 3 ways to feel the finder (JB 29 Sep: "the user wants to basically feel it"). fx- prefix. ---- */
.capf{margin:0 0 8px;font-size:15px;line-height:1.55;max-width:880px}
.fx-vis{min-width:0;display:flex}
.fx-vis>.pbm-map{flex:1}
.fx-card{position:relative}
.fx-head{display:flex;align-items:center;gap:8px;min-height:24px}
.fx-total{margin-left:auto;font:700 16px/1.2 'Space Mono',monospace;white-space:nowrap}
.fx-gridwrap{position:relative;margin-top:14px}
.fx-card .sq{transition:background-color .25s ease,box-shadow .25s ease,opacity .25s ease}
.fx-card .sq.dim{opacity:.2}
.fx-card .sq.ghost{background-color:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.fx-card .waffle.fx-pop .sq{animation:fxpop .5s cubic-bezier(0.16,1,0.3,1) both;animation-delay:calc(var(--i) * 5ms)}
@keyframes fxpop{from{transform:scale(0)}to{transform:scale(1)}}
.fx-ghost-note{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 14px/1.3 'Space Mono',monospace;color:#fff;text-align:center;pointer-events:none}
.fx-ghost-note span{background:var(--night);border-radius:8px;padding:8px 12px}
.fx-unit{font:700 12px/1.3 'Space Mono',monospace;margin-top:10px;min-height:16px}
.fx-card .wleg{margin-top:10px}
.sw-dormant{background:#4C6BFF}
.sw-working{background:#9DB0FF}
.sw-opp{background:#fff}
.sw-client{background:var(--ice)}
.fx-top{margin-top:12px}
.fx-res{grid-template-columns:repeat(3,minmax(0,1fr))}
.fx-res .res.fx-new{animation:fxnew 1s ease 1}
@keyframes fxnew{0%{box-shadow:0 0 0 0 rgba(18,55,224,.45)}100%{box-shadow:0 0 0 14px rgba(18,55,224,0)}}
.fx-in{animation:fxin .5s cubic-bezier(0.16,1,0.3,1) both;animation-delay:var(--delay,0ms)}
@keyframes fxin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.fx-locked .step-h .num{background:#fff;color:var(--night);box-shadow:inset 0 0 0 2px var(--night)}
.fx-lock{font-size:13px;font-weight:700;color:var(--text);margin:8px 0 0 36px}
.fx-build{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0 36px;background:var(--accent);color:#fff;border:0;border-radius:100px;padding:13px 22px;font:700 15px/1 'Space Grotesk',sans-serif;cursor:pointer}
.fx-build svg{width:16px;height:16px}
.fx-build[disabled]{background:var(--accent-light);color:var(--accent);cursor:not-allowed;box-shadow:inset 0 0 0 1.5px rgba(18,55,224,.35)}
.fx-build:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fx-build.fx-ready{animation:fxready 1.4s ease 1}
@keyframes fxready{0%{box-shadow:0 0 0 0 rgba(18,55,224,.5)}100%{box-shadow:0 0 0 16px rgba(18,55,224,0)}}
.res.fx-ghost{background:transparent;border:1.5px dashed #9DB0FF;justify-content:center;min-height:190px}
.fx-ghost-t{font-size:14px;font-weight:700;color:var(--text)}
.fx-steps{list-style:none;margin:4px 0 6px;padding:0;display:grid;gap:7px}
.fx-steps li{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.4}
.fx-steps svg{width:16px;height:16px;flex-shrink:0;fill:var(--accent);margin-top:2px}
.fx-after{font-size:14px;font-weight:700;margin-top:14px;color:var(--text)}
.fx-run{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}
.fx-first{background:#fff;border:2px solid var(--accent);border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(18,55,224,.12);transition:opacity .18s ease}
.fx-first.fx-swap{opacity:0}
.fx-first h3{font-size:24px;line-height:1.2;margin:4px 0 6px}
.fx-track{position:relative;height:16px;margin:18px 0 6px;overflow:hidden}
.fx-track::before{content:"";position:absolute;left:12.5%;right:12.5%;top:7px;height:2px;background:#C9D1F7}
.fx-station{position:absolute;top:3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px var(--accent)}
.fx-lane{position:absolute;left:12.5%;right:12.5%;top:0;bottom:0}
.fx-dot{position:absolute;left:-4px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:0}
.fx-running .fx-lane{animation:fxlane 2.4s linear infinite;animation-delay:calc(var(--k,0) * .8s)}
.fx-running .fx-dot{animation:fxdot 2.4s linear infinite;animation-delay:calc(var(--k,0) * .8s)}
@keyframes fxlane{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes fxdot{0%{opacity:0}10%{opacity:1}88%{opacity:1}100%{opacity:0}}
.fx-pipe{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.fx-node{background:var(--accent-light);border:1px solid rgba(18,55,224,.22);border-radius:10px;padding:10px 12px;font-size:13px;line-height:1.35;font-weight:600;color:var(--text)}
.fx-node b{display:block;font:700 11px/1 'Space Mono',monospace;color:var(--accent);margin-bottom:6px}
.fx-side{display:grid;gap:12px}
.fx-side .res h3{font-size:18px}
/* ---- 3, guided (JB 29 Sep): 1 question at a time, the box waiting, a slider that shows itself. gx- prefix. ---- */
.gx-stage{position:relative}
.gx-stage>.f-top,.gx-stage>.f-res{position:relative;z-index:1}
.gx-wire{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.gx-wire path{fill:none;stroke:#9DB0FF;stroke-width:2.5;stroke-linecap:round}
.gx-wire circle{fill:var(--accent)}
.gx-stage .res-h{display:inline-flex;background:var(--bg);padding-right:12px;margin-bottom:26px}
.gx-hint{font-size:13px;font-weight:700;color:var(--accent);margin-top:12px}
.gx-cue2 [data-p]{animation:gxchip var(--gx-cue,2500ms) ease-in-out 2;animation-delay:calc(var(--k,0) * 180ms)}
@keyframes gxchip{0%,55%,100%{box-shadow:0 0 0 0 rgba(18,55,224,0),inset 0 0 0 0 rgba(18,55,224,0)}22%{box-shadow:0 0 0 5px rgba(18,55,224,.18),inset 0 0 0 1.5px var(--accent)}}
.gx-cue .step-h .num{animation:gxnum var(--gx-cue,2500ms) ease-in-out 2}
@keyframes gxnum{0%,100%{box-shadow:0 0 0 0 rgba(18,55,224,0)}40%{box-shadow:0 0 0 7px rgba(18,55,224,.22)}}
.num.gx-ok{background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.num.gx-ok svg{width:15px;height:15px;fill:#fff}
.gx-map{transition:box-shadow .5s ease}
.gx-map.gx-glow{box-shadow:0 0 0 1.5px rgba(143,237,255,.45),0 0 36px rgba(143,237,255,.2);animation:gxglow 2.4s ease-in-out 2}
@keyframes gxglow{0%,100%{box-shadow:0 0 0 1.5px rgba(143,237,255,.2),0 0 12px rgba(143,237,255,.06)}50%{box-shadow:0 0 0 1.5px rgba(143,237,255,.75),0 0 46px rgba(143,237,255,.32)}}
.gx-wait{visibility:hidden}
.pbm-out.gx-empty{border-color:rgba(255,255,255,.28)}
.gx-empty .pbm-count,.gx-empty .share{visibility:hidden}
.pbm-crm{transition:background-color .6s ease,box-shadow .6s ease}
.pbm-crm.gx-empty{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.2)}
.pbm-crm.gx-empty .pbm-stage{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.gx-thumb::-webkit-slider-thumb{animation:gxthumb 1.2s ease-in-out 3}
@keyframes gxthumb{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 0 rgba(18,55,224,.4)}50%{box-shadow:0 2px 8px rgba(0,0,0,.25),0 0 0 10px rgba(18,55,224,0)}}
.gx-node{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:6px;align-content:start;background:transparent;border:0;padding:0}
.gx-node>.gc,.gx-node>.gx-out{align-self:start}   /* a step that names no record is as tall as its words */
.gx-node-top{display:flex;align-items:center;gap:8px;min-height:26px}
.gx-node-top b{margin:0;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.gx-icons{display:inline-flex;gap:3px}
.gx-icons img{display:block;width:26px;height:26px}
.gx-kind{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px rgba(18,55,224,.35);display:inline-flex;align-items:center;justify-content:center}
.gx-kind svg{width:14px;height:14px;fill:var(--accent)}
.gx-node-a{font:700 11px/1.3 'Space Mono',monospace;color:var(--accent)}
.gx-out{display:block;flex:1;background:#fff;border:1px solid rgba(18,55,224,.18);border-radius:8px;padding:8px 10px;font-size:12.5px;line-height:1.4;font-weight:500;color:var(--text)}
.gx-out b{display:block;font:700 12.5px/1.35 'Space Grotesk',sans-serif;color:var(--text);margin-bottom:3px}
.gx-stage .fx-run{grid-template-columns:minmax(0,1fr)}
.gx-stage .fx-side{grid-template-columns:repeat(2,minmax(0,1fr))}
@container frame (max-width: 900px){.gx-stage .fx-side{grid-template-columns:minmax(0,1fr)}}
.gx-pipe-h{display:flex;align-items:center;gap:8px;margin:16px 0 0;font:700 12px/1.3 'Space Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.gx-eva{display:flex;align-items:center;gap:16px;margin:0 0 18px}
/* Eva, bigger (JB 29 Sep): face and shoulders, her eyes a layer over the portrait's eye crop (296, 288, 686 x 260 of 1254) */
.gx-face{position:relative;display:block;width:128px;height:128px;border-radius:50%;overflow:hidden;flex-shrink:0;background:#fff;box-shadow:0 0 0 3px var(--ice)}
.gx-face img{display:block;width:100%;height:100%}
.ev-in{position:absolute;inset:0;transform:scale(1.14);transform-origin:51% 33%}   /* her face bigger in the circle; her eyes stay put */
.ev-eye{position:absolute;left:23.6%;top:22.97%;width:54.7%;height:20.73%;background:url(/images/playbooks-finder/eva-eyes.webp) no-repeat;background-size:100% 1700%;background-position:0 calc(var(--f,7) * 100% / 16)}
@container frame (max-width: 600px){.gx-face{width:92px;height:92px}}
/* her face moving (JB 30 Sep): the site's expression frames, whole-face patches over the portrait (391, 293, 483 x 431 of 1254).
   While 1 plays only the expression is drawn, as in eva-avatar-v41.js; g2_1 is her own face, no patch */
.ev-face{position:absolute;left:31.18%;top:23.365%;width:38.517%;height:34.37%;background:url(/images/playbooks-finder/eva-face.webp) no-repeat;background-size:100% calc(var(--n) * 100%);background-position:0 calc(var(--x,0) * 100% / (var(--n) - 1));visibility:hidden}
.gx-express .ev-eye{visibility:hidden}
.gx-express:not([data-expression-frame="g2_1"]) .ev-face{visibility:visible}
.gx-say{margin:0;background:var(--accent-light);border-radius:4px 14px 14px 14px;padding:10px 14px;font-size:14px;line-height:1.45;color:var(--text)}
.gx-say b{display:block;font-size:12px;color:var(--accent);margin-bottom:2px}
.gx-agents{display:flex;gap:4px;margin:2px 0 4px}
.gx-agents img{display:block;width:22px;height:22px}
/* the record each step hands back (JB 29 Sep, later: "show the different cards for the accounts and contacts, with
   what's necessary in those cards"), drawn the way the product draws its records. gc- prefix. */
.gx-flow .fx-pipe{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:36px 48px;align-items:start}   /* room for the links between the cards */
.gc{display:flex;flex-direction:column;gap:7px;min-width:0;background:#fff;border:1px solid #DDE1E6;border-radius:8px;padding:10px;box-shadow:0 1px 3px rgba(20,20,20,.08);font:500 12px/1.4 'Space Grotesk',sans-serif;color:var(--text)}
.gc b{display:inline;margin:0;font:inherit;font-weight:700;color:inherit}
.gc svg{flex-shrink:0}
.gc-type{display:flex;align-items:center;gap:5px;font:700 11px/1.2 'Space Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.gc-type svg{width:13px;height:13px;fill:var(--accent)}
.gc-head{display:flex;align-items:center;gap:8px;min-width:0}
.gc-logo,.gc-ava{position:relative;width:32px;height:32px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:#EBEEFF;color:var(--accent);font:700 11px/1 'Space Grotesk',sans-serif}
.gc-logo{border-radius:6px}
.gc-ava{border-radius:50%}
.gc-logo i,.gc-ava i{position:relative;font-style:normal}
.gc-logo.gc-scored{width:38px;height:38px;background:transparent}
.gc-logo.gc-scored svg{position:absolute;inset:0;width:38px;height:38px}
.gc-logo.gc-scored i{width:28px;height:28px;border-radius:50%;background:#EBEEFF;display:inline-flex;align-items:center;justify-content:center}
.gc .gc-id{display:flex;flex-direction:column;min-width:0}
.gc .gc-id b{font-size:13px;line-height:1.25}
.gc-id span{line-height:1.3}
.gc-v,.gc-chk,.gc-st{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;border-radius:12px;font:600 11.5px/1.25 'Space Grotesk',sans-serif}
.gc-v{padding:3px 8px 3px 5px}
.gc-v svg{width:14px;height:14px}
.gc-yes{background:#E9F6EE;color:#0F7B37}
.gc-no{background:#FFF1F1;color:#DA1E28}
.gc-yes svg,.gc-no svg{fill:currentColor}
.gc-lbl{font:700 11px/1.2 'Space Mono',monospace;color:var(--accent);margin-top:2px}
.gc-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.gc-list li{display:flex;gap:6px;align-items:flex-start}
.gc-list svg{width:14px;height:14px;fill:#16A34A;margin-top:1px}
.gc .gc-list li span b{display:block}
.gc-rules{border:1px solid #DDE1E6;border-radius:6px;overflow:hidden}
.gc-rules-h{background:#F4F4F4;border-bottom:1px solid #DDE1E6;padding:4px 8px;font-size:11.5px;font-weight:700}
.gc-rule{padding:5px 8px}
.gc-and{display:flex;align-items:center;gap:4px;padding:0 8px}
.gc-and::before,.gc-and::after{content:"";flex:1;height:1px;background:#DDE1E6}
.gc-and::before{flex:0 0 10px}
.gc-and span{background:#EBEEFF;color:var(--accent);border-radius:10px;padding:2px 7px;font:700 11px/1.2 'Space Mono',monospace;text-transform:uppercase}
.gc-eval{display:flex;flex-direction:column;gap:6px;border-radius:6px;padding:7px 8px;border:1px solid}
.gc-pass{border-color:rgba(22,163,74,.4);background:#F5FBF7}
.gc-fail{border-color:rgba(218,30,40,.35);background:#FFF8F8}
.gc-eval-n{display:flex;align-items:center;gap:6px;min-width:0}
.gc-eval-n .gc-logo{width:22px;height:22px;border-radius:4px}
.gc .gc-eval-n b{font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-chks{display:flex;flex-wrap:wrap;gap:4px}
.gc-chk{padding:2px 7px 2px 4px;font-size:11px}
.gc-chk svg{width:12px;height:12px}
.gc-res{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:700}
.gc-pass .gc-res{color:#0F7B37}
.gc-fail .gc-res{color:#DA1E28}
.gc-res svg{width:14px;height:14px;fill:currentColor}
.gc-person{display:flex;flex-direction:column;gap:6px}
.gc-person+.gc-person{border-top:1px solid #DDE1E6;padding-top:9px}
.gc-play-h{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.gc .gc-play-h b{font-size:12.5px;line-height:1.3}
.gc-st{flex-shrink:0;padding:3px 8px;background:#E9F6EE;color:#0F7B37;font-size:11px}
.gc-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
@container frame (max-width: 900px){.gx-flow .fx-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container frame (max-width: 600px){.gx-flow .fx-pipe{grid-template-columns:minmax(0,1fr)}}
/* the contact's face and details (JB 29 Sep, later: "the face of the contact that we find ... the contact card with the
   contact details"). The #1 runs in 2 rows: the account's steps, then its people's. */
.gx-row+.gx-row{margin-top:18px}
.gc-face{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 2px #fff,0 0 0 3px #DDE1E6}
.gc-face.gc-sm{width:22px;height:22px;box-shadow:0 0 0 1.5px #DDE1E6}
.gc-for{display:flex;align-items:center;gap:6px}
/* the contact card, merged (JB: "merge all the contact cards"): who they are, the verdict and why, their details */
.gx-flow .gx-span2{grid-column:span 2}
.gc-persons{display:grid;gap:9px}
.gc-persons .gc-person{display:flex;flex-direction:column;gap:8px}
.gc-who,.gc-dets-w{display:flex;flex-direction:column;gap:6px}
.gx-span2 .gc-persons.gc-n2{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.gx-span2 .gc-persons.gc-n2 .gc-person+.gc-person{border-top:0;padding-top:0;border-left:1px solid #DDE1E6;padding-left:18px}
.gx-span2 .gc-persons.gc-n1 .gc-person{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@container frame (max-width: 600px){.gx-flow .gx-span2{grid-column:auto}.gx-span2 .gc-persons.gc-n2{grid-template-columns:minmax(0,1fr);gap:9px}.gx-span2 .gc-persons.gc-n2 .gc-person+.gc-person{border-left:0;padding-left:0;border-top:1px solid #DDE1E6;padding-top:9px}.gx-span2 .gc-persons.gc-n1 .gc-person{grid-template-columns:minmax(0,1fr)}}
.gc-dets{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.gc-dets li{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.gc-dets li>svg{width:15px;height:15px;fill:var(--accent)}
.gc-dets .gc-mail>svg{fill:#16A34A}
.gc-link{color:var(--accent);font-weight:600}
.gc-view-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.gc .gc-view-h b{font-size:13px}
/* the other playbooks' records (JB 30 Sep: "every single card and workflow"), kit examples */
.gc-when{display:flex;gap:7px;align-items:flex-start;border-top:1px solid #DDE1E6;padding-top:8px}
.gc-when svg{width:14px;height:14px;fill:var(--accent);margin-top:1px}
.gc .gc-when b,.gc .gc-ans b,.gc .gc-map b{display:block}
.gc-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;margin:0}
.gc-dl dt{font:700 11px/1.4 'Space Mono',monospace;color:var(--accent)}
.gc-dl dd{margin:0}
.gc-ans,.gc-map{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gc-ans li,.gc-map li{display:flex;flex-direction:column;gap:2px}
.gc-date{font:700 11px/1.3 'Space Mono',monospace;color:var(--accent)}
.gc-to{display:flex;align-items:center;gap:5px;color:var(--accent);font-weight:600}
.gc-to svg{width:13px;height:13px;fill:currentColor}
.gc-via{border-color:rgba(18,55,224,.35);background:#F5F7FF}
.gc-via .gc-res,.gc-res.gc-moved{color:var(--accent)}
.gc-res.gc-stay{color:var(--text)}
.gc-res.gc-moved svg,.gc-via .gc-res svg{fill:currentColor}
/* every playbook, by funnel stage: the site's 3 bands, each playbook's workflow under its own name */
.pw-band{margin-top:40px}
.pw-band>h3{font-size:22px;line-height:1.25;margin:12px 0 4px;letter-spacing:-.01em}
.pw-band>p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.pw{background:#fff;border:1px solid var(--border);border-radius:16px;padding:22px;margin-top:16px}
.pw-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pw-head h4{margin:0;font-size:22px;line-height:1.2}
.pw-when{display:inline-flex;align-items:center;gap:6px;border-radius:100px;background:var(--accent-light);color:var(--accent);padding:5px 11px;font:700 12px/1 'Space Grotesk',sans-serif}
.pw-when svg{width:13px;height:13px;fill:currentColor}
.pw-what{margin:6px 0 0;font-size:15px;line-height:1.45;color:var(--text)}
.pw-paths{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.pw-also{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}
.pw-also h4{margin:0;font-size:18px;line-height:1.25}
@container frame (max-width: 600px){.pw-also{grid-template-columns:minmax(0,1fr)}}
/* step 1 shows itself, then asks (JB: prefill it "like we do with step 2 ... a blinking call to action") */
.chip{transition:border-color .15s ease,background-color .15s ease,color .15s ease}
.chip.gx-try{border-color:var(--accent);background:var(--accent);color:#fff}
.chip.gx-eg{border-style:dashed;border-color:var(--accent);color:var(--accent)}
.gx-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:var(--accent);color:#fff;border-radius:100px;padding:9px 16px;font:700 14px/1.2 'Space Grotesk',sans-serif}
.gx-cta svg{width:16px;height:16px;fill:#fff}
.gx-cta.gx-blink,.gx-guide.gx-blink .gx-guide-say{animation:gxblink var(--gx-blink,1200ms) ease-in-out 2}
@keyframes gxblink{0%,100%{box-shadow:0 0 0 0 rgba(18,55,224,0)}45%{box-shadow:0 0 0 7px rgba(18,55,224,.3)}}
.gx-cue1 .other input{animation:gxchip var(--gx-blink,1200ms) ease-in-out 2}
/* Eva walks the visitor through it: 1 guide that moves from step to step, then into the #1 playbook */
.gx-slot{height:0}
.gx-guide{position:absolute;left:0;top:0;z-index:3;display:flex;align-items:center;gap:16px;will-change:transform}
.gx-guide-say{position:relative;margin:0;background:var(--accent-light);border-radius:4px 14px 14px 14px;padding:10px 14px;font-size:14px;line-height:1.45;color:var(--text)}
.gx-guide-say b{display:block;font-size:12px;color:var(--accent);margin-bottom:2px}
.gx-line{display:block}
.gx-rest{visibility:hidden}
.gx-guide.gx-typing .gx-typed::after{content:"";display:inline-block;width:2px;height:1.05em;margin:0 -2px 0 0;vertical-align:-.18em;background:var(--accent)}
.gx-dots{position:absolute;left:14px;bottom:14px;display:none;gap:5px}
.gx-dots i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:gxdots .9s ease-in-out infinite;animation-delay:calc(var(--k) * 150ms)}
@keyframes gxdots{0%,100%{opacity:.25}50%{opacity:1}}
/* Eva thinks between 2 options: 3 dots where her line goes, her eyes glancing up */
.gx-guide .gx-dots{top:36px;bottom:auto}
.gx-guide.gx-thinking .gx-dots{display:inline-flex}
.gx-guide.gx-thinking .gx-line{visibility:hidden}
.gx-eva.gx-hold{visibility:hidden}
/* the bubble keeps 1 width while Eva's lines change: at the steps, and in the #1 as she walks you through it */
.gx-guide .gx-guide-say{flex:1;min-width:0}
.gx-measure{position:absolute;left:14px;right:14px;top:0;visibility:hidden;pointer-events:none}
.other input.gx-try{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,55,224,.2)}
.f-steps{position:relative}
.gx-pause{position:absolute;top:14px;right:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);color:var(--text);border-radius:100px;padding:6px 11px;font:700 12px/1 'Space Grotesk',sans-serif;cursor:pointer}
.gx-pause svg{display:block;width:12px;height:12px;fill:currentColor}
.gx-pause:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the #1's workflow appears under Eva, step by step (JB 29 Sep) */
.gx-stage .gx-node{opacity:0}
.gx-stage .gx-node.gx-on{opacity:1}
.gx-stage .gx-node.gx-in{animation:gxstep var(--gx-land,450ms) cubic-bezier(.16,1,.3,1) both}
@keyframes gxstep{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fx-first .gx-eva{margin:14px 0 4px}
/* the #1's cards link to each other (JB 30 Sep, later: "it should be connecting the two different cards"): a handle on each
   card's edge, the site's wire colour between them, accounts travelling card to card */
.gx-stage .fx-first{position:relative}
.gx-flow{position:relative}
.gx-links{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.gx-link{opacity:0}
.gx-link.gx-on{opacity:1}
.gx-link path{fill:none;stroke:#9DB0FF;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.gx-link .gx-h{display:none}   /* no handles where a link meets a card (JB, 30 Sep a/b: "lets do B") */
.gx-link .gx-h2{opacity:0;transition:opacity .2s ease}
.gx-link.gx-live .gx-h2{opacity:1}
.gx-link .gx-d{display:none;fill:var(--accent)}
.gx-link.gx-flowing .gx-d{display:inline}
.gx-tpause{top:18px;right:18px}
@container frame (max-width: 900px) {
  .snav{padding:0 18px}
  .snav-links,.snav-cta{display:none}
  .snav-burger{display:block}
  .hero{padding:40px 0 36px}
  .hero h1 br{display:none}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .finder{padding:40px 0 44px}
  .finder h2{font-size:27px}
  .f-top,.res-grid,.pbm-trigs{grid-template-columns:1fr}
  .step-b{margin-left:0}
  .f-steps{padding:18px}
  .pbm-map{height:auto}
  .fx-res,.fx-run{grid-template-columns:1fr}
  .fx-pipe{grid-template-columns:1fr 1fr}
  .fx-track{display:none}
  .fx-lock,.fx-build{margin-left:0}
}
@media (prefers-reduced-motion:reduce){:is(.frame,.finder,.pw-all) *{transition:none!important;scroll-behavior:auto!important}}
@media (prefers-reduced-motion:reduce){.fx-pop .sq,.fx-in,.fx-new,.fx-ready,.fx-running .fx-lane,.fx-running .fx-dot{animation:none!important}.fx-dot{display:none}}
@media (prefers-reduced-motion:reduce){.gx-cue1 .other input,.gx-cue2 [data-p],.gx-cue .step-h .num,.gx-map.gx-glow,.gx-thumb::-webkit-slider-thumb,.gx-cta.gx-blink,.gx-guide.gx-blink .gx-guide-say,.gx-dots i,.gx-stage .gx-node.gx-in{animation:none!important}.gx-wire circle,.gx-link .gx-d{display:none}.chip,.gx-guide{transition:none!important}}
/* the CRM in each workflow (JB 30 Sep: "include the CRM at the end of each of those playbooks or workflows. Even some time
   at the beginning as well"). 3 concepts, picked in the review bar; the site shows none until JB picks */
.capc{margin:0 0 8px;font-size:15px;line-height:1.55;max-width:880px}
.logos-sm{display:inline-flex;flex-shrink:0}
.logos-sm img{width:18px;height:18px;border-radius:50%;background:#fff;padding:2px;box-shadow:0 0 0 1px #DDE1E6}
.logos-sm img+img{margin-left:-5px}
.logos-crm{align-items:center;justify-content:center;width:18px;height:18px;box-sizing:border-box;border-radius:50%;background:#fff;box-shadow:0 0 0 1px #DDE1E6}
.logos-crm svg{width:11px;height:11px;fill:var(--accent)}
.gc-crm-tab{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(18,55,224,.4);border-radius:100px;padding:2px 10px 2px 3px;background:#F5F7FF;font:700 11px/1.3 'Space Grotesk',sans-serif;color:var(--accent)}
.gc-crm-tab.gc-crm-out{border-style:dashed;background:#fff;color:var(--text)}
.gx-out .gc-crm-tab{margin-bottom:6px}
.gx-kind-crm .logos{gap:3px}
.gx-kind-crm .logos img{width:22px;height:22px;border-radius:6px;padding:3px;box-shadow:inset 0 0 0 1px #DDE1E6}
.gc.gc-crmout{border-color:rgba(18,55,224,.45);background:#FBFCFF}
.gx-flow .gx-crm-band{grid-column:1/-1}
.gc-crm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px 16px}
.gc-crm-card{display:flex;flex-direction:column;gap:7px;background:#fff;border:1px solid #DDE1E6;border-radius:8px;padding:10px 12px;box-shadow:0 1px 2px rgba(20,20,20,.06)}
.gc-crm-ch{display:flex;align-items:center;gap:6px;font:700 11px/1.2 'Space Mono',monospace;letter-spacing:.04em;text-transform:uppercase;color:var(--accent)}
.gc-crm-name{display:flex;align-items:center;gap:8px;padding-bottom:7px;border-bottom:1px solid #DDE1E6}
.gc .gc-crm-name b{font-size:12.5px}
.gc-crm-name .gc-face,.gc-crm-name .gc-ava,.gc-crm-name .gc-logo{width:26px;height:26px}
.gc-crm-name .gc-logo svg{width:14px;height:14px;fill:var(--accent)}
.gc-crm-row{display:flex;align-items:center;gap:8px;min-height:20px}
.gc-crm-row img,.gc-crm-row svg{display:block;width:16px;height:16px;flex-shrink:0}
.gc-crm-row span{flex:1;min-width:0}
.gc-crm-row i{flex:0 0 var(--w,52px);height:7px;border-radius:4px;background:#E4E7EC}
.gc-crm-any{align-self:flex-start;margin-top:auto;border:1px dashed rgba(18,55,224,.5);border-radius:100px;padding:2px 10px;font:600 11.5px/1.35 'Space Grotesk',sans-serif;color:var(--accent)}
.gc-tx svg{width:12px;height:12px}
.gx-crm-col{grid-column:var(--col)}
.gx-crm-edge{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:0 48px}
.gx-crm-edge+.gx-row{margin-top:26px}
.gx-row+.gx-crm-edge{margin-top:30px}
.gx-flow .gx-crm-chip{display:flex;align-items:center;gap:10px;justify-self:end;max-width:100%;grid-row:auto;grid-template-rows:none;background:#fff;border:1.5px dashed rgba(18,55,224,.55);border-radius:10px;padding:9px 12px;font:500 12px/1.4 'Space Grotesk',sans-serif;color:var(--text)}
.gx-crm-chip b{display:block;font-weight:700;font-size:12.5px;color:var(--accent)}
.gc-crm-foot{display:flex;align-items:center;gap:7px;border-top:1px dashed rgba(18,55,224,.4);padding-top:7px;margin-top:2px;font:500 11.5px/1.35 'Space Grotesk',sans-serif;color:var(--accent)}
.gc-crm-foot b{font-weight:700}
.gx-out .gc-crm-foot{margin-top:8px}
@container frame (max-width: 900px){.gx-crm-col{grid-column:auto}.gx-crm-edge{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container frame (max-width: 600px){.gx-crm-edge{grid-template-columns:minmax(0,1fr)}}

/* JB, 19 Oct 2026 (fix_finder_icons_1019.py): the agent that produced a step card's result, beside its label */
.gc-lbl-ag{display:flex;align-items:center;gap:6px}.gc-lbl-ag img{width:16px;height:16px;flex:none}
/* "Or start on a trigger" sits in the light results block: dark text there, not the dark map panel's white */
.f-res .pbm-trig-h{color:var(--text,#141414)}
.f-res .pbm-trigs{grid-template-columns:repeat(3,minmax(0,1fr))}
.f-res .pbm-trig{color:var(--text,#141414);background:var(--surface,#fff);border-color:var(--border,#E0E0E0)}
.f-res .pbm-trig:hover{border-color:var(--accent,#1237E0)}
.f-res .pbm-trig svg{fill:var(--accent,#1237E0);flex:none}
.f-res .pbm-trig span{color:#525252}
@media (max-width:700px){.f-res .pbm-trigs{grid-template-columns:1fr}}