/* Sift row (Kairos Automations 03): film left · text right. Variant F "Morning" (v2, dashboard):
   the owner's morning on the Sift web dashboard, one continuous camera. The dashboard loads with the night's
   result → 87 counts down to 3 while the done-for-you totals count up → the three cards that need you are
   approved one by one (physical stack, sent toast, routed to Marc) → reply time 26 h → 1,9 h → the calm,
   empty inbox files two more mails by itself. Everything scoped under #sift, film classes sf-, keyframes s-.
   Film sized in cqw of #sframe (5:4); the browser window is built in em (1em = 10 app px). */
#sift{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,96px);align-items:center}
@media (max-width:900px){#sift{grid-template-columns:1fr}}
#sift{--ink:#080808;--paper:#fcfcfc;--mute:#8d8d8d;--line:#262626;--red:#ff2d3f;
  --sans:'Host Grotesk','Helvetica Neue',Arial,sans-serif;--serif:'Gambetta','Times New Roman',serif;
  --ease:cubic-bezier(.16,1,.3,1);--spring:cubic-bezier(.34,1.25,.64,1);--gut:clamp(16px,2.2vw,32px)}
#sift .txt{max-width:560px}
#sift .t-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
#sift .e-logo{display:flex;align-items:center;gap:12px}
#sift .e-logo img{height:18px}
#sift .e-logo span{font-size:12px;color:var(--mute);text-transform:uppercase;letter-spacing:.04em}
#sift .h{font-weight:500;text-transform:uppercase;font-size:clamp(34px,3.7vw,62px);line-height:.92;letter-spacing:-.035em;margin-top:28px}
#sift .h em{font-size:.62em;vertical-align:.22em;margin-right:.08em}
#sift .intro{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:rgba(252,252,252,.78);margin-top:22px}
#sift .intro em{color:var(--paper)}
#sift .caps{list-style:none;margin-top:30px;border-top:1px solid var(--line);padding:0}
#sift .caps li{display:grid;grid-template-columns:1fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line)}
#sift .caps .n{display:none}
#sift .caps li>div{display:grid;grid-template-rows:auto 0fr;transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)}
#sift .caps li:hover>div,#sift .caps li.on>div{grid-template-rows:auto 1fr}
#sift .caps b{font-weight:500;font-size:15px;text-transform:uppercase;letter-spacing:-.01em;transition:color .6s ease}
#sift .caps p{font-size:13.5px;color:var(--mute);min-height:0;overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .5s var(--ease)}
#sift .caps p::before{content:"";display:block;height:2px}
#sift .caps li:hover b,#sift .caps li.on b{color:var(--red)}
#sift .caps li:hover p,#sift .caps li.on p{opacity:1;transform:none;transition:opacity .6s ease .25s,transform .8s var(--ease) .2s}
#sift.noanim .caps li>div{transition:grid-template-rows .9s cubic-bezier(.65,0,.35,1)!important}
#sift.noanim .caps b{transition:color .6s ease!important}
#sift.noanim .caps p{transition:opacity .35s ease,transform .5s var(--ease)!important}
#sift .txt .btn-line{margin-top:30px}
#sift .media{position:relative}
#sift .frame{position:relative;width:100%;aspect-ratio:5/4;container-type:inline-size;isolation:isolate;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 6%,#000 94%,transparent 100%)}
#sift.noanim .frame *{transition:none!important}
@media (prefers-reduced-motion:reduce){#sift *{transition:none!important;animation:none!important}}


/* ============================================================
   Film materials = the Sift web app, dark theme (Geist, teal accent)
   ============================================================ */
#sift{--s-bg:#0E1010;--s-sf:#171919;--s-sf2:#1F2222;--s-sf3:#272A2A;--s-ln:rgba(255,255,255,.075);--s-ln2:rgba(255,255,255,.13);
  --s-tx:#EEEEEA;--s-tx2:#A4A7A3;--s-tx3:#6D716E;--s-acc:#3CB3A7;--s-accw:rgba(60,179,167,.13);--s-acci:#06201D;
  --s-red:#D7826F;--s-seg:#323636;--s-geist:'Geist',system-ui,-apple-system,sans-serif;
  --s-cam:cubic-bezier(.65,0,.3,1);--s-out:cubic-bezier(.2,.8,.2,1);--s-spr:cubic-bezier(.3,1.2,.45,1)}
