/* Buy vs build explainer: this page's figures only. The quote's route today, the box you
   bought, the scale, the ageing request list, the three corners, the thin piece on top, a
   screen per job, the releases and the closing drawing. Shared chrome is in explainer.css,
   which loads first. Every finished state exists in HTML; motion is additive, runs once and
   rests visible. The five step cards are the page's running object: stranded in the hero,
   locked out of the box, seated on the band, read three ways.
   COLOUR GRAMMAR, written down on 2026-09-21. Cream plus the #8a8a8a dots: a product somebody
   sold you, which is why .bb-sys--grey and .bb-box__prod stay cream and why the hero's two
   finished pieces do not. Ink on white: the work you own. Yellow: the hero pieces and the money
   chip, and nothing new. Green: finished or settled (the months you have, what the vendor already
   built, the switches already on, a clause a product can answer, a release people were trained
   on). Blue: the software you own, with --blue for the release dot, --blue-deep for the release
   tag and --ex-tint for its surfaces (the three screen bars, the spine). Blue-light: AI alone,
   which is what the corner chat discs now are. Salmon: the cost of waiting and the state you are
   in today. Pink stays a ROLE here, because the avatars own it, which is why the vendor is pink
   on /mcp and cream here. #b9b9b9: text you are not meant to read, drawn with the shared .ex-blur
   from explainer.css. One trap: site.css defines --green-bg twice and the later definition wins,
   so the token resolves to the muted #d9eccf, not #caf0be. Every green on this page is already
   that value, so keep using the token; do not swap in the literal for one element.
   Do not spend a colour that is already spoken for. */

.bb-page .ex-head .h-display{text-wrap:balance}
/* The line after each figure is the story's next beat: a dashed stem drops from the figure
   into it, and its second sentence hands over to the section that follows. */
.bb-page .ex-punch{position:relative;margin-top:0;padding-top:64px}
.bb-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)}
.bb-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 system you already run, drawn as a window with a title bar. It is always grey: on this page
   grey means a product somebody sold you, and ink on white means the work you own. Never a logo:
   the page criticises the products it draws, so it never names one. */
