/* Workflows: a tabbed ledger. Audience pills, a numbered strip, readable steps, and a
   schematic diagram drawn straight onto the page ground. No cards, no modal. */
.workflows{padding-top:140px}
.wf{margin-top:52px;--wf-dim:#6a5e63;--wf-rule:rgba(43,30,40,.16);--wf-ease:cubic-bezier(.16,1,.3,1)}
.wf-aud{display:flex;gap:6px}
.wf-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 15px 9px;border-radius:100px;background:var(--card);color:var(--wf-dim);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s}
.wf-pill .dot{width:0;height:9px;margin-right:-8px;border-radius:50%;background:var(--olive);transition:width .3s var(--wf-ease),margin .3s var(--wf-ease)}
.wf-pill:hover{background:var(--line)}
.wf-pill.is-active{background:var(--yellow);color:var(--olive)}
.wf-pill.is-active .dot{width:9px;margin-right:0}

.wf-strip-wrap{margin-top:24px;border-bottom:1px solid var(--wf-rule);overflow-x:auto;scrollbar-width:none}
.wf-strip-wrap::-webkit-scrollbar{display:none}
.wf-strip{position:relative;display:flex;gap:32px;width:max-content;min-width:100%}
.wf-tab{display:inline-flex;align-items:baseline;gap:9px;padding:14px 0 16px;white-space:nowrap;font:400 16px/1 var(--sans);color:var(--wf-dim);transition:color .25s}
.wf-tab .num{font:400 10px/1 var(--mono);letter-spacing:.08em;color:var(--text-muted);transition:color .25s}
.wf-tab:hover,.wf-tab[aria-selected=true]{color:var(--olive)}
.wf-tab[aria-selected=true] .num{color:var(--olive)}
.wf-underline{position:absolute;left:0;bottom:0;width:100px;height:2px;background:var(--olive);transform-origin:0 50%;transition:transform .5s var(--wf-ease)}

.wf-panel{padding-top:46px}
.wf-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px 72px;align-items:start}
.wf-title{margin:0;max-width:21ch;font:400 clamp(25px,2.35vw,35px)/1.14 var(--serif);letter-spacing:-.01em;color:var(--olive);text-wrap:balance}
.wf-lede{margin:16px 0 0;max-width:46ch;font:400 16px/1.5 var(--sans);color:var(--wf-dim)}
.wf-steps{list-style:none;margin:0;padding:0}
.wf-steps li:first-child .wf-step{padding-top:2px}
.wf-step{display:grid;grid-template-columns:22px minmax(0,1fr);gap:14px;width:100%;padding:9px 0;text-align:left;font:400 15px/1.45 var(--sans);color:#52414b;transition:color .3s}
.wf-step .num{display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;border:1px solid rgba(43,30,40,.3);font:500 10px/1 var(--mono);color:var(--wf-dim);transition:background .3s,border-color .3s,color .3s}
.wf-step:hover,.is-on .wf-step,.is-done .wf-step{color:var(--olive)}
.is-on .wf-step .num{background:var(--yellow);border-color:var(--olive);color:var(--olive)}
.is-done .wf-step .num{background:var(--olive);border-color:var(--olive);color:var(--white)}

.wf-diagram{margin-top:40px;padding:30px 0 14px;border-top:1px solid var(--wf-rule);border-bottom:1px solid var(--wf-rule)}
.wf-svg{display:block;width:100%;height:auto;overflow:visible}
.wf-svg text{user-select:none}
.wf-rules path{stroke:var(--wf-rule);stroke-width:1}
.wf-lane{font:400 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;fill:var(--wf-dim)}
.wf-label{font:400 12px var(--sans);fill:var(--olive);paint-order:stroke;stroke:var(--beige);stroke-width:4px;stroke-linejoin:round}
.wf-chip{font:500 9.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;fill:var(--olive)}
.wf-chip-name{font:500 11.5px var(--sans);fill:var(--olive)}
.wf-pill-text{font:500 12px var(--mono);fill:var(--olive)}
.wf-note-bg{fill:var(--white)}
.wf-note-text{font:500 10.5px var(--sans);fill:var(--olive-2)}
.wf-ghost{stroke:rgba(43,30,40,.34);stroke-width:1.3;stroke-dasharray:1.5 5;stroke-linecap:round}
.wf-ink-path,.wf-arrow{stroke:var(--olive);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wf-edge.is-wait .wf-ink-path{stroke-dasharray:6 6}
/* the complete, still picture: used for reduced motion and when scripts cannot animate */
.wf-static .wf-node,.wf-static .wf-note,.wf-static .wf-badge,.wf-static .wf-arrow,.wf-static .wf-ink-path{opacity:1!important}
.wf-static .wf-edge:not(.is-wait) .wf-ink-path{stroke-dasharray:none!important;stroke-dashoffset:0!important}

.wf-foot{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-top:22px}
.wf-outcome{margin:0;max-width:54ch;font:400 18px/1.4 var(--serif);color:var(--olive)}
.wf-outcome span{display:block;margin-bottom:9px;font:400 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wf-dim)}
.wf-outcome b{font-weight:400}
.wf-systems{margin:0;font:400 10px/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--wf-dim);text-align:right}