#sift .sf-film{position:absolute;inset:0;font-family:var(--s-geist);font-feature-settings:"ss01";color:var(--s-tx)}
#sift .sf-ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
#sift .sf-n{font-variant-numeric:tabular-nums}

/* ---------- camera + browser window (128 × 74.4 em) ---------- */
#sift .sf-cam{position:absolute;left:50%;top:50%;width:128em;height:74.4em;margin:-37.2em 0 0 -64em;font-size:1.43cqw;
  transform-origin:50% 50%;transform:scale(.5);transition:transform 1.8s var(--s-cam)}
#sift .sf-cam.slow{transition:transform 3.2s cubic-bezier(.3,0,.4,1)}
#sift .sf-win{position:absolute;inset:0;border-radius:1.4em;background:var(--s-bg);overflow:hidden;
  box-shadow:0 0 0 .1em rgba(255,255,255,.1),0 4em 8em rgba(0,0,0,.7);opacity:0;transform:translateY(2.5em);transition:opacity .8s ease,transform 1.2s var(--s-out)}
#sift .sf-win.on{opacity:1;transform:none}
#sift .sf-chr{position:absolute;left:0;right:0;top:0;height:4.4em;background:#151717;border-bottom:.1em solid var(--s-ln);display:flex;align-items:center;padding:0 1.6em}
#sift .sf-chr .dots{display:flex;gap:.7em}
#sift .sf-chr .dots i{width:1.2em;height:1.2em;border-radius:50%;background:#2c2f2f}
#sift .sf-chr .url{position:absolute;left:50%;top:.9em;width:34em;margin-left:-17em;height:2.6em;border-radius:.8em;background:var(--s-sf2);display:flex;align-items:center;justify-content:center;gap:.6em;font-size:1em;color:var(--s-tx3)}
#sift .sf-chr .url span{font-size:1.25em}
#sift .sf-chr .url .sf-ic{font-size:1.2em}
#sift .sf-load{position:absolute;left:0;top:4.3em;height:.22em;width:100%;background:var(--s-acc);transform-origin:0 50%;transform:scaleX(0);opacity:1;z-index:5}
#sift .sf-dim{position:absolute;inset:0;background:#080808;z-index:40;opacity:1;transition:opacity .9s ease;pointer-events:none}
#sift .sf-dim.off{opacity:0;transition:opacity .6s ease}

/* app area */
#sift .sf-app{position:absolute;left:0;right:0;top:4.4em;bottom:0}
#sift .sf-rise{opacity:0;transform:translateY(1.2em);transition:opacity .6s ease,transform .8s var(--s-out)}
#sift .sf-rise.on{opacity:1;transform:none}
#sift .sf-top{position:absolute;left:3.2em;right:3.2em;top:0;height:6.8em;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.6em}
#sift .sf-brand{display:flex;align-items:center;gap:1.4em}
#sift .sf-brand img{height:2em;display:block}
#sift .sf-brand .sep{width:.1em;height:1.8em;background:var(--s-ln2)}
#sift .sf-brand .lk{display:inline-flex;align-items:baseline;gap:.5em;color:var(--s-tx2);white-space:nowrap}
#sift .sf-brand .lk b{font-family:'Host Grotesk',sans-serif;font-weight:600;font-size:1.25em;letter-spacing:.01em;color:var(--s-tx)}
#sift .sf-brand .lk span{font-family:'Gambetta',Georgia,serif;font-style:italic;font-weight:300;font-size:1.4em}
#sift .sf-nav{display:flex;gap:.2em;padding:.3em;border-radius:1.2em;background:var(--s-sf3)}
#sift .sf-nav span{height:3.4em;padding:0 1.4em;border-radius:.9em;font-weight:500;color:var(--s-tx2);display:flex;align-items:center;gap:.7em;white-space:nowrap}
#sift .sf-nav span i{font-style:normal;font-size:1.35em}
#sift .sf-nav span u{text-decoration:none;font-size:1.2em;color:var(--s-tx3);font-variant-numeric:tabular-nums}
#sift .sf-nav span.on{background:var(--s-seg);color:var(--s-tx)}
#sift .sf-nav span.on u{color:var(--s-acc)}
#sift .sf-nav span.hit u{color:var(--s-acc)}
#sift .sf-me{display:flex;justify-content:flex-end;align-items:center;gap:1em}
#sift .sf-me .who{text-align:right;line-height:1.25}
#sift .sf-me .who b{display:block;font-weight:500;font-size:1.3em}
#sift .sf-me .who span{font-size:1.2em;color:var(--s-tx3)}
#sift .sf-av{width:3em;height:3em;border-radius:50%;display:grid;place-items:center;font-size:1.15em;font-weight:600;background:var(--s-sf3);color:var(--s-tx2);flex:none}
#sift .sf-av.k{background:var(--s-accw);color:var(--s-acc)}