.bb-sys{position:relative;padding:32px 14px 14px;background:#fff;border:1.5px solid #000;border-radius:10px;box-shadow:var(--ex-shadow);text-align:left}
.bb-sys>i{position:absolute;left:0;right:0;top:0;height:20px;border-bottom:1.5px solid #000;border-radius:10px 10px 0 0;background:var(--cream)}
.bb-sys>i::before{content:"";position:absolute;left:10px;top:7px;width:5px;height:5px;border-radius:50%;background:#000;box-shadow:9px 0 0 #000,18px 0 0 #000}
.bb-sys b{display:block;font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-sys small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--muted)}
.bb-sys--grey{background:var(--cream);border-color:#000}
.bb-sys--grey>i{background:var(--cream);border-bottom-color:#000}
.bb-sys--grey>i::before{background:#8a8a8a;box-shadow:9px 0 0 #8a8a8a,18px 0 0 #8a8a8a}
.bb-sys--grey b{color:#333}
/* The record that window actually holds. Grey inside a grey window: a bought product is grey
   on this page and putting a record in it does not make it ours. */
.bb-sys__rec{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px;padding:7px 9px;border:1.5px solid #000;border-radius:7px;background:#fff;font:500 12px/1.3 "Neue Montreal",system-ui,sans-serif;color:#333}
.bb-sys__rec b{font:inherit}
.bb-sys__rec em{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}


/* A step in the work. The same card is used in the hero, outside the box and on the band. */
.bb-step{position:relative;padding:14px 12px 12px;background:#fff;border:1.5px solid #000;border-radius:12px;text-align:center}
.bb-step__n{display:inline-grid;place-items:center;width:22px;height:22px;margin-bottom:7px;border:1.5px solid #000;border-radius:50%;background:var(--cream);font:500 11px/1 "Neue Montreal",system-ui,sans-serif}
.bb-step b{display:block;font:500 14px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-step small{display:block;margin-top:4px;font-size:11.5px;line-height:1.35;color:var(--muted)}

/* HERO: one quote's route. Two systems at the ends hold the facts; the five steps between
   them have no software behind them, which the bracket says out loud. */
/* Pixel floors on the cqw type: a stage sized entirely in cqw will set body copy at eight and a
   half pixels on a 1024 window. Measured, not eyeballed. */
/* HERO: two pieces you bought, and the gap between them is the shape of your business. The puzzle
   taken seriously and drawn flat: the systems are finished grey pieces (grey on this page means a
   product somebody sold you), the gap has the exact shape their edges leave, and the five steps float
   in it with nothing underneath. The stage keeps a 1080 by 380 ratio; each piece is its own SVG shape
   with the system window as HTML over it; the hole is a dashed outline in the series' not-yet-placed
   grey with the step cards positioned inside it in percentages and sized in container-query units,
   so the whole picture scales as one object. Under 900px it stops being a stage: the pieces become the
   two grey windows in flow and the hole a dashed box with the five cards in a grid. */
.bb-gap{position:relative;width:100%;max-width:1080px;margin:72px auto 0;padding:56px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);text-align:left}
.bb-gap__tag{top:18px;left:50%;translate:-50% 0;white-space:nowrap}
.bb-gap__stage{position:relative;width:100%;aspect-ratio:1080/380;margin-bottom:26px}
.bb-gap__piece{position:absolute;top:2.63%;width:33.34%;height:86.84%;container-type:inline-size}
.bb-gap__piece--left{left:0}
.bb-gap__piece--right{left:66.66%}
.bb-gap__shape{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:var(--yellow);stroke:#000;stroke-width:1.5}
.bb-gap__sys{position:absolute;top:19%;width:74%}
.bb-gap__piece--left .bb-gap__sys{left:9%}
.bb-gap__piece--right .bb-gap__sys{left:17%}
.bb-gap__hole{position:absolute;left:30.55%;top:10.53%;width:38.9%;height:78.95%;container-type:inline-size}
.bb-gap__outline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:#8a8a8a;stroke-width:1.5;stroke-dasharray:11 9}
.bb-gap__steps{list-style:none;margin:0;padding:0}
.bb-gap__hole .bb-step{position:absolute;width:26%;padding:3.3cqw 2.4cqw 2.8cqw;border-radius:2.8cqw;transform:rotate(var(--r,0deg))}
.bb-gap__hole .bb-step__n{width:5.2cqw;height:5.2cqw;margin-bottom:1.6cqw;font-size:max(10.5px,2.6cqw)}
.bb-gap__hole .bb-step b{font-size:max(13px,3.3cqw)}
.bb-gap__hole .bb-step small{margin-top:1cqw;font-size:max(11px,2.7cqw)}
.bb-gap__label{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);margin:0;white-space:nowrap}
.bb-gap__label span{display:inline-block;padding:1cqw 2.4cqw;border:1.5px solid #000;border-radius:10px;background:var(--salmon-bg);font:500 max(15px,4.9cqw)/1.15 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em;color:#7a3a14}
.bb-gap>figcaption:not(.ex-sr-only){margin:0 -28px;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}
@media(prefers-reduced-motion:no-preference){
  /* The two bought pieces slide together and stop short, which is the whole picture. Then the
     steps drop into the hole and settle where they land, the outline traces the shape they are
     sitting in, and the label says whose shape it is. */
  .ex-js .bb-gap .bb-gap__piece--left{opacity:0;transform:translateX(-7%)}
  .ex-js .bb-gap .bb-gap__piece--right{opacity:0;transform:translateX(7%)}
  .bb-gap.is-seen .bb-gap__piece--left,.bb-gap.is-seen .bb-gap__piece--right{opacity:1;transform:none;transition:opacity .6s var(--ease) .1s,transform .9s var(--ease) .1s}
  .ex-js .bb-gap .bb-step{opacity:0}
  .bb-gap.is-seen .bb-step{animation:bb-loose .62s cubic-bezier(.2,.9,.3,1) calc(1s + var(--i) * .13s) both}
  .ex-js .bb-gap .bb-gap__outline{clip-path:inset(0 100% 0 0)}
  .bb-gap.is-seen .bb-gap__outline{clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease) 2.1s}
  /* The figure keeps one slow loop and it is the figure's subject: the shape nobody sells,
     still open. -20 is exactly one period of the stroke-dasharray:11 9 above, so it cycles
     seamlessly, and it starts only once the outline has finished drawing itself. */
  .bb-gap.is-seen .bb-gap__outline{animation:bb-gap-trace 9s linear 3.4s infinite backwards}
  .ex-js .bb-gap .bb-gap__label{opacity:0;transition:opacity .6s var(--ease)}
  .bb-gap.is-seen .bb-gap__label{opacity:1;transition-delay:3.3s}
}

/* WHAT YOU'RE WORKING WITH: the box you bought. What the vendor built sits behind a wall,
   the settings dial is everything you may change, and your steps stay outside it. */
.bb-box{display:grid;grid-template-columns:minmax(0,1fr) 268px;gap:26px;max-width:1080px;margin:72px auto 0;padding:28px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-box__prod{position:relative;border:1.5px solid #000;border-radius:12px;background:var(--cream);box-shadow:var(--ex-shadow);overflow:hidden}
.bb-box__bar{display:flex;align-items:center;gap:5px;padding:10px 14px;border-bottom:1.5px solid #000;background:var(--cream);color:#333;font:500 12.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.bb-box__bar i{width:6px;height:6px;border-radius:50%;background:#8a8a8a;flex:none}
.bb-box__bar span{margin-left:8px}
.bb-box__in{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;padding:18px 18px 20px}
.bb-box__built ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.bb-box__built li{position:relative;padding:9px 12px 9px 28px;border:1.5px solid #000;border-radius:9px;background:#fff;color:#333;font:500 13.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.bb-box__built li::before{content:"";position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:2px;background:var(--green-bg);border:1.5px solid #000}
/* The menu, drawn as a menu. A dial was here first and it argued the wrong thing: a dial has a
   range, and the point of this section is that the list is three items long and then it stops.
   Three switches, all already on, and a rule under them where the menu ends. The switch track is
   30 by 17 with a 1.5px border, so the inner box is 27 by 14 and an 11px knob sits at 1.5px from
   either end: translateX(13px) is the right-hand rest, measured, not guessed. */
.bb-box__menu{border-left:1.5px dashed rgba(0,0,0,.35);padding-left:18px;display:flex;flex-direction:column;gap:9px}
.bb-box__sets{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px}
.bb-box__sets li{display:flex;align-items:center;justify-content:space-between;gap:9px;padding:8px 10px;border:1.5px solid #000;border-radius:9px;background:#fff;font:500 12.5px/1.25 "Neue Montreal",system-ui,sans-serif;color:#333}
.bb-box__sets i{position:relative;flex:none;width:30px;height:17px;border:1.5px solid #000;border-radius:999px;background:var(--green-bg)}
.bb-box__sets i::after{content:"";position:absolute;left:1.5px;top:1.5px;width:11px;height:11px;border-radius:50%;background:#000;transform:translateX(13px)}
.bb-box__end{display:block;margin-top:1px;padding-top:9px;border-top:1.5px dashed rgba(0,0,0,.35);font:500 11px/1.35 "Neue Montreal",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);text-align:center}
.bb-box__out{display:flex;flex-direction:column;gap:10px;padding-bottom:4px}
.bb-box__chips{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:8px}
.bb-box__chips li{padding:9px 12px;border:1.5px dashed #000;border-radius:9px;background:#fff;font:500 13.5px/1.3 "Neue Montreal",system-ui,sans-serif;color:#000;box-shadow:var(--ex-shadow)}
/* The one colour block in this figure, and it is the section's punch: the five steps are
   outside the box and nothing on the dial reaches them. Salmon is this page's colour for the
   state you are in today, the same family as the hero tag and the waiting bars. */
.bb-box__no{margin:8px 0 0;padding:9px 12px;border:1.5px solid #000;border-radius:9px;background:var(--salmon-bg);font:500 13px/1.35 "Neue Montreal",system-ui,sans-serif;color:#7a3a14}
.bb-box>figcaption:not(.ex-sr-only){grid-column:1/-1;margin:22px -28px 0;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .bb-box .bb-box__chips li{opacity:0;transform:translateY(8px)}
  .bb-box.is-seen .bb-box__chips li{animation:ex-arrive .45s var(--ease) calc(1s + var(--i) * .12s) both,bb-knock .7s var(--ease) calc(1.7s + var(--i) * .12s) both}
  /* The three switches flick on in turn, the list runs out, and only then do the five steps knock
     on the outside of the box. The menu finishing before the knock is the sequence's argument.
     --i is set on the li and inherits into the i and its ::after. */
  .ex-js .bb-box .bb-box__sets i{background:#fff}
  .ex-js .bb-box .bb-box__sets i::after{transform:none}
  .ex-js .bb-box .bb-box__end{opacity:0;transition:opacity .6s var(--ease)}
  .bb-box.is-seen .bb-box__sets i{animation:bb-set .34s var(--ease) calc(.3s + var(--i) * .2s) both}
  .bb-box.is-seen .bb-box__sets i::after{animation:bb-flick .34s cubic-bezier(.2,1.2,.3,1) calc(.3s + var(--i) * .2s) both}
  .bb-box.is-seen .bb-box__end{opacity:1;transition-delay:1.15s}
}

/* WHY IT HAPPENS: the same job, counted twice. A balance was tried twice and cut, then a two-line
   price chart was tried and cut, and both failed in the same way: any device with two sides hands
   the reader a comparison, and in that comparison a subscription is the flat, cheap, calm-looking
   side and always will be. The section is not a comparison. It says only one side of the decision
   moved and nobody looked again, so buying is not drawn at all and the caption says why.
   Two readings of one job in the same slots: five figures and eighteen blocks in 2006, two and
   four in 2026, with what stopped being needed left as empty outlines in the places it used to
   fill. Between them a rail of twenty-one year marks, not one of which carries a count; that
   emptiness is the argument, and it is why the rail is given real height instead of a line.
   No axis and no second series, so nothing here asks the reader to weigh developers against a
   subscription, which is the unit problem that killed both scales. Outlines are a light solid
   border, never dashed: border-style cannot transition, and the months empty out on a stagger. */
.bb-count{position:relative;max-width:1080px;margin:72px auto 0;padding:62px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
/* Salmon on these pages means the state the page argues against; green or blue means the
   state it argues for. The shared tag defaults to salmon, so neutral labels were wearing the
   alarm colour by accident. A label that is neither takes cream. */
.bb-count__tag{top:18px;left:28px;background:var(--cream)}
.bb-count__row{display:grid;grid-template-columns:184px 172px minmax(0,1fr);gap:10px 26px;align-items:center}
.bb-count__when span{display:block;font:500 11px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bb-count__when b{display:block;margin-top:4px;font:500 27px/1.1 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bb-count__unit{display:flex;flex-direction:column;gap:10px;align-items:flex-start;width:100%}
.bb-count__people{display:flex;gap:7px}
.bb-count__months{display:flex;gap:6px;width:100%}
.bb-count__months i{flex:1 1 0;min-width:0;height:30px;border:1.5px solid #000;border-radius:3px;background:var(--green-bg)}
.bb-count__label{font:500 15px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
/* What stopped being needed keeps its place. A month gives up its fill; a figure is left as a
   ghost of itself. The glyph is a background-image redrawn under .bb-page, so it is faded with
   opacity rather than removed, which also gives both a transition the motion can run. */
.bb-count__months i.is-gone{background-color:transparent;border-color:rgba(0,0,0,.26)}
.bb-count__people .is-gone{background-color:transparent;opacity:.3}
/* The twenty-one years between the two counts, drawn at full width because they sit between the
   readings rather than beside them, and left empty because the emptiness is the argument. */
.bb-count__gap{margin:20px 0 18px}
.bb-count__rail{position:relative;display:flex;justify-content:space-between;align-items:center;height:22px}
.bb-count__rail::before{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:rgba(0,0,0,.22)}
.bb-count__rail i{position:relative;width:1.5px;height:10px;background:rgba(0,0,0,.42);border-radius:1px}
.bb-count__rail i:first-child,.bb-count__rail i:last-child{height:20px;background:rgba(0,0,0,.5)}
.bb-count__note{margin:11px 0 0;font:400 15px/1.45 "Neue Montreal",system-ui,sans-serif;color:var(--muted);text-align:center}
.bb-count>figcaption:not(.ex-sr-only){margin:26px -28px 0;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  /* The years run down the rail and none of them carries a count. Then the second reading
     empties: it arrives as a copy of the first and fourteen months give up their fill. */
  .ex-js .bb-count .bb-count__rail i{opacity:0}
  .bb-count.is-seen .bb-count__rail i{animation:ex-arrive .4s var(--ease) calc(.2s + var(--i) * .05s) both}
  .ex-js .bb-count .bb-count__note{opacity:0;transition:opacity .6s var(--ease)}
  .bb-count.is-seen .bb-count__note{opacity:1;transition-delay:1.3s}
  .ex-js .bb-count .bb-count__months i.is-gone{background-color:var(--green-bg);border-color:#000}
  .bb-count.is-seen .bb-count__months i.is-gone{background-color:transparent;border-color:rgba(0,0,0,.26);transition:background-color .5s var(--ease) calc(1.9s + var(--i) * .045s),border-color .5s var(--ease) calc(1.9s + var(--i) * .045s)}
  .ex-js .bb-count .bb-count__people .is-gone{background-color:var(--green-bg);opacity:1}
  .bb-count.is-seen .bb-count__people .is-gone{background-color:transparent;opacity:.3;transition:background-color .5s var(--ease) 1.9s,opacity .5s var(--ease) 1.9s}
  .ex-js .bb-count .bb-count__row--now .bb-count__label{opacity:0;transition:opacity .5s var(--ease)}
  .bb-count.is-seen .bb-count__row--now .bb-count__label{opacity:1;transition-delay:2.7s}
}


/* WHAT IT COSTS: the request list, ageing. One bar per ask, grown from the date it was made. */
.bb-asks{max-width:1080px;margin:72px auto 0;padding:26px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-asks__cols,.bb-asks__list li{display:grid;grid-template-columns:minmax(0,1fr) 300px 118px;align-items:center;gap:20px}
.bb-asks__cols{padding:0 0 12px;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bb-asks__list{list-style:none;margin:0;padding:0}
.bb-asks__list li{padding:16px 0;border-top:1.5px solid var(--line)}
.bb-asks__list b{font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
/* The bar is the measurement: the year it was asked at its start, the wait at its end. */
.bb-ask__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.bb-ask__bar i{display:block;height:12px;border:1.5px solid #000;border-radius:999px;background:#fff;overflow:hidden;position:relative}
.bb-ask__bar i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--salmon-bg);border-radius:999px}
.bb-ask__bar em{font:500 13px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.bb-ask__bar em:last-child{color:#7a3a14}
.bb-asks>figcaption:not(.ex-sr-only){margin:24px -28px 0;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .bb-asks .bb-ask__bar i::after{width:0;transition:width 1.1s var(--ease)}
  .bb-asks.is-seen .bb-ask__bar i::after{width:var(--w);transition-delay:calc(.3s + var(--i) * .25s)}
  .ex-js .bb-asks .bb-ask__bar em:last-child{opacity:0;transition:opacity .5s var(--ease)}
  .bb-asks.is-seen .bb-ask__bar em:last-child{opacity:1;transition-delay:calc(1.2s + var(--i) * .25s)}
}

/* THEN AI ARRIVES: one question above three products, and a third of an answer under each. */
.bb-corners{max-width:1080px;margin:72px auto 0;padding:28px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-corners__q{display:flex;align-items:center;justify-content:center;gap:12px;max-width:640px;margin:0 auto 34px;padding:14px 20px;border:1.5px solid #000;border-radius:14px 14px 14px 4px;background:var(--ex-tint);font:500 17px/1.4 "Neue Montreal",system-ui,sans-serif;text-align:left}
.bb-corners__row{list-style:none;margin:0;padding:0 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bb-corner{display:flex;flex-direction:column;gap:22px}
.bb-corner .bb-sys{padding-bottom:18px}
/* Blue-light, because it is AI and blue-light is AI everywhere in the series. The section is
   called the AI in the corner of a product and the AI was the one uncoloured thing in it. The
   bubble path inside the glyph is filled #fff, so the disc reads as a halo around it. */
.bb-corner__chat{position:absolute;right:10px;bottom:-16px;display:grid;place-items:center;width:34px;height:34px;border:1.5px solid #000;border-radius:50%;background:var(--blue-light);box-shadow:var(--ex-shadow)}
.bb-corner__chat svg{width:19px;height:19px;display:block}
/* The question is three clauses, and every product lists all three back. The first product spells
   all three out in words and is the one that teaches the pattern: the clause it answers is ticked,
   the two it cannot are struck out. The other two products keep only the clause they answer in
   words and stand the other two as the shared .ex-blur placeholder, at a fixed width per clause
   (146 / 124 / 106) so the three cards still read as the same three rows in the same order.
   Naming only the part a product answers and DELETING the other rows was tried and rejected: it
   left the reader to make the join alone. The rows have to stay, whether or not they carry words.
   The strike sits on an inner span rather than the li, because text-decoration on a flex row
   propagates into the tick's own box. */
.bb-corner__part{margin:0;padding:14px 16px 13px;border:1.5px dashed #8a8a8a;border-radius:12px;background:#fdfcf8;font-size:14.5px;line-height:1.5;color:#333}
.bb-corner__part .ex-kicker{margin-bottom:9px}
.bb-corner__lines{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.bb-corner__lines li{display:flex;align-items:flex-start;gap:9px;font:400 13.5px/1.35 "Neue Montreal",system-ui,sans-serif;color:var(--muted)}
.bb-corner__lines i{position:relative;flex:none;width:17px;height:17px;margin-top:-1px;border:1.5px solid rgba(0,0,0,.3);border-radius:50%;background:#fff}
.bb-corner__lines i::after{content:"";position:absolute;left:3.5px;top:6.25px;width:7px;height:1.5px;background:rgba(0,0,0,.3)}
.bb-corner__lines span{text-decoration:line-through;text-decoration-color:rgba(0,0,0,.3)}
/* The two clauses each product cannot answer are now drawn, not written. All three clauses are in
   the question above the row and each one is written out in full in the card that answers it, so
   the reader meets every clause once instead of nine times. The bars are the series' own
   placeholder vocabulary, the shared .ex-blur from explainer.css at #b9b9b9, which is the same
   grey as the redacted rows on /ai-and-your-data and is already used 84 times on /mcp and nowhere
   on this page. The struck circle stays, and is what still says no.
   .bb-corner__lines .ex-blurs is (0,2,0) and beats the line-through rule above at (0,1,1). */
.bb-corner__lines .ex-blurs{margin-top:5px}
.bb-corner__lines .ex-blurs,.bb-corner__lines .ex-blur{text-decoration:none}
.bb-corner__lines .is-yes{color:#000;font-weight:500}
.bb-corner__lines .is-yes span{text-decoration:none}
.bb-corner__lines .is-yes i{border-color:#000;background:var(--green-bg)}
.bb-corner__lines .is-yes i::after{left:3px;top:3.5px;width:7px;height:3.5px;background:none;border-left:1.6px solid #000;border-bottom:1.6px solid #000;transform:rotate(-45deg)}
/* The placeholder rows on products two and three. .ex-blur is the shared device in explainer.css
   and is NOT redefined here; only what this context needs is set. A bar row has to take the same
   height as a row of words or the three cards stop lining up: 9px of bar plus 4 and 5.2 of margin
   is the 18.2px a 13.5px line at 1.35 occupies, and the 4px top drops the bar onto the centre line
   of the 17px tick circle. text-decoration:none because .bb-corner__lines span carries the strike
   and these bars are spans. Width ceiling is 151px: --pad is 80px until 899, so at 901, the
   narrowest three-column width, a clause row has 151px left after the circle and its 9px gap. */
.bb-corner__lines .ex-blur{margin:4px 0 5.2px;text-decoration:none}
.bb-corner__part>p{margin:12px 0 0;padding-top:11px;border-top:1.5px dashed rgba(0,0,0,.25);font-size:13.5px;line-height:1.45;color:#333}
.bb-corners>figcaption:not(.ex-sr-only){margin:0 -28px;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .bb-corners .bb-corners__q, .ex-js .bb-corners .bb-corner__part{opacity:0;transform:translateY(8px)}
  .ex-js .bb-corners .bb-corner__chat{opacity:0;transform:scale(.55)}
  .bb-corners.is-seen .bb-corners__q{animation:ex-arrive .5s var(--ease) .1s both}
  .bb-corners.is-seen .bb-corner__chat{animation:bb-ask .5s cubic-bezier(.2,1.1,.3,1) calc(.7s + var(--i) * .5s) both}
  .bb-corners.is-seen .bb-corner__part{animation:ex-arrive .5s var(--ease) calc(1.05s + var(--i) * .5s) both}
  /* Only the tick moves. The three clauses and the two strikes are the rest state, so the figure
     is complete without motion and the one event per card is the product claiming its clause. */
  .ex-js .bb-corners .bb-corner__lines .is-yes i{opacity:0;transform:scale(.4)}
  .bb-corners.is-seen .bb-corner__lines .is-yes i{animation:bb-ask .42s cubic-bezier(.2,1.2,.3,1) calc(1.6s + var(--i) * .5s) both}
}

/* THE FIX, PART ONE: the thin piece on top. The band holds the same five steps, the systems
   below keep the records, and the connectors are measured so they can never drift. */
.bb-layer{position:relative;max-width:1080px;margin:72px auto 0;padding:56px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-layer__tag{top:18px;left:28px;background:var(--green-bg)}
.bb-layer__band{position:relative;z-index:1;display:flex;align-items:center;gap:18px;padding:38px 18px 10px;border:1.5px solid #000;border-radius:14px;background:#fff;box-shadow:var(--ex-shadow)}
/* The track exists so the quote can be positioned against the five steps and nothing else. The
   mark was tried as a sixth <li> and every .bb-layer__steps li rule outranked it; a wrapper is
   also the only place the stop positions can live, because they are read off the grid. The five
   stops are the exact centres of a repeat(5,1fr) grid with a 10px gap:
   centre(i) = (W - 40) * (2i+1)/10 + 10i. Change the gap and change these too. The band's 38px of
   top padding is what the rail and the mark sit in: the rail is 17px above the track, the mark is
   about 27px tall and centred on it, so it clears the band's top border by 7px and the step cards
   by 3px. Measured, not eyeballed. */
.bb-layer__track{position:relative;flex:1;--x0:calc((100% - 40px) * .1);--x1:calc((100% - 40px) * .3 + 10px);--x2:calc((100% - 40px) * .5 + 20px);--x3:calc((100% - 40px) * .7 + 30px);--x4:calc((100% - 40px) * .9 + 40px)}
.bb-layer__track::before{content:"";position:absolute;left:0;right:0;top:-17px;height:1.5px;background:repeating-linear-gradient(to right,rgba(0,0,0,.28) 0 6px,transparent 6px 12px)}
.bb-layer__mark{position:absolute;z-index:3;left:var(--x4);top:-17px;transform:translate(-50%,-50%);padding:5px 11px;border:1.5px solid #000;border-radius:999px;background:var(--blue);color:#fff;font:500 12px/1.2 "Neue Montreal",system-ui,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap;box-shadow:3px 3px 0 -1px rgba(0,0,0,.08)}
/* The bead on each connector. It rests at the system end, which reads as a live wire, and rides
   up the connector on the step that needs that system. */
.bb-layer__pull{position:absolute;z-index:2;left:50%;top:-6px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;background:var(--blue);border:1.5px solid #000}
/* Deliberately NOT flooded: the section says thin four times, and a saturated band twice the
   height of the systems under it argues against its own headline. Green stays on the small chips
   that say who does what. */
.bb-page .bb-layer__band{background:#fff}
.bb-layer__name{flex:none;max-width:104px;font:500 12px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.bb-layer__steps{flex:1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.bb-layer__steps li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 8px 8px;border:1.5px solid #000;border-radius:11px;background:#fdfcf8;font:500 13.5px/1.25 "Neue Montreal",system-ui,sans-serif;text-align:center}
.bb-layer__who{display:inline-flex;align-items:center;gap:5px;padding:3px 9px 3px 4px;border:1.5px solid #000;border-radius:999px;background:#fff;font:500 11px/1.2 "Neue Montreal",system-ui,sans-serif}
.bb-layer__who .ex-avatar{width:18px;height:18px;flex-basis:18px;border-width:1.2px}
.bb-layer__who--ai{background:var(--blue-light)}
/* .ex-avatar--ai carries content:"AI" in explainer.css, so the disc already says the word. The
   pill said it again beside it, which printed AI twice on three chips; the disc keeps the word
   and the pill carries what AI does on that step, which is what the reader needed anyway. */
.bb-layer__who--ai{padding-right:10px}
.bb-layer__who.ex-avatar--sm::after{font-size:7px}
.bb-layer__sys{list-style:none;margin:64px 0 0;padding:0 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* The connector from each system up into the band. Drawn in flow rather than measured, so it
   holds at any width and exists without JavaScript. */
.bb-layer__sys li::before{content:"";position:absolute;left:50%;top:-42px;width:1.5px;height:42px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
.bb-layer__sys li::after{content:"";position:absolute;left:50%;top:-40.34px;width:8px;height:8px;margin-left:-4px;border-left:1.5px solid rgba(0,0,0,.45);border-top:1.5px solid rgba(0,0,0,.45);transform:rotate(45deg)}
.bb-layer>figcaption:not(.ex-sr-only){margin:0 -28px;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .bb-layer .bb-layer__band{opacity:0;transform:translateY(-10px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .ex-js .bb-layer .bb-layer__steps li{opacity:0;transform:translateY(8px)}
  .ex-js .bb-layer .bb-layer__sys li::before, .ex-js .bb-layer .bb-layer__sys li::after{opacity:0;transition:opacity .6s var(--ease)}
  .bb-layer.is-seen .bb-layer__band{opacity:1;transform:none}
  .bb-layer.is-seen .bb-layer__sys li::before,.bb-layer.is-seen .bb-layer__sys li::after{opacity:1;transition-delay:calc(1.4s + var(--i) * .18s)}
  /* THE WALK. The band and the wires arrive first, then one quote for $86,000 travels the five
     steps, holding at each. 7.2s over five stops is 1.44s a stop, and the step tint, the who-pill
     lift and the three asks below are all timed off that number: step i is reached at
     2.3s + i * 1.44s. Retime the walk and retime all four. Each --t on a system in the markup is
     the arrival time of the step that needs it, so the record lights and the bead climbs the wire
     while the quote is standing there. It rests with the quote on step five and every wire
     complete, so reduced motion and no JavaScript both leave a finished picture. */
  .ex-js .bb-layer .bb-layer__mark,.ex-js .bb-layer .bb-layer__pull{opacity:0}
  .ex-js .bb-layer .bb-layer__track::before{opacity:0;transition:opacity .6s var(--ease)}
  .bb-layer.is-seen .bb-layer__track::before{opacity:1;transition-delay:1.9s}
  .bb-layer.is-seen .bb-layer__mark{animation:bb-walk 7.2s ease-in-out 2.3s both}
  .bb-layer.is-seen .bb-layer__steps li{animation:bb-seat .55s cubic-bezier(.2,.9,.3,1) calc(.6s + var(--i) * .15s) both,bb-onstep 1.3s var(--ease) calc(2.3s + var(--i) * 1.44s) both}
  .bb-layer.is-seen .bb-layer__who{animation:bb-onwho 1.3s var(--ease) calc(2.3s + var(--i) * 1.44s) both}
  .bb-layer.is-seen .bb-layer__sys .bb-sys__rec{animation:bb-asked 1.5s var(--ease) var(--t) both}
  .bb-layer.is-seen .bb-layer__pull{animation:bb-pull 1.7s var(--ease) calc(var(--t) + .25s) both}
}

/* THE FIX, PART TWO: one quote, three jobs, three screens off the same piece of software. */
.bb-screens{max-width:1080px;margin:72px auto 0;padding:28px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-screens__row{list-style:none;margin:0;padding:0 0 26px;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bb-screen{position:relative;display:flex;flex-direction:column;gap:10px;padding:0 0 16px;border:1.5px solid #000;border-radius:14px;background:#fff;box-shadow:var(--ex-shadow)}
.bb-screen::after{content:"";position:absolute;left:50%;bottom:-26px;width:1.5px;height:26px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
/* These are YOUR software's title bars and they were wearing cream, which on this page is the
   colour of a product somebody sold you. --ex-tint is the surface of the thin piece on top. */
.bb-screen__bar{display:flex;align-items:center;gap:9px;padding:11px 14px;border-bottom:1.5px solid #000;border-radius:14px 14px 0 0;background:var(--ex-tint);font:500 14px/1.2 "Neue Montreal",system-ui,sans-serif}
.bb-screen .ex-kicker{padding:0 16px}
.bb-screen__rows{list-style:none;margin:0;padding:0 16px;display:grid;gap:8px}
.bb-screen__rows li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border:1.5px solid #000;border-radius:10px;background:#fdfcf8;font:500 13.5px/1.3 "Neue Montreal",system-ui,sans-serif}
.bb-screen__rows li:not(.is-hero){border-style:dashed;border-color:rgba(0,0,0,.35);color:var(--muted);font-weight:400}
.bb-screen__mute{font-size:12.5px;color:var(--muted);white-space:nowrap}
.bb-val{padding:3px 10px;border:1.5px solid #000;border-radius:999px;background:var(--yellow);font-variant-numeric:tabular-nums;white-space:nowrap}
.bb-screen__act{align-self:flex-start;margin:2px 16px 0;padding:5px 12px;border:1.5px dashed rgba(0,0,0,.4);border-radius:6px;background:transparent;font:500 11.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.bb-screens__spine{margin:26px 0 24px;padding:12px 18px;border:1.5px solid #000;border-radius:999px;background:var(--yellow);text-align:center;font:500 14px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-screens>figcaption:not(.ex-sr-only){margin:0 -28px;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 16px 16px}
@media(prefers-reduced-motion:no-preference){
  .ex-js .bb-screens .bb-screen{opacity:0;transform:translateY(12px)}
  .ex-js .bb-screens .bb-val{opacity:0;transform:translateY(5px)}
  .bb-screens.is-seen .bb-screen{animation:ex-arrive .55s var(--ease) calc(var(--i) * .16s) both}
  .ex-js .bb-screens .bb-screens__spine{box-shadow:none}
  .bb-screens.is-seen .bb-val{animation:bb-land .5s cubic-bezier(.2,1.05,.3,1) 1s both}
  .bb-screens.is-seen .bb-screens__spine{animation:bb-pulse .5s var(--ease) .75s both}
}

@media(prefers-reduced-motion:no-preference){
}

/* WHERE AI PLUGS IN: one step from the band, wired the way the job needs it. The positive half of
   the AI beat, and the pair to the corners figure above it: there the AI sat where the vendor put
   it and saw one product; here it sits on the step the job needs, reads three named facts out of
   two systems, writes one draft, and hands anything over the limit to a person. It is the band's
   "2 Price it" card enlarged, so the layer figure that follows reads as this step with four beside
   it. Colour grammar holds: the facts come out of bought systems, so their chips are cream; the
   step is the work you own, ink on the card fill; the draft is the money chip's yellow; the person
   is the pink avatar the band uses for approve. Dashed = an input, solid with a head = an output.
   Geometry is a grid with three fixed 72px rows, so the two wire drawings are fixed 72 by 216
   SVGs whose paths are written against the row centres (36, 108, 180) and cannot drift. Below 900
   the wires hide and the five objects stack in reading order: facts, step, draft, rule. */
.bb-plug{position:relative;max-width:1080px;margin:72px auto 0;padding:58px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-plug__tag{top:18px;left:28px;background:var(--cream)}
.bb-plug__stage{display:grid;grid-template-columns:minmax(220px,300px) 72px 196px 72px minmax(220px,1fr);grid-template-rows:repeat(3,72px);align-items:center;padding:4px 0 30px}
.bb-plug__in,.bb-plug__out{display:contents}
.bb-plug__in li,.bb-plug__out li{list-style:none;margin:0}
.bb-plug__in li{grid-column:1;justify-self:end;display:flex;flex-direction:column;gap:2px;width:100%;max-width:260px;padding:9px 14px 10px;box-sizing:border-box;border:1.5px solid #000;border-radius:10px;background:var(--cream)}
.bb-plug__in li:nth-child(1){grid-row:1}.bb-plug__in li:nth-child(2){grid-row:2}.bb-plug__in li:nth-child(3){grid-row:3}
.bb-plug__in b{font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-plug__in small{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.3;color:var(--muted)}
/* The three grey dots of a bought system's title bar, at chip scale, so the chip says where the fact lives without a logo. */
.bb-plug__in small::before{content:"";width:4px;height:4px;border-radius:50%;background:#8a8a8a;box-shadow:6px 0 0 #8a8a8a,12px 0 0 #8a8a8a;margin-right:10px}
.bb-plug__wires{grid-row:1/4;display:block;width:72px;height:216px}
.bb-plug__wires--in{grid-column:2}
.bb-plug__wires--out{grid-column:4}
.bb-plug__wire{stroke:rgba(0,0,0,.45);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.bb-plug__wire--in{stroke-dasharray:4 5}
.bb-plug__wire--out{stroke:#000;stroke-dasharray:1;stroke-dashoffset:0}
.bb-plug__head{fill:none;stroke:#000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bb-plug__dot{fill:var(--blue);stroke:#000;stroke-width:1.5;offset-distance:0%;offset-rotate:0deg}
.bb-plug__step{grid-column:3;grid-row:1/4;align-self:center;display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 14px 16px;border:1.5px solid #000;border-radius:14px;background:#fdfcf8;box-shadow:var(--ex-shadow);font:500 18px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;text-align:center}
.bb-plug__step .bb-step__n{width:26px;height:26px;margin-bottom:0;font-size:12px}
.bb-plug__step .bb-layer__who{margin-top:2px}
.bb-plug__out li{grid-column:5;justify-self:start;display:flex;align-items:center;gap:10px;max-width:280px;padding:9px 14px;border:1.5px solid #000;border-radius:10px;background:#fff}
.bb-plug__draft{grid-row:1;background:var(--yellow)}
.bb-plug__draft b{font:500 17px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bb-plug__draft small{font-size:12px;color:#6b5a00}
.bb-plug__rule{grid-row:2}
.bb-plug__rule>span:last-child{display:flex;flex-direction:column;gap:1px}
.bb-plug__rule b{font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-plug__rule small{font-size:11.5px;line-height:1.3;color:var(--muted)}
.bb-plug__rule .ex-avatar{flex:0 0 26px}
.bb-plug>figcaption:not(.ex-sr-only){margin:0 -28px;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 16px 16px}

/* OVER TIME: the same list, shipping. The mirror of the request list above: same frame, same three
   rows in the same words and order, but the bars are the thin piece's blue and measured in weeks,
   and the slot that was an empty dashed date on every row is a filled release pill. Shipped order
   differs from asked order, which is the point. Numbers are the approved ones: six weeks between
   releases, three releases in four months (weeks 6, 12, 17). The memo-versus-release figure this
   replaces (2026-09-22) argued process change, which is rule 02's job; its one surviving line is
   the punch. */
.bb-ship{max-width:1080px;margin:72px auto 0;padding:26px 28px 0;background:var(--ex-card);border:1.5px solid #000;border-radius:16px;box-shadow:var(--ex-shadow)}
.bb-ship__cols,.bb-ship__list li{display:grid;grid-template-columns:minmax(0,1fr) 300px 118px;align-items:center;gap:20px}
.bb-ship__cols{padding:0 0 12px;font:500 10.5px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.bb-ship__list{list-style:none;margin:0;padding:0}
.bb-ship__list li{padding:16px 0;border-top:1.5px solid var(--line)}
.bb-ship__list b{font:500 16px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.01em}
.bb-ship__bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.bb-ship__bar i{display:block;height:12px;border:1.5px solid #000;border-radius:999px;background:#fff;overflow:hidden;position:relative}
.bb-ship__bar i::after{content:"";position:absolute;inset:0;width:var(--w);background:var(--blue-light);border-radius:999px}
.bb-ship__bar em{font:500 13px/1.2 "Neue Montreal",system-ui,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted)}
.bb-ship__bar em:last-child{color:#2a4a80}
.bb-ship__pill{display:inline-block;justify-self:start;padding:4px 11px;border:1.5px solid #000;border-radius:999px;background:var(--blue-deep);color:#fff;font:500 10.5px/1.3 "Neue Montreal",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.bb-ship>figcaption:not(.ex-sr-only){margin:24px -28px 0;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 16px 16px}

/* The request list's third column: the date the vendor gave, and it is an empty dashed slot on
   every row, the series' not-yet-placed vocabulary. The shipping figure fills the same slot. */
.bb-ask__date{display:block;justify-self:start;width:104px;height:26px;box-sizing:border-box;border:1.5px dashed #8a8a8a;border-radius:999px}

/* NEXT STEP: the drawing rests finished and then keeps one quiet loop, the way the other
   three explainers close. A mark travels the band once every 7.4s and the AI chip breathes.
   Nothing here has a base state that hides anything, so reduced motion leaves the finished
   picture and the mark simply parks where it starts. */
.bb-cta__art .bb-cta__chip{transform-box:fill-box;transform-origin:center}
/* Hidden at rest, as on /multiplayer-ai: a travelling mark parked at one end of the band
   reads as an artifact rather than as a job, so reduced motion simply leaves it off. */
.bb-cta__rider{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .bb-cta__art.is-seen .bb-cta__rider{animation:bb-cta-ride 7.4s cubic-bezier(.45,0,.55,1) 1.4s infinite backwards}
  .bb-cta__art.is-seen .bb-cta__chip{animation:ex-breathe 4.5s ease-in-out 1.4s infinite backwards}
}
@keyframes bb-cta-ride{0%{transform:translateX(0);opacity:0}8%{opacity:1}88%{opacity:1}100%{transform:translateX(348px);opacity:0}}
@keyframes bb-loose{from{opacity:0;transform:translateY(-16px) rotate(var(--r,0deg))}to{opacity:1}}
@keyframes bb-gap-trace{to{stroke-dashoffset:-20}}
@keyframes bb-knock{0%,100%{translate:0}45%{translate:-7px}70%{translate:2px}}
@keyframes bb-ask{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes bb-seat{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes bb-land{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
/* Rests on the spine's own yellow and sweeps to white, not the other way round. This runs with
   fill both, so at 0% and 100% it was painting #fff over a yellow base: a reader who saw the
   motion got a white spine and a reader on reduced motion got a yellow one. */
@keyframes bb-pulse{0%,100%{background:var(--yellow)}45%{background:#fff}}
@keyframes bb-stamp{from{opacity:0;transform:translateY(-6px) scale(1.12)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:no-preference){
  /* Where AI plugs in: the three facts arrive, a bead leaves each one and travels its wire into the
     step (the wire itself fades up under it, since a dashed line cannot be drawn with a dash trick),
     the AI disc breathes once as the third lands, then the draft wire draws solid and its chip lands,
     then the route to the person. Beads rest at the fact end, which reads as a live wire, and fade
     as they arrive so the return to rest is not a snap. Reduced motion shows the finished drawing. */
  .ex-js .bb-plug .bb-plug__in li,.ex-js .bb-plug .bb-plug__out li{opacity:0}
  .ex-js .bb-plug .bb-plug__wire--in{opacity:0}
  .ex-js .bb-plug .bb-plug__wire--out{stroke-dashoffset:1}
  .ex-js .bb-plug .bb-plug__head{opacity:0}
  .bb-plug.is-seen .bb-plug__in li{animation:ex-arrive .45s var(--ease) calc(.2s + var(--i) * .25s) both}
  .bb-plug.is-seen .bb-plug__wire--in{animation:bb-plug-fade .4s var(--ease) calc(.5s + var(--i) * .6s) both}
  .bb-plug.is-seen .bb-plug__dot{animation:bb-plug-ride 1s cubic-bezier(.45,0,.35,1) calc(.6s + var(--i) * .6s) backwards}
  .bb-plug.is-seen .bb-plug__step .ex-avatar--ai{animation:ex-breathe 1.1s ease-in-out 2.6s 1}
  .bb-plug.is-seen .bb-plug__wire--out{animation:bb-plug-draw .6s var(--ease) calc(3s + var(--i) * .7s) both}
  .bb-plug.is-seen .bb-plug__head{animation:bb-plug-fade .3s var(--ease) calc(3.5s + var(--i) * .7s) both}
  .bb-plug.is-seen .bb-plug__out li{animation:ex-arrive .45s var(--ease) calc(3.5s + var(--i) * .7s) both}
  /* The shipping list runs the request list's own sequence, then stamps a release where the empty
     date slot was. */
  .ex-js .bb-ship .bb-ship__bar i::after{width:0;transition:width 1.1s var(--ease)}
  .bb-ship.is-seen .bb-ship__bar i::after{width:var(--w);transition-delay:calc(.3s + var(--i) * .25s)}
  .ex-js .bb-ship .bb-ship__bar em:last-child{opacity:0;transition:opacity .5s var(--ease)}
  .bb-ship.is-seen .bb-ship__bar em:last-child{opacity:1;transition-delay:calc(1.2s + var(--i) * .25s)}
  .ex-js .bb-ship .bb-ship__pill{opacity:0}
  .bb-ship.is-seen .bb-ship__pill{animation:bb-stamp .45s cubic-bezier(.2,1.15,.3,1) calc(1.5s + var(--i) * .25s) both}
}
@keyframes bb-plug-fade{from{opacity:0}to{opacity:1}}
@keyframes bb-plug-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bb-plug-ride{0%{offset-distance:0%;opacity:1}82%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes bb-set{from{background:#fff}to{background:var(--green-bg)}}
@keyframes bb-flick{from{transform:none}to{transform:translateX(13px)}}
@keyframes bb-walk{0%{left:var(--x0);opacity:0}5%{opacity:1}14%{left:var(--x0)}20%,34%{left:var(--x1)}40%,54%{left:var(--x2)}60%,74%{left:var(--x3)}80%,100%{left:var(--x4);opacity:1}}
@keyframes bb-onstep{0%,100%{background:#fdfcf8}26%,66%{background:var(--ex-tint)}}
@keyframes bb-onwho{0%,100%{transform:none;box-shadow:none}30%,64%{transform:translateY(-3px);box-shadow:0 3px 0 -1px rgba(0,0,0,.22)}}
@keyframes bb-asked{0%,100%{background:#fff}18%,58%{background:var(--yellow)}}
@keyframes bb-pull{0%{top:-6px;opacity:0}10%{opacity:1}40%,68%{top:-34px;opacity:1}96%,100%{top:-6px;opacity:1}}

/* RESPONSIVE */
@media(max-width:1100px){
  .bb-gap__stage{aspect-ratio:auto;display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
  .bb-gap__piece,.bb-gap__hole{position:static;width:auto;height:auto;container-type:normal}
  /* The argument of this figure is the interlock: the gap is exactly the shape the two bought
     pieces leave. The stacked layout used to delete both puzzle shapes and the gap outline, which
     left a 1024 laptop and every phone looking at two yellow blocks and a dashed box with no
     metaphor in them at all. The tab and bite are rebuilt here in px on the facing edges, so they
     hold at any width and need no second breakpoint. */
  .bb-gap__shape,.bb-gap__outline{display:none}
  .bb-gap__sys,.bb-gap__piece--left .bb-gap__sys,.bb-gap__piece--right .bb-gap__sys{position:relative;left:auto;top:auto;width:auto;background:var(--yellow);border-color:#000;border-width:1.5px}
  .bb-gap__piece--left .bb-gap__sys::after,.bb-gap__piece--right .bb-gap__sys::after{content:"";position:absolute;left:50%;width:34px;height:17px;margin-left:-17px;background:var(--yellow);border:1.5px solid #000}
  .bb-gap__piece--left .bb-gap__sys::after{bottom:-18.5px;border-top:0;border-radius:0 0 999px 999px}
  .bb-gap__piece--right .bb-gap__sys::after{top:-18.5px;border-bottom:0;border-radius:999px 999px 0 0}
  .bb-gap__hole{position:relative;left:auto;top:auto;width:auto;height:auto;padding:16px 14px 14px;border:1.5px dashed #8a8a8a;border-radius:14px}
  .bb-gap__hole::before,.bb-gap__hole::after{content:"";position:absolute;left:50%;width:34px;height:17px;margin-left:-17px;background:var(--cream);border:1.5px dashed #8a8a8a}
  .bb-gap__hole::before{top:-1.5px;border-top:0;border-radius:0 0 999px 999px}
  .bb-gap__hole::after{bottom:-1.5px;border-bottom:0;border-radius:999px 999px 0 0}
  .bb-gap__steps{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .bb-gap__hole .bb-step{position:static;width:auto;padding:14px 12px 12px;border-radius:12px;transform:none}
  .bb-gap__hole .bb-step__n{width:22px;height:22px;margin-bottom:7px;font-size:11px}
  .bb-gap__hole .bb-step b{font-size:14px}
  .bb-gap__hole .bb-step small{margin-top:4px;font-size:11.5px}
  .bb-gap__label{position:static;transform:none;margin:14px 0 0;text-align:center;white-space:normal}
  .bb-gap__label span{padding:7px 13px;font-size:17px;letter-spacing:-.015em}
  .bb-box{grid-template-columns:minmax(0,1fr) 220px}
  .bb-box__in{grid-template-columns:1fr;gap:16px}
  .bb-box__menu{border-left:0;border-top:1.5px dashed rgba(0,0,0,.35);padding:16px 0 0}
  .bb-asks__cols,.bb-asks__list li,.bb-ship__cols,.bb-ship__list li{grid-template-columns:minmax(0,1fr) 220px 104px;gap:14px}
  .bb-plug__stage{grid-template-columns:minmax(180px,260px) 72px 168px 72px minmax(170px,1fr)}
  .bb-plug__out li{max-width:100%;min-width:0}
  .bb-plug__rule small{white-space:normal}
  .bb-layer__steps{grid-template-columns:repeat(3,1fr)}
  /* The stop positions only hold for five equal columns, so the quote and its rail leave at the
     breakpoint that reflows the grid, and the band takes its original padding back. Everything
     else in the walk is position independent and keeps running. */
  .bb-layer__mark,.bb-layer__track::before{display:none}
  .bb-layer__band{flex-direction:column;align-items:stretch;gap:12px;padding:10px 18px}
  .bb-layer__name{max-width:none}
}
@media(max-width:900px){
  .bb-gap{margin-top:32px;padding:52px 18px 0}
  .bb-gap__tag{left:50%}
  .bb-gap>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .bb-box{grid-template-columns:1fr;margin-top:48px;padding:18px 18px 0;gap:18px}
  .bb-box>figcaption:not(.ex-sr-only){margin:18px -18px 0;padding:12px 18px 14px}
  .bb-count{margin-top:48px;padding:52px 18px 0}
  .bb-count__tag{left:18px}
  .bb-count__row{grid-template-columns:minmax(0,1fr);gap:12px}
  .bb-count__gap{margin:16px 0 14px}
  .bb-count__when b{font-size:23px}
  .bb-count__months{gap:3px}
  .bb-count__months i{height:26px;border-radius:2px}
  .bb-count__label{font-size:14px}
  .bb-count__rail i:nth-child(even):not(:last-child){display:none}
  .bb-count__note{font-size:13.5px;max-width:none}
  .bb-count>figcaption:not(.ex-sr-only){margin:20px -18px 0;padding:12px 18px 14px}
  .bb-plug{margin-top:48px;padding:52px 18px 0}
  .bb-plug__tag{left:18px}
  .bb-plug__stage{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px;padding:0 0 22px}
  .bb-plug__wires{display:none}
  .bb-plug__in li,.bb-plug__out li,.bb-plug__step{grid-column:1;grid-row:auto;justify-self:stretch;max-width:none}
  .bb-plug__in li:nth-child(1),.bb-plug__in li:nth-child(2),.bb-plug__in li:nth-child(3),.bb-plug__draft,.bb-plug__rule{grid-row:auto}
  .bb-plug__step{margin:10px 0}
  .bb-plug>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .bb-ship{margin-top:48px;padding:18px 18px 0}
  .bb-ship__cols{display:none}
  .bb-ship__list li{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:16px 0}
  .bb-ship__list b{grid-column:1/-1}
  .bb-ship>figcaption:not(.ex-sr-only){margin:20px -18px 0;padding:12px 18px 14px}
  .bb-asks{margin-top:48px;padding:18px 18px 0}
  .bb-asks__cols{display:none}
  .bb-asks__list li{grid-template-columns:minmax(0,1fr);row-gap:10px;padding:16px 0}
  .bb-asks__list b{grid-column:1/-1}
  .bb-ask__bar{grid-column:1/-1}
  .bb-asks>figcaption:not(.ex-sr-only){margin:20px -18px 0;padding:12px 18px 14px}
  .bb-corners{margin-top:48px;padding:18px 18px 0}
  .bb-corners__row{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:34px}
  .bb-corners>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .bb-layer{margin-top:48px;padding:52px 18px 0}
  .bb-layer__tag{left:18px}
  .bb-layer__steps{grid-template-columns:1fr 1fr}
  /* Stacked, one connector from the band into the list, never one between two systems. */
  .bb-layer__sys{position:relative;grid-template-columns:1fr;max-width:420px;margin:56px auto 0;gap:14px}
  .bb-layer__sys li::before,.bb-layer__sys li::after,.bb-layer__pull{display:none}
  .bb-layer__sys::before{content:"";position:absolute;left:50%;top:-42px;width:1.5px;height:42px;margin-left:-.75px;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.45) 0 4px,transparent 4px 9px)}
  .bb-layer__sys::after{content:"";position:absolute;left:50%;top:-40.34px;width:8px;height:8px;margin-left:-4px;border-left:1.5px solid rgba(0,0,0,.45);border-top:1.5px solid rgba(0,0,0,.45);transform:rotate(45deg)}
  .bb-layer>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
  .bb-screens{margin-top:48px;padding:18px 18px 0}
  .bb-screens__row{grid-template-columns:1fr;max-width:420px;margin:0 auto;gap:34px}
  .bb-screen::after{display:none}
  .bb-screens>figcaption:not(.ex-sr-only){margin:0 -18px;padding:12px 18px 14px}
}
@media(max-width:560px){
  /* The step cards stay two across on a phone: one column made the hero five screens long. */
  .bb-step{padding:12px 8px 10px}
  .bb-step b{font-size:13px}
  .bb-step small{font-size:11px}
  .bb-corners__q{font-size:15.5px}
}