/* ============================================================
   WORKFLOWS PAGE (services/workflows-and-automations/ only, after site.css
   and service-page.css; since 2026-10-20 its hub card is a still image,
   assets/img/hub-card.webp, so hub-demo.css/js no longer load). Prefix wf-. The layout, the hero and
   "what you get" type and How it works are shared (service-page.css, svt-);
   this file styles only this page's two pieces:
   1 hero - the block field: a faint, untidy pile of work on the left and a
     clean lane on the right; four items leave the pile one by one, turn
     cobalt and line up in the lane (the first one done carries a tick)
   2 what you get - a supplier price list run across several systems: a
     small graph (inbox, spreadsheet, products, margin rules, two branches
     held for a person, the person's approval, then shop, marketplace,
     accounts and sales team at once) with a run log under it
     (svc-workflow.js draws the lines and plays it)
   Both play once via [data-svt-in] (service-page.js). The finished state is
   the plain rule; "before" states sit under html.svt-on inside a
   no-preference query, so reduced motion or no script shows the end state.
   ============================================================ */
#site .wf-hero, #site .wf-get { --wf-ink: #0B1B33; --wf-mu: #4A5A72; --wf-mu2: #607086; --wf-ln: rgba(11,27,51,.14); --wf-ln2: rgba(11,27,51,.08);
  --wf-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; }

/* ============ 1 HERO: the block field ============ */
/* 10 x 8 cells, 44px at full size, scaled to the slot */
#site .wf-field { position: relative; width: min(100%, 440px); aspect-ratio: 10 / 8; container-type: inline-size; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
#site .wf-fd { --c: 10cqi; position: absolute; left: 0; top: 0; width: calc(var(--c) * 10); height: calc(var(--c) * 8);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Crect x='1' y='1' width='42' height='42' rx='3' fill='%230B1B33' fill-opacity='.02'/%3E%3C/svg%3E") 0 0 / var(--c) var(--c); }
/* the lane: row 4, columns 4 to 9, a soft cobalt track with a guide line */
#site .wf-lane { position: absolute; left: calc(var(--c) * 4); top: calc(var(--c) * 4); width: calc(var(--c) * 6); height: var(--c);
  border-radius: 4px; background: rgba(44,95,216,.06); box-shadow: inset 0 0 0 1px rgba(44,95,216,.16); }
#site .wf-lane::before { content: ""; position: absolute; left: 3%; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px;
  background: linear-gradient(to right, rgba(44,95,216,0), rgba(44,95,216,.32) 30%); }
#site .wf-fd i, #site .wf-fd b { position: absolute; left: calc(var(--x) * var(--c) + 1px); top: calc(var(--y, 4) * var(--c) + 1px);
  width: calc(var(--c) - 2px); height: calc(var(--c) - 2px); border-radius: 3px; }
#site .wf-fd i { background: var(--nvy); opacity: var(--o); rotate: var(--r); }
/* finished state: the four items stand in the lane */
#site .wf-fd b { display: grid; place-items: center; background: var(--cb); opacity: var(--o); }
#site .wf-fd b:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); }
#site .wf-fd b svg { width: 52%; height: 52%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#site .wf-fd b path { stroke-dasharray: 14; stroke-dashoffset: 0; }

@media (max-width: 900px) {
  /* rows 1 to 6 only: the pile and the lane, no empty rows */
  #site .wf-field { aspect-ratio: 10 / 6.4; }
  #site .wf-fd { top: calc(var(--c) * -.8); }
}

/* ============ 2 WHAT YOU GET: the supplier price list run ============ */
/* A card holding a small graph of the systems one run touches. The nodes
   sit in a CSS grid (areas "in sheet / rev prod / jump rule / gate gate")
   with the fan-out row under it; svc-workflow.js draws the lines in
   .wf-lines from the nodes' boxes (and again on resize). Cobalt = runs on
   its own, amber dashed = held for a person. The finished state is the
   plain rule. */
#site .wf-get { --wf-am: #A35F0B; --wf-am2: rgba(196,124,22,.5); --wf-amb: #FFF7E8; --wf-ok: #1F7A50; }
#site .wf-get .svt-deliv { width: min(100%, 476px); }
#site .wf-run { margin: 0; container-type: inline-size; }
#site .wf-card { position: relative; padding: max(16px, 5cqi) max(14px, 4.6cqi) max(14px, 4cqi); border: 1px solid var(--wf-ln2); border-radius: 12px; background: #fff;
  box-shadow: 0 1px 1px rgba(11,27,51,.04), 0 2px 6px -2px rgba(11,27,51,.08), 0 40px 80px -40px rgba(11,27,51,.42); }
#site .wf-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#site .wf-ttl { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--wf-ink); }
#site .wf-ttl svg { width: 19px; height: auto; fill: none; stroke: var(--cb); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#site .wf-ttl svg rect { fill: rgba(44,95,216,.12); }
#site .wf-tag { font-family: var(--wf-mono); font-size: 12.5px; line-height: 1; text-transform: uppercase; letter-spacing: .03em; color: var(--wf-mu2);
  padding: 6px 9px; border: 1px solid var(--wf-ln); border-radius: 100px; }