/* left column: hero + today's queue */
#sift .sf-left{position:absolute;left:3.2em;top:9.6em;width:29.2em}
#sift .sf-date{font-size:1.35em;color:var(--s-tx3)}
#sift .sf-big{display:block;font-size:10.4em;font-weight:600;letter-spacing:-.06em;line-height:.9;margin-top:.13em;font-variant-numeric:tabular-nums}
#sift .sf-rest{position:relative;height:3.6em;margin-top:.8em}
#sift .sf-rest span{position:absolute;left:0;top:0;font-size:3em;font-weight:600;letter-spacing:-.025em;white-space:nowrap;transition:opacity .6s ease,transform .8s var(--s-out)}
#sift .sf-rest span.b{opacity:0;transform:translateY(.35em)}
#sift .sf-left.need .sf-rest span.a{opacity:0;transform:translateY(-.35em)}
#sift .sf-left.need .sf-rest span.b{opacity:1;transform:none}
#sift .sf-sub{margin-top:1em;color:var(--s-tx2);max-width:26em;height:4.4em}
#sift .sf-sub p{font-size:1.45em;line-height:1.5}
#sift .sf-sub b{color:var(--s-tx);font-weight:500;font-variant-numeric:tabular-nums}
#sift .sf-queue{margin-top:2.2em;border-top:.1em solid var(--s-ln);padding-top:1.2em}
#sift .sf-qh{display:flex;justify-content:space-between;align-items:baseline;padding:.4em 1em .8em;color:var(--s-tx3)}
#sift .sf-qh>*{font-size:1.3em}
#sift .sf-qh b{font-weight:500;color:var(--s-tx2)}
#sift .sf-prog{height:.3em;border-radius:.3em;background:var(--s-sf3);margin:0 1em 1em;overflow:hidden}
#sift .sf-prog i{display:block;height:100%;width:100%;background:var(--s-acc);border-radius:.3em;transform-origin:0 50%;transform:scaleX(0);transition:transform .8s var(--s-out)}
#sift .sf-qr{display:flex;align-items:center;gap:1em;padding:.8em 1em;border-radius:1em;transition:background .5s}
#sift .sf-qr.cur{background:var(--s-sf)}
#sift .sf-qr .qd{width:1.8em;height:1.8em;display:grid;place-items:center;flex:none;color:var(--s-acc);position:relative}
#sift .sf-qr .qd i{width:.7em;height:.7em;border-radius:50%;background:var(--s-tx3);transition:transform .4s,opacity .3s}
#sift .sf-qr .qd i.r{background:var(--s-red)}
#sift .sf-qr .qd .sf-ic{position:absolute;font-size:1.5em;stroke-width:2;opacity:0;transform:scale(.4);transition:opacity .3s,transform .5s var(--s-spr)}
#sift .sf-qr.done .qd i{transform:scale(0);opacity:0}
#sift .sf-qr.done .qd .sf-ic{opacity:1;transform:none}
#sift .sf-qr .qt{flex:1;min-width:0}
#sift .sf-qr .qt b{display:block;font-weight:500;font-size:1.35em;white-space:nowrap;transition:color .5s}
#sift .sf-qr .qt span{display:block;font-size:1.2em;color:var(--s-tx3);white-space:nowrap}
#sift .sf-qr .qs{font-size:1.2em;color:var(--s-tx3);font-variant-numeric:tabular-nums}
#sift .sf-qr.done .qt b{color:var(--s-tx3);font-weight:400}