.wf-pill:focus-visible,.wf-tab:focus-visible,.wf-step:focus-visible,.wf-panel:focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:4px}
.wf-pill:focus-visible{border-radius:100px}

/* Wide screens: the panel pins for one viewport while the track scrolls one step per workflow, like How Infer works. */
@media (min-width:810px){
  .wf-track{position:relative;--wf-step:64vh;height:calc(var(--wf-steps,7) * var(--wf-step) + 36vh)}
  .wf-anchor{position:absolute;left:0;width:100%;height:var(--wf-step);pointer-events:none}
  .wf-pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding-block:20px 18px}
  .wf{margin-top:0;display:flex;flex-direction:column;flex:1;min-height:0}
  .wf-panel{display:flex;flex-direction:column;flex:1;min-height:0;padding-top:20px}
  .wf-copy{flex:none;gap:16px 56px}
  .wf-title{font-size:clamp(22px,2vw,30px)}
  .wf-lede{margin-top:10px;font-size:15px}
  .wf-step{padding:7px 0;font-size:14.5px}
  .wf-diagram{flex:1;min-height:0;display:flex;align-items:center;margin-top:16px;padding:10px 0 6px}
  .wf-svg{max-width:100%}
  .wf-foot{flex:none;margin-top:10px}
  .wf-outcome{font-size:16.5px}
}
/* laptop-height windows: the lede goes, the steps tighten, the drawing keeps its room */
@media (min-width:810px) and (max-height:900px){
  .wf-pin{padding-block:14px 12px}
  .wf-lede{display:none}
  .wf-title{font-size:22px;max-width:26ch}
  .wf-copy{gap:12px 48px}
  .wf-step{padding:4px 0;font-size:13.5px;line-height:1.35}
  .wf-step .num{width:20px;height:20px;font-size:9.5px}
  .wf-panel{padding-top:12px}
  .wf-strip-wrap{margin-top:14px}
  .wf-tab{padding:11px 0 12px;font-size:15px}
  .wf-diagram{margin-top:10px;padding:8px 0 4px}
  .wf-foot{margin-top:8px}
  .wf-outcome{font-size:15px}
  .wf-outcome span{margin-bottom:5px}
}
@media (max-width:1023px){
  .wf-copy{grid-template-columns:1fr;gap:26px}
  .wf-title,.wf-lede{max-width:none}
}
@media (max-width:809px){
  .workflows{padding-top:96px}
  .wf{margin-top:36px}
  .wf-strip-wrap{margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
  .wf-strip{gap:26px}
  .wf-tab{font-size:15px}
  .wf-panel{padding-top:34px}
  .wf-title{font-size:26px}
  .wf-diagram{margin-top:30px;padding:22px 0 8px}
  .wf-svg{max-width:420px;margin-inline:auto}
  .wf-label{font-size:12.5px}
  .wf-systems{text-align:left}
}
@media (prefers-reduced-motion:reduce){.wf-pill,.wf-pill .dot,.wf-tab,.wf-underline,.wf-step,.wf-step .num{transition:none}}