/* book-figures.css: the look of a figure in the revamped books. Inter, stone neutrals, white cards with soft double
   shadows, the book's colour for the one thing that matters, a calm colour field behind the drawing. */
.bf{margin:34px 0;--acc:#DA7756;--deep:#B8553A;--ink:#A84C2E;--t1:#fdf3ef;--t2:#fbe6de;--t3:#f6d3c5;font-family:Inter,ui-sans-serif,system-ui,sans-serif}
.bf,.bf *{box-sizing:border-box}
.bf-h{display:flex;align-items:flex-start;gap:10px;margin:0 0 12px}
.bf-n{flex:none;font-size:15.5px;font-weight:650;color:var(--ink);line-height:1.4;white-space:nowrap}
.bf-t{flex:1;font-size:15.5px;font-weight:600;color:#1C1917;line-height:1.4;letter-spacing:-.005em}
.bf-t em{font-style:normal;color:var(--ink);background:linear-gradient(transparent 62%,var(--t2) 62%);padding:0 1px}
.bf-x{flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;border:1px solid #D6D3D1;background:#fff;color:#44403C;font:550 13px Inter,sans-serif;cursor:pointer}
.bf-x:hover{background:#F5F5F4}.bf-x svg{width:14px;height:14px}
.bf-plate{position:relative;border-radius:14px;padding:22px;overflow:hidden;
  background:radial-gradient(120% 90% at 0% 0%,var(--t1) 0%,transparent 60%),radial-gradient(90% 80% at 100% 100%,var(--t1) 0%,transparent 55%),#FBFAF9;
  border:1px solid #EEECE9}
.bf-wires{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.bf figcaption{font-size:15px;line-height:1.6;color:#44403C;margin-top:12px}
.bf figcaption b{color:#1C1917;font-weight:650}

/* a card: white, hairline, soft double shadow; it holds a thing first, words second */
.bf-card{position:relative;background:#fff;border:1px solid #E7E5E4;border-radius:14px;padding:12px 12px 13px;text-align:center;
  box-shadow:0 1px 2px rgba(20,24,35,.05),0 8px 22px rgba(20,24,35,.06);display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.bf-card.hot{border-color:var(--acc);box-shadow:0 0 0 3px var(--t2),0 8px 22px rgba(20,24,35,.07)}
.bf-card.dim{background:#F7F6F4;box-shadow:none;border-style:dashed}
.bf-card.dim .bf-thing{opacity:.55;filter:grayscale(1)}
.bf-thing{width:100%;display:grid;place-items:center;height:76px;margin-bottom:6px;color:#3F3A35}
.bf-thing svg{max-height:100%;max-width:100%;width:auto;height:100%}
.bf-thing svg.iso{height:96%}
.bf-card.hot .bf-thing{color:var(--deep)}
.bf-thing.sm{height:40px;margin:0}
.bf-thing.lg{height:120px}
.bf-ct{font-size:15px;font-weight:600;color:#1C1917;line-height:1.3;max-width:100%}
.bf-card.hot .bf-ct{color:var(--ink)}
.bf-cs{font-size:14px;color:#57534E;line-height:1.35;max-width:100%}
.bf-tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);height:22px;padding:0 9px;border-radius:999px;background:#fff;border:1px solid #E7E5E4;font-size:12.5px;font-weight:650;color:var(--ink);display:inline-flex;align-items:center;white-space:nowrap;box-shadow:0 1px 2px rgba(20,24,35,.05)}
.bf-band{margin-top:20px;background:#fff;border:1px solid #E7E5E4;border-left:4px solid var(--acc);border-radius:10px;padding:12px 16px;text-align:left}
.bf-bn{font-size:15px;font-weight:600;color:#1C1917;line-height:1.45}
.bf-bl{font-size:14px;color:#57534E;margin-top:3px;line-height:1.45}
.bf-wlab{position:absolute;transform:translate(-50%,-50%);font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--t3);border-radius:999px;padding:1px 8px;white-space:nowrap;pointer-events:none}
.bf-wlab.muted{color:#78716C;border-color:#E7E5E4}

/* Figure 3.1: forces */
.bf-forces{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-areas:". top ." "left hub right" ". bottom ." "band band band";column-gap:42px;row-gap:34px;align-items:center}
.bf-forces .c-top{grid-area:top}.bf-forces .c-left{grid-area:left}.bf-forces .c-right{grid-area:right}.bf-forces .c-bottom{grid-area:bottom}.bf-forces .c-hub{grid-area:hub}
.bf-forces .bf-band{grid-area:band;margin-top:0}
.bf-forces .bf-thing{height:66px}
.bf-forces .hub .bf-thing{height:84px}
.bf-forces .hub{padding-top:14px}

/* Figure 3.2: the same three changes */
.bf-changes{display:grid;grid-template-columns:92px repeat(3,minmax(0,1fr)) 100px;column-gap:12px;row-gap:42px;align-items:stretch}
.bf-changes .bf-card{height:100%;justify-content:flex-start}
.bf-changes .change{padding-top:18px}
.bf-changes .bf-thing{height:48px;margin-bottom:4px}
.bf-changes .move .bf-thing{height:44px}
.bf-changes .bf-ct{font-size:13.5px}
.bf-changes .out{justify-content:center}
.bf-changes .out .bf-ct{font-size:13.5px}
.ch-row-h{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:650;color:#1C1917;align-self:center}
.ch-row-h .dot{width:10px;height:10px;border-radius:3px;flex:none}
.ch-out-h{font-size:13px;font-weight:600;color:#78716C;align-self:end;text-align:center;padding-bottom:4px}
.ch-axis{grid-column:1 / -1;display:grid;grid-template-columns:96px repeat(3,minmax(0,1fr)) 104px;column-gap:10px;border-top:1.5px solid #D6D3D1;padding-top:6px;margin-top:2px}
.ch-axis b,.ch-axis i{font-style:normal;text-align:center;font-size:13px;font-weight:600;color:#78716C}
.ch-axis b{color:var(--ink)}

/* Figure 3.3: lines */
.ln-wrap{position:relative}
.ln-svg{display:block;width:100%;height:auto;font-family:Inter,sans-serif}
.ln-mark{position:absolute;transform:translate(calc(-50% + var(--dx)),calc(-100% + var(--dy)));font-size:12.5px;font-weight:600;color:#44403C;background:#fff;border:1px solid #E7E5E4;border-radius:7px;padding:2px 7px;white-space:nowrap;box-shadow:0 1px 2px rgba(20,24,35,.05)}
.ln-mark.hot{color:var(--ink);border-color:var(--t3)}
.ln-mark.muted{color:#78716C}
.ln-ends{display:flex;gap:12px;margin-top:10px}
.ln-end{flex:1;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #E7E5E4;border-left:4px solid var(--c);border-radius:10px;padding:8px 12px}
.ln-end .bf-thing{width:44px;flex:none;color:#3F3A35}
.ln-end b{font-size:14.5px;font-weight:650;color:#1C1917;white-space:nowrap}
.ln-end span{font-size:13.5px;color:#57534E}

/* Figure 3.4: 500 squares */
.pc-top{display:grid;grid-template-columns:1fr 250px 1fr;gap:18px;align-items:center}
.pc-grid{display:grid;grid-template-columns:repeat(25,1fr);gap:2px}
.pc-grid i{aspect-ratio:1;border-radius:2px;background:var(--acc)}
.pc-grid i.gone{background:#D6D3D1}
.pc-legend{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12.5px;color:#57534E;margin-top:8px;flex-wrap:wrap}
.pc-legend i{width:10px;height:10px;border-radius:2px;display:inline-block;background:var(--acc)}
.pc-legend i.gone{background:#D6D3D1;margin-left:8px}
.bf-picto .then .bf-ct,.bf-picto .now .bf-ct{font-size:22px;font-weight:650;letter-spacing:-.01em}
.bf-picto .now .bf-ct{color:var(--ink)}
.bf-picto .then,.bf-picto .now{padding-top:18px}
.pc-leaders{margin-top:18px;text-align:center}
.pc-lh{font-size:13.5px;font-weight:600;color:#57534E;margin-bottom:8px}
.pc-chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pc-chip{display:inline-flex;flex-direction:column;align-items:center;background:#fff;border:1px solid #E7E5E4;border-radius:10px;padding:6px 12px;font-size:14px;font-weight:600;color:#1C1917;line-height:1.3}
.pc-chip small{font-size:12.5px;font-weight:500;color:#78716C}

/* process */
.bf-process{position:relative}
.pr-call{display:grid;grid-template-columns:repeat(var(--n),1fr);margin-bottom:16px}
.pr-call span{grid-column:calc(var(--a) + 1) / span 2;justify-self:center;font-size:14.5px;font-weight:650;color:var(--ink);background:#fff;border:1px solid var(--t3);border-radius:999px;padding:5px 12px;text-align:center}
.pr-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:22px}
.pr-step{display:flex;flex-direction:column;align-items:center;text-align:center}
.pr-step .bf-card{width:100%;padding:10px 6px}
.pr-step .bf-thing{height:70px;margin:0}
.pr-n{margin-top:10px;width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid #D6D3D1;font-size:12.5px;font-weight:700;color:#57534E;display:grid;place-items:center}
.pr-step.hot .pr-n{background:var(--deep);border-color:var(--deep);color:#fff}
.pr-t{margin-top:6px;font-size:14px;font-weight:600;color:#1C1917;line-height:1.3}
.pr-step.hot .pr-t{color:var(--ink)}
.pr-seller{display:grid;grid-template-columns:repeat(var(--n),1fr);margin-top:12px}
.pr-seller span{grid-column:calc(var(--a) + 1) / -1;border-top:2px solid var(--acc);padding-top:6px;font-size:13.5px;font-weight:600;color:var(--ink);text-align:center}

/* cycle */
.bf-cycle{display:grid;grid-template-columns:1fr 150px 1fr;grid-template-areas:". a ." "b c d" "band band band";gap:30px 26px;align-items:center}
.bf-cycle .bf-band{margin-top:30px!important}
.bf-cycle .cy-a{grid-area:a}.bf-cycle .cy-b{grid-area:b}.bf-cycle .cy-c{grid-area:c}.bf-cycle .cy-d{grid-area:d}.bf-cycle .bf-band{grid-area:band;margin-top:0}
.cy-a .bf-card,.cy-b .bf-card,.cy-d .bf-card{max-width:190px;margin:0 auto}
.cy-c span{display:grid;place-items:center;width:112px;height:112px;margin:0 auto;border-radius:50%;background:#fff;border:1.5px dashed var(--acc);font-size:15px;font-weight:650;color:var(--ink);text-align:center;padding:10px}
.bf-cycle .bf-thing{height:78px}

/* positioning */
.ps-cols{display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:stretch}
.ps-card{height:100%;padding:20px 16px 16px}
.ps-card .bf-thing{height:96px}
.ps-quote{margin-top:12px;width:100%;background:var(--t1);border:1px solid var(--t3);border-radius:10px;padding:12px 12px;font-size:16px;font-weight:650;line-height:1.35;color:var(--ink)}
.ps-chips{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.ps-bub{font-size:14px;font-weight:600;color:var(--ink);background:var(--t1);border:1px solid var(--t3);border-radius:999px;padding:4px 11px;white-space:nowrap}
.ps-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:0 8px}
.ps-eq{width:44px;height:44px;border-radius:50%;background:#fff;border:1.5px solid var(--acc);display:grid;place-items:center;font-size:24px;font-weight:600;color:var(--ink);line-height:1}
.ps-eqt{font-size:13px;font-weight:600;color:var(--fg2,#44403C);text-align:center;line-height:1.35}

/* matrix */
.mx-grid{display:grid;grid-template-columns:86px repeat(2,minmax(0,1fr));gap:12px}
.mx-ch{text-align:center;font-size:13.5px;font-weight:650;color:#57534E}
.mx-rh{display:flex;align-items:center;justify-content:flex-end;font-size:13.5px;font-weight:650;color:#57534E;text-align:right}
.mx-card{height:100%;padding-top:18px}
.mx-card .bf-thing{height:58px}

/* ladder */
.ld-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;align-items:end}
.ld-col{display:flex;align-items:flex-end}
.ld-card{width:100%;min-height:calc(186px + var(--i) * 32px);padding-top:14px;justify-content:flex-start}
.ld-ops{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:12px 0 10px;max-width:120px}
.ld-ops span{width:24px;height:24px;border-radius:6px;background:#F5F5F4;color:#57534E;font:600 14px/24px Inter,sans-serif;text-align:center}
.ld-ops span.new{background:var(--t2);color:var(--ink)}
.ld-ex{margin-top:auto;width:100%;border-top:1px dashed #E7E5E4;padding-top:10px}
.ld-ex svg{display:block;margin:0 auto;height:54px;width:100%}
.ld-ext{font-size:13px;color:#57534E;margin-top:4px}
.ld-arrow{position:relative;margin-top:14px;height:30px;border-top:2px solid var(--deep)}
.ld-arrow:after{content:"";position:absolute;right:-2px;top:-7px;border:6px solid transparent;border-left:10px solid var(--deep)}
.ld-arrow span{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap}

/* motion: the parts arrive in order, the arrows draw, and a dot travels each arrow */
/* the entrance rise moves the separate translate property, never transform: an element that is centred or offset by
   its own transform (arrow labels, line-chart marks) keeps that transform during and after the rise */
@keyframes bfRise{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes bfDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bfTravel{0%{offset-distance:0%;opacity:0}12%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes bfGone{from{background:var(--acc)}to{background:#D6D3D1}}
.bf-dot{opacity:0}
.bf.anim .bf-card,.bf.anim .bf-band,.bf.anim .ln-mark,.bf.anim .pc-chip,.bf.anim .bf-wlab{animation:bfRise .5s cubic-bezier(.22,1,.36,1) both}
.bf.anim .bf-card:nth-of-type(n){animation-delay:.05s}
.bf.anim .bf-w{stroke-dasharray:1;animation:bfDraw .7s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i) * .08s + .3s)}
.bf.anim .bf-dot{animation:bfTravel 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * .45s + 1.1s)}
.bf.anim .ln-path{stroke-dasharray:1;animation:bfDraw 1.6s cubic-bezier(.45,0,.2,1) both;animation-delay:calc(var(--i) * .15s)}
.bf.anim .ln-pt{animation:bfRise .4s both;animation-delay:calc(var(--i) * .15s + .4s)}
.bf.anim .pc-grid i.gone{animation:bfGone .5s both;animation-delay:calc(var(--i) * 3ms + .8s)}