/* the graph */
#site .wf-g { position: relative; margin-top: 18px; }
#site .wf-lines { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
#site .wf-lines path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#site .wf-lines .wf-tr { stroke: rgba(11,27,51,.13); stroke-width: 1.5; }
#site .wf-lines .wf-tr.wf-ex { stroke: rgba(196,124,22,.28); stroke-dasharray: 4 4; stroke-linecap: butt; }
#site .wf-lines .wf-dr { stroke: var(--cb); stroke-width: 2; }
#site .wf-lines .wf-dr.wf-ex { stroke: #C47C16; stroke-dasharray: 4 4; stroke-linecap: butt; }
#site .wf-lines .wf-ar { stroke: var(--cb); stroke-width: 2; }
#site .wf-lines .wf-ar.wf-ex { stroke: #C47C16; }
#site .wf-lines .wf-pk { fill: var(--cb); stroke: #fff; stroke-width: 2; }
#site .wf-lines .wf-pk.wf-ex { fill: #C47C16; }

#site .wf-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "in sheet" "rev prod" "jump rule" "gate gate";
  gap: 16px max(22px, 6cqi); }
#site .wf-n[data-wf="in"] { grid-area: in; } #site .wf-n[data-wf="sheet"] { grid-area: sheet; }
#site .wf-n[data-wf="prod"] { grid-area: prod; } #site .wf-n[data-wf="rev"] { grid-area: rev; }
#site .wf-n[data-wf="rule"] { grid-area: rule; } #site .wf-n[data-wf="jump"] { grid-area: jump; }
#site .wf-n[data-wf="gate"] { grid-area: gate; }
#site .wf-fan { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 24px; }
@container (max-width: 430px) {
  #site .wf-fan { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}

/* a node: a brand block holding the system's icon, then its name and what happened */
#site .wf-n { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border: 1px solid rgba(44,95,216,.26); border-radius: 9px; background: #fff;
  box-shadow: 0 1px 2px rgba(11,27,51,.05); }
#site .wf-ic { position: relative; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--cb); }
#site .wf-ic svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
#site .wf-tx { display: flex; flex-direction: column; min-width: 0; }
#site .wf-nm { font-size: 13.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; color: var(--wf-ink); }
#site .wf-ns { font-size: 13px; line-height: 1.3; color: var(--wf-mu); }
#site .wf-c { font-variant-numeric: tabular-nums; }
/* held for a person: amber, dashed */
#site .wf-x { border: 1px dashed var(--wf-am2); background: var(--wf-amb); box-shadow: none; }
#site .wf-x .wf-ic { background: #fff; box-shadow: inset 0 0 0 1.5px var(--wf-am2); }
#site .wf-x .wf-ic svg { stroke: var(--wf-am); }
#site .wf-x .wf-nm { color: #7A4708; }
#site .wf-x .wf-ns { color: #8A5A1C; }
/* the person's approval: the one gate in the run */
#site .wf-gate { padding: 10px 12px; border-color: var(--cb); background: #F5F8FF; box-shadow: 0 10px 24px -16px rgba(44,95,216,.55); }
#site .wf-gate .wf-ic { border-radius: 50%; }
#site .wf-gate .wf-tx { flex: 1; }
#site .wf-st { flex: none; display: grid; }
#site .wf-st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; line-height: 1; padding: 6px 9px; border-radius: 100px; }
#site .wf-wait { color: var(--wf-am); background: rgba(196,124,22,.12); visibility: hidden; }
#site .wf-yes { color: var(--wf-ok); background: rgba(31,138,91,.1); }
#site .wf-yes svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* the fan-out: icon over the name */
#site .wf-f { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 9px; }
#site .wf-f .wf-ic { width: 28px; height: 28px; }

/* the run log: the latest three lines */
#site .wf-run .wf-log { list-style: none; margin: 18px 0 0; padding: 10px 12px; min-height: 89px; font-size: 13.5px; border-radius: 8px; background: #F4F6FA; }
#site .wf-log li { display: flex; align-items: flex-start; gap: 8px; padding: 2px 0; font-size: 13.5px; line-height: 1.4; color: var(--wf-mu); }
#site .wf-log li:nth-last-child(n+4) { display: none; }
#site .wf-log li:last-child { color: var(--wf-ink); font-weight: 500; }
#site .wf-log svg { flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: rgba(44,95,216,.12); fill: none; stroke: var(--cb); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#site .wf-log .wf-lx svg { background: rgba(196,124,22,.14); stroke: var(--wf-am); }
#site .wf-log .wf-lok svg { background: #1F8A5B; stroke: #fff; }

@media (max-width: 900px) {
  #site .wf-get .svt-deliv { width: 100%; max-width: 476px; }
}

