/* Live scenes: Lesson 7 papers and the flow of the load. Brand: navy #0B1F3A, orange #FF6A13, paper #F3F5F8. */
@font-face{font-family:FUDocSans;src:url(/assets/fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:FUDocSans;src:url(/assets/fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:FUDocSans;src:url(/assets/fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:FUDocMono;src:url(/assets/fonts/plex-mono-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:FUDocHand;src:url(/assets/fonts/caveat-500.woff2) format('woff2');font-display:swap}

.teaching-slide:has(.live-scene){grid-template-columns:.82fr 1.18fr}
.slide-visual:has(.live-scene){padding:18px 20px 18px 0;align-items:stretch}
.live-scene{--ink:#0B1F3A;--org:#FF6A13;position:relative;margin:0;width:100%;min-height:360px;aspect-ratio:4/3.1;border-radius:10px;overflow:hidden;background:#1a1512;box-shadow:0 22px 50px #0006,inset 0 0 0 1px #ffffff14;isolation:isolate;font-family:FUDocSans,system-ui,sans-serif;color:var(--ink)}
.ls-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 30% 20%,#7a5a3c 0%,#4a3626 45%,#2a1f17 100%)}
.ls-bg:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(92deg,#ffffff05 0 2px,transparent 2px 9px),repeating-linear-gradient(88deg,#00000010 0 1px,transparent 1px 23px)}
.ls-bg.has-photo{background:var(--bg) center/cover no-repeat}
.ls-bg.has-photo:before{background:linear-gradient(180deg,#0b1f3a33,#0b1f3a10 40%,#0b1f3a66);backdrop-filter:blur(1.5px) saturate(.95)}
.ls-stage{position:absolute;inset:0;overflow:hidden}
.ls-tag{position:absolute;right:10px;top:9px;font:700 9.5px/1 FUDocSans,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#fff;background:#0b1f3acc;padding:6px 9px;border-radius:20px;z-index:4}
.ls-full{position:absolute;left:10px;top:8px;z-index:4;font-size:11px;color:#fff;background:#0b1f3acc;padding:5px 9px;border-radius:20px;text-decoration:none}
.ls-full:hover{background:var(--org)}

/* doc camera */
.ls-cam{position:absolute;left:0;top:0;width:850px;transform-origin:0 0;transition:transform 1.15s cubic-bezier(.65,.02,.2,1);will-change:transform}
.ls-cam.no-ease{transition:none}
.ls-drop{position:relative;animation:lsDrop .9s cubic-bezier(.2,.8,.2,1) both}
@keyframes lsDrop{from{transform:translateY(90px) rotate(2.5deg);opacity:0}to{transform:none;opacity:1}}
.ls-doc{width:850px;background:#fff;box-shadow:0 2px 3px #0003,0 30px 60px #0007;opacity:0;transition:opacity .4s}
.is-ready .ls-doc{opacity:1}
.ls-ink{position:absolute;left:0;top:0;width:850px;pointer-events:none;overflow:visible}
.ls-mask{fill:#0b1f3a;fill-rule:evenodd;opacity:0;transition:opacity .6s}
.ls-ink.on .ls-mask{opacity:.34}
.ls-ring{fill:none;stroke:var(--org);stroke-width:4;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s .35s cubic-bezier(.4,0,.2,1),x .9s,y .9s,width .9s,height .9s;filter:drop-shadow(0 0 6px #ff6a1388);opacity:0}
.ls-ink.on .ls-ring{opacity:1}
.ls-ink[data-tone=warn] .ls-ring{stroke:#e5432b;filter:drop-shadow(0 0 6px #e5432b88)}
.ls-ink[data-tone=good] .ls-ring{stroke:#2fa865;filter:drop-shadow(0 0 6px #2fa86588)}
.no-doc .ls-stage:after{content:'Open the paper full size above';position:absolute;inset:0;display:grid;place-items:center;color:#fff}

/* handwritten note */
.ls-note{position:absolute;left:14px;right:14px;bottom:14px;z-index:5;display:flex;justify-content:center;pointer-events:none}
.ls-note span{max-width:92%;font:500 clamp(20px,2.2vw,29px)/1.15 FUDocHand,cursive;color:#14286e;background:#fffaf0;padding:9px 18px 11px;border-radius:3px;box-shadow:0 10px 26px #0006;transform:rotate(-1.2deg) translateY(18px);opacity:0;transition:opacity .45s .55s,transform .6s .55s cubic-bezier(.2,.8,.2,1);position:relative}
.ls-note span:before{content:'';position:absolute;left:50%;top:-9px;width:62px;height:18px;margin-left:-31px;background:#ff6a13b3;transform:rotate(2deg)}
.ls-note.on span{opacity:1;transform:rotate(-1.2deg)}
.ls-note[data-tone=warn] span{color:#b3261e}
.ls-note[data-tone=good] span{color:#1d6b3f}

/* flow of the load */
.lf{position:absolute;inset:0;padding:34px 16px 16px}
.lf-map{position:absolute;left:3%;top:48px;width:94%;height:auto;opacity:0;transition:opacity .8s}
.k-road .lf-map,.k-card1 .lf-map,.k-all .lf-map{opacity:1}
.lf-road{fill:none;stroke:#ffffffb3;stroke-width:7;stroke-linecap:round;stroke-dasharray:2 16}
.lf-road-lit{fill:none;stroke:var(--org);stroke-width:7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.6s cubic-bezier(.5,0,.3,1)}
.k-truck-nashville .lf-road-lit{stroke-dashoffset:0}
.lf-city circle{fill:#fff;stroke:var(--org);stroke-width:4}
.lf-city text{fill:#fff;font:700 22px FUDocSans,sans-serif;paint-order:stroke;stroke:#0b1f3acc;stroke-width:5px}
.lf-city text.sm{font:500 13px FUDocSans,sans-serif;stroke-width:4px}
.lf-truck{opacity:0;transition:opacity .5s;filter:drop-shadow(0 4px 5px #0009)}
.k-truck-memphis .lf-truck,.k-truck-nashville .lf-truck{opacity:1}
.lf-cards{position:absolute;left:12px;right:12px;bottom:68px;display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.lf-card{background:#fffdf8;border-radius:7px;padding:6px 6px 8px;box-shadow:0 10px 22px #0007;opacity:0;transform:translateY(-140px) rotate(calc(var(--i)*3deg - 9deg)) scale(.8);transition:opacity .45s,transform .75s cubic-bezier(.2,.9,.25,1.1),box-shadow .3s;position:relative;min-width:0}
.lf-card .lf-thumb{aspect-ratio:850/1100;background:#fff center top/cover no-repeat;border:1px solid #d8dde4;border-radius:2px}
.lf-card b{position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;display:grid;place-items:center;box-shadow:0 0 0 2px #fff}
.lf-card strong{display:block;font-size:clamp(9px,.95vw,12.5px);line-height:1.15;margin-top:5px;color:var(--ink)}
.lf-card small{display:block;font-size:clamp(8px,.75vw,10px);color:#b34c0a;font-weight:700;margin-top:2px;line-height:1.15}
.k-card1 .lf-card[data-n="1"],.k-card2 .lf-card[data-n="2"],.k-card3 .lf-card[data-n="3"],.k-card4 .lf-card[data-n="4"],.k-card5 .lf-card[data-n="5"],.k-card6 .lf-card[data-n="6"],.k-card7 .lf-card[data-n="7"]{opacity:1;transform:none}
.k-deal .lf-card{transition-delay:calc(var(--i)*.18s)}
.lf-card.lit{box-shadow:0 0 0 3px var(--org),0 14px 28px #000a;transform:translateY(-10px) scale(1.06)!important;z-index:2}
.k-focusing .lf-card:not(.lit){opacity:.42}
.k-broken .lf-card[data-n="4"]{filter:grayscale(1);opacity:.38!important}
.k-broken .lf-card[data-n="4"]:after{content:'✕';position:absolute;inset:0;display:grid;place-items:center;font-size:54px;color:#e5432b;font-weight:700}
.lf-links{position:absolute;left:18px;right:18px;bottom:58px;height:3px;background:var(--org);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.5,0,.3,1);border-radius:3px}
.k-links .lf-links{transform:scaleX(1)}
.k-broken .lf-links{background:linear-gradient(90deg,var(--org) 0 50%,transparent 50% 58%,#e5432b 58%)}
.lf-money,.lf-broken{position:absolute;left:50%;bottom:16px;transform:translate(-50%,12px);white-space:nowrap;font-size:14px;padding:8px 14px;border-radius:30px;opacity:0;transition:opacity .4s,transform .5s}
.lf-money{background:#1d6b3f;color:#fff}.lf-money b{font-size:17px}
.k-money:not(.k-broken) .lf-money{opacity:1;transform:translate(-50%,0)}
.lf-broken{background:#b3261e;color:#fff;font-weight:700}
.k-broken:not(.now-all) .lf-broken{opacity:1;transform:translate(-50%,0)}
.lf-stamp{position:absolute;right:22px;top:46%;border:3px solid #ff6a13d0;color:#ff6a13;font-weight:800;letter-spacing:2px;padding:6px 12px;transform:rotate(-8deg) scale(1.6);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);background:#0b1f3a88}
.k-stamp .lf-stamp{opacity:1;transform:rotate(-8deg) scale(1)}
.lsx-flow .ls-note{bottom:auto;top:40%}

/* mismatch */
.mm{position:absolute;inset:0}
.mm-slip{position:absolute;left:7%;width:62%;background:#fffdf8;padding:12px 16px 14px;box-shadow:0 16px 34px #0008;opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.2,.9,.25,1.1);clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,90% 90%,84% 100%,76% 92%,68% 100%,60% 91%,50% 100%,40% 92%,30% 100%,20% 91%,10% 100%,0 92%)}
.mm-bol{top:15%;transform:translateX(-60px) rotate(-3deg)}
.mm-rc{top:47%;left:30%;transform:translateX(60px) rotate(2deg)}
.k-bol .mm-bol{opacity:1;transform:rotate(-2deg)}
.k-rc .mm-rc{opacity:1;transform:rotate(1.5deg)}
.mm-h{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#53606f}
.mm-l{font-size:11px;font-weight:700;color:#b04a0c;margin-top:8px}
.mm-v{font:700 clamp(26px,3.2vw,40px)/1.1 FUDocMono,monospace;letter-spacing:2px;color:#111}
.dg{font-style:normal;display:inline-block;white-space:pre;transition:color .3s,transform .3s}
.k-stop .dg.bad{color:#d4301c;transform:translateY(-3px);text-shadow:0 0 0 #d4301c;border-bottom:4px solid #d4301c}
.k-fixed .mm-bol .dg.bad{color:#999;text-decoration:line-through;border-bottom:0}
.k-fixed .mm-rc .dg.bad{color:#1d6b3f;border-bottom-color:#1d6b3f}
.mm-fix{font:500 24px/1 FUDocHand,cursive;color:#14286e;margin-top:4px;height:0;overflow:hidden;opacity:0;transition:opacity .6s}
.k-fixed .mm-fix{height:auto;opacity:1}
.mm-think{position:absolute;right:6%;top:12%;max-width:34%;font:500 clamp(18px,2vw,26px)/1.15 FUDocHand,cursive;color:#fff;opacity:0;transition:opacity .5s}
.now-think .mm-think{opacity:1}
.mm-stamp{position:absolute;right:7%;top:20%;font-weight:800;letter-spacing:2px;font-size:clamp(18px,2vw,26px);padding:8px 14px;border:4px solid;transform:rotate(-10deg) scale(1.7);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);background:#fffdf8e8}
.mm-no{color:#c62b1a;border-color:#c62b1a}.mm-ok{color:#1d6b3f;border-color:#1d6b3f}
.k-stop:not(.k-fixed) .mm-no{opacity:1;transform:rotate(-10deg)}
.k-fixed .mm-ok{opacity:1;transform:rotate(-10deg)}
.mm-call,.mm-log{position:absolute;left:7%;right:7%;background:#0b1f3ae6;color:#fff;border-radius:10px;padding:10px 14px;display:flex;gap:12px;align-items:center;font-size:13px;line-height:1.4;opacity:0;transform:translateY(16px);transition:opacity .45s,transform .5s}
.mm-call{bottom:20%}.mm-call .ph{font-size:26px;color:var(--org)}
.k-call .mm-call{opacity:1;transform:none}
.k-log .mm-call{opacity:.5}
.mm-log{bottom:5%;background:#fffaf0;color:#14286e;font:500 clamp(18px,2vw,25px)/1.2 FUDocHand,cursive}
.k-log .mm-log{opacity:1;transform:none}

/* verify a notice */
.vf{position:absolute;inset:0;padding:44px 20px 18px;display:flex;flex-direction:column;justify-content:center}
.vf-mail{position:relative;margin:0 6% 0 4%;background:#fff;border-radius:8px;box-shadow:0 16px 34px #0008;overflow:hidden;opacity:0;transform:translateY(-30px);transition:opacity .5s,transform .7s cubic-bezier(.2,.9,.25,1.1)}
.k-email .vf-mail{opacity:1;transform:none}
.vf-mh{display:flex;justify-content:space-between;gap:8px;background:#eef1f5;padding:7px 12px;font-size:11.5px}.vf-mh span{color:#556}
.vf-mb{padding:10px 12px 12px;font-size:14px;line-height:1.4}.vf-mb small{color:#b04a0c;font-weight:700}
.vf-hold{position:absolute;right:12px;bottom:10px;border:3px solid #c62b1a;color:#c62b1a;font-weight:800;letter-spacing:1.5px;padding:4px 10px;transform:rotate(-8deg) scale(1.6);opacity:0;transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1);background:#fffe}
.k-hold .vf-hold{opacity:1;transform:rotate(-8deg)}
.k-real .vf-mail,.k-fake .vf-mail{opacity:.55}
.vf-steps{list-style:none;padding:0;margin:14px 6% 0 4%;display:grid;gap:8px}
.vf-steps li{display:flex;align-items:center;gap:12px;background:#0b1f3ae8;color:#fff;border-radius:9px;padding:9px 12px;font-size:13px;line-height:1.35;opacity:0;transform:translateX(-24px);transition:opacity .45s,transform .55s}
.vf-steps .ph{font-size:24px;color:var(--org)}.vf-steps div{flex:1}.vf-steps em{font-style:normal;font-size:22px;color:#4ad08a;opacity:0;transition:opacity .4s 1.2s}
.k-call1 .vf-c1,.k-call2 .vf-c2{opacity:1;transform:none}
.k-call2 .vf-c1 em,.k-real .vf-c2 em{opacity:1}
.vf-res{margin:10px 6% 0 4%;border-radius:9px;padding:9px 13px;font-size:14px;color:#fff;opacity:0;transform:scale(.96);transition:opacity .45s,transform .45s;display:none}
.vf-real{background:#1d6b3f}.vf-fake{background:#a3261c}
.k-real .vf-real{display:block}.k-fake .vf-fake{display:block}
.now-real .vf-real,.now-fake .vf-fake,.k-stamp .vf-fake,.k-stamp .vf-real{opacity:1;transform:none}
.now-fake .vf-real{opacity:.45}
.vf-stamp{position:absolute;right:6%;top:13%;z-index:3;border:3px solid #0b1f3ad0;color:#0b1f3a;background:#fffaf0;font-weight:800;letter-spacing:1px;font-size:13px;line-height:1.25;text-align:center;padding:6px 12px;transform:rotate(-6deg) scale(1.7);opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1);box-shadow:0 10px 20px #0006}
.k-stamp .vf-stamp{opacity:1;transform:rotate(-6deg)}

/* money */
.mo{position:absolute;inset:0;padding:44px 18px 18px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.mo-row{position:relative;height:86px}
.mo-inv,.mo-ghost{position:absolute;inset:0;background:var(--ink);color:#fff;border-radius:9px;display:flex;flex-direction:column;justify-content:center;padding:0 16px;box-shadow:0 12px 26px #0007;opacity:0;transform:scaleX(.6);transform-origin:left;transition:opacity .5s,transform .8s cubic-bezier(.2,.9,.25,1)}
.mo b{font-size:clamp(22px,2.6vw,32px);line-height:1}.mo small{font-size:12px;opacity:.85;margin-top:3px}
.k-invoice .mo-inv{opacity:1;transform:none}
.k-fee .mo-inv{opacity:0}
.mo-bar{position:absolute;inset:0;display:flex;gap:6px}
.mo-873,.mo-27{border-radius:9px;display:flex;flex-direction:column;justify-content:center;padding:0 14px;color:#fff;box-shadow:0 12px 26px #0007;opacity:0;transition:opacity .5s,transform .8s cubic-bezier(.2,.9,.25,1),background .6s}
.mo-873{flex:97;background:var(--ink)}.mo-27{flex:3;min-width:118px;background:#7a8696;transform:translateX(0)}
.k-fee .mo-873,.k-fee .mo-27{opacity:1}
.k-fee .mo-27{transform:translateX(0) translateY(0)}
.k-funded .mo-873{background:#1d6b3f}
.k-funded .mo-27{transform:translateY(8px) rotate(3deg)}
.mo-873 small{opacity:0;transition:opacity .5s .3s}.k-funded .mo-873 small{opacity:.9}
.mo-ghost{background:#ffffff26;border:2px dashed #ffffff88;box-shadow:none;color:#fff}
.k-later .mo-ghost{opacity:1;transform:none}
.mo-flow{display:flex;align-items:center;gap:10px;background:#fffdf8;border-radius:9px;padding:9px 12px;font-size:13px;box-shadow:0 10px 22px #0006;opacity:0;transform:translateY(12px);transition:opacity .45s,transform .5s}
.mo-flow span{font-weight:700;white-space:nowrap}.mo-flow i{flex:1;text-align:center;font-style:normal;color:#b34c0a;font-weight:700}
.k-collect .mo-collect,.k-direct .mo-direct{opacity:1;transform:none}
.now-direct .mo-collect{opacity:.5}
.mo-risk{font:500 clamp(17px,1.8vw,23px)/1.2 FUDocHand,cursive;color:#fff;background:#a3261ce6;border-radius:9px;padding:8px 12px;opacity:0;transition:opacity .45s;display:none}
.k-risk .mo-risk{display:block}.now-risk .mo-risk{opacity:1}.k-direct .mo-risk{display:none}
.mo-both{align-self:center;font:500 clamp(20px,2.2vw,28px)/1 FUDocHand,cursive;color:#14286e;background:#fffaf0;padding:8px 16px;border-radius:3px;transform:rotate(-1deg);opacity:0;transition:opacity .5s}
.k-both .mo-both{opacity:1}.k-both .mo-collect,.k-both .mo-direct{opacity:1}

@media(max-width:760px){
 .teaching-slide:has(.live-scene){grid-template-columns:1fr}
 .slide-visual:has(.live-scene){padding:8px 12px 18px}
 .live-scene{min-height:0;aspect-ratio:4/3.7}
 .live-scene.lsx-flow,.live-scene.lsx-verify,.live-scene.lsx-money,.live-scene.lsx-mismatch{aspect-ratio:4/5}
 .ls-tag{display:none}
 .ls-note span{font-size:19px;padding:7px 12px 9px}
 .lf-map{top:36px}
 .lf-cards{grid-template-columns:repeat(4,1fr);bottom:54px;gap:5px;left:8px;right:8px}
 .lf-card{padding:4px 4px 6px}.lf-card .lf-thumb{aspect-ratio:850/620}
 .lf-card strong{font-size:10px}.lf-card small{display:none}
 .lf-money,.lf-broken{font-size:12px;bottom:12px}
 .vf{padding:40px 10px 12px}.vf-mb{font-size:12.5px}.vf-steps li{font-size:11.5px;padding:7px 10px}.vf-res{font-size:12.5px}
 .vf-stamp{font-size:11px;top:8%}
 .mo{padding:40px 10px 12px;gap:8px}.mo-row{height:62px}
 .mo-flow{flex-wrap:wrap;font-size:11.5px;gap:4px 8px}.mo-flow i{order:3;flex-basis:100%;text-align:left}
 .mm-slip{width:84%;left:4%}.mm-bol{top:9%}.mm-rc{left:12%;top:41%}.mm-stamp{top:3%;right:4%;font-size:14px;padding:5px 9px}
 .mm-call{bottom:14%;font-size:11.5px;left:4%;right:4%}.mm-log{left:4%;right:4%;font-size:17px}
 .mm-think{right:4%;top:auto;bottom:24%;max-width:70%}
 .lf-stamp{top:24%;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.live-scene *{transition-duration:.01s!important;animation:none!important}}

/* ===== board: the general kit ===== */
.kb{position:absolute;inset:0;--cols:3}
.kb-page{position:absolute;inset:0;padding:42px 18px 66px;display:none;flex-direction:column}
.kb-page.cur{display:flex;animation:kbPage .5s ease both}
@keyframes kbPage{from{opacity:0}to{opacity:1}}
.kb-title{align-self:flex-start;font:700 11px/1 FUDocSans,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:#fff;background:#0b1f3acc;padding:7px 11px;border-radius:4px;margin-bottom:10px}
.kb-flow{flex:1;min-height:0;display:flex;gap:14px;align-items:center;justify-content:center;position:relative}
.kb-row .kb-flow{flex-direction:row;flex-wrap:nowrap}.kb-row .kb-flow>.kb-el{flex:1 1 0;min-width:0}
.kb-column .kb-flow{flex-direction:column;align-items:stretch;justify-content:center}
.kb-grid .kb-flow{display:grid;grid-template-columns:repeat(var(--cols),1fr);align-content:center}
.kb-cycle .kb-flow>.kb-el{position:absolute;width:30%}
.kb-free .kb-flow{display:block}
.kb-el{position:relative;opacity:0;transform:translateY(16px) scale(.97);transition:opacity .5s,transform .6s cubic-bezier(.2,.9,.25,1.1),box-shadow .3s,filter .3s;font-family:FUDocSans,sans-serif;color:var(--ink)}
.kb-el.on{opacity:1;transform:none}
.kb-at{position:absolute;z-index:3}
.is-focusing .kb-el.on:not(.lit):not(.kb-stamp){filter:saturate(.6) brightness(.82);opacity:.55}
.kb-el.lit{box-shadow:0 0 0 3px var(--org),0 18px 34px #000a!important;transform:translateY(-4px) scale(1.02);z-index:4}
.kb-mark{position:absolute;right:-8px;top:-10px;width:30px;height:30px;border-radius:50%;display:none;place-items:center;font:700 17px/1 FUDocSans,sans-serif;color:#fff;box-shadow:0 4px 10px #0007;z-index:5}
[data-mark=ok]>.kb-mark{display:grid;background:#1d8a4e}[data-mark=ok]>.kb-mark:after{content:'✓'}
[data-mark=no]>.kb-mark{display:grid;background:#c62b1a}[data-mark=no]>.kb-mark:after{content:'✕'}
[data-mark=q]>.kb-mark{display:grid;background:#d9822b}[data-mark=q]>.kb-mark:after{content:'?'}
.kb-el.tone-warn{--ac:#c62b1a}.kb-el.tone-good{--ac:#1d8a4e}
/* card */
.kb-card{background:#fffdf8;border-radius:8px;padding:12px 14px 13px;box-shadow:0 12px 26px #0008;border-top:4px solid var(--ac,var(--org))}
.kb-card .kb-thumb{aspect-ratio:850/620;background:#fff center top/cover no-repeat;border:1px solid #d8dde4;border-radius:3px;margin-bottom:8px}
.kb-card .kb-n{position:absolute;left:-9px;top:-11px;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;display:grid;place-items:center;box-shadow:0 0 0 3px #fffdf8}
.kb-label{display:block;font-style:normal;font-size:11.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;color:#b34c0a;margin-bottom:3px}
.kb-card strong{display:block;font-size:clamp(15px,1.5vw,21px);line-height:1.2}
.kb-card p{margin:6px 0 0;font-size:clamp(13px,1.2vw,16px);line-height:1.4;color:#2a3a50}
.kb-card ul{list-style:none;margin:7px 0 0;padding:0}
.kb-card .kb-foot{display:block;margin-top:8px;padding-top:6px;border-top:1px dashed #ccd;font-size:11px;color:#667}
.sz-lg.kb-card strong{font-size:clamp(17px,1.7vw,23px)}.sz-sm.kb-card{padding:8px 10px}.sz-sm.kb-card strong{font-size:12.5px}
/* list items shared */
.kb-el li{display:flex;gap:9px;align-items:flex-start;font-size:clamp(13px,1.2vw,16px);line-height:1.35;padding:4px 0;opacity:0;transform:translateX(-10px);transition:opacity .4s,transform .45s}
.kb-el.on li.in{opacity:1;transform:none}
.kb-el li small{display:block;color:#5b6879;font-size:11px;margin-top:1px}
.kb-box{flex:0 0 16px;height:16px;border:2px solid #44546a;border-radius:3px;margin-top:1px;position:relative;background:#fff}
.kb-card .kb-box{flex-basis:7px;height:7px;border:0;border-radius:50%;background:var(--org);margin-top:6px}
li[data-mark=ok] .kb-box{background:#1d8a4e;border-color:#1d8a4e}li[data-mark=ok] .kb-box:after{content:'✓';position:absolute;inset:-3px 0 0 1px;color:#fff;font-size:12px;font-weight:700}
li[data-mark=no] .kb-box{background:#c62b1a;border-color:#c62b1a}li[data-mark=no] .kb-box:after{content:'✕';position:absolute;inset:-3px 0 0 2px;color:#fff;font-size:11px;font-weight:700}
li[data-mark=q] .kb-box{background:#d9822b;border-color:#d9822b}li[data-mark=q] .kb-box:after{content:'?';position:absolute;inset:-3px 0 0 3px;color:#fff;font-size:12px;font-weight:700}
li[data-mark=no] span{color:#a3261c}li.cur span{font-weight:700}
/* checklist (clipboard) */
.kb-check{background:#fffdf8;border-radius:6px;padding:16px 16px 12px;box-shadow:0 14px 30px #0008;border-top:14px solid #3b4553;background-image:repeating-linear-gradient(#fffdf8 0 31px,#e9eef5 31px 32px)}
.kb-check h4,.kb-el h4{margin:0 0 6px;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:#53606f}
.kb-check ol{list-style:none;margin:0;padding:0}
/* lines (math, ledger) */
.kb-lines{background:#fffdf8;border-radius:6px;padding:10px 14px;box-shadow:0 14px 30px #0008}
.kb-lines>h4{color:#53606f}
.kb-lines ol.kb-lines{list-style:none;margin:0;padding:0;box-shadow:none;background:none}
.kb-lines li{justify-content:space-between;border-bottom:1px solid #e4e8ee;padding:7px 0;font-size:clamp(13px,1.25vw,17px)}
.kb-lines li b{font-family:FUDocMono,monospace;font-size:clamp(13px,1.2vw,16px);white-space:nowrap}
.kb-lines li.tot{border-top:2px solid var(--ink);border-bottom:0;font-weight:700}
.kb-lines li.tone-warn b,.kb-lines li.tone-warn span{color:#b3261e}.kb-lines li.tone-good b{color:#1d6b3f}
/* bars */
.kb-bars{background:#0b1f3ae8;color:#fff;border-radius:8px;padding:12px 14px;box-shadow:0 14px 30px #0008}
.kb-bars h4{color:#c9d6ea}
.kb-bar{display:grid;grid-template-columns:minmax(80px,32%) 1fr;gap:10px;align-items:center;margin:8px 0;font-size:clamp(12.5px,1.1vw,15px)}
.kb-bar i{display:block;height:26px;width:0;background:var(--org);border-radius:4px;position:relative;transition:width 1.1s cubic-bezier(.3,0,.2,1)}
.kb-bars.on .kb-bar i{width:var(--w)}
.kb-bar i b{position:absolute;left:8px;top:50%;transform:translateY(-50%);font:700 12.5px FUDocSans;white-space:nowrap;color:#fff;text-shadow:0 1px 2px #0008}
.kb-bar.tone-good i{background:#1d8a4e}.kb-bar.tone-warn i{background:#c62b1a}.kb-bar.tone-muted i{background:#7a8696}
/* timeline */
.kb-timeline{background:#fffdf8;border-radius:8px;padding:12px 14px 16px;box-shadow:0 14px 30px #0008}
.kb-tl{display:flex;position:relative;margin-top:22px}
.kb-tl:before{content:'';position:absolute;left:0;right:0;top:7px;height:3px;background:#c7cfda;border-radius:3px}
.kb-tick{flex:1;position:relative;padding-top:20px;font-size:clamp(12px,1.1vw,15px);line-height:1.3;opacity:.25;transition:opacity .4s}
.kb-tick:before{content:'';position:absolute;left:0;top:1px;width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid #9aa6b5}
.kb-tick b{display:block;font-size:11px;color:#b34c0a;letter-spacing:.4px}
.kb-tick span{display:block;padding-right:8px}
.kb-timeline.on .kb-tick.in{opacity:1}.kb-timeline .kb-tick.in:before{border-color:var(--org);background:var(--org)}
.kb-tick.tone-warn.in:before{border-color:#c62b1a;background:#c62b1a}.kb-tick.tone-good.in:before{border-color:#1d8a4e;background:#1d8a4e}
.kb-tick.cur span{font-weight:700}
/* slip */
.kb-slip{background:#fffdf8;padding:12px 16px 16px;box-shadow:0 16px 34px #0008;clip-path:polygon(0 0,100% 0,100% 88%,96% 100%,90% 90%,84% 100%,76% 92%,68% 100%,60% 91%,50% 100%,40% 92%,30% 100%,20% 91%,10% 100%,0 92%)}
.kb-sh{font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#53606f}
.kb-sl{font-size:11px;font-weight:700;color:#b04a0c;margin-top:7px}
.kb-sv{font:700 clamp(22px,2.6vw,36px)/1.1 FUDocMono,monospace;letter-spacing:1.5px}
.kb-slip[data-mark=no] .dg.bad,.kb-slip.lit .dg.bad{color:#d4301c;border-bottom:4px solid #d4301c}
.kb-slip[data-mark=ok] .dg.bad{color:#1d6b3f;border-bottom:4px solid #1d6b3f}
.kb-fix{font:500 22px/1 FUDocHand,cursive;color:#14286e;margin-top:4px}
/* stamp */
.kb-stamp{font-weight:800;letter-spacing:2px;font-size:clamp(15px,1.8vw,24px);padding:7px 14px;border:4px solid var(--ac,#c62b1a);color:var(--ac,#c62b1a);background:#fffdf8e8;transform:rotate(-9deg) scale(1.7);text-align:center;line-height:1.15;box-shadow:0 8px 18px #0005;z-index:6}
.kb-stamp.on{transform:rotate(-9deg)}
.kb-stamp:not(.tone-good):not(.tone-warn){--ac:#0b1f3a}
.kb-stamp{white-space:nowrap}
/* mail / phone / chip */
.kb-mail{background:#fff;border-radius:8px;box-shadow:0 16px 34px #0008;overflow:hidden}
.kb-mh{display:flex;justify-content:space-between;gap:8px;background:#eef1f5;padding:7px 12px;font-size:11.5px}.kb-mh span{color:#556}
.kb-mb{padding:10px 12px 12px;font-size:clamp(13px,1.2vw,16px);line-height:1.4}.kb-mb small{display:block;margin-top:5px;color:#b04a0c;font-weight:700}
.kb-phone{display:flex;align-items:center;gap:12px;background:#0b1f3ae8;color:#fff;border-radius:10px;padding:11px 14px;font-size:clamp(13px,1.15vw,15.5px);line-height:1.4;box-shadow:0 12px 26px #0007}
.kb-ph{font-size:24px;color:var(--org);flex:0 0 auto}
.kb-chip{display:inline-block;background:#0b1f3ae8;color:#fff;border-radius:30px;padding:9px 16px;font-size:clamp(13px,1.2vw,16px);font-weight:600;box-shadow:0 8px 18px #0006;text-align:center}
.kb-chip.tone-warn{background:#a3261c}.kb-chip.tone-good{background:#1d6b3f}
/* image + quote */
.kb-img{background:#fff;padding:6px;border-radius:6px;box-shadow:0 16px 34px #0008}
.kb-img img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:3px}
.kb-img figcaption{font-size:11.5px;color:#445;padding:5px 2px 0}
.kb-quote{background:#fffaf0;padding:16px 20px 14px;border-radius:3px;box-shadow:0 14px 30px #0008;transform:rotate(-1deg) translateY(16px)}
.kb-quote.on{transform:rotate(-1deg)}
.kb-quote p{margin:0;font:500 clamp(22px,2.4vw,34px)/1.15 FUDocHand,cursive;color:#14286e}
.kb-quote small{display:block;margin-top:6px;font-size:12px;color:#556}
.kb-quote.tone-warn p{color:#a3261c}.kb-quote.tone-good p{color:#1d6b3f}
/* arrows */
.kb-arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.kb-arrow path{fill:none;stroke:var(--org);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s .2s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 3px #0008)}
.kb-arrow path{opacity:0}.kb-arrow.on path{stroke-dashoffset:0;opacity:1}
.kb-arrow text{fill:#fff;font:700 12px FUDocSans,sans-serif;text-anchor:middle;paint-order:stroke;stroke:#0b1f3a;stroke-width:4px;opacity:0;transition:opacity .4s .8s}
.kb-arrow.on text{opacity:1}
.kb-arrow.tone-warn path{stroke:#e5432b}.kb-arrow.tone-good path{stroke:#2fa865}
.kb-arrow{opacity:1}
@media(max-width:760px){
 .kb{padding:38px 10px 58px}
 .kb-row .kb-flow{flex-wrap:wrap}.kb-row .kb-flow>.kb-el{flex:1 1 40%}
 .kb-grid .kb-flow{grid-template-columns:repeat(min(var(--cols),2),1fr)}
 .kb-cycle .kb-flow>.kb-el{width:40%}
 .kb-tl{flex-wrap:wrap;row-gap:12px}.kb-tl:before{display:none}.kb-tick{flex:1 1 30%;min-width:30%}
 .kb-page .kb-at:not(.kb-stamp){position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin:8px 0 0;align-self:center;max-width:100%}
 .kb-el li{font-size:11.5px}.kb-card p{font-size:11.5px}
 /* phone: a board grows to fit what is spoken instead of cutting it off */
 .live-scene:has(.kb){aspect-ratio:auto;min-height:330px}
 .live-scene:has(.kb) .ls-stage{position:relative;inset:auto;min-height:330px}
 .live-scene:has(.kb) .kb{position:relative;inset:auto;min-height:330px}
 .live-scene:has(.kb) .kb-page.cur{position:relative;inset:auto;min-height:330px}
 .kb-flow{flex:0 0 auto}
 .kb-cycle .kb-flow{min-height:300px}
 .kb-card strong{font-size:14.5px}.kb-label{font-size:10.5px}
 .kb-stamp{white-space:normal;max-width:84%;width:max-content;font-size:14px;letter-spacing:1px}
 .kb-stamp.kb-at{left:50%!important;right:auto!important;transform:translateX(-50%) rotate(-6deg) scale(1.15)}
 .kb-stamp.kb-at.on{transform:translateX(-50%) rotate(-6deg)}
 .kb-bar{grid-template-columns:1fr;gap:3px;margin:6px 0 9px}.kb-bar i{min-width:46px}
 .kb-lines li{flex-wrap:wrap;gap:2px 8px}.kb-lines li b{white-space:normal;font-size:12.5px}
 .kb-phone{min-width:0;gap:4px;padding:10px 11px;font-size:12.5px;flex-direction:column;align-items:flex-start}.kb-phone>*{min-width:0;overflow-wrap:break-word}.kb-phone strong,.kb-phone b{font-size:12px}
}

/* ===== Drivers Before Trucks only (.ls-db): boards stack in page flow, stamps wrap ===== */
.ls-db .kb-column .kb-flow{gap:12px}
.ls-db .kb-column .kb-flow>.kb-stamp{align-self:center;margin:4px 0 6px}
.ls-db .kb-column .kb-flow>.kb-chip{align-self:center;max-width:100%}
.ls-db .kb-stamp{white-space:normal;letter-spacing:1px;transform:rotate(-4deg) scale(1.15);overflow-wrap:anywhere;max-width:100%}
.ls-db .kb-stamp.on{transform:rotate(-4deg)}
.ls-db .kb-lines li{flex-wrap:wrap;gap:2px 10px}
.ls-db .kb-lines li b{white-space:normal;text-align:right;margin-left:auto}
.ls-db .kb-tl{flex-wrap:wrap;row-gap:10px}
.ls-db .kb-tick{flex:1 1 30%;min-width:30%}
.ls-db.lsx-doc .ls-tag{top:auto;bottom:9px;right:10px}
@media(min-width:761px){.ls-db .kb-page{padding-bottom:var(--kb-pb,66px)}}
@media(max-width:760px){
 .ls-db .kb{padding-bottom:88px;display:grid}
 .ls-db .kb-page{display:flex!important;grid-area:1/1;visibility:hidden;position:relative!important;inset:auto!important;padding:0;min-height:0!important;animation:none}
 .ls-db .kb-page.cur{visibility:visible}
 .ls-db .kb-page .kb-stamp.kb-at{position:relative;left:auto!important;top:auto!important;right:auto!important;width:auto!important;height:auto!important;align-self:center;margin:4px 0 10px;transform:rotate(-3deg) scale(1.15)}
 .ls-db .kb-page .kb-stamp.kb-at.on{transform:rotate(-3deg)}
 .ls-db .kb-column .kb-flow{justify-content:flex-start}
}
/* The paper's full-size link is easy to find and to tap on a phone. */
@media(max-width:760px){.ls-db .ls-full{font:600 13px/1 FUDocSans,sans-serif;padding:9px 13px;left:8px;top:8px;background:#0b1f3af2;box-shadow:0 2px 10px #0005}}
/* The current line stands out without getting wider, so nothing re-wraps and the picture doesn't jump. */
.ls-db li.cur span,.ls-db .kb-tick.cur span{font-weight:inherit;text-shadow:0 0 .7px currentColor}