/* A connected product scene: restrained surfaces, deliberate motion. */
#ff-workspace .flow-demo{margin:4px 0 28px;--flow-ease:cubic-bezier(.22,1,.36,1)}
#ff-workspace .flow-topline{display:flex;justify-content:space-between;gap:16px;margin-bottom:15px;font-size:12px;color:#b7b7b7}
#ff-workspace .flow-topnote{color:#626262;font-size:11px}
#ff-workspace .flow-surface{display:grid;grid-template-columns:minmax(210px,.85fr) minmax(320px,1.35fr);border:1px solid #303030;border-radius:18px;overflow:hidden;background:#131313;min-height:388px}
#ff-workspace .flow-story{padding:30px 28px;display:flex;flex-direction:column;align-items:start;background:linear-gradient(145deg,#1a1a1a,#121212);position:relative;min-width:0}
#ff-workspace .flow-kicker{font-size:9px;letter-spacing:1.7px;color:#777;margin-bottom:26px}
#ff-workspace .flow-copy{min-height:143px}
#ff-workspace .flow-copy h2{font-size:clamp(24px,2.35vw,34px);line-height:1.08;letter-spacing:-1.3px;font-weight:500;max-width:290px;color:#f4f4f4}
#ff-workspace .flow-copy p{font-size:12px;line-height:1.65;color:#919191;max-width:275px;margin-top:15px}
#ff-workspace .flow-steps{display:grid;grid-template-columns:repeat(4,1fr);width:100%;gap:10px;margin-top:22px}
#ff-workspace .flow-steps button{position:relative;display:flex;flex-direction:column;align-items:start;gap:7px;color:#666;font-size:10px;padding:0 0 14px;text-align:left;transition:color .3s}
#ff-workspace .flow-steps button span{font-size:9px;font-variant-numeric:tabular-nums;color:#555}
#ff-workspace .flow-steps button i{position:absolute;left:0;right:0;bottom:0;height:2px;background:#333;border-radius:2px;overflow:hidden}
#ff-workspace .flow-steps button i:after{content:'';position:absolute;inset:0;background:#eee;transform:translateX(-105%);transition:transform .6s var(--flow-ease)}
#ff-workspace .flow-steps button[aria-pressed=true]{color:#eee}
#ff-workspace .flow-steps button[aria-pressed=true] span{color:#aaa}
#ff-workspace .flow-steps button[aria-pressed=true] i:after,#ff-workspace .flow-steps button[data-complete=true] i:after{transform:translateX(0)}
#ff-workspace .flow-start{display:flex;gap:28px;align-items:center;margin-top:auto;padding-top:25px;color:#e7e7e7;font-size:12px}
#ff-workspace .flow-start span{font-size:18px;transition:transform .2s}
#ff-workspace .flow-start:hover span{transform:translate(2px,-2px)}
#ff-workspace .flow-stage{min-width:0;padding:23px 28px 20px;position:relative;background:radial-gradient(ellipse at 50% 12%,#ffffff06,transparent 65%),#101010;border-left:1px solid #292929}
#ff-workspace .flow-stage-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
#ff-workspace .flow-stage-label{font-size:9px;color:#686868;letter-spacing:1.3px}
#ff-workspace .flow-networks{display:flex;gap:6px}
#ff-workspace .flow-networks button{width:29px;height:29px;border-radius:7px;display:grid;place-items:center;border:1px solid transparent;opacity:.35;transition:opacity .3s,background .3s,border-color .3s}
#ff-workspace .flow-networks button[aria-pressed=true],#ff-workspace .flow-networks button:hover{opacity:1;background:#242424;border-color:#373737}
#ff-workspace .flow-networks .social-mark{width:17px;height:17px}
#ff-workspace .flow-connection{display:grid;grid-template-columns:110px minmax(40px,1fr) 110px;align-items:center;margin:20px 0 21px}
#ff-workspace .flow-token,#ff-workspace .flow-person{text-align:center;min-width:0;display:flex;flex-direction:column;align-items:center}
#ff-workspace .flow-token>strong,#ff-workspace .flow-person>strong{font-size:12px;font-weight:500;margin-top:13px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#ff-workspace .flow-token>small,#ff-workspace .flow-person>small{font-size:9px;color:#777;margin-top:5px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
#ff-workspace .flow-art{position:relative;width:89px;height:89px;transform:rotate(-6deg);transition:transform .85s var(--flow-ease);filter:drop-shadow(0 8px 16px #0006)}
#ff-workspace .flow-art>img{width:100%;height:100%;border-radius:18px;display:block}
#ff-workspace .flow-pump{position:absolute;right:-7px;bottom:-5px;background:#151515;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid #101010}
#ff-workspace .flow-pump svg{width:17px;height:17px}
#ff-workspace .flow-portrait{width:82px;height:82px;position:relative;border:1px solid #444;padding:5px;border-radius:50%;background:#1a1a1a;transition:border-color .6s,box-shadow .6s}
#ff-workspace .flow-portrait>img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
#ff-workspace .flow-portrait>span{position:absolute;right:0;bottom:-2px;display:grid;place-items:center;background:#141414;border-radius:50%;width:27px;height:27px;border:2px solid #101010}
#ff-workspace .flow-portrait .social-mark{width:17px;height:17px}
#ff-workspace .flow-route{height:100px;position:relative;margin:0 6px;align-self:start}
#ff-workspace .flow-route-line{position:absolute;left:0;right:0;top:45px;height:1px;background:linear-gradient(90deg,#555,#353535 50%,#555)}
#ff-workspace .flow-route-mark{position:absolute;left:calc(50% - 17px);top:28px;width:34px;height:34px;background:#1e1e1e;border:1px solid #3c3c3c;display:flex;justify-content:center;align-items:center;gap:3px;border-radius:9px;box-shadow:0 0 0 7px #101010}
#ff-workspace .flow-route-mark span{width:5px;height:14px;background:#eee;transform:rotate(-12deg);border-radius:1px}
#ff-workspace .flow-route-mark span+span{height:11px;margin-top:4px}
#ff-workspace .flow-route>small{position:absolute;top:76px;left:0;right:0;text-align:center;font-size:8px;color:#777;white-space:nowrap}
#ff-workspace .flow-packet{position:absolute;top:43px;left:0;width:12px;height:5px;border-radius:4px;background:#eee;box-shadow:0 0 9px #fff6;opacity:0}
#ff-workspace .flow-surface[data-step="1"] .flow-packet,#ff-workspace .flow-surface[data-step="2"] .flow-packet{animation:fee-travel 1.9s ease-in-out infinite}
#ff-workspace .flow-surface:not([data-step="0"]) .flow-art{transform:rotate(0deg) translateY(-3px)}
#ff-workspace .flow-surface[data-step="3"] .flow-portrait{border-color:#aaa;box-shadow:0 0 0 5px #ffffff05}
#ff-workspace .flow-ledger{padding:15px 17px 12px;border:1px solid #303030;border-radius:11px;background:linear-gradient(160deg,#1d1d1d,#151515);box-shadow:0 8px 24px #0002;position:relative;overflow:hidden}
#ff-workspace .flow-ledger-label{display:flex;gap:9px;align-items:center;color:#999;font-size:10px}
#ff-workspace .flow-ledger-unit{font-size:9px;color:#676767;border-left:1px solid #414141;padding-left:9px}
#ff-workspace .flow-ledger-body{display:flex;align-items:center;justify-content:space-between;height:65px;position:relative}
#ff-workspace .flow-amount{display:flex;align-items:center;gap:13px;position:relative;z-index:1;font-size:42px;letter-spacing:-1.8px;line-height:1.2;font-variant-numeric:tabular-nums;font-weight:400}
#ff-workspace .flow-amount-arrow{font-size:20px;letter-spacing:0;color:#777}
#ff-workspace .flow-chart{position:absolute;width:46%;height:65px;bottom:0;right:0;opacity:.5;overflow:visible}
#ff-workspace .flow-chart-line{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.5s var(--flow-ease)}
#ff-workspace .flow-surface[data-step="1"] .flow-chart-line{stroke-dashoffset:.7}
#ff-workspace .flow-surface[data-step="2"] .flow-chart-line{stroke-dashoffset:.3}
#ff-workspace .flow-surface[data-step="3"] .flow-chart-line{stroke-dashoffset:0}
#ff-workspace .flow-ledger-bottom{border-top:1px solid #ffffff0c;padding-top:11px;display:flex;justify-content:space-between;align-items:center;gap:8px}
#ff-workspace .flow-status{display:flex;align-items:center;gap:6px;font-size:9px;color:#939393}
#ff-workspace .flow-status i{width:4px;height:4px;border-radius:50%;background:#aaa;flex-shrink:0}
#ff-workspace .flow-ledger-source{font-size:9px;color:#777;display:flex;align-items:center;gap:4px}
#ff-workspace .flow-ledger-source svg{width:13px;height:13px}
#ff-workspace .flow-receipt{display:flex;align-items:center;gap:10px;margin-top:14px;opacity:.35;transform:translateY(5px);transition:opacity .7s,transform .7s var(--flow-ease)}
#ff-workspace .flow-surface[data-step="3"] .flow-receipt{opacity:1;transform:translateY(0)}
#ff-workspace .flow-receipt-icon{width:25px;height:25px;display:grid;place-items:center;border:1px solid #404040;border-radius:7px;color:#ccc}
#ff-workspace .flow-receipt strong{display:block;font-size:10px;font-weight:400;color:#ccc}
#ff-workspace .flow-receipt small{display:block;font-size:9px;margin-top:4px;color:#777}
#ff-workspace .flow-disclosure{font-size:9px;color:#666;line-height:1.5;margin-top:9px}
@keyframes fee-travel{0%{left:0;opacity:0}18%{opacity:1}85%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}
@media(min-width:1250px){#ff-workspace .flow-stage{padding:27px 40px 22px}#ff-workspace .flow-story{padding:33px 34px}#ff-workspace .flow-connection{grid-template-columns:128px minmax(60px,1fr) 128px}#ff-workspace .flow-art{width:104px;height:104px}#ff-workspace .flow-portrait{width:94px;height:94px}#ff-workspace .flow-route-line{top:51px}#ff-workspace .flow-route-mark{top:34px}#ff-workspace .flow-packet{top:49px}#ff-workspace .flow-route>small{top:83px}}
@media(max-width:1050px){#ff-workspace .flow-surface{grid-template-columns:1fr}#ff-workspace .flow-story{display:grid;grid-template-columns:1fr 1fr;column-gap:30px;padding:24px}#ff-workspace .flow-kicker{grid-column:1/-1;margin-bottom:14px}#ff-workspace .flow-copy{grid-row:2/4;min-height:110px}#ff-workspace .flow-copy h2{font-size:27px}#ff-workspace .flow-copy p{margin-top:10px;font-size:11px}#ff-workspace .flow-steps{margin-top:4px;align-self:start}#ff-workspace .flow-start{margin-top:0;padding-top:14px}#ff-workspace .flow-stage{border-left:0;border-top:1px solid #292929;padding:20px 28px}.flow-connection{max-width:500px}}
@media(max-width:600px){#ff-workspace .flow-topnote{display:none}#ff-workspace .flow-story{display:flex;padding:23px 21px}#ff-workspace .flow-copy{min-height:128px;width:100%}#ff-workspace .flow-copy h2{font-size:28px;max-width:270px}#ff-workspace .flow-copy p{font-size:12px;max-width:290px}#ff-workspace .flow-kicker{font-size:8px;margin-bottom:18px}#ff-workspace .flow-steps{margin-top:16px}#ff-workspace .flow-start{padding-top:18px;font-size:11px}#ff-workspace .flow-stage{padding:18px 18px 20px}#ff-workspace .flow-connection{grid-template-columns:92px minmax(28px,1fr) 92px;margin:21px 0}#ff-workspace .flow-art{width:76px;height:76px}#ff-workspace .flow-portrait{width:72px;height:72px}#ff-workspace .flow-route{margin:0 3px;height:89px}#ff-workspace .flow-route-line{top:38px}#ff-workspace .flow-packet{top:36px}#ff-workspace .flow-route-mark{top:23px;width:30px;height:30px;left:calc(50% - 15px)}#ff-workspace .flow-route>small{top:66px;font-size:7px}#ff-workspace .flow-token>strong,#ff-workspace .flow-person>strong{font-size:11px}#ff-workspace .flow-amount{font-size:38px}#ff-workspace .flow-stage-label{font-size:8px}#ff-workspace .flow-status{font-size:8px}#ff-workspace .flow-ledger{padding:13px}#ff-workspace .flow-receipt small{font-size:8px}#ff-workspace .flow-disclosure{font-size:8px}}
@media(prefers-reduced-motion:reduce){#ff-workspace .flow-demo *{animation:none!important;transition:none!important}#ff-workspace .flow-chart-line{stroke-dashoffset:0}#ff-workspace .flow-receipt{transform:none}}

@media(max-width:600px){#ff-workspace .flow-stage{order:-1;border-top:0;border-bottom:1px solid #292929}#ff-workspace .flow-copy{min-height:116px}#ff-workspace .flow-copy h2{font-size:25px}#ff-workspace .flow-story{padding:20px}#ff-workspace .flow-kicker{margin-bottom:14px}}

/* The explanatory sequence lives beneath the launch studio at a quieter scale. */
#ff-workspace .flow-compact{margin:36px auto 0;max-width:980px}
#ff-workspace .flow-compact .flow-surface{grid-template-columns:minmax(210px,1fr) minmax(300px,1.25fr);min-height:0}
#ff-workspace .flow-compact .flow-story{display:flex;padding:24px;gap:0}
#ff-workspace .flow-compact .flow-kicker{margin-bottom:20px;font-size:8px}
#ff-workspace .flow-compact .flow-copy{min-height:94px}
#ff-workspace .flow-compact .flow-copy h2{font-size:24px;max-width:280px;letter-spacing:-.8px}
#ff-workspace .flow-compact .flow-copy p{font-size:11px;max-width:300px;margin-top:12px}
#ff-workspace .flow-compact .flow-steps{margin-top:18px;gap:8px}
#ff-workspace .flow-compact .flow-start{padding-top:18px;font-size:11px}
#ff-workspace .flow-compact .flow-stage{padding:18px 24px;border-left:1px solid #292929;border-top:0;border-bottom:0;order:0}
#ff-workspace .flow-compact .flow-connection{grid-template-columns:94px minmax(30px,1fr) 94px;margin:15px 0}
#ff-workspace .flow-compact .flow-art{width:68px;height:68px}
#ff-workspace .flow-compact .flow-art>img{border-radius:14px}
#ff-workspace .flow-compact .flow-portrait{width:64px;height:64px;padding:3px}
#ff-workspace .flow-compact .flow-route{height:78px;margin-inline:3px}
#ff-workspace .flow-compact .flow-route-line{top:33px}
#ff-workspace .flow-compact .flow-packet{top:31px}
#ff-workspace .flow-compact .flow-route-mark{top:16px}
#ff-workspace .flow-compact .flow-route>small{top:62px;font-size:7px}
#ff-workspace .flow-compact .flow-token>strong,#ff-workspace .flow-compact .flow-person>strong{margin-top:10px;font-size:11px}
#ff-workspace .flow-compact .flow-ledger{padding:12px 14px 10px}
#ff-workspace .flow-compact .flow-ledger-body{height:48px}
#ff-workspace .flow-compact .flow-amount{font-size:34px}
#ff-workspace .flow-compact .flow-chart{height:48px}
#ff-workspace .flow-compact .flow-receipt{display:none}
#ff-workspace .flow-demo[data-playing=false] .flow-packet{animation-play-state:paused}
@media(max-width:800px){
  #ff-workspace .flow-compact .flow-surface{grid-template-columns:1fr}
  #ff-workspace .flow-compact .flow-stage{border-left:0;border-bottom:1px solid #292929;order:-1}
  #ff-workspace .flow-compact .flow-copy{min-height:105px}
  #ff-workspace .flow-compact .flow-story{padding:20px}
  #ff-workspace .flow-compact .flow-kicker{display:none}
  #ff-workspace .flow-compact .flow-start{padding-top:14px}
}
@media(max-width:360px){#ff-workspace .flow-compact .flow-stage{padding:16px}#ff-workspace .flow-compact .flow-connection{grid-template-columns:86px minmax(24px,1fr) 86px}}