/* Screen primitives for hand-built product figures.
   Every screen is designed at a fixed width in "design pixels" and scaled by
   its .figure container: --px is one design pixel. --dw (set on the figure)
   is how many design pixels span the figure's width; lowering it zooms in and
   the figure crops the overflow. Sizes inside screens are calc(N * var(--px)).
   This file is the one place where numbers other than the site scale appear,
   because a screen's own geometry is content, not site layout. */

.figure{--dw:960}
.figure.zoom{--dw:640}
.figure.zoom-2{--dw:480}
.figure.center{display:flex;justify-content:center;align-items:flex-start}
.figure.crop-b .screen{margin-bottom:calc(var(--s-5) * -1)}
@media (max-width:767px){
  .figure.m-zoom{--dw:640}
  .figure.m-zoom-2{--dw:480}
}

.screen{
  --px:calc(100cqw / var(--dw));
  --sw:960;
  width:calc(var(--sw) * var(--px));
  max-width:none;
  flex:none;
  font-family:var(--font);
  font-size:calc(13 * var(--px));
  line-height:1.4;
  color:var(--ink);
  background:var(--paper);
  border:var(--hair) solid var(--ink-3);
  border-radius:var(--r-1);
  overflow:hidden;
  font-variant-numeric:tabular-nums;
  text-wrap:initial;
}
.screen p{text-wrap:initial}
.screen.app{aspect-ratio:16/10;display:grid;grid-template-columns:calc(200 * var(--px)) 1fr}
.screen.app.nosb{grid-template-columns:1fr}
.screen.app.auto{aspect-ratio:auto}
.screen.doc{--sw:720;padding:calc(40 * var(--px)) calc(44 * var(--px))}
.screen.phone{--sw:390;aspect-ratio:390/720;border-radius:calc(32 * var(--px));border-color:var(--line-2);display:flex;flex-direction:column}
.screen.term{--sw:960;font-family:var(--mono);font-size:calc(12 * var(--px));line-height:1.65;padding:calc(16 * var(--px)) calc(20 * var(--px));background:var(--ink);color:var(--line-2);border-color:var(--ink)}
/* a log runs on a dark ground, so its scale is carried by brightness */
.term .t{color:var(--ink-3)}
.term b{color:var(--paper)}
.term .hd,.term .ft{color:var(--ink-3);border-color:var(--ink-2)}
.term .ok-ink{color:var(--ok-soft)}
.term .hi-ink{color:var(--paper)}
.term .s-mute{color:var(--line-2)}
.term .warn-ink{color:var(--wn-soft)}
.term .quiet-ink{color:var(--ink-3)}
.term .found-ink{color:var(--ok-soft)}
.screen.term.narrow{--sw:600}
.screen.mail{--sw:960;aspect-ratio:16/10;display:grid;grid-template-columns:calc(280 * var(--px)) 1fr}
.screen.mail.auto{aspect-ratio:auto}
.screen.mail.auto .m-list{min-height:calc(360 * var(--px))}
.screen.plain{--sw:960;padding:calc(24 * var(--px))}
.screen.plain.narrow{--sw:600}