/* centre: the stack */
#sift .sf-mid{position:absolute;left:37.2em;width:56em;top:9.6em}
#sift .sf-stack{position:relative;height:42.4em}
#sift .sf-card{position:absolute;left:0;right:0;top:0;height:42.4em;border-radius:2.4em;background:var(--s-sf);border:.1em solid var(--s-ln2);transform-origin:50% 100%;
  box-shadow:0 .1em .3em rgba(0,0,0,.35),0 2.8em 5.6em -1.8em rgba(0,0,0,.8)}
#sift .sf-ct{position:absolute;inset:0;padding:2.6em 2.8em}
#sift .sf-ch{display:flex;align-items:center;gap:1.3em}
#sift .sf-ch .sf-av{width:4em;height:4em;font-size:1.35em}
#sift .sf-ch .who{flex:1;min-width:0}
#sift .sf-ch .who b{display:block;font-weight:600;font-size:1.55em;letter-spacing:-.01em}
#sift .sf-ch .who span{display:block;color:var(--s-tx3);font-size:1.3em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sift .sf-ch .when{color:var(--s-tx3);font-size:1.3em;font-variant-numeric:tabular-nums}
#sift .sf-meta{display:flex;align-items:center;gap:1.4em;margin-top:1.8em;font-size:1.3em;color:var(--s-tx2);white-space:nowrap}
#sift .sf-meta .m{display:inline-flex;align-items:center;gap:.5em}
#sift .sf-meta .m .sf-ic{color:var(--s-tx3);font-size:1.1em}
#sift .sf-meta .m.urg{color:var(--s-red);font-weight:500}
#sift .sf-meta .m.urg i{width:.55em;height:.55em;border-radius:50%;background:var(--s-red)}
#sift .sf-meta .m.as{margin-left:auto}
#sift .sf-meta .m.as .sf-av{width:1.75em;height:1.75em;font-size:.72em}
#sift .sf-sum{margin-top:.68em;font-size:2.1em;line-height:1.36;font-weight:600;letter-spacing:-.022em;height:2.72em}
#sift .sf-sum span{transition:none}
#sift .sf-dh{display:flex;align-items:center;gap:1em;margin-top:2em}
#sift .sf-dh b{font-weight:600;font-size:1.35em}
#sift .sf-tag{display:inline-flex;align-items:center;gap:.4em;font-size:1.15em;font-weight:500;color:var(--s-acc);background:var(--s-accw);padding:.25em .75em;border-radius:2em}
#sift .sf-tag .sf-ic{font-size:1em}
#sift .sf-dh span.n{margin-left:auto;font-size:1.25em;color:var(--s-tx3)}
#sift .sf-dft{margin-top:1em;border-radius:1.4em;background:var(--s-sf2);padding:1.6em 1.8em;height:11.4em;overflow:hidden}
#sift .sf-dft p{font-size:1.4em;line-height:1.6}
#sift .sf-cf{position:absolute;left:0;right:0;bottom:0;height:7.4em;border-top:.1em solid var(--s-ln);display:flex;align-items:center;gap:1em;padding:0 2em}
#sift .sf-b{display:inline-flex;align-items:center;gap:.6em;height:3.8em;padding:0 1.4em;border-radius:1.1em;background:var(--s-sf2);font-weight:500;color:var(--s-tx);white-space:nowrap;transition:transform .2s var(--s-spr),background .3s}
#sift .sf-b>span{font-size:1.4em}
#sift .sf-b .sf-ic{color:var(--s-tx2);font-size:1.5em}
#sift .sf-b kbd{font:inherit;font-size:1.1em;color:var(--s-tx3);background:var(--s-sf);border:.1em solid var(--s-ln);border-radius:.45em;padding:0 .4em;line-height:1.6}
#sift .sf-b.send{margin-left:auto;background:var(--s-acc);color:var(--s-acci);padding:0 2em}
#sift .sf-b.send .sf-ic{color:var(--s-acci)}
#sift .sf-b.send kbd{background:rgba(6,32,29,.14);border-color:transparent;color:var(--s-acci)}
#sift .sf-b.press{transform:scale(.94)}
#sift .sf-toast{position:absolute;left:50%;top:45.6em;z-index:20;height:4.8em;display:flex;align-items:center;gap:1.2em;padding:0 .6em 0 1.6em;border-radius:1.4em;background:#EDEDE9;color:#151514;white-space:nowrap;
  box-shadow:0 .2em .6em rgba(0,0,0,.4),0 2.4em 4.8em -1.6em rgba(0,0,0,.7);opacity:0;transform:translate(-50%,1.6em) scale(.97);transition:transform .5s cubic-bezier(.22,1.25,.36,1),opacity .2s}
