/* =========================================================
   AI Agents — rebuilt on pages/products/products.css.

   WHAT THIS REPLACED. The previous page carried its own 873-line
   stylesheet with a full copy of the product vocabulary, and a hero
   built around public/assets/img/ai-agents/agent-at-work.webp — a
   composite with a cartoon robot and chat bubbles rendered into the
   pixels. This brief rules out both ("no robot illustrations", "show
   the UI instead of a screenshot"), so the conversation is now real
   markup and the photography is real photography. The old page is one
   `git checkout` away if any of it is wanted back.

   THE VISUAL LANGUAGE is the mobile conversation, and .pr-fone in
   products.css already is one. What is here is what goes inside it —
   bubbles, a typing indicator, choice chips, a result — plus the
   agent tiles, the routing fan and the configuration panel.

   AI CLAIMS. Every capability on this page is "configured": the agent
   does the job it was given, with the knowledge it was given, and
   escalates by a path somebody set. Nothing here diagnoses anybody.
   ========================================================= */

/* This headline is the longest on the site. Its halves measure 688 and
   727 against a 505px column, so two lines is not available at any size
   worth having — 48u would be needed. Three lines at 62u on a wider
   column gives 463 / 518 / 378 against 546, which the brief allows
   ("maximum 2-3 lines") and which keeps the type where it belongs. */
.ag .pr-hero__cols { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); }
.ag .pr-h1 { font-size: calc(62 * var(--u)); line-height: calc(74 * var(--u)); }

/* =========================================================
   THE CONVERSATION — inside .pr-fone
   ========================================================= */
.ag-chat { display: grid; gap: calc(11 * var(--u)); }
/* block + fit-content, never an inline span: an inline background paints
   one box per line, so a wrapped message comes out as offset rectangles
   spilling out of the phone (§14.1) */
.ag-bub { display: block; width: fit-content; max-width: 88%; padding: calc(11 * var(--u)) calc(14 * var(--u)); border-radius: var(--r); font-size: calc(14.5 * var(--u)); line-height: calc(21 * var(--u)); }
.ag-bub.me { margin-left: auto; border-bottom-right-radius: calc(4 * var(--u)); background: var(--grey); }
.ag-bub.ai { margin-right: auto; border: 1px solid var(--lime-ico); border-bottom-left-radius: calc(4 * var(--u)); background: var(--lime-soft); }
.ag-bub .pr-k { display: flex; margin-bottom: calc(6 * var(--u)); }
.ag-bub.ai .pr-k { color: var(--lime-ink); }

.ag-type { display: inline-flex; justify-self: start; gap: calc(5 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; }
.ag-type > i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--divider); }

.ag-picks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(7 * var(--u)); }
.ag-pick { display: grid; justify-items: center; gap: calc(3 * var(--u)); padding: calc(10 * var(--u)) calc(5 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); background: #fff; font-size: calc(13 * var(--u)); font-weight: 600; text-align: center; white-space: nowrap; }
.ag-pick em { font-style: normal; font-size: calc(10.5 * var(--u)); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
/* the chosen slot carries a tick, so the choice is not only green */
.ag-pick.on { border-color: var(--lime-ico); background: var(--lime); }
.ag-pick.on em { color: var(--lime-ink); }
.ag-pick .i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); stroke-width: 2.4; color: var(--lime-ink); }

.ag-done { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(12 * var(--u)) calc(15 * var(--u)); border-radius: var(--r); background: var(--lime); font-size: calc(14.5 * var(--u)); font-weight: 700; }
.ag-bar { display: flex; align-items: center; gap: calc(9 * var(--u)); margin-top: calc(4 * var(--u)); padding: calc(11 * var(--u)) calc(14 * var(--u)); border: 1px solid var(--rule); border-radius: 999px; font-size: calc(13 * var(--u)); color: var(--faint); }
.ag-bar .i { margin-left: auto; color: var(--lime-ink); }

/* =========================================================
   02 THE CORE IDEA — one agent, four verbs
   ========================================================= */
.ag-hub { display: grid; justify-items: center; }
.ag-hub__cap { font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ag-card { display: grid; justify-items: center; gap: calc(5 * var(--u)); padding: calc(22 * var(--u)) calc(38 * var(--u)); border: 1px solid var(--lime-ico); border-radius: var(--r-card); background: var(--lime-soft); text-align: center; }
.ag-card b { font-family: var(--font-head); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: -.03em; color: var(--lime-ink); }
.ag-card span { font-size: calc(14 * var(--u)); color: var(--lime-ink); }

.ag-wire { display: grid; justify-items: center; height: calc(30 * var(--u)); }
.ag-wire > i { display: block; width: 2px; height: 100%; background: var(--divider); }
.ag-wire > i::after { content: ""; display: block; width: 2px; height: 0; background: var(--lime-ico); transition: height .8s var(--ease) var(--wd, 0ms); }
.is-in .ag-wire > i::after { height: 100%; }

.ag-fork { position: relative; width: 100%; height: calc(44 * var(--u)); }
.ag-fork > i { position: absolute; background: var(--divider); }
.ag-fork > i:nth-child(1) { top: 0; left: calc(50% - 1px); width: 2px; height: calc(20 * var(--u)); }
.ag-fork > i:nth-child(2) { top: calc(20 * var(--u)); left: 25%; right: 25%; height: 2px; }
.ag-fork > i:nth-child(3) { top: calc(20 * var(--u)); left: calc(25% - 1px); width: 2px; bottom: 0; }
.ag-fork > i:nth-child(4) { top: calc(20 * var(--u)); right: calc(25% - 1px); width: 2px; bottom: 0; }
.is-in .ag-fork > i { background: var(--lime-ico); transition: background .5s var(--ease) var(--wd, 0ms); }
.is-in .ag-fork > i:nth-child(3), .is-in .ag-fork > i:nth-child(4) { transition-delay: calc(var(--wd, 0ms) + 300ms); }

.ag-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; gap: calc(16 * var(--u)); width: 100%; }
.ag-verb { display: grid; justify-items: center; gap: calc(5 * var(--u)); padding: calc(16 * var(--u)) calc(22 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; text-align: center; }
.ag-verb b { font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.018em; }
.ag-verb span { max-width: calc(260 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }

/* =========================================================
   03 THE AGENTS — compact workers, staggered
   ========================================================= */
.ag-crew { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(18 * var(--u)); }
.ag-crew > li:nth-child(3n+2) { margin-top: calc(26 * var(--u)); }
.ag-crew > li:nth-child(3n) { margin-top: calc(52 * var(--u)); }
.ag-who { display: grid; align-content: start; gap: calc(11 * var(--u)); height: 100%; padding: calc(20 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; box-shadow: 0 1px 2px rgba(17, 19, 24, .04); transition: border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.ag-who:hover { border-color: var(--lime-ico); box-shadow: 0 2px 4px rgba(17, 19, 24, .07), 0 calc(12 * var(--u)) calc(24 * var(--u)) calc(-18 * var(--u)) rgba(17, 19, 24, .2); transform: translateY(calc(-3 * var(--u))); }
.ag-who__t { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.ag-who__t .i { color: var(--lime-ink); }
.ag-who__t > b { font-size: calc(16.5 * var(--u)); font-weight: 600; letter-spacing: -.018em; }
.ag-who__jobs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.ag-who__jobs > li { padding: calc(5 * var(--u)) calc(11 * var(--u)); border-radius: 999px; background: var(--grey); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--text); }
.ag-who__foot { display: flex; align-items: center; gap: calc(8 * var(--u)); padding-top: calc(11 * var(--u)); border-top: 1px solid var(--rule); font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }
.ag-who__foot i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--lime-ico); }
.ag-who__eg { font-size: calc(13 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); font-style: italic; }

/* =========================================================
   04 ROUTING — one conversation, three destinations
   ========================================================= */
.ag-route { display: grid; justify-items: center; padding: calc(32 * var(--u)) calc(26 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fafaf8; }
.ag-route__said { width: 100%; max-width: calc(440 * var(--u)); padding: calc(14 * var(--u)) calc(17 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; font-size: calc(16 * var(--u)); line-height: calc(24 * var(--u)); }
.ag-route__said .pr-k { display: flex; margin-bottom: calc(7 * var(--u)); }

/* a three-way fan, with only the taken leg lit */
.ag-fan3 { position: relative; width: 100%; height: calc(46 * var(--u)); }
.ag-fan3 > i { position: absolute; background: var(--divider); }
.ag-fan3 > i:nth-child(1) { top: 0; left: calc(50% - 1px); width: 2px; height: calc(22 * var(--u)); }
.ag-fan3 > i:nth-child(2) { top: calc(22 * var(--u)); left: calc(100% / 6); right: calc(100% / 6); height: 2px; }
.ag-fan3 > i:nth-child(3) { top: calc(22 * var(--u)); left: calc(100% / 6 - 1px); width: 2px; bottom: 0; }
.ag-fan3 > i:nth-child(4) { top: calc(22 * var(--u)); left: calc(50% - 1px); width: 2px; bottom: 0; }
.ag-fan3 > i:nth-child(5) { top: calc(22 * var(--u)); right: calc(100% / 6 - 1px); width: 2px; bottom: 0; }
.is-in .ag-fan3 > i:nth-child(1), .is-in .ag-fan3 > i:nth-child(2) { background: var(--lime-ico); transition: background .5s var(--ease) .3s; }
/* only the leg the request actually took turns green (§brief: keep
   inactive branches muted) */
.is-in .ag-fan3 > i:nth-child(4) { background: var(--lime-ico); transition: background .5s var(--ease) .7s; }

.ag-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); width: 100%; }
.ag-dest { display: grid; align-content: start; gap: calc(7 * var(--u)); padding: calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; opacity: .55; }
.ag-dest b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.ag-dest span { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
.ag-dest.took { opacity: 1; border-color: var(--lime-ico); background: var(--lime-soft); }
.ag-dest.took b { color: var(--lime-ink); }

/* =========================================================
   05 INTERNAL STAFF
   ========================================================= */
.ag-inside { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(52 * var(--u)); align-items: center; }
.ag-inside figure { border-radius: var(--r-card); overflow: hidden; }
.ag-inside img { width: 100%; height: auto; }
.ag-inside figcaption { margin-top: calc(14 * var(--u)); font-size: calc(13.5 * var(--u)); color: var(--muted); }

/* =========================================================
   06 WHERE AI SITS / WHAT AN AGENT DOES
   ========================================================= */
.ag-bridge { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
.ag-stack { display: grid; justify-items: center; width: calc(300 * var(--u)); }
.ag-box { display: grid; justify-items: center; gap: calc(3 * var(--u)); width: 100%; padding: calc(16 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; text-align: center; }
.ag-box b { font-size: calc(16 * var(--u)); font-weight: 600; letter-spacing: -.018em; }
.ag-box span { font-size: calc(13 * var(--u)); color: var(--muted); }
.ag-box.on { border-color: var(--lime-ico); background: var(--lime-soft); }
.ag-box.on b { color: var(--lime-ink); }

.ag-model { position: relative; display: grid; padding-left: calc(34 * var(--u)); }
.ag-model::before { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(10 * var(--u)); bottom: calc(30 * var(--u)); width: 2px; background: var(--divider); }
.ag-model::after { content: ""; position: absolute; left: calc(7 * var(--u)); top: calc(10 * var(--u)); height: 0; width: 2px; background: var(--lime-ico); transition: height 1.7s var(--ease); }
.ag-model.is-in::after { height: calc(100% - 40 * var(--u)); }
.ag-model > li { position: relative; padding-bottom: calc(20 * var(--u)); opacity: .45; transition: opacity .5s var(--ease); }
.ag-model.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.ag-model > li:last-child { padding-bottom: 0; }
.ag-model > li::before { content: ""; position: absolute; left: calc(-34 * var(--u)); top: calc(4 * var(--u)); width: calc(16 * var(--u)); height: calc(16 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.ag-model.is-in > li::before { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.ag-model em { font-style: normal; font-size: calc(11.5 * var(--u)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.ag-model b { display: block; margin-top: calc(3 * var(--u)); font-family: var(--font-head); font-size: calc(20 * var(--u)); line-height: calc(26 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.ag-model p { margin-top: calc(3 * var(--u)); max-width: calc(480 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }

/* =========================================================
   07 THE THREE SCENES
   ========================================================= */
.ag-scene { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(52 * var(--u)); align-items: center; padding: calc(48 * var(--u)) 0; border-bottom: 1px solid var(--rule); }
.ag-scene:first-child { padding-top: calc(8 * var(--u)); }
.ag-scene:last-child { padding-bottom: 0; border-bottom: 0; }
.ag-scene.flip > :first-child { order: 2; }
.ag-scene__head { display: grid; gap: calc(10 * var(--u)); max-width: calc(520 * var(--u)); }
.ag-scene__head p { font-size: calc(16.5 * var(--u)); line-height: calc(25 * var(--u)); color: var(--muted); text-wrap: pretty; }

/* the structured panel a conversation fills in */
.ag-form { display: grid; gap: calc(2 * var(--u)); margin-top: calc(24 * var(--u)); max-width: calc(400 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; overflow: hidden; }
.ag-form > li { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(13 * var(--u)) calc(16 * var(--u)); border-bottom: 1px solid var(--rule); font-size: calc(14.5 * var(--u)); font-weight: 600; }
.ag-form > li:last-child { border-bottom: 0; }
.ag-form i { display: grid; place-items: center; flex: none; width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; }
.ag-form .got i { border-color: var(--lime-ico); background: var(--lime); }
.ag-form .got .i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2.6; color: var(--lime-ink); }
.ag-form .todo { color: var(--faint); }
.ag-form em { margin-left: auto; font-style: normal; font-size: calc(13 * var(--u)); font-weight: 500; color: var(--muted); }

/* =========================================================
   08 AFTER DISCHARGE
   ========================================================= */
.ag-after { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: calc(52 * var(--u)); align-items: center; }
.ag-trail { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ag-trail::before { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); right: calc(100% / 5 - 6 * var(--u)); height: 2px; background: var(--divider); }
.ag-trail::after { content: ""; position: absolute; top: calc(6 * var(--u)); left: calc(6 * var(--u)); width: 0; height: 2px; background: var(--lime-ico); transition: width 1.6s var(--ease); }
.ag-trail.is-in::after { width: calc(100% - 100% / 5); }
.ag-trail > li { display: grid; justify-items: start; gap: calc(12 * var(--u)); padding-right: calc(14 * var(--u)); opacity: .42; transition: opacity .5s var(--ease); }
.ag-trail.is-in > li { opacity: 1; transition-delay: calc(var(--i) * 190ms); }
.ag-trail > li > i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; border: 2px solid var(--divider); background: #fff; transition: border-color .5s var(--ease), background .5s var(--ease); }
.ag-trail.is-in > li > i { border-color: var(--lime-ico); background: var(--lime); transition-delay: calc(var(--i) * 190ms); }
.ag-trail b { font-size: calc(15 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.ag-trail.is-in .now > i { box-shadow: 0 0 0 calc(4 * var(--u)) var(--lime-soft); }
.ag-trail .now b { color: var(--lime-ink); }

/* =========================================================
   09 AGENT CONTROL — a real configuration screen
   ========================================================= */
.ag-ctl { display: grid; grid-template-columns: calc(190 * var(--u)) minmax(0, 1fr); }
.ag-ctl__nav { display: grid; align-content: start; gap: calc(2 * var(--u)); padding: calc(16 * var(--u)); border-right: 1px solid var(--rule); background: #fcfcfb; }
.ag-ctl__nav > li { padding: calc(10 * var(--u)) calc(13 * var(--u)); border-radius: var(--r-sm); font-size: calc(14 * var(--u)); font-weight: 600; color: var(--text); }
.ag-ctl__nav .on { background: var(--lime); }
.ag-ctl__body { min-width: 0; padding: calc(22 * var(--u)); }
.ag-ctl__head { padding-bottom: calc(16 * var(--u)); border-bottom: 1px solid var(--rule); }
.ag-ctl__head b { font-family: var(--font-head); font-size: calc(22 * var(--u)); font-weight: 500; letter-spacing: -.03em; }
.ag-ctl__head span { display: block; margin-top: calc(5 * var(--u)); font-size: calc(14.5 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.ag-set { display: grid; gap: calc(22 * var(--u)); margin-top: calc(20 * var(--u)); }
.ag-set > div > .pr-k { display: flex; margin-bottom: calc(10 * var(--u)); }
.ag-opts { display: grid; gap: calc(7 * var(--u)); }
.ag-opts > li { display: flex; align-items: center; gap: calc(11 * var(--u)); padding: calc(10 * var(--u)) calc(13 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: calc(14.5 * var(--u)); font-weight: 500; }
.ag-opts i { display: grid; place-items: center; flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); border: 2px solid var(--lime-ico); background: var(--lime); }
.ag-opts .i { width: calc(10 * var(--u)); height: calc(10 * var(--u)); stroke-width: 2.6; color: var(--lime-ink); }
.ag-opts .off i { border-color: var(--divider); background: #fff; }
.ag-opts .off { color: var(--faint); }
.ag-opts em { margin-left: auto; font-style: normal; font-size: calc(12.5 * var(--u)); font-weight: 600; color: var(--muted); }

/* =========================================================
   10 THE ECOSYSTEM
   ========================================================= */
.ag-eco { display: grid; justify-items: center; }
.ag-feeds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(14 * var(--u)); width: 100%; }
.ag-feed { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(18 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ag-feed:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.ag-feed b { font-size: calc(15.5 * var(--u)); font-weight: 600; letter-spacing: -.015em; }
.ag-feed span { font-size: calc(13.5 * var(--u)); line-height: calc(20 * var(--u)); color: var(--muted); }
.ag-feed .i { color: var(--lime-ink); }
.ag-eco__k { margin: calc(22 * var(--u)) 0 calc(10 * var(--u)); }

/* =========================================================
   11 THE HUMAN MOMENT
   ========================================================= */
.ag-human { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(56 * var(--u)); align-items: center; }
.ag-human figure { width: calc(620 * var(--u)); border-radius: var(--r-card); overflow: hidden; }
.ag-human img { width: 100%; height: auto; }

/* =========================================================
   PREV / NEXT
   ========================================================= */
.ag-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(16 * var(--u)); max-width: calc(880 * var(--u)); margin: calc(60 * var(--u)) auto 0; text-align: left; }
.ag-nav a { display: grid; align-content: start; gap: calc(6 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--rule); border-radius: var(--r-card); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); }
.ag-nav a:hover { border-color: var(--lime-ico); background: var(--lime-soft); }
.ag-nav b { font-family: var(--font-head); font-size: calc(23 * var(--u)); font-weight: 500; letter-spacing: -.028em; }
.ag-nav > a > span:last-child { font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u)); color: var(--muted); }
.ag-nav .ag-nav__next { text-align: right; justify-items: end; }
.ag-back { margin-top: calc(26 * var(--u)); }

/* =========================================================
   MOTION (§9) — the resting states the script animates from
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* the hero conversation plays itself: question, thinking, answer,
     a second question, the choices, the one that was picked, the
     result. Seven beats in about four seconds (§9.6) */
  .pr-js .ag-chat [data-s] { opacity: 0; transform: translateY(calc(7 * var(--u))); }
  .pr-js .is-in .ag-chat [data-s] { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .pr-js .is-in .ag-chat [data-s="1"] { transition-delay: .5s; }
  .pr-js .is-in .ag-chat [data-s="2"] { transition-delay: 1.2s; }
  .pr-js .is-in .ag-chat [data-s="3"] { transition-delay: 1.8s; }
  .pr-js .is-in .ag-chat [data-s="4"] { transition-delay: 2.4s; }
  .pr-js .is-in .ag-chat [data-s="5"] { transition-delay: 3s; }
  .pr-js .is-in .ag-chat [data-s="6"] { transition-delay: 3.6s; }
  .pr-js .is-in .ag-chat .ag-type { animation: agGone .3s linear 1.2s both; }
  @keyframes agGone { to { opacity: 0; visibility: hidden; } }

  /* the destination the request was routed to arrives after the fan */
  .pr-js .ag-route .ag-dest { opacity: .2; }
  .pr-js .ag-route.is-in .ag-dest { opacity: .55; transition: opacity .5s var(--ease) calc(1s + var(--i) * 120ms); }
  .pr-js .ag-route.is-in .ag-dest.took { opacity: 1; transition-delay: 1.4s; }
}

/* =========================================================
   Below 1180 --u is 1px. Stack, don't shrink (§10).
   ========================================================= */
@media (max-width: 1179px) {
  .ag .pr-hero__cols { grid-template-columns: minmax(0, 1fr); }
  .ag .pr-h1 { font-size: clamp(32px, 7.4vw, 48px); line-height: 1.08; }
  .ag-crew { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ag-crew > li:nth-child(3n+2), .ag-crew > li:nth-child(3n) { margin-top: 0; }

  .ag-route { padding: 18px 14px; }
  .ag-route__said { max-width: none; }
  .ag-three { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* a three-way fan over stacked cards is three lines to nowhere */
  .ag-fan3 { height: 26px; }
  .ag-fan3 > i:nth-child(2), .ag-fan3 > i:nth-child(3), .ag-fan3 > i:nth-child(5) { display: none; }
  .ag-fan3 > i:nth-child(1), .ag-fan3 > i:nth-child(4) { top: 0; height: 100%; }

  .ag-two { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .ag-fork { height: 26px; }
  .ag-fork > i:nth-child(2), .ag-fork > i:nth-child(3), .ag-fork > i:nth-child(4) { display: none; }
  .ag-fork > i:nth-child(1) { height: 100%; }
  .ag-card { padding: 18px 22px; }

  .ag-inside, .ag-bridge, .ag-scene, .ag-after, .ag-human { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .ag-scene.flip > :first-child { order: 0; }
  .ag-scene { padding: 32px 0; }
  .ag-stack { width: 100%; }
  .ag-human figure { width: 100%; }
  .ag-form { max-width: none; }

  .ag-trail { grid-auto-flow: row; grid-auto-columns: auto; padding-left: 26px; }
  .ag-trail::before, .ag-trail::after { display: none; }
  .ag-trail > li { position: relative; padding: 0 0 16px; }
  .ag-trail > li:last-child { padding-bottom: 0; }
  .ag-trail > li > i { position: absolute; left: -26px; top: 3px; }

  .ag-ctl { grid-template-columns: minmax(0, 1fr); }
  .ag-ctl__nav { grid-auto-flow: column; grid-auto-columns: max-content; gap: 6px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
  .ag-ctl__nav::-webkit-scrollbar { display: none; }
  .ag-ctl__body { padding: 18px; }

  .ag-feeds { grid-template-columns: minmax(0, 1fr); }
  .ag-nav { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .ag-nav a { padding: 20px; }
  .ag-nav .ag-nav__next { text-align: left; justify-items: start; }
  .ag-nav b { font-size: 20px; }
}