/* One catalog agent's "what's included" page (CONCEPT, 2026-09-26), prefix agd-. Generated by
   scripts/agents/gen_agent_page.py into agents/<slug>.html. Loads after agents.css, which supplies
   .ag-section, .ag-head, .ag-tick, .ag-glyph, the FAQ and the team colour (body[data-fn] sets --fn).
   One idea per section, lots of air: Justin found the busier pricing concepts clunky. Base styles are
   the finished frame; .ag-js (set by agents.js) gates the pre-reveal state. */

/* ---------- hero ---------- */
.agd-hero{padding:56px 0 120px}
.agd-hero__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.agd-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.agd-hero__crumb{display:flex;gap:10px;font:400 14px/1 "Neue Montreal",system-ui,sans-serif;color:#656567}
.agd-hero__crumb a{color:#656567;text-underline-offset:3px}
.agd-hero__crumb a:hover{color:#000}
.agd-hero__id{display:flex;align-items:center;gap:12px}
.agd-hero__badge{background:var(--fn,#fff)}
.agd-hero__title{margin:0;font:500 64px/1.02 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.agd-hero__sub{margin:0;max-width:520px;font:400 20px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-hero__meta{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.agd-hero__meta li{padding:8px 13px;border:1.5px solid #000;border-radius:999px;background:#fff;font:400 14px/1 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-hero__meta b{font-weight:500;color:#000}
.agd-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.agd-hero__art{min-width:0}
.agd-hero__based{display:flex;align-items:center;gap:10px;margin:-6px 0 0;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-hero__bic{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.2px solid #000;border-radius:50%;background:var(--blue-light)}
.agd-hero__bic svg{width:13px;height:13px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* the agent's review screen */
.agd-scr{margin:0;position:relative;background:#fff;border:1.5px solid #000;border-radius:16px;box-shadow:6px 6px 0 #000;overflow:hidden}
.agd-scr__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:var(--cream);border-bottom:1.5px solid #000;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.agd-scr__bar i{width:7px;height:7px;border-radius:50%;background:#000}
.agd-scr__bar span{margin-left:8px}
.agd-scr__bar em{margin-left:auto;font-style:normal;font-size:12px;color:#2f5a1f;display:flex;align-items:center;gap:6px}
.agd-scr__bar em::before{content:"";width:7px;height:7px;border-radius:50%;background:#3aa35a}
.agd-scr__rows{position:relative;list-style:none;margin:0;padding:6px 18px 0}
.agd-scr__hl{position:absolute;left:8px;right:8px;top:6px;height:52px;border-radius:9px;background:rgba(198,219,255,.32);box-shadow:inset 0 0 0 1.5px #c6dbff;pointer-events:none}
.agd-scr.is-seen .agd-scr__hl{animation:agd-scan 9s cubic-bezier(.65,0,.35,1) 1.2s infinite backwards}
@keyframes agd-scan{0%,18%{transform:translateY(0)}25%,43%{transform:translateY(100%)}50%,68%{transform:translateY(200%)}75%,93%{transform:translateY(300%)}100%{transform:translateY(0)}}
.agd-scr__row{position:relative;display:grid;grid-template-columns:minmax(96px,120px) minmax(0,1fr) auto 118px;align-items:center;gap:12px;height:52px;box-sizing:border-box;padding:0;border-bottom:1px solid rgba(0,0,0,.1);font:400 14px/1.2 "Neue Montreal",system-ui,sans-serif;color:#333;transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 120ms + .2s)}
.agd-scr__row b{font:500 13px/1 ui-monospace,"SF Mono",Menlo,monospace;color:#000}
.agd-scr__row--ask{background:linear-gradient(90deg,transparent,#fffae4 12%,#fffae4 88%,transparent)}
.agd-scr__amt{font-variant-numeric:tabular-nums;color:#000}
.agd-scr__st{justify-self:end;padding:5px 9px;border:1.2px solid #000;border-radius:999px;background:var(--green-bg);font:500 12px/1 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f;white-space:nowrap}
.agd-scr__st--ask{background:var(--yellow);color:#6b5a00}
.ag-js .agd-scr:not(.is-seen) .agd-scr__row{opacity:.3}
.agd-scr__ask{margin:18px;padding:16px 18px;border:1.5px solid #000;border-radius:12px;background:#fffae4;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 14px;align-items:center;transition:opacity .5s var(--ease) .9s,transform .6s cubic-bezier(.16,1,.3,1) .9s}
.ag-js .agd-scr:not(.is-seen) .agd-scr__ask{opacity:0;transform:translateY(8px)}
.agd-scr__who{display:flex;align-items:center;gap:8px;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.agd-scr__ask p{grid-column:1 / -1;margin:0;font:500 16px/1.35 "Neue Montreal",system-ui,sans-serif;text-wrap:pretty}
.agd-scr__ask small{display:block;margin-top:4px;font:400 13px/1.3 "Neue Montreal",system-ui,sans-serif;color:#6b5a00}
.agd-scr__btns{grid-column:1 / -1;display:flex;gap:8px}
.agd-scr__btn{padding:8px 14px;border:1.5px solid #000;border-radius:8px;background:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.agd-scr__btn--go{background:#000;color:#fff}

/* the three marks (the homepage stack band's star, branch and person) */
:is(.agd-mark,.agd-key__m,.agd-scr__m,.agd-wf__m,.agd-wf__lm){display:grid;place-items:center;flex:none;border:1.5px solid #000;border-radius:50%;background:#fff}
:is(.agd-mark,.agd-key__m,.agd-scr__m,.agd-wf__m,.agd-wf__lm) svg{fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agd-mark{width:40px;height:40px}
.agd-mark svg{width:20px;height:20px}
.agd-key__m,.agd-scr__m{width:24px;height:24px}
.agd-wf__m{width:max(24px,2.6cqw);height:max(24px,2.6cqw)}
.agd-wf__m svg{width:52%;height:52%}
.agd-wf__lm{width:max(18px,1.9cqw);height:max(18px,1.9cqw)}
.agd-wf__lm svg{width:55%!important;height:55%!important}
.agd-key__m svg,.agd-scr__m svg,.agd-wf__lm svg{width:13px;height:13px}
.agd-mark--ai,.agd-key__m--ai,.agd-wf__m--ai,.agd-wf__lm--ai{background:var(--blue-light)}
.agd-mark--you,.agd-key__m--you,.agd-scr__m--you,.agd-wf__m--you,.agd-wf__lm--you{background:var(--yellow)}
.agd-mark--rule,.agd-key__m--rule,.agd-wf__m--rule{background:#fff}

/* ---------- how it works: the workflow, two lanes and six cards, two riders taking turns ----------
   Geometry is WF in gen_agent_page.py (viewBox 1080 by 450); the stage keeps that aspect and sizes its
   type in cqw, so it scales like a drawing. One 16s clock: rider A is a clean item (0 to 45%), rider B an
   exception (50 to 98%) that drops to the person, is approved and comes back up. The offset-distance
   stops are the cards' positions along each route (WF_A, WF_B); every card's glow is timed to them. */
.agd-wf{margin:64px auto 0;max-width:1080px}
.agd-wf__stage{position:relative;aspect-ratio:1080/450;container-type:inline-size}
.agd-wf__lane{position:absolute;box-sizing:border-box;border:1.5px solid #000;border-radius:1.8cqw}
.agd-wf__lane--ai{background:#eef4ff}
.agd-wf__lane--you{background:#fffae4}
.agd-wf__lane > span{position:absolute;left:1.6cqw;top:1.3cqw;display:flex;align-items:center;gap:.7cqw;font:500 max(9.5px,.95cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#333}
.agd-wf__lane--you > span{color:#6b5a00}
.agd-wf__svg,.agd-wf__ride{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.agd-wf__ride{z-index:3;pointer-events:none}
.agd-wf__wire{stroke:#000;stroke-width:1.5}
.agd-wf__wire--ex{stroke-dasharray:5 4}
.agd-wf__head{stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.agd-wf__n{position:absolute;z-index:1;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;gap:.5cqw;padding:1.1cqw 1.4cqw;background:#fff;border:1.5px solid #000;border-radius:1.3cqw;font:400 max(11px,1.08cqw)/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-wf__n b{font:500 max(12px,1.3cqw)/1.25 "Neue Montreal",system-ui,sans-serif;color:#000}
.agd-wf__k{font:500 max(9px,.88cqw)/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#656567}
.agd-wf__n--in{background:var(--cream);border-style:dashed}
.agd-wf__n--s1,.agd-wf__n--s2{flex-direction:row;align-items:center;gap:1cqw}
.agd-wf__n--s1 > span,.agd-wf__n--s2 > span{font:500 max(11.5px,1.18cqw)/1.25 "Neue Montreal",system-ui,sans-serif;color:#000}
.agd-wf__n--rule{justify-content:flex-start;padding-top:1.3cqw}
.agd-wf__rh{display:flex;align-items:center;gap:1cqw}
.agd-wf__rh b{font-size:max(11.5px,1.18cqw)}
.agd-wf__chips{list-style:none;margin:1cqw 0 0;padding:0;display:flex;flex-direction:column;gap:.45cqw}
.agd-wf__chip{display:grid}
.agd-wf__c{grid-area:1 / 1;display:flex;align-items:center;gap:.6cqw;padding:.3cqw .5cqw;border-radius:.7cqw;font:400 max(10.5px,1.02cqw)/1.2 "Neue Montreal",system-ui,sans-serif;color:#222;white-space:nowrap;overflow:hidden}
.agd-wf__c--flag{background:#ffeba1;box-shadow:inset 0 0 0 1px #000;font-weight:500;color:#000}
.agd-wf__c--flag em{display:none;margin-left:auto;padding-left:.6cqw;font-style:normal;font-weight:500;color:#6b5a00}
.agd-wf__chip--off .agd-wf__c--ok{opacity:0}
.agd-wf__tick,.agd-wf__flag,.agd-wf__done{position:relative;flex:none;box-sizing:border-box;border:1.2px solid #000;border-radius:50%}
.agd-wf__tick,.agd-wf__flag{width:max(13px,1.35cqw);height:max(13px,1.35cqw)}
.agd-wf__tick{background:#caf0be}
.agd-wf__tick::after,.agd-wf__done::after{content:"";position:absolute;left:50%;top:46%;width:38%;height:20%;border-left:1.3px solid #000;border-bottom:1.3px solid #000;transform:translate(-50%,-50%) rotate(-45deg)}
.agd-wf__flag{background:#fff}
.agd-wf__flag::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font:600 max(9px,.9cqw)/1 "Neue Montreal",system-ui,sans-serif}
.agd-wf__n--you{background:#ffeba1;justify-content:flex-start;gap:.5cqw;padding-bottom:1.2cqw}
.agd-wf__who{display:flex;align-items:center;gap:.8cqw}
.agd-wf__n--you p{margin:0;font-size:max(11px,1.08cqw);color:#222;text-wrap:pretty}
.agd-wf__ok{align-self:flex-start;margin-top:auto;padding:.4cqw .9cqw;border:1.2px solid #000;border-radius:.6cqw;background:#fff;font:500 max(10.5px,1cqw)/1 "Neue Montreal",system-ui,sans-serif;color:#000}
.agd-wf__n--done{background:#caf0be;flex-direction:row;align-items:center;gap:1cqw}
.agd-wf__done{width:max(22px,2.4cqw);height:max(22px,2.4cqw);background:#fff}
.agd-wf__done::after{border-width:1.6px}
.agd-wf__n--done b{font-size:max(11.5px,1.18cqw)}
.agd-wf__tok{fill:#2866ce;stroke:#fff;stroke-width:3;opacity:0;offset-rotate:0deg}
.agd-wf__halo{fill:#2866ce;fill-opacity:.16;opacity:0;offset-rotate:0deg}
.agd-wf__tok--a,.agd-wf__halo--a{offset-path:path("M125 150H962")}
.agd-wf__tok--b,.agd-wf__halo--b{offset-path:path("M125 150H730V360H962V150")}
.agd-wf.is-seen :is(.agd-wf__tok--a,.agd-wf__halo--a){animation:agd-wf-a 16s cubic-bezier(.45,0,.25,1) infinite}
.agd-wf.is-seen :is(.agd-wf__tok--b,.agd-wf__halo--b){animation:agd-wf-b 16s cubic-bezier(.45,0,.25,1) infinite}
.agd-wf.is-seen .agd-wf__n--s1{animation:agd-wf-s1 16s linear infinite}
.agd-wf.is-seen .agd-wf__n--s2{animation:agd-wf-s2 16s linear infinite}
.agd-wf.is-seen .agd-wf__n--rule{animation:agd-wf-rule 16s linear infinite}
.agd-wf.is-seen .agd-wf__n--you{animation:agd-wf-you 16s linear infinite}
.agd-wf.is-seen .agd-wf__n--done{animation:agd-wf-done 16s linear infinite}
.agd-wf.is-seen .agd-wf__chip--off .agd-wf__c--ok{animation:agd-wf-okl 16s linear infinite}
.agd-wf.is-seen .agd-wf__chip--off .agd-wf__c--flag{animation:agd-wf-flg 16s linear infinite}
.agd-wf.is-seen .agd-wf__ok{animation:agd-wf-approve 16s linear infinite}
@keyframes agd-wf-a{0%{offset-distance:0%;opacity:0}3%{offset-distance:0%;opacity:1}8%,11%{offset-distance:25.33%;opacity:1}16%,19%{offset-distance:47.31%;opacity:1}24%,30%{offset-distance:72.28%;opacity:1}36%,42%{offset-distance:100%;opacity:1}45%,100%{offset-distance:100%;opacity:0}}
@keyframes agd-wf-b{0%,50%{offset-distance:0%;opacity:0}53%{offset-distance:0%;opacity:1}57%,59%{offset-distance:16.87%;opacity:1}63%,65%{offset-distance:31.5%;opacity:1}69%,74%{offset-distance:48.13%;opacity:1}78%,87%{offset-distance:64.84%;opacity:1}91%{offset-distance:83.29%;opacity:1}94%,96%{offset-distance:100%;opacity:1}99%,100%{offset-distance:100%;opacity:0}}
@keyframes agd-wf-s1{0%,7%,12%,56%,60%,100%{box-shadow:0 0 0 0 rgba(57,122,231,0)}8%,11%,57%,59%{box-shadow:0 0 0 .55cqw rgba(57,122,231,.25)}}
@keyframes agd-wf-s2{0%,15%,20%,62%,66%,100%{box-shadow:0 0 0 0 rgba(57,122,231,0)}16%,19%,63%,65%{box-shadow:0 0 0 .55cqw rgba(57,122,231,.25)}}
@keyframes agd-wf-rule{0%,23%,31%,68%,75%,100%{box-shadow:0 0 0 0 rgba(57,122,231,0)}24%,30%,69%,74%{box-shadow:0 0 0 .55cqw rgba(57,122,231,.25)}}
@keyframes agd-wf-you{0%,77%,88%,100%{box-shadow:0 0 0 0 rgba(107,90,0,0)}78%,87%{box-shadow:0 0 0 .6cqw rgba(224,190,60,.45)}}
@keyframes agd-wf-done{0%,35%,43%,93%,97%,100%{box-shadow:0 0 0 0 rgba(58,122,44,0)}36%,42%,94%,96%{box-shadow:0 0 0 .6cqw rgba(58,122,44,.25)}}
@keyframes agd-wf-okl{0%,68%,97%,100%{opacity:1}70%,95%{opacity:0}}
@keyframes agd-wf-flg{0%,68%,97%,100%{opacity:0}70%,95%{opacity:1}}
@keyframes agd-wf-approve{0%,82%,89%,100%{background:#fff;color:#000}83%,88%{background:#000;color:#fff}}

/* ---------- what's fitted: the agent as one locked bar, five generic slots plugged in beneath ---------- */
.agd-kit{margin:64px auto 0;max-width:1120px}
.agd-core{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px 40px;padding:24px 30px;background:#ebe2ff;border:1.5px solid #000;border-radius:18px;box-shadow:6px 6px 0 #000}
.agd-core__nm{display:flex;align-items:center;gap:14px}
.agd-core__nm h3{margin:0 0 6px;font:500 24px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.agd-core__k{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#333}
.agd-core__kic,.agd-core__ic{display:grid;place-items:center}
.agd-core__kic svg{width:12px;height:12px}
.agd-core__kic svg,.agd-core__ic svg,.agd-slot__ic svg{fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agd-core__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.agd-core__list li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;background:#fff;border:1.2px solid #000;border-radius:999px;font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif}
.agd-core__ic{flex:none;width:22px;height:22px;border-radius:50%;background:#ebe2ff}
.agd-core__ic svg{width:12px;height:12px}
.agd-kit__slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,auto);gap:0 16px}
/* each slot plugs up into the agent: a short solid lead and a socket dot */
.agd-slot{position:relative;margin-top:44px;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;align-items:start;padding:22px 20px 20px;background:#fff;border:1.5px solid #000;border-radius:14px;transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 90ms + .3s)}
.agd-slot::before{content:"";position:absolute;left:50%;top:-44px;height:44px;border-left:1.5px solid #000;transform-origin:top center;transition:transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 90ms + .2s)}
.agd-slot::after{content:"";position:absolute;left:calc(50% - 4px);top:-48px;width:9px;height:9px;border-radius:50%;background:#000}
.ag-js .agd-kit:not(.is-seen) .agd-slot{opacity:.35}
.ag-js .agd-kit:not(.is-seen) .agd-slot::before{transform:scaleY(0)}
.agd-slot__ic{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid #000;border-radius:11px;background:var(--yellow)}
.agd-slot__ic svg{width:19px;height:19px}
.agd-slot h3{margin:16px 0 0;font:500 18px/1.25 "Neue Montreal",system-ui,sans-serif}
.agd-slot > p{margin:6px 0 16px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-slot > p.agd-slot__eg{margin:0;padding-top:14px;border-top:1px dashed rgba(0,0,0,.22);font-size:13.5px;color:#222}
.agd-slot__eg span{display:block;margin-bottom:5px;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6b5a00}
.agd-plug__note{max-width:780px;margin:40px auto 0;text-align:center;font:400 15px/1.55 "Neue Montreal",system-ui,sans-serif;color:#656567;text-wrap:pretty}

/* ---------- how we get there: one bar to Live, four stages, one line for after ---------- */
.agd-plan{position:relative;margin:72px auto 0;max-width:1080px;padding-right:64px}
.agd-plan__bar{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 6px}
.agd-plan__stop{display:flex;flex-direction:column;transition:opacity .5s var(--ease);transition-delay:calc(var(--i) * 140ms + .3s)}
.ag-js .agd-plan:not(.is-seen) .agd-plan__stop{opacity:.35}
.agd-plan__when{font:500 12px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase}
.agd-plan__seg{display:block;height:16px;margin:14px 0 22px;border:1.5px solid #000;background:#ebe2ff;transform-origin:left center;transition:transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i) * 140ms + .3s)}
.agd-plan__stop:first-child .agd-plan__seg{border-radius:999px 0 0 999px;background:#fff;border-style:dashed}
.agd-plan__stop:nth-child(3) .agd-plan__seg{background:#ddd4ff}
.agd-plan__stop:last-child .agd-plan__seg{border-radius:0 999px 999px 0;background:#6b52c9}
.ag-js .agd-plan:not(.is-seen) .agd-plan__seg{transform:scaleX(0)}
.agd-plan__live{position:absolute;right:0;top:20px;padding:6px 11px;border:1.2px solid #000;border-radius:999px;background:var(--green-bg);font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#2f5a1f;transition:opacity .4s var(--ease) 1.1s}
.ag-js .agd-plan:not(.is-seen) .agd-plan__live{opacity:0}
.agd-plan__we{margin:0;padding-right:18px;font:500 18px/1.3 "Neue Montreal",system-ui,sans-serif;text-wrap:balance}
.agd-plan__you{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding-right:18px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-plan__you i{flex:none;display:grid;place-items:center;margin-top:2px}
.agd-plan__you svg{width:14px;height:14px;fill:none;stroke:#6b5a00;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.agd-plan__you b{font-weight:500;color:#6b5a00}
.agd-plan__then{max-width:720px;margin:48px auto 0;text-align:center;font:400 16px/1.55 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-plan__then b{font-weight:500;color:#000}

/* ---------- what you get ---------- */
.agd-get{list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.agd-get li{display:flex;align-items:flex-start;gap:16px;padding:24px;background:#fff;border:1.5px solid #000;border-radius:14px;transition:opacity .5s var(--ease),transform .6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 60ms)}
.ag-js .agd-get:not(.is-seen) li{opacity:.35;transform:translateY(10px)}
.agd-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #000;border-radius:12px;background:#ebe2ff}
.agd-ic svg{width:22px;height:22px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agd-get b{display:block;font:500 18px/1.25 "Neue Montreal",system-ui,sans-serif}
.agd-get span{display:block;margin-top:6px;font:400 15px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-num{margin:24px auto 0;max-width:760px;display:flex;align-items:baseline;gap:16px;padding:18px 24px;border:1.5px solid #000;border-radius:14px;background:#ebe2ff}
.agd-num__k{flex:none;font:500 11px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.agd-num p{margin:0;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif}

/* ---------- after it's live ---------- */
.agd-after{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.agd-after li{padding:26px 28px;background:#fff;border:1.5px solid #000;border-radius:14px}
.agd-after .agd-ic{margin-bottom:16px}
.agd-after h3{margin:0;font:500 19px/1.25 "Neue Montreal",system-ui,sans-serif}
.agd-after p{margin:10px 0 0;font:400 15px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-proof{margin:32px 0 0;text-align:center;font:500 16px/1.4 "Neue Montreal",system-ui,sans-serif}
.agd-proof a{color:var(--blue-deep);text-decoration:none}
.agd-proof a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- closing band ---------- */
.agd-cta{padding:0 0 136px}
/* on the team, industry and catalog pages the band follows the cream FAQ, so it needs its own top room */
body[data-v] .agd-cta{padding-top:96px}
@media (max-width:900px){ body[data-v] .agd-cta{padding-top:64px} }
.agd-cta__inner{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:stretch}
.agd-cta__copy{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:40px 44px;background:#e3edff;border:1.5px solid #000;border-radius:20px;box-shadow:6px 6px 0 #000}
.agd-cta h2{margin:0;font:500 32px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em;text-wrap:balance}
.agd-cta p{margin:0 0 8px;max-width:540px;font:400 17px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-cta__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:auto}
.agd-cta__back{font:500 15px/1 "Neue Montreal",system-ui,sans-serif;color:#000;text-decoration:underline;text-underline-offset:4px}
.agd-cta__svc{display:flex;flex-direction:column;gap:10px;padding:34px 34px 30px;background:#fff;border:1.5px solid #000;border-radius:20px;color:#000;text-decoration:none;transition:border-color .25s var(--ease),box-shadow .3s var(--ease)}
.agd-cta__svc:hover{box-shadow:inset 0 0 0 1.5px #6b52c9;border-color:#6b52c9}
.agd-cta__k{font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:#6b52c9}
.agd-cta__svc b{font:500 22px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}
.agd-cta__facts{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.agd-cta__facts li{display:flex;align-items:baseline;gap:10px;padding-left:12px;border-left:3px solid #ddd4ff;font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-cta__facts b{font:500 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:#000;white-space:nowrap}
.agd-cta__go{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:6px;font:500 15px/1 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep)}
.agd-cta__go span{transition:transform .3s var(--ease)}
.agd-cta__svc:hover .agd-cta__go span{transform:translateX(4px)}
@media (max-width:900px){.agd-cta__inner{grid-template-columns:1fr}.agd-cta__copy{padding:30px 24px}.agd-cta__svc{padding:26px 24px}.agd-cta h2{font-size:26px}}

/* the service bar on every sub-page: slides up once the hero has gone, steps aside for the closing band */
.agd-bar{position:fixed;left:50%;bottom:20px;z-index:40;transform:translate(-50%,calc(100% + 40px));transition:transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
.agd-bar.is-on{transform:translate(-50%,0);pointer-events:auto}
.agd-bar__in{display:flex;align-items:center;gap:18px;padding:8px 8px 8px 12px;background:#fff;border:1.5px solid #000;border-radius:999px;box-shadow:4px 4px 0 #000;white-space:nowrap}
.agd-bar__svc{display:flex;align-items:center;gap:10px;color:#000;text-decoration:none}
.agd-bar__mk{display:grid;place-items:center;width:30px;height:30px;box-sizing:border-box;border:1.3px solid #000;border-radius:50%;background:#c6dbff;font:600 10px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.agd-bar__svc span{display:flex;flex-direction:column;gap:3px}
.agd-bar__svc b{font:500 14px/1 "Neue Montreal",system-ui,sans-serif}
.agd-bar__svc em{font:400 12.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;color:var(--muted)}
.agd-bar__how{padding-left:18px;border-left:1px solid var(--line);font:500 14px/1 "Neue Montreal",system-ui,sans-serif;color:#000;text-decoration:underline;text-underline-offset:4px}
.agd-bar__btn{padding:11px 18px;font-size:14.5px;border-radius:999px}
@media (max-width:700px){.agd-bar{bottom:12px;width:calc(100% - 24px)}.agd-bar__in{justify-content:space-between}.agd-bar__svc span{display:none}.agd-bar__how{padding-left:0;border-left:0}}
@media (prefers-reduced-motion:reduce){.agd-bar{transition:none}}

/* ---------- widths ---------- */
@media (max-width:1180px){
  .agd-wf{max-width:560px}
  .agd-wf__stage{aspect-ratio:auto;container-type:normal;display:flex;flex-direction:column;gap:22px}
  .agd-wf__lane,.agd-wf__svg,.agd-wf__ride{display:none}
  .agd-wf__n{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;padding:16px 18px;gap:6px;border-radius:14px;font-size:14px}
  .agd-wf__n b,.agd-wf__n--s1 > span,.agd-wf__n--s2 > span,.agd-wf__rh b,.agd-wf__n--done b{font-size:16px}
  .agd-wf__n + .agd-wf__n::before{content:"";position:absolute;left:32px;top:-23px;height:22px;border-left:1.5px solid #000}
  .agd-wf__n--you{margin-left:32px}
  .agd-wf__n--you::before{border-left-style:dashed!important}
  .agd-wf__n--s1,.agd-wf__n--s2,.agd-wf__n--done{justify-content:flex-start}
  .agd-wf__chips{margin-top:10px;gap:6px}
  .agd-wf__c{font-size:13.5px;padding:5px 8px;border-radius:8px;gap:8px;white-space:normal}
  .agd-wf__c--flag em{display:inline}
  .agd-wf__k{font-size:10.5px}
  .agd-wf__n--you p{font-size:14px}
  .agd-wf__ok{padding:6px 12px;border-radius:8px;font-size:13px;margin-top:6px}
  :is(.agd-wf__m){width:30px;height:30px}
}

@media (max-width:1180px){
  .agd-core{grid-template-columns:minmax(0,1fr)}
  .agd-core__list{justify-content:flex-start}
  .agd-kit__slots{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(8,auto)}
  .agd-slot::before,.agd-slot::after{display:none}
  .agd-slot{margin-top:16px}
}
@media (max-width:980px){
  .agd-hero{padding-bottom:96px}
  .agd-hero__inner{grid-template-columns:minmax(0,1fr);gap:48px}
  .agd-hero__title{font-size:52px}
  .agd-kit__slots{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(12,auto)}
  .agd-get,.agd-after{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agd-cta__inner{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .agd-hero__title{font-size:44px}
  .agd-scr__row{grid-template-columns:96px minmax(0,1fr) auto;row-gap:8px;height:auto;padding:12px 0}
  .agd-scr__row b{font-size:12px}
  .agd-scr__hl{display:none}
  .agd-scr__amt{display:none}
  .agd-plan{padding-right:0}
  .agd-plan__bar{grid-template-columns:minmax(0,1fr);gap:26px}
  .agd-plan__stop{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:16px}
  .agd-plan__seg{grid-row:1 / span 3;height:auto;margin:0;border-radius:999px!important}
  .agd-plan__we{margin-top:8px}
  .agd-plan__live{position:static;display:inline-block;margin:24px 0 0 32px}
  .agd-get,.agd-after{grid-template-columns:minmax(0,1fr)}
  .agd-kit__slots{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .agd-slot{grid-row:auto;grid-template-rows:none}
  .agd-num{flex-direction:column;gap:10px}
  .agd-cta{padding-bottom:96px}
  .agd-cta__inner{padding:28px 24px}
}
@media (prefers-reduced-motion:reduce){
  .agd-wf.is-seen :is(.agd-wf__tok,.agd-wf__halo,.agd-wf__n,.agd-wf__c,.agd-wf__ok){animation:none}
  .agd-scr.is-seen .agd-scr__hl{animation:none}
  .agd-scr__row,.agd-scr__ask,.agd-get li,.agd-slot,.agd-slot::before,.agd-plan__stop,.agd-plan__seg,.agd-plan__live{transition:none}
}

.agd-yours{max-width:720px;margin:20px auto 0;text-align:center;font:400 15px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-wrap:balance}

/* ---------- How it works as a lane map (2026-09-26, after the AI Agent Playbook) ----------
   One agent's job from what starts it to the finished result, in three lanes: automation (cream), the
   agent (pale blue band, white cells with a blue outline) and your team (yellow cells). Colour means
   one thing each, as on /ai-agent-playbook, and there is no salmon here. Without JS and below 1024px
   it is a stacked list with every sentence in it; components/agent-map.js adds .is-grid at 1024 and
   up, draws the one job line through the cells in order, runs a dot along it and fills the panel. */
.agd-flow{--agd-blue:#397ae7;--agd-agent:#f4f8ff;--agd-person:#fffae4;--agd-yellow:#ffeba1;--agd-yink:#6b5a00;--agd-ease:cubic-bezier(.16,1,.3,1);margin:72px 0 0}
.agd-flow__frame{background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:10px 10px 0 -2px rgba(0,0,0,.06);overflow:hidden}
.agd-flow__bar{display:flex;align-items:center;gap:12px;padding:16px 22px;border-bottom:1.5px solid #000}
.agd-flow__bar b{font:500 18px/1.2 "Neue Montreal",system-ui,sans-serif}
.agd-flow__tag{margin-left:auto;padding:6px 11px;border:1px solid rgba(0,0,0,.22);border-radius:999px;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567;white-space:nowrap}

/* the lane marks: star = the agent, branch = automation, person = your team */
.agd-map__bm,.agd-map__cm,.agd-more__m,.agd-sum__m{flex:none;display:grid;place-items:center;width:26px;height:26px;border:1.5px solid #000;border-radius:8px;background:#fff}
.agd-map__bm svg,.agd-map__cm svg,.agd-more__m svg,.agd-sum__m svg{width:15px;height:15px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.agd-map__bm--ai,.agd-map__cm--ai,.agd-more__m--ai,.agd-sum__m--ai{background:var(--blue-light)}
.agd-map__bm--you,.agd-map__cm--you,.agd-more__m--you,.agd-sum__m--you{background:var(--agd-yellow)}
.agd-map__bm--rule,.agd-map__cm--rule,.agd-more__m--rule,.agd-sum__m--rule{background:var(--cream)}
.agd-map__bm--time{background:#f0faec}

/* stacked (no JS, phones, tablets): a rail down the left, the start, each step with its cells and its
   detail, then the result */
.agd-map{position:relative;display:flex;flex-direction:column;gap:14px;padding:26px 22px}
.agd-map::before{content:"";position:absolute;left:39px;top:40px;bottom:40px;border-left:1.5px solid rgba(0,0,0,.3)}
.agd-map__band,.agd-map__line,.agd-map__short,.agd-map__time,.agd-map__head .agd-map__oic{display:none}
.agd-map__end{position:relative;display:flex;flex-direction:column;gap:4px;padding:14px 16px 14px 56px;border:1.5px solid #000;border-radius:14px;background:#fff}
.agd-map__end--in{border-style:dashed}
.agd-map__end--out{background:#caf0be}
.agd-map__eic{position:absolute;left:14px;top:14px;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid #000;border-radius:9px;background:#fff}
.agd-map__eic svg{width:16px;height:16px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.agd-map__eic--done::after{content:"";width:10px;height:6px;margin-top:-3px;border-left:1.8px solid #000;border-bottom:1.8px solid #000;transform:rotate(-45deg)}
.agd-map__ek{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567}
.agd-map__end b{font:500 17px/1.25 "Neue Montreal",system-ui,sans-serif;text-wrap:balance}
.agd-map__ed{text-wrap:pretty}
.agd-map__ed{font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-map__stage{position:relative;display:flex;flex-direction:column;gap:10px;padding-left:44px}
.agd-map__head{display:flex;align-items:baseline;gap:10px;margin:8px 0 0;padding:0;background:none;border:0;font:inherit;color:#000;text-align:left;cursor:default}
.agd-map__head::before{content:"";position:absolute;left:12px;top:14px;width:9px;height:9px;border:1.5px solid #000;border-radius:50%;background:#fff}
.agd-map__n{font:500 12px/1 ui-monospace,"SF Mono",Menlo,monospace;color:#656567}
.agd-map__nm{font:500 18px/1.25 "Neue Montreal",system-ui,sans-serif}
.agd-map__cell{position:relative;display:none}
.agd-more{display:flex;flex-direction:column;gap:14px}
.agd-more__step{display:none}
.agd-more__acts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.agd-more__act{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;padding:12px 14px;border:1.5px solid #000;border-radius:12px;background:#fff}
.agd-more__act--agent{border-color:var(--agd-blue)}
.agd-more__act--person{background:var(--agd-yellow)}
.agd-more__k{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:3px 0 4px;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567}
.agd-more__act--person .agd-more__k{color:var(--agd-yink)}
.agd-more__t{margin:0;font:400 15px/1.45 "Neue Montreal",system-ui,sans-serif;color:#000;text-wrap:pretty}
.agd-more__why{margin:6px 0 0;font:400 13.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#555;text-wrap:pretty}
.agd-more__act--person .agd-more__why{color:#4d4300}
.agd-map__if{display:inline-block;padding:3px 7px;border:1px solid rgba(107,90,0,.5);border-radius:6px;background:#fff;font:600 9.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--agd-yink)}
.agd-more__sys{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.agd-more__sys>div{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.agd-more__sk{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567;margin-right:2px}
.agd-more__sys ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.agd-more__sys li{padding:5px 9px;border:1px solid rgba(0,0,0,.28);border-radius:999px;background:#fff;font:400 13px/1 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-more__h{margin:0;padding:5px 10px;border:1px solid rgba(47,90,31,.35);border-radius:999px;background:#f0faec;font:400 13px/1 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.agd-more__h b{font-weight:500}
.agd-more__diff{margin:0;padding:12px 14px;border:1px dashed rgba(0,0,0,.3);border-radius:12px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-more__dk{display:block;margin-bottom:5px;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567}

/* the panel under the map: the whole workflow, or the chosen step, beside what it could be worth */
.agd-panel{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;margin-top:24px;align-items:stretch}
.agd-panel__view{min-width:0;padding:26px 28px;background:#fff;border:1.5px solid #000;border-radius:18px}
.agd-sum{display:flex;flex-direction:column;gap:14px}
.agd-sum__k,.agd-roi__k{margin:0;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567}
.agd-sum__pitch{margin:0;max-width:640px;font:500 22px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:pretty}
.agd-sum__counts{list-style:none;margin:6px 0 0;padding:16px 0 0;border-top:1px dashed rgba(0,0,0,.2);display:flex;flex-wrap:wrap;gap:12px 28px}
.agd-sum__counts li{display:flex;align-items:center;gap:10px;font:400 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-sum__counts b{font:500 18px/1 "Neue Montreal",system-ui,sans-serif;color:#000}
.agd-sum__hint{display:none;margin:0;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:#656567}
.agd-roi{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:26px 28px;background:#f0faec;border:1.5px solid #000;border-radius:18px}
.agd-roi__k{color:#2f5a1f;margin-bottom:6px}
.agd-roi__n{margin:0;font:400 16px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.agd-roi__n b{font:500 30px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;color:#000}
.agd-roi__how{margin:8px 0 12px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.agd-roi__cta{margin-top:auto}

/* the grid, from 1024px with JS: columns are the label strip, the start, each step and the result;
   rows are the step heads, the three lanes and the time back */
.agd-flow.is-grid .agd-map{--agd-l:120px;--agd-e:150px;--agd-lane:118px;display:grid;gap:12px 14px;padding:22px 22px 18px;
  grid-template-columns:var(--agd-l) var(--agd-e) repeat(var(--n),minmax(0,1fr)) var(--agd-e);
  grid-template-rows:minmax(76px,auto) var(--agd-lane) var(--agd-lane) calc(var(--agd-lane) + 20px) auto}
.agd-flow.is-grid .agd-map::before{display:none}
.agd-flow.is-grid .agd-map__band{display:flex;align-items:center;gap:10px;grid-column:1/-1;grid-row:var(--r);padding:0 12px;border-radius:14px}
.agd-flow.is-grid .agd-map__band span{max-width:60px;font:500 10px/1.25 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.agd-flow.is-grid .agd-map__band--auto{background:var(--cream)}
.agd-flow.is-grid .agd-map__band--agent{background:var(--agd-agent)}
.agd-flow.is-grid .agd-map__band--person{background:var(--agd-person)}
.agd-flow.is-grid .agd-map__band--time{background:none;border-top:1px dashed rgba(0,0,0,.22);border-radius:0}
.agd-flow.is-grid .agd-map__end{grid-row:2/5;z-index:2;margin:16px 0;padding:14px 12px;justify-content:center;overflow:hidden}
.agd-flow.is-grid .agd-map__end--in{grid-column:2}
.agd-flow.is-grid .agd-map__end--out{grid-column:-2}
.agd-flow.is-grid .agd-map__eic{position:static;margin-bottom:8px}
.agd-flow.is-grid .agd-map__end b{font-size:15px}
.agd-flow.is-grid .agd-map__ed{font-size:12.5px;line-height:1.4}
.agd-flow.is-grid .agd-map__stage{display:contents}
.agd-flow.is-grid .agd-map__head{grid-column:var(--c);grid-row:1;display:grid;grid-template-columns:26px 1fr;align-content:start;column-gap:8px;row-gap:6px;margin:0;padding:8px;border:1.5px solid transparent;border-radius:12px;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.agd-flow.is-grid .agd-map__head::before{display:none}
.agd-flow.is-grid .agd-map__head .agd-map__oic{display:grid;place-items:center;width:26px;height:26px;border:1.5px solid #000;border-radius:8px;background:var(--fn,#fff)}
.agd-map__oic svg{width:15px;height:15px;fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.agd-flow.is-grid .agd-map__n{align-self:center}
.agd-flow.is-grid .agd-map__nm{grid-column:1/-1;font-size:14px;line-height:1.2}
.agd-flow.is-grid .agd-map__head:hover{border-color:rgba(0,0,0,.22)}
.agd-flow.is-grid .agd-map__head[aria-pressed="true"]{background:#fff;border-color:#000}
.agd-flow.is-grid .agd-map__cell{grid-column:var(--c);grid-row:var(--r);z-index:2;display:flex;flex-direction:column;justify-content:center;gap:6px;margin:10px 0;padding:10px 12px;border:1.5px solid #000;border-radius:12px;background:#fff;cursor:pointer;overflow:hidden;font:400 13.5px/1.36 "Neue Montreal",system-ui,sans-serif;overflow-wrap:break-word;transition:opacity .3s var(--ease),box-shadow .3s var(--ease)}
.agd-flow.is-grid .agd-map__cell--agent{border-color:var(--agd-blue)}
.agd-flow.is-grid .agd-map__cell--person{background:var(--agd-yellow)}
.agd-flow.is-grid .agd-map__cell .agd-map__cm{display:none}
.agd-flow.is-grid .agd-map__cell .agd-map__if{position:absolute;top:6px;left:8px;font-size:8.5px;padding:2px 5px}
.agd-flow.is-grid .agd-map__cell:has(.agd-map__if){padding-top:22px}
.agd-flow.is-grid .agd-map__short{display:block}
.agd-flow.is-grid .agd-map__full{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.agd-flow.is-grid .agd-map .agd-more{display:none}
.agd-flow.is-grid .agd-map__time{grid-column:var(--c);grid-row:5;display:flex;align-items:baseline;justify-content:center;gap:2px;margin:8px 0 0;padding:9px 6px;border:1px solid rgba(47,90,31,.35);border-radius:10px;background:#f0faec;font:500 12px/1 ui-monospace,"SF Mono",Menlo,monospace;color:#2f5a1f;white-space:nowrap}
.agd-flow.is-grid .agd-map__time b{font-weight:600;color:#000}
.agd-flow.is-grid .agd-map__time--tot{grid-column:-2;gap:6px;border-color:#000;background:#fff}
.agd-flow.is-grid .agd-map__time--tot span{color:#656567;font-weight:500;letter-spacing:.06em;text-transform:uppercase;font-size:10px}
.agd-flow.is-grid .agd-map__line{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.agd-map__path{fill:none;stroke:#000;stroke-width:1.5;stroke-opacity:.55;stroke-linecap:round;stroke-linejoin:round}
.agd-map__dot{fill:var(--agd-blue);stroke:#000;stroke-width:1.2;offset-rotate:0deg;offset-distance:100%}
.agd-map__halo{fill:var(--agd-blue);fill-opacity:.16;offset-rotate:0deg;offset-distance:100%}
/* a chosen step: its column stays bright, the rest step back */
/* Picking a step fades the other cells. The fill stays opaque (mixed toward its lane's band), because a
   translucent cell lets the job line, which runs beneath the cells, show through it. */
.agd-flow.is-grid .agd-map__cell{transition:background-color .3s var(--agd-ease),border-color .3s var(--agd-ease),box-shadow .3s var(--agd-ease)}
.agd-flow.is-grid .agd-map__cell > *{transition:opacity .3s var(--agd-ease)}
.agd-flow.is-grid .agd-map.is-pick .agd-map__cell:not(.is-on) > *{opacity:.38}
.agd-flow.is-grid .agd-map.is-pick .agd-map__cell--auto:not(.is-on){background:color-mix(in srgb,#fff 38%,var(--cream));border-color:color-mix(in srgb,#000 38%,var(--cream))}
.agd-flow.is-grid .agd-map.is-pick .agd-map__cell--agent:not(.is-on){background:color-mix(in srgb,#fff 38%,var(--agd-agent));border-color:color-mix(in srgb,var(--agd-blue) 38%,var(--agd-agent))}
.agd-flow.is-grid .agd-map.is-pick .agd-map__cell--person:not(.is-on){background:color-mix(in srgb,var(--agd-yellow) 38%,var(--agd-person));border-color:color-mix(in srgb,#000 38%,var(--agd-person))}
.agd-flow.is-grid .agd-sum__hint{display:block}
.agd-flow.is-grid .agd-more__step{display:flex;align-items:baseline;gap:12px;margin:0}
.agd-more__step span{font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:#656567}
.agd-more__step b{font:500 22px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.agd-panel__view .agd-more{display:flex}
.agd-panel__view .agd-more__acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.agd-panel__nav{display:flex;align-items:center;gap:8px;margin-top:4px}
.agd-panel__btn{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer}
.agd-panel__btn:hover{background:var(--cream)}
.agd-panel__btn[disabled]{opacity:.35;cursor:default}
.agd-panel__btn--all{margin-left:auto;border-color:transparent;text-decoration:underline;text-underline-offset:3px}
.agd-panel__btn--all:hover{background:none}
@media (min-width:1024px) and (max-width:1239px){
  .agd-flow.is-grid .agd-map{--agd-l:40px;--agd-e:124px;--agd-lane:132px;gap:12px 10px}
  .agd-flow.is-grid .agd-map__band span{display:none}
  .agd-flow.is-grid .agd-map__band{padding:0 7px}
  .agd-flow.is-grid .agd-map__cell{font-size:13px;padding:10px}
  .agd-flow.is-grid .agd-map__nm{font-size:13px;hyphens:auto;-webkit-hyphens:auto}
  .agd-flow.is-grid .agd-map__head{padding:8px 6px}
  .agd-panel{grid-template-columns:minmax(0,1fr) 320px}
}
@media (max-width:900px){
  .agd-panel{grid-template-columns:1fr}
  .agd-flow__bar{padding:14px 16px}
  .agd-map{padding:22px 14px}
  .agd-map::before{left:31px}
  .agd-map__stage{padding-left:36px}
  .agd-map__head::before{left:4px}
  .agd-panel__view,.agd-roi{padding:22px 20px}
  .agd-sum__pitch{font-size:19px}
}
@media (max-width:520px){ .agd-flow__tag{display:none} }
/* phones keep the steps and what each lane does; the reasons and systems are for the wider panel */
@media (max-width:1023px){ .agd-map .agd-more__why,.agd-map .agd-more__sys>div{display:none} .agd-map .agd-more__sys{margin-top:-4px} }
.agd-panel__view > [hidden]{display:none !important}
/* automation cells keep the plain ink outline on white, like the playbook's */
.agd-flow.is-grid .agd-map__cell--auto,.agd-more__act--auto{border-color:#000;background:#fff}
/* no automatic hyphenation in the cells (it split short words like de-cides at 1440; go-live QA 2026-09-27):
   the 1024-1239 band keeps it on step names only, and a word too long for its cell breaks rather than
   overflows. The summary spreads to the locked panel height so its hint sits at the foot, level with the
   button beside it */
.agd-flow.is-grid .agd-map__cell{overflow-wrap:break-word}
.agd-flow.is-grid .agd-panel__view{display:flex;flex-direction:column}
.agd-flow.is-grid .agd-sum{flex:1}
.agd-flow.is-grid .agd-sum__hint{margin-top:auto;padding-top:8px}
/* Hero review screen between 981 and 1180px: the hero is still two columns but the screen is only about
   410px wide, so four fixed columns crushed the name into the amount. Drop the amount there and let the
   name truncate (only in this band; elsewhere names wrap); the ask card below still carries the figure that matters. */
@media (min-width:981px) and (max-width:1180px){
  .agd-scr__row > span:not([class]){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .agd-scr__row{grid-template-columns:84px minmax(0,1fr) auto;gap:10px}
  .agd-scr__row .agd-scr__amt{display:none}
  .agd-scr__rows{padding:6px 14px 0}
}