/* The landing presentations' stages. Generated by docs/design-system/src/build.py from src/landing.css; do not edit. */
/* Landing presentations (Why ArchIDE, How ArchIDE works): the pinned stage of each deck.
   Ported from the approved canvas boards L-Why and L-How. The deck itself (sections, rail,
   stage frame) is the design-system .o-deck component; this file only draws the two stages,
   at their design size (650 x 630 inside the 720 x 640 frame), keyed on the deck's data-o-step.
   Each stage is one scene: the same elements stay for the whole deck and a step only moves,
   scales, fades or re-faces them (Why's seven cards are first scattered fragments, then what
   AI left an engineer, a product manager's task as text and an owner's spending lines, then
   the twin), so the presentation reads as one transition. A step
   change plays one eased, time-based move (.7s cubic-bezier(.2,.7,.2,1)) on transform and opacity only, and a
   card's words hand over as a short slide clipped inside it, timed within that move; a new
   step mid-move retargets from where things are. Ported once from the boards; maintained here. */
.lw,.lh{position:absolute;left:35px;top:5px;width:650px;height:630px;font-family:'IBM Plex Sans',system-ui,sans-serif;color:#1d1d1f;line-height:normal}
.lw b,.lh b{font-weight:600}
.lw small,.lh small{font-size:inherit}
@keyframes lw-flow{to{stroke-dashoffset:-68}}
/* the twin's ring belongs to the card, not to its words, so it never slides */
@keyframes lw-rush{from{background-position:0 -40px}to{background-position:0 0}}
.lh .tg-now{background:rgba(52,199,89,.15);color:#1d7a37}
.lh .tg-next{background:rgba(94,92,230,.13);color:#3b3a9e}
.lh .tg-later{background:rgba(0,0,0,.07);color:#515154}
.lh .vcap{position:absolute;left:10px;top:-12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#86868b;font-weight:600}
.lh .co{position:absolute;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#0753a2;background:#fff;border-radius:8px;padding:4px 8px;box-shadow:0 0 0 1px rgba(0,113,227,.35),0 4px 12px rgba(0,113,227,.12);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .45s .35s,transform .45s .35s;z-index:4}
.lh .co::before{content:"";width:6px;height:6px;border-radius:50%;background:#0071e3;flex:none}
.lh .co.dk{color:#d7dce5;background:#14161b;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.lh .co.rd{color:#b42318;box-shadow:0 0 0 1px rgba(255,69,58,.45)}
.lh .co.rd::before{background:#ff453a}
.lh .co.gr{color:#1d7a37;box-shadow:0 0 0 1px rgba(52,199,89,.5)}
.lh .co.gr::before{background:#34c759}
.lh .win{position:absolute;left:0;top:6px;width:640px;height:528px;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 24px 60px rgba(30,40,60,.16);transition:transform .7s cubic-bezier(.2,.7,.2,1);transform-origin:50% 40%}
.lh .wb{height:30px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#f2f3f5;border-bottom:.5px solid rgba(0,0,0,.08)}
.lh .wb i{width:9px;height:9px;border-radius:50%;background:#d6d8dc;display:block}
.lh .wb span{margin-left:10px;font-size:11px;color:#6e6e73}
.lh .wbody{position:absolute;left:0;right:0;top:30px;bottom:0;display:flex}
.lh .xpl{position:relative;width:168px;flex:none;background:#f7f8fa;border-right:.5px solid rgba(0,0,0,.08);padding:10px 8px;display:flex;flex-direction:column;gap:2px;box-sizing:border-box}
.lh .mhl{position:absolute;left:8px;right:8px;top:52px;height:38px;border-radius:8px;background:rgba(0,113,227,.12);transform-origin:50% 0;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .5s}
.lh .exh{display:flex;gap:8px;align-items:center;padding:2px 4px 10px;height:40px;box-sizing:border-box}
.lh .exh .lg{width:24px;height:24px;border-radius:6px;background:linear-gradient(135deg,#0071e3,#5e5ce6);flex:none}
.lh .exh b{display:block;font-size:12.5px}
.lh .exh span{display:block;font-size:10px;color:#6e6e73}
.lh .mi{position:relative;z-index:1;height:38px;box-sizing:border-box;border-radius:8px;padding:6px 8px}
.lh .mi b{display:block;font-size:11.5px;font-weight:500;color:#1d1d1f;transition:color .4s}
.lh .mi span{display:block;font-size:9.5px;color:#86868b}
.lh .cv{position:relative;flex:1;background:#edf2f7;background-image:radial-gradient(rgba(70,89,112,.18) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
.lh .ly{position:absolute;inset:0;opacity:0;padding:0}
.lh .ly .co{z-index:5}
.lh .msvg,.lh .usvg,.lh .dsvg{position:absolute;inset:0;overflow:visible}
.lh .me{stroke:#a8b1c0;stroke-width:1.5;fill:none;transition:stroke .4s}
.lh .mp{stroke:#34c759;stroke-width:3;fill:none;stroke-dasharray:6 26;opacity:0}
@keyframes lh-flow{to{stroke-dashoffset:-64}}
.lh .mn{position:absolute;width:128px;height:50px;border-radius:11px;background:#fff;padding:7px 10px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.13);transition:box-shadow .4s}
.lh .mn b{font-size:11.5px;font-weight:600;line-height:1.2}
.lh .mn span{font-size:9.5px;color:#6e6e73}
.lh .mn.k-actor{box-shadow:none;outline:1px dashed rgba(0,0,0,.3);outline-offset:-1px}
.lh .ucpill{position:absolute;left:150px;top:14px;font-size:11.5px;font-weight:600;border-radius:9px;padding:6px 10px;background:#fff;box-shadow:0 0 0 1.5px #0071e3;opacity:0;transition:opacity .4s}
.o-deck[data-o-step="5"] .lh .ucpill{opacity:1}
.o-deck[data-o-step="5"] .lh .me.tr{stroke:#0071e3;stroke-width:2.2}
.o-deck[data-o-step="5"] .lh .mn.tr{box-shadow:0 0 0 1.6px #0071e3,0 6px 16px rgba(0,113,227,.14)}
.o-deck[data-o-step="10"] .lh .mp{opacity:1;animation:lh-flow 1.4s linear infinite}
.o-deck[data-o-step="10"] .lh .me{stroke:#7cd992}
.lh .ly-twin{padding:16px 16px;display:flex;flex-direction:column;gap:10px}
.lh .trow{display:flex;gap:10px;align-items:flex-start;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);opacity:0;transform:translateX(14px);transition:opacity .4s,transform .4s}
.o-deck[data-o-step="1"] .lh .trow{opacity:1;transform:none}
.lh .r1{transition-delay:.08s!important}
.lh .r2{transition-delay:.16s!important}
.lh .r3{transition-delay:.24s!important}
.lh .r4{transition-delay:.32s!important}
.lh .tl{width:92px;flex:none}
.lh .tl b{display:block;font-size:12px}
.lh .tl small{font-size:9.5px;color:#6e6e73}
.lh .tc{display:flex;flex-wrap:wrap;gap:5px}
.lh .tc span{font-size:10.5px;padding:4px 8px;border-radius:7px;background:#eef5ff;color:#0753a2;font-weight:500}
.lh .t-pt .tc span{background:#f3f4f7;color:#1d1d1f}
.lh .t-da .tc span{background:rgba(94,92,230,.1);color:#3b3a9e}
.lh .t-fl .tc span{background:rgba(52,199,89,.12);color:#1d7a37}
.lh .t-pl .tc span{background:#14161b;color:#d7dce5}
.lh .act{position:absolute;left:14px;width:120px;font-size:11.5px;font-weight:600;border-radius:9px;padding:8px 10px;background:#fff;outline:1px dashed rgba(0,0,0,.3);outline-offset:-1px;opacity:0;transition:opacity .4s}
.lh .uci{position:absolute;left:190px;width:266px;font-size:11.5px;font-weight:500;border-radius:10px;padding:10px 12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.13);display:flex;align-items:center;gap:8px;transition:box-shadow .4s,transform .5s,opacity .5s}
.lh .uci .dot{width:7px;height:7px;border-radius:50%;background:#ff9f0a;flex:none}
.lh .usvg path{stroke:#9aa4b5;stroke-width:1.4;fill:none;opacity:0;transition:opacity .4s .2s}
.o-deck[data-o-step="2"] .lh .uci{transform:translateX(-90px)}
.o-deck[data-o-step="2"] .lh .uci.new{box-shadow:0 0 0 2px #34c759,0 8px 22px rgba(52,199,89,.2);transform:translateX(-90px) scale(1.04)}
.o-deck[data-o-step="3"] .lh .act,.o-deck[data-o-step="3"] .lh .usvg path{opacity:1}
.o-deck[data-o-step="3"] .lh .uci.new{box-shadow:0 0 0 1.4px #0071e3}
.lh .cn{position:absolute;width:120px;height:52px;border-radius:11px;background:#fff;padding:7px 10px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 0 0 1px rgba(94,92,230,.35)}
.lh .cn b{font-size:12px}
.lh .cn span{font-size:9.5px;color:#6e6e73}
.lh .dsvg path{stroke:#8b8ad6;stroke-width:1.5;fill:none}
.lh .vb{position:absolute;transform:translate(-50%,-50%);font-size:9.5px;font-weight:600;color:#3b3a9e;background:#edf2f7;border-radius:6px;padding:2px 6px;white-space:nowrap}
.lh .ly-views{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:94px;gap:10px;padding:16px}
.lh .vt{position:relative;background:#fff;border-radius:12px;padding:10px 12px;box-shadow:0 0 0 .5px rgba(0,0,0,.1);display:flex;flex-direction:column;gap:2px;overflow:hidden;opacity:0;transform:scale(.94);transition:opacity .4s,transform .4s}
.lh .vt b{font-size:12px}
.lh .vt span{font-size:10px;color:#6e6e73}
.lh .vt .g{position:absolute;right:10px;bottom:10px;width:56px;height:30px;border-radius:6px;background:linear-gradient(90deg,#d8e7fb 0 30%,transparent 30% 40%,#d8e7fb 40% 70%,transparent 70% 80%,#d8e7fb 80%)}
.lh .vt .g3{background:repeating-linear-gradient(180deg,#c9ecd3 0 6px,transparent 6px 12px)}
.lh .vt .g6{background:linear-gradient(0deg,#ffd9a8 0 60%,transparent 60%) 0 0/12px 100% repeat-x}
.lh .vt .g7{background:repeating-linear-gradient(180deg,#e2e1f7 0 7px,transparent 7px 12px)}
.o-deck[data-o-step="6"] .lh .vt{opacity:1;transform:none}
.lh .v1{transition-delay:.05s!important}
.lh .v2{transition-delay:.1s!important}
.lh .v3{transition-delay:.15s!important}
.lh .v4{transition-delay:.2s!important}
.lh .v5{transition-delay:.25s!important}
.lh .v6{transition-delay:.3s!important}
.lh .v7{transition-delay:.35s!important}
.lh .scen{position:absolute;left:16px;top:16px;font-size:11.5px;font-weight:600;border-radius:9px;padding:6px 10px;background:#14161b;color:#fff}
.lh .dc{position:absolute;top:66px;width:210px;border-radius:14px;background:#fff;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 0 0 .5px rgba(0,0,0,.12),0 10px 24px rgba(30,40,60,.1);opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.lh .dc small{font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:#6e6e73;font-weight:600}
.lh .dc b{font-size:22px}
.lh .dc .bad{font-size:11.5px;color:#b42318}
.lh .dc .ok{font-size:11.5px;color:#1d7a37}
.lh .da{left:16px}
.lh .db{left:240px;box-shadow:0 0 0 2px #34c759,0 10px 24px rgba(52,199,89,.14);transition-delay:.15s}
.lh .mini{display:flex;flex-direction:column;gap:5px;padding:8px;border-radius:9px;background:#edf2f7}
.lh .mini i{font-style:normal;font-size:10.5px;font-weight:600;background:#fff;border-radius:7px;padding:6px 8px;box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lh .mini i.b{box-shadow:0 0 0 1.6px #ff453a}
.lh .mini i.g{box-shadow:0 0 0 1.6px #34c759}
.o-deck[data-o-step="7"] .lh .dc{opacity:1;transform:none}
.lh .ly-log{padding:16px}
.lh .lcol{position:absolute;top:16px;width:212px;display:flex;flex-direction:column;gap:8px}
.lh .lcol:first-child{left:16px}
.lh .lcol:nth-child(2){left:244px}
.lh .lcol small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;font-weight:600}
.lh .lgi{font-size:11.5px;background:#fff;border-radius:10px;padding:9px 11px;box-shadow:0 0 0 1px rgba(255,159,10,.5)}
.lh .lgi.ld{box-shadow:0 0 0 1px rgba(52,199,89,.5)}
.lh .lmove{transition:opacity .5s .2s}
.lh .lland{opacity:0;transform:translateY(-8px);transition:opacity .5s .5s,transform .5s .5s;font-weight:600}
.o-deck[data-o-step="8"] .lh .lmove{opacity:.25}
.o-deck[data-o-step="8"] .lh .lland{opacity:1;transform:none}
.lh .rd{position:absolute;left:16px;right:16px;top:360px;background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 0 0 .5px rgba(0,0,0,.12);display:flex;flex-direction:column;gap:7px}
.lh .rd small{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;font-weight:600}
.lh .rbar{position:relative;height:10px;border-radius:5px;background:rgba(0,0,0,.07)}
.lh .rf{position:absolute;left:0;top:0;bottom:0;width:78%;border-radius:5px;background:#34c759;transform:scaleX(.8205);transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1) .3s}
.o-deck[data-o-step="8"] .lh .rf{transform:none}
.lh .rv{font-size:12px}
.lh .rv b{font-weight:600}
.lh .rv1{display:none}
.o-deck[data-o-step="8"] .lh .rv0{display:none}
.o-deck[data-o-step="8"] .lh .rv1{display:inline}
/* Panel arrivals use live geometry morphs in ui.js. Callouts, connector
   emphasis and the readiness fill keep their existing motion. */
.lh .ly :is(.mn,.trow,.act,.uci,.cn,.vt,.dc,.lgi),.lh .ly-log > .rd{transition:none!important}
.o-deck[data-o-step="0"] .lh .ly-map,.o-deck[data-o-step="5"] .lh .ly-map,.o-deck[data-o-step="9"] .lh .ly-map,.o-deck[data-o-step="10"] .lh .ly-map{opacity:1;transform:none}
.o-deck[data-o-step="1"] .lh .ly-twin,.o-deck[data-o-step="2"] .lh .ly-uc,.o-deck[data-o-step="3"] .lh .ly-uc,.o-deck[data-o-step="4"] .lh .ly-dom,.o-deck[data-o-step="6"] .lh .ly-views,.o-deck[data-o-step="7"] .lh .ly-try,.o-deck[data-o-step="8"] .lh .ly-log{opacity:1;transform:none}
.o-deck[data-o-step="2"] .lh .c2a,.o-deck[data-o-step="3"] .lh .c3a,.o-deck[data-o-step="3"] .lh .c3b,.o-deck[data-o-step="4"] .lh .c4a,.o-deck[data-o-step="5"] .lh .c5a,.o-deck[data-o-step="5"] .lh .c5b,.o-deck[data-o-step="6"] .lh .c6a,.o-deck[data-o-step="7"] .lh .c7a,.o-deck[data-o-step="8"] .lh .c8a,.o-deck[data-o-step="8"] .lh .c8b,.o-deck[data-o-step="10"] .lh .c10a{opacity:1;transform:none}
.lh .lz{position:absolute;width:196px;border-radius:14px;background:#fff;padding:11px 13px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 12px 30px rgba(30,40,60,.14);display:flex;flex-direction:column;gap:3px;opacity:0;transform:scale(.85);transition:opacity .5s,transform .5s;z-index:6}
.lh .lz b{font-size:12.5px}
.lh .lz span{font-size:11px;color:#6e6e73}
.lh .lz.mono span{font-family:'IBM Plex Mono',monospace;color:#7cd992;font-size:10px;line-height:1.45}
.lh .l0{left:-24px;top:0}
.lh .l1{right:0;top:0}
.lh .l2{left:-24px;top:470px}
.lh .l3{right:0;top:440px;background:#0f1115;width:240px}
.lh .l3 b{color:#fff}
.o-deck[data-o-step="9"] .lh .win{transform:scale(.72)}
.o-deck[data-o-step="9"] .lh .lz{opacity:1;transform:none}
.lh .bl{position:absolute;left:0;right:0;top:546px;opacity:0;transform:translateY(10px);transition:opacity .5s .3s,transform .5s .3s}
.lh .say{background:#0f1115;color:#d7dce5;border-radius:14px;padding:11px 14px;font-size:12.5px;line-height:1.45}
.lh .say small{display:block;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8a92a3;font-weight:600;margin-bottom:3px}
.lh .say b{color:#7cd992}
.lh .outs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.lh .outs span{font-size:11px;padding:5px 9px;border-radius:8px;background:#14161b;color:#d7dce5;font-family:'IBM Plex Mono',monospace}
.lh .outs .tg{font-family:inherit;font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}
.lh .outs .lv{background:rgba(52,199,89,.12);color:#1d7a37;font-family:inherit;font-weight:500}
.o-deck[data-o-step="2"] .lh .bl2,.o-deck[data-o-step="10"] .lh .bl10{opacity:1;transform:none}
.o-deck[data-o-step="2"] .lh .win,.o-deck[data-o-step="10"] .lh .win{transform:translateY(-6px) scale(.97)}
.o-deck[data-o-step="0"] .lh .mhl{transform:translateY(0px)}
.o-deck[data-o-step="0"] .lh .m-ov b{color:#0753a2}
.o-deck[data-o-step="1"] .lh .mhl{transform:translateY(0px)}
.o-deck[data-o-step="1"] .lh .m-ov b{color:#0753a2}
.o-deck[data-o-step="2"] .lh .mhl{transform:translateY(40px)}
.o-deck[data-o-step="2"] .lh .m-uc b{color:#0753a2}
.o-deck[data-o-step="3"] .lh .mhl{transform:translateY(40px)}
.o-deck[data-o-step="3"] .lh .m-uc b{color:#0753a2}
.o-deck[data-o-step="4"] .lh .mhl{transform:translateY(80px)}
.o-deck[data-o-step="4"] .lh .m-dm b{color:#0753a2}
.o-deck[data-o-step="5"] .lh .mhl{transform:translateY(120px)}
.o-deck[data-o-step="5"] .lh .m-mp b{color:#0753a2}
.o-deck[data-o-step="7"] .lh .mhl{transform:translateY(280px)}
.o-deck[data-o-step="7"] .lh .m-fc b{color:#0753a2}
.o-deck[data-o-step="8"] .lh .mhl{transform:translateY(320px)}
.o-deck[data-o-step="8"] .lh .m-lb b{color:#0753a2}
.o-deck[data-o-step="9"] .lh .mhl{transform:translateY(0px)}
.o-deck[data-o-step="9"] .lh .m-ov b{color:#0753a2}
.o-deck[data-o-step="10"] .lh .mhl{transform:translateY(120px)}
.o-deck[data-o-step="10"] .lh .m-mp b{color:#0753a2}
.o-deck[data-o-step="6"] .lh .mhl{transform:translateY(40px) scaleY(8.32);opacity:.6}
.lh .mi b{transition:color .5s}
.lh .mono{font-family:'IBM Plex Mono',monospace}
.lh .wcap{position:relative}
.lh .wc{position:absolute;white-space:nowrap;opacity:0;transition:opacity .5s}
.o-deck[data-o-step="0"] .lh .vc0{opacity:1}
.o-deck[data-o-step="1"] .lh .vc1{opacity:1}
.o-deck[data-o-step="2"] .lh .vc2{opacity:1}
.o-deck[data-o-step="3"] .lh .vc3{opacity:1}
.o-deck[data-o-step="4"] .lh .vc4{opacity:1}
.o-deck[data-o-step="5"] .lh .vc5{opacity:1}
.o-deck[data-o-step="6"] .lh .vc6{opacity:1}
.o-deck[data-o-step="7"] .lh .vc7{opacity:1}
.o-deck[data-o-step="8"] .lh .vc8{opacity:1}
.o-deck[data-o-step="9"] .lh .vc9{opacity:1}
.o-deck[data-o-step="10"] .lh .vc10{opacity:1}
.lh .at1{left:14px;top:70px}
.lh .at2{left:14px;top:330px}
.lh .at3{left:172px;top:70px}
.lh .at4{left:172px;top:330px}
.lh .at5{left:330px;top:70px}
.lh .at6{left:330px;top:200px}
.lh .at7{left:330px;top:330px}
.lh .at8{left:180px;top:150px}
.lh .at9{left:172px;top:300px}
.lh .at10{left:170px;top:270px}
.lh .at11{top:30px}
.lh .at12{top:170px}
.lh .at13{top:300px}
.lh .at14{top:400px}
.lh .at15{top:20px}
.lh .at16{top:94px}
.lh .at17{top:168px}
.lh .at18{top:242px}
.lh .at19{top:316px}
.lh .at20{top:390px}
.lh .at21{left:110px;top:214px}
.lh .at22{left:14px;top:448px}
.lh .at23{left:300px;top:448px}
.lh .at24{left:10px;top:40px}
.lh .at25{left:176px;top:40px}
.lh .at26{left:342px;top:40px}
.lh .at27{left:10px;top:210px}
.lh .at28{left:176px;top:210px}
.lh .at29{left:342px;top:210px}
.lh .at30{left:10px;top:370px}
.lh .at31{left:153.0px;top:53.0px}
.lh .at32{left:319.0px;top:53.0px}
.lh .at33{left:236.0px;top:151.0px}
.lh .at34{left:70.0px;top:151.0px}
.lh .at35{left:319.0px;top:223.0px}
.lh .at36{left:70.0px;top:316.0px}
.lh .at37{left:200px;top:400px}
.lh .at38{left:120px;top:462px}
.lh .at39{left:150px;top:290px}
.lh .at40{left:250px;top:168px}
.lh .at41{left:250px;top:444px}
/* sections 1-4, keyed on the step: each card's place and turn, the stale-tool step's 4/3 scale, which face shows */
@media (prefers-reduced-motion: reduce){.lw *,.lh *{animation:none!important;transition:none!important}}

/* ---------- Why ArchIDE (.lw): one scene in three acts ----------
   Steps: 0 opening, 1-3 the three readers' pains (engineers, product managers, business
   owners), 4 the break: the pains implode and ArchIDE appears alone, 5 the turn to the twin,
   6-8 the same readers' answers, 9 sharing is everything (every reader around one map),
   10 direction, 11 call to action, where the twin folds back into the mark. The seven cards are the sculpture: in each pain they re-form into that reader's
   mess (a pile of AI artifacts, a task told as text in a copy-and-research loop, a balance
   of spend against people), at the break they fall into the centre and vanish, and at the
   turn they burst out, one after another, into the twin's parts. A card's faces stack in story order (fr, fe, fp, fb, tw); the face for the
   step shows, earlier ones have slid up, later ones wait below. */
.lw .vcap{position:absolute;left:10px;top:-12px;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:#86868b;font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s}
.lw .tg-now{background:rgba(52,199,89,.15);color:#1d7a37}
.lw .tg-next{background:rgba(94,92,230,.13);color:#3b3a9e}
.lw .tg-later{background:rgba(0,0,0,.07);color:#515154}
.lw .tg{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.lw .mono{font-family:'IBM Plex Mono',monospace}
.lw .co{position:absolute;display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:#0753a2;background:#fff;border-radius:8px;padding:4px 8px;box-shadow:0 0 0 1px rgba(0,113,227,.35),0 4px 12px rgba(0,113,227,.12);white-space:nowrap;opacity:0;transform:translateY(4px);transition:opacity .45s .35s,transform .45s .35s;z-index:4}
.lw .co::before{content:"";width:6px;height:6px;border-radius:50%;background:#0071e3;flex:none}
.lw .co.dk{color:#d7dce5;background:#14161b;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.lw .co.rd{color:#b42318;box-shadow:0 0 0 1px rgba(255,69,58,.45),0 4px 12px rgba(255,69,58,.1)}
.lw .co.rd::before{background:#ff453a}
.lw .co.gr{color:#1d7a37;box-shadow:0 0 0 1px rgba(52,199,89,.5)}
.lw .co.gr::before{background:#34c759}
.lw .plane{position:absolute;left:10px;top:24px;width:640px;height:560px;transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .6s}
.lw .edges{position:absolute;inset:0;overflow:visible}
.lw .edges .e{stroke:#9aa4b5;stroke-width:1.5;fill:none;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:opacity .3s,stroke-dashoffset .3s,stroke .4s}
.lw .edges .tl{stroke:#0071e3;stroke-width:2;stroke-dasharray:4 4;fill:none;opacity:0;transition:opacity .5s}
.lw .edges .bm{stroke:#c3c8d2;stroke-width:2.5;stroke-linecap:round;fill:none;opacity:0;transition:opacity .2s}
.lw .edges .lp{stroke:#ff453a;stroke-width:1.6;stroke-dasharray:5 5;fill:none;opacity:0;transition:opacity .2s}
/* the loop and the balance beam draw once the cards have arrived */
.o-deck[data-o-step="2"] .lw .edges .lp,.o-deck[data-o-step="3"] .lw .edges .bm{transition:opacity .4s .55s}
@keyframes lw-flow{to{stroke-dashoffset:-20}}
/* the cards: solid, moved by transform only; each leaves a beat after the one before */
.lw .nd{position:absolute;width:150px;height:62px;border-radius:12px;background:#fff;transform-origin:0 0;will-change:transform;transition:transform .7s cubic-bezier(.2,.7,.2,1) var(--lw-d,0s),opacity .5s}
.lw .n1{--lw-d:.03s}.lw .n2{--lw-d:.06s}.lw .n3{--lw-d:.09s}.lw .n4{--lw-d:.12s}.lw .n5{--lw-d:.15s}.lw .n6{--lw-d:.18s}
.lw .nd::before{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 10px 24px rgba(30,40,60,.12);transition:opacity .7s}
.lw .fx{position:absolute;inset:0;overflow:hidden;border-radius:12px}
/* the twin's ring belongs to the card, not to its words, so it never slides */
.lw .fx::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.14);opacity:0;transition:opacity .4s .3s,box-shadow .4s}
.lw .nd.dashed .fx::after{box-shadow:none;border:1px dashed rgba(0,0,0,.3)}
.lw .face{position:absolute;inset:0;padding:10px 13px;display:flex;flex-direction:column;justify-content:center;gap:3px;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.7,.2,1) calc(.2s + var(--lw-d,0s))}
.lw .face b{font-size:13px;font-weight:600;line-height:1.25}
.lw .face span{font-size:10.5px;color:#6e6e73}
.lw .fr{transform:none}
.lw .fr b{font-weight:500;font-size:12.5px}
.lw .fr small{font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;color:#0071e3}
.lw .n0 .fr small{color:#c2410c}.lw .n1 .fr small{color:#7c3aed}.lw .n3 .fr small{color:#047857}.lw .n4 .fr small{color:#b45309}
/* the three readers' faces: a kind, the thing, and what is wrong with it */
.lw .fz{padding:7px 11px;gap:1px}
.lw .fz small{font-size:8px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.lw .fz b{font-size:11.5px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw .fz span{font-size:9px;color:#b42318;font-family:'IBM Plex Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw .fe small{color:#0071e3}.lw .fp small{color:#7c3aed}.lw .fb small{color:#b45309}
.lw .bizt,.lw .techt{position:absolute;left:0;right:0;display:flex;gap:10px;justify-content:center;opacity:0;transform:translateY(-10px);transition:opacity .6s,transform .6s}
.lw .bizt{top:58px}
.lw .techt{top:470px;transform:translateY(10px)}
.lw .actor{font-size:12.5px;border-radius:10px;padding:9px 12px;background:#fff;outline:1px dashed rgba(0,0,0,.3)}
.lw .ucp{font-size:13px;font-weight:600;border-radius:10px;padding:9px 14px;background:#fff;box-shadow:0 0 0 1.5px #0071e3,0 8px 20px rgba(0,113,227,.14)}
.lw .techt span{white-space:nowrap;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#d7dce5;background:#14161b;border-radius:9px;padding:8px 11px}
.lw .burden{position:absolute;inset:0;pointer-events:none}
.lw .stream{position:absolute;right:-6px;top:0;bottom:30px;width:118px;border-radius:14px;background:#111318;color:#f5f5f7;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:hidden;opacity:0;transform:translateX(40px) scaleX(.6);transform-origin:100% 50%;transition:opacity .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.lw .stream small{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:#8a92a3;font-weight:600}
.lw .stream b{font-size:12px;font-weight:600;color:#ff9f0a}
.lw .lanes{flex:1;display:flex;gap:6px;overflow:hidden}
.lw .lanes i{flex:1;border-radius:3px;background:repeating-linear-gradient(180deg,#4ea1ff 0 10px,transparent 10px 18px,#7cd992 18px 26px,transparent 26px 40px);background-size:100% 40px;animation:lw-rush 1.1s linear infinite}
.lw .lanes i:nth-child(2n){animation-duration:.8s}
.lw .lanes i:nth-child(3n){animation-duration:.6s}
@keyframes lw-rush{from{background-position:0 -40px}to{background-position:0 0}}
.lw .lz{position:absolute;width:200px;border-radius:14px;background:#fff;padding:12px 14px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 12px 30px rgba(30,40,60,.14);display:flex;flex-direction:column;gap:3px;opacity:0;transform:scale(.85);transition:opacity .5s,transform .5s}
.lw .lz b{font-size:12.5px}
.lw .lz span{font-size:11px;color:#6e6e73}
.lw .lz.mono span{font-family:'IBM Plex Mono',monospace;color:#7cd992}
.lw .l0{left:-30px;top:30px}
.lw .l1{right:0;top:20px}
.lw .l2{left:-40px;bottom:60px}
.lw .l3{right:0;bottom:50px;background:#0f1115}
.lw .l3 b{color:#fff}
.lw .abx{position:absolute;bottom:20px;width:270px;border-radius:16px;background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:3px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 12px 30px rgba(30,40,60,.14);opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.lw .abx small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#6e6e73;font-weight:600}
.lw .abx b{font-size:24px;font-weight:600}
.lw .abx .bad{color:#b42318;font-size:12.5px}
.lw .abx .ok{color:#1d7a37;font-size:12.5px}
.lw .abx.a{left:40px}
.lw .abx.b{right:40px;box-shadow:0 0 0 2px #34c759,0 12px 30px rgba(52,199,89,.16)}
.lw .vws{position:absolute;inset:0;pointer-events:none}
.lw .vw{position:absolute;font-size:11.5px;font-weight:600;border-radius:9px;padding:6px 10px;background:#fff;color:#0753a2;box-shadow:0 0 0 1px rgba(0,113,227,.3),0 6px 16px rgba(0,113,227,.08);opacity:0;transform:translateY(8px) scale(.9);transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1)}
.lw .w0{left:30px;top:96px}.lw .w1{left:190px;top:84px}.lw .w2{left:330px;top:96px}.lw .w3{left:470px;top:84px}
.lw .w4{left:40px;top:572px}.lw .w5{left:170px;top:584px}.lw .w6{left:330px;top:572px}.lw .w7{left:480px;top:584px}
.lw .w0,.lw .w4{transition-delay:.35s}.lw .w1,.lw .w5{transition-delay:.4s}.lw .w2,.lw .w6{transition-delay:.45s}.lw .w3,.lw .w7{transition-delay:.5s}
.lw .dirs{position:absolute;left:0;right:0;top:470px;display:flex;gap:10px;justify-content:center}
.lw .dirc{width:196px;background:#fff;border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:0 0 0 .5px rgba(0,0,0,.1),0 10px 24px rgba(30,40,60,.1);opacity:0;transform:translateY(16px);transition:opacity .45s,transform .7s cubic-bezier(.2,.7,.2,1)}
.lw .dirc span:last-child{font-size:11.5px;line-height:1.4;color:#424245}
.lw .dirc .tg{align-self:flex-start}
.lw .d1{transition-delay:.08s}.lw .d2{transition-delay:.16s}
/* where the twin's callouts sit (plane coordinates) and the readers' callouts (stage coordinates) */
.lw .at8{left:30px;top:160px}.lw .at9{left:220px;top:160px}.lw .at10{left:220px;top:270px}.lw .at11{left:410px;top:270px}
.lw .at12{left:410px;top:380px}.lw .at13{left:220px;top:380px}.lw .at14{left:30px;top:380px}
.lw .at15{left:430px;top:226px}.lw .at16{left:300px;top:226px}.lw .at17{left:20px;top:500px}
.lw .at18{left:-6px;top:16px}.lw .at19{left:420px;top:16px}.lw .at20{left:380px;top:122px}
.lw .at21{left:30px;top:516px}.lw .at22{left:250px;top:516px}.lw .at23{left:470px;top:516px}
.lw .k1a{left:30px;top:478px}.lw .k1b{left:230px;top:478px}
.lw .k2a{left:158px;top:30px}.lw .k2b{left:350px;top:176px}.lw .k2c{left:196px;top:428px}
.lw .k3a{left:40px;top:346px}.lw .k3b{left:404px;top:296px}
.lw .c4d{left:196px;top:14px}
.lw .c6a{left:440px;top:604px}.lw .c6b{left:470px;top:88px}.lw .c6c{left:236px;top:560px}
.lw .c7a{left:220px;top:470px}.lw .cdec{left:440px;top:470px;transition-delay:.6s}.lw .c7r{left:230px;top:20px}
.lw .cdec{transition:opacity .45s .6s,transform .45s .6s}

.o-deck[data-o-step="0"] .lw .vc0{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="1"] .lw .vc1{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="2"] .lw .vc2{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="3"] .lw .vc3{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="5"] .lw .vc5{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="6"] .lw .vc6{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="7"] .lw .vc7{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="8"] .lw .vc8{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="10"] .lw .vc10{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
.o-deck[data-o-step="9"] .lw .vc9{opacity:1;transform:none;transition:opacity .3s .25s,transform .3s .25s}
/* the sculpture: each card's place and turn in the opening and the three pains; from the turn on, the twin (no transform) */
.o-deck[data-o-step="0"] .lw .n0{transform:translate(-20px,-120px) rotate(-9deg)}
.o-deck[data-o-step="0"] .lw .n1{transform:translate(150px,-150px) rotate(7deg)}
.o-deck[data-o-step="0"] .lw .n2{transform:translate(260px,-60px) rotate(-5deg)}
.o-deck[data-o-step="0"] .lw .n3{transform:translate(90px,40px) rotate(8deg)}
.o-deck[data-o-step="0"] .lw .n4{transform:translate(-120px,60px) rotate(-6deg)}
.o-deck[data-o-step="0"] .lw .n5{transform:translate(250px,90px) rotate(5deg)}
.o-deck[data-o-step="0"] .lw .n6{transform:translate(60px,-40px) rotate(-4deg)}
.o-deck[data-o-step="1"] .lw .n0{transform:translate(-10px,-130px) rotate(-6deg)}
.o-deck[data-o-step="1"] .lw .n1{transform:translate(-20px,-150px) rotate(4deg)}
.o-deck[data-o-step="1"] .lw .n2{transform:translate(-130px,-150px) rotate(-2deg)}
.o-deck[data-o-step="1"] .lw .n3{transform:translate(-110px,-146px) rotate(5deg)}
.o-deck[data-o-step="1"] .lw .n4{transform:translate(-400px,-148px) rotate(3deg)}
.o-deck[data-o-step="1"] .lw .n5{transform:translate(-10px,-136px) rotate(-4deg)}
.o-deck[data-o-step="1"] .lw .n6{transform:translate(70px,-28px) rotate(2deg)}
.o-deck[data-o-step="2"] .lw .n0{transform:translate(180px,-50px) rotate(0deg)}
.o-deck[data-o-step="2"] .lw .n1{transform:translate(-10px,14px) rotate(0deg)}
.o-deck[data-o-step="2"] .lw .n2{transform:translate(-10px,-32px) rotate(0deg)}
.o-deck[data-o-step="2"] .lw .n3{transform:translate(-200px,32px) rotate(0deg)}
.o-deck[data-o-step="2"] .lw .n4{transform:translate(10px,-270px) rotate(2deg)}
.o-deck[data-o-step="2"] .lw .n5{transform:translate(-220px,-380px) rotate(-3deg)}
.o-deck[data-o-step="2"] .lw .n6{transform:translate(-30px,-270px) rotate(-2deg)}
.o-deck[data-o-step="3"] .lw .n0{transform:translate(0px,-60px) rotate(-3deg)}
.o-deck[data-o-step="3"] .lw .n1{transform:translate(-190px,20px) rotate(-3deg)}
.o-deck[data-o-step="3"] .lw .n2{transform:translate(240px,-150px) rotate(3deg)}
.o-deck[data-o-step="3"] .lw .n3{transform:translate(-165px,60px) rotate(0deg)}
.o-deck[data-o-step="3"] .lw .n4{transform:translate(-380px,-120px) rotate(-3deg)}
.o-deck[data-o-step="3"] .lw .n5{transform:translate(240px,-180px) rotate(3deg)}
.o-deck[data-o-step="3"] .lw .n6{transform:translate(215px,-380px) rotate(0deg)}
/* the break: the pains fall into one point and ArchIDE stands alone */
.o-deck[data-o-step="4"] .lw .n0{transform:translate(263px,109px) scale(.35) rotate(-8deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n1{transform:translate(73px,109px) scale(.35) rotate(6deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n2{transform:translate(73px,-1px) scale(.35) rotate(-4deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n3{transform:translate(-117px,-1px) scale(.35) rotate(9deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n4{transform:translate(-117px,-111px) scale(.35) rotate(-6deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n5{transform:translate(73px,-111px) scale(.35) rotate(4deg);opacity:0}
.o-deck[data-o-step="4"] .lw .n6{transform:translate(263px,-111px) scale(.35) rotate(-3deg);opacity:0}
.o-deck[data-o-step="4"] .lw .nd{transition:transform .6s cubic-bezier(.5,0,.75,0) var(--lw-d,0s),opacity .45s calc(.15s + var(--lw-d,0s))}
.lw .intro{position:absolute;left:0;right:0;top:190px;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:scale(.86);transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.lw .intro img{width:96px;height:96px;border-radius:24px;box-shadow:0 18px 50px rgba(0,113,227,.25)}
.lw .intro b{font-size:56px;font-weight:700;letter-spacing:-.03em;line-height:1;background:linear-gradient(100deg,#0071e3 0%,#5e5ce6 50%,#a24be0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em .06em}
.lw .intro span{font-size:15px;color:#6e6e73;font-weight:500}
.o-deck[data-o-step="4"] .lw .intro{opacity:1;transform:none;transition:opacity .6s .55s,transform .9s cubic-bezier(.2,.7,.2,1) .5s}
/* which face shows: the earlier ones have slid up, the later ones wait below */
.o-deck[data-o-step="4"] .lw .fr,.o-deck[data-o-step="4"] .lw .fe,.o-deck[data-o-step="4"] .lw .fp{transform:translateY(-100%)}
.o-deck[data-o-step="4"] .lw .fb{transform:none}
.o-deck[data-o-step="1"] .lw .fr{transform:translateY(-100%)}
.o-deck[data-o-step="1"] .lw .fe{transform:none}
.o-deck[data-o-step="2"] .lw .fr,.o-deck[data-o-step="2"] .lw .fe{transform:translateY(-100%)}
.o-deck[data-o-step="2"] .lw .fp{transform:none}
.o-deck[data-o-step="3"] .lw .fr,.o-deck[data-o-step="3"] .lw .fe,.o-deck[data-o-step="3"] .lw .fp{transform:translateY(-100%)}
.o-deck[data-o-step="3"] .lw .fb{transform:none}
.o-deck[data-o-step="5"] .lw .fr,.o-deck[data-o-step="5"] .lw .fe,.o-deck[data-o-step="5"] .lw .fp,.o-deck[data-o-step="5"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="5"] .lw .tw{transform:none}
.o-deck[data-o-step="6"] .lw .fr,.o-deck[data-o-step="6"] .lw .fe,.o-deck[data-o-step="6"] .lw .fp,.o-deck[data-o-step="6"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="6"] .lw .tw{transform:none}
.o-deck[data-o-step="7"] .lw .fr,.o-deck[data-o-step="7"] .lw .fe,.o-deck[data-o-step="7"] .lw .fp,.o-deck[data-o-step="7"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="7"] .lw .tw{transform:none}
.o-deck[data-o-step="8"] .lw .fr,.o-deck[data-o-step="8"] .lw .fe,.o-deck[data-o-step="8"] .lw .fp,.o-deck[data-o-step="8"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="8"] .lw .tw{transform:none}
.o-deck[data-o-step="10"] .lw .fr,.o-deck[data-o-step="10"] .lw .fe,.o-deck[data-o-step="10"] .lw .fp,.o-deck[data-o-step="10"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="10"] .lw .tw{transform:none}
.o-deck[data-o-step="9"] .lw .fr,.o-deck[data-o-step="9"] .lw .fe,.o-deck[data-o-step="9"] .lw .fp,.o-deck[data-o-step="9"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="9"] .lw .tw{transform:none}
/* act 1, engineers: AI's stream beside a growing pile */
.o-deck[data-o-step="1"] .lw .stream,.o-deck[data-o-step="1"] .lw .k1a,.o-deck[data-o-step="1"] .lw .k1b{opacity:1;transform:none}
/* act 2, product managers: code, a question to engineering, the task as text, an agent that researches again */
.o-deck[data-o-step="2"] .lw .lp,.o-deck[data-o-step="2"] .lw .k2a,.o-deck[data-o-step="2"] .lw .k2b,.o-deck[data-o-step="2"] .lw .k2c{opacity:1;transform:none}
.o-deck[data-o-step="2"] .lw .lp{animation:lw-flow .9s linear infinite}
/* act 3, business owners: spend on one side, people on the other, the roadmap between */
.o-deck[data-o-step="3"] .lw .k3a,.o-deck[data-o-step="3"] .lw .k3b,.o-deck[data-o-step="3"] .lw .bm{opacity:1;transform:none}
/* the turn: the cards settle into the twin, its connections draw in, eight views gather */
.o-deck[data-o-step="5"] .lw .nd::before,.o-deck[data-o-step="6"] .lw .nd::before,.o-deck[data-o-step="7"] .lw .nd::before,.o-deck[data-o-step="8"] .lw .nd::before,.o-deck[data-o-step="10"] .lw .nd::before,.o-deck[data-o-step="9"] .lw .nd::before{opacity:0}
.o-deck[data-o-step="5"] .lw .fx::after,.o-deck[data-o-step="6"] .lw .fx::after,.o-deck[data-o-step="7"] .lw .fx::after,.o-deck[data-o-step="8"] .lw .fx::after,.o-deck[data-o-step="10"] .lw .fx::after,.o-deck[data-o-step="9"] .lw .fx::after{opacity:1}
.o-deck[data-o-step="5"] .lw .edges .e,.o-deck[data-o-step="6"] .lw .edges .e,.o-deck[data-o-step="7"] .lw .edges .e,.o-deck[data-o-step="8"] .lw .edges .e,.o-deck[data-o-step="10"] .lw .edges .e,.o-deck[data-o-step="9"] .lw .edges .e{opacity:1;stroke-dashoffset:0;transition:opacity .2s .45s,stroke-dashoffset .6s .45s,stroke .4s}
.o-deck[data-o-step="5"] .lw .vw,.o-deck[data-o-step="5"] .lw .c3a,.o-deck[data-o-step="5"] .lw .c3b,.o-deck[data-o-step="5"] .lw .c3c{opacity:1;transform:none}
/* answers: engineers read the twin, their agents read it through MCP */
.o-deck[data-o-step="6"] .lw .plane,.o-deck[data-o-step="9"] .lw .plane{transform:scale(.78)}
.o-deck[data-o-step="6"] .lw .l1,.o-deck[data-o-step="6"] .lw .l3,.o-deck[data-o-step="6"] .lw .c6a,.o-deck[data-o-step="6"] .lw .c6b,.o-deck[data-o-step="6"] .lw .c6c{opacity:1;transform:none}
/* product managers follow one use case down to its monthly cost and hand it over as a link */
.o-deck[data-o-step="7"] .lw .bizt,.o-deck[data-o-step="7"] .lw .tl,.o-deck[data-o-step="7"] .lw .c4a,.o-deck[data-o-step="7"] .lw .c4b,.o-deck[data-o-step="7"] .lw .c4c,.o-deck[data-o-step="7"] .lw .c4d,.o-deck[data-o-step="7"] .lw .c5a,.o-deck[data-o-step="7"] .lw .c5b,.o-deck[data-o-step="7"] .lw .c5c{opacity:1;transform:none}
.o-deck[data-o-step="7"] .lw .techt,.o-deck[data-o-step="7"] .lw .bizt,.o-deck[data-o-step="9"] .lw .techt,.o-deck[data-o-step="9"] .lw .bizt{opacity:1;transform:none}
.o-deck[data-o-step="7"] .lw .nd.hot .fx::after,.o-deck[data-o-step="9"] .lw .nd.hot .fx::after{box-shadow:inset 0 0 0 1.6px #0071e3;border-color:#0071e3}
.o-deck[data-o-step="7"] .lw .e.hot,.o-deck[data-o-step="9"] .lw .e.hot{stroke:#0071e3;stroke-width:2}
/* business owners compare two drafts with their cost and see how close the system is */
.o-deck[data-o-step="8"] .lw .plane{transform:translateY(-50px) scale(.84)}
.o-deck[data-o-step="8"] .lw .abx,.o-deck[data-o-step="8"] .lw .c7a,.o-deck[data-o-step="8"] .lw .cdec,.o-deck[data-o-step="8"] .lw .c7r,.o-deck[data-o-step="8"] .lw .techt{opacity:1;transform:none}
.o-deck[data-o-step="8"] .lw .n4 .fx::after{box-shadow:inset 0 0 0 2px #ff453a}
/* direction, then every reader around one picture */
.o-deck[data-o-step="10"] .lw .plane{transform:translateY(-70px) scale(.74)}
.o-deck[data-o-step="10"] .lw .dirc{opacity:1;transform:none}
.o-deck[data-o-step="9"] .lw .lz{opacity:1;transform:none}
/* on an upright phone the stage is drawn small: the cards' words a little larger */
@media (max-width: 767px) and (orientation: portrait){.lw .tw b{font-size:16px}.lw .tw span{font-size:12.5px}.lw .fr b{font-size:15px}.lw .fr small{font-size:11px}.lw .fz b{font-size:12.5px}.lw .fz span{font-size:10px}.lw .co{font-size:13px}.lw .vcap{font-size:13px}}
/* the call to action: the twin folds back into the mark it came from */
.o-deck[data-o-step="11"] .lw .n0{transform:translate(263px,109px) scale(.35) rotate(-8deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n1{transform:translate(73px,109px) scale(.35) rotate(6deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n2{transform:translate(73px,-1px) scale(.35) rotate(-4deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n3{transform:translate(-117px,-1px) scale(.35) rotate(9deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n4{transform:translate(-117px,-111px) scale(.35) rotate(-6deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n5{transform:translate(73px,-111px) scale(.35) rotate(4deg);opacity:0}
.o-deck[data-o-step="11"] .lw .n6{transform:translate(263px,-111px) scale(.35) rotate(-3deg);opacity:0}
.o-deck[data-o-step="11"] .lw .nd{transition:transform .6s cubic-bezier(.5,0,.75,0) var(--lw-d,0s),opacity .45s calc(.15s + var(--lw-d,0s))}
.o-deck[data-o-step="11"] .lw .intro{opacity:1;transform:none;transition:opacity .6s .55s,transform .9s cubic-bezier(.2,.7,.2,1) .5s}
.o-deck[data-o-step="11"] .lw .fr,.o-deck[data-o-step="11"] .lw .fe,.o-deck[data-o-step="11"] .lw .fp,.o-deck[data-o-step="11"] .lw .fb{transform:translateY(-100%)}
.o-deck[data-o-step="11"] .lw .tw{transform:none}