#sift .sf-toast.on{opacity:1;transform:translate(-50%,0)}
#sift .sf-toast .sf-ic{font-size:1.5em;opacity:.75;stroke-width:2}
#sift .sf-toast .av{width:2.6em;height:2.6em;border-radius:50%;background:rgba(14,124,116,.12);color:#0E7C74;display:grid;place-items:center;font-size:1.05em;font-weight:600}
#sift .sf-toast span{font-size:1.4em;font-weight:500}
#sift .sf-toast b{font-size:1.4em;font-weight:500;opacity:.6;padding:.55em .9em;border-radius:.7em}
#sift .sf-toast .msg{display:flex;align-items:center;gap:1.2em;transition:opacity .15s}
#sift .sf-toast.sw .msg{opacity:0}
#sift .sf-calm{position:absolute;left:0;right:0;top:0;border-radius:2.4em;background:var(--s-sf);border:.1em solid var(--s-ln);padding:6.4em 4em;text-align:center;
  box-shadow:0 .1em .3em rgba(0,0,0,.3),0 1.6em 4em -1.4em rgba(0,0,0,.6);opacity:0;transform:translateY(2em) scale(.98);transition:opacity .7s ease,transform 1.1s var(--s-spr)}
#sift .sf-calm.on{opacity:1;transform:none}
#sift .sf-calm .ck{width:5.6em;height:5.6em;border-radius:50%;background:var(--s-accw);color:var(--s-acc);display:grid;place-items:center;margin:0 auto 2em;transform:scale(.5);transition:transform 1s var(--s-spr) .2s}
#sift .sf-calm.on .ck{transform:none}
#sift .sf-calm .ck .sf-ic{font-size:2.6em;stroke-width:2}
#sift .sf-calm h4{font-size:2.6em;letter-spacing:-.025em;font-weight:600}
#sift .sf-calm p{margin-top:.6em;color:var(--s-tx2);font-size:1.45em}
#sift .sf-fl{position:absolute;left:8em;right:8em;top:30em;height:5.4em;border-radius:1.4em;background:var(--s-sf);border:.1em solid var(--s-ln2);display:flex;align-items:center;gap:1.2em;padding:0 1.6em;opacity:0;z-index:7;
  box-shadow:0 1.6em 3.2em -1.2em rgba(0,0,0,.7)}
#sift .sf-fl .ti{width:3.2em;height:3.2em;border-radius:1em;background:var(--s-sf3);display:grid;place-items:center;color:var(--s-tx2);flex:none}
#sift .sf-fl .ti .sf-ic{font-size:1.6em}
#sift .sf-fl b{font-size:1.4em;font-weight:500;white-space:nowrap;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
#sift .sf-fl span{font-size:1.25em;color:var(--s-tx3);white-space:nowrap;display:flex;align-items:center;gap:.4em}
#sift .sf-fl span .sf-ic{color:var(--s-acc)}

