/* B2 additions: A's demo sheet, manifesto, prompts and FAQ, plus the seven B2 changes. */
/* ---------- layout ---------- */
.pk{--rail:208px}
.sec{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:0 var(--s-7);padding-block:var(--s-9)}
.rail{position:relative;align-self:start;display:grid;gap:var(--s-2);position:sticky;top:var(--s-5)}
.rail .num{font-size:72px;line-height:.9;font-style:italic;letter-spacing:-.03em;color:var(--terra)}
.rail .kicker{max-width:14em}
.body>*+*{margin-top:var(--s-5)}
.body>.h2{margin-top:0}
.band{background:var(--tint-1)}
.band-2{background:var(--tint-2)}
.band .sec{padding-block:var(--s-9)}
@media (max-width:1000px){
  .sec{grid-template-columns:1fr;gap:var(--s-5);padding-block:var(--s-8)}
  .rail{position:static;display:flex;align-items:baseline;gap:var(--s-3)}
  .rail .num{font-size:40px}
}


/* ---------- demo sheet ---------- */
.sheet{margin-top:var(--s-8);background:var(--tint-1);border-radius:var(--radius-lg);padding:var(--s-4) var(--s-4) var(--s-4)}
.sheet-cap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s-1) var(--s-4);padding:var(--s-1) var(--s-3) var(--s-4)}
.sheet-in{background:var(--surface);border-radius:var(--radius)}
.sheet-bar{display:flex;justify-content:space-between;gap:var(--s-4);padding:var(--s-3) var(--s-5);background:var(--tint-2);border-radius:var(--radius) var(--radius) 0 0;font-size:var(--fs-xs);color:var(--muted)}
.sheet-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.pane{padding:var(--s-6)}
.ledger{background:var(--tint-2);border-radius:0 0 var(--radius) 0}
.pane-title{display:flex;align-items:center;gap:var(--s-2);font-weight:600;font-size:var(--fs-sm);margin-bottom:var(--s-5)}
.badge{margin-left:auto;padding:4px 10px;border-radius:99px;background:var(--surface);font-size:var(--fs-xs);font-weight:600;color:var(--green)}
.ask{display:inline-block;padding:12px 18px;border-radius:18px 18px 18px 4px;background:var(--tint-1);font-size:var(--fs-md)}
.receipt{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-5);font-size:var(--fs-sm);font-weight:600}
.r-rule{flex:1;height:1px;background:var(--tint-1);background:linear-gradient(90deg,#cfd6c2 50%,transparent 0) 0/6px 1px repeat-x}
.r-ok{color:var(--green)}
.r-sum{margin-top:var(--s-1);color:var(--muted)}
.answer{margin-top:var(--s-5);padding:var(--s-5);background:var(--paper);border-radius:var(--radius)}
.a-intro{font:400 var(--fs-xl)/1.2 var(--serif);letter-spacing:-.012em}
.a-list{margin-block:var(--s-4);display:grid;gap:var(--s-3)}
.a-list li{display:grid;grid-template-columns:34px 1fr;gap:var(--s-2)}
.a-list .mono{color:var(--terra)}
.a-tail{color:var(--muted);font-size:var(--fs-sm)}
.used{margin-top:var(--s-4)}
.used summary{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px;font-weight:600;font-size:var(--fs-sm);cursor:pointer;list-style:none}
.used summary::-webkit-details-marker{display:none}
.used[open] summary span{display:inline-block;transform:rotate(45deg)}
.used-list{display:grid;gap:var(--s-3);margin:var(--s-2) 0 var(--s-4)}
.used-list li{padding:var(--s-3) var(--s-4);background:var(--tint-2);border-radius:12px;display:grid;gap:4px;font-size:var(--fs-sm)}
.used-list .mono{color:var(--muted);line-height:1.5}
.ledger-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font-size:var(--fs-lg);margin-bottom:var(--s-4)}
.ledger-head .mono{color:var(--muted)}
.tablist{display:none;gap:var(--s-1);padding:4px;border-radius:12px;background:var(--surface);width:max-content;margin-bottom:var(--s-4)}
.has-tabs .tablist{display:flex}
.has-tabs .tab-h{display:none}
.tab-h{font:600 var(--fs-xs)/1.5 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:var(--s-4) 0 var(--s-2)}
.tab-h span{color:var(--ink)}
.tablist button{min-height:44px;padding:0 var(--s-4);border:0;border-radius:9px;background:transparent;font-size:var(--fs-sm);font-weight:600;color:var(--muted)}
.tablist button span{font-family:var(--mono);margin-left:6px}
.tablist button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.mem{display:grid;gap:var(--s-2)}
.mem li{display:grid;grid-template-columns:28px 1fr;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--surface);border-radius:12px;align-items:start}
.mem b{display:block;font-weight:600;font-size:var(--fs-sm);line-height:1.35}
.mem .mono{display:block;color:var(--muted);margin-top:2px}
.chk{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--paper);font-size:12px;font-weight:700;margin-top:1px}
.withheld .chk{background:var(--tint-1);color:var(--muted)}
.withheld li{background:transparent;color:var(--muted)}
.tabpanel .small{margin-top:var(--s-3)}
.perm{display:flex;gap:var(--s-2);margin-top:var(--s-5);font-size:var(--fs-sm);color:var(--muted)}
.perm span{color:var(--green);font-weight:700}
.sheet-foot{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-5);align-items:center;justify-content:space-between;padding:var(--s-4) var(--s-3) var(--s-1);font-size:var(--fs-lg)}
.sheet-btns{display:flex;flex-wrap:wrap;gap:var(--s-3)}
@media (max-width:860px){
  .sheet-body{grid-template-columns:1fr}
  .ledger{border-radius:0 0 var(--radius) var(--radius)}
  .pane{padding:var(--s-5)}
  .sheet-bar{flex-direction:column;gap:2px}
  .sheet{padding:var(--s-2)}
}


/* ---------- manifesto ---------- */
.manifesto{background:var(--deep);color:var(--paper);padding-block:var(--s-9)}
.manifesto-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-7);align-items:end}
.manifesto .h2{font-size:clamp(38px,5.4vw,76px);margin:var(--s-4) 0 var(--s-6)}
.lines{display:grid;gap:var(--s-1);color:var(--on-deep);font-size:var(--fs-lg)}
.pkmark{font-size:clamp(120px,22vw,300px);line-height:.8;letter-spacing:-.06em;color:var(--paper);font-style:italic}
.pkmark span{color:var(--terra-lite)}
@media (max-width:760px){.manifesto-in{grid-template-columns:1fr}.pkmark{order:-1}}


/* ---------- prompts ---------- */
.prompts{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
.prompts>*+*{margin-top:0}
.prompts-copy>*+*{margin-top:var(--s-5)}
.plist{display:grid;gap:var(--s-2)}
.plist details{background:var(--surface);border-radius:var(--radius)}
.plist summary,.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);min-height:64px;padding:var(--s-3) var(--s-5);font:400 var(--fs-lg)/1.3 var(--serif);letter-spacing:-.01em}
.plist summary::-webkit-details-marker,.faq-list summary::-webkit-details-marker{display:none}
.plist summary i,.faq-list summary i{font-style:normal;font-family:var(--sans);color:var(--terra);font-weight:600}
.plist details[open] summary{color:var(--terra-deep)}
.plist details[open] summary i{transform:rotate(90deg)}
.ans{padding:0 var(--s-5) var(--s-5);display:grid;gap:var(--s-3)}
.ans ol{display:grid;gap:var(--s-2)}
.ans ol li{display:grid;grid-template-columns:34px 1fr}
.ans ol .mono{color:var(--terra)}
.ans .mono{color:var(--muted)}
.srcs{display:grid;gap:var(--s-2)}
.srcs li{padding:var(--s-3) var(--s-4);background:var(--tint-2);border-radius:12px;display:grid;gap:2px;font-size:var(--fs-sm)}
.srcs span{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:var(--fs-md)}
@media (max-width:1000px){.prompts{grid-template-columns:1fr;gap:var(--s-6)}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-7);align-items:start}
.faq>*+*{margin-top:0}
.faq .h2{position:sticky;top:var(--s-5)}
.faq-list details{background:linear-gradient(#d5d9c8,#d5d9c8) top/100% 1px no-repeat}
.faq-list details:first-child{background:none}
.faq-list summary{padding-inline:0;font:400 var(--fs-lg)/1.3 var(--serif)}
.faq-list details[open] summary i{transform:rotate(45deg)}
.faq-list details>div{padding-bottom:var(--s-5);display:grid;gap:var(--s-3);color:var(--muted);max-width:38em}
@media (max-width:1000px){.faq{grid-template-columns:1fr;gap:var(--s-5)}.faq .h2{position:static}}


/* =====================================================================
   B2 additions (new design; nothing outside designs-lab/B2 is changed)
   ===================================================================== */
.b{--rail:208px}
.ch-hero .sheet{margin-top:var(--s-7)}

/* ---------- 1. demo: conversation, ledger, finished response ---------- */
.reply{margin-top:var(--s-5);padding:var(--s-5);background:var(--paper);border-radius:var(--radius)}
.reply-from{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);font-size:var(--fs-xs);font-weight:600;color:var(--muted);margin-bottom:var(--s-3)}
.reply-from .tag{background:var(--tint-1);color:var(--green)}
.reply .a-list li{grid-template-columns:34px 1fr}
.cite{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;margin-left:4px;padding:0 3px;border-radius:6px;vertical-align:baseline;background:var(--tint-1);color:var(--green);font:600 11px/1 var(--sans);text-decoration:none;position:relative;top:-2px}
.cite::before{content:"["}.cite::after{content:"]"}
.cite:hover{background:var(--green);color:var(--paper)}
.cite:focus-visible{outline:3px solid var(--terra);outline-offset:2px}
.used{margin-top:var(--s-4)}
.used summary{display:flex;align-items:center;gap:var(--s-3);min-height:48px;padding:0 var(--s-4);border-radius:12px;background:var(--tint-1);font-weight:600;font-size:var(--fs-sm);cursor:pointer;list-style:none;width:100%;max-width:340px}
.used summary::-webkit-details-marker{display:none}
.used summary:hover{background:var(--tint-2)}
.u-ico{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink)}
.u-ico::before,.u-ico::after{content:"";position:absolute;left:5px;right:5px;top:10px;height:2px;border-radius:1px;background:var(--paper)}
.u-ico::after{transform:rotate(90deg)}
.used[open] summary{background:var(--ink);color:var(--paper)}
.used[open] .u-ico{background:var(--paper)}
.used[open] .u-ico::before,.used[open] .u-ico::after{background:var(--ink)}
.used[open] .u-ico::after{transform:rotate(0)}
.u-text{flex:1}
.u-count{padding:2px 10px;border-radius:99px;background:var(--surface);color:var(--ink);font-size:var(--fs-xs)}
.used:not([open]) .u-count{background:var(--surface)}
.used-list{display:grid;gap:var(--s-2);margin:var(--s-3) 0 0}
.used-list li{display:grid;grid-template-columns:30px 1fr;gap:var(--s-3);padding:var(--s-3) var(--s-4);background:var(--tint-2);border-radius:12px;scroll-margin-top:96px}
.used-list li:target{background:var(--tint-1);box-shadow:inset 4px 0 0 var(--terra)}
.u-n{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--green);color:var(--paper);font:600 12px/1 var(--sans)}
.used-list b{display:block;font-weight:600;font-size:var(--fs-sm);line-height:1.35}
.u-q{display:block;margin-top:4px;font-size:var(--fs-sm);line-height:1.5}
.u-meta{display:block;margin-top:4px;font-size:var(--fs-xs);color:var(--muted)}
.receipt-line{margin-top:var(--s-4);padding:var(--s-2) var(--s-3);border-radius:8px;background:var(--tint-2);color:var(--muted);width:max-content;max-width:100%}
.mem .num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--paper);font:600 12px/1 var(--sans)}
.withheld .num{background:var(--tint-1);color:var(--muted)}
.chk{font-family:var(--sans)}

/* ---------- 2. tools strip with monochrome icons ---------- */
.tools{margin-top:var(--s-8);text-align:center;display:grid;gap:var(--s-4);justify-items:center}
.tool-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-4) var(--s-6)}
.tool-list li{display:flex;align-items:center;gap:var(--s-3);font:400 clamp(20px,2.2vw,26px)/1 var(--serif);letter-spacing:-.015em;color:var(--ink)}
.ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--tint-1);color:var(--ink);overflow:hidden;font:500 18px/1 var(--sans)}
.ico svg{width:22px;height:22px}
.ico .gl{display:block;line-height:1;transform:translateY(-1px)}
.ico img{width:40px;height:40px;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;opacity:.8}

/* ---------- 3. review card: three text styles (+ the keycap buttons) ---------- */
.card3 .claim{font:400 28px/1.25 var(--serif);letter-spacing:-.01em}
.card3 .lbl{font:500 12px/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.card3 .body,.card3 .body *{font:400 15px/1.5 var(--sans);letter-spacing:0;color:var(--ink)}
.card3 .state{padding:4px 12px;border-radius:99px;background:var(--tint-1)}
.card3 .state[data-s=restrict],.card3 .state[data-s=reject]{background:#f3ddd5}
.card3 .q{padding:var(--s-3) var(--s-4)}
.card3 .q footer{margin-top:6px}
.card3 .impact{background:var(--ex-chip);padding:var(--s-3) var(--s-4);border-radius:10px}
.card3 .scope dd{margin:2px 0 0}
.card3 .edit textarea{font:400 15px/1.5 var(--sans)}
.card3 .edit>span{font:500 12px/1.4 var(--sans);color:var(--muted)}
.card3 .legend-lbl{font:500 12px/1.4 var(--sans);color:var(--muted)}

/* ---------- 4. "built to grow": a token travels node to node ---------- */
.grow .chain{position:relative;display:grid;grid-template-columns:min(100%,260px);justify-content:center;gap:0}
.grow .chain li{padding:0}
.grow .node{display:grid;place-items:center;height:48px;border-radius:99px;background:var(--ink);color:var(--paper);font-weight:600;font-size:var(--fs-sm);text-align:center}
.grow .arr{position:relative;height:40px;background:none}
.grow .arr::before{content:"";position:absolute;left:50%;top:2px;bottom:10px;width:2px;margin-left:-1px;border-radius:1px;background:var(--terra)}
.grow .arr::after{content:"";position:absolute;left:50%;bottom:8px;width:9px;height:9px;margin-left:-4.5px;border-right:2px solid var(--terra);border-bottom:2px solid var(--terra);transform:rotate(45deg);transform-origin:center}
.grow .token{display:block;position:absolute;left:calc(50% - min(50%,130px) + 12px);top:183px;width:34px;height:34px;background:url('/owl-sign-160.png') center/contain no-repeat;pointer-events:none}
.grow-ctl{margin-top:var(--s-3)}
@media (prefers-reduced-motion:no-preference){
 @media (scripting:enabled){
  .grow.is-play .token{display:block;animation:g-token 10s var(--ease-io) 1 forwards}
  .grow.is-play .n1{animation:g-n1 10s ease 1 forwards}
  .grow.is-play .n2{animation:g-n2 10s ease 1 forwards}
  .grow.is-play .n3{animation:g-n3 10s ease 1 forwards}
  .grow.is-play .a1{animation:g-a1 10s ease 1 forwards}
  .grow.is-play .a2{animation:g-a2 10s ease 1 forwards}
 }
}
@keyframes g-token{0%{top:7px;opacity:0;translate:0 0}3%{opacity:1}8%,14%{top:7px;translate:0 0}22%{translate:0 -10px}30%,36%{top:95px;translate:0 0}44%{translate:0 -10px}52%,100%{top:183px;opacity:1;translate:0 0}}
@keyframes g-n1{0%,2%{background:var(--surface);color:var(--ink)}6%,100%{background:var(--ink);color:var(--paper)}}
@keyframes g-n2{0%,28%{background:var(--surface);color:var(--ink)}33%,100%{background:var(--ink);color:var(--paper)}}
@keyframes g-n3{0%,54%{background:var(--surface);color:var(--ink)}59%,100%{background:var(--ink);color:var(--paper)}}
@keyframes g-a1{0%,10%{opacity:.18}20%,100%{opacity:1}}
@keyframes g-a2{0%,38%{opacity:.18}48%,100%{opacity:1}}

/* ---------- 7. teaser mark ---------- */
.tease-card .tn-disc{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--paper)}
.tease-card .tn-disc img{width:52px;height:52px}
.tease .lead{max-width:34em}

/* ---------- loop for the demo (same sequence as A) ---------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .sheet:not(.is-still) .l-item{animation:pk-rise 16s var(--ease) both}
  .sheet:not(.is-still) .mem li:nth-child(1){animation-delay:.6s}
  .sheet:not(.is-still) .mem li:nth-child(2){animation-delay:1.4s}
  .sheet:not(.is-still) .mem li:nth-child(3){animation-delay:2.2s}
  .sheet:not(.is-still) .mem li:nth-child(4){animation-delay:3s}
  .sheet:not(.is-still) .reply .a-intro{animation-delay:4.4s}
  .sheet:not(.is-still) .a-list li:nth-child(1){animation-delay:5.2s}
  .sheet:not(.is-still) .a-list li:nth-child(2){animation-delay:6s}
  .sheet:not(.is-still) .a-list li:nth-child(3){animation-delay:6.8s}
  .sheet:not(.is-still) .a-tail{animation-delay:7.8s}
  .sheet:not(.is-still) .receipt-line{animation-delay:8.8s}
  .sheet:not(.is-still) .mem .num{animation:pk-pop 16s var(--ease) both}
  .sheet:not(.is-still) .mem li:nth-child(1) .num{animation-delay:.6s}
  .sheet:not(.is-still) .mem li:nth-child(2) .num{animation-delay:1.4s}
  .sheet:not(.is-still) .mem li:nth-child(3) .num{animation-delay:2.2s}
  .sheet:not(.is-still) .mem li:nth-child(4) .num{animation-delay:3s}
  .sheet:not(.is-still) .r-ok{animation:pk-pop 16s var(--ease) both;animation-delay:3.8s}
  .used-list li{transition:background .3s}
  .used summary,.u-ico{transition:background .2s,color .2s}
  .u-ico::after{transition:transform .2s var(--ease)}
  .manifesto[data-io]:not(.is-in) .lines span,.manifesto[data-io]:not(.is-in) .pkmark{opacity:0;transform:translateY(14px)}
  .manifesto .lines span,.manifesto .pkmark{transition:opacity .9s var(--ease),transform .9s var(--ease)}
  .manifesto.is-in .lines span:nth-child(2){transition-delay:.25s}
  .manifesto.is-in .lines span:nth-child(3){transition-delay:.5s}
  .manifesto.is-in .pkmark{transition-delay:.7s}
  .plist summary i,.faq-list summary i{transition:transform .22s var(--ease)}
}
@keyframes pk-rise{0%,4%{opacity:0;transform:translateY(10px)}10%,100%{opacity:1;transform:none}}
@keyframes pk-pop{0%,8%{transform:scale(0)}13%{transform:scale(1.25)}17%,100%{transform:scale(1)}}

/* fixes after live check */
.used[open] summary span{transform:none}
.mem .mono,.mem b+.mono{font-weight:400}
.ico .gl{font-size:24px;font-weight:500}
.ico .gl.gl-code{font-size:17px;font-weight:700;letter-spacing:-.04em}
.ico svg{width:24px;height:24px}
.ico img{width:26px;height:26px;border-radius:50%;filter:grayscale(1) brightness(1.5) contrast(.7);opacity:.7}
.card3 .decide .btn[aria-pressed=false]{background:var(--tint-1);color:var(--ink);box-shadow:0 3px 0 #cdd5c0}
.grow .chain{width:100%;justify-items:stretch;grid-template-columns:minmax(0,260px)}
.grow .node{padding:0 18px;white-space:nowrap}
.grow .arr{justify-self:stretch}
.grow .arr::before,.grow .arr::after{left:50%}
.tease-card .tn-disc img{width:44px;height:44px}
.sheet-body>*{min-width:0}
.sheet-body{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media (max-width:860px){.sheet-body{grid-template-columns:minmax(0,1fr)}}
.receipt-line{width:auto;max-width:100%;overflow-wrap:anywhere}
.receipt{flex-wrap:wrap}

/* ---------- round 2: captions, withheld rows, tidy ---------- */
.cap{display:block;margin-top:2px;font:400 12px/1.45 var(--sans);color:var(--muted);letter-spacing:0}
.mem li{align-items:start}
.ledger .mem.withheld li{grid-template-columns:28px minmax(0,1fr) auto;align-items:center;background:var(--surface);color:var(--ink)}
.ledger .mem.withheld .num{background:var(--tint-1);color:var(--muted)}
.mem .chip{padding:3px 10px;border-radius:99px;background:var(--tint-1);color:var(--muted);font:600 12px/1.4 var(--sans);white-space:nowrap}
.ledger .mem.withheld li.mem-note{display:block;background:transparent;padding:var(--s-1) var(--s-1) 0}
.ledger .mem.withheld li[hidden]{display:none}
.ledger .mem li[hidden]{display:none}
.used-list li[hidden],.cite[hidden]{display:none}
.srcs em{font-style:normal;font-size:var(--fs-xs);color:var(--muted)}
.ico svg{width:24px;height:24px}
.tabpanel .small{margin-top:0}
.ico img{width:24px;height:24px}
.receipt-line{width:fit-content}
.tool-list li:nth-child(3) .ico svg{width:20px;height:20px}
.tool-list li:nth-child(4) .ico svg,.tool-list li:nth-child(5) .ico svg{width:22px;height:22px}

/* round 2b: no decorative mono labels; one plain receipt caption */
.sheet .mono,.a-list .mono,#r-count{font-family:var(--sans);letter-spacing:0}
.a-list .mono{font-size:12px;font-weight:600;padding-top:3px}
#r-count{font-size:var(--fs-xs);font-weight:600}
.cap-block{margin-top:var(--s-4);display:grid;gap:4px;max-width:34em}
.cap-block .cap{margin:0}
.ledger-head{justify-content:flex-start}
.b .mono{font-family:var(--sans);letter-spacing:0}
.tablist button span{font-family:var(--sans);font-weight:600}

/* three question cards: title, sub text and link sit on the same rows across the cards */
@media (min-width:861px){
  .cols3 article{display:flex;flex-direction:column;gap:var(--s-3)}
  .cols3 article h3{min-height:2.35em}          /* room for two lines, so a one-line title does not pull the rest up */
  .cols3 article .textlink{margin-top:auto}      /* links pinned to the bottom edge */
  @supports (grid-template-rows:subgrid){
    .cols3{grid-template-rows:auto auto auto}
    .cols3 article{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:var(--s-3)}
    .cols3 article h3{min-height:0}
    .cols3 article .textlink{margin-top:0;align-self:end}
  }
}

/* chapter dots over a dark section: pale rail, the current dot in the site's light clay (terracotta is invisible on deep green) */
@media (min-width:1100px){
  .dots.on-dark a::before{background:rgba(201,210,192,.55)}
  .dots.on-dark a.cur::before{background:var(--terra-lite);transform:scale(1.4);box-shadow:0 0 0 4px rgba(225,173,140,.22)}
}

/* the question is the person's own message: right-aligned, tail on the right, labelled "You" */
.ask-who{margin:0 0 4px;text-align:right;font-size:var(--fs-xs);font-weight:600;color:var(--muted)}
.ask{display:block;width:fit-content;max-width:88%;margin-left:auto;border-radius:18px 18px 4px 18px;text-align:left}

/* one line that ties the right panel to the conversation on the left */
.ledger-note{margin:6px 0 var(--s-4);max-width:34em;font-size:var(--fs-sm);line-height:1.5;color:var(--muted)}

/* the person's message sits on the left, in line with the PersonaKit line and the answer under it */
.ask-who{text-align:left}
.ask{margin-left:0;margin-right:auto;border-radius:18px 18px 18px 4px}

/* "built to grow" starts when it scrolls into view (not at page load) and can be replayed */
@media (prefers-reduced-motion:no-preference){
 @media (scripting:enabled){
  .grow.grow-armed:not(.is-play) .node{background:var(--surface);color:var(--ink)}
  .grow.grow-armed:not(.is-play) .arr{opacity:.18}
  .grow.grow-armed:not(.is-play) .token{top:7px;opacity:0}
 }
}