/* Switchboard Agents: the service lander at /agents.
   Native-size responsive page (no scaled #stage), same card language as Jumpstart and the
   explainers: 1.5px black outline, #fdfcf8 card fill, flat offset shadow, pastels from site.css.
   Function colours are the Solutions menu's own (styles/nav.css [data-sol]) so an agent wears
   the colour of the function lander it links to.

   Motion: three loops, each carrying one idea.
     1. the hero conveyor (pure CSS, one 12s clock: jobs pass through the agent, one detours to a person),
     2. the catalog run feed (components/agents.js: one agent's run plays in, touring until someone picks one),
     3. the model slot (pure CSS, 10s: the same agent on five models in turn).
   Everything else runs once on reveal and rests finished. The CSS loops rest on a composed frame
   under reduced motion (each element's base style IS that frame); JS states are gated behind
   body.ag-js. Nothing rests at opacity 0. */

.ag-page{--ag-card:#fdfcf8;--ag-shadow:12px 12px 0 -2px rgba(0,0,0,.06);--ag-tint:#eef3fd;
  --fn-ops:#c6dbff;--fn-support:#fcccbf;--fn-finance:#caf0be;--fn-sales:#ffeba1;--fn-compliance:#ddd4ff;--fn-hr:#ffdff4}
.ag-page :focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.ag-page h1 em,.ag-page h2 em,.ag-page h3 em{font-style:normal;color:var(--blue)}
.ag-skip{position:fixed;top:-100px;left:20px;background:#fff;color:#000;padding:12px 20px;z-index:9999}
.ag-skip:focus{top:12px}
.ag-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ag-page main{display:block}

[data-fn="finance"]{--fn:var(--fn-finance)}
[data-fn="sales"]{--fn:var(--fn-sales)}
[data-fn="ops"]{--fn:var(--fn-ops)}
[data-fn="hr"]{--fn:var(--fn-hr)}
[data-fn="support"]{--fn:var(--fn-support)}
[data-fn="compliance"]{--fn:var(--fn-compliance)}

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

/* Shared small parts */
.ag-glyph{width:34px;height:34px;flex:0 0 34px;border:1.5px solid #000;border-radius:9px;background:var(--fn,#fff);display:grid;place-items:center}
.ag-glyph svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ag-person{width:30px;height:30px;flex:0 0 30px;border:1.5px solid #000;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 32 32%27%3E%3Ccircle cx=%2716%27 cy=%2712%27 r=%274.5%27 fill=%27%23000%27/%3E%3Cpath d=%27M7 26q1-8.5 9-8.5t9 8.5%27 fill=%27%23fff%27 stroke=%27%23000%27 stroke-width=%271.5%27/%3E%3C/svg%3E") center/100% 100% no-repeat}
.ag-person--salmon{background-color:var(--salmon)}
.ag-ai{width:30px;height:30px;flex:0 0 30px;border:1.5px solid #000;border-radius:50%;background:var(--blue-light);display:grid;place-items:center;font:500 11px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.02em;color:#000}
.ag-tick{width:18px;height:18px;flex:0 0 18px;border:1.5px solid #000;border-radius:50%;background:#fff;display:grid;place-items:center;transition:background .3s var(--ease)}
.ag-tick::after{content:"";width:7px;height:4px;border-left:1.5px solid #000;border-bottom:1.5px solid #000;transform:translateY(-1px) rotate(-45deg);opacity:0;transition:opacity .2s var(--ease)}
.ag-tick--on{background:var(--green-bg)}
.ag-tick--on::after{opacity:1}

/* =============================== HERO =============================== */
.ag-hero{padding:64px 0 112px}
.ag-hero__inner{display:grid;grid-template-columns:minmax(0,4.4fr) minmax(0,6.6fr);gap:48px;align-items:center}
.ag-hero__copy{display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.ag-hero__badge{background:var(--pink)}
.ag-hero__title{margin:0;font:500 64px/1.05 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.ag-hero__sub{margin:0;max-width:520px;font:400 20px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333;text-wrap:pretty}
.ag-hero__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 22px;max-width:520px}
.ag-hero__facts li{display:flex;align-items:center;gap:10px;text-align:left;font:500 15px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-hero__facts li::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:var(--blue)}
.ag-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}








/* THE CONVEYOR. One stage, one 12s clock, four jobs 3s apart (negative delays, so the belt is
   full from the first frame). Everything is placed in stage percent so the drawing holds its
   proportions at any width; type is sized off the stage with cqw and clamped.
   Geometry: cards are 24% wide and 15% tall; the belt is at top 38%; the queue slot is left 4%,
   the agent slot left 38%, the done slot left 72%; the person slot is left 38%, top 79%.
   Each job's base style is where it rests under reduced motion: one queued, one in the agent,
   the invoice approved at the person, one done. */
.ag-flow{position:relative;margin:0}
.ag-flow__stage{position:relative;aspect-ratio:16/10.5;container-type:inline-size;background:var(--ag-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ag-shadow);overflow:hidden;font-size:clamp(10.5px,2.15cqw,14px)}
.ag-flow__zone{position:absolute;top:27%;color:#333;font-size:11px}
.ag-flow__zone--in{left:4%}
.ag-flow__zone--done{left:72%}
.ag-flow__belt{position:absolute;left:4%;right:4%;top:45.5%;border-top:1.5px dashed rgba(0,0,0,.25)}
.ag-flow__ghost{position:absolute;left:4%;top:38%;width:24%;height:15%;border:1.5px dashed #b9b9b9;border-radius:10px;background:#fff}
.ag-flow__ghost--1{transform:translate(6px,7px)}
.ag-flow__ghost--2{transform:translate(12px,14px)}
.ag-flow__agent{position:absolute;left:34.5%;width:31%;top:20%;height:42%;z-index:1;background:#fff;border:1.5px solid #000;border-radius:14px;box-shadow:8px 8px 0 -2px rgba(0,0,0,.06)}
.ag-flow__head{position:absolute;left:7%;right:7%;top:6%;display:flex;align-items:center;gap:8px}
.ag-flow__head .ag-ai{width:2.3em;height:2.3em;flex-basis:2.3em;font-size:.8em}
.ag-flow__labels{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px;overflow:hidden}
.ag-flow__labels .ag-mono{font-size:10px;color:#333}
.ag-flow__slot{position:relative;display:block;height:1.3em}
.ag-flow__label{position:absolute;left:0;top:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:.95em;line-height:1.3;opacity:0}
.ag-flow__label--1{opacity:1}
.ag-flow__bars{position:absolute;left:8%;right:8%;bottom:7%;height:6px;border:1.5px solid #000;border-radius:99px;background:#fff;overflow:hidden}
.ag-flow__bar{position:absolute;inset:0;background:var(--blue);transform-origin:left center;transform:scaleX(0)}
.ag-flow__bar--1{transform:scaleX(1)}
.ag-flow__bar--x{background:var(--salmon)}
.ag-flow__person{position:absolute;left:34.5%;width:31%;top:67%;height:30%;z-index:1;background:#f3fbef;border:1.5px dashed #000;border-radius:14px}
.ag-flow__phead{position:absolute;left:7%;right:7%;top:5%;display:flex;align-items:center;gap:8px}
.ag-flow__phead .ag-person{width:1.9em;height:1.9em;flex-basis:1.9em}
.ag-flow__phead b{display:block;font-size:.9em;font-weight:500;line-height:1.2}
.ag-flow__phead span span{display:block;font-size:.78em;color:var(--muted);line-height:1.25}
.ag-flow__tray{position:absolute;left:38%;top:38%;width:24%;height:15%;z-index:2;border:1.5px dashed #b9b9b9;border-radius:10px}
.ag-flow__tray--person{top:80.5%}
.ag-flow__job{position:absolute;width:24%;height:15%;z-index:3;left:4%;top:38%}
.ag-flow__job--0{left:38%;top:80.5%}
.ag-flow__job--1{left:38%;top:38%}
.ag-flow__job--2{left:72%;top:38%}
.ag-flow__face{position:absolute;inset:0;display:flex;align-items:center;gap:.6em;padding:0 .7em;background:#fff;border:1.5px solid #000;border-radius:10px;min-width:0}
.ag-flow__face > span{min-width:0}
.ag-flow__face b{display:block;font-size:.92em;font-weight:500;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-flow__face > span > span{display:block;font-size:.78em;line-height:1.25;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-flow__face .ag-glyph{width:1.9em;height:1.9em;flex-basis:1.9em;border-radius:6px}
.ag-flow__face .ag-glyph svg{width:1em;height:1em}
.ag-flow__face--done{background:#f3fbef;opacity:0}
.ag-flow__face--done > span > span{color:#2f5a1f}
.ag-flow__face--flag{background:#fff4f1;opacity:0}
.ag-flow__face--flag > span > span{color:#7a3a14}
.ag-flow__bang{flex:none;display:grid;place-items:center;width:1.5em;height:1.5em;border:1.5px solid #000;border-radius:50%;background:var(--salmon);font:600 .8em/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.ag-flow__job--0 .ag-flow__face--done,.ag-flow__job--2 .ag-flow__face--done{opacity:1}

@keyframes ag-job{
  0%{left:4%;top:38%;opacity:0}5%{left:4%;top:38%;opacity:1}20%{left:4%;top:38%}
  26%{left:38%;top:38%}45%{left:38%;top:38%}52%{left:72%;top:38%;opacity:1}
  64%{left:72%;top:38%;opacity:1}70%{left:75%;top:38%;opacity:0}100%{left:75%;top:38%;opacity:0}}
@keyframes ag-done{0%,37%{opacity:0}41%,100%{opacity:1}}
@keyframes ag-job-x{
  0%{left:4%;top:38%;opacity:0}5%{left:4%;top:38%;opacity:1}20%{left:4%;top:38%}
  26%{left:38%;top:38%}32%{left:38%;top:38%}39%{left:38%;top:80.5%}55%{left:38%;top:80.5%}
  63%{left:72%;top:38%;opacity:1}70%{left:72%;top:38%;opacity:1}75%{left:75%;top:38%;opacity:0}100%{left:75%;top:38%;opacity:0}}
@keyframes ag-flag-x{0%,29%{opacity:0}32%,49%{opacity:1}52%,100%{opacity:0}}
@keyframes ag-done-x{0%,49%{opacity:0}52%,100%{opacity:1}}
@keyframes ag-label{0%,24%{opacity:0}27%,45%{opacity:1}48%,100%{opacity:0}}
@keyframes ag-label-x{0%,24%{opacity:0}27%,33%{opacity:1}36%,100%{opacity:0}}
@keyframes ag-bar{0%,26%{transform:scaleX(0);opacity:1}43%{transform:scaleX(1);opacity:1}47%,100%{transform:scaleX(1);opacity:0}}
@keyframes ag-bar-x{0%,26%{transform:scaleX(0);opacity:1}31%{transform:scaleX(.62);opacity:1}35%,100%{transform:scaleX(.62);opacity:0}}
@keyframes ag-person{0%,37%{background-color:#fff}41%,49%{background-color:#fff4f1}52%,58%{background-color:#f3fbef}63%,100%{background-color:#fff}}

@media (prefers-reduced-motion:no-preference){
  .ag-flow__job,.ag-flow__label,.ag-flow__bar,.ag-flow__face--done,.ag-flow__face--flag,.ag-flow__person{animation-duration:12s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.65,0,.35,1)}
  .ag-flow__job{animation-name:ag-job}
  .ag-flow__job--x{animation-name:ag-job-x}
  .ag-flow__face--done{animation-name:ag-done;animation-timing-function:ease}
  .ag-flow__job--x .ag-flow__face--done{animation-name:ag-done-x}
  .ag-flow__face--flag{animation-name:ag-flag-x;animation-timing-function:ease}
  .ag-flow__label{animation-name:ag-label;animation-timing-function:ease}
  .ag-flow__label--x{animation-name:ag-label-x}
  .ag-flow__bar{animation-name:ag-bar;animation-timing-function:linear}
  .ag-flow__bar--x{animation-name:ag-bar-x}
  .ag-flow__person{animation-name:ag-person;animation-timing-function:ease}
  .ag-flow__job--1,.ag-flow__job--1 *,.ag-flow__label--1,.ag-flow__bar--1{animation-delay:-9s}
  .ag-flow__job--2,.ag-flow__job--2 *,.ag-flow__label--2,.ag-flow__bar--2{animation-delay:-6s}
  .ag-flow__job--3,.ag-flow__job--3 *,.ag-flow__label--3,.ag-flow__bar--3{animation-delay:-3s}
}

/* ============================ THE WEEK ============================ */
.ag-week{max-width:1080px;margin:72px auto 0;padding:26px 26px 22px;background:var(--ag-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ag-shadow)}
.ag-week__top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.ag-week__top b{font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif}
.ag-week__cal{display:grid;grid-template-columns:52px repeat(5,minmax(0,1fr));grid-template-rows:28px repeat(16,26px);column-gap:8px;position:relative}
.ag-week__day{grid-column:var(--c);grid-row:1;align-self:center;text-align:left;padding-left:2px;color:#333}
.ag-week__hour{grid-column:1;grid-row:var(--r);font:400 11px/1 ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted);transform:translateY(-6px)}
.ag-week__free{grid-column:var(--c);grid-row:2 / span 16;margin:2px 0;border:1.5px dashed #b9b9b9;border-radius:9px;background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(0,0,0,.025) 9px 10px)}
.ag-week__block{grid-column:var(--c);grid-row:var(--r);position:relative;z-index:1;margin:2px 0;min-width:0}
/* Two layers in one fixed slot, crossfaded one block at a time (--i), so the agents visibly take
   the week over rather than the whole calendar swapping at once. */
.ag-week__was{position:absolute;inset:0;display:flex;align-items:flex-start;gap:7px;padding:7px 8px;background:var(--fn);border:1.5px solid #000;border-radius:9px;overflow:hidden;transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.ag-week__was svg,.ag-week__keep svg{width:14px;height:14px;flex:0 0 14px;margin-top:1px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ag-week__was > span{font:500 12.5px/1.25 "Neue Montreal",system-ui,sans-serif;color:#000;min-width:0}
.ag-week__now{position:absolute;inset:0;display:flex;flex-direction:column;gap:3px;opacity:0;transition:opacity .45s var(--ease);transition-delay:calc(var(--i,0) * 110ms + 140ms)}
.ag-week__ran{flex:none;height:21px;display:flex;align-items:center;gap:6px;padding:0 7px 0 4px;background:#fff;border:1.5px solid var(--blue);border-radius:7px;color:var(--blue-deep);font:500 11.5px/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden;transform:translateY(-5px);transition:transform .5s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 110ms + 140ms)}
.ag-week__ran i{flex:none;display:grid;place-items:center;width:14px;height:14px;border:1px solid #000;border-radius:50%;background:var(--blue-light);color:#000;font:600 7px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal}
.ag-week__ran span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ag-week__back{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(47,90,31,.35);border-radius:7px;background:#f3fbef}
.ag-week__back b{font:500 12px/1 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.ag-week__keep{flex:none;height:23px;display:flex;align-items:center;gap:5px;padding:0 7px;background:var(--fn);border:1.5px solid #000;border-radius:7px;font:500 11.5px/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden}
.ag-week__keep svg{width:12px;height:12px;flex-basis:12px;margin:0}
.ag-week__keep span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ag-week.is-agents .ag-week__was{opacity:0;transform:scale(.97)}
.ag-week.is-agents .ag-week__now{opacity:1}
.ag-week.is-agents .ag-week__ran{transform:none}
.ag-week__toggle{display:inline-flex;padding:3px;border:1.5px solid #000;border-radius:99px;background:#fff}
.ag-week__toggle[hidden]{display:none}
.ag-week__toggle button{height:30px;padding:0 14px;border:0;border-radius:99px;background:transparent;font:500 13.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease)}
.ag-week__toggle button[aria-pressed="true"]{background:#000;color:#fff}
.ag-week__toggle button[data-week="agents"][aria-pressed="true"]{background:var(--blue);color:#fff}
.ag-week__legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
.ag-week__lg{display:inline-flex;align-items:center;gap:8px;font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif;color:#333}
.ag-week__lg--agents{display:none}
.ag-week.is-agents .ag-week__lg--now{display:none}
.ag-week.is-agents .ag-week__lg--agents{display:inline-flex}
.ag-week__sw{width:22px;height:14px;border-radius:4px}
.ag-week__sw--free{border:1.5px dashed #b9b9b9;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.06) 4px 5px)}
.ag-week__sw--ran{border:1.5px solid var(--blue);background:#fff}
.ag-week__sw--back{border:1px solid rgba(47,90,31,.35);background:#f3fbef}
.ag-week__sw--keep{border:1.5px solid #000;background:linear-gradient(90deg,var(--fn-finance) 0 34%,var(--fn-hr) 34% 67%,var(--fn-support) 67%)}
.ag-js .ag-week:not(.is-seen) .ag-week__block{opacity:.35;transform:translateY(-6px)}
.ag-week__block{transition:opacity .45s var(--ease),transform .45s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.ag-week__key{display:none}

/* ============================ CATALOG ============================ */





/* The catalog. JS renders tabs, then a profile (left) and a run feed (right). The feed's events are
   all in the DOM from the start so its height never jumps; pending ones are lifted and faded and
   come in one at a time with a clear spring, and the finished run rests fully visible. */
.ag-cat__plain{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ag-cat__plain li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:#fff;border:1.5px solid #000;border-radius:12px}
.ag-cat__plain b{display:block;font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-cat__plain li span span{display:block;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

.ag-feed{min-width:0}
.ag-feed__replay{flex:none;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1.5px solid #000;border-radius:99px;background:#fff;font:500 13.5px/1 "Neue Montreal",system-ui,sans-serif;cursor:pointer;color:#000}
.ag-feed__replay:hover{background:var(--cream)}
.ag-feed__replay svg{width:13px;height:13px;fill:none;stroke:#000;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ag-ev__btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border:1.5px solid #000;border-radius:8px;background:#fff;font:500 13px/1 "Neue Montreal",system-ui,sans-serif;transition:transform .15s var(--ease),background .25s var(--ease)}
.ag-ev__btn--yes{background:var(--blue);border-color:var(--blue);color:#fff}
.ag-feed__foot{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(0,0,0,.12);font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}



/* The catalog is its own module: one framed panel with the team tabs as its header, the team's
   three agents and the selected agent's screen in the body, and the rest of that team's catalog
   in the footer. Everything outside the panel stays quiet so the panel reads as the thing to use. */
.ag-cat{max-width:1160px;margin:64px auto 0}
.ag-cat__panel{background:#fff;border:1.5px solid #000;border-radius:24px;box-shadow:16px 16px 0 -2px rgba(0,0,0,.06);overflow:hidden}
.ag-cat__top{display:flex;align-items:center;gap:18px;padding:14px 18px;border-bottom:1.5px solid #000;background:var(--ag-card)}
.ag-cat__top > .ag-mono{flex:none;color:#333}
.ag-cat__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.ag-cat__tab{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 5px;background:transparent;border:1.5px solid transparent;border-radius:99px;font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif;color:#000;cursor:pointer;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ag-cat__tab .ag-glyph{width:28px;height:28px;flex-basis:28px;border-radius:50%}
.ag-cat__tab .ag-glyph svg{width:14px;height:14px}
.ag-cat__tab:hover{border-color:rgba(0,0,0,.25)}
.ag-cat__tab[aria-pressed="true"]{background:#fff;border-color:#000}
.ag-cat__body{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:28px;padding:26px 26px 28px;align-items:start}
.ag-cat__side{display:flex;flex-direction:column;gap:6px;min-width:0}
.ag-cat__agent{display:flex;align-items:flex-start;gap:12px;width:100%;padding:12px;text-align:left;background:transparent;border:1.5px solid transparent;border-radius:14px;cursor:pointer;color:#000;font:inherit;transition:background .2s var(--ease),border-color .2s var(--ease)}
.ag-cat__agent .ag-glyph{width:36px;height:36px;flex-basis:36px;border-radius:10px}
.ag-cat__agent .ag-glyph svg{width:18px;height:18px}
.ag-cat__agent b{display:block;font:500 16px/1.25 "Neue Montreal",system-ui,sans-serif}
.ag-cat__agent span span{display:block;margin-top:3px;font:400 13.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ag-cat__agent:hover{background:var(--ag-card)}
.ag-cat__agent[aria-pressed="true"]{background:var(--ag-card);border-color:#000}
.ag-cat__fnlink{margin:10px 12px 0;font-size:14.5px}
.ag-cat__more{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:center;padding:20px 26px 22px;border-top:1.5px solid #000;background:var(--ag-card)}
.ag-cat__more-list .ag-mono{display:block;margin-bottom:10px;color:#333}
.ag-cat__more-list ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ag-cat__more-list li{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1.5px solid #000;border-radius:99px;background:#fff;font:500 13.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.ag-cat__more-list li.ag-cat__yours{border-style:dashed;background:transparent}
.ag-cat__yours svg{width:12px;height:12px;fill:none;stroke:#000;stroke-width:1.8;stroke-linecap:round}
.ag-cat__cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ag-cat__cta p{margin:0;font:400 15px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.ag-cat__plain{padding:0}
.ag-cat .ag-ui{box-shadow:none}

/* The screen an agent comes with. One window whose body is a queue, a checklist, a dashboard, a
   record or a chat, depending on the job. Every item is on screen from the start (faded), so the
   window never changes height and never sits empty; the run brightens items one at a time, the
   flagged one raises the approval card, and the log line lands last. */
.ag-ui__above{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;margin-bottom:12px}
.ag-ui__above .ag-mono{color:#333}
.ag-ui__above b{flex:1;min-width:0;font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-ui{background:#fff;border:1.5px solid #000;border-radius:16px;box-shadow:var(--ag-shadow);overflow:hidden}
.ag-ui__bar{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1.5px solid #000;background:var(--ag-card)}
.ag-ui__bar > i{width:9px;height:9px;border:1.2px solid #000;border-radius:50%;background:#fff}
.ag-ui__bar b{margin-left:8px;flex:1;min-width:0;font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ui__run{flex:none;display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border:1.5px solid var(--blue);border-radius:99px;background:#fff;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif;color:var(--blue-deep)}
.ag-ui__run .ag-ai{width:22px;height:22px;flex-basis:22px;font-size:8.5px}
.ag-ui__body{padding:14px 16px;min-height:236px}
.ag-ui--dash .ag-ui__body,.ag-ui--chat .ag-ui__body{min-height:0}
.ag-js .ag-ui .is-pending{opacity:.32}
.ag-ui [data-k],.ag-ui__log{transition:opacity .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease)}
.ag-ui .is-now{box-shadow:inset 3px 0 0 var(--blue);background:#f4f8ff}
.ag-ui .is-flag{background:#fff4f1;box-shadow:inset 3px 0 0 var(--salmon)}

.ag-ui__st{justify-self:end;display:inline-flex;align-items:center;height:24px;padding:0 9px;border:1.2px dashed #b9b9b9;border-radius:99px;background:#fff;font:500 12px/1 "Neue Montreal",system-ui,sans-serif;color:var(--muted);white-space:nowrap}
.ag-ui__st.is-done{border:1.2px solid #000;background:#f3fbef;color:#2f5a1f}
.ag-ui__st.is-ok{border:1.2px solid #000;background:var(--green-bg);color:#000}
.ag-ui__st.is-flag{border:1.2px solid #000;background:var(--salmon);color:#7a3a14}

.ag-ui__table{display:flex;flex-direction:column}
.ag-ui__tr{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr)) auto;align-items:center;gap:12px;padding:10px 10px;border-bottom:1px solid rgba(0,0,0,.1);border-radius:6px;font:400 14px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-ui__tr > span:not(.ag-ui__st){min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-ui__tr > span:first-child{font-weight:500}
.ag-ui__tr--h{padding-top:2px;font:500 11px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.ag-ui__tr--h > span:first-child{font-weight:500}
.ag-ui__tr--h > span:last-child{justify-self:end}

.ag-ui__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ag-ui__list li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 10px;border-radius:6px;font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-ui__box{width:16px;height:16px;border:1.5px solid #000;border-radius:4px;background:#fff}
.ag-ui__list li:has(.is-done) .ag-ui__box,.ag-ui__list li:has(.is-ok) .ag-ui__box{background:var(--green-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.2l2.6 2.6L12 5.4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

.ag-ui__tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ag-ui__tile{display:flex;flex-direction:column;gap:6px;padding:12px;border:1.5px solid #000;border-radius:10px;min-width:0}
.ag-ui__tile .ag-mono{color:#333}
.ag-ui__tile b{font:500 26px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ag-ui__tile small{font:400 12.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ag-ui__tile .ag-ui__st{align-self:flex-start;margin-top:auto}
.ag-ui__bars{display:flex;align-items:flex-end;gap:10px;height:64px;margin-top:14px;padding:8px 10px 0;border-bottom:1.5px solid #000}
.ag-ui__bars i{flex:1;height:var(--h);border:1.5px solid #000;border-bottom:0;border-radius:5px 5px 0 0;background:var(--fn)}

.ag-ui__rec{margin:0;display:flex;flex-direction:column}
.ag-ui__rec > div{display:grid;grid-template-columns:120px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 10px;border-bottom:1px solid rgba(0,0,0,.1);border-radius:6px}
.ag-ui__rec dt{color:#333}
.ag-ui__rec dd{margin:0;font:400 14.5px/1.35 "Neue Montreal",system-ui,sans-serif}

.ag-ui__chat{display:flex;flex-direction:column;gap:10px}
.ag-ui__msg{display:flex;gap:10px;align-items:flex-start;max-width:86%;border-radius:12px;padding:4px}
.ag-ui__msg p{margin:0;padding:9px 12px;border:1.5px solid #000;border-radius:12px 12px 12px 4px;background:var(--ag-card);font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif}
.ag-ui__msg--ai{align-self:flex-end;flex-direction:row-reverse}
.ag-ui__msg--ai p{border-radius:12px 12px 4px 12px;background:#f4f8ff}
.ag-ui__msg .ag-person,.ag-ui__msg .ag-ai{width:28px;height:28px;flex-basis:28px}
.ag-ui__msg.is-now,.ag-ui__msg.is-flag{box-shadow:none;background:transparent}
.ag-ui__msg.is-flag p{background:#fff4f1}

.ag-ui__ask{display:flex;align-items:center;gap:12px;margin:0 16px;padding:12px 14px;min-height:62px;border:1.5px dashed #b9b9b9;border-radius:12px;background:#fff;transition:background .35s var(--ease),border-color .35s var(--ease)}
.ag-ui__ask .ag-person{background-color:#fff}
.ag-ui__askt{flex:1;min-width:0}
.ag-ui__wait{display:block;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ag-ui__q,.ag-ui__done{display:none}
.ag-ui__q b{display:block;font:500 14.5px/1.35 "Neue Montreal",system-ui,sans-serif}
.ag-ui__q small{display:block;margin-top:2px;font:400 12.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#7a3a14}
.ag-ui__done{font:500 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.ag-ui__btns{display:flex;gap:8px;opacity:.35;transition:opacity .3s var(--ease)}
.ag-ui__ask.is-open{border:1.5px solid #000;background:#fff4f1}
.ag-ui__ask.is-open .ag-person{background-color:var(--salmon)}
.ag-ui__ask.is-open .ag-ui__wait,.ag-ui__ask.is-approved .ag-ui__wait{display:none}
.ag-ui__ask.is-open .ag-ui__q{display:block}
.ag-ui__ask.is-open .ag-ui__btns{opacity:1}
.ag-ui__ask.is-press .ag-ev__btn--yes{transform:scale(.92);background:var(--blue-deep)}
.ag-ui__ask.is-approved{border:1.5px solid #000;background:#f3fbef}
.ag-ui__ask.is-approved .ag-person{background-color:var(--green-bg)}
.ag-ui__ask.is-approved .ag-ui__done{display:block}
.ag-ui__ask.is-approved .ag-ui__btns{display:none}
.ag-ui__log{margin:0;padding:12px 16px 14px;font:400 12px/1.45 ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:#333}


   while the steps, rules and approvals beside it never change; the matching chip below lights
   on the same clock. Base styles are the reduced-motion frame (the first model). */
.ag-logo{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid rgba(0,0,0,.18)}
.ag-logo svg{width:14px;height:14px;display:block}



/* ============================ WHAT YOU GET ============================
   A kit of six, each a drawing first. Titles are short and each line stays under a dozen words. */
.ag-kit{list-style:none;margin:64px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ag-kit__item{position:relative;display:flex;flex-direction:column;gap:8px;padding:14px 14px 22px;background:var(--ag-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ag-shadow)}
.ag-kit__art{margin:0 0 10px;height:150px;border:1.5px solid #000;border-radius:12px;background:#fff;overflow:hidden}
.ag-kit__art svg{display:block;width:100%;height:100%}
.ag-kit__n{position:absolute;top:24px;left:26px;color:var(--blue)}
.ag-kit__item h3{margin:0 8px;font:500 20px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ag-kit__item p{margin:0 8px;font:400 15.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

/* ============================ HOW IT WORKS ============================
   One bar made of five segments, one per stop. The first is filled from the start (it is the part
   that already exists); the rest fill in order once the bar is seen, and rest filled. */
.ag-proc{list-style:none;margin:64px auto 0;padding:0;max-width:1120px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
.ag-proc__stop{display:flex;flex-direction:column;gap:18px;min-width:0}
.ag-proc__seg{display:flex;align-items:center;height:44px;padding:0 14px;border:1.5px solid #000;border-left-width:0;background:var(--blue-light);font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .5s var(--ease);transition-delay:calc(var(--i,0) * 320ms)}
.ag-proc__stop:first-child .ag-proc__seg{border-left-width:1.5px;border-radius:12px 0 0 12px;background:var(--blue);color:#fff}
.ag-proc__stop:last-child .ag-proc__seg{border-radius:0 12px 12px 0;background:var(--green-bg)}
.ag-js .ag-proc:not(.is-seen) .ag-proc__stop:not(:first-child) .ag-proc__seg{background:#fff}
.ag-proc__txt{padding-right:22px}
.ag-proc__txt .ag-mono{color:var(--blue)}
.ag-proc__txt h3{margin:6px 0 6px;font:500 18px/1.25 "Neue Montreal",system-ui,sans-serif}
.ag-proc__txt p{margin:0;font:400 15px/1.5 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

/* ============================ YOURS TO KEEP ============================ */
.ag-own{max-width:1080px;margin:64px auto 0;display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:22px;align-items:center}
.ag-own__yours{position:relative;padding:34px 22px 22px;background:var(--ag-card);border:1.5px solid #000;border-radius:20px;box-shadow:var(--ag-shadow)}
.ag-own__label{position:absolute;top:-12px;left:20px;padding:5px 10px;border:1.5px solid #000;border-radius:99px;background:#fff;color:#000}
.ag-own__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ag-own__tile{display:flex;gap:12px;align-items:flex-start;padding:16px;background:#fff;border:1.5px solid #000;border-radius:14px;min-width:0}
.ag-own__tile b{display:block;font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-own__tile span:not(.ag-ai){display:block;margin-top:3px;font:400 14px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ag-own__tile .ag-ai{width:36px;height:36px;flex-basis:36px}
.ag-own__icon{flex:none;width:36px;height:36px;border:1.5px solid #000;border-radius:10px;background:var(--cream);display:grid;place-items:center}
.ag-own__icon svg{width:18px;height:18px;fill:none;stroke:#000;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ag-own__tile--model{grid-column:1 / -1;order:3}
.ag-own__logos{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.ag-own__logos li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border:1.2px solid #000;border-radius:99px;background:#fff;font:500 13px/1.2 "Neue Montreal",system-ui,sans-serif}
.ag-own__us{display:flex;flex-direction:column;gap:8px;padding:20px;border:1.5px dashed #000;border-radius:18px;background:transparent}
.ag-own__us .ag-mono{color:#333}
.ag-own__us b{font:500 16px/1.4 "Neue Montreal",system-ui,sans-serif}
.ag-own__us span:last-child{font:400 14.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}

/* ============================ WAYS TO START ============================
   The homepage's "no wrong place to start" cards and rail (styles in site.css), sized for this
   page. site.css hides the cards until the homepage script adds .in; agents.js adds it here, and
   without JS they simply show. */
.ag-start .wwb__cards,.ag-start .wwb__rail{max-width:1080px;margin-left:auto;margin-right:auto}
.ag-start .wwb__cards{margin-top:64px}
.ag-page:not(.ag-js) .wwb__card{opacity:1;transform:none}
.ag-page:not(.ag-js) .wwb__rail-line{transform:scaleX(1)}
.ag-page:not(.ag-js) .wwb__rail-arrow,.ag-page:not(.ag-js) .wwb__rail-label{opacity:1}
.ag-page:not(.ag-js) .wwb__rail-vt{height:34px}
.ag-page:not(.ag-js) .wwb__rail .dot{transform:translate(-50%,-50%) scale(1)}

/* ============================ CARDS (oversight, asks, next) ============================ */
.ag-cards{list-style:none;margin:72px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.ag-card{display:flex;flex-direction:column;gap:12px;padding:22px 22px 24px;background:var(--ag-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ag-shadow);min-width:0}
.ag-card__art{margin:0 0 6px;height:132px;border:1.5px solid #000;border-radius:12px;background:#fff;overflow:hidden}
.ag-card__art svg{display:block;width:100%;height:100%}
.ag-card h3{margin:0;font:500 21px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.ag-card p{margin:0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.ag-owner{max-width:1080px;margin:22px auto 0;display:flex;align-items:center;gap:16px;padding:16px 22px;background:#fff;border:1.5px solid #000;border-radius:14px}
.ag-owner p{margin:0;font:400 16px/1.5 "Neue Montreal",system-ui,sans-serif;color:#333}
.ag-owner p b{font-weight:500;color:#000}
.ag-switch{flex:none;position:relative;width:46px;height:26px;border:1.5px solid #000;border-radius:99px;background:var(--green-bg)}
.ag-switch::after{content:"";position:absolute;top:3px;left:23px;width:17px;height:17px;border:1.5px solid #000;border-radius:50%;background:#fff}

/* ============================ PATH (2-4 weeks) ============================ */


/* ============================ WHY ============================ */
.ag-why__close{max-width:720px;margin:56px auto 0;text-align:center;font:500 24px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;text-wrap:balance}



/* ============================ WHO'S INVOLVED ============================ */
.ag-person--blue{background-color:var(--blue-light)}
.ag-who{max-width:1080px;margin:40px auto 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ag-who__side{padding:20px 22px;background:#fff;border:1.5px solid #000;border-radius:16px}
.ag-who__side--us{background:var(--ag-tint)}
.ag-who__side .ag-mono{color:#333}
.ag-who__side ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.ag-who__side li{display:flex;gap:12px;align-items:flex-start;font:400 15.5px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.ag-who__side li b{font-weight:500;color:#000}
.ag-who__side .ag-person{width:28px;height:28px;flex-basis:28px;margin-top:-2px}


/* ============================ PROOF ============================ */
.ag-proof{list-style:none;margin:64px auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ag-proof li{display:flex}
.ag-proof__card{flex:1;display:flex;flex-direction:column;gap:10px;padding:24px;background:#fff;border:1.5px solid #000;border-radius:16px;color:#000;text-decoration:none;transition:border-color .2s var(--ease)}
.ag-proof__card:hover{border-color:var(--blue-deep)}
.ag-proof__card > .ag-mono{color:#333}
.ag-proof__num{font:500 48px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;margin-top:6px}
.ag-proof__what{font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#333}
.ag-proof__became{display:flex;align-items:center;gap:10px;margin:8px 0 6px;padding:10px 12px;border:1.5px solid #000;border-radius:12px;background:var(--ag-card)}
.ag-proof__became .ag-glyph{width:32px;height:32px;flex-basis:32px}
.ag-proof__became > span{font:500 15px/1.3 "Neue Montreal",system-ui,sans-serif}
.ag-proof__became em{display:block;font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;font-style:normal;color:#333}
.ag-proof__card .ag-link{margin-top:auto}
.ag-page .compare{--cmp-accent:#397ae7;border-top:1.5px solid #000}

/* ============================ FAQ ============================ */
.ag-faq{max-width:840px;margin:64px auto 0;border-top:1.5px solid #000}
.ag-faq__item{border-bottom:1.5px solid #000}
.ag-faq__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;cursor:pointer;font:500 19px/1.35 "Neue Montreal",system-ui,sans-serif}
.ag-faq__item summary::-webkit-details-marker{display:none}
.ag-faq__item summary::after{content:"";flex:none;width:12px;height:12px;border-right:1.6px solid #000;border-bottom:1.6px solid #000;transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
.ag-faq__item[open] summary::after{transform:translateY(3px) rotate(-135deg)}
.ag-faq__answer{padding:0 4px 24px;max-width:720px;font:400 17px/1.55 "Neue Montreal",system-ui,sans-serif;color:#333}

/* ============================ CTA ============================ */
.ag-cta{background:var(--ag-tint);border-top:1.5px solid #000}
.ag-cta__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin-top:8px}
.ag-cta__alt{font:500 15px/1.3 "Neue Montreal",system-ui,sans-serif;color:var(--blue);text-decoration:none}
.ag-cta__alt:hover{text-decoration:underline;text-underline-offset:4px}

/* Reveal for card grids */
.ag-js [data-ag-rise] > *{transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 110ms)}
.ag-js [data-ag-rise]:not(.is-seen) > *{opacity:.35;transform:translateY(10px)}

/* ============================ RESPONSIVE ============================ */
@media (max-width:1180px){
  .ag-hero__inner{grid-template-columns:minmax(0,1fr);gap:56px}
  .ag-hero__copy{align-items:center;text-align:center}
  .ag-hero__facts{justify-items:start}
}
@media (max-width:900px){
  .ag-section{padding:80px 0}
  .ag-hero{padding:32px 0 72px}
  .ag-hero__title{font-size:48px}
  .ag-hero__sub{font-size:18px}
  .ag-week,.ag-cat,.ag-kit,.ag-proc,.ag-own,.ag-cards,.ag-proof{margin-top:48px}
  .ag-cards,.ag-proof{grid-template-columns:minmax(0,1fr)}
  .ag-who{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  .ag-week{padding:18px 14px 16px}
  .ag-week__cal{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:24px repeat(16,16px);column-gap:5px}
  .ag-week__hour{display:none}
  .ag-week__day,.ag-week__free,.ag-week__block{grid-column:var(--cm)!important}
  .ag-week__was{padding:4px;justify-content:center;align-items:center;border-radius:6px}
  .ag-week__was > span,.ag-week__ran span,.ag-week__ran i,.ag-week__back b,.ag-week__keep span,.ag-week__keep svg{display:none}
  .ag-week__was svg{margin:0}
  .ag-week__ran{height:11px;padding:0;background:var(--blue)}
  .ag-week__sw--ran{background:var(--blue)}
  .ag-week__keep{height:13px;padding:0}
  .ag-week__back,.ag-week__ran,.ag-week__keep{border-radius:4px}
  .ag-week__now{gap:2px}
  .ag-week__free{border-radius:6px}
  .ag-week__key{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;list-style:none;margin:14px 0 0;padding:0}
  .ag-week__key li{display:flex;align-items:center;gap:8px;font:400 14px/1.35 "Neue Montreal",system-ui,sans-serif}
  .ag-week__key i{width:14px;height:14px;flex:0 0 14px;border:1.5px solid #000;border-radius:4px;background:var(--fn)}
  .ag-week__top{flex-direction:column;align-items:flex-start;gap:6px}
  .ag-owner{flex-direction:column;align-items:flex-start}
  .ag-cta__actions{flex-direction:column}
  .ag-punch{font-size:20px}
}
@media (max-width:520px){
  .ag-hero__title{font-size:42px}
  .ag-hero__facts{grid-template-columns:minmax(0,1fr)}
  .ag-hero__cta{width:100%;flex-direction:column}
  .ag-hero__cta .btn{width:100%}
}

@media (max-width:1180px){
  .ag-flow{max-width:720px;margin:0 auto;width:100%}
}
@media (max-width:600px){
  .ag-flow__stage{aspect-ratio:1/1.02}
  .ag-flow__face .ag-glyph{display:none}
  .ag-flow__zone{top:26%}
  .ag-cat__plain{grid-template-columns:minmax(0,1fr)}
  .ag-feed{padding:16px 14px}
}

@media (max-width:900px){
  .ag-page .compare{padding:80px 20px}
}

@media (max-width:700px){
  .ag-ui__tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-ui__tr{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;font-size:13.5px}
  .ag-ui__tr > span:nth-child(3):not(.ag-ui__st){display:none}
  .ag-ui__tr--h > span:nth-child(3){display:none}
  .ag-ui__rec > div{grid-template-columns:minmax(0,1fr) auto}
  .ag-ui__rec dd{grid-column:1}
  .ag-ui__rec .ag-ui__st{grid-column:2;grid-row:1 / span 2}
  .ag-ui__run{display:none}
  .ag-ui__body{padding:12px;min-height:0}
  .ag-ui__ask{margin:0 12px;flex-wrap:wrap}
  .ag-ui__askt{flex:1 1 calc(100% - 44px)}
  .ag-ui__btns{width:100%;padding-left:42px}
  .ag-ui__msg{max-width:100%}
}

@media (max-width:1000px){
  .ag-cat__top{flex-direction:column;align-items:flex-start;gap:10px}
  .ag-cat__body{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
  .ag-cat__side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .ag-cat__fnlink{grid-column:1 / -1;margin:4px 12px 0}
  .ag-cat__more{grid-template-columns:minmax(0,1fr);padding:18px}
}
@media (max-width:640px){
  .ag-cat__panel{border-radius:18px}
  .ag-cat__top{padding:12px}
  .ag-cat__tabs{flex-wrap:nowrap;overflow-x:auto;width:calc(100% + 24px);margin:0 -12px;padding:0 12px 2px;scrollbar-width:none}
  .ag-cat__tabs::-webkit-scrollbar{display:none}
  .ag-cat__tab{flex:none}
  .ag-cat__side{grid-template-columns:minmax(0,1fr)}
  .ag-cat__agent span span{display:none}
  .ag-cat__agent{align-items:center;padding:9px 10px}
  .ag-cat__body{padding:12px}
  .ag-cat__more .btn{width:100%}
  .ag-ui__above{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px}
  .ag-ui__above b{grid-column:1 / -1;grid-row:2}
}

@media (max-width:1000px){
  .ag-kit{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ag-proc{grid-template-columns:minmax(0,1fr);gap:14px}
  .ag-proc__stop{flex-direction:row;gap:14px}
  .ag-proc__seg{flex:none;width:130px;height:auto;min-height:44px;padding:10px 12px;border-left-width:1.5px!important;border-radius:10px!important;white-space:normal}
  .ag-proc__txt{padding:2px 0 0}
  .ag-proc__seg{align-self:flex-start}
  .ag-who{grid-template-columns:minmax(0,1fr)}
  .ag-own{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .ag-kit{grid-template-columns:minmax(0,1fr)}
  .ag-own__grid{grid-template-columns:minmax(0,1fr)}
  .ag-proc__seg{width:104px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  .ag-page *,.ag-page *::before,.ag-page *::after{transition:none!important;animation:none!important}
}