/* right column: done for you + reply time */
#sift .sf-right{position:absolute;left:98em;width:26.8em;top:9.6em}
#sift .sf-right h5{font-size:1.5em;font-weight:600;letter-spacing:-.01em}
#sift .sf-right .h3s{font-size:1.3em;color:var(--s-tx3);margin:.3em 0 1.1em}
#sift .sf-dl{display:flex;align-items:center;gap:1.2em;padding:1.1em 0;border-top:.1em solid var(--s-ln)}
#sift .sf-dl:last-child{border-bottom:.1em solid var(--s-ln)}
#sift .sf-dl .di{width:3.2em;height:3.2em;border-radius:1em;background:var(--s-sf3);display:grid;place-items:center;color:var(--s-tx2);transition:background .5s,color .5s}
#sift .sf-dl .di .sf-ic{font-size:1.6em}
#sift .sf-dl .dt{flex:1;min-width:0;line-height:1.35}
#sift .sf-dl .dt b{display:block;font-weight:400;font-size:1.35em;white-space:nowrap}
#sift .sf-dl .dt span{display:block;color:var(--s-tx3);font-size:1.2em;white-space:nowrap}
#sift .sf-dl .dn{font-size:2em;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
#sift .sf-dl.hit .di{background:var(--s-accw);color:var(--s-acc)}
#sift .sf-rt{margin-top:2.8em}
#sift .sf-rt .bn{display:flex;align-items:baseline;gap:.3em;margin-top:.5em}
#sift .sf-rt .bn b{font-size:4em;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;min-width:2.15em}
#sift .sf-rt .bn small{font-size:1.5em;color:var(--s-tx2);font-weight:500}
#sift .sf-rt .wl{position:relative;margin-left:auto;width:12em;height:1.5em;text-align:right}
#sift .sf-rt .wl i{position:absolute;right:0;bottom:0;font-style:normal;font-size:1.25em;white-space:nowrap;color:var(--s-tx3);transition:opacity .5s,transform .7s var(--s-out)}
#sift .sf-rt .wl i.b{opacity:0;transform:translateY(.4em);color:var(--s-acc)}
#sift .sf-rt.aft .wl i.a{opacity:0;transform:translateY(-.4em)}
#sift .sf-rt.aft .wl i.b{opacity:1;transform:none}
#sift .sf-bars{position:relative;margin-top:1.6em;height:9em;display:grid;grid-template-columns:repeat(8,1fr);gap:.8em}
#sift .sf-bars .bw{position:relative;overflow:hidden;height:100%}
#sift .sf-bars .bw i{position:absolute;inset:0;border-radius:.6em;background:#3a3e3c;transition:transform 1.3s var(--s-spr),background .6s}
#sift .sf-bars .bw.af i{background:var(--s-acc)}
#sift .sf-mk{position:absolute;top:-.8em;bottom:0;left:50%;border-left:.12em dashed rgba(255,255,255,.2);opacity:0;transition:opacity .6s}
#sift .sf-mk span{position:absolute;left:.5em;top:-.4em;font-size:1.1em;color:var(--s-acc);white-space:nowrap}
#sift .sf-rt.mk .sf-mk{opacity:1}
#sift .sf-wk{display:grid;grid-template-columns:repeat(8,1fr);gap:.8em;margin-top:.7em;text-align:center;color:var(--s-tx3)}
#sift .sf-wk span{font-size:1.05em;font-variant-numeric:tabular-nums}

/* cursor */
#sift .sf-cur{position:absolute;left:0;top:0;z-index:30;width:2.4em;height:2.4em;opacity:0;pointer-events:none;transform-origin:0 0}
#sift .sf-cur svg{display:block;width:100%;height:100%;filter:drop-shadow(0 .15em .3em rgba(0,0,0,.5))}

/* focus: the columns outside the shot step back */
#sift .sf-win.fm #sR1.on,#sift .sf-win.fm #sR3.on,#sift .sf-win.fr #sR1.on,#sift .sf-win.fr #sR2.on{opacity:.22;transition:opacity 1s ease}
/* narrow frames: the toast sits inside the cropped stack shot */
#sift .sf-win.nar .sf-toast{top:44.4em}