/* Product scene miniatures for index-next.html.
   Extracted verbatim from therapist-scenes.css (scene block + the keyframes it uses)
   so the upgraded page can reuse the live portal demos without the old page globals.
   Sequences are gated by .wf-scene.play. */
@keyframes apFadeInScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes apFadeIn{from{opacity:0}to{opacity:1}}
@keyframes apFadeOutQuick{from{opacity:1}to{opacity:0}}
@keyframes apFadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes apCurIn{from{opacity:0;transform:translate(22px,26px)}to{opacity:1;transform:translate(0,0)}}
@keyframes apCurTap{0%{transform:translate(0,0) scale(1)}45%{transform:translate(0,0) scale(.8)}100%{transform:translate(0,0) scale(1)}}
@keyframes apBlink{0%,49%{opacity:1}50%,99%{opacity:0}}
.workflow-visual-frame.has-scene{padding:0}
.wf-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:left}
.wf-scene-canvas{position:relative;width:720px;height:540px;flex:none;transform:scale(var(--wf-scale,1));transform-origin:center;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#1C1C1E;line-height:1.45}
.wfs-window{position:absolute;inset:22px;background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.18),0 4px 14px rgba(15,23,42,.08);overflow:hidden;display:flex;flex-direction:column;opacity:0}
.wf-scene.play .wfs-window{animation:apFadeInScale .55s cubic-bezier(.16,1,.3,1) .05s both}
.wfs-header{display:flex;align-items:center;gap:10px;padding:0 18px;height:54px;border-bottom:1px solid #E9EAF0;background:#fff;flex-shrink:0}
.wfs-title{font-size:15px;font-weight:700;color:#1C1C1E;letter-spacing:-.01em;display:flex;align-items:center;gap:8px;white-space:nowrap}
.wfs-title .lucide{width:15px;height:15px;color:#0EA5C7;flex-shrink:0}
.wfs-titlegroup{display:flex;flex-direction:column;gap:1px;min-width:0}
.wfs-sub{font-size:10px;color:#8E8E93;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfs-spacer{flex:1}
.wfs-body{position:relative;flex:1;background:#F7F8FB;min-height:0}
.wfs-cursor{position:absolute;width:30px;height:30px;z-index:40;opacity:0;pointer-events:none}
.wfs-cursor svg{width:30px;height:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.28))}
.wfs-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;background:#E6F6FB;border:1px solid #9CD8EB;color:#0E7993;font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;white-space:nowrap}
.wfs-pill.amber{background:#FCF1E1;border-color:#EECF9F;color:#B45309}
.wfs-pill.act{background:#FCF1E1;border-color:#EECF9F;color:#B45309}
.wfs-pill.cbt{background:#E8EEFC;border-color:#B9CDF6;color:#1F54CB}
.wfs-cta{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:999px;background:linear-gradient(135deg,#0EA5C7,#2563EB);color:#fff;font-size:12px;font-weight:700;box-shadow:0 6px 16px rgba(37,99,235,.28);white-space:nowrap;position:relative;overflow:hidden}
.wfs-cta .lucide{width:13px;height:13px;color:#fff}
.wfs-status{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:9.5px;font-weight:700;white-space:nowrap}
.wfs-status .lucide{width:10px;height:10px}
.wfs-status.draft{background:#FEF4E6;color:#D97706}
.wfs-status.signed{background:#E9F7EE;color:#16A34A}
.wfs-spin{width:12px;height:12px;border-radius:50%;border:2px solid #C9DDF6;border-top-color:#2563EB;animation:wfsSpin 1s linear infinite;flex-shrink:0}
@keyframes wfsSpin{to{transform:rotate(360deg)}}
.wfs-tick{width:14px;height:14px;border-radius:50%;background:#16A34A;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px;font-weight:800;line-height:1}
@keyframes wfsPop{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes wfsDotPulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes wfsWave{from{transform:scaleY(.22)}to{transform:scaleY(1)}}
@keyframes wfsShimmer{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}}
@keyframes wfsBeam{from{top:-14%}to{top:104%}}
@keyframes wfsReveal{from{width:0}to{width:100%}}
@keyframes wfsPressBtn{0%{transform:scale(1)}45%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes wfsRowIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes wfsStamp{0%{opacity:0;transform:scale(1.5) rotate(-8deg)}100%{opacity:1;transform:scale(1) rotate(-8deg)}}
@keyframes wfsFlyDot{0%{opacity:0;transform:translate(0,0) scale(1)}12%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(.2)}}

/* ── 01a Brainstorm ─────────────────────────────────────── */
.bs-btn{position:relative}
.wf-scene.play .bs-btn{animation:wfsPressBtn .35s ease 1.25s}
.bs-btn .bs-btn-swap{position:relative;display:inline-block;min-width:138px;text-align:center}
.bs-btn .bs-btn-a,.bs-btn .bs-btn-b{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.bs-btn .bs-btn-b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.bs-btn .bs-btn-b .wfs-spin{border-color:rgba(255,255,255,.4);border-top-color:#fff;width:11px;height:11px}
.wf-scene.play .bs-btn-a{animation:apFadeOutQuick .25s ease 1.45s both,apFadeIn .25s ease 4.1s forwards}
.wf-scene.play .bs-btn-b{animation:apFadeIn .25s ease 1.5s both,apFadeOutQuick .25s ease 4.05s forwards}
[data-scene="brainstorm"] .wfs-body{display:flex;flex-direction:column;justify-content:center}
.bs-chips{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:nowrap}
.bs-chip{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:999px;background:#fff;border:1px solid #E4E6EE;font-size:9px;font-weight:600;color:#3A3A3C;opacity:0;white-space:nowrap}
.bs-chip .lucide{width:10px;height:10px;color:#0EA5C7;flex-shrink:0}
.bs-chip .wfs-tick{width:11px;height:11px;font-size:7px;opacity:0;transform:scale(.3)}
.wf-scene.play .bs-chip{animation:wfsPop .4s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .bs-chip .wfs-tick{animation:wfsPop .3s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .bs-chip:nth-child(1){animation-delay:1.7s}.wf-scene.play .bs-chip:nth-child(1) .wfs-tick{animation-delay:2.05s}
.wf-scene.play .bs-chip:nth-child(2){animation-delay:1.95s}.wf-scene.play .bs-chip:nth-child(2) .wfs-tick{animation-delay:2.3s}
.wf-scene.play .bs-chip:nth-child(3){animation-delay:2.2s}.wf-scene.play .bs-chip:nth-child(3) .wfs-tick{animation-delay:2.55s}
.wf-scene.play .bs-chip:nth-child(4){animation-delay:2.45s}.wf-scene.play .bs-chip:nth-child(4) .wfs-tick{animation-delay:2.8s}
.wf-scene.play .bs-chip:nth-child(5){animation-delay:2.7s}.wf-scene.play .bs-chip:nth-child(5) .wfs-tick{animation-delay:3.05s}
.bs-board{display:grid;grid-template-columns:300px 1fr;gap:14px;padding:12px 16px 16px;align-items:start}
.bs-colhead{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#0E7993;display:flex;align-items:center;gap:5px;margin:2px 0 8px}
.bs-colhead .lucide{width:11px;height:11px;color:#0EA5C7}
.bs-card{background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:10px 12px;margin-bottom:10px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.bs-card p{font-size:10.5px;color:#3A3A3C;line-height:1.5;margin:0}
.bs-card .bs-meta{font-size:8.5px;color:#8E8E93;margin-top:6px;display:flex;align-items:center;gap:4px}
.bs-card .bs-meta .lucide{width:9px;height:9px}
.bs-anim{opacity:0}
.wf-scene.play .bs-anim{animation:wfsRowIn .55s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .bs-a1{animation-delay:4.05s}
.wf-scene.play .bs-a2{animation-delay:4.18s}
.wf-scene.play .bs-a3{animation-delay:4.31s}
.wf-scene.play .bs-a4{animation-delay:4.44s}
.wf-scene.play .bs-a5{animation-delay:4.57s}
.wf-scene.play .bs-a6{animation-delay:4.2s}
.wf-scene.play .bs-a7{animation-delay:4.68s}
.wf-scene.play .bs-a8{animation-delay:4.8s}
.wf-scene.play .bs-a9{animation-delay:4.55s}
.wf-scene.play .bs-a10{animation-delay:4.7s}
.wf-scene.play .bs-a11{animation-delay:4.82s}
.bs-compact{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E4E6EE;border-radius:11px;padding:9px 12px;margin-top:9px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.bs-compact h6{font-size:10.5px;font-weight:700;margin:0;flex:1;min-width:0;letter-spacing:-.005em}
.bs-card.bs-idea{background:#FBFDF7;border-color:#DBEAC8}
.bs-hero{background:#fff;border:1px solid #BFE5F1;border-radius:14px;padding:13px 14px;box-shadow:0 4px 16px rgba(14,165,199,.10)}
.bs-hero h5{font-size:12.5px;font-weight:700;line-height:1.35;margin:0 0 7px;letter-spacing:-.005em}
.bs-hero-pills{display:flex;gap:5px;margin-bottom:8px}
.bs-hero-pills .wfs-pill{opacity:0}
.wf-scene.play .bs-hero-pills .wfs-pill{animation:wfsPop .35s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .bs-hero-pills .wfs-pill:nth-child(1){animation-delay:4.85s}
.wf-scene.play .bs-hero-pills .wfs-pill:nth-child(2){animation-delay:5s}
.wf-scene.play .bs-hero-pills .wfs-pill:nth-child(3){animation-delay:5.15s}
.bs-hero-body{font-size:10px;color:#636366;line-height:1.5;margin:0 0 9px}
.bs-quote{display:flex;align-items:center;gap:0;background:#F2FAFD;border:1px solid #D5EEF6;border-radius:9px;padding:8px 10px;min-height:30px}
.bs-quote-text{font-size:10.5px;font-style:italic;color:#0E6378;white-space:nowrap;overflow:hidden;width:0;font-weight:500}
.wf-scene.play .bs-quote-text{animation:wfsReveal 1.5s steps(34) 5.3s both}
.bs-caret{width:1.5px;height:12px;background:#0EA5C7;flex-shrink:0;animation:apBlink 1.1s step-end infinite}
.bs-prov{display:inline-flex;align-items:center;gap:5px;margin-top:9px;padding:4px 9px;border-radius:999px;background:#F2F2F7;font-size:8.5px;color:#636366;font-weight:600;opacity:0}
.bs-prov .lucide{width:9px;height:9px;color:#0EA5C7}
.wf-scene.play .bs-prov{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) 7s both}
.bs-skel{position:absolute;top:34px;left:0;right:0;display:flex;flex-direction:column;gap:8px;opacity:0}
.bs-skel span{display:block;height:12px;border-radius:6px;background:#EBEDF3;position:relative;overflow:hidden}
.bs-skel span::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);animation:wfsShimmer 1.1s ease-in-out infinite}
.bs-skel span:nth-child(2){width:78%}
.bs-skel span:nth-child(3){width:62%}
.wf-scene.play .bs-skel{animation:apFadeIn .3s ease 1.9s both,apFadeOutQuick .3s ease 4s forwards}
.bs-right{position:relative}
.wf-scene.play .bs-cursor{animation:apCurIn .55s ease .7s both,apCurTap .4s ease 1.25s,apFadeOutQuick .45s ease 1.75s forwards}

/* ── 01b Session Brief ──────────────────────────────────── */
.sb-stage-a{position:absolute;inset:0;padding:14px 16px}
.wf-scene.play .sb-stage-a{animation:apFadeOutQuick .4s ease 3.9s both}
.sb-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:12px 13px;margin-bottom:11px;box-shadow:0 1px 3px rgba(15,23,42,.05);opacity:0;position:relative}
.wf-scene.play .sb-row{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .sb-row:nth-child(1){animation-delay:.25s}
.wf-scene.play .sb-row:nth-child(2){animation-delay:.4s}
.wf-scene.play .sb-row:nth-child(3){animation-delay:.55s}
.sb-row-text{flex:1;min-width:0}
.sb-row-text h6{font-size:11.5px;font-weight:700;margin:4px 0 0;letter-spacing:-.005em}
.sb-pin{width:26px;height:26px;border-radius:50%;border:1.5px solid #D8DAE3;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative}
.sb-pin .lucide{width:12px;height:12px;color:#8E8E93}
.sb-pin::after{content:'';position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid #0EA5C7;background:#E6F6FB;opacity:0}
.sb-pin .lucide{position:relative;z-index:1}
.wf-scene.play .sb-r1 .sb-pin::after{animation:apFadeIn .2s ease 1.25s both}
.wf-scene.play .sb-r2 .sb-pin::after{animation:apFadeIn .2s ease 2.15s both}
.wf-scene.play .sb-r3 .sb-pin::after{animation:apFadeIn .2s ease 3.05s both}
.sb-fly{position:absolute;right:13px;top:50%;width:34px;height:10px;border-radius:5px;background:#0EA5C7;opacity:0;pointer-events:none;z-index:5}
.wf-scene.play .sb-r1 .sb-fly{animation:wfsFlyDot .65s cubic-bezier(.4,0,.8,1) 1.3s both}
.wf-scene.play .sb-r2 .sb-fly{animation:wfsFlyDot .6s cubic-bezier(.4,0,.8,1) 2.2s both}
.wf-scene.play .sb-r3 .sb-fly{animation:wfsFlyDot .55s cubic-bezier(.4,0,.8,1) 3.1s both}
.sb-float{position:absolute;right:22px;bottom:18px;display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border-radius:999px;background:linear-gradient(135deg,#0EA5C7,#2563EB);color:#fff;font-size:11.5px;font-weight:700;box-shadow:0 10px 26px rgba(37,99,235,.35);z-index:6}
.sb-float .lucide{width:13px;height:13px;color:#fff}
.sb-count{position:relative;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.25);display:inline-block}
.sb-count span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;opacity:0}
.sb-count .c0{opacity:1}
.wf-scene.play .sb-count .c0{animation:apFadeOutQuick .15s ease 1.95s both}
.wf-scene.play .sb-count .c1{animation:wfsPop .3s ease 1.95s both,apFadeOutQuick .15s ease 2.8s both}
.wf-scene.play .sb-count .c2{animation:wfsPop .3s ease 2.85s both,apFadeOutQuick .15s ease 3.65s both}
.wf-scene.play .sb-count .c3{animation:wfsPop .3s ease 3.7s both}
.sb-stage-b{position:absolute;inset:0;padding:16px 18px;opacity:0}
.wf-scene.play .sb-stage-b{animation:apFadeIn .45s ease 4.15s both}
.sb-plan-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.sb-plan-head .lucide{width:13px;height:13px;color:#0EA5C7}
.sb-plan-head strong{font-size:13px;font-weight:800;letter-spacing:.04em}
.sb-plan-head span{font-size:9.5px;color:#8E8E93}
.sb-plan-card{border:1.5px solid #BFE5F1;background:#fff;border-radius:12px;padding:10px 13px;margin-bottom:9px;opacity:0}
.sb-plan-card h6{font-size:11.5px;font-weight:700;margin:6px 0 3px;letter-spacing:-.005em}
.sb-plan-card p{font-size:9.5px;color:#636366;margin:0;line-height:1.5}
.sb-plan-card.amber{border-color:#EECF9F;background:#FFFDF9}
.wf-scene.play .sb-plan-card{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .sb-p1{animation-delay:4.35s}
.wf-scene.play .sb-p2{animation-delay:4.55s}
.wf-scene.play .sb-p3{animation-delay:4.75s}
.sb-stamp{position:absolute;top:14px;right:20px;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:10px;border:2px solid #16A34A;color:#16A34A;font-size:11px;font-weight:800;background:rgba(255,255,255,.85);opacity:0;z-index:5}
.sb-stamp .lucide{width:12px;height:12px}
.wf-scene.play .sb-stamp{animation:wfsStamp .45s cubic-bezier(.16,1,.3,1) 5.7s both}
.wf-scene.play .sb-cursor{animation:sbCurPath 3s ease-in-out .8s both}
@keyframes sbCurPath{0%{opacity:0;transform:translate(40px,46px) scale(1)}10%{opacity:1;transform:translate(0,0) scale(1)}15%{transform:translate(0,0) scale(.82)}19%{transform:translate(0,0) scale(1)}38%{transform:translate(0,81px) scale(1)}44%{transform:translate(0,81px) scale(.82)}48%{transform:translate(0,81px) scale(1)}66%{transform:translate(0,162px) scale(1)}72%{transform:translate(0,162px) scale(.82)}76%{transform:translate(0,162px) scale(1)}90%{opacity:1}100%{opacity:0;transform:translate(0,162px) scale(1)}}

/* ── 02a Telehealth ─────────────────────────────────────── */
.th-stage-a{position:absolute;inset:0;display:flex;flex-direction:column}
.wf-scene.play .th-stage-a{animation:apFadeOutQuick .45s ease 3.1s both}
.th-topbar{display:flex;align-items:center;gap:9px;height:42px;background:#0B0F14;color:#fff;padding:0 14px;flex-shrink:0}
.th-live{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:#FF6B6B}
.th-live i{width:7px;height:7px;border-radius:50%;background:#DC2626;animation:wfsDotPulse 1.6s ease-in-out infinite;display:inline-block}
.th-name{font-size:11px;font-weight:700}
.th-rec{display:inline-flex;align-items:center;gap:5px;font-size:10px;color:#E5E5EA;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.09);padding:4px 9px;border-radius:999px}
.th-rec i{width:6px;height:6px;border-radius:50%;background:#DC2626;animation:wfsDotPulse 1.6s ease-in-out infinite;display:inline-block}
.th-consent{display:inline-flex;align-items:center;gap:4px;font-size:9px;color:#9BE8B5;font-weight:600}
.th-consent .lucide{width:10px;height:10px}
.th-end{display:inline-flex;align-items:center;padding:6px 12px;border-radius:8px;background:#DC2626;color:#fff;font-size:10px;font-weight:700}
.th-stagebody{flex:1;display:flex;min-height:0}
.th-video{flex:1;position:relative;background:linear-gradient(160deg,#15202B,#0B0F14);margin:0}
.th-tile{position:absolute;inset:12px;border-radius:12px;background:radial-gradient(circle at 50% 38%,#2A3C4E,#16222E 70%);display:flex;align-items:center;justify-content:center;overflow:hidden}
.th-still{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.th-tilename{position:absolute;left:12px;bottom:10px;font-size:9.5px;color:rgba(255,255,255,.85);background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px;font-weight:600}
.th-pip{position:absolute;top:22px;right:22px;width:96px;height:64px;border-radius:9px;background:#1B2836;border:1.5px solid rgba(255,255,255,.22);display:flex;align-items:flex-end;justify-content:flex-start;padding:5px;opacity:0;z-index:3;overflow:hidden;box-shadow:0 8px 22px rgba(0,0,0,.4)}
.th-pip span{position:relative;z-index:2}
.wf-scene.play .th-pip{animation:wfsPop .45s cubic-bezier(.16,1,.3,1) .5s both}
.th-pip span{font-size:8px;color:rgba(255,255,255,.8);background:rgba(0,0,0,.45);padding:2px 6px;border-radius:5px;font-weight:600}
.th-wave{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:flex-end;gap:3px;height:22px;z-index:3}
.th-wave i{width:3.5px;border-radius:2px;background:#7bdaed;display:block;height:100%;transform-origin:bottom;animation:wfsWave .9s ease-in-out infinite alternate}
.th-wave i:nth-child(1){animation-delay:0s;height:42%}
.th-wave i:nth-child(2){animation-delay:.12s;height:80%}
.th-wave i:nth-child(3){animation-delay:.24s;height:58%}
.th-wave i:nth-child(4){animation-delay:.06s;height:95%}
.th-wave i:nth-child(5){animation-delay:.3s;height:65%}
.th-wave i:nth-child(6){animation-delay:.18s;height:85%}
.th-wave i:nth-child(7){animation-delay:.36s;height:48%}
.th-rail{width:178px;background:#fff;border-left:1px solid #E9EAF0;padding:12px 12px;flex-shrink:0}
.th-rail-label{font-size:8.5px;font-weight:800;letter-spacing:.12em;color:#0E7993;text-transform:uppercase;margin-bottom:8px}
.th-rail-row{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;color:#3A3A3C;padding:6px 0;border-bottom:1px solid #F0F1F5}
.th-rail-row strong{font-weight:700}
.th-rail-label.mt{margin-top:12px}
.th-mod{display:flex;align-items:center;gap:7px;font-size:9px;color:#3A3A3C;padding:5px 0;font-weight:600}
.th-mod .th-mod-tick{width:11px;height:11px;border-radius:50%;background:#16A34A;color:#fff;font-size:7px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.th-mod .th-mod-queued{width:11px;height:11px;border-radius:50%;border:1.5px dashed #9CA3AF;flex-shrink:0;display:inline-block}
.th-mod span.muted{color:#8E8E93;font-weight:500;margin-left:auto;font-size:8px}
.th-rail-links{display:flex;flex-direction:column;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid #F0F1F5}
.th-rail-links a{font-size:9px;font-weight:700;color:#0E8FAE;display:inline-flex;align-items:center;gap:4px;pointer-events:none}
.th-watch{margin-top:10px;background:#FFFBF2;border:1px solid #F2DFB6;border-radius:9px;padding:7px 9px;font-size:8.5px;color:#92600A;line-height:1.45;font-weight:600}
.th-watch b{display:block;font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:#B45309;margin-bottom:2px}
.wf-scene.play .th-cursor{animation:apCurIn .55s ease 2.2s both,apCurTap .4s ease 2.75s,apFadeOutQuick .4s ease 3.05s forwards}
.th-stage-b{position:absolute;inset:0;padding:14px 18px;opacity:0;display:flex;flex-direction:column;justify-content:center}
.wf-scene.play .th-stage-b{animation:apFadeIn .5s ease 3.35s both}
.th-ended{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.th-ended .wfs-tick{width:18px;height:18px;font-size:10px}
.th-ended strong{font-size:12.5px;font-weight:800}
.th-ended span{font-size:9px;color:#8E8E93}
.th-b-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:12px;align-items:start}
.th-pipeline{background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:3px 12px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.th-step{display:flex;align-items:center;gap:8px;padding:6.5px 0;border-bottom:1px solid #F0F1F5;font-size:9.5px;color:#3A3A3C;font-weight:600;opacity:0;position:relative}
.th-step:last-child{border-bottom:none}
.th-step .lucide{width:10px;height:10px;color:#8E8E93;flex-shrink:0}
.th-step .th-step-spin{margin-left:auto;width:10px;height:10px}
.th-step .wfs-tick{position:absolute;right:0;opacity:0;transform:scale(.3);width:13px;height:13px;font-size:8px}
.wf-scene.play .th-s1{animation:wfsRowIn .4s ease 3.5s both}
.wf-scene.play .th-s2{animation:wfsRowIn .4s ease 3.62s both}
.wf-scene.play .th-s3{animation:wfsRowIn .4s ease 3.74s both}
.wf-scene.play .th-s4{animation:wfsRowIn .4s ease 3.86s both}
.wf-scene.play .th-s1 .th-step-spin{animation:apFadeOutQuick .2s ease 4.25s both}
.wf-scene.play .th-s1 .wfs-tick{animation:wfsPop .3s ease 4.3s both}
.wf-scene.play .th-s2 .th-step-spin{animation:apFadeOutQuick .2s ease 4.9s both}
.wf-scene.play .th-s2 .wfs-tick{animation:wfsPop .3s ease 4.95s both}
.wf-scene.play .th-s3 .th-step-spin{animation:apFadeOutQuick .2s ease 5.45s both}
.wf-scene.play .th-s3 .wfs-tick{animation:wfsPop .3s ease 5.5s both}
.wf-scene.play .th-s4 .th-step-spin{animation:apFadeOutQuick .2s ease 5.95s both}
.wf-scene.play .th-s4 .wfs-tick{animation:wfsPop .3s ease 6s both}
/* Note draft card: real SOAP content + the four real template formats */
.th-note{background:#fff;border:1.5px solid #BFE5F1;border-radius:12px;padding:10px 12px 10px;margin-top:10px;box-shadow:0 4px 16px rgba(14,165,199,.10);opacity:0}
.wf-scene.play .th-note{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) 6.15s both}
.th-note-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.th-formats{display:flex;gap:4px}
.th-fmt{padding:3px 8px;border-radius:6px;font-size:8px;font-weight:700;color:#8E8E93;background:#F2F2F7;letter-spacing:.03em}
.th-fmt.active{background:#E6F6FB;color:#0E7993;box-shadow:inset 0 0 0 1px #9CD8EB}
.th-soap{display:flex;flex-direction:column;gap:5px}
.th-soap-row{display:flex;gap:7px;align-items:baseline;font-size:9px;color:#48484A;line-height:1.45;opacity:0}
.th-soap-row b{width:14px;height:14px;border-radius:4px;background:#E6F6FB;color:#0E7993;font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transform:translateY(2px)}
.wf-scene.play .th-n1{animation:wfsRowIn .35s ease 6.4s both}
.wf-scene.play .th-n2{animation:wfsRowIn .35s ease 6.58s both}
.wf-scene.play .th-n3{animation:wfsRowIn .35s ease 6.76s both}
.wf-scene.play .th-n4{animation:wfsRowIn .35s ease 6.94s both}
.th-note-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:9px;padding-top:9px;border-top:1px solid #F0F1F5;opacity:0}
.wf-scene.play .th-note-foot{animation:apFadeIn .4s ease 7.15s both}
.th-chk{display:inline-flex;align-items:center;gap:6px;font-size:8.5px;color:#636366;font-weight:600}
.th-chkbox{width:12px;height:12px;border-radius:4px;background:#0EA5C7;color:#fff;font-size:8px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.th-sign{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border-radius:999px;background:linear-gradient(135deg,#0EA5C7,#2563EB);color:#fff;font-size:9.5px;font-weight:700;box-shadow:0 5px 14px rgba(37,99,235,.28);flex-shrink:0}
.th-sign .lucide{width:10px;height:10px;color:#fff}
.th-sign::after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.45) 50%,transparent 62%);animation:wfsShimmer 2.2s ease-in-out infinite}
/* Plan Ahead column: assign the next module + confirmations */
.th-b-right{display:flex;flex-direction:column;gap:8px}
.th-b-right .th-rail-label{margin-bottom:0;opacity:0}
.wf-scene.play .th-b-right .th-rail-label{animation:apFadeIn .4s ease 6.15s both}
.th-assign{background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:10px 12px;box-shadow:0 1px 3px rgba(15,23,42,.05);opacity:0}
.wf-scene.play .th-assign{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) 6.3s both}
.th-assign-intro{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8E8E93;margin:0 0 7px}
.th-am{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #F0F1F5;opacity:0;position:relative}
.th-am:last-of-type{border-bottom:none;margin-bottom:3px}
.th-am .wfs-pill{font-size:7px;padding:2px 7px;flex-shrink:0}
.th-am-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.th-am-text strong{font-size:9.5px;font-weight:700;color:#1C1C1E;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-am-text span{font-size:7.5px;color:#8E8E93}
.th-am-tick{width:12px;height:12px;font-size:7px;opacity:0;transform:scale(.3);flex-shrink:0}
.wf-scene.play .th-am1{animation:wfsRowIn .4s ease 6.5s both}
.wf-scene.play .th-am2{animation:wfsRowIn .4s ease 6.65s both}
.wf-scene.play .th-am3{animation:wfsRowIn .4s ease 6.8s both}
.wf-scene.play .th-am1 .th-am-tick{animation:wfsPop .3s ease 8.05s both}
.wf-scene.play .th-am2 .th-am-tick{animation:wfsPop .3s ease 8.17s both}
.wf-scene.play .th-am3 .th-am-tick{animation:wfsPop .3s ease 8.29s both}
.th-assign-btn{display:flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:linear-gradient(135deg,#0EA5C7,#2563EB);color:#fff;font-size:9px;font-weight:700;box-shadow:0 5px 14px rgba(37,99,235,.25);text-align:center}
.wf-scene.play .th-assign-btn{animation:wfsPressBtn .35s ease 7.72s}
.th-as-swap{position:relative;display:inline-block}
.th-as-a,.th-as-b{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.th-as-a .lucide,.th-as-b .lucide{width:10px;height:10px;color:#fff}
.th-as-b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0}
.wf-scene.play .th-as-a{animation:apFadeOutQuick .25s ease 7.85s both}
.wf-scene.play .th-as-b{animation:apFadeIn .3s ease 7.95s both}
.th-next,.th-b-right .th-billing{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:9px 12px;box-shadow:0 1px 3px rgba(15,23,42,.05);opacity:0}
.th-next strong,.th-b-right .th-billing strong{font-size:9.5px;font-weight:800;color:#1C1C1E}
.th-next span,.th-b-right .th-billing span:not(.wfs-tick){font-size:8.5px;color:#8E8E93}
.th-next .wfs-tick,.th-b-right .th-billing .wfs-tick{width:15px;height:15px;font-size:8px;flex-shrink:0}
.wf-scene.play .th-next{animation:wfsRowIn .45s ease 8.55s both}
.wf-scene.play .th-b-right .th-billing{animation:wfsRowIn .45s ease 8.8s both}
.wf-scene.play .th-cursor-b{animation:apCurIn .55s ease 7.2s both,apCurTap .4s ease 7.7s,apFadeOutQuick .4s ease 8.15s forwards}

/* ── 02b Record / Scan ──────────────────────────────────── */
.rs-btn-record{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#DC2626;color:#fff;font-size:11px;font-weight:700;white-space:nowrap}
.rs-btn-record i{width:7px;height:7px;border-radius:50%;background:#fff;animation:wfsDotPulse 1.6s ease-in-out infinite;display:inline-block}
.rs-btn-scan{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;border:1.5px solid #D8DAE3;color:#1C1C1E;font-size:11px;font-weight:700;white-space:nowrap}
.rs-btn-scan .lucide{width:12px;height:12px;color:#0EA5C7}
.rs-list{padding:13px 16px;display:flex;flex-direction:column;gap:10px}
.rs-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E4E6EE;border-radius:12px;padding:11px 13px;box-shadow:0 1px 3px rgba(15,23,42,.05);opacity:0}
.wf-scene.play .rs-row{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) both}
.wf-scene.play .rs-row.rs-old1{animation-delay:.25s}
.wf-scene.play .rs-row.rs-old2{animation-delay:.4s}
.wf-scene.play .rs-row.rs-old3{animation-delay:.55s}
.wf-scene.play .rs-row.rs-old4{animation-delay:.7s}
.rs-row-text{flex:1;min-width:0}
.rs-row-date{font-size:8.5px;color:#8E8E93;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.rs-row-title{font-size:11.5px;font-weight:700;margin-top:3px;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs-new{position:relative}
.wf-scene.play .rs-new{animation:wfsRowIn .55s cubic-bezier(.16,1,.3,1) 6.25s both}
.rs-new .rs-st-draft,.rs-new .rs-st-signed{position:absolute;right:13px;top:50%;transform:translateY(-50%)}
.rs-new .rs-st-signed{opacity:0}
.wf-scene.play .rs-new .rs-st-draft{animation:apFadeOutQuick .25s ease 7.25s both}
.wf-scene.play .rs-new .rs-st-signed{animation:wfsPop .35s cubic-bezier(.16,1,.3,1) 7.35s both}
.rs-modal{position:absolute;left:50%;top:50%;width:430px;transform:translate(-50%,-50%) scale(.92);background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(15,23,42,.30);padding:16px 18px 16px;opacity:0;z-index:20}
.wf-scene.play .rs-modal{animation:rsModalIn .45s cubic-bezier(.16,1,.3,1) 1.45s both,rsModalOut .35s ease 6s forwards}
@keyframes rsModalIn{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes rsModalOut{from{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.95)}}
.rs-modal h5{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;margin:0 0 4px}
.rs-modal h5 .lucide{width:13px;height:13px;color:#0EA5C7}
.rs-modal .rs-micro{font-size:9px;color:#8E8E93;line-height:1.5;margin:0 0 11px}
.rs-modal-grid{display:grid;grid-template-columns:158px 1fr;gap:13px;align-items:start}
.rs-photo{position:relative;height:172px;background:#FDFCF8;border:1px solid #E8E4D8;border-radius:9px;transform:rotate(-2.5deg);box-shadow:0 8px 20px rgba(15,23,42,.12);overflow:hidden;padding:12px 11px;opacity:0}
.wf-scene.play .rs-photo{animation:wfsRowIn .5s cubic-bezier(.16,1,.3,1) 1.95s both}
.rs-photo svg{width:100%;height:auto;display:block}
.rs-beam{position:absolute;left:0;right:0;top:-14%;height:16px;background:linear-gradient(180deg,transparent,rgba(14,165,199,.45),transparent);opacity:0}
.wf-scene.play .rs-beam{animation:apFadeIn .15s ease 2.6s both,wfsBeam 1.5s linear 2.6s both,apFadeOutQuick .2s ease 4.1s forwards}
.rs-out{display:flex;flex-direction:column;gap:6px;min-width:0}
.rs-line{font-size:9.5px;color:#3A3A3C;white-space:nowrap;overflow:hidden;width:0}
.wf-scene.play .rs-l1{animation:wfsReveal .5s steps(24) 2.9s both}
.wf-scene.play .rs-l2{animation:wfsReveal .5s steps(24) 3.25s both}
.wf-scene.play .rs-l3{animation:wfsReveal .5s steps(24) 3.6s both}
.wf-scene.play .rs-l4{animation:wfsReveal .5s steps(24) 3.95s both}
.rs-soap{display:flex;flex-direction:column;gap:4px;margin-top:5px;border-top:1px dashed #E4E6EE;padding-top:8px}
.rs-soap-row{display:flex;gap:7px;align-items:baseline;font-size:9px;color:#636366;opacity:0}
.rs-soap-row b{width:13px;height:13px;border-radius:4px;background:#E6F6FB;color:#0E7993;font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.wf-scene.play .rs-sp1{animation:wfsRowIn .35s ease 4.7s both}
.wf-scene.play .rs-sp2{animation:wfsRowIn .35s ease 4.85s both}
.wf-scene.play .rs-sp3{animation:wfsRowIn .35s ease 5s both}
.wf-scene.play .rs-sp4{animation:wfsRowIn .35s ease 5.15s both}
.rs-apply{display:flex;justify-content:flex-end;margin-top:12px}
.rs-apply .wfs-cta{font-size:11px;padding:8px 15px}
.wf-scene.play .rs-cursor{animation:rsCurPath 7.3s ease-in-out .7s both}
@keyframes rsCurPath{0%{opacity:0;transform:translate(44px,40px) scale(1)}5%{opacity:1;transform:translate(0,0) scale(1)}7.5%{transform:translate(0,0) scale(.82)}9.5%{transform:translate(0,0) scale(1)}60%{transform:translate(0,0) scale(1);opacity:1}63%{opacity:0;transform:translate(0,0) scale(1)}66%{opacity:0;transform:translate(10px,374px) scale(1)}70%{opacity:1;transform:translate(10px,374px) scale(1)}72.5%{transform:translate(10px,374px) scale(.82)}75%{transform:translate(10px,374px) scale(1)}82%{opacity:1}88%{opacity:0}100%{opacity:0}}