/* ============ the two once-only motions ============ */
@media (prefers-reduced-motion: no-preference) {
  /* hero: the four items wait in the pile, then (one after another) slide to
     the lane's mouth, turn cobalt, and run along it to their place */
  html.svt-on #site .wf-field .wf-fd b { background: var(--nvy); opacity: .16; box-shadow: none; rotate: var(--r);
    translate: calc((var(--sx) - var(--x)) * var(--c)) calc((var(--sy) - 4) * var(--c)); }
  html.svt-on #site .wf-field .wf-fd b path { stroke-dashoffset: 14; }
  html.svt-on #site .wf-field.svt-in .wf-fd b { animation: wf-go 1.5s cubic-bezier(.55,0,.25,1) calc(.3s + var(--i) * .42s) both; }
  html.svt-on #site .wf-field.svt-in .wf-fd b:first-of-type { box-shadow: 0 10px 22px -10px rgba(44,95,216,.7); transition: box-shadow .6s ease 1.8s; }

  /* the price list run (svc-workflow.js adds .wf-play while it runs, then
     .is-on / .is-ok on each node in turn; the lines draw from the script) */
  html.svt-on #site .wf-run .wf-n, html.svt-on #site .wf-run .wf-ic { transition: border-color .3s ease, background-color .3s ease, box-shadow .3s ease, opacity .4s ease, translate .4s ease; }
  html.svt-on #site .wf-run .wf-tx, html.svt-on #site .wf-run .wf-ic svg { transition: opacity .3s ease, stroke .3s ease; }
  html.svt-on #site .wf-run.wf-play .wf-n:not(.is-on):not(.is-ok) { border-color: var(--wf-ln2); box-shadow: none; }
  html.svt-on #site .wf-run.wf-play .wf-n:not(.wf-x):not(.is-on):not(.is-ok) .wf-ic { background: rgba(11,27,51,.07); }
  html.svt-on #site .wf-run.wf-play .wf-n:not(.wf-x):not(.is-on):not(.is-ok) .wf-ic svg { stroke: rgba(11,27,51,.4); }
  html.svt-on #site .wf-run.wf-play .wf-n:not(.is-on):not(.is-ok) .wf-tx { opacity: .45; }
  html.svt-on #site .wf-run.wf-play .wf-gate:not(.is-on):not(.is-ok) { background: #fff; }
  /* the two held branches appear when the run reaches them */
  html.svt-on #site .wf-run.wf-play .wf-x:not(.is-on):not(.is-ok) { opacity: 0; translate: 0 6px; }
  /* the node at work: a cobalt edge and a ring round its block */
  html.svt-on #site .wf-run .wf-n.is-on:not(.is-ok) { border-color: var(--cb); }
  html.svt-on #site .wf-run .wf-n.is-on:not(.is-ok) .wf-ic::after { content: ""; position: absolute; inset: -5px; border-radius: 9px; border: 2px solid rgba(44,95,216,.35); animation: wf-ring 1s ease-out infinite; }
  html.svt-on #site .wf-run .wf-gate.is-on:not(.is-ok) .wf-ic::after { border-radius: 50%; border-color: rgba(196,124,22,.45); }
  /* the gate: waiting (amber) until the person approves */
  html.svt-on #site .wf-run.wf-play .wf-gate:not(.is-ok) .wf-yes { visibility: hidden; }
  html.svt-on #site .wf-run .wf-gate.is-on:not(.is-ok) { border-color: var(--wf-am2); background: var(--wf-amb); box-shadow: none; }
  html.svt-on #site .wf-run .wf-gate.is-on:not(.is-ok) .wf-wait { visibility: visible; animation: wf-in .3s ease both; }
  html.svt-on #site .wf-run .wf-gate.is-ok .wf-yes { animation: wf-in .3s ease both; }
  /* the log: lines arrive one at a time, the newest in ink */
  html.svt-on #site .wf-run.wf-play .wf-log li { display: none; color: var(--wf-mu); font-weight: 400; }
  html.svt-on #site .wf-run.wf-play .wf-log li.wf-vis { display: flex; }
  html.svt-on #site .wf-run.wf-play .wf-log li.wf-cur { color: var(--wf-ink); font-weight: 500; animation: wf-in .35s ease both; }
}
@keyframes wf-go {
  0% { translate: calc((var(--sx) - var(--x)) * var(--c)) calc((var(--sy) - 4) * var(--c)); rotate: var(--r); background-color: var(--nvy); opacity: .16; }
  48% { translate: calc((4 - var(--x)) * var(--c)) 0; rotate: 0deg; background-color: var(--cb); opacity: var(--o); }
  100% { translate: 0 0; rotate: 0deg; background-color: var(--cb); opacity: var(--o); }
}
@keyframes wf-ring { from { opacity: 1; transform: scale(.85); } to { opacity: 0; transform: scale(1.25); } }
@keyframes wf-in { from { opacity: 0; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }