/* =========================================================
   HERO DASHBOARD · light, calm, Align-informed
   One line colour, one fill, three greys, one green.
   ========================================================= */

/* ---------- product tour row: three squared cells, divided by rules (like the client strip) ---------- */
.fx{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:56px calc(var(--gutter) * -1) 0;
    border-top:1px solid var(--ruling);border-bottom:1px solid var(--ruling)}
.fx-c{position:relative;display:flex;flex-direction:column;gap:14px;padding:30px 36px 32px;text-align:left;border-right:1px solid var(--ruling);
      transition:background-color .4s var(--ease)}
.fx-c:last-child{border-right:0}
.fx-c:hover{background:var(--paper-2)}
.fx-c:focus-visible{outline:2px solid var(--paid);outline-offset:-2px;border-radius:0}
/* plus marks where each divider meets the rules */
.fx-c:not(:last-child)::before,.fx-c:not(:last-child)::after{content:"";position:absolute;right:-5px;width:9px;height:9px;pointer-events:none;z-index:2;
  background:linear-gradient(var(--mark),var(--mark)) center/100% 1px no-repeat,linear-gradient(var(--mark),var(--mark)) center/1px 100% no-repeat}
.fx-c:not(:last-child)::before{top:-5px}
.fx-c:not(:last-child)::after{bottom:-5px}
/* the progress line runs along the top rule of the active cell */
.fx-line{position:absolute;left:0;right:0;top:-1px;height:1px;z-index:1}
.fx-line i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0) * 100%);
           background:#13795b}
.fx-c[aria-selected="false"] .fx-line i{transition:width .45s var(--ease)}
.fx-h{display:flex;align-items:center;gap:14px;font:500 17px/24px var(--font);letter-spacing:-.014em;color:#8a8a86;transition:color .4s}
.fx-c[aria-selected="true"] .fx-h{color:var(--ink)}
/* icons: the headline's glossy liquid tile, asleep until their card is live */
.fx-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;vertical-align:0;transform:rotate(-6deg);
        box-shadow:0 0 0 1px rgba(98,222,174,.75),0 0 0 3px rgba(63,207,155,.14),0 0 16px 1px rgba(63,207,155,.32),0 8px 14px -8px rgba(13,92,69,.5);
        filter:grayscale(1) brightness(1.25) opacity(.5);transition:filter .5s var(--ease),transform .6s var(--ease-snap)}
