/* AI strategy explainer: this page's figures only. The slot filled two ways, the zoom from the
   company down to one step, the board meeting six months on, the one-pager the reader fills in,
   one row taken apart, and the three rows read at four points. Shared chrome is in explainer.css,
   which loads first. Every finished state exists in HTML; motion is additive, runs once and rests
   visible. Its clock is six months and nothing else.
   The page's running object is the one-pager: an empty slot under a slide in the hero, a row being
   written in 04, row one taken apart in 05, and the three rows read four times in 07. The slide is
   its opposite and appears twice, in the hero and back on the screen six months later.
   COLOUR GRAMMAR, written down on 2026-09-22 on the model of /mcp and /buy-vs-build, so anything
   added later can be coloured by asking what it IS rather than what would look good.
   Salmon (#fbf3ee surfaces, #b4531d ink, --salmon-bg bars): the strategy that cannot be checked,
   and the time it costs. The slogan's half of the hero, the slogan's banner on the zoom, the
   question marks, the lines under the board's three measures, the wait in row one, and every
   reading that has not landed yet. Green (--green-bg, #eff8eb): landed or settled. The named half
   of the hero, the six-month number, a reading that reached its target. Yellow: a person and the
   work they own. The team, the step and the card the zoom picks, row one and its owner, the person
   asking the board's question. Cream (#f7f4e8) inside a black outline: a product somebody sold you, which
   on this page is only the licence stack. Blue-light: AI alone (.as-ai). --ex-tint: the page the
   reader owns, the one-pager, and the step on it that AI sits on. Pink: somebody else, the second
   person whose records or view the first one does not own (myth 3, the people in How to start).
   Cream in HTML and #9d9d9d in the drawings: a board seat, a person with no role on this page. Dashed edges on #f7f4e8: nothing there yet, the row with no baseline.
   One trap, the same as /buy-vs-build's: site.css defines --green-bg twice and the later value
   wins, so keep using the token and do not swap in the literal for one element.
   Do not spend a colour that is already spoken for. */

.as-page .ex-head .h-display{text-wrap:balance}
/* The line after each figure is the next beat: a dashed stem drops from the figure into it, and
   its second sentence hands over to the section that follows. Same device as /buy-vs-build. */
