/* ===== Section 02: "When the software stops, the workarounds start." ===== */
.s02{position:relative;background:var(--ink);color:#fff;height:480vh;overflow:clip;z-index:0}
.s02-sticky{position:sticky;top:0;height:100vh;overflow:hidden;padding-left:var(--cl);isolation:isolate;background:var(--ink)}

/* canvas: the camera has moved, one soft neutral light from the lower left */
.s02-light{position:absolute;inset:-12% -6% -14% -6%;z-index:-3;pointer-events:none;will-change:transform;
  background:radial-gradient(1300px 980px at 8% 100%,rgba(255,255,255,.075),rgba(255,255,255,.036) 40%,rgba(255,255,255,0) 72%)}
.s02-grain{position:absolute;inset:0;z-index:6;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.2 -.1'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px}

.s02-dither{position:absolute;inset:0;z-index:-2;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n' x='0' y='0' width='100%' height='100%'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='1' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2 -.45'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px 160px}
/* words: scrubbed in JS (pin) or revealed on enter (flow) */
.s02 .w{display:inline-block;opacity:.18}
.s02-h2,.cp,.closer{font-weight:500;letter-spacing:-.03em;font-variation-settings:'wdth' 100;text-wrap:balance}

/* the title: big and centred while it is read, then it moves up as one block and stays as the section title */
.s02-h2{position:absolute;left:0;top:0;width:max-content;max-width:min(1160px,calc(100vw - 2*var(--cl)));transform-origin:0 0;
  text-align:left;font-size:clamp(40px,min(5.2vw,9vh),76px);line-height:1.04;z-index:2}

/* pattern copy */
.pat{display:contents}
.cp{position:absolute;left:var(--cl);top:0;width:var(--tw,520px);font-size:calc(var(--ls,1)*clamp(26px,min(2.15vw,3.9vh),32px));line-height:1.18;letter-spacing:-.022em;text-wrap:pretty;z-index:3;opacity:0}
.lns{position:absolute;left:var(--cl);top:0;width:var(--tw,520px);z-index:3;opacity:0}
.lns p{font-size:calc(var(--ls,1)*clamp(17px,min(1.4vw,2.5vh),20px));line-height:1.5;color:#fff;font-weight:400;letter-spacing:-.005em;text-wrap:pretty}
.lns p+p{margin-top:calc(var(--ls,1)*14px)}
.closer{position:absolute;left:var(--cl);top:0;text-align:center;width:min(1000px,calc(100vw - 2*var(--cl)));font-size:clamp(32px,min(4.16vw,6.9vh),61px);line-height:1.06;z-index:3;opacity:0;text-wrap:balance}

/* ---------- the three fragments (HTML/CSS, not images) ---------- */
.fr{position:absolute;left:0;top:0;z-index:4;width:var(--w,300px);opacity:0;transform-origin:50% 50%;
  font-family:var(--font);font-size:12px;line-height:1;color:#6b7280;--sh:0 0 0 1px rgba(255,255,255,.05),0 30px 64px -22px rgba(0,0,0,.78),0 8px 22px -8px rgba(0,0,0,.45)}
.fr .card,.fr .bub{background:#fff;border:1px solid #e6e8ec;border-radius:12px;box-shadow:var(--sh)}
.fr .th,.fr .rn{position:absolute;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none}
.fr .th{z-index:0}.fr .rn{z-index:2}
/* content sits above the thread, card surfaces below it */
.fr .lb,.fr .r,.fr .tot,.fr .neq,.fr .appr,.fr .mm,.fr .row{position:relative;z-index:1}
.lb{display:block;font-size:11.5px;font-weight:500;letter-spacing:.01em;color:#6b7280;margin-bottom:11px}
.r{display:block;height:8px;border-radius:4px;background:#dce0e8;width:var(--w,60%)}
.row{display:flex;justify-content:space-between;gap:14px;margin-bottom:8px}
.row i{display:block;height:7px;border-radius:4px;background:#dce0e8}
.row i:first-child{width:var(--a,40%)}.row i:last-child{width:var(--b,22%);background:#cdd3dd}

/* 1. two ledgers that don't agree */
.f1{--w:300px}
.f1 .card{padding:14px 16px 15px}
.f1 .tot{display:block;height:11px;border-radius:4px;background:rgba(21,27,43,.9);margin:7px 0 0 auto;width:var(--tt,60%)}
.f1 .rule{display:block;height:1px;background:#e6e8ec;margin:9px 0 0}
.f1 .chan{height:36px;display:flex;align-items:center;justify-content:center}
.f1 .neq{position:relative;display:block;width:22px;height:22px;text-align:center;font-size:17px;line-height:22px;font-weight:500;color:rgba(255,255,255,.9)}
.f1 .neq b{position:absolute;inset:0;font-weight:500}
.f1 .neq .eq{opacity:0}

/* 2. an approval that got lost */
.f2{--w:292px}
.f2 .bub{position:relative;padding:17px 18px;border-radius:16px 16px 16px 5px}
.f2 .bub::after{content:"";position:absolute;left:0;bottom:-10px;width:16px;height:11px;background:#fff;clip-path:polygon(0 0,100% 0,0 100%)}
.f2 .r{margin:0}
.f2 .appr{display:flex;align-items:center;justify-content:center;gap:8px;height:20px;margin:14px 0;font-size:12.5px;font-weight:600;color:#151b2b;letter-spacing:.005em}
.f2 .appr>span:last-child{text-shadow:-4px 0 #fff,4px 0 #fff,0 -4px #fff,0 4px #fff,-3px -3px #fff,3px 3px #fff,-3px 3px #fff,3px -3px #fff,-5px 0 #fff,5px 0 #fff}
.f2 .appr .ck{display:block;width:18px;height:18px;border-radius:50%;background:#151b2b;flex:none}
.f2 .appr .ck svg{display:block;width:18px;height:18px}

/* 3. lists that don't match */
.f3{--w:330px;display:flex;gap:12px}
.f3 .card{flex:1 1 0;min-width:0;padding:13px 12px 13px}
.f3 .r{height:9px;margin-bottom:10px;border-radius:5px}
.f3 .mm{display:block;height:15px;margin:-3px -2px 7px;padding:2px;border:1px dashed #7f8a9d;border-radius:8px;width:var(--mw,80%);transform:translateX(var(--mx,0px)) translateY(var(--my,0px))}
.f3 .mm i{display:block;height:100%;border-radius:5px;background:#d0d6e0}
.f3 .card>:last-child{margin-bottom:0}
.f3 .card:nth-child(1){--mw:84%;--mx:0px;--my:0px}
.f3 .card:nth-child(2){--mw:62%;--mx:7px;--my:3px}
.f3 .card:nth-child(3){--mw:92%;--mx:-5px;--my:-3px}

.finalrow{display:none}

/* ---------- flow: phones, tablets, reduced motion (no pinning) ---------- */
.s02.flow{height:auto}
.flow .s02-sticky{position:relative;height:auto;overflow:hidden;padding:128px 24px 132px}
.flow .s02-light{inset:0;background:radial-gradient(900px 700px at 0% 100%,rgba(255,255,255,.07),rgba(255,255,255,.03) 42%,rgba(255,255,255,0) 72%);will-change:auto}
.flow .s02-h2,.flow .cp,.flow .lns,.flow .closer{position:static;transform:none;width:auto;max-width:none;z-index:auto}
.flow .s02-h2{text-align:left;font-size:clamp(38px,10.4vw,56px);line-height:1.05}
.flow .pat{display:block;margin-top:84px}
.flow .cp{font-size:clamp(27px,7.4vw,34px);line-height:1.2}
.flow .lns{margin-top:92px}
.flow .lns p{font-size:clamp(18px,4.8vw,21px);color:#fff}
.flow .lns .w{opacity:.2}
.flow .closer{text-align:left;margin-top:92px;font-size:clamp(33px,9vw,48px);line-height:1.07;text-wrap:balance}
.flow .w{transition:opacity .7s cubic-bezier(.22,1,.36,1) calc(var(--i)*38ms)}
.flow .in .w,.flow .w.in{opacity:1}
.flow .lns.in .w{opacity:.74}
.flow .closer.in .w{transition-duration:.8s;transition-delay:calc(var(--i)*55ms)}
.flow .closer.in .key .w{transition-delay:calc(var(--i)*55ms + .25s)}
.flow .pat .fr{position:relative;left:auto;top:auto;margin:38px 0 0 var(--ox,0px);transform:rotate(var(--rot,-4deg)) translateY(30px) scale(.94);opacity:0;will-change:auto;
  transition:opacity .9s cubic-bezier(.22,1,.36,1) .1s,transform 1.1s cubic-bezier(.22,1,.36,1) .1s,filter .9s}
.flow .pat .fr.in{opacity:1;transform:rotate(var(--rot,-4deg))}
.flow .pat .f2{opacity:0;filter:blur(1.2px)}
.flow .pat .f2.in{opacity:.82}
.flow .pat .fr .th,.flow .pat .fr .rn{display:none}
.flow .pat[data-i="0"] .fr{--rot:-4deg;--ox:6px}
.flow .pat[data-i="1"] .fr{--rot:5deg;--ox:max(0px,calc(100% - var(--w) - 8px))}
.flow .pat[data-i="2"] .fr{--rot:-3.5deg;--ox:2px}
.flow .f1,.flow .f2,.flow .f3{max-width:100%}
.flow .f3{width:min(330px,100%)}
.flow .finalrow{display:block;position:relative;isolation:isolate;margin-top:76px;padding:6px 0 6px}
.flow .finalrow .col{position:relative;display:flex;flex-direction:column;align-items:center;gap:60px}
.flow .finalrow .fr{position:static;z-index:auto;transform:none;opacity:1;filter:none;will-change:auto;margin:0}
.flow .finalrow .fr .th,.flow .finalrow .fr .rn{display:none}
.flow .finalrow .fr .r,.flow .finalrow .fr .lb,.flow .finalrow .fr .tot,.flow .finalrow .fr .neq,.flow .finalrow .fr .appr,.flow .finalrow .fr .mm,.flow .finalrow .fr .row{position:relative;z-index:1}
.fsvg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.fsvg.u{z-index:0}.fsvg.o{z-index:2}
.fsvg .cs{fill:none;stroke:rgba(7,9,15,.45);stroke-width:4.4;stroke-linecap:round;stroke-linejoin:round}
.fsvg .tp{fill:none;stroke:var(--yellow);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fsvg .cs,.fsvg .tp{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s cubic-bezier(.4,0,.2,1)}
.fsvg .rg-c{fill:none;stroke:rgba(7,9,15,.45);stroke-width:4.4;vector-effect:non-scaling-stroke}
.fsvg .rg{fill:none;stroke:var(--yellow);stroke-width:2;vector-effect:non-scaling-stroke}
.fsvg .rg,.fsvg .rg-c{opacity:0;transition:opacity .5s ease}
.finalrow.in .cs,.finalrow.in .tp{stroke-dashoffset:0}
.finalrow.in .rg,.finalrow.in .rg-c{opacity:1}
.finalrow.in .rg:nth-of-type(2),.finalrow.in .rg-c:nth-of-type(2){transition-delay:.9s}
.finalrow.in .rg:nth-of-type(3),.finalrow.in .rg-c:nth-of-type(3){transition-delay:1.7s}
.finalrow.in .f1 .tot{width:58%}
.finalrow.in .f1 .eq{opacity:1}.finalrow.in .f1 .ne{opacity:0}
.finalrow .f1 .tot,.finalrow .f1 .neq b,.finalrow .f3 .mm{transition:width .8s cubic-bezier(.22,1,.36,1) 3s,opacity .6s ease 3s,transform .8s cubic-bezier(.22,1,.36,1) 3s}
.finalrow.in .f3 .card .mm{--mw:76%;--mx:0px;--my:0px;border-color:rgba(163,172,187,0)}
.s02.static *{transition:none!important}
@media (min-width:900px){
  .flow .s02-sticky{padding-left:max(var(--cl),calc((100vw - 760px)/2));padding-right:max(var(--cl),calc((100vw - 760px)/2))}
  .flow .s02-h2{font-size:clamp(44px,6vw,64px)}
  .flow .cp{font-size:30px}
  .flow .closer{font-size:clamp(40px,5vw,60px)}
}
.s02.static .pat .fr{display:none}
.finalrow .f3 .lb{text-shadow:-4px 0 #fff,4px 0 #fff,0 -3px #fff,0 3px #fff,-3px -3px #fff,3px 3px #fff,-3px 3px #fff,3px -3px #fff}

.fsvg .pl{fill:none;stroke:#fff1a6;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:.07 3;stroke-dashoffset:.07;opacity:0;filter:drop-shadow(0 0 5px rgba(255,209,0,.85))}
.finalrow.in .pl{animation:s02pulse 1.15s cubic-bezier(.45,0,.35,1) 2.0s both}
@keyframes s02pulse{0%{opacity:1;stroke-dashoffset:.07}100%{opacity:1;stroke-dashoffset:-1.07}}
.s02.static .pl{display:none}
.s02 .pl-pin{fill:none;stroke:#fff1a6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,209,0,.85))}

/* captions under the connected fragments */
.cap{position:absolute;left:0;top:0;z-index:4;margin:0;opacity:0;font-size:15px;line-height:1.45;font-weight:400;letter-spacing:-.003em;color:rgba(255,255,255,.62);text-wrap:pretty}
.flow .cap{position:relative;z-index:1;opacity:0;left:auto;top:auto;transform:none;font-size:15px;max-width:100%;text-shadow:0 0 3px #07090f,0 0 3px #07090f,0 0 8px #07090f,0 0 8px #07090f;transition:opacity .9s ease 3.4s}
.flow .finalrow.in .cap{opacity:1}
.flow .cell{display:flex;flex-direction:column;align-items:center;gap:18px}
.flow .finalrow .col{gap:46px}
.s02.static .cap{opacity:1;transition:none}
.flow .s02-h2,.flow .cp,.flow .lns,.flow .closer{opacity:1}