/* Workflow player (see sivo-workflow.js). Each scene is ordinary HTML; the
   pieces animate in with a delay set inline as --d. Every piece's resting
   state is its final state, so with motion reduced the scene simply shows
   the end of the step. */
.wf{--acc:#0057ff;--acc-soft:#e6eeff;--acc-bright:#5c8dff;--ink:#11151b;--muted:#5f6966;--line:#e7e2d8;position:relative;font-family:"Figtree Variable",Figtree,Arial,sans-serif;color:var(--ink)}
.wf.lo{--acc:#8f6400;--acc-soft:#f6ebd0;--acc-bright:#e3b341}
.wf-steps{position:relative;min-height:460px;border-radius:28px;background:radial-gradient(600px 300px at 80% 0%,var(--acc-soft),transparent 70%),#f7f4ee;border:1px solid var(--line);overflow:hidden}
.wf-step{display:none;grid-template-columns:.85fr 1.15fr;gap:40px;align-items:center;min-height:460px;padding:44px}
.wf-step.on{display:grid}
.wf-cap small{display:inline-block;margin-bottom:14px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--acc);font-family:"Geist Mono",ui-monospace,monospace;font-size:12.5px;box-shadow:0 2px 8px rgba(17,21,27,.06)}
.wf-cap b{display:block;margin-bottom:12px;font-family:"Geist",Arial,sans-serif;font-size:clamp(28px,3vw,42px);line-height:1.02;letter-spacing:-.05em}
.wf-cap span{display:block;max-width:380px;color:var(--muted);font-size:17px;line-height:1.55}
.wf-step.on .wf-cap>*{animation:wfUp .5s both}
.wf-step.on .wf-cap b{animation-delay:.06s}.wf-step.on .wf-cap span{animation-delay:.12s}
.wf-scene{position:relative;display:grid;place-items:center;min-height:360px}

/* Navigation: a numbered button per step with a filling bar */
.wf-nav{display:flex;align-items:center;gap:8px;margin-top:14px}
.wf-nav button{display:flex;flex:1;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--muted);font:500 12.5px "Geist Mono",ui-monospace,monospace;cursor:pointer}
.wf-nav button.on{border-color:var(--acc);color:var(--acc)}
.wf-nav button:focus-visible{outline:3px solid var(--acc-bright);outline-offset:2px}
.wf-bar{flex:1;height:4px;border-radius:2px;background:var(--line);overflow:hidden}
.wf-bar i{display:block;width:0;height:100%;background:var(--acc)}
.wf-nav button.on .wf-bar i{width:100%}
.wf-playing .wf-nav button.on .wf-bar i{animation:wfBar var(--wf-step,4200ms) linear both}
.wf-nav .wf-toggle{flex:0 0 auto;font-family:"Figtree Variable",Figtree,Arial,sans-serif;font-weight:700;color:var(--ink)}

/* Scene pieces */
.wf-card{padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(17,21,27,.1);font-size:13.5px;line-height:1.4}
.wf-card small{display:block;color:var(--muted);font:500 10.5px "Geist Mono",ui-monospace,monospace;letter-spacing:.02em}
.wf-card b{font-family:"Geist",Arial,sans-serif;letter-spacing:-.03em}
.wf-card .big{display:block;font-family:"Geist",Arial,sans-serif;font-size:30px;font-weight:700;letter-spacing:-.04em;line-height:1.1}
.wf-btn{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--acc);color:#fff;font-weight:800;font-size:12.5px}
.wf-btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.wf-ok{color:#067d4d;font-weight:800}.wf-bad{color:#c4302b;font-weight:800}.wf-warn{color:#a35a00;font-weight:800}
.wf-row{display:flex;align-items:center;gap:10px}
.wf-dot{flex:none;width:10px;height:10px;border-radius:50%;background:var(--acc-bright)}
.wf-stack{display:grid;gap:10px;width:min(100%,420px)}
.wf-abs{position:absolute}

.wf-phone{position:relative;width:236px;padding:40px 14px 16px;border:7px solid #1c2128;border-radius:36px;background:#fff;box-shadow:0 30px 60px rgba(17,21,27,.22);font-size:12.5px}
.wf-phone:before{content:"";position:absolute;top:10px;left:50%;width:64px;height:18px;transform:translateX(-50%);border-radius:10px;background:#1c2128}
.wf-phone .head{display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:800}
.wf-phone .head img{width:22px;height:22px}
.wf-phone .opt{margin-top:6px;padding:9px 10px;border:1px solid var(--line);border-radius:10px}
.wf-phone .opt.sel{border-color:var(--acc);background:var(--acc-soft);font-weight:700}
.wf-phone .cta{margin-top:10px;padding:10px;border-radius:999px;background:var(--acc);color:#fff;text-align:center;font-weight:800}
.wf-phone .photo{height:92px;margin-bottom:8px;border-radius:12px;background:center/cover no-repeat}

.wf-notif{position:absolute;top:8px;left:50%;width:calc(100% - 16px);transform:translateX(-50%);padding:10px 12px;border-radius:14px;background:rgba(17,21,27,.92);color:#fff;font-size:11.5px;box-shadow:0 10px 24px rgba(0,0,0,.25);z-index:2}
.wf-notif b{display:block;font-size:12px}

.wf-grid{display:grid;grid-template-columns:70px repeat(5,1fr);gap:5px;width:min(100%,460px);font-size:11px}
.wf-grid em{color:var(--muted);font-style:normal;text-align:center;font-weight:700}
.wf-grid b{align-self:center;font-size:11.5px}
.wf-grid i{display:grid;place-items:center;min-height:30px;border-radius:7px;background:#fff;border:1px solid var(--line);font-style:normal;font-weight:700}
.wf-grid i.s{background:var(--acc-soft);border-color:transparent;color:var(--acc)}
.wf-grid i.k{background:#fff4dc;border-color:transparent;color:#8a5a00}

.wf-gauge{width:min(100%,400px)}
.wf-gauge .track{position:relative;height:16px;margin:12px 0 8px;border-radius:8px;background:#ece7dd}
.wf-gauge .fillbar{height:100%;width:var(--w);border-radius:8px;background:var(--acc)}
.wf-gauge .target{position:absolute;top:-6px;bottom:-6px;left:var(--t);width:2px;background:var(--ink)}

.wf-tables{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,420px)}
.wf-table{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;justify-items:center;padding:24px 12px 26px;border-radius:50%/40%;background:#fff;border:1px solid var(--line);position:relative}
.wf-table:after{content:attr(data-n);position:absolute;bottom:6px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:10.5px;font-weight:700}
.wf-table i{width:16px;height:16px;border-radius:50%;border:1.5px dashed #c9c3b6}
.wf-table i.f{border:0;background:var(--acc)}

.wf-doc{width:min(100%,360px);padding:20px;border-radius:6px;background:#fff;box-shadow:0 26px 50px rgba(17,21,27,.16);font-size:11px}
.wf-doc .bar{margin:8px 0 5px;padding:5px 8px;background:var(--acc);color:#fff;font-weight:800}
.wf-doc .ln{height:7px;margin:5px 0;border-radius:3px;background:#ece7dd}
.wf-doc .hl{padding:6px 8px;border-radius:6px;background:var(--acc-soft);color:var(--acc);font-weight:800}

/* Motion */
.wf-step.on .pop{animation:wfPop .55s var(--d,0s) cubic-bezier(.2,.9,.3,1.25) both}
.wf-step.on .up{animation:wfUp .6s var(--d,0s) both}
.wf-step.on .slide{animation:wfSlide .6s var(--d,0s) cubic-bezier(.2,.9,.3,1) both}
.wf-step.on .drop{animation:wfDrop .6s var(--d,0s) cubic-bezier(.2,.9,.3,1.2) both}
.wf-step.on .shake{animation:wfShake .5s var(--d,0s) both}
.wf-step.on .grow{animation:wfGrow 1.2s var(--d,0s) cubic-bezier(.3,.8,.3,1) both}
.wf-step.on .press{animation:wfPress .45s var(--d,0s) both}
.wf-step.on .swap-out{animation:wfOut .3s var(--d,0s) both}
@keyframes wfPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes wfUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes wfSlide{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes wfDrop{from{opacity:0;transform:translate(-50%,-30px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes wfShake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes wfGrow{from{width:0}to{width:var(--w)}}
@keyframes wfPress{0%{transform:none}40%{transform:scale(.94);filter:brightness(.9)}100%{transform:none}}
@keyframes wfOut{to{opacity:0;height:0;margin:0;padding:0;overflow:hidden}}
@keyframes wfBar{from{width:0}to{width:100%}}
.wf-still .wf-step.on *{animation:none!important}

/* Tabs (home page) */
.wf-tabs [role=tablist]{display:inline-flex;gap:6px;margin-bottom:18px;padding:5px;border-radius:999px;background:#fff;border:1px solid #e7e2d8}
.wf-tabs [role=tab]{padding:10px 18px;border:0;border-radius:999px;background:transparent;font:700 15px "Figtree Variable",Figtree,Arial,sans-serif;color:#5f6966;cursor:pointer}
.wf-tabs [role=tab][aria-selected=true].pm{background:#0057ff;color:#fff}
.wf-tabs [role=tab][aria-selected=true].lo{background:#8f6400;color:#fff}

@media(max-width:900px){
  .wf-step{grid-template-columns:1fr;gap:24px;padding:28px 22px}
  .wf-steps,.wf-step{min-height:620px}
  .wf-scene{min-height:330px}
  .wf-nav{flex-wrap:wrap}
  .wf-nav button{flex:1 1 20%;padding:9px 8px}
  .wf-nav .wf-bar{display:none}
}
@media(max-width:420px){.wf-phone{width:210px}.wf-grid{grid-template-columns:56px repeat(5,1fr)}}
.u-sec.paper .wf-steps{background:radial-gradient(600px 300px at 80% 0%,var(--acc-soft),transparent 70%),#fff}

/* Phones keep real proportions (see sivo-light.css) */
.wf-phone{display:flex;flex-direction:column;width:224px;aspect-ratio:9/19.5;padding-bottom:30px}
.wf-phone .cta{margin-top:auto}
.wf-phone:after{content:"";position:absolute;bottom:10px;left:50%;width:66px;height:4px;transform:translateX(-50%);border-radius:2px;background:#1c2128;opacity:.85}
.wf-step{min-height:560px}
.wf-steps{min-height:560px}
.wf-scene{min-height:500px}
@media(max-width:900px){.wf-steps,.wf-step{min-height:820px}.wf-scene{min-height:500px}}
.wf-notif{top:42px}