.as-page .ex-punch{position:relative;margin-top:0;padding-top:64px}
.as-page .ex-punch::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:44px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.as-page .ex-punch::after{content:"";position:absolute;left:50%;top:44px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#000}
/* A board seat: a person with no colour of their own yet on this page. */
.as-page .ex-avatar--grey{background-color:var(--cream)}

/* The AI mark, inline, wherever a step carries it. The shared chip is an avatar; this is the
   smaller one that sits inside a figure's own card. */
.as-ai{display:inline-grid;place-items:center;width:24px;height:24px;flex:0 0 24px;border:1.5px solid #000;border-radius:50%;background:var(--blue-light);font:500 9.5px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:.02em}
/* A question where an answer should be. */
.as-q{display:inline-grid;place-items:center;width:22px;height:22px;flex:0 0 22px;border:1.5px solid #b4531d;border-radius:50%;background:#fbf3ee;color:#b4531d;font:500 12px/1 "Neue Montreal",system-ui,sans-serif}

/* ------------------------------------------------------------------ 01 HERO
   One slot, headed "what will be different in six months", filled two ways. Not two worlds side
   by side: the same question, answered twice, which is why the slot's kicker is identical on both
   halves and the tag says what the strategy is made of rather than naming a camp. */
.as-two{width:100%;margin:40px 0 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);display:grid;grid-template-columns:1fr 1fr;text-align:left}
.as-two__half{min-width:0;position:relative;padding:54px 30px 28px;display:flex;flex-direction:column;gap:14px}
.as-two__half--slogan{background:#fbf3ee;border-radius:18px 0 0 0}
.as-two__half--named{background:#eff8eb;border-left:1.5px solid #000;border-radius:0 18px 0 0}
.as-two__tag{position:absolute;top:18px;left:30px;display:inline-block;padding:6px 11px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 11px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.as-two__half--named .as-two__tag{background:var(--green-bg)}
.as-two__half>p{margin:auto 0 0;padding-top:6px;font:400 14.5px/1.5 "Neue Montreal",system-ui,sans-serif;color:var(--muted);max-width:42ch}

/* THE TWO OBJECTS, rebuilt 2026-09-23. One object per half, so each half reads as the thing the
   strategy is made of and then the four fields: the slide carries its licences inside it, and the
   page carries its three rows. They were three layers each (object, a row of chips, the fields), and
   the row chips repeated what the fields already said. The page's folded corner is a clip on the
   sheet plus the flap drawn over the cut, with the shadow on the wrapper so the clip cannot cut it;
   the first fold was a gradient that never read as paper and let the shadow show past the corner. */
.as-deck,.as-paper{min-height:176px}
.as-deck{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:34px 18px 16px;background:#fff;border:1.5px solid #000;border-radius:12px;box-shadow:4px 4px 0 -1px rgba(0,0,0,.12)}
.as-deck__bar{position:absolute;left:0;right:0;top:0;height:20px;display:flex;align-items:center;gap:5px;padding:0 10px;border-bottom:1.5px solid #000;border-radius:10.5px 10.5px 0 0;background:var(--cream)}
.as-deck__bar i{width:6px;height:6px;border-radius:50%;background:#000}
.as-deck b{font:500 28px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.025em}
.as-deck .as-spark{position:absolute;right:12px;top:30px;width:24px;height:24px}
.as-deck__foot{display:flex;gap:6px}
.as-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1.2px solid #000;border-radius:99px;background:#f7f4e8;font:500 12px/1 "Neue Montreal",system-ui,sans-serif;color:#333;white-space:nowrap}
.as-chip--n{font-variant-numeric:tabular-nums;color:#000}
.as-paper{position:relative;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.12))}
.as-paper__sheet{height:100%;min-height:176px;padding:16px 18px 16px;background:#fff;border:1.5px solid #000;border-radius:12px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.as-paper__fold{position:absolute;right:0;top:0;width:22px;height:22px;display:block}
.as-paper__sheet b{display:block;font:500 22px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.as-paper__sheet small{display:block;margin-top:3px;font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.as-paper__rows{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.as-paper__rows li{display:flex;align-items:center;gap:9px;min-height:26px;padding:3px 9px 3px 4px;border:1.2px solid rgba(0,0,0,.2);border-radius:7px;font:500 13.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-paper__rows li.is-open{border-color:#000;background:var(--yellow)}
.as-paper__rows li>span:first-child{display:grid;place-items:center;width:18px;height:18px;flex:none;border:1px solid #000;border-radius:50%;background:#fff;font-size:10.5px}

/* THE SLOT, 2026-09-23, on /agents' agent screen: the same four fields on both halves, each row
   with a status pill at its end, so the two halves answer one question field by field. On the
   slogan's half every field is empty and says Missing, salmon, the one thing on the page that cannot
   be checked. On the named half the fields fill in turn from row one, the way /agents' run brightens
   one item at a time: each row waits at .35, lights with the blue inset bar while it is being
   written, and lands with a green Named pill. The fourth field is where AI sits, and it is the
   strip of four steps, AI on one of them. Rest state, reduced motion and no JavaScript are the
   finished fields. */
.as-slot{padding:14px 16px 16px;background:#fff;border:1.5px solid #000;border-radius:14px}
.as-slot .ex-kicker{margin-bottom:6px}
.as-fields{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.as-fields>li{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:44px;padding:7px 8px;border-bottom:1px solid rgba(0,0,0,.1);border-radius:6px}
.as-fields>li:last-child{border-bottom:0}
.as-fields__k{font:500 11px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.as-fields__v{display:flex;align-items:center;gap:8px;min-width:0;font:400 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.as-fields__v b{font:500 15px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.as-gap{display:block;width:100%;max-width:150px;height:20px;border:1.2px dashed #b9b9b9;border-radius:6px;background:repeating-linear-gradient(135deg,transparent 0 6px,rgba(0,0,0,.03) 6px 7px)}
.as-st{justify-self:end;display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1.2px solid #000;border-radius:99px;font:500 12px/1 "Neue Montreal",system-ui,sans-serif;white-space:nowrap}
.as-st--miss{background:var(--salmon);color:#7a3a14}
.as-st--ok{background:var(--green-bg);color:#000}
.as-num{display:inline-flex;align-items:center;height:26px;padding:0 10px;border:1.5px solid #000;border-radius:8px;font:500 14px/1 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.as-num--was{background:#fff}
.as-num--now{background:var(--green-bg)}
.as-arrow{position:relative;width:22px;height:1.5px;background:#000;flex:0 0 22px}
.as-arrow::after{content:"";position:absolute;right:0;top:50%;width:7px;height:7px;margin-top:-4px;border-top:1.5px solid #000;border-right:1.5px solid #000;transform:rotate(45deg)}
/* It loops, as /agents' hero does (Bruno, 2026-09-23: a hero that only plays once reads as a
   still). One 11s clock: the slogan's four Missing pills pulse in turn, then the named half fills
   field by field, holds, and empties back to .35 to start again. */
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-two .as-fields--named>li{opacity:.35}
  .ex-js .as-two .as-fields--named .as-st{opacity:.35;transform:scale(.9)}
  .as-two .as-st{transform-box:border-box;transform-origin:center}
  .as-two.is-seen .as-fields--named>li{animation:as-field 11s var(--ease) calc(.4s + var(--r) * .7s) infinite both}
  .as-two.is-seen .as-fields--named .as-st{animation:as-pill 11s var(--ease) calc(.4s + var(--r) * .7s) infinite both}
  .as-two.is-seen .as-st--miss{animation:as-miss 11s var(--ease) calc(var(--r) * .3s) infinite both}
}
@keyframes as-field{0%,6%{opacity:.35;background:transparent;box-shadow:inset 3px 0 0 transparent}10%,16%{opacity:1;background:#f4f8ff;box-shadow:inset 3px 0 0 var(--blue)}21%,91%{opacity:1;background:transparent;box-shadow:inset 3px 0 0 transparent}98%,100%{opacity:.35;background:transparent;box-shadow:inset 3px 0 0 transparent}}
@keyframes as-miss{0%,2%,10%,100%{transform:none}6%{transform:scale(1.14)}}
@keyframes as-pill-in{from{opacity:.35;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes as-pill{0%,16%{opacity:.35;transform:scale(.9)}20%,91%{opacity:1;transform:none}98%,100%{opacity:.35;transform:scale(.9)}}
.as-two>figcaption:not(.ex-sr-only){grid-column:1/-1;padding:14px 28px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 18px 18px}

/* ------------------------------------------------------------- 02 HOW IT WORKS
   A zoom, not a sequence: three frames, each one a magnified detail of the frame before it. The
   slogan is a banner on the outer frame because that is the size it was written at, and the AI
   mark only appears in the third frame because that is the only size it fits. No durations here;
   the durations are section 06's, and mixing them would make this the same figure twice. */
.as-zoom{max-width:1080px;margin:72px auto 0;padding:26px 26px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:stretch;gap:0}
.as-zoom__frame{position:relative;display:flex;flex-direction:column;justify-content:center;padding:34px 16px 16px;border:1.5px solid #000;border-radius:14px;background:#fff;min-height:186px}
/* What the frame is a close-up of, so the zoom reads as one thing magnified twice. */
.as-zoom__from{display:block;margin:0 0 4px;font:500 11px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

.as-zoom__lbl{position:absolute;top:-10px;left:14px;padding:3px 10px;border:1.5px solid #000;border-radius:999px;background:var(--cream);font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
/* Salmon, not yellow: the slogan is the one thing on the page that cannot be checked, and yellow
   is the person who owns the work, which is what the picked team, step and card below it are. */
.as-zoom__banner{margin:0 0 14px;padding:5px 0;border:1.5px dashed #b4531d;border-radius:9px;background:#fbf3ee;color:#7a3a14;text-align:center;font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-zoom__teams{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.as-zoom__teams li{padding:11px 4px;border:1.5px solid rgba(0,0,0,.25);border-radius:9px;background:#fdfcf8;text-align:center;font:400 11px/1.2 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.as-zoom__teams li.is-pick{border-color:#000;background:var(--yellow);color:#000;font-weight:500}
.as-zoom__steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.as-zoom__steps li{padding:9px 11px;border:1.5px solid rgba(0,0,0,.25);border-radius:9px;background:#fdfcf8;font:400 12.5px/1.2 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.as-zoom__steps li.is-pick{border-color:#000;background:var(--yellow);color:#000;font-weight:500}
.as-zoom__card{margin-top:8px;padding:14px 14px 12px;border:1.5px solid #000;border-radius:12px;background:var(--yellow)}
.as-zoom__card b{display:block;font:500 16px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.as-zoom__card small{display:block;margin-top:5px;font-size:12.5px;line-height:1.45;color:#333}
.as-zoom__who{display:flex;align-items:center;gap:8px;margin-top:11px;font:400 12.5px/1.2 "Neue Montreal",system-ui,sans-serif;color:#333}
.as-zoom__ai{display:flex;align-items:center;gap:9px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(0,0,0,.18);font:500 12.5px/1.25 "Neue Montreal",system-ui,sans-serif}
/* The connector between two frames: it meets both frames, and the magnifier says what it is. */
.as-zoom__lead{position:relative;align-self:stretch}
.as-zoom__lead::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.5) 0 5px,transparent 5px 11px)}
.as-zoom__lead::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;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 24 24%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27 stroke-linecap=%27round%27%3E%3Ccircle cx=%2710.5%27 cy=%2710.5%27 r=%276%27/%3E%3Cpath d=%27M15 15l5 5%27/%3E%3C/svg%3E") center/15px 15px no-repeat}
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-zoom .as-zoom__frame--work,.ex-js .as-zoom .as-zoom__frame--step{opacity:.35;transform:translateY(8px)}
  .ex-js .as-zoom .as-zoom__lead{opacity:.35}
  .ex-js .as-zoom .as-zoom__ai{opacity:.35;transform:translateY(6px)}
  .as-zoom.is-seen .as-zoom__lead{animation:ex-arrive .5s var(--ease) calc(.3s + var(--i,0) * .5s) both}
  .as-zoom.is-seen .as-zoom__frame--work{animation:ex-arrive .55s var(--ease) .5s both}
  .as-zoom.is-seen .as-zoom__frame--step{animation:ex-arrive .55s var(--ease) 1s both}
  .as-zoom.is-seen .as-zoom__ai{animation:ex-arrive .55s var(--ease) 1.5s both}
}
/* THE ZOOM, SEEN HAPPENING (exploration, 2026-09-23). After the frames arrive, the focus travels
   the zoom on a 9s loop: the picked team rings in blue, the first magnifier pulses, the picked step
   rings, the second magnifier pulses, and the step's card lifts. It is the zoom done in front of the
   reader rather than described, and it rides nothing into anything: each thing brightens in place.
   Rest state is the three finished frames. */
@media(prefers-reduced-motion:no-preference){
  .as-zoom.is-seen .as-zoom__teams li.is-pick{animation:as-z1 9s var(--ease) 2.2s infinite}
  .as-zoom.is-seen .as-zoom__steps li.is-pick{animation:as-z2 9s var(--ease) 2.2s infinite}
  .as-zoom.is-seen .as-zoom__card{animation:as-z3 9s var(--ease) 2.2s infinite}
  .as-zoom.is-seen .as-zoom__lead:nth-child(2)::after{animation:as-zl1 9s var(--ease) 2.2s infinite}
  .as-zoom.is-seen .as-zoom__lead:nth-child(4)::after{animation:as-zl2 9s var(--ease) 2.2s infinite}
}
@keyframes as-z1{0%,3%,30%,100%{box-shadow:0 0 0 0 transparent}7%,26%{box-shadow:0 0 0 3px var(--blue-light)}}
@keyframes as-z2{0%,36%,63%,100%{box-shadow:0 0 0 0 transparent}40%,59%{box-shadow:0 0 0 3px var(--blue-light)}}
@keyframes as-z3{0%,69%,97%,100%{transform:none;box-shadow:0 0 0 0 transparent}73%,93%{transform:translateY(-3px);box-shadow:5px 6px 0 -1px rgba(0,0,0,.1),0 0 0 3px var(--blue-light)}}
@keyframes as-zl1{0%,27%,37%,100%{transform:none;background-color:#fff}32%{transform:scale(1.18);background-color:var(--blue-light)}}
@keyframes as-zl2{0%,60%,70%,100%{transform:none;background-color:#fff}65%{transform:scale(1.18);background-color:var(--blue-light)}}
.as-zoom>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:26px -26px 0;padding:14px 26px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 18px 18px}

/* ----------------------------------------------------- 03 THE PROBLEM: the board meeting */
.as-room{max-width:1000px;margin:56px auto 0;padding:26px 26px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow)}
.as-room__stage{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:26px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.as-room__slide{position:relative;padding:34px 20px 24px;background:#fff;border:1.5px solid #000;border-radius:12px;box-shadow:4px 4px 0 -1px rgba(0,0,0,.14);text-align:center}
.as-room__slide>i{position:absolute;left:0;right:0;top:0;height:18px;border-bottom:1.5px solid #000;border-radius:12px 12px 0 0;background:var(--cream)}
.as-room__slide>i::before{content:"";position:absolute;left:10px;top:6px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:9px 0 0 #000,18px 0 0 #000}
.as-room__slide b{display:block;font:500 28px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.025em}
.as-room__slide small{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-room__side{display:flex;flex-direction:column;gap:14px}
.as-room__seats{list-style:none;display:flex;gap:12px;margin:0;padding:0}
/* Yellow-bg, a surface a person owns: it is somebody asking. It was green, which on this page
   means landed, and a question with no answer is the opposite of that. */
.as-room__ask{display:flex;align-items:flex-start;gap:11px;margin:0;padding:13px 16px 14px;border:1.5px solid #000;border-radius:4px 14px 14px 14px;background:var(--yellow-bg);font:500 16.5px/1.4 "Neue Montreal",system-ui,sans-serif}
.as-room__measures{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0 0;padding:0}
.as-room__measures li{padding:16px 16px 14px;border:1.5px solid #000;border-radius:12px;background:#fff}
.as-room__measures .ex-kicker{font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;color:#333}
.as-room__measures b{display:block;margin-top:8px;font:500 28px/1.05 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.as-shrug{display:block;margin-top:11px;padding-top:11px;border-top:1px dashed rgba(0,0,0,.28);font:400 13px/1.45 "Neue Montreal",system-ui,sans-serif;color:#b4531d}
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-room .as-room__ask,.ex-js .as-room .as-shrug{opacity:.35;transform:translateY(6px)}
  .as-room.is-seen .as-room__ask{animation:ex-arrive .5s var(--ease) .3s both}
  .as-room.is-seen .as-shrug{animation:ex-arrive .5s var(--ease) calc(.9s + var(--i) * .35s) both}
}
.as-room>figcaption:not(.ex-sr-only){margin:26px -26px 0;padding:14px 26px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 18px 18px}

/* The number chip the steps share (row numbers on every figure). */
.as-sheet__n{font:500 12px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted);padding:11px 16px 0 0;display:flex;align-items:flex-start}

/* ------------------------------------------- 05 INSIDE THE WORKFLOW: one request, timed twice
   Rebuilt 2026-09-23 on two /agents devices. The frame is the screen sales ops works in (a window
   bar, the row it belongs to, a Today / With row one toggle), and the before and after share it,
   the way /agents' week does, so the reader sees one request change rather than two pictures. The
   clock is /agents' shrinking bar: the with-row bar starts at the length of today's three days and
   shrinks to part of one, so the saving reads as something that happened. In the after state the
   steps light one at a time and the run stops once, at the price, for sales ops: the approval card
   opens salmon, the button presses, and it lands green. That stop is the section's climax, not a
   footnote. components/ai-strategy.js drives it: it loops Today, then With row one, while the figure
   is on screen, and the first click on the toggle hands control to the reader for good. Without
   JavaScript both states are in the markup and both show, today's text first and row one's under
   it; under reduced motion it rests on the finished after state. Nothing rests at opacity 0. */
.as-run{max-width:1080px;margin:56px auto 0;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:16px 16px 0 -2px rgba(0,0,0,.06);overflow:hidden;text-align:left}
.as-run__bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1.5px solid #000;background:var(--ex-card)}
.as-run__dots{display:flex;gap:6px}
.as-run__dots i{width:9px;height:9px;border:1.2px solid #000;border-radius:50%;background:#fff}
.as-run__bar>b{font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-run__row{display:inline-flex;align-items:center;gap:8px;margin-right:auto;padding:4px 11px 4px 5px;border:1.2px solid #000;border-radius:99px;background:var(--yellow);font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-run__row .as-sheet__n{display:grid;place-items:center;width:18px;height:18px;padding:0;border-radius:50%;background:#fff;border:1px solid #000;color:#000;font-size:10.5px}
.as-run__toggle{display:inline-flex;padding:3px;border:1.5px solid #000;border-radius:99px;background:#fff}
.as-run__toggle[hidden]{display:none}
.as-run__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)}
.as-run__toggle button[aria-pressed="true"]{background:#000;color:#fff}
.as-run__toggle button[data-run="row"][aria-pressed="true"]{background:var(--blue)}
.as-run__body{padding:22px 24px 20px}
.as-run__k{display:block;font:500 11px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.as-run__total{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.as-run__t{position:relative;display:grid;font:500 34px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.as-run__t .as-run__lay--today{color:#b4531d}
.as-run__t .as-run__lay--row{color:#2f5a1f}
/* The clock: one track three days long, with today's three steps inside it at their real share. */
.as-run__clock{margin-top:14px}
.as-run__track{height:26px;padding:3px;border:1.5px solid #000;border-radius:9px;background:#fdfcf8 repeating-linear-gradient(to right,transparent 0 calc(33.333% - 1px),rgba(0,0,0,.18) calc(33.333% - 1px) 33.333%)}
.as-run__fill{display:flex;gap:2px;height:100%;width:100%;transition:width .9s cubic-bezier(.16,1,.3,1)}
.as-run__fill i{flex:var(--w) 1 0;min-width:4px;border:1.2px solid #000;border-radius:5px;background:#fff;transition:flex-grow .9s cubic-bezier(.16,1,.3,1)}
.as-run__fill i.is-wait{background:var(--salmon)}
.as-run__fill i.is-work{background:#f7f4e8}
.as-run__fill i.is-call{background:var(--yellow)}
.as-run__scale{display:flex;justify-content:space-between;margin-top:6px;font:400 11px/1.2 ui-monospace,"SF Mono",Menlo,monospace;color:var(--muted)}
.as-run__steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0;padding:0}
.as-run__steps>li{display:flex;flex-direction:column;gap:8px;min-width:0;padding:14px 16px 16px;border:1.5px solid #000;border-radius:12px;background:#fff;transition:background .35s var(--ease),box-shadow .35s var(--ease),opacity .35s var(--ease)}
.as-run__lay{display:flex;flex-direction:column;gap:6px}
.as-run__lay b{display:flex;align-items:center;gap:8px;font:500 15.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.as-run__lay em{font:500 21px/1.1 "Neue Montreal",system-ui,sans-serif;font-style:normal;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.as-run__lay em.is-cost{color:#b4531d}
.as-run__lay em.is-good{color:#2f5a1f}
/* Without the script, row one's line sits under today's in each step, marked. */
.as-run__steps .as-run__lay--row{margin-top:4px;padding-top:10px;border-top:1px dashed rgba(0,0,0,.25)}
.as-run__steps .as-run__lay--row::before{content:"With row one";font:500 10.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:#333}
.as-run__t .as-run__lay--row::before{content:"→ ";color:#000}
.as-run__ask{display:flex;align-items:center;gap:12px;margin-top:14px;padding:12px 14px;min-height:60px;border:1.5px dashed #b9b9b9;border-radius:12px;background:#fff;transition:background .35s var(--ease),border-color .35s var(--ease)}
.as-page .ex-avatar--salmon{background-color:var(--salmon)}
.as-run__askt{flex:1;min-width:0}
.as-run__wait{display:block;font:400 14px/1.4 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.as-run__q,.as-run__done{display:none}
.as-run__q b{display:block;font:500 14.5px/1.35 "Neue Montreal",system-ui,sans-serif}
.as-run__q small{display:block;margin-top:2px;font:400 12.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#7a3a14}
.as-run__done{font:500 14px/1.3 "Neue Montreal",system-ui,sans-serif;color:#2f5a1f}
.as-run__btns{display:flex;gap:8px;opacity:.35;transition:opacity .3s var(--ease)}
.as-run__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)}
.as-run__btn--yes{background:var(--blue);border-color:var(--blue);color:#fff}
.as-run__ask.is-open{border:1.5px solid #000;background:#fff4f1}
.as-run__ask.is-open .as-run__wait,.as-run__ask.is-approved .as-run__wait{display:none}
.as-run__ask.is-open .as-run__q{display:block}
.as-run__ask.is-open .as-run__btns{opacity:1}
.as-run__ask.is-press .as-run__btn--yes{transform:scale(.92);background:var(--blue-deep)}
.as-run__ask.is-approved{border:1.5px solid #000;background:#f3fbef}
.as-run__ask.is-approved .ex-avatar{background-color:var(--green-bg)}
.as-run__ask.is-approved .as-run__done{display:block}
.as-run__ask.is-approved .as-run__btns{display:none}
.as-run>figcaption:not(.ex-sr-only){padding:14px 24px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center}

/* With the script: one state at a time, the two layers crossfading in the same place. */
.as-run.is-live .as-run__lay--row::before,.as-run.is-live .as-run__t .as-run__lay--row::before{content:none}
.as-run.is-live .as-run__steps>li,.as-run.is-live .as-run__t{display:grid}
.as-run.is-live .as-run__steps>li{grid-template-rows:auto 1fr;align-content:start}
.as-run.is-live .as-run__steps>li>.as-run__lay,.as-run.is-live .as-run__t>span{grid-area:auto;transition:opacity .45s var(--ease)}
.as-run.is-live .as-run__steps>li>.as-run__lay{grid-row:2;grid-column:1;margin:0;padding:0;border:0}
.as-run.is-live .as-run__t>span{grid-row:1;grid-column:1}
.as-run.is-live .as-run__lay--row{opacity:0}
.as-run.is-live.is-row .as-run__lay--row{opacity:1}
.as-run.is-live.is-row .as-run__lay--today{opacity:0}
.as-run.is-live.is-row .as-run__fill{width:22%}
.as-run.is-live.is-row .as-run__fill i{flex-grow:var(--w2)}
.as-run.is-live.is-row .as-run__steps>li.is-pending{opacity:.35}
.as-run.is-live .as-run__steps>li.is-now{box-shadow:inset 3px 0 0 var(--blue);background:#f4f8ff}
.as-run.is-live .as-run__steps>li.is-flag{box-shadow:inset 3px 0 0 var(--salmon);background:#fff4f1}
.as-run.is-live:not(.is-row) .as-run__ask{opacity:.35}

/* --------------------------------------------- 07 OVER TIME: the three rows, read four times
   Lower is better on every row here, so the bar shrinks as the row lands. The third row was
   never timed, so it has nothing to draw, which is the point of the figure and not an omission. */
.as-track{max-width:1080px;margin:56px auto 0;padding:22px 24px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);text-align:left}
.as-track__cols,.as-track__rows li{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:14px;align-items:center}
.as-track__cols{padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.16);font:500 11px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.as-track__rows{list-style:none;margin:0;padding:0}
.as-track__rows li{padding:18px 0;border-top:1px solid rgba(0,0,0,.12)}
.as-track__rows li:first-child{border-top:0}
.as-track__name{display:grid;grid-template-columns:auto 1fr;gap:0 10px;align-items:baseline}
.as-track__name .as-sheet__n{padding:0;grid-row:1/3}
.as-track__name b{font:500 15.5px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.as-track__name em{grid-column:2;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--muted)}
/* Each row says where it stands at six months, in the state pills the hero uses: landed, or no
   baseline, which is salmon because it is the one row nobody can check. */
.as-track__name .as-st{grid-column:2;justify-self:start;margin-top:8px;height:22px;font-size:11.5px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-track .as-track__name .as-st{opacity:.35;transform:scale(.9)}
  .as-track.is-seen .as-track__name .as-st{animation:as-pill-in .3s var(--ease) 2.5s both}
}
/* A reading is the number, then a bar under it as long as the time the step still takes. The
   number sits above the bar, never on it: set inside a filled box it straddled the fill's edge on
   half the cells ("4|days"). The bar is /buy-vs-build's request-list bar, the series' one shape for
   a length of time. Salmon while the reading is still the cost, green once it has reached the
   target, and an empty dashed bar where nobody timed anything. */
.as-m{position:relative;display:flex;flex-direction:column;gap:8px}
.as-m i{font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums}
.as-m__bar{position:relative;display:block;height:12px;border:1.5px solid #000;border-radius:999px;background:#fff;overflow:hidden}
/* A reading is the row's own yellow (row one is yellow everywhere on this page); the six-month reading
   that hits the target turns green. Salmon here read as "bad" on a number that was improving. */
.as-m__bar::before{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--v) * 1%);border-radius:999px;background:var(--yellow)}
.as-m--good .as-m__bar::before{background:var(--green-bg)}
.as-m--good i{color:#2f5a1f}
.as-m--none i{color:var(--muted);font-weight:400;font-size:13.5px}
.as-m--none .as-m__bar{border-style:dashed;border-color:#8a8a8a;background:#f7f4e8}
.as-m--none .as-m__bar::before{content:none}
/* Read in the order the readings were taken: a column at a time, all three rows at once, so the
   third row's blanks arrive on the same beat as the other two rows' numbers. It used to fill a row
   at a time, which read as three bars rather than four checkpoints. */
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-track .as-m__bar::before{width:0}
  .ex-js .as-track .as-m i{opacity:.35}
  .as-track.is-seen .as-m__bar::before{animation:as-fill .6s var(--ease) calc(.3s + var(--c) * .55s) both}
  .as-track.is-seen .as-m i{animation:ex-arrive .35s var(--ease) calc(.5s + var(--c) * .55s) both}
  .as-track__rows .as-m:nth-child(2){--c:0}.as-track__rows .as-m:nth-child(3){--c:1}.as-track__rows .as-m:nth-child(4){--c:2}.as-track__rows .as-m:nth-child(5){--c:3}
}
@keyframes as-fill{from{width:0}to{width:calc(var(--v) * 1%)}}
.as-track>figcaption:not(.ex-sr-only){margin:22px -24px 0;padding:14px 24px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;border-radius:0 0 18px 18px}

/* ------------------------------------------------------------------- 11 The closing drawing
   Multiplayer's rail-and-tiles construction with this page's subjects: the person who owns the
   row, the AI mark landing on one step, the one-pager, the number that moved, and the approval
   that stayed with a person. Copied rather than redrawn, per the standard. */
.as-cta__art .ex-cta__tile{fill:var(--ex-tint);stroke:#000;transition:fill .6s var(--ease) .5s}
.as-cta__art .ex-cta__chip,.as-cta__art .ex-cta__cursor{transform-box:fill-box;transform-origin:center;transition:transform .7s cubic-bezier(.34,1.4,.64,1) .4s,opacity .4s var(--ease) .4s}
.ex-js .as-cta__art .ex-cta__rider{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .ex-js .as-cta__art:not(.is-seen) .ex-cta__tile{fill:#fff}
  .ex-js .as-cta__art:not(.is-seen) .ex-cta__chip{transform:translateY(-30px) scale(.7);opacity:0}
  .ex-js .as-cta__art:not(.is-seen) .ex-cta__cursor{transform:translate(26px,-30px);opacity:0}
  .as-cta__art.is-seen .ex-cta__rider{animation:ex-cta-ride 7s cubic-bezier(.45,0,.55,1) 1.4s infinite}
  .as-cta__art.is-seen .ex-cta__chip{animation:ex-breathe 4.5s ease-in-out 1.4s infinite}
  .as-cta__art.is-seen .ex-cta__cursor{animation:ex-cta-nudge 7s ease-in-out 1.4s infinite}
}

/* ---------------------------------------------- 04 STEP 1: what hurts, scored (2026-09-23)
   The shallow end of the method: a list people already have in their heads, and two scores a
   leader can give without help. The rows arrive in the order they were said, the pips fill, the
   scores land, and the list sorts itself so the numbers pick the top three. Plays once, when seen.
   Every base style is the finished, sorted list, so no JS and reduced motion show the answer. */
.as-list{--rh:58px;max-width:1000px;margin:56px auto 0;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.as-list__bar{display:flex;align-items:center;gap:14px;padding:12px 24px;background:#fdfcf8;border-bottom:1.5px solid #000}
.as-list__bar>b{font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-list__key{margin-left:auto;display:grid;grid-template-columns:118px 118px 58px;column-gap:18px;font:500 10.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-list__key span:last-child{text-align:right}
.as-list__rows{list-style:none;margin:0;padding:0;position:relative}
.as-list__rows li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 118px 118px 58px;column-gap:18px;align-items:center;height:var(--rh);padding:0 24px;background:#fff;border-top:1px solid rgba(0,0,0,.1)}
.as-list__rows li:first-child{border-top:0}
.as-list__rows li.is-top{background:var(--yellow-bg)}
.as-list__rows li.is-top+li:not(.is-top){border-top:1.5px dashed #000}
.as-list__rows b{font:500 15.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.005em}
.as-list__rows em{font:500 22px/1 "Neue Montreal",system-ui,sans-serif;font-style:normal;text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}
.as-list__rows li.is-top em{color:#000}
.as-pips{display:flex;gap:6px}
.as-pips i{position:relative;width:12px;height:12px;border:1.2px solid #000;border-radius:50%;background:#fff}
.as-pips i::after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:#000;opacity:clamp(0,calc(var(--n) - var(--p) + 1),1)}
.as-pips i:nth-child(1){--p:1}.as-pips i:nth-child(2){--p:2}.as-pips i:nth-child(3){--p:3}.as-pips i:nth-child(4){--p:4}.as-pips i:nth-child(5){--p:5}
.as-list__rows li:nth-child(1){--r:0}.as-list__rows li:nth-child(2){--r:1}.as-list__rows li:nth-child(3){--r:2}.as-list__rows li:nth-child(4){--r:3}.as-list__rows li:nth-child(5){--r:4}.as-list__rows li:nth-child(6){--r:5}
.as-list__scale{display:flex;flex-wrap:wrap;gap:6px 28px;margin:0;padding:12px 24px 14px;border-top:1.5px solid #000;background:#fdfcf8;font-size:12.5px;line-height:1.45;color:var(--muted)}
.as-list__scale b{font-weight:500;color:#000;margin-right:6px}
.as-list>figcaption:not(.ex-sr-only){padding:14px 24px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;text-wrap:balance}
@media screen and (prefers-reduced-motion:no-preference) and (min-width:641px){
  .ex-js .as-list:not(.is-seen) .as-list__rows li{transform:translateY(calc(var(--d) * var(--rh)))}
  .ex-js .as-list:not(.is-seen) .as-pips i::after{transform:scale(0)}
  .ex-js .as-list:not(.is-seen) .as-list__rows em{opacity:0}
  .ex-js .as-list:not(.is-seen) .as-list__rows li.is-top{background:#fff}
  .ex-js .as-list:not(.is-seen) .as-list__rows li.is-top+li:not(.is-top){border-top-color:transparent}
  .as-list.is-seen .as-list__rows li{animation:as-sort 1.1s cubic-bezier(.65,0,.35,1) 2.6s both}
  .as-list.is-seen .as-pips i::after{animation:as-pip .35s cubic-bezier(.16,1,.3,1) calc(.3s + var(--r) * .16s + var(--p) * .06s) both}
  .as-list.is-seen .as-list__rows em{animation:as-score .45s var(--ease) calc(1.5s + var(--r) * .1s) both}
  .as-list.is-seen .as-list__rows li.is-top{animation:as-sort 1.1s cubic-bezier(.65,0,.35,1) 2.6s both,as-top .6s var(--ease) 3.8s both}
  .as-list.is-seen .as-list__rows li.is-top+li:not(.is-top){animation:as-sort 1.1s cubic-bezier(.65,0,.35,1) 2.6s both,as-cut .6s var(--ease) 3.8s both}
}
@keyframes as-sort{from{transform:translateY(calc(var(--d) * var(--rh)))}to{transform:none}}
@keyframes as-pip{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes as-score{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes as-top{from{background:#fff}to{background:var(--yellow-bg)}}
@keyframes as-cut{from{border-top-color:transparent}to{border-top-color:#000}}

/* ---------------------------------------------- 05 STEP 2: check the ground, pick the fix
   Four kinds of fix across the top, only one of them AI, and the tool greyed because none of the
   three needs it: the page's most important correction, that a strategy is not a list of AI
   projects. Then each pain's three checks and the fix they point to. Plays once, row by row. */
.as-fix{max-width:1080px;margin:56px auto 0;padding:26px 26px 0;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.as-fix__kinds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.as-fix__kind{display:flex;flex-direction:column;gap:5px;padding:14px 15px 15px;border:1.5px solid #000;border-radius:12px;background:#fdfcf8}
.as-fix__kind b{margin-top:6px;font:500 15.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-fix__kind span:last-child{font-size:13.5px;line-height:1.4;color:var(--muted)}
.as-fix__kind.is-idle{border-style:dashed;border-color:#8a8a8a;background:#fff}
.as-fix__kind.is-idle>*{opacity:.55}
.as-fix__kind.is-idle::after{content:"Not needed this time";margin-top:4px;font:500 10.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-fix__ic{display:grid;place-items:center;width:34px;height:34px;border:1.2px solid #000;border-radius:9px;background:#fff}
.as-fix__ic svg{width:20px;height:20px}
.as-fix__ic--ai{border-radius:50%;background:var(--blue-light);font:500 12px/1 "Neue Montreal",system-ui,sans-serif}
.as-fix__head,.as-fix__rows>li{display:grid;grid-template-columns:minmax(0,1.05fr) 96px 96px 96px minmax(0,1.7fr);column-gap:14px;align-items:center}
.as-fix__head{margin-top:26px;padding:0 4px 10px;border-bottom:1.5px solid #000;font:500 10.5px/1.25 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.as-fix__head span:nth-child(n+2):nth-child(-n+4){text-align:center}
.as-fix__rows{list-style:none;margin:0;padding:0}
.as-fix__rows>li{padding:14px 4px;border-bottom:1px solid rgba(0,0,0,.1)}
.as-fix__rows>li:last-child{border-bottom:0}
.as-fix__rows>li>b{display:flex;align-items:center;font:500 15.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.as-fix__rows>li>b .as-sheet__n{padding:0 10px 0 0}
.as-ok{justify-self:center;display:inline-flex;align-items:center;height:26px;padding:0 12px;border:1.2px solid #000;border-radius:999px;background:var(--green-bg);font:500 13px/1 "Neue Montreal",system-ui,sans-serif}
.as-ok--no{background:var(--salmon)}
.as-fix__pick{display:flex;align-items:flex-start;gap:11px;padding:11px 13px;border:1.5px solid #000;border-radius:12px;background:#fdfcf8;font-size:13.5px;line-height:1.4;color:#333}
.as-fix__pick b{display:block;margin-bottom:2px;font:500 15px/1.25 "Neue Montreal",system-ui,sans-serif;color:#000}
.as-fix__pick--ai{background:var(--ex-tint)}
.as-fix__pick>.as-ai{flex:0 0 auto;margin-top:1px}
.as-fix__mini{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border:1.2px solid #000;border-radius:7px;background:#fff}
.as-fix__mini svg{width:17px;height:17px}
.as-fix>figcaption:not(.ex-sr-only){margin:14px -26px 0;padding:14px 26px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;text-wrap:balance}
@media screen and (prefers-reduced-motion:no-preference){
  .ex-js .as-fix:not(.is-seen) .as-ok{opacity:.2;transform:scale(.8)}
  .ex-js .as-fix:not(.is-seen) .as-fix__pick{opacity:.2;transform:translateX(-10px)}
  .as-fix.is-seen .as-ok{animation:as-check .45s cubic-bezier(.16,1,.3,1) calc(.4s + var(--i) * 1s + var(--c) * .2s) both}
  .as-fix.is-seen .as-fix__pick{animation:as-pick .6s cubic-bezier(.16,1,.3,1) calc(1.1s + var(--i) * 1s) both}
}
@keyframes as-check{from{opacity:.2;transform:scale(.8)}to{opacity:1;transform:none}}
@keyframes as-pick{from{opacity:.2;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* ---------------------------------------------- 08 STEP 4: prove it
   Three checks in the order they happen. Twenty past cases fill in against a bar agreed first;
   the two tracks run side by side and one quote differs; the never-list is written down. Colour
   keeps its meaning: green matched, yellow a person, salmon wrong and caught. Plays once. */
.as-prove{max-width:1080px;margin:56px auto 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;text-align:left}
.as-prove__card{position:relative;display:flex;flex-direction:column;gap:14px;padding:20px 20px 22px;background:#fff;border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.as-prove__card>.ex-kicker{margin-top:-2px}
.as-prove__n{display:grid;place-items:center;width:26px;height:26px;border:1.2px solid #000;border-radius:50%;background:#fdfcf8;font:500 12.5px/1 "Neue Montreal",system-ui,sans-serif}
.as-cases{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}
.as-cases li{aspect-ratio:1;border:1.2px solid #000;border-radius:4px;background:var(--green-bg)}
.as-cases li.is-ask{background:var(--yellow)}
.as-cases li.is-miss{background:var(--salmon)}
.as-prove__facts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.as-prove__facts div{padding:10px 12px;border:1px solid rgba(0,0,0,.14);border-radius:10px;background:#fdfcf8}
.as-prove__facts dt{font:500 10.5px/1.3 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.as-prove__facts dd{margin:4px 0 0;font:500 22px/1.1 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.as-prove__legend{display:flex;flex-direction:column;gap:5px;margin:0;font-size:13px;color:#333}
.as-prove__legend i{display:inline-block;width:11px;height:11px;margin-right:8px;border:1.2px solid #000;border-radius:3px;vertical-align:-1px}
.as-prove__legend i.is-ok{background:var(--green-bg)}.as-prove__legend i.is-ask{background:var(--yellow)}.as-prove__legend i.is-miss{background:var(--salmon)}
.as-prove__pass{position:absolute;top:20px;right:20px}
.as-pair{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 12px}
.as-pair__lbl{font:500 10.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.as-pair ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px}
.as-pair li{aspect-ratio:1;border:1.2px solid #000;border-radius:4px;background:var(--cream)}
.as-pair__new li{background:var(--green-bg)}
.as-pair__new li.is-diff{background:var(--salmon);box-shadow:0 0 0 3px #fff,0 0 0 4.5px #000}
.as-prove__note{margin:0;font-size:14px;line-height:1.5;color:#333}
.as-never{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.as-never li{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1.2px solid #000;border-radius:10px;background:#fff;font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.as-never__unsure{display:flex;align-items:flex-start;gap:10px;margin:2px 0 0;padding:11px 12px;border:1.2px dashed rgba(0,0,0,.45);border-radius:10px;background:#fdfcf8;font-size:13.5px;line-height:1.45;color:#333}
.as-never__unsure b{display:block;font:500 14.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#000}
.as-never__unsure .as-ai{flex:0 0 auto;margin-top:1px}
.as-prove>figcaption:not(.ex-sr-only){grid-column:1/-1;margin-top:6px;padding:14px 24px 16px;border:1.5px solid #000;border-radius:14px;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center;text-wrap:balance}
@media screen and (prefers-reduced-motion:no-preference){
  .ex-js .as-prove:not(.is-seen) .as-cases li,.ex-js .as-prove:not(.is-seen) .as-pair__new li{transform:scale(.4);opacity:.2}
  .ex-js .as-prove:not(.is-seen) .as-never li{opacity:.2;transform:translateY(6px)}
  .ex-js .as-prove:not(.is-seen) .as-prove__pass{opacity:.2;transform:scale(.85)}
  .as-prove.is-seen .as-cases li{animation:as-tile .4s cubic-bezier(.16,1,.3,1) calc(.3s + var(--k) * .07s) both}
  .as-prove.is-seen .as-prove__pass{animation:as-check .5s cubic-bezier(.34,1.4,.64,1) 1.9s both}
  .as-prove.is-seen .as-pair__new li{animation:as-tile .4s cubic-bezier(.16,1,.3,1) calc(.9s + var(--k) * .09s) both}
  .as-prove.is-seen .as-never li{animation:as-check .5s var(--ease) calc(1.4s + var(--k) * .25s) both}
}
@keyframes as-tile{from{transform:scale(.4);opacity:.2}to{transform:none;opacity:1}}
@media screen and (max-width:1000px){
  .as-prove{grid-template-columns:minmax(0,1fr)}
  .as-fix__kinds{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:900px){
  .as-fix__head{display:none}
  .as-fix__rows>li{grid-template-columns:repeat(3,auto) 1fr;row-gap:10px;justify-content:start}
  .as-fix__rows>li>b{grid-column:1/-1}
  .as-fix__rows>li>.as-ok{justify-self:start}
  .as-fix__rows>li>.as-ok::before{content:attr(data-q);margin-right:6px;font-weight:400;color:#333}
  .as-fix__pick{grid-column:1/-1}
}
@media screen and (max-width:640px){
  .as-list__key{display:none}
  .as-list__rows li{height:auto;grid-template-columns:auto auto 1fr;row-gap:8px;column-gap:14px;padding:12px 16px}
  .as-list__rows b{grid-column:1/-1}
  .as-list__rows .as-pips{align-items:center}
  .as-list__rows .as-pips::before{content:"Often";margin-right:4px;font:500 10.5px/1 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .as-list__rows .as-pips+.as-pips::before{content:"Bad"}
  .as-list__bar,.as-list__scale{padding-left:16px;padding-right:16px}
  .as-fix{padding:18px 16px 0}
  .as-fix>figcaption:not(.ex-sr-only){margin-left:-16px;margin-right:-16px}
  .as-fix__kinds{grid-template-columns:minmax(0,1fr)}
  .as-fix__rows>li{grid-template-columns:minmax(0,1fr)}
}

/* ---------------------------------------------- THE LENS (2026-09-23)
   "Show the examples for": one picker at Step 1 that swaps the worked example running through
   Steps 1 to 6 for the reader's kind of business (components/ai-strategy.js holds the threads).
   Each later figure carries a small "Examples for ..." chip that jumps back to it. Both stay
   hidden without the script, where the page reads as "Any business". */
.as-pick[hidden],.as-lens[hidden]{display:none}
.as-pick{max-width:1000px;margin:44px auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;scroll-margin-top:110px}
.as-pick__k{font:500 11px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.as-pick__opts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.as-pick__opts button{height:38px;padding:0 16px;border:1.5px solid #000;border-radius:999px;background:#fff;color:#000;cursor:pointer;font:500 14.5px/1 "Neue Montreal",system-ui,sans-serif;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.as-pick__opts button:hover{box-shadow:inset 0 0 0 1px #000}
.as-pick__opts button[aria-pressed="true"]{background:#000;color:#fff}
.as-pick__opts button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.as-pick__note{font-size:13.5px;color:var(--muted)}
.as-lens{display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;margin:44px auto -36px;padding:6px 8px 6px 14px;border:1.2px solid #000;border-radius:999px;background:#fff;color:#000;text-decoration:none;font:400 13.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.as-lens b{font-weight:500}
.as-lens em{font-style:normal;font-weight:500;padding:4px 10px;border-radius:999px;background:var(--cream)}
.as-lens:hover em{background:var(--yellow)}

/* ---------------------------------------------- 07 STEP 4: a finished page (2026-09-23)
   Read-only now. The fill-in form it replaced asked people to type strategy into a web page,
   which most won't do and some found confusing; the workbook below is where they write theirs. */
.as-one{max-width:1080px;margin:56px auto 0;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.as-one__bar{display:flex;align-items:center;gap:14px;padding:14px 24px;background:var(--ex-tint);border-bottom:1.5px solid #000}
.as-one__bar>b{font:500 19px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.as-one__meta{margin-left:auto;font:500 10.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.as-one__cols,.as-one__rows>li{display:grid;grid-template-columns:22px 1.25fr .8fr .75fr .8fr 1.35fr 1fr;column-gap:16px;padding:0 24px}
.as-one__cols{padding-top:11px;padding-bottom:11px;border-bottom:1px solid rgba(0,0,0,.16);font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.as-one__rows{list-style:none;margin:0;padding:0}
.as-one__rows>li{padding-top:16px;padding-bottom:16px;border-top:1px solid rgba(0,0,0,.1);align-items:start}
.as-one__rows>li:first-child{border-top:0}
.as-one__rows .as-sheet__n{padding-top:2px}
.as-one__c{font:400 14.5px/1.4 "Neue Montreal",system-ui,sans-serif;color:#000}
.as-one__c--lead{font-weight:500;font-size:15.5px;letter-spacing:-.005em}
.as-one__c small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.as-one__c.is-none{color:#b4531d}
.as-one__not{display:flex;align-items:baseline;gap:16px;margin:0;padding:14px 24px;border-top:1px solid rgba(0,0,0,.16);font-size:14.5px;line-height:1.45}
.as-one__not b{flex:0 0 auto;font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.as-one__foot{display:flex;flex-wrap:wrap;gap:8px 26px;padding:14px 24px 16px;border-top:1.5px solid #000;background:#fdfcf8;font-size:13.5px;color:var(--muted)}
.as-one__foot span::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;border-radius:50%;background:#000;vertical-align:middle}
.as-one>figcaption:not(.ex-sr-only){padding:14px 24px 16px;border-top:1.5px solid #000;background:var(--cream);font:500 15px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:center}
@media screen and (prefers-reduced-motion:no-preference){
  .ex-js .as-one:not(.is-seen) .as-one__rows>li{opacity:.25;transform:translateY(8px)}
  .as-one.is-seen .as-one__rows>li{animation:as-row .6s cubic-bezier(.16,1,.3,1) calc(.25s + var(--i) * .2s) both}
}
@keyframes as-row{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:none}}

/* The workbook: the page's free resource. One card with the coloured offset shadow /agents uses
   for "the thing to take away", a drawn window whose six tabs step through in turn (each tab's
   colour is the workbook's own tab colour), and a download. The loop is a crossfade in one slot;
   under reduced motion it rests on tab 1. */
.as-kit{max-width:1080px;margin:40px auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding:30px;background:#fdfcf8;border:1.5px solid #000;border-radius:18px;box-shadow:7px 7px 0 var(--yellow),7px 7px 0 1.5px #000;text-align:left;scroll-margin-top:110px}
.as-kit__art{min-width:0}
.as-kit__win{background:#fff;border:1.5px solid #000;border-radius:12px;overflow:hidden;box-shadow:var(--ex-shadow)}
.as-kit__bar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1.5px solid #000;background:#fdfcf8}
.as-kit__bar b{font:500 11.5px/1.2 ui-monospace,"SF Mono",Menlo,monospace;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-kit__sheet{position:relative;height:172px}
.as-kit__grid{position:absolute;inset:0;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;grid-auto-rows:22px;gap:6px;padding:16px;align-content:start;opacity:0}
.as-kit__grid--1{opacity:1}
.as-kit__grid i{border:1px solid rgba(0,0,0,.28);border-radius:4px;background:#fff}
.as-kit__grid i.h{background:#f1efe6;border-color:rgba(0,0,0,.4)}
.as-kit__grid i.y{background:#ffeba1}
.as-kit__grid i.t{background:#bfe8e0}
.as-kit__grid i.g{background:var(--green-bg)}
.as-kit__grid i.s{background:var(--salmon)}
.as-kit__grid i.w{grid-column:1/-1;height:26px}
.as-kit__tabs{list-style:none;margin:0;padding:0;display:flex;border-top:1.5px solid #000;overflow:hidden}
.as-kit__tabs li{flex:1 1 auto;min-width:0;padding:7px 7px;border-right:1px solid rgba(0,0,0,.25);background:color-mix(in srgb,var(--c) 45%,#fff);font:500 10px/1.15 "Neue Montreal",system-ui,sans-serif;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-kit__tabs li:last-child{border-right:0}
.as-kit__tabs li:first-child{background:var(--c);color:#000;box-shadow:inset 0 3px 0 #000}
.as-kit__pill{display:inline-flex;padding:6px 12px;border:1.2px solid #000;border-radius:999px;background:var(--yellow);font:600 11px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.as-kit__text h3{margin:16px 0 0;font:500 28px/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em}
.as-kit__text p{margin:12px 0 0;font-size:16px;line-height:1.55;color:#333;text-wrap:pretty}
.as-kit__list{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:14.5px}
.as-kit__sw{display:inline-block;width:14px;height:14px;margin-right:10px;border:1.2px solid #000;border-radius:4px;background:var(--c);vertical-align:-2px}
.as-kit__btn{margin-top:22px}
.as-kit__meta{display:block;margin-top:10px;font-size:13px;color:var(--muted)}
@media screen and (prefers-reduced-motion:no-preference){
  .as-kit.is-seen .as-kit__grid{animation:kit-show 18s var(--ease) infinite backwards}
  .as-kit.is-seen .as-kit__tabs li{animation:kit-tab 18s var(--ease) infinite backwards}
  .as-kit.is-seen .as-kit__grid--2,.as-kit.is-seen .as-kit__tabs li:nth-child(2){animation-delay:3s}
  .as-kit.is-seen .as-kit__grid--3,.as-kit.is-seen .as-kit__tabs li:nth-child(3){animation-delay:6s}
  .as-kit.is-seen .as-kit__grid--4,.as-kit.is-seen .as-kit__tabs li:nth-child(4){animation-delay:9s}
  .as-kit.is-seen .as-kit__grid--5,.as-kit.is-seen .as-kit__tabs li:nth-child(5){animation-delay:12s}
  .as-kit.is-seen .as-kit__grid--6,.as-kit.is-seen .as-kit__tabs li:nth-child(6){animation-delay:15s}
}
@keyframes kit-show{0%{opacity:0;transform:translateY(6px)}3%,15%{opacity:1;transform:none}18%,100%{opacity:0;transform:none}}
@keyframes kit-tab{0%{background:color-mix(in srgb,var(--c) 45%,#fff);color:#333;box-shadow:inset 0 0 0 transparent}3%,15%{background:var(--c);color:#000;box-shadow:inset 0 3px 0 #000}18%,100%{background:color-mix(in srgb,var(--c) 45%,#fff);color:#333;box-shadow:inset 0 0 0 transparent}}
@media screen and (max-width:900px){
  .as-kit{grid-template-columns:minmax(0,1fr);gap:26px;padding:22px}
  .as-one__cols{display:none}
  .as-one__rows>li{grid-template-columns:22px minmax(0,1fr);row-gap:10px}
  .as-one__rows>li>.as-one__c{grid-column:2}
  .as-one__rows>li>.as-one__c:not(.as-one__c--lead)::before{content:attr(data-c);display:block;margin-bottom:2px;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .as-one__not{flex-direction:column;gap:4px}
  .as-kit__tabs li{font-size:9.5px;padding:6px 4px}
}
@media screen and (max-width:640px){
  .as-pick__opts button{height:34px;padding:0 13px;font-size:13.5px}
  .as-one__bar,.as-one__rows>li,.as-one__not,.as-one__foot{padding-left:16px;padding-right:16px}
  .as-one__meta{display:none}
  .as-lens{font-size:12.5px}
}

/* ------------------------------------------------------------------------------ SMALLER
   Everything below is `screen` only. The print block at the foot is the one-pager on paper. */
@media screen and (max-width:1100px){
  .as-zoom{grid-template-columns:1fr;gap:0;padding:26px}
  .as-zoom__lead{height:44px;align-self:center;justify-self:center;width:26px}
  .as-zoom__lead::before{left:50%;right:auto;top:0;bottom:0;height:auto;width:1.5px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.5) 0 5px,transparent 5px 11px)}
  .as-zoom>figcaption:not(.ex-sr-only){margin-top:26px}
}
@media screen and (max-width:900px){
  .as-two{grid-template-columns:minmax(0,1fr)}
  .as-two__half--slogan{border-radius:18px 18px 0 0}
  .as-two__half--named{border-left:0;border-top:1.5px solid #000;border-radius:0}
  .as-room__stage{grid-template-columns:1fr}
  .as-room__measures{grid-template-columns:1fr}
  .as-track__cols{display:none}
  .as-track__rows li{grid-template-columns:1fr 1fr;gap:10px}
  .as-track__name{grid-column:1/-1}
  .as-m::before{content:attr(data-when);font:500 10.5px/1 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .as-run__steps{grid-template-columns:minmax(0,1fr)}
  .as-run__bar{flex-wrap:wrap}
  .as-run__row{order:3;margin-right:0}
  .as-run__toggle{margin-left:auto}
  .as-run__t{font-size:28px}
}
@media screen and (max-width:640px){
  .as-sheet__n{padding:0}
  .as-zoom__teams{grid-template-columns:repeat(2,1fr)}
  .as-two__half,.as-room,.as-zoom,.as-track{padding-left:18px;padding-right:18px}
  .as-run__body{padding:18px 16px}
  .as-run__ask{flex-wrap:wrap}
  .as-run__btns{width:100%;padding-left:38px}
  /* The frames drop to 18px of side padding here, so their caption strips have to pull back by
     18px too; left at the desktop -24 and -26 they hung 6 to 8px outside the frame. */
  .as-room>figcaption:not(.ex-sr-only),.as-zoom>figcaption:not(.ex-sr-only),.as-track>figcaption:not(.ex-sr-only){margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .as-room__seats{flex-wrap:wrap}
  /* The four fields: the field's name and its pill share a line, the value takes the width under them. */
  .as-fields>li{grid-template-columns:minmax(0,1fr) auto;row-gap:8px;padding:10px 6px}
  .as-fields__k{grid-row:1;grid-column:1}
  .as-fields>li>.as-st{grid-row:1;grid-column:2}
  .as-fields__v{grid-row:2;grid-column:1/-1}
}

/* The closing drawing's two loops, declared per page as on the other explainers. */
@keyframes ex-cta-ride{0%{transform:translateX(0);opacity:0}6%{opacity:1}80%{transform:translateX(414px);opacity:1}88%,100%{transform:translateX(414px);opacity:0}}
@keyframes ex-cta-nudge{0%,100%{transform:translate(0,0)}50%{transform:translate(-2px,2px)}}

/* ============================================================ THE /agents PASS, 2026-09-23
   Bruno named Justin's /agents lander the design reference. Four things from it hold across this page:
   nothing rests at opacity 0 waiting to be revealed (pending things sit at .35 and brighten, which
   is also why every figure's pre-motion state above reads .35), the small drawings are software
   objects on a dotted drawing board with one quiet loop each, inline links read as links, and the
   person glyph is Justin's, filled head and white body, until he says otherwise. */
.as-page.ex-js [data-ex-reveal]:not(.is-seen)>*{opacity:.35;transform:translateY(10px)}
@media(prefers-reduced-motion:no-preference){
  .as-page.ex-js [data-ex-reveal].is-seen>*{animation:ag-rise .5s var(--ease) calc(var(--i,0) * .11s) both}
}
@keyframes ag-rise{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}
.as-page :is(.ex-art,.ex-myth__art,.ex-rules__art,.ex-start__art){background:#fdfcf8 radial-gradient(rgba(0,0,0,.07) 1px,transparent 1.2px) 0 0/16px 16px}
.as-page .ex-art{padding:12px 14px}
.as-page :is(.ex-head .lead,.ex-myth p,.ex-rules__body p,.ex-start__steps p) a{color:var(--blue);font-weight:500;text-decoration:none}
.as-page :is(.ex-head .lead,.ex-myth p,.ex-rules__body p,.ex-start__steps p) a:hover{color:var(--blue-deep);text-decoration:underline;text-underline-offset:4px}
/* THE SMALL DRAWINGS' QUIET LOOPS, from /agents' kit cards (2026-09-23): one loop per drawing, on
   its own clock, and only once its grid has been seen. Every element's base style is its finished
   frame, so reduced motion and no JavaScript both show the finished picture. Nothing here moves one
   object into another; the loops breathe, ride a wire, tick or swap a state in place. */
.as-page [data-ex-reveal] :is(.k-dot,.k-pop,.k-tick,.k-breathe,.k-pulse,.k-prog){transform-box:fill-box;transform-origin:center}
.as-page [data-ex-reveal] .k-prog{transform-origin:0 50%}
.as-page [data-ex-reveal] .k-hand{transform-box:view-box}
.as-page [data-ex-reveal] .k-ride{offset-rotate:0deg}
.as-page [data-ex-reveal] .k-swap-b,.as-page [data-ex-reveal] .k-ghost{opacity:1}
.as-page [data-ex-reveal] .k-swap-a{opacity:0}
.as-page [data-ex-reveal] .k-dim{opacity:.4}
.as-page [data-ex-reveal] .k-sign{stroke-dasharray:1;stroke-dashoffset:0}
@media(prefers-reduced-motion:no-preference){
  .as-page [data-ex-reveal].is-seen .k-dot{animation:k-dot 3.6s var(--ease) var(--d,0s) infinite}
  .as-page [data-ex-reveal].is-seen .k-pop{animation:k-pop 5s var(--ease) var(--d,0s) infinite backwards}
  .as-page [data-ex-reveal].is-seen .k-tick{animation:k-tick 3.6s var(--ease) var(--d,0s) infinite}
  .as-page [data-ex-reveal].is-seen .k-breathe{animation:k-breathe 4.5s ease-in-out infinite}
  .as-page [data-ex-reveal].is-seen .k-pulse{animation:k-dot 4s var(--ease) 1s infinite}
  .as-page [data-ex-reveal].is-seen .k-prog{animation:k-prog 6.5s ease-in-out infinite alternate}
  .as-page [data-ex-reveal].is-seen .k-ride{animation:k-ride var(--dur,4.5s) linear var(--d,0s) infinite}
  .as-page [data-ex-reveal].is-seen .k-hand{animation:k-spin 9s linear infinite}
  .as-page [data-ex-reveal].is-seen .k-march{animation:k-march 1.6s linear infinite}
  .as-page [data-ex-reveal].is-seen .k-ghost{animation:k-ghost 5s ease-in-out infinite}
  .as-page [data-ex-reveal].is-seen .k-swap-a{animation:k-swap-a 7s var(--ease) infinite}
  .as-page [data-ex-reveal].is-seen .k-swap-b{animation:k-swap-b 7s var(--ease) infinite}
  .as-page [data-ex-reveal].is-seen .k-flip{animation:k-flip 6s var(--ease) infinite}
  .as-page [data-ex-reveal].is-seen .k-lift{animation:k-lift 4s ease-in-out infinite alternate}
  .as-page [data-ex-reveal].is-seen .k-sign{animation:k-sign 6s var(--ease) infinite}
}
@keyframes k-dot{0%,22%,100%{transform:none}10%{transform:scale(1.22)}}
@keyframes k-pop{0%{transform:scale(.6);opacity:.35}9%,84%{transform:none;opacity:1}100%{transform:none;opacity:.35}}
@keyframes k-tick{0%,14%,30%,100%{transform:none}22%{transform:scale(1.25)}}
@keyframes k-breathe{0%,100%{transform:none}50%{transform:scale(1.07)}}
@keyframes k-prog{0%,15%{transform:scaleX(.3)}75%,100%{transform:none}}
@keyframes k-ride{0%{offset-distance:0%;opacity:0}10%,86%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes k-spin{to{transform:rotate(360deg)}}
@keyframes k-march{to{stroke-dashoffset:-11}}
@keyframes k-ghost{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes k-swap-a{0%,42%{opacity:1}50%,92%{opacity:0}100%{opacity:1}}
@keyframes k-swap-b{0%,42%{opacity:0}50%,92%{opacity:1}100%{opacity:0}}
@keyframes k-flip{0%,30%{opacity:0}38%,92%{opacity:1}100%{opacity:0}}
@keyframes k-lift{from{transform:none}to{transform:translateY(-4px)}}
@keyframes k-sign{0%,8%{stroke-dashoffset:1}40%,100%{stroke-dashoffset:0}}

/* STROKE WEIGHT IS MEASURED ON SCREEN (2026-09-23). A stroke of 1.5 in a 160-unit view box drawn
   540px wide is a 5px line; the same 1.5 in a 440-unit card drawn 330px wide is 1.1px. /agents
   draws its figures in HTML with 1.5px borders, so every line is the same weight at every size, and
   Bruno sent the first version of this pass back for exactly that difference. Every drawing this
   page generates therefore keeps its stroke in screen pixels: 1.5px for objects, 1.2px for chips,
   whatever width the slot renders at. The signature is the one exception, because it draws itself
   with pathLength, which needs user units; its width is set so it lands at 1.5px in its slot.
   Check with scripts/qa/stroke-probe.js, never by eye. */
.as-page :is(.ex-art,.ex-myth__art,.ex-rules__art,.ex-start__art) svg :not(.k-sign){vector-effect:non-scaling-stroke}


/* THE DOOR IN (2026-09-23). /agents gives one card a coloured offset shadow instead of the grey
   one: the card the client tries before committing. Bruno's call: it breaks the black-translucent
   rule, and it is worth using sometimes, for that one job. Here it is the last start step, the one
   an AI Jumpstart is for, so it is the only coloured shadow on the page. */
.as-page .ex-start__steps li:nth-child(3){box-shadow:5px 5px 0 var(--green-bg),5px 5px 0 1.5px #000}