/* The AI explainer hub (explainers.html): the one page that holds the whole series.
   Loads after explainer.css and uses its shell (hero, section heads, CTA, avatars, reveal).
   Page classes carry the hb- prefix; the body is .hb-page, so no component is ever called that.

   COLOUR GRAMMAR, 2026-09-23
   Yellow is a term as it was heard: the highlighter on the transcript and the highlighter on the
   note's term are the same yellow, so the eye joins them without a line. The note itself is white
   (2026-09-23): a yellow card read as a flood, and yellow is the accent, not the surface.
   Blue does the three jobs it does on /agents: the AI, order and progress (the group numbers, the
   reading window), and the one link colour.
   State, where something is happening: now is #f4f8ff with a 3px blue bar on the left; pending
   sits at .35 and brightens; flagged is #fff4f1 with a salmon bar; done is #f3fbef.
   The running object is one week of hearing the words: six lines, six places, from a board
   meeting on Monday to a LinkedIn post on Sunday. */

.hb-page{--hb-now:#f4f8ff;--hb-mono:ui-monospace,SFMono-Regular,Menlo,monospace}
/* The shared hero ends flush (.ex-hero has no bottom padding) because on every explainer the next
   section opens on white space. Here the next section is the cream band, ruled on top, so without
   this the call's frame and its shadow sat on the rule. Same 112px as a section (80px on phones),
   so the rule has the air every other divider on the series has. */
.hb-hero{padding-bottom:112px}
@media (max-width:900px){.hb-hero{padding-bottom:80px}}

/* ------------------------------------------------------------------ 01 The call, annotated
   A window with a title bar and a live pill, six transcript lines on the left, and the note on
   the right. Every line is a button: the tour walks them while the figure is on screen, and the
   first click hands control to the reader for good. Base style is the finished frame: every line
   said, every term marked, and (without JS) every note in a list. */
.hb-call{width:100%;max-width:1080px;margin:44px 0 0;background:#fff;border:1.5px solid #000;border-radius:18px;box-shadow:var(--ex-shadow);overflow:hidden;text-align:left}
.hb-call__bar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#fdfcf8;border-bottom:1.5px solid #000}
.hb-call__dots{display:flex;gap:6px}
.hb-call__dots i{width:10px;height:10px;border:1.5px solid #000;border-radius:50%;background:#fff}
.hb-call__title{font:500 14.5px/1.2 "Neue Montreal",system-ui,sans-serif}
.hb-call__live{margin-left:auto;display:inline-flex;align-items:center;padding:5px 11px;border:1.2px solid #000;border-radius:999px;background:#fff;font:500 11px/1 var(--hb-mono);letter-spacing:.06em;text-transform:uppercase}
.hb-call__body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.hb-call__lines{list-style:none;margin:0;padding:14px;display:flex;flex-direction:column;gap:2px;background:#fff radial-gradient(rgba(0,0,0,.06) 1px,transparent 1.2px) 0 0/18px 18px}
.hb-line{position:relative;display:grid;grid-template-columns:70px minmax(0,1fr);gap:12px;width:100%;padding:12px 14px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer;color:#000;font:400 16.5px/1.45 "Neue Montreal",system-ui,sans-serif;transition:background-color .35s var(--ease),box-shadow .35s var(--ease),opacity .45s var(--ease)}
.hb-line:hover{background-color:#f7f4e8}
.hb-line__t{padding-top:2px;font:500 11px/1.3 var(--hb-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.hb-line__src{display:block;margin-bottom:3px;font:500 10.5px/1.3 var(--hb-mono);letter-spacing:.06em;text-transform:uppercase;color:#333}
.hb-line mark{color:inherit;padding:0 2px;margin:0 -2px;background:linear-gradient(var(--yellow),var(--yellow)) 0 90%/100% 58% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size .9s cubic-bezier(.16,1,.3,1) .3s}
.hb-line::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--blue);transform:scaleY(0);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.hb-line.is-now{background-color:var(--hb-now)}
.hb-line.is-now::before{transform:none}
.hb-call.is-touring .hb-line{opacity:.35;transition:background-color .45s var(--ease),opacity .7s var(--ease)}
/* Only the tour hides the highlighter until a line is said; without it (no JS, reduced motion)
   every term rests marked. */
.hb-call.is-touring .hb-line mark{background-size:0 58%}
.hb-call.is-touring .hb-line.is-said{opacity:1}
.hb-call.is-touring .hb-line.is-said mark{background-size:100% 58%}

.hb-gloss{padding:22px 22px 24px;background:#fdfcf8;border-left:1.5px solid #000;display:flex;flex-direction:column}
.hb-gloss__head{display:flex;align-items:center;gap:9px;font:500 11px/1 var(--hb-mono);letter-spacing:.06em;text-transform:uppercase;color:#333}
.hb-gloss__n{margin-left:auto;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.hb-gloss__stack{margin-top:14px;display:flex;flex-direction:column;gap:12px;flex:1}
.hb-gloss__item{padding:20px 22px 22px;background:#fff;border:1.5px solid #000;border-radius:14px;box-shadow:8px 8px 0 -2px rgba(0,0,0,.06)}
.hb-gloss__term{display:inline;padding:0 3px;margin:0 -3px;font:500 26px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.02em;background:linear-gradient(var(--yellow),var(--yellow)) 0 88%/100% 55% no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hb-gloss__item dl{margin:14px 0 0}
.hb-gloss__item dt{margin-top:14px;font:500 10.5px/1.3 var(--hb-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.hb-gloss__item dt:first-child{margin-top:0}
.hb-gloss__item dd{margin:5px 0 0;font:400 16px/1.45 "Neue Montreal",system-ui,sans-serif;color:#000;text-wrap:pretty}
.hb-gloss__item dd:last-child{font-size:15px;color:#333}
/* With the script, the six notes share one cell, so the note area is the height of the tallest
   and never jumps as they change. Without it they stay a list and every note is readable. */
.hb-call.is-js .hb-gloss__stack{display:grid;align-items:start}
.hb-call.is-js .hb-gloss__item{grid-area:1/1;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .35s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.hb-call.is-js .hb-gloss__item.is-on{visibility:visible;opacity:1;transform:none;transition:opacity .6s var(--ease) .18s,transform .8s cubic-bezier(.16,1,.3,1) .18s,visibility 0s}
/* Entering, the note rises from a little below and its term's highlighter sweeps after the line's
   has, so the two marks read as one gesture. */
.hb-call.is-touring .hb-gloss__item .hb-gloss__term{background-size:0 55%;transition:background-size .9s cubic-bezier(.16,1,.3,1) .7s}
.hb-call.is-touring .hb-gloss__item.is-on .hb-gloss__term{background-size:100% 55%}
.hb-gloss__prog{display:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:12px}
.hb-call.is-touring .hb-gloss__prog{display:grid}
.hb-gloss__prog i{position:relative;height:3px;border-radius:2px;background:rgba(0,0,0,.1);overflow:hidden}
.hb-gloss__prog i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--blue);transform:scaleX(0);transform-origin:left center}
.hb-gloss__prog i.is-done::after{transform:none}
.hb-gloss__prog i.is-run::after{animation:hb-prog var(--d,6200ms) linear forwards}
@keyframes hb-prog{to{transform:none}}
.hb-call:not(.is-js) .hb-gloss__n{display:none}
.hb-call:not(.is-js) .hb-call__body{grid-template-columns:1fr}
.hb-call:not(.is-js) .hb-gloss{border-left:0;border-top:1.5px solid #000}
.hb-call:not(.is-js) .hb-gloss__stack{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.hb-call>figcaption{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}

/* --------------------------------------------------------------------- 02 Where to start
   The index (Justin's pick of three concepts, 2026-09-23). The cards it replaced led with a quoted
   question and an abstract drawing, kept the topic's name in a small pill, and sat four frames
   deep, so nobody could tell which card was which. Now the term is the biggest thing in each row,
   then one plain sentence, then the question it answers. Colour and an icon give each term its
   identity: the tile wears the term's colour (the same colour as its thumbnail on /resources), and
   the row takes a wash of it on hover while the tile leans and the arrow fills. No frames. */
.hb-start{background:var(--cream);border-top:1.5px solid #000;border-bottom:1.5px solid #000}
.hb-toc{max-width:1040px;margin:56px auto 0;text-align:left}
.hb-toc__g+.hb-toc__g{margin-top:48px}
.hb-toc__gh{display:flex;align-items:baseline;gap:14px;padding:0 8px 12px;border-bottom:1.5px solid #000}
.hb-toc__gh span{font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:var(--blue)}
.hb-toc__gh h3{margin:0;font:500 22px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.hb-toc__gh em{margin-left:auto;font-style:normal;font-size:14.5px;color:var(--muted)}
.hb-toc__rows{list-style:none;margin:0;padding:0}
.hb-toc__rows li{border-bottom:1px solid rgba(0,0,0,.14)}
.hb-row{display:grid;grid-template-columns:60px minmax(0,1.2fr) minmax(0,1fr) 44px;gap:10px 32px;align-items:center;padding:24px 8px;border-radius:14px;color:inherit;text-decoration:none;transition:background-color .25s var(--ease)}
.hb-row:hover,.hb-row:focus-visible{background:color-mix(in srgb,var(--c) 38%,transparent)}
.hb-row:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.hb-row__ic{display:grid;place-items:center;width:56px;height:56px;border:1.5px solid #000;border-radius:14px;background:var(--c);box-shadow:4px 4px 0 -1px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.hb-row__ic svg{width:28px;height:28px}
.hb-row:hover .hb-row__ic{transform:rotate(-6deg)}
/* The term is a small label so people learn the word; the headline says what the page is about. */
.hb-row__head{display:flex;flex-direction:column;gap:7px;min-width:0}
.hb-row__term{font:500 11.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.07em;text-transform:uppercase;color:#333}
.hb-row__name{font:500 24px/1.2 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.018em;text-wrap:balance}
.hb-row__what{font-size:16px;line-height:1.5;color:#333;text-wrap:pretty}
.hb-row__go{display:grid;place-items:center;width:44px;height:44px;border:1.5px solid #000;border-radius:50%;background:#fff;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.hb-row__go svg{width:18px;height:18px}
.hb-row:hover .hb-row__go{background:var(--c);transform:translateX(3px)}

/* ------------------------------------------------------------------ 03 How each page works
   A page drawn as a tall sheet in five parts, next to what each part gives you. The two columns
   share one set of rows (subgrid), so each part of the sheet sits level with its line of copy
   without anything being measured; the reading window is the only thing the script places. */
.hb-map{max-width:1080px;margin:64px auto 0;padding:34px 36px 34px 34px;background:#fff;border:1.5px solid #000;border-radius:24px;box-shadow:16px 16px 0 -2px rgba(0,0,0,.06)}
.hb-map__grid{display:grid;grid-template-columns:290px minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:48px}
.hb-map__page{grid-column:1;grid-row:1/span 5;display:grid;grid-template-rows:subgrid;position:relative;background:#fdfcf8 radial-gradient(rgba(0,0,0,.06) 1px,transparent 1.2px) 0 0/14px 14px;border:1.5px solid #000;border-radius:14px}
.hb-map__chrome{display:flex;gap:5px;margin-bottom:10px}
.hb-map__chrome i{width:7px;height:7px;border:1.2px solid #000;border-radius:50%;background:#fff}
.hb-map__seg{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:14px 18px}
.hb-map__seg+.hb-map__seg{border-top:1px solid rgba(0,0,0,.12)}
.hb-map__seg--1{justify-content:flex-start}
.hb-sk{display:block;width:var(--w,60%);height:6px;border-radius:3px;background:#b9b9b9}
.hb-sk--h{height:9px;background:#333}
.hb-map__halves{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.hb-map__halves i{height:34px;border:1.2px solid #000;border-radius:7px;background:#fff}
.hb-map__halves i+i{background:var(--cream)}
.hb-map__win{display:flex;flex-direction:column;gap:4px;margin-top:4px;padding:6px;border:1.2px solid #000;border-radius:7px;background:#fff}
.hb-map__win i{height:11px;border-radius:3px;background:#f7f4e8}
.hb-map__win i.is-ai{background:var(--blue-light)}
.hb-map__cards{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:4px}
.hb-map__cards i{height:20px;border:1.2px solid #000;border-radius:6px;background:#fff}
.hb-map__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:4px}
.hb-map__steps i{height:18px;border:1.2px solid #000;border-radius:6px;background:#fff}
.hb-map__prompt{display:flex;align-items:center;gap:8px;margin-top:6px;padding:5px 6px 5px 8px;border:1.2px solid #000;border-radius:7px;background:#fff}
.hb-map__prompt i{flex:1;height:6px;border-radius:3px;background:#b9b9b9}
.hb-map__prompt b{width:30px;height:12px;border-radius:999px;background:var(--blue)}
.hb-map__view{display:none;position:absolute;left:-7px;right:-7px;top:0;height:0;border:1.5px solid var(--blue);border-radius:12px;background:rgba(57,122,231,.05);pointer-events:none;transition:transform .95s cubic-bezier(.65,0,.35,1),height .95s cubic-bezier(.65,0,.35,1)}
.hb-map.is-running .hb-map__view{display:block}
.hb-map__stops{grid-column:2;grid-row:1/span 5;display:grid;grid-template-rows:subgrid;list-style:none;margin:0;padding:0}
.hb-map__stops li{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:18px;align-content:center;padding:20px 18px;transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.hb-map__stops li+li{border-top:1px solid rgba(0,0,0,.12)}
.hb-map__stops li.is-now{background:var(--hb-now);box-shadow:inset 3px 0 0 var(--blue)}
.hb-map__min{grid-row:1/span 2;padding-top:6px;font:500 11px/1.3 var(--hb-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.hb-map__stops h3{margin:0;font:500 21px/1.25 "Neue Montreal",system-ui,sans-serif;letter-spacing:-.015em}
.hb-map__stops p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted);text-wrap:pretty}

/* ------------------------------------------------------------------------ 04 The closing drawing
   The series' rail-and-tiles drawing, copied as built with its motion, so the hub closes the way
   every page in it does. */
.hb-cta__art .ex-cta__tile{fill:var(--ex-tint);stroke:#000;transition:fill .6s var(--ease) .5s}
.hb-cta__art .ex-cta__chip,.hb-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 .hb-cta__art .ex-cta__rider{opacity:0}
@media(prefers-reduced-motion:no-preference){
  .ex-js .hb-cta__art:not(.is-seen) .ex-cta__tile{fill:#fff}
  .ex-js .hb-cta__art:not(.is-seen) .ex-cta__chip{transform:translateY(-30px) scale(.7);opacity:.35}
  .ex-js .hb-cta__art:not(.is-seen) .ex-cta__cursor{transform:translate(26px,-30px);opacity:.35}
  .hb-cta__art.is-seen .ex-cta__rider{animation:ex-cta-ride 7s cubic-bezier(.45,0,.55,1) 1.4s infinite}
  .hb-cta__art.is-seen .ex-cta__chip{animation:ex-breathe 4.5s ease-in-out 1.4s infinite}
  .hb-cta__art.is-seen .ex-cta__cursor{animation:ex-cta-nudge 7s ease-in-out 1.4s infinite}
}
@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 reveal: card grids rise from .35, never from invisible. */
.hb-page.ex-js [data-ex-reveal]:not(.is-seen)>*{opacity:.35;transform:translateY(10px)}
@media(prefers-reduced-motion:no-preference){
  .hb-page.ex-js [data-ex-reveal].is-seen>*{animation:hb-rise .5s var(--ease) calc(var(--i,0) * .11s) both}
}
@keyframes hb-rise{from{opacity:.35;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------------------------------ SMALLER */
@media (max-width:1100px){
  .hb-map__grid{grid-template-columns:230px minmax(0,1fr);column-gap:32px}
}
@media (max-width:860px){
  .hb-row{grid-template-columns:52px minmax(0,1fr) 40px;gap:8px 18px;padding:20px 6px}
  .hb-row__ic{width:50px;height:50px}
  .hb-row__name{font-size:21px}
  .hb-row__what{grid-column:2/-1;grid-row:2;font-size:16px}
  .hb-row__go{grid-column:3;grid-row:1;width:40px;height:40px}
  .hb-toc__gh em{display:none}
  .hb-call__body{grid-template-columns:1fr}
  .hb-gloss{border-left:0;border-top:1.5px solid #000}
  .hb-map{padding:24px}
  .hb-map__grid{grid-template-columns:1fr}
  .hb-map__page{display:none}
  .hb-map__stops{grid-column:1;grid-row:auto;grid-template-rows:none}
  .hb-map__stops li{padding:18px 4px}
}
@media (max-width:640px){
  .hb-call{margin-top:32px;border-radius:16px}
  .hb-call__title{font-size:13.5px}
  .hb-call__lines{padding:8px}
  .hb-line{grid-template-columns:1fr;gap:2px;padding:11px 10px;font-size:15.5px}
  .hb-gloss{padding:18px 16px 20px}
  .hb-gloss__term{font-size:23px}
  .hb-map{margin-top:48px;border-radius:18px;padding:8px 18px}
  .hb-map__stops li{grid-template-columns:1fr;row-gap:6px}
  .hb-map__min{grid-row:auto;padding-top:0}
}