/* text */
.s-h1{font-size:calc(18 * var(--px));font-weight:var(--w-bold);line-height:1.2}
.s-h2{font-size:calc(15 * var(--px));font-weight:var(--w-bold);line-height:1.25}
.s-lbl{font-size:calc(11 * var(--px));color:var(--ink-2);font-weight:var(--w-label)}
.s-sm{font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-big{font-size:calc(26 * var(--px));font-weight:var(--w-bold);line-height:1.1;letter-spacing:var(--tr-heading)}
.s-mono{font-family:var(--mono);font-size:calc(11.5 * var(--px))}
.s-r{text-align:right}
.s-mute{color:var(--ink-2)}
.found{background:var(--sel);color:var(--hi);padding:0 calc(2 * var(--px))}
.found-ink{color:var(--hi)}

/* sidebar + main */
.s-side{background:var(--surface);border-right:var(--hair) solid var(--line);padding:calc(20 * var(--px)) calc(16 * var(--px));display:flex;flex-direction:column;min-width:0}
.s-brand{font-weight:var(--w-bold);font-size:calc(14 * var(--px));line-height:1.2}
.s-brand small{display:block;font-size:calc(11 * var(--px));color:var(--ink-2);font-weight:var(--w-regular)}
.s-nav{margin-top:calc(20 * var(--px));display:grid;gap:calc(2 * var(--px));font-size:calc(12 * var(--px))}
.s-nav span{padding:calc(6 * var(--px)) calc(8 * var(--px));border-radius:var(--r-1);color:var(--ink-2)}
.s-nav .on{background:var(--paper);color:var(--ink);font-weight:var(--w-label)}
.s-user{margin-top:auto;display:flex;gap:calc(8 * var(--px));align-items:center;font-size:calc(11 * var(--px))}
.s-user .av{width:calc(24 * var(--px));height:calc(24 * var(--px));border-radius:var(--r-2);background:var(--hi);color:var(--hi-on);display:inline-flex;align-items:center;justify-content:center;font-size:calc(9 * var(--px));font-weight:var(--w-label)}
.s-user b{display:block;font-weight:var(--w-label)}
.s-user span{color:var(--ink-2)}
.s-main{padding:calc(20 * var(--px)) calc(24 * var(--px));min-width:0;display:flex;flex-direction:column;gap:calc(16 * var(--px))}
.s-top{display:flex;justify-content:space-between;align-items:center;gap:calc(12 * var(--px))}
.s-tools{display:flex;gap:calc(8 * var(--px));align-items:center;flex-wrap:wrap}
.s-seg{display:inline-flex;border:var(--hair) solid var(--line-2);border-radius:var(--r-1);overflow:hidden;font-size:calc(11 * var(--px))}
.s-seg span{padding:calc(4 * var(--px)) calc(10 * var(--px));color:var(--ink-2)}
.s-seg .on{background:var(--hi);color:var(--hi-on)}
.s-btn{display:inline-block;background:var(--hi);color:var(--hi-on);padding:calc(6 * var(--px)) calc(10 * var(--px));border-radius:var(--r-1);font-size:calc(11 * var(--px));font-weight:var(--w-label);line-height:1.3;white-space:nowrap}
.s-btn.ghost{background:var(--paper);color:var(--ink);border:var(--hair) solid var(--line-2)}
.s-metrics{display:flex;gap:calc(28 * var(--px));align-items:flex-end}
.s-metrics div b{display:block;font-size:calc(20 * var(--px));font-weight:var(--w-bold);line-height:1.1}
.s-metrics div span{font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-tabs{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.s-tabs div{display:flex;gap:calc(16 * var(--px))}
.s-tabs span{padding-bottom:calc(6 * var(--px));color:var(--ink-2);border-bottom:calc(2 * var(--px)) solid transparent}
.s-tabs .on{color:var(--ink);border-bottom-color:var(--ink)}

/* table */
.s-tbl{width:100%;border-collapse:collapse;font-size:calc(12 * var(--px));table-layout:fixed}
.s-tbl th{font-size:calc(11 * var(--px));font-weight:var(--w-label);color:var(--ink-2);text-align:left;padding:calc(6 * var(--px)) calc(8 * var(--px)) calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.s-tbl td{padding:calc(8 * var(--px)) calc(8 * var(--px)) calc(8 * var(--px)) 0;border-bottom:var(--hair) solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.s-tbl .r{text-align:right;padding-right:0}
.s-tbl tr.sel td{background:var(--surface)}
.s-tbl tfoot td{font-weight:var(--w-bold);border-bottom:0;border-top:var(--hair) solid var(--ink)}
.s-pill{display:inline-block;border:var(--hair) solid var(--line-2);border-radius:var(--r-3);padding:0 calc(8 * var(--px));font-size:calc(11 * var(--px));line-height:calc(18 * var(--px));white-space:nowrap}
.s-pill.ink{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)}
.s-pill.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok-soft)}
.s-pill.warn{background:var(--wn-soft);color:var(--wn);border-color:var(--wn-soft)}
.s-pill.acc{color:var(--ink-2);border-color:var(--line-2)}
.ok-ink{color:var(--ok)}.warn-ink{color:var(--wn)}.quiet-ink{color:var(--ink-3)}
.s-pill.mark{background:var(--sel);border-color:var(--sel);color:var(--hi)}

/* cards, panels, drawers */
.s-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(12 * var(--px))}
.s-card{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(12 * var(--px)) calc(14 * var(--px));min-width:0}
.s-card small{display:block;font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-card b{display:block;font-size:calc(20 * var(--px));font-weight:var(--w-bold);line-height:1.15;margin-top:calc(4 * var(--px));white-space:nowrap}
.s-panel{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(14 * var(--px)) calc(16 * var(--px));min-width:0}
.s-panel-h{display:flex;justify-content:space-between;align-items:baseline;font-size:calc(12 * var(--px));margin-bottom:calc(10 * var(--px))}
.s-panel-h b{font-weight:var(--w-bold)}
.s-panel-h span{color:var(--ink-2);font-size:calc(11 * var(--px))}
.s-drawer{border-left:var(--hair) solid var(--line);padding:calc(16 * var(--px)) calc(18 * var(--px));min-width:0}
.s-kv{display:grid;grid-template-columns:calc(60 * var(--px)) 1fr;gap:calc(4 * var(--px)) calc(10 * var(--px));font-size:calc(12 * var(--px))}
.s-kv .k{color:var(--ink-2)}
.s-kv span:not(.k){overflow-wrap:anywhere}
.s-sec{margin-top:calc(14 * var(--px))}
.s-sec .s-lbl{display:block;margin-bottom:calc(6 * var(--px))}
.s-row{display:flex;justify-content:space-between;gap:calc(12 * var(--px));align-items:baseline}
.s-rows{display:grid;gap:calc(6 * var(--px));font-size:calc(12 * var(--px))}
.s-rows .s-row{padding:calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.s-meter{height:calc(4 * var(--px));background:var(--line);border-radius:var(--r-1);overflow:hidden;flex:1}
.s-meter i{display:block;height:100%;width:var(--w);background:var(--c,var(--ink-2))}
.s-split{display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--px))}
.s-split-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:calc(16 * var(--px))}
.s-hr{border:0;border-top:var(--hair) solid var(--line);margin:calc(12 * var(--px)) 0}
.s-chip{display:inline-block;border:var(--hair) solid var(--line-2);border-radius:var(--r-1);padding:calc(2 * var(--px)) calc(8 * var(--px));font-size:calc(11 * var(--px));margin:0 calc(4 * var(--px)) calc(4 * var(--px)) 0}
.s-chip.mark{background:var(--sel);border-color:var(--sel);color:var(--hi)}
.s-fields{display:grid;gap:calc(8 * var(--px))}
.s-field{display:grid;grid-template-columns:calc(92 * var(--px)) 1fr;gap:calc(10 * var(--px));align-items:baseline;padding:calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.s-field small{font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-field b{font-weight:var(--w-label)}

/* transcript */
.s-script{display:grid;gap:calc(8 * var(--px));font-size:calc(12 * var(--px));line-height:1.5}
.s-script .ln{display:grid;grid-template-columns:calc(44 * var(--px)) 1fr;gap:calc(8 * var(--px))}
.s-script .who{font-size:calc(10.5 * var(--px));color:var(--ink-2);font-weight:var(--w-label);padding-top:calc(1 * var(--px))}

/* terminal */
.term .lines{height:calc(9 * 1.65 * 12 * var(--px));overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.term .ln{display:grid;grid-template-columns:calc(64 * var(--px)) 1fr;gap:calc(12 * var(--px));align-items:baseline;flex:none}
.term .ln.wide{grid-template-columns:calc(64 * var(--px)) calc(220 * var(--px)) 1fr}
.term .t{color:var(--ink-2)}
.term .ok-ink,.term .hi-ink,.term .warn-ink,.term .quiet-ink{font-weight:var(--w-label)}
.hi-ink{color:var(--hi)}
.term .hd{padding-bottom:calc(8 * var(--px));margin-bottom:calc(8 * var(--px));border-bottom:var(--hair) solid var(--ink-2);display:flex;justify-content:space-between}
.term .ft{padding-top:calc(8 * var(--px));margin-top:calc(8 * var(--px));border-top:var(--hair) solid var(--ink-2);display:flex;gap:calc(24 * var(--px))}
.term b{font-weight:var(--w-label)}

/* phone */
.p-bar{display:flex;justify-content:space-between;padding:calc(12 * var(--px)) calc(20 * var(--px)) 0;font-size:calc(11 * var(--px));font-weight:var(--w-label)}
.p-head{display:flex;justify-content:space-between;align-items:baseline;padding:calc(18 * var(--px)) calc(20 * var(--px)) calc(10 * var(--px));border-bottom:var(--hair) solid var(--line)}
.p-body{padding:calc(14 * var(--px)) calc(20 * var(--px));display:flex;flex-direction:column;gap:calc(10 * var(--px));flex:1;min-height:0}
.p-tot{margin-top:auto;padding-top:calc(12 * var(--px));border-top:var(--hair) solid var(--line);display:flex;justify-content:space-between;align-items:baseline}
.p-tot b{font-size:calc(24 * var(--px));font-weight:var(--w-bold)}
.p-btn{background:var(--hi);color:var(--hi-on);text-align:center;padding:calc(12 * var(--px));border-radius:var(--r-2);font-weight:var(--w-label);font-size:calc(13 * var(--px))}
.p-btn.ghost{background:var(--paper);color:var(--ink);border:var(--hair) solid var(--line-2)}
.p-said{font-size:calc(13 * var(--px));line-height:1.45;background:var(--surface);border-radius:var(--r-2);padding:calc(10 * var(--px)) calc(12 * var(--px))}
.p-line{display:flex;justify-content:space-between;gap:calc(8 * var(--px));font-size:calc(12 * var(--px));padding:calc(5 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.p-line.grp{font-weight:var(--w-label)}
.p-line.sub{color:var(--ink-2);padding-left:calc(12 * var(--px))}
.p-q{border:var(--hair) solid var(--ink);border-radius:var(--r-2);padding:calc(10 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px))}
.p-q small{display:block;color:var(--ink-2);font-size:calc(11 * var(--px))}
.p-q .opts{display:flex;gap:calc(6 * var(--px));margin-top:calc(8 * var(--px))}
.p-q .opts span{border:var(--hair) solid var(--line-2);border-radius:var(--r-3);padding:calc(2 * var(--px)) calc(10 * var(--px));font-size:calc(11 * var(--px))}
.p-q .opts .on{background:var(--hi);color:var(--hi-on);border-color:var(--hi)}
.p-mic{display:flex;align-items:center;gap:calc(8 * var(--px));justify-content:center;font-size:calc(12 * var(--px));color:var(--ink-2);padding:calc(10 * var(--px)) 0 calc(6 * var(--px))}
.p-mic i{width:calc(10 * var(--px));height:calc(10 * var(--px));border-radius:var(--r-3);background:var(--wn)}

/* mail */
.m-list{border-right:var(--hair) solid var(--line);display:flex;flex-direction:column;min-width:0}
.m-list .m-h{padding:calc(14 * var(--px)) calc(16 * var(--px));border-bottom:var(--hair) solid var(--line);display:flex;justify-content:space-between;font-size:calc(12 * var(--px))}
.m-msg{padding:calc(12 * var(--px)) calc(16 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px));min-width:0}
.m-msg .fr{display:flex;justify-content:space-between;font-weight:var(--w-label)}
.m-msg .fr span{color:var(--ink-2);font-weight:var(--w-regular);font-size:calc(11 * var(--px))}
.m-msg .sb{margin-top:calc(2 * var(--px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-msg .pv{color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-msg.on{background:var(--surface)}
.m-read{padding:calc(20 * var(--px)) calc(24 * var(--px));min-width:0;overflow:hidden}
.m-read .m-title{font-size:calc(18 * var(--px));font-weight:var(--w-bold);line-height:1.2}
.m-read .m-meta{margin-top:calc(6 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}
.m-entry{margin-top:calc(16 * var(--px));padding-top:calc(14 * var(--px));border-top:var(--hair) solid var(--line);display:grid;grid-template-columns:calc(24 * var(--px)) 1fr calc(80 * var(--px));gap:calc(12 * var(--px));font-size:calc(12 * var(--px))}
.m-entry .rk{color:var(--ink-2)}
.m-entry .nm{font-weight:var(--w-bold);font-size:calc(13 * var(--px))}
.m-entry .one{color:var(--ink-2);margin-top:calc(2 * var(--px))}
.m-entry .fit{text-align:right}
.m-entry .fit b{font-size:calc(18 * var(--px));font-weight:var(--w-bold);display:block;line-height:1.1}
.m-entry .fit small{font-size:calc(11 * var(--px));color:var(--ink-2)}
.m-entry .kv{margin-top:calc(8 * var(--px));display:grid;grid-template-columns:calc(64 * var(--px)) 1fr;gap:calc(3 * var(--px)) calc(8 * var(--px));font-size:calc(11.5 * var(--px))}
.m-entry .kv span:nth-child(odd){color:var(--ink-2)}

/* document (proposal) */
.doc .d-h{display:flex;justify-content:space-between;align-items:flex-start;font-size:calc(12 * var(--px))}
.doc .d-h b{font-size:calc(14 * var(--px));font-weight:var(--w-bold);display:block}
.doc .d-h .r{text-align:right;color:var(--ink-2)}
.doc h4{margin:calc(28 * var(--px)) 0 0;font-size:calc(22 * var(--px));font-weight:var(--w-bold);line-height:1.15}
.doc .d-sub{margin-top:calc(4 * var(--px));color:var(--ink-2);font-size:calc(12 * var(--px))}
.doc .d-scope{margin-top:calc(14 * var(--px));font-size:calc(12.5 * var(--px));line-height:1.5}
.doc table{margin-top:calc(18 * var(--px))}
.doc .d-terms{margin-top:calc(18 * var(--px));display:grid;grid-template-columns:1fr 1fr;gap:calc(16 * var(--px));font-size:calc(11.5 * var(--px));color:var(--ink-2)}
.doc .d-terms b{display:block;color:var(--ink);font-weight:var(--w-label)}
.doc .d-sign{margin-top:calc(24 * var(--px));display:flex;justify-content:space-between;align-items:flex-end;gap:calc(24 * var(--px))}
.doc .d-sign .ln{flex:1;border-bottom:var(--hair) solid var(--ink);padding-bottom:calc(4 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}

/* spreadsheet */
.xl{--sw:960;font-size:calc(11.5 * var(--px))}
.xl .x-tab{display:flex;gap:calc(16 * var(--px));padding:calc(8 * var(--px)) calc(12 * var(--px));border-bottom:var(--hair) solid var(--line);background:var(--surface);font-size:calc(11 * var(--px))}
.xl .x-tab b{font-weight:var(--w-label)}
.xl .x-tab span{color:var(--ink-2)}
.xl table{width:100%;border-collapse:collapse;table-layout:fixed}
.xl th,.xl td{border:var(--hair) solid var(--line);padding:calc(3 * var(--px)) calc(6 * var(--px));white-space:nowrap;overflow:hidden;text-align:left;font-weight:var(--w-regular);height:calc(22 * var(--px))}
.xl th{background:var(--surface);color:var(--ink-2);font-size:calc(10.5 * var(--px));text-align:center}
.xl td.n{background:var(--surface);color:var(--ink-2);text-align:center;font-size:calc(10.5 * var(--px))}
.xl tr.hd td{font-weight:var(--w-label);background:var(--surface)}
.xl td.spill{overflow:visible;position:relative;z-index:1}
.xl td.gone{color:var(--ink-2);text-decoration:line-through}
.xl td.err{color:var(--wn)}

/* org map: who decides, and where each name came from. No container. */
.orgmap{font-size:var(--t-small);line-height:var(--lh-small)}
.om-lbl{display:block;color:var(--ink-2)}
.om-quote{margin:var(--s-3) 0 0;background:var(--ok-soft);color:var(--ink);border-radius:var(--r-1);
  padding:var(--s-4) var(--s-5);font-size:var(--t-body);line-height:var(--lh-body);max-width:var(--measure)}
.om-head{position:relative}
.om-head::after{content:"";position:absolute;top:100%;height:var(--s-7);width:var(--hair);background:var(--line-2);
  left:calc((100% - var(--s-6) * 2) / 3 + var(--s-6))}
.om-body{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s-6);margin-top:var(--s-7);align-items:stretch}
.om-col{display:grid;grid-auto-rows:1fr;gap:var(--s-6);position:relative;min-width:0}
.om-b,.om-c{padding-left:var(--s-7)}
.om-b::before,.om-c::before{content:"";position:absolute;left:0;width:var(--hair);background:var(--line-2);
  top:calc((100% - (var(--n) - 1) * var(--s-6)) / (2 * var(--n)));
  bottom:calc((100% - (var(--n) - 1) * var(--s-6)) / (2 * var(--n)))}
.om-p{position:relative;display:flex;flex-direction:column;justify-content:center;min-width:0}
.om-p b{font-size:var(--t-lede);line-height:1.2;font-weight:var(--w-bold)}
.om-p .ti{color:var(--ink-2);margin-top:var(--s-1)}
.om-p i{display:block;border-top:var(--hair) solid var(--line);margin:var(--s-3) 0 var(--s-2)}
.om-p i.named{border-top-color:var(--ok);border-top-width:var(--ring)}
.om-p .src{color:var(--ink-2)}
.om-b .om-p::before,.om-c .om-p::before{content:"";position:absolute;top:50%;height:var(--hair);
  background:var(--line-2);left:calc(var(--s-7) * -1);width:var(--s-7)}
.om-a .om-p::after,.om-b .om-p:nth-child(2)::after{content:"";position:absolute;top:50%;height:var(--hair);
  background:var(--line-2);right:calc(var(--s-6) * -1);width:var(--s-6)}
@media (max-width:1023px){
  .om-body{grid-template-columns:1fr;gap:var(--s-7)}
  .om-b,.om-c{padding-left:0}
  .om-head::after,.om-b::before,.om-c::before{display:none}
  .om-b .om-p::before,.om-c .om-p::before,.om-a .om-p::after,.om-b .om-p:nth-child(2)::after{display:none}
  .om-col{grid-auto-rows:auto;gap:var(--s-6)}
}

/* charts */
.s-chart{display:block;width:100%;height:auto}
.s-chart text{font-family:var(--font);font-size:11px;fill:var(--ink-2)}
.s-chart text.ink{fill:var(--ink)}
.s-chart text.b{font-weight:var(--w-bold);fill:var(--ink)}
.s-chart .grid{stroke:var(--line);stroke-width:1}
.s-chart .axis{stroke:var(--line-2);stroke-width:1}
.s-chart .ink{stroke:var(--ink);fill:none;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.s-chart .ink-2{stroke:var(--ink-2);fill:none;stroke-width:1.5}
.s-chart .dash{stroke-dasharray:4 4}
.s-chart .bar{fill:var(--ink)}
.s-chart .bar-2{fill:var(--line-2)}
.s-chart .bar-3{fill:var(--line)}
.s-chart .mark{fill:var(--ok)}
.s-chart .band{fill:var(--surface);stroke:var(--surface);stroke-width:1}
.s-chart .dot{fill:var(--ink)}
.s-chart .dot-mark{fill:var(--paper);stroke:var(--ink);stroke-width:2}
/* stacked month bars: base is the lighter lower block, commission the darker one above */
.s-chart .b-base{fill:var(--line-2)}
.s-chart .b-com{fill:var(--ink)}
.s-chart .b-prog{fill:var(--line)}
/* rate ladder: an ordered neutral ramp, darkest band pays most */
.s-chart .rb1{fill:var(--surface)}
.s-chart .rb2{fill:var(--ink-3)}
.s-chart .rb3{fill:var(--ink)}
.s-chart .edge{stroke:var(--ink);stroke-width:1;fill:none}
.s-chart text.on-dark{fill:var(--paper)}
.s-chart .mline{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.s-chart .mdot{fill:var(--ink)}
/* scattered accounts: one cloud per source, nothing joining them */
.s-chart.cloud .dc{fill:var(--line-2)}
.s-chart.cloud .dc.s{fill:var(--ink-3)}
.s-chart.cloud .cl{font-size:11px;fill:var(--ink);font-weight:var(--w-label)}
.s-chart.cloud .cn{font-size:10.5px;fill:var(--ink-2)}
.s-chart-foot{display:flex;flex-wrap:wrap;gap:calc(20 * var(--px));margin-top:calc(10 * var(--px));padding-top:calc(10 * var(--px));border-top:var(--hair) solid var(--line);font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-chart-foot b{color:var(--ink);font-weight:var(--w-label)}
/* a settle pass can grow bars from the baseline */
.figure[data-settle] .s-chart .grow{transform:scaleY(0);transform-origin:bottom;transform-box:fill-box}
.figure[data-settle].in .s-chart .grow{transform:none;transition:transform var(--d-settle) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger))}

/* flow diagrams (agents) */
.flow{--sw:960;display:grid;grid-template-columns:1fr calc(48 * var(--px)) 1.15fr calc(48 * var(--px)) 1fr;align-items:stretch;padding:calc(20 * var(--px));gap:0;background:var(--paper)}
.flow .box{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(14 * var(--px)) calc(16 * var(--px));min-width:0;display:flex;flex-direction:column;gap:calc(6 * var(--px))}
.flow .box.core{border-color:var(--ink);background:var(--paper)}
.flow .box .s-h2{margin-bottom:calc(4 * var(--px))}
.flow .box .s-sm{margin-top:auto;padding-top:calc(8 * var(--px))}
.flow .arrow{align-self:center;height:var(--hair);background:var(--ink);position:relative;margin:0 calc(8 * var(--px))}
.flow .arrow::after{content:"";position:absolute;right:calc(-1 * var(--px));top:calc(-3 * var(--px));border:calc(3.5 * var(--px)) solid transparent;border-left-color:var(--ink);border-right:0}
.flow .li{display:flex;justify-content:space-between;gap:calc(8 * var(--px));font-size:calc(12 * var(--px));padding:calc(4 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.flow .li span:last-child{color:var(--ink-2);white-space:nowrap}
.flow .stage{font-size:calc(12 * var(--px));padding:calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.flow .stage small{display:block;color:var(--ink-2);font-size:calc(11 * var(--px))}
.flow .stage:last-of-type{border-bottom:0}


/* one-pass settle: elements marked .st appear in order once the figure is in view */
.figure[data-settle] .st{opacity:0;transform:translateY(calc(4 * var(--px,1px)))}
.figure[data-settle].in .st{opacity:1;transform:none;transition:opacity var(--d-settle) var(--e-out),transform var(--d-settle) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger))}
.figure[data-settle] .grow{transform:scaleX(0);transform-origin:left center}
.figure[data-settle].in .grow{transform:none;transition:transform var(--d-settle) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger))}
.figure[data-settle] .draw{stroke-dasharray:1;stroke-dashoffset:1}
.figure[data-settle].in .draw{stroke-dashoffset:0;transition:stroke-dashoffset calc(var(--d-settle) * 2) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger))}
.figure[data-settle] .lit{transition:background-color var(--d-fast) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger));background-color:transparent}
.figure[data-settle].in .lit{background-color:var(--sel);color:var(--hi)}
@media (prefers-reduced-motion:reduce){
  .figure[data-settle] .st,.figure[data-settle] .grow{opacity:1;transform:none;transition:none}
  .figure[data-settle] .draw{stroke-dashoffset:0;transition:none}
  .figure[data-settle] .lit{background-color:var(--sel);color:var(--hi);transition:none}
}

/* helpers used by specific screens */
.s-body{display:grid;grid-template-columns:1fr calc(236 * var(--px));gap:calc(16 * var(--px));flex:1;min-height:0;align-items:start}
.s-tbl col.w-14{width:14%}.s-tbl col.w-22{width:22%}.s-tbl col.w-27{width:27%}.s-tbl col.w-37{width:37%}
.s-tbl col.w-16{width:16%}.s-tbl col.w-24{width:24%}.s-tbl col.w-25{width:25%}
/* a month stepper reads as one control, not three metrics */
.s-step{display:flex;align-items:baseline;gap:calc(8 * var(--px))}
.s-step b{font-size:calc(20 * var(--px));font-weight:var(--w-bold);line-height:1.1}
.s-step .ar{color:var(--ink-3);font-size:calc(14 * var(--px))}
.s-count{font-size:calc(11 * var(--px));color:var(--ink-2);padding-top:calc(8 * var(--px))}
/* the notes column is the first thing to go when the screen narrows */
@media (max-width:1023px){.s-tbl .hs,.s-tbl col.hs{display:none}}
.s-tbl col.w-10{width:10%}.s-tbl col.w-18{width:18%}.s-tbl col.w-30{width:30%}.s-tbl col.w-40{width:40%}.s-tbl col.w-50{width:50%}
.s-note{font-size:calc(12 * var(--px));line-height:1.45;margin:0}
.s-nw{display:grid;grid-template-columns:calc(220 * var(--px)) 1fr;gap:calc(24 * var(--px));align-items:end}
.s-allocbar{display:flex;height:calc(8 * var(--px));border-radius:var(--r-1);overflow:hidden;gap:calc(2 * var(--px))}
.s-allocbar i{display:block;height:100%;width:var(--w);background:var(--ok)}
.s-allocbar i.b2{background:var(--ink-2)}
.s-allocbar i.b3{background:var(--wn)}
.s-legend{display:flex;gap:calc(16 * var(--px));margin-top:calc(8 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-legend i{display:inline-block;width:calc(8 * var(--px));height:calc(8 * var(--px));border-radius:var(--r-1);background:var(--ok);margin-right:calc(5 * var(--px))}
.s-legend i.b2{background:var(--ink-2)}.s-legend i.b3{background:var(--wn)}
.s-legend b{color:var(--ink);font-weight:var(--w-label)}
.s-grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--px));flex:1}
.s-fill{flex:1}
.p-chips{display:flex;flex-wrap:wrap}
.p-lines{display:flex;flex-direction:column}
.figure.phone-fig{aspect-ratio:auto}
.index .figure{--dw:720}
.index .figure.flow-fig{--dw:960}
.index .figure.phone-fig{--dw:600;max-height:calc(var(--s-11) * 2 + var(--s-9))}
@media (max-width:767px){.index .figure,.index .figure.m-zoom{--dw:480}.index .figure.flow-fig{--dw:640}.index .figure.phone-fig{--dw:520}}
@media (max-width:767px){.figure.phone-fig{--dw:520}}

/* calendar */
.cal{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px))}
.cal .c-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:calc(14 * var(--px))}
.cal .c-dow{display:grid;grid-template-columns:repeat(7,1fr);font-size:calc(11 * var(--px));color:var(--ink-2);font-weight:var(--w-label);padding-bottom:calc(6 * var(--px));border-bottom:var(--hair) solid var(--line)}
.cal .c-grid{display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.cal .c-d{min-height:calc(78 * var(--px));border-bottom:var(--hair) solid var(--line);border-right:var(--hair) solid var(--line);padding:calc(6 * var(--px));font-size:calc(11 * var(--px));min-width:0}
.cal .c-d:nth-child(7n){border-right:0}
.cal .c-d.out{color:var(--ink-3)}
.cal .c-d.we{background:var(--surface)}
.cal .c-d .n{display:block;color:var(--ink-2);margin-bottom:calc(4 * var(--px))}
.cal .c-d.today .n{color:var(--ink);font-weight:var(--w-bold)}
.cal .ev{display:block;font-size:calc(10.5 * var(--px));line-height:1.35;padding:calc(1 * var(--px)) calc(5 * var(--px));border-radius:var(--r-1);background:var(--surface);border:var(--hair) solid var(--line);margin-bottom:calc(3 * var(--px));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.hot{background:var(--sel);border-color:var(--hi);color:var(--hi)}
.cal .pop{position:absolute;left:calc(150 * var(--px));top:calc(112 * var(--px));width:calc(250 * var(--px));background:var(--paper);border:var(--hair) solid var(--ink);border-radius:var(--r-1);padding:calc(12 * var(--px)) calc(14 * var(--px));font-size:calc(11.5 * var(--px));z-index:2}
.cal .pop b{display:block;font-size:calc(13 * var(--px));font-weight:var(--w-bold)}
.cal .pop .s-sm{display:block;margin-top:calc(2 * var(--px))}
.cal .pop p{margin:calc(8 * var(--px)) 0 0;line-height:1.45}

/* compose (email) */
.compose{font-size:calc(13 * var(--px));line-height:1.6;display:flex;flex-direction:column;gap:calc(10 * var(--px))}
.compose .hd{display:grid;grid-template-columns:calc(56 * var(--px)) 1fr;gap:calc(8 * var(--px));padding-bottom:calc(6 * var(--px));border-bottom:var(--hair) solid var(--line)}
.compose .hd span:first-child{color:var(--ink-2)}
.compose p{margin:0}
.compose .bodytext{flex:1;min-height:0}
.compose .bodytext p + p{margin-top:calc(14 * var(--px))}
.compose .ft{margin-top:auto;padding-top:calc(8 * var(--px));border-top:var(--hair) solid var(--line);display:flex;justify-content:space-between;font-size:calc(11 * var(--px));color:var(--ink-2)}
.s-gap{margin-top:calc(10 * var(--px))}
.s-split-13{grid-template-columns:2fr 3fr}
.xl col.x-n{width:calc(32 * var(--px))}.xl col.x-s{width:11%}.xl col.x-w{width:22%}
.s-chart .node{fill:var(--paper);stroke:var(--line-2);stroke-width:1}
.s-chart .node.core{stroke:var(--ink)}
.s-chart.org text{font-size:12px}
.figure.fit-720{--dw:720}
.figure.fit-800{--dw:800}
.screen.plain.mid{--sw:720}
@media (max-width:767px){
  .figure.tall,.figure.m-zoom{--dw:480}
  .screen.app{grid-template-columns:1fr}
  .screen.app .s-side{display:none}
  .figure.m-stack{--dw:480}
  .figure.m-stack .screen{--sw:480}
  .figure.m-stack .s-split,.figure.m-stack .s-split-13{grid-template-columns:1fr}
  .figure.m-stack .s-split > div + div{margin-top:calc(16 * var(--px))}
}

/* chat */
.chat{--sw:640;padding:0;border:0;border-radius:0;display:flex;flex-direction:column;gap:calc(12 * var(--px))}
.chat .q{align-self:flex-end;max-width:64%;background:var(--hi);color:var(--hi-on);padding:calc(10 * var(--px)) calc(14 * var(--px));border-radius:var(--r-2);font-size:calc(13 * var(--px));line-height:1.5}
.chat .a{align-self:flex-start;max-width:88%;background:var(--surface);border:0;padding:calc(14 * var(--px)) calc(16 * var(--px));border-radius:var(--r-2);font-size:calc(13 * var(--px));line-height:1.5}
.chat .a b{display:block;font-size:calc(20 * var(--px));font-weight:var(--w-bold);line-height:1.15;margin-bottom:calc(6 * var(--px))}
.chat .a p{margin:0}
.chat .a .s-chart{margin-top:calc(12 * var(--px));max-width:calc(430 * var(--px))}
.c-head{display:flex;justify-content:space-between;align-items:baseline;gap:calc(12 * var(--px));padding-bottom:calc(10 * var(--px));margin-bottom:calc(4 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(11 * var(--px));color:var(--ink-2)}
.c-head b{color:var(--ink);font-weight:var(--w-label);font-size:calc(12 * var(--px))}
.chat .in{margin-top:auto;border:var(--hair) solid var(--line-2);border-radius:var(--r-2);padding:calc(8 * var(--px)) calc(12 * var(--px));color:var(--ink-3);font-size:calc(12 * var(--px))}

/* ingest */
.ingest{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px))}
.ingest .sched{display:grid;grid-template-columns:repeat(6,1fr);gap:calc(8 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2);padding-bottom:calc(12 * var(--px));border-bottom:var(--hair) solid var(--line);margin-bottom:calc(16 * var(--px))}
.ingest .sched span{padding:calc(4 * var(--px)) 0;border-top:calc(2 * var(--px)) solid var(--line)}
.ingest .sched span.on{border-top-color:var(--ink);color:var(--ink);font-weight:var(--w-label)}
.ingest .body{display:grid;grid-template-columns:1fr calc(120 * var(--px)) 1.2fr;align-items:center;gap:0}
.ingest .src{display:grid;gap:calc(8 * var(--px))}
.ingest .src div{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(8 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px));display:flex;justify-content:space-between}
.ingest .src div span:last-child{color:var(--ink-2);font-size:calc(11 * var(--px))}
.ingest .wires{height:100%;width:100%}
.ingest .db{border:var(--hair) solid var(--ink);border-radius:var(--r-1);padding:calc(14 * var(--px)) calc(16 * var(--px))}
.ingest .db .s-row{padding:calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.ingest .db .s-row b{font-weight:var(--w-bold)}
.ingest .db .s-row:last-of-type{border-bottom:0}
@media (max-width:767px){.figure.m-stack .ingest .body{grid-template-columns:1fr}.figure.m-stack .ingest .wires{display:none}.figure.m-stack .ingest .db{margin-top:calc(12 * var(--px))}}
.figure.fit-640{--dw:640}
.figure.fit-560{--dw:560}
.screen.compose{--sw:560;border:0;border-radius:0;padding:0;height:calc(302 * var(--px))}
.s-split-32{grid-template-columns:3fr 2fr}
.s-tbl col.w-20{width:20%}.s-tbl col.w-26{width:26%}

/* ledger (prospecting output) */
.ledger{--sw:960;padding:0}
.ledger .l-h{display:flex;justify-content:space-between;padding:calc(10 * var(--px)) calc(16 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(11.5 * var(--px));color:var(--ink-2)}
.ledger .l-h b{color:var(--ink);font-weight:var(--w-label)}
.ledger .l-body{display:grid;grid-template-columns:1.1fr 1fr}
.ledger .s-tbl td,.ledger .s-tbl th{padding-left:calc(16 * var(--px))}
.ledger .detail{border-left:var(--hair) solid var(--line);padding:calc(14 * var(--px)) calc(16 * var(--px))}
.ledger .bk{display:inline-block;width:calc(3 * var(--px));height:calc(14 * var(--px));vertical-align:middle;margin-right:calc(8 * var(--px));background:var(--ink)}
.ledger .bk.q{background:var(--ink-2)}.ledger .bk.t{background:var(--ink-3)}.ledger .bk.c{background:var(--wn)}.ledger .bk.h{background:var(--line)}

/* research fan-out */
.fan{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(64 * var(--px)) 1.1fr calc(64 * var(--px)) 1.1fr;align-items:center}
.fan .one{border:var(--hair) solid var(--ink);border-radius:var(--r-1);padding:calc(12 * var(--px)) calc(14 * var(--px));font-size:calc(12 * var(--px))}
.fan .one small{display:block;color:var(--ink-2);font-size:calc(11 * var(--px))}
.fan .col{display:grid;gap:calc(6 * var(--px))}
.fan .col div{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(6 * var(--px)) calc(10 * var(--px));font-size:calc(11.5 * var(--px))}
.fan .col div small{display:block;color:var(--ink-2);font-size:calc(10.5 * var(--px))}
.fan .col div.mark{background:var(--sel);border-color:var(--hi)}
.fan svg{width:100%;height:100%}

/* market bar */
.market{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;gap:calc(18 * var(--px))}
.market .row{display:grid;grid-template-columns:calc(200 * var(--px)) 1fr calc(120 * var(--px));gap:calc(16 * var(--px));align-items:center;font-size:calc(12 * var(--px))}
.market .row small{display:block;color:var(--ink-2);font-size:calc(11 * var(--px))}
.market .row b{font-weight:var(--w-bold)}
.market .bar{display:flex;height:calc(28 * var(--px));gap:calc(2 * var(--px))}
.market .bar i{display:block;height:100%;width:var(--w);background:var(--ok)}
.market .bar i.q{background:var(--ink-2)}.market .bar i.t{background:var(--ink-3)}.market .bar i.c{background:var(--wn)}.market .bar i.h{background:var(--line-2)}
.market .fig{text-align:right}
.market .fig b{display:block;font-size:calc(22 * var(--px));font-weight:var(--w-bold);line-height:1.1}
.market .legend{display:flex;gap:calc(18 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2);grid-column:2}
.market .legend i{display:inline-block;width:calc(8 * var(--px));height:calc(8 * var(--px));margin-right:calc(5 * var(--px));background:var(--ok);border-radius:var(--r-1)}
.market .legend i.q{background:var(--ink-2)}.market .legend i.t{background:var(--ink-3)}.market .legend i.c{background:var(--wn)}.market .legend i.h{background:var(--line-2)}
@media (max-width:767px){.figure.m-stack .market .row{grid-template-columns:1fr}.figure.m-stack .market .legend{grid-column:1;flex-wrap:wrap}.figure.m-stack .ledger .l-body{grid-template-columns:1fr}.figure.m-stack .ledger .detail{border-left:0;border-top:var(--hair) solid var(--line)}.figure.m-stack .fan{grid-template-columns:1fr}.figure.m-stack .fan svg{display:none}.figure.m-stack .fan > *{margin-bottom:calc(10 * var(--px))}}
@media (max-width:767px){
  .figure.m-stack .flow{grid-template-columns:1fr;gap:calc(10 * var(--px))}
  .figure.m-stack .flow .arrow{display:none}
  .index .figure.flow-fig .screen{--sw:960}
  .index .figure.flow-fig .flow{grid-template-columns:1fr calc(48 * var(--px)) 1.15fr calc(48 * var(--px)) 1fr}
  .index .figure.flow-fig .flow .arrow{display:block}
}

/* brix: split hero, timeline, three phones, engine */
.hero-split{display:grid;grid-template-columns:7fr 5fr;gap:var(--s-7) var(--s-6);align-items:start}
.hero-split .figure{--dw:600}
@media (max-width:767px){.hero-split{grid-template-columns:1fr}.hero-split .figure{--dw:520}}
.tl{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;gap:calc(24 * var(--px))}
.tl .row{display:grid;grid-template-columns:calc(150 * var(--px)) 1fr;gap:calc(20 * var(--px));align-items:start}
.tl .lab b{display:block;font-size:calc(16 * var(--px));font-weight:var(--w-bold);line-height:1.2}
.tl .lab small{display:block;color:var(--ink-2);font-size:calc(11 * var(--px));margin-top:calc(2 * var(--px))}
.tl .track{position:relative;display:flex;justify-content:space-between;padding-top:calc(6 * var(--px))}
.tl .track::before{content:"";position:absolute;left:0;right:0;top:calc(9 * var(--px));height:var(--hair);background:var(--line-2)}
.tl .track.short{width:44%}
.tl .track.short::before{background:var(--ink)}
.tl .stop{position:relative;font-size:calc(11 * var(--px));width:calc(120 * var(--px))}
.tl .stop:last-child{text-align:right}
.tl .stop i{display:block;width:calc(8 * var(--px));height:calc(8 * var(--px));border-radius:var(--r-3);background:var(--paper);border:var(--hair) solid var(--ink);margin-bottom:calc(10 * var(--px))}
.tl .stop:last-child i{margin-left:auto}
.tl .track.short .stop i{background:var(--ink)}
.tl .stop b{display:block;font-weight:var(--w-label)}
.tl .stop span{color:var(--ink-2)}
.tl .stop.mark b{color:var(--hi)}
.walk3{--sw:1220;display:grid;grid-template-columns:repeat(3,calc(390 * var(--px)));gap:calc(25 * var(--px));background:none;border:0;border-radius:0;overflow:visible}
.walk3 .screen{--sw:390;aspect-ratio:390/660}
.figure.fit-1220{--dw:1220}
.walk3 .cap{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(25 * var(--px));font-size:calc(12 * var(--px));color:var(--ink-2)}
.walk3 .cap b{display:block;color:var(--ink);font-weight:var(--w-label)}
.p-toast{background:var(--ink);color:var(--paper);font-size:calc(11 * var(--px));padding:calc(6 * var(--px)) calc(10 * var(--px));border-radius:var(--r-1);align-self:center}
.p-doc{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(12 * var(--px));font-size:calc(11 * var(--px));line-height:1.4}
.p-doc b{display:block;font-weight:var(--w-bold)}
.p-doc .t{font-size:calc(14 * var(--px));font-weight:var(--w-bold);margin-top:calc(4 * var(--px))}
.p-doc .pr{display:flex;justify-content:space-between;padding:calc(3 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.p-doc .pr.sum{font-weight:var(--w-bold);border-bottom:0;border-top:var(--hair) solid var(--ink)}
.engine{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr 1.1fr;gap:calc(24 * var(--px))}
.engine .said{font-size:calc(15 * var(--px));line-height:1.4}
.engine .asm{margin-top:calc(14 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}
.engine .asm code{font-family:var(--mono);color:var(--ink)}
.engine .lines{margin-top:calc(8 * var(--px));display:grid}
.engine .lines .p-line span:nth-child(2){color:var(--ink-2);margin-left:auto;margin-right:calc(16 * var(--px))}
.engine .sub{display:flex;justify-content:space-between;padding-top:calc(8 * var(--px));font-size:calc(12 * var(--px))}
.engine .sub b{font-weight:var(--w-bold)}
.engine .book .s-tbl td{padding-top:calc(5 * var(--px));padding-bottom:calc(5 * var(--px))}
.engine .book .s-tbl td.k{font-family:var(--mono);font-size:calc(11 * var(--px));color:var(--ink-2)}
@media (max-width:767px){
  .figure.m-stack .tl .row{grid-template-columns:1fr}.figure.m-stack .tl .track.short{width:100%}.figure.m-stack .tl .stop{width:auto}
  .figure.m-stack .engine{grid-template-columns:1fr}
  .figure.m-stack .walk3{--sw:480;grid-template-columns:1fr}.figure.m-stack .walk3 .screen{--sw:390;margin:0 auto}.figure.m-stack .walk3 .cap{grid-template-columns:1fr}
}
.s-tbl col.w-64{width:64%}
.hero-split .page-head .caption{margin-top:var(--s-3)}

/* paylit: meter, engine code, sync, audit */
.meter{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(220 * var(--px));gap:calc(24 * var(--px));align-items:end}
.meter .cells{display:flex;gap:calc(6 * var(--px));align-items:flex-end;height:calc(110 * var(--px));position:relative;border-bottom:var(--hair) solid var(--line-2)}
.meter .cells i{flex:1;display:block;background:var(--surface);border:var(--hair) solid var(--line-2);height:calc(48 * var(--px));transform-origin:bottom}
.meter .cells i.r2{background:var(--ink-3);border-color:var(--ink-3);height:calc(72 * var(--px))}
.meter .cells i.r3{background:var(--ink);border-color:var(--ink);height:calc(96 * var(--px))}
.meter .cells .th{position:absolute;left:var(--l);top:calc(-28 * var(--px));bottom:0;border-left:var(--hair) dashed var(--line-2);font-size:calc(10.5 * var(--px));color:var(--ink-2);padding-left:calc(6 * var(--px));white-space:nowrap}
.meter .labels{display:flex;justify-content:space-between;font-size:calc(11 * var(--px));color:var(--ink-2);margin-top:calc(6 * var(--px))}
.meter .side{border-left:var(--hair) solid var(--line);padding-left:calc(20 * var(--px))}
.meter .side b{display:block;font-size:calc(26 * var(--px));font-weight:var(--w-bold);line-height:1.1}
.meter .side .s-sm{display:block;margin-top:calc(4 * var(--px))}
.figure[data-settle] .meter .cells i{transform:scaleY(0)}
.figure[data-settle].in .meter .cells i{transform:none;transition:transform var(--d-settle) var(--e-out);transition-delay:calc(var(--i,0) * var(--d-stagger))}
@media (prefers-reduced-motion:reduce){.figure[data-settle] .meter .cells i{transform:none;transition:none}}
.code{--sw:960;padding:0;display:grid;grid-template-columns:1.1fr 1fr}
.code .src{font-family:var(--mono);font-size:calc(11.5 * var(--px));line-height:1.7;padding:calc(16 * var(--px)) calc(20 * var(--px));background:var(--surface);border-right:var(--hair) solid var(--line)}
.code .src .fn{color:var(--ink-2);display:block;margin-bottom:calc(6 * var(--px))}
.code .src .l{display:grid;grid-template-columns:calc(20 * var(--px)) 1fr;gap:calc(8 * var(--px))}
.code .src .l span:first-child{color:var(--ink-3)}
.code .out{padding:calc(16 * var(--px)) calc(20 * var(--px))}
.code .out .s-row{padding:calc(6 * var(--px)) 0;border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.code .out .s-row.tot{border-bottom:0;border-top:var(--hair) solid var(--ink);font-weight:var(--w-bold)}
.sync{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(80 * var(--px)) 1.4fr;gap:calc(16 * var(--px));align-items:center}
.sync .crm{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(10 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px));display:flex;justify-content:space-between;margin-bottom:calc(8 * var(--px))}
.sync .crm span{color:var(--ink-2);font-size:calc(11 * var(--px))}
.sync .month{border:var(--hair) solid var(--ink);border-radius:var(--r-1);padding:calc(12 * var(--px)) calc(14 * var(--px))}
.sync .blocks{display:flex;gap:calc(4 * var(--px));align-items:flex-end;height:calc(60 * var(--px));margin:calc(10 * var(--px)) 0}
.sync .blocks i{flex:1;background:var(--line-2);height:calc(30 * var(--px))}
.sync .blocks i.r2{background:var(--ink-2);height:calc(45 * var(--px))}
.sync .blocks i.r3{background:var(--ink);height:calc(60 * var(--px))}
.sync .blocks i.new{background:var(--ok)}
.sync .figs{display:flex;gap:calc(20 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}
.sync .figs b{display:block;color:var(--ink);font-size:calc(14 * var(--px));font-weight:var(--w-bold)}
.audit{--sw:960;padding:0}
.audit .s-tbl td.gap{color:var(--wn)}
@media (max-width:767px){.figure.m-stack .meter{grid-template-columns:1fr}.figure.m-stack .meter .side{border-left:0;padding-left:0;border-top:var(--hair) solid var(--line);padding-top:calc(12 * var(--px))}.figure.m-stack .code{grid-template-columns:1fr}.figure.m-stack .sync{grid-template-columns:1fr}.figure.m-stack .sync .flow-arrow{display:none}}
.screen.sync.mid,.screen.audit.mid{--sw:720}
.s-pad{padding:calc(12 * var(--px)) calc(16 * var(--px)) calc(16 * var(--px))}
.audit .s-tbl td:first-child,.audit .s-tbl th:first-child{padding-left:calc(16 * var(--px))}
.audit .s-tbl td.r,.audit .s-tbl th.r{padding-right:calc(16 * var(--px))}

/* scout: week grid, stages, digest */
.week{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:calc(220 * var(--px)) 1fr;gap:calc(24 * var(--px));align-items:start}
.week .tot b{display:block;font-size:calc(30 * var(--px));font-weight:var(--w-bold);line-height:1.05}
.week .tot span{display:block;color:var(--ink-2);font-size:calc(12 * var(--px));margin-top:calc(4 * var(--px))}
.week .tot p{margin:calc(12 * var(--px)) 0 0;font-size:calc(12 * var(--px));line-height:1.45;color:var(--ink-2)}
.week .days{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(8 * var(--px))}
.week .day{position:relative;height:calc(150 * var(--px));border:var(--hair) solid var(--line);border-radius:var(--r-1);background:var(--surface)}
.week .day i{position:absolute;left:calc(6 * var(--px));right:calc(6 * var(--px));top:var(--t);height:var(--h);background:var(--wn-soft);border:var(--hair) solid var(--wn);border-radius:var(--r-1)}
.week .day i::after{content:attr(data-l);position:absolute;left:calc(6 * var(--px));top:calc(3 * var(--px));font-size:calc(10 * var(--px));white-space:nowrap}
.week .lab{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(8 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2);margin-top:calc(6 * var(--px))}
.stages{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(48 * var(--px)) 1fr calc(48 * var(--px)) 1.1fr;gap:0;align-items:stretch}
.stages .box{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(14 * var(--px)) calc(16 * var(--px));min-width:0}
.stages .box .n{display:block;font-size:calc(11 * var(--px));color:var(--ink-2);margin-bottom:calc(6 * var(--px))}
.stages .box .li{display:flex;justify-content:space-between;gap:calc(8 * var(--px));font-size:calc(12 * var(--px));padding:calc(5 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.stages .box .li span:last-child{color:var(--ink-2)}
.stages .box .li.mark span:first-child{background:var(--sel);color:var(--hi);padding:0 calc(2 * var(--px))}
.stages .box .big{font-size:calc(16 * var(--px));font-weight:var(--w-bold);margin:calc(24 * var(--px)) 0 calc(6 * var(--px))}
.stages .box p{margin:0;font-size:calc(12 * var(--px));color:var(--ink-2);line-height:1.45}
.stages .arrow{align-self:center;height:var(--hair);background:var(--ink);position:relative;margin:0 calc(8 * var(--px))}
.stages .arrow::after{content:"";position:absolute;right:calc(-1 * var(--px));top:calc(-3 * var(--px));border:calc(3.5 * var(--px)) solid transparent;border-left-color:var(--ink);border-right:0}
@media (max-width:767px){.figure.m-stack .week{grid-template-columns:1fr}.figure.m-stack .stages{grid-template-columns:1fr;gap:calc(10 * var(--px))}.figure.m-stack .stages .arrow{display:none}.figure.m-stack .screen.mail{grid-template-columns:1fr;aspect-ratio:auto}.figure.m-stack .m-list{border-right:0;border-bottom:var(--hair) solid var(--line)}}
@media (min-width:768px) and (max-width:1023px){.hero-split .figure{--dw:720}.index .figure{--dw:800}}

/* phones: app screens reflow to a narrow layout instead of cropping */
@media (max-width:767px){
  .figure.tall{aspect-ratio:auto}
  .figure.tall .screen.app,.screen.app.auto{--sw:480;aspect-ratio:auto}
  .screen.app .s-main{padding:calc(16 * var(--px))}
  .screen.app .s-cards{grid-template-columns:1fr 1fr}
  .screen.app .s-body,.screen.app .s-grid2,.screen.app .s-nw,.screen.app .s-split-32{grid-template-columns:1fr}
  .screen.app .s-drawer{border-left:0;border-top:var(--hair) solid var(--line);padding-left:0;padding-right:0}
  .screen.app .s-metrics{flex-wrap:wrap;gap:calc(12 * var(--px)) calc(20 * var(--px))}
  .screen.app .s-tbl col.w-37{width:30%}
  .figure.tall .screen.mail{--sw:480}
}

/* ── animated states ── */
.a{opacity:0;transform:translateY(calc(4 * var(--px,1px)));transition:opacity var(--d-move) var(--e-out),transform var(--d-move) var(--e-out)}
.a.on{opacity:1;transform:none}
.s-pill.cat i{display:inline-block;width:calc(9 * var(--px));height:calc(9 * var(--px));border-radius:var(--r-3);margin-right:calc(5 * var(--px));background:var(--c);vertical-align:middle;position:relative;top:calc(-1 * var(--px))}
.cat-1{--c:var(--hi)}.cat-2{--c:var(--ok)}.cat-3{--c:var(--wn)}.cat-4{--c:var(--ink-2)}.cat-5{--c:var(--ink-3)}
.s-pill.sorting{color:var(--ink-2);border-style:dashed}
tr.new td{opacity:0}
tr.new.on td{opacity:1;transition:opacity var(--d-move) var(--e-out)}
.cat-row{display:grid;grid-template-columns:calc(96 * var(--px)) 1fr calc(60 * var(--px));gap:calc(10 * var(--px));align-items:center;padding:calc(8 * var(--px)) 0;border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.cat-row .nm i{display:inline-block;width:calc(10 * var(--px));height:calc(10 * var(--px));border-radius:var(--r-3);background:var(--c);margin-right:calc(6 * var(--px))}
.cat-row .bar{height:calc(10 * var(--px));background:var(--line);border-radius:var(--r-1);overflow:hidden}
.cat-row .bar i{display:block;height:100%;width:0;background:var(--c);transition:width var(--d-settle) var(--e-out)}
.cat-row .amt{text-align:right;font-weight:var(--w-label)}
.s-panel.cats{background:var(--surface)}

/* scattered statements */
.scatter{--sw:960;padding:calc(24 * var(--px));display:grid;grid-template-columns:repeat(3,1fr);gap:calc(20 * var(--px));background:var(--paper)}
.scatter .win{background:var(--paper);border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(10 * var(--px)) calc(12 * var(--px));font-size:calc(11 * var(--px));min-width:0}
.scatter .win.tall{grid-row:span 2}
.scatter .win .h{display:flex;justify-content:space-between;font-weight:var(--w-label);padding-bottom:calc(6 * var(--px));border-bottom:var(--hair) solid var(--line);margin-bottom:calc(4 * var(--px))}
.scatter .win .h span{color:var(--ink-2);font-weight:var(--w-regular)}
.scatter .win .r{display:grid;grid-template-columns:calc(48 * var(--px)) 1fr auto;gap:calc(8 * var(--px));padding:calc(3 * var(--px)) 0;white-space:nowrap;overflow:hidden;transition:opacity var(--d-move) var(--e-out)}
.scatter .win .r.dim{opacity:.25}
.scatter .win .r span:last-child{text-align:right}
.scatter .win .note{margin-top:calc(6 * var(--px));color:var(--ink-2);font-size:calc(10.5 * var(--px))}
.scatter .win.mono{font-family:var(--mono);font-size:calc(10.5 * var(--px))}

/* chat */
.chat .pair{display:flex;flex-direction:column;align-items:flex-start;gap:calc(12 * var(--px))}
.chat .pair .q{align-self:flex-end}
.chat .pair .typing,.chat .pair .a{align-self:flex-start}
.chat .pair .q,.chat .pair .typing,.chat .pair .a{display:none}
.chat .pair .q.on,.chat .pair .a.on{display:block;animation:bubble-in var(--d-move) var(--e-out) both}
@keyframes bubble-in{from{opacity:0;transform:translateY(calc(8 * var(--px)))}to{opacity:1;transform:none}}
.chat .pair .typing.on{display:inline-flex}
.chat .cbody{display:flex;flex-direction:column;gap:calc(30 * var(--px));height:calc(420 * var(--px));overflow:hidden}
.chat .a{opacity:1;transform:none}
.chat .typing{gap:calc(5 * var(--px));padding:calc(12 * var(--px)) calc(14 * var(--px));background:var(--surface);border-radius:var(--r-2);align-self:flex-start}
.chat .typing i{width:calc(6 * var(--px));height:calc(6 * var(--px));border-radius:var(--r-3);background:var(--ink-3)}
.chat .q span::after{content:"";display:inline-block;width:calc(1 * var(--px));height:calc(13 * var(--px));background:var(--hi-on);vertical-align:calc(-2 * var(--px));margin-left:calc(2 * var(--px))}

/* ingest */
.ingest .sched span[data-t]{cursor:default}
.ingest .wires path.flow{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:6 10}
.fan svg path.flow{stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:6 10}
.ingest .chip{position:absolute;z-index:3;background:var(--sel);color:var(--hi);border:var(--hair) solid var(--hi);border-radius:var(--r-3);padding:0 var(--s-2);font-size:var(--t-micro);line-height:var(--lh-small);white-space:nowrap;transform:translate(0,0);transition:transform calc(var(--d-settle) * 1.5) var(--e-inout),opacity calc(var(--d-settle) * 1.5) var(--e-inout);pointer-events:none}

/* manual research (prospecting problem) */
.manual{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(260 * var(--px));gap:calc(24 * var(--px));align-items:start}
.manual .acct-row{font-size:calc(14 * var(--px));font-weight:var(--w-label);display:flex;justify-content:space-between;padding-bottom:calc(10 * var(--px));border-bottom:var(--hair) solid var(--line)}
.manual .acct-row .n{color:var(--ink-2);font-weight:var(--w-regular)}
.manual .steps4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(10 * var(--px));margin-top:calc(14 * var(--px))}
.manual .step{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(10 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px));color:var(--ink-2);transition:border-color var(--d-fast),color var(--d-fast),background-color var(--d-fast)}
.manual .step b{display:block;color:var(--ink);font-weight:var(--w-label)}
.manual .step small{display:block;font-size:calc(10.5 * var(--px));margin-top:calc(2 * var(--px))}
.manual .step.on{border-color:var(--wn);background:var(--wn-soft);color:var(--wn)}
.manual .step.on b{color:var(--wn)}
.manual .side{border-left:var(--hair) solid var(--line);padding-left:calc(20 * var(--px))}
.manual .side b{display:block;font-family:var(--font-display);font-weight:var(--w-regular);font-size:calc(40 * var(--px));line-height:1}
.manual .side .pace{margin-top:calc(10 * var(--px));font-size:calc(12 * var(--px));color:var(--ink-2)}

/* ledger, re-sorting */
.ledger .l-key{display:flex;flex-wrap:wrap;gap:calc(16 * var(--px));padding:calc(8 * var(--px)) calc(16 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(11 * var(--px));color:var(--ink-2)}
.ledger .l-key .bk{background:var(--ok)}
.ledger .l-win{margin:calc(14 * var(--px)) 0 0;padding-top:calc(12 * var(--px));border-top:var(--hair) solid var(--line);font-size:calc(12 * var(--px));line-height:1.5}
.ledger .l-win .s-lbl{display:block;margin-bottom:calc(4 * var(--px))}
.ledger .l-rows{position:relative;overflow:hidden}
.ledger .l-row{position:absolute;left:0;right:0;display:grid;grid-template-columns:calc(40 * var(--px)) 1fr calc(90 * var(--px)) calc(60 * var(--px));gap:calc(8 * var(--px));align-items:center;padding:0 calc(16 * var(--px));height:calc(34 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px));color:var(--ink-3);transition:top calc(var(--d-settle) * 1.5) var(--e-inout),transform calc(var(--d-settle) * 1.5) var(--e-inout),color var(--d-move),background-color var(--d-move)}
.ledger .l-row.done{color:var(--ink)}
.ledger .l-row .bk{opacity:0;transition:opacity var(--d-move)}
.ledger .l-row.done .bk{opacity:1}
.ledger .l-row .b{opacity:0;transition:opacity var(--d-move)}
.ledger .l-row.done .b{opacity:1}
.ledger .l-row.sel{background:var(--sel)}
.ledger .l-hd{display:grid;grid-template-columns:calc(40 * var(--px)) 1fr calc(90 * var(--px)) calc(60 * var(--px));gap:calc(8 * var(--px));padding:calc(6 * var(--px)) calc(16 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2);font-weight:var(--w-label);border-bottom:var(--hair) solid var(--line)}
.ledger .detail{opacity:0;transition:opacity var(--d-settle) var(--e-out)}
.ledger .detail.on{opacity:1}

/* brix chain */
.chain{--sw:960;padding:calc(24 * var(--px));display:grid;grid-template-columns:1.1fr calc(40 * var(--px)) .9fr calc(40 * var(--px)) 1.2fr calc(40 * var(--px)) .8fr;gap:0;align-items:center;min-height:calc(300 * var(--px))}
.chain .col{align-self:center}
.chain .col .s-lbl{display:block;margin-bottom:calc(8 * var(--px))}
.chain .said{font-size:calc(14 * var(--px));line-height:1.45;min-height:calc(80 * var(--px))}
.chain .said::after{content:"";display:inline-block;width:calc(1 * var(--px));height:calc(14 * var(--px));background:var(--ink);vertical-align:calc(-2 * var(--px));margin-left:calc(2 * var(--px))}
.chain .chips .s-chip{opacity:0;transform:translateY(calc(4 * var(--px)));transition:opacity var(--d-move) var(--e-out),transform var(--d-move) var(--e-out)}
.chain .chips .s-chip.on{opacity:1;transform:none}
.chain .blist{font-size:calc(12 * var(--px))}
.chain .blist .a{display:flex;justify-content:space-between;gap:calc(8 * var(--px));padding:calc(5 * var(--px)) 0;border-bottom:var(--hair) solid var(--line)}
.chain .blist .a span:last-child{color:var(--ink-2);white-space:nowrap}
.chain .tot b{display:block;font-family:var(--font-display);font-weight:var(--w-regular);font-size:calc(44 * var(--px));line-height:1;color:var(--ink)}
.chain .note{margin-top:calc(8 * var(--px));font-size:calc(12 * var(--px));color:var(--ink-2)}
.chain .jn{align-self:center;height:var(--hair);background:var(--ink);position:relative;margin:0 calc(8 * var(--px))}
.chain .jn::after{content:"";position:absolute;right:calc(-1 * var(--px));top:calc(-3 * var(--px));border:calc(3.5 * var(--px)) solid transparent;border-left-color:var(--ink);border-right:0}

/* brix walk */
.walk{display:grid;grid-template-columns:6fr 6fr;gap:var(--s-7) var(--s-6);margin-top:var(--s-6);align-items:start}
.walk .phone-wrap{position:sticky;top:var(--s-6)}
.walk .phone-wrap .figure{--dw:470}
.walk .stepsw{padding-top:var(--s-6)}
.walk .step{padding:var(--s-8) 0;border-top:var(--hair) solid var(--line);transition:opacity var(--d-move) var(--e-out);opacity:.35}
.walk .step.on{opacity:1}
.walk .step:first-child{border-top:0;padding-top:0}
.walk .step .when{font-size:var(--t-small);line-height:var(--lh-small);color:var(--ink-2);margin-bottom:var(--s-2)}
.walk .step h3{font-family:var(--font-display);font-weight:var(--w-regular);font-size:var(--t-heading);line-height:var(--lh-heading);letter-spacing:var(--tr-heading)}
.walk .step p{margin-top:var(--s-3);color:var(--ink-2);max-width:var(--measure)}
.walk .scr{display:none;flex-direction:column;gap:calc(10 * var(--px));flex:1;min-height:0}
.walk .scr.on{display:flex}
.walk .empty{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--ink-3);font-size:calc(12 * var(--px));padding:calc(20 * var(--px))}
.walk .p-line.a{transform:none}
.walk .p-q{opacity:0;transition:opacity var(--d-move)}
.walk .p-q.on{opacity:1}
.walk .p-q.done .opts span.on{background:var(--hi);border-color:var(--hi)}
.walk .p-q .ans{display:none;margin-top:calc(8 * var(--px));font-weight:var(--w-label);color:var(--ink)}
.walk .p-q.done .ans{display:block}
.walk .p-q.done .opts{display:none}
.walk .stamp{display:inline-block;opacity:0;transition:opacity var(--d-move);color:var(--ok);font-weight:var(--w-label)}
.walk .stamp.on{opacity:1}
.walk .p-toast{opacity:0;transition:opacity var(--d-move)}
.walk .p-toast.on{opacity:1}
@media (max-width:1023px){.walk{grid-template-columns:1fr}.walk .phone-wrap{position:sticky;top:var(--s-4);z-index:2}.walk .phone-wrap .figure{--dw:520;max-height:calc(var(--s-11) * 2 + var(--s-8))}.walk .stepsw{padding-top:var(--s-4)}}

/* brix engine */
.engine .ph{font-size:calc(11 * var(--px));color:var(--ink-3);font-weight:var(--w-label);transition:color var(--d-fast)}
.engine .ph.on{color:var(--ink)}
.engine .book tr.lit td{background:var(--sel)}
.engine .book tr td{transition:background-color var(--d-fast)}
.engine .said::after{content:"";display:inline-block;width:calc(1 * var(--px));height:calc(14 * var(--px));background:var(--ink);vertical-align:calc(-2 * var(--px));margin-left:calc(2 * var(--px))}
.engine .sub{opacity:0;transition:opacity var(--d-move)}
.engine .sub.on{opacity:1}
.engine .lines .p-line span:last-child{min-width:calc(48 * var(--px));text-align:right}

/* paylit sync */
.sync2{--sw:960;padding:calc(20 * var(--px)) calc(24 * var(--px));display:grid;grid-template-columns:1fr calc(60 * var(--px)) 1.1fr;gap:calc(16 * var(--px));align-items:start;position:relative}
.sync2 .feed{display:grid;gap:calc(8 * var(--px))}
.sync2 .deal{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(8 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px));display:grid;grid-template-columns:1fr auto;gap:calc(2 * var(--px)) calc(10 * var(--px));transition:transform calc(var(--d-settle) * 1.2) var(--e-inout),opacity calc(var(--d-settle) * 1.2) var(--e-inout)}
.sync2 .deal b{font-weight:var(--w-label)}
.sync2 .deal small{color:var(--ink-2);font-size:calc(11 * var(--px))}
.sync2 .deal .src{grid-column:1 / -1;display:flex;justify-content:space-between;color:var(--ink-2);font-size:calc(10.5 * var(--px))}
.sync2 .deal.go{transform:translateX(calc(60 * var(--px)));opacity:0}
.sync2 .deal.arrive{transform:translateY(calc(10 * var(--px)));opacity:0}
.sync2 .deal.gone{visibility:hidden}
.sync2 .arrow{align-self:center;margin-top:calc(40 * var(--px));height:var(--hair);background:var(--ink);position:relative}
.sync2 .arrow::after{content:"";position:absolute;right:calc(-1 * var(--px));top:calc(-3 * var(--px));border:calc(3.5 * var(--px)) solid transparent;border-left-color:var(--ink);border-right:0}
.sync2 .month{border:var(--hair) solid var(--ink);border-radius:var(--r-1);padding:calc(12 * var(--px)) calc(14 * var(--px))}
.sync2 .blocks{display:flex;gap:calc(4 * var(--px));align-items:flex-end;height:calc(60 * var(--px));margin:calc(10 * var(--px)) 0}
.sync2 .blocks i{flex:1;background:var(--surface);border:var(--hair) solid var(--line-2);height:calc(30 * var(--px))}
.sync2 .blocks i.r2{background:var(--ink-3);border-color:var(--ink-3);height:calc(45 * var(--px))}
.sync2 .blocks i.r3{background:var(--ink);border-color:var(--ink);height:calc(60 * var(--px))}
.sync2 .blocks i.new{background:var(--ok);border-color:var(--ok)}
.sync2 .figs{display:flex;gap:calc(20 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2)}
.sync2 .figs b{display:block;color:var(--ink);font-size:calc(14 * var(--px));font-weight:var(--w-bold)}
.sync2 .mlog{margin-top:calc(10 * var(--px));font-size:calc(11 * var(--px));color:var(--ink-2);display:grid;gap:calc(3 * var(--px))}
.sync2 .mlog .a{transform:none}
@media (max-width:767px){.figure.m-stack .sync2{grid-template-columns:1fr}.figure.m-stack .sync2 .arrow{display:none}.figure.m-stack .manual{grid-template-columns:1fr}.figure.m-stack .manual .side{border-left:0;padding-left:0;border-top:var(--hair) solid var(--line);padding-top:calc(12 * var(--px))}.figure.m-stack .manual .steps4{grid-template-columns:1fr 1fr}.figure.m-stack .chain{grid-template-columns:1fr}.figure.m-stack .chain .jn{display:none}.figure.m-stack .chain .col + .col{margin-top:calc(16 * var(--px))}.figure.m-stack .scatter{grid-template-columns:1fr 1fr}}

/* scout: lighter boxes, toast */
.flow .box .li .st{white-space:nowrap}
[data-anim] .flow .stage{color:var(--ink-2);border-left:calc(2 * var(--px)) solid transparent;padding-left:calc(8 * var(--px));margin-left:calc(-10 * var(--px));transition:color var(--d-move),border-color var(--d-move)}
[data-anim] .flow .stage.on{color:var(--ink);border-left-color:var(--ink)}
[data-anim] .flow .out{opacity:0;transition:opacity var(--d-move)}
[data-anim] .flow .out.on{opacity:1}
.stages .stage{color:var(--ink-2);transition:color var(--d-move)}
.stages .stage.on{color:var(--ink)}
.stages .stage.on span:first-child{font-weight:var(--w-label)}
.stages .out{opacity:0;transition:opacity var(--d-move)}
[data-anim] .stages .out{opacity:0}
.figure:not([data-anim]) .stages .out{opacity:1}
.figure:not([data-anim]) .stages .stage{color:var(--ink)}
.stages .out.on{opacity:1}
.mail{position:relative}
.mail .toast{position:absolute;right:calc(16 * var(--px));top:calc(12 * var(--px));background:var(--paper);border:var(--hair) solid var(--line-2);border-radius:var(--r-2);padding:calc(6 * var(--px)) calc(12 * var(--px));font-size:calc(11.5 * var(--px));display:flex;gap:calc(10 * var(--px));z-index:2;opacity:0;transform:translateY(calc(-6 * var(--px)));transition:opacity var(--d-move) var(--e-out),transform var(--d-move) var(--e-out)}
.mail .toast.on{opacity:1;transform:none}
.mail .toast b{font-weight:var(--w-label)}
.mail .toast span{color:var(--ink-2)}
.mail .m-msg.new{display:none}
.mail .m-msg.new.on{display:block}
.mail .m-msg.on-sel{background:var(--surface)}
.mail .m-read{opacity:0;transition:opacity var(--d-move)}
.mail .m-read.on{opacity:1}
.mail .m-empty{position:absolute;inset:0;left:calc(280 * var(--px));display:flex;align-items:center;justify-content:center;color:var(--ink-3);font-size:calc(12 * var(--px))}
.mail .m-empty:not(.on){display:none}
.m-entry.a{transform:none}
.week .day i{opacity:0;transition:opacity var(--d-move)}
.week .day i.on{opacity:1}
.term .ln.a{transform:none}
@media (max-width:767px){.mail .m-empty{left:0}}
.cal .ev[role="button"]{cursor:pointer}
.cal .ev.sel{border-color:var(--hi);color:var(--hi);background:var(--sel)}
.cal .pop{opacity:0;transition:opacity var(--d-move) var(--e-out),left var(--d-move) var(--e-inout),top var(--d-move) var(--e-inout)}
.cal .pop.on{opacity:1}
.ledger .l-row .bk{display:inline-block;width:calc(3 * var(--px));height:calc(14 * var(--px));vertical-align:middle;margin-right:calc(8 * var(--px));background:var(--ok)}
.ledger .l-row .bk.q{background:var(--ink-2)}.ledger .l-row .bk.t{background:var(--ink-3)}.ledger .l-row .bk.c{background:var(--wn)}.ledger .l-row .bk.h{background:var(--line-2)}
.ledger .l-body > div:first-child{min-width:0}

/* revision 2: transcript, email, money, calendar states */
.tk-w{transition:background-color var(--d-fast),color var(--d-fast);border-radius:var(--r-1);padding:0 calc(2 * var(--px))}
.tk-w.on{background:var(--line);color:var(--hi)}
.fld{opacity:0;transform:translateY(calc(4 * var(--px)));transition:opacity var(--d-move) var(--e-out),transform var(--d-move) var(--e-out)}
.fld.on{opacity:1;transform:none}
.sig{opacity:0;transition:opacity var(--d-move) var(--e-out)}
.sig.on{opacity:1}
.compose .ft{opacity:0;transition:opacity var(--d-move)}
.compose .ft.on{opacity:1}
.compose p.typing::after{content:"";display:inline-block;width:calc(1 * var(--px));height:calc(12 * var(--px));background:var(--ink);vertical-align:calc(-2 * var(--px));margin-left:calc(1 * var(--px))}
.cal .ev.hid{opacity:0}
.cal .ev{transition:opacity var(--d-move) var(--e-out),background-color var(--d-fast),border-color var(--d-fast)}
.money{--sw:960;padding:calc(24 * var(--px));display:grid;grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:auto auto auto;gap:calc(16 * var(--px));align-items:stretch}
.money .tile.below{grid-column:2}
.money .center{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:var(--hair) dashed var(--line-2);border-radius:var(--r-2);padding:calc(20 * var(--px))}
.money .center b{font-family:var(--font-display);font-size:calc(34 * var(--px));line-height:1.1;font-weight:var(--w-regular)}
.money .center span{margin-top:calc(8 * var(--px));color:var(--ink-2);font-size:calc(12 * var(--px))}
.money .tile{border:var(--hair) solid var(--line);border-radius:var(--r-1);padding:calc(10 * var(--px)) calc(12 * var(--px));font-size:calc(12 * var(--px));display:flex;flex-direction:column;gap:calc(6 * var(--px));min-width:0}
.money .tile b{font-weight:var(--w-label)}
.money .tile .tag{align-self:flex-start;font-size:calc(10.5 * var(--px));color:var(--wn);background:var(--wn-soft);border-radius:var(--r-3);padding:0 calc(8 * var(--px))}
.money .tile .tag.bad{color:var(--wn);background:var(--wn-soft)}
.money .tile .in{min-height:calc(24 * var(--px));position:relative}
.money .arrive{position:absolute;left:0;top:0;font-size:calc(11 * var(--px));color:var(--ink-2);white-space:nowrap;opacity:0;transform:translateY(calc(6 * var(--px)));transition:opacity var(--d-move) var(--e-out),transform var(--d-move) var(--e-out)}
.money .arrive.on{opacity:1;transform:none}
.money .dup{opacity:.4;transition:opacity var(--d-fast)}
.money .dup.on{opacity:1}
.chat.wide{--sw:960}
.chat.wide .cbody{height:calc(700 * var(--px))}
.chat .a{max-width:72%}
.chat .q{max-width:60%}
.cats-foot{margin-top:calc(14 * var(--px));padding-top:calc(14 * var(--px));border-top:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.cats-foot b{display:block;font-family:var(--font-display);font-weight:var(--w-regular);font-size:calc(28 * var(--px));line-height:1.1}
.s-panel.cats{display:flex;flex-direction:column}
.s-split.fill{align-items:start;flex:1}
.ledger .l-row .b.ok-ink,.ledger .l-row .b.hi-ink,.ledger .l-row .b.warn-ink{font-weight:var(--w-label)}
.workbook{--sw:960;padding:0}
.workbook .wb-h{display:flex;justify-content:space-between;padding:calc(12 * var(--px)) calc(16 * var(--px));border-bottom:var(--hair) solid var(--line);font-size:calc(12 * var(--px))}
.workbook .wb-h b{font-weight:var(--w-label)}
.workbook .s-tbl td:first-child,.workbook .s-tbl th:first-child{padding-left:calc(16 * var(--px))}
.workbook .s-tbl td.note{white-space:normal;color:var(--ink-2);font-size:calc(11.5 * var(--px))}
@media (max-width:767px){.figure.m-stack .money{grid-template-columns:1fr}.figure.m-stack .money .center{grid-column:1;grid-row:auto}}