.fx-ico svg,.t-ico svg{position:relative;z-index:2;width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.fx-c[aria-selected="true"] .fx-ico{filter:none;transform:rotate(-6deg) scale(1.04)}
.fx-c:hover .fx-ico{filter:grayscale(.4) opacity(.85)}
.fx-c[aria-selected="true"]:hover .fx-ico{filter:none}
.fx-d{max-width:34ch;font-size:14px;line-height:21px;letter-spacing:-.006em;color:#8f8f8a;transition:color .4s}
.fx-c[aria-selected="true"] .fx-d{color:var(--graphite)}
/* the row's bottom rule is the band's top edge */
.fx + .show-frame{margin-top:0}
.fx + .show-frame::before{display:none}

/* ---------- frame ---------- */
.dx{--t1:#171717;--t2:#5c5c5c;--t3:#8f8f8f;--line:#ebebeb;--line-2:#f2f2f2;--fill:#f7f7f7;--ok:#1fc16b;--wait:#f6b51e;--warn:#fa7319;--acc:#13795b;
    position:relative;border-radius:16px;background:#fff;overflow:hidden;color:var(--t1);font:400 13px/20px var(--font);letter-spacing:-.003em;
    font-feature-settings:"cv11","ss11";
    box-shadow:0 0 0 1px rgba(21,21,21,.07),0 1px 2px rgba(21,21,21,.05),0 18px 36px -18px rgba(13,60,45,.25)}
.dx svg{flex:none}
.dx-in{display:grid;grid-template-columns:224px minmax(0,1fr)}
.dx img{display:block;object-fit:cover;border-radius:50%}

/* ---------- sidebar (full height, starts at the top) ---------- */
.dx-sb{display:flex;flex-direction:column;padding:14px 12px 12px;border-right:1px solid var(--line);background:#fcfcfc}
.dx-ws{display:flex;align-items:center;gap:10px;padding:7px 10px 7px 7px;border-radius:12px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(10,13,20,.03)}
.dx-ws-t{display:flex;flex-direction:column;min-width:0;line-height:16px}
.dx-ws-t b{font-weight:500;font-size:13px;color:var(--t1)}
.dx-ws-t em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-ud{width:16px;height:16px;margin-left:auto;fill:none;stroke:var(--t3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dx-grp{display:block;margin:22px 0 6px 10px;font-size:11px;line-height:16px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#a3a3a3}
.dx-nav{display:grid;gap:2px}
.dx-ni{position:relative;display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;font-weight:500;color:var(--t2);
       transition:background-color .35s var(--ease),color .35s var(--ease)}
.dx-ni svg{width:18px;height:18px;fill:none;stroke:#a3a3a3;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s}
.dx-ni em{margin-left:auto;font-style:normal;font-size:11.5px;line-height:18px;padding:0 6px;border-radius:6px;background:#f0f0f0;color:var(--t2);font-variant-numeric:tabular-nums}
.dx-ni::before{content:"";position:absolute;left:-12px;top:8px;width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--acc);
               transform:scaleY(0);transition:transform .45s var(--ease-snap)}
.dx[data-view="match"] .dx-ni[data-k="match"],.dx[data-view="approve"] .dx-ni[data-k="approve"],.dx[data-view="pay"] .dx-ni[data-k="pay"]{background:#f2f2f2;color:var(--t1)}
.dx[data-view="match"] .dx-ni[data-k="match"] svg,.dx[data-view="approve"] .dx-ni[data-k="approve"] svg,.dx[data-view="pay"] .dx-ni[data-k="pay"] svg{stroke:var(--acc)}
.dx[data-view="match"] .dx-ni[data-k="match"]::before,.dx[data-view="approve"] .dx-ni[data-k="approve"]::before,.dx[data-view="pay"] .dx-ni[data-k="pay"]::before{transform:none}
.dx[data-view="approve"] .dx-ni[data-k="approve"] em{background:#fff;box-shadow:0 0 0 1px var(--line)}
.dx-me{display:flex;align-items:center;gap:10px;margin-top:auto;padding:12px 8px 2px;border-top:1px solid var(--line)}
.dx-me img{width:32px;height:32px}
.dx-me span{display:flex;flex-direction:column;min-width:0;line-height:16px}
.dx-me b{font-weight:500;color:var(--t1)}
.dx-me em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-me svg{width:14px;height:14px;margin-left:auto;fill:none;stroke:var(--t3);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- logos ---------- */
.dx-lg{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:8px;background:var(--b,#fff);color:var(--f,#fff);
       box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.12)}
.dx-lg svg{width:15px;height:15px;fill:currentColor}
.dx-lg-w{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dx-lg-ws{width:32px;height:32px;border-radius:9px}
.dx-lg-ws svg{width:16px;height:16px}
.dx-lg-lg{width:36px;height:36px;border-radius:10px}
.dx-lg-lg svg{width:18px;height:18px}

/* ---------- header (main column only) ---------- */
.dx-main{min-width:0;display:flex;flex-direction:column}
.dx-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding:0 24px;border-bottom:1px solid var(--line)}
.dx-ttl{display:grid}
.dx-tt{grid-area:1/1;display:flex;flex-direction:column;line-height:20px;opacity:0;transform:translateY(6px);filter:blur(3px);
       transition:opacity .4s var(--ease),transform .5s var(--ease-snap),filter .4s}
.dx-tt b{font-weight:500;font-size:16px;line-height:24px;letter-spacing:-.011em;color:var(--t1)}
.dx-tt span{font-size:12.5px;color:var(--t3)}
.dx[data-view="match"] [data-t="match"],.dx[data-view="approve"] [data-t="approve"],.dx[data-view="pay"] [data-t="pay"]{opacity:1;transform:none;filter:none;transition-delay:.08s}
.dx-hd-r{display:flex;align-items:center;gap:10px}
.dx-search{display:flex;align-items:center;gap:8px;width:220px;height:34px;padding:0 6px 0 11px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);color:#a3a3a3}
.dx-search svg{width:15px;height:15px;fill:none;stroke:var(--t2);stroke-width:1.4;stroke-linecap:round}
.dx-search kbd{margin-left:auto;font:500 11px/1 var(--font);color:var(--t2);background:var(--fill);padding:5px 6px;border-radius:6px}
.dx-ib{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;box-shadow:inset 0 0 0 1px var(--line)}
.dx-ib svg{width:18px;height:18px;fill:none;stroke:var(--t2);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dx-bell::after{content:"";position:absolute;top:8px;right:9px;width:6px;height:6px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 2px #fff}
.dx-avs{display:flex;padding-left:4px}
.dx-avs img{width:28px;height:28px;margin-left:-7px;box-shadow:0 0 0 2px #fff}

/* ---------- views: stacked in one cell, the frame never jumps ---------- */
.dx-views{display:grid;padding:20px 24px 28px}
.dx-v{grid-area:1/1;display:flex;flex-direction:column;gap:16px;min-width:0;opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility 0s .3s}
.dx-v.is-on{opacity:1;visibility:visible;transition:opacity .3s var(--ease)}
.dx-v.is-on .dx-k,.dx-v.is-on .dx-card{animation:dx-in .8s var(--ease-snap) both;animation-delay:calc(var(--i) * 70ms + 60ms)}
@keyframes dx-in{from{opacity:0;transform:translateY(12px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- KPI cards: three, separate ---------- */
.dx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dx-k,.dx-card{border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(10,13,20,.03)}
.dx-k{display:flex;flex-direction:column;gap:6px;padding:16px 18px 16px}
.dx-kl{font-size:12.5px;line-height:16px;color:var(--t2)}
.dx-kv{display:flex;align-items:center;gap:10px}
.dx-kv b{font:500 24px/32px var(--display);letter-spacing:-.015em;color:var(--t1);font-variant-numeric:tabular-nums}
.dx-pill{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;background:#e3f6ec;color:#0b6b47;font-size:11.5px;font-weight:500;white-space:nowrap}
.dx-ks{font-size:12px;line-height:16px;color:var(--t3)}
.dx-tick{display:flex;gap:3px;height:16px;align-items:stretch}
.dx-tick i{flex:1;max-width:5px;border-radius:2px;background:#ececec;transition:background-color .25s}
.dx-tick i.on{background:var(--acc)}

/* ---------- cards ---------- */
.dx-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.dx-card{display:flex;flex-direction:column;padding:16px 18px 18px;min-width:0}
.dx-ch{display:flex;align-items:center;justify-content:space-between;gap:12px;height:28px;margin-bottom:12px}
.dx-ct{font-weight:500;font-size:14px;letter-spacing:-.006em;color:var(--t1)}
.dx-seg{display:flex;padding:2px;border-radius:8px;background:#f2f2f2}
.dx-seg i{font-style:normal;font-size:12px;line-height:24px;padding:0 10px;border-radius:6px;color:var(--t3)}
.dx-seg i.on{background:#fff;color:var(--t1);box-shadow:0 1px 2px rgba(10,13,20,.08),0 0 0 1px rgba(10,13,20,.03)}
.dx-tag{font-size:12px;line-height:22px;padding:0 8px;border-radius:6px;color:var(--t2);box-shadow:inset 0 0 0 1px var(--line)}

/* table */
.dx-tbl{display:flex;flex-direction:column}
.dx-th,.dx-tr{display:grid;grid-template-columns:minmax(0,1fr) 120px 96px 126px;align-items:center;gap:12px;padding:0 12px}
.dx-tbl-ap .dx-th,.dx-tbl-ap .dx-tr{grid-template-columns:minmax(0,1fr) 128px 96px 126px}
.dx-th{height:32px;border-radius:8px;background:var(--fill);font-size:12px;color:var(--t3);margin-bottom:4px}
.dx-th .r,.dx-amt{text-align:right}
.dx-tr{height:54px;border-bottom:1px solid var(--line-2);border-radius:10px;transition:background-color .4s}
.dx-tr:last-child{border-bottom:0}
.dx-tr.is-focus{background:#fafafa;border-bottom-color:transparent}
.dx-ven{display:flex;align-items:center;gap:10px;min-width:0}
.dx-ven > span{display:flex;flex-direction:column;min-width:0;line-height:16px}
.dx-ven b{font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dx-ven em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-amt{font-weight:500;color:var(--t1);font-variant-numeric:tabular-nums}
.dx-who{display:flex;align-items:center;gap:8px;color:var(--t2);white-space:nowrap}
.dx-who img{width:22px;height:22px}

/* 3-way match pips: each fills from the left */
.dx-steps{display:flex;gap:4px}
.dx-steps i{position:relative;width:28px;height:6px;border-radius:3px;background:#ececec;overflow:hidden}
.dx-steps i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-snap)}
.dx-steps.is-done i::after,.dx-steps i.on::after{transform:none}
.dx-steps.is-warn i:last-child::after{background:var(--wait)}

/* status: neutral chip, colour lives in the dot */
.dx-st{justify-self:start;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;border-radius:7px;background:#fff;
       box-shadow:inset 0 0 0 1px var(--line);font-size:12px;color:var(--t2);white-space:nowrap}
.dx-st::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.dx-st[data-st="wait"]::before{background:var(--wait)}
.dx-st[data-st="warn"]::before{background:var(--warn)}
.dx-st[data-st="run"]::before{width:10px;height:10px;background:none;border:1.5px solid #dcdcdc;border-top-color:var(--acc);box-sizing:border-box;animation:dx-spin .8s linear infinite}
.dx-st.is-swap{animation:dx-swap .5s var(--ease-snap)}
@keyframes dx-spin{to{transform:rotate(1turn)}}
@keyframes dx-swap{from{opacity:0;transform:translateY(4px);filter:blur(3px)}}

/* side card: match list */
.dx-vend{display:flex;align-items:center;gap:12px;padding-bottom:6px}
.dx-vend span{display:flex;flex-direction:column;line-height:18px}
.dx-vend b{font-weight:500;font-size:14px}
.dx-vend em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-ml{list-style:none;margin:6px 0 14px;padding:0}
.dx-ml li{display:grid;grid-template-columns:minmax(0,1fr) auto 20px;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line-2);
          opacity:.42;transition:opacity .45s var(--ease)}
.dx-ml li.on{opacity:1}
.dx-ml li > span:first-child{display:flex;flex-direction:column;line-height:16px}
.dx-ml em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-ml b{font-weight:500;color:var(--t1);margin-top:2px}
.dx-mv{font-weight:500;font-variant-numeric:tabular-nums}
.dx-ok{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#efefef;transition:background-color .35s var(--ease)}
.dx-ok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dx-ok path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s var(--ease) .12s}
.on > .dx-ok,.dx-ok.on{background:var(--ok);animation:dx-pop .5s var(--ease-snap)}
.on > .dx-ok path,.dx-ok.on path{stroke-dashoffset:0}
@keyframes dx-pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:none}}
.dx-foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px;height:40px;padding:0 12px;border-radius:10px;background:var(--fill);font-size:12.5px;color:var(--t2)}
.dx-foot b{font-weight:500;color:var(--t1);transition:color .4s}
.dx-foot.on b{color:#0b6b47}

/* side card: approvals */
.dx-big{display:flex;flex-direction:column;padding-bottom:14px;border-bottom:1px solid var(--line-2)}
.dx-big b{font:500 26px/34px var(--display);letter-spacing:-.018em;font-variant-numeric:tabular-nums}
.dx-big span{font-size:12.5px;color:var(--t3)}
.dx-chain{list-style:none;margin:6px 0 14px;padding:0}
.dx-chain li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) 20px;align-items:center;gap:10px;padding:8px 0}
.dx-chain li + li::before{content:"";position:absolute;left:13.5px;top:-6px;height:12px;width:1px;background:#e3e3e3}
.dx-chain img{width:28px;height:28px}
.dx-chain li > span{display:flex;flex-direction:column;line-height:16px}
.dx-chain b{font-weight:500}
.dx-chain em{font-style:normal;font-size:12px;color:var(--t3)}
.dx-chain li[data-me]:not(.is-done) em{color:#a06a00}
.dx-acts{display:grid;grid-template-columns:1fr 1.3fr;gap:8px;margin-top:4px}
.dx-b1,.dx-b2{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border-radius:10px;font-weight:500;font-size:13px;
              transition:transform .18s var(--ease),background-color .35s var(--ease)}
.dx-b2{color:var(--t1);box-shadow:inset 0 0 0 1px var(--line),0 1px 2px rgba(10,13,20,.04)}
.dx-b1{position:relative;overflow:hidden;color:#fff;background:#171717;
       box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(10,13,20,.2)}
.dx-b1::before{content:"";position:absolute;inset:0 0 50%;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0));pointer-events:none}
.dx-b1.is-press{transform:scale(.96)}
.dx-b1.is-done{background:var(--acc)}
.dx-b1.is-done span::before{content:"";display:inline-block;width:12px;height:7px;margin:0 7px 3px 0;border:solid #fff;border-width:0 0 1.8px 1.8px;transform:rotate(-45deg)}

/* payments: stacked bars with a grey remainder and white seams */
.dx-lgd{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t2)}
.dx-lgd i{width:8px;height:8px;border-radius:2px;background:var(--acc)}
.dx-lgd i.p{margin-left:8px;background:#b5dcc9}
.dx-bars{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;height:236px;padding:24px 48px 0 4px}
.dx-ys{position:absolute;inset:24px 0 26px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
.dx-ys span{position:relative;display:flex;justify-content:flex-end;height:0;font-size:11.5px;line-height:0;color:#a3a3a3}
.dx-ys span::before{content:"";position:absolute;left:0;right:44px;top:0;border-top:1px dashed #ececec}
.dx-bc{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.dx-bt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;width:26px;height:calc(100% - 26px);border-radius:6px;background:#f5f5f5;overflow:hidden}
.dx-bt i{display:block;width:100%;border-radius:4px;transform-origin:bottom;transform:scaleY(0);
         transition:transform .9s var(--ease-snap);transition-delay:calc(var(--k) * 40ms)}
.dx-bt i.a{height:calc(var(--a) * 1%);background:var(--acc)}
.dx-bt i.p{height:calc(var(--p) * 1%);background:#b5dcc9;transition-delay:calc(var(--k) * 40ms + 120ms)}
.is-grown .dx-bt i{transform:none}
.dx-bc em{font-style:normal;font-size:11.5px;line-height:18px;color:var(--t3)}
.dx-bc.is-now em{color:var(--t1);font-weight:500}
.dx-bc.is-now .dx-bt{box-shadow:0 0 0 3px #fff,0 0 0 4px #dfeee7}
.dx-tip{position:absolute;top:-30px;left:50%;transform:translate(-50%,6px);opacity:0;
        padding:0 7px;border-radius:6px;background:#171717;color:#fff;font-size:11.5px;line-height:22px;font-weight:500;white-space:nowrap;
        transition:opacity .4s var(--ease) .7s,transform .5s var(--ease-snap) .7s}
.dx-tip::after{content:"";position:absolute;left:50%;bottom:-3px;width:6px;height:6px;margin-left:-3px;background:#171717;transform:rotate(45deg);border-radius:1px}
.is-grown .dx-tip{opacity:1;transform:translate(-50%,0)}

/* payments: side card */
.dx-mix{display:flex;gap:2px;height:8px;margin:16px 0 12px;border-radius:4px;overflow:hidden}
.dx-mix i{flex:0 0 calc(var(--w) * 1% - 2px);background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease-snap)}
.dx-mix i:nth-child(2){background:#5fb592;transition-delay:.08s}
.dx-mix i:nth-child(3){background:#b5dcc9;transition-delay:.16s}
.is-grown .dx-mix i{transform:none}
.dx-mixl{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:6px}
.dx-mixl li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t2)}
.dx-mixl li i{width:8px;height:8px;border-radius:2px;background:var(--acc)}
.dx-mixl li:nth-child(2) i{background:#5fb592}
.dx-mixl li:nth-child(3) i{background:#b5dcc9}
.dx-mixl b{margin-left:auto;font-weight:500;color:var(--t1);font-variant-numeric:tabular-nums}
.dx-send{display:flex;flex-direction:column;gap:9px;margin-top:4px;padding:11px 12px 12px;border-radius:10px;background:var(--fill)}
.dx-send-t{display:flex;align-items:center;justify-content:space-between}
.dx-send-t b{display:flex;align-items:center;gap:7px;font-weight:500}
.dx-send-t em{font-style:normal;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.dx-send.is-done .dx-send-t b{color:#0b6b47}
.dx-send.is-done .dx-send-t b::before{content:"";width:16px;height:16px;border-radius:50%;
   background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.6 8.3 2.3 2.3 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
   animation:dx-pop .5s var(--ease-snap)}
.dx-prog{height:4px;border-radius:2px;background:#e6e6e6;overflow:hidden}
.dx-prog i{display:block;height:100%;border-radius:inherit;background:var(--acc);transform-origin:left;transform:scaleX(0);transition:transform 2.2s cubic-bezier(.45,.05,.3,1)}

/* cursor: two wrappers, two easings → an arc */
.dx-cx{position:absolute;left:0;top:0;z-index:20;pointer-events:none;opacity:0;transition:transform 1.3s cubic-bezier(.55,0,.25,1),opacity .35s var(--ease)}
.dx-cy{display:block;transition:transform 1.3s cubic-bezier(.15,.65,.25,1)}
.dx-cursor{display:block;margin:-2px 0 0 -4px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.18))}
.dx.cur-on .dx-cx{opacity:1}

/* toast: the approval one carries the approver's face */
.stage .toast{top:-22px;right:28px;left:auto}
.t-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;transform:none;vertical-align:0;
       box-shadow:0 0 0 1px rgba(98,222,174,.75),0 0 0 3px rgba(63,207,155,.14),0 0 14px 1px rgba(63,207,155,.3),0 8px 14px -8px rgba(13,92,69,.5)}
.toast[data-phase="pay"] [data-t="pay"]{opacity:1;transform:none;filter:none;transition-delay:.1s}
.toast[data-phase] .toast-i{transition-delay:0s}
.toast-av{position:relative;flex:none;width:34px;height:34px}
.toast-av img{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.toast-av i{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--ok,#1fc16b);box-shadow:0 0 0 2px #fff}
.toast-av svg{width:12px;height:12px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* entrance with the stage */
.js .fx{opacity:0}
.is-loaded .fx{animation:fx-in 1s var(--ease) .6s both}
@keyframes fx-in{from{opacity:0}to{opacity:1}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .dx-in{grid-template-columns:minmax(0,1fr)}
  .dx-sb{display:none}
  .dx-search{display:none}
}
@media (max-width:860px){
  .fx{margin-top:40px}
  .fx-c{padding:20px 18px 22px}
  .fx-d{display:none}
  .fx-h{font-size:15px;gap:10px}
  .dx-grid{grid-template-columns:minmax(0,1fr)}
  .dx-side{display:none}
}
@media (max-width:600px){
  .fx{margin-top:32px}
  .fx-c{align-items:center;padding:18px 6px 16px}
  .fx-h{flex-direction:column;gap:8px;font-size:13px;line-height:18px}
  .fx-ico{width:30px;height:30px}
  .dx-hd{height:60px;padding:0 16px}
  .dx-avs,.dx-bell{display:none}
  .dx-views{padding:14px 14px 20px}
  .dx-kpis{grid-template-columns:minmax(0,1fr)}
  .dx-k:not(:first-child){display:none}
  .dx-th,.dx-tr,.dx-tbl-ap .dx-th,.dx-tbl-ap .dx-tr{grid-template-columns:minmax(0,1fr) auto;padding:0 8px}
  .dx-th > :nth-child(2),.dx-tr > :nth-child(2),.dx-th > :nth-child(4),.dx-tr > :nth-child(4){display:none}
  .dx-bars{padding-right:40px;height:200px}
  .dx-bt{width:18px}
}
@media (prefers-reduced-motion:reduce){
  .js .fx{opacity:1}
}

/* the product's bottom dissolves into the page white: gradient wash + a blur that ramps in */
.showcase{padding-top:56px}
.showcase .stage{margin-bottom:-14px}
#hero .showcase-fade{display:block;height:180px;z-index:4;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.92) 78%,#fff 100%);
  -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 35%,#000 70%);mask:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.6) 35%,#000 70%)}

/* payments: what goes out next, running on under the fade */
.dx-next{margin-top:12px;padding-top:12px;border-top:1px solid var(--line-2)}
.dx-next-h{display:block;font-size:12px;line-height:16px;color:var(--t3);margin-bottom:2px}
.dx-nr{display:grid;grid-template-columns:minmax(0,1fr) 110px 96px;align-items:center;gap:12px;height:54px;border-bottom:1px solid var(--line-2)}
.dx-nr:last-child{border-bottom:0}
.dx-nd{font-size:12.5px;color:var(--t2)}