.wf-anim-block--quotes-invoices { box-sizing: border-box; position: relative; }
.wf-anim-block--quotes-invoices *, .wf-anim-block--quotes-invoices *::before, .wf-anim-block--quotes-invoices *::after { box-sizing: inherit; }
.wf-anim-block--quotes-invoices {
  --blue:#2D6BF4;
  --blue-deep:#1E4FCC;
  --blue-soft:#EAF1FE;
  --ink:#15192B;
  --ink-2:#3A4156;
  --muted:#6B7385;
  --line:#E4E8F0;
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --green:#21A45D;
  --green-deep:#178A4C;
  --green-soft:#E6F6EC;
  --amber:#B7791F;
  --amber-soft:#FBF0D9;
  --chrome:#101319;
  --lime:#C6F432;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(21,25,43,.06), 0 2px 8px rgba(21,25,43,.05);
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Hanken Grotesk",sans-serif;
}@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}




.wf-anim-block--quotes-invoices .appbar {display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 24px 8px}.wf-anim-block--quotes-invoices .appbar h2 {font-family:var(--font-display);font-weight:700;font-size:20px;color:#0B3B8C}.wf-anim-block--quotes-invoices .appbar .meta {margin-left:auto;display:flex;gap:22px;font-size:13.5px;color:var(--ink-2)}.wf-anim-block--quotes-invoices .appbar .meta b {font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}.wf-anim-block--quotes-invoices .appbar .new-btn {
  background:var(--blue);color:#fff;font-weight:600;font-size:13.5px;
  border:none;border-radius:9px;padding:9px 16px;font-family:var(--font-body);
  box-shadow:0 2px 6px rgba(45,107,244,.35);
}

/* ---------- Canvas ---------- */
.wf-anim-block--quotes-invoices .board-scroll {overflow-x:auto;overflow-y:hidden}.wf-anim-block--quotes-invoices .canvas {
  position:relative;
  display:grid;
  grid-template-columns:256px 348px 264px;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  padding:40px 36px 40px;
  min-width:1080px;
  min-height:550px;
}.wf-anim-block--quotes-invoices .lane-label {
  position:absolute;top:18px;font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------- Left: deal card ---------- */
.wf-anim-block--quotes-invoices .deal-wrap {position:relative;z-index:2}.wf-anim-block--quotes-invoices .deal-card {
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 17px;box-shadow:var(--shadow-sm);
  opacity:0;transform:scale(.85) translateY(16px);
}.wf-anim-block--quotes-invoices .deal-card.in {transition:opacity .5s,transform .6s cubic-bezier(.34,1.56,.64,1);opacity:1;transform:none}.wf-anim-block--quotes-invoices .dc-top {display:flex;align-items:center;gap:11px}.wf-anim-block--quotes-invoices .dc-avatar {
  width:36px;height:36px;border-radius:10px;flex:none;color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}.wf-anim-block--quotes-invoices .dc-name {font-size:15px;font-weight:700;line-height:1.15}.wf-anim-block--quotes-invoices .dc-co {font-size:12.5px;color:var(--muted)}.wf-anim-block--quotes-invoices .dc-row {display:flex;align-items:center;margin-top:13px}.wf-anim-block--quotes-invoices .dc-val {font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}.wf-anim-block--quotes-invoices .dc-stage {
  margin-left:auto;font-size:11px;font-weight:700;
  background:var(--amber-soft);color:var(--amber);
  border-radius:999px;padding:4px 10px;
}.wf-anim-block--quotes-invoices .dc-items {font-size:12.5px;color:var(--muted);margin-top:10px;padding-top:11px;border-top:1px dashed var(--line)}.wf-anim-block--quotes-invoices .gen-btn {
  margin-top:14px;width:100%;
  background:var(--blue);color:#fff;font-weight:700;font-size:13.5px;
  border:none;border-radius:10px;padding:12px 14px;font-family:var(--font-body);
  box-shadow:0 2px 8px rgba(45,107,244,.35);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  transition:transform .15s, background .35s, box-shadow .35s, color .35s;
}.wf-anim-block--quotes-invoices .gen-btn.press {transform:scale(.95)}.wf-anim-block--quotes-invoices .gen-btn.linked {background:var(--green-soft);color:var(--green-deep);box-shadow:none}.wf-anim-block--quotes-invoices .ripple {
  position:absolute;border-radius:50%;background:rgba(255,255,255,.55);
  transform:scale(0);animation:rip .55s ease-out 1;pointer-events:none;
}
@keyframes rip{to{transform:scale(3);opacity:0}}

/* ---------- Center: document ---------- */
.wf-anim-block--quotes-invoices .doc-wrap {position:relative;z-index:2;display:flex;justify-content:center}.wf-anim-block--quotes-invoices .doc {
  width:348px;background:#fff;border:1px solid var(--line);
  border-left:4px solid var(--blue);border-radius:14px;
  box-shadow:0 22px 56px rgba(21,25,43,.14), 0 4px 14px rgba(21,25,43,.07);
  padding:20px 22px 18px;position:relative;
  opacity:0;transform:translateY(26px) scale(.96);
  transition:border-color .5s;
}.wf-anim-block--quotes-invoices .doc.in {transition:opacity .55s,transform .6s cubic-bezier(.34,1.56,.64,1),border-color .5s;opacity:1;transform:none}.wf-anim-block--quotes-invoices .doc.invoice {border-left-color:var(--green)}.wf-anim-block--quotes-invoices .doc.pulse {animation:docPulse 1s ease-out 1}@keyframes docPulse{0%{box-shadow:0 0 0 0 rgba(33,164,93,.4),0 22px 56px rgba(21,25,43,.14)}100%{box-shadow:0 0 0 24px rgba(33,164,93,0),0 22px 56px rgba(21,25,43,.14)}}

.wf-anim-block--quotes-invoices .d-head {display:flex;align-items:flex-start;gap:10px}.wf-anim-block--quotes-invoices .d-brand {display:flex;align-items:center;gap:8px}.wf-anim-block--quotes-invoices .d-logo {
  width:26px;height:26px;border-radius:7px;background:var(--chrome);
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;
}.wf-anim-block--quotes-invoices .d-brand span {font-family:var(--font-display);font-weight:700;font-size:14px}.wf-anim-block--quotes-invoices .d-id {margin-left:auto;text-align:right;perspective:400px}.wf-anim-block--quotes-invoices .d-flip {transform-style:preserve-3d}.wf-anim-block--quotes-invoices .d-type {
  font-family:var(--font-display);font-weight:800;font-size:16px;letter-spacing:.06em;
  color:var(--blue);transition:color .4s;
}.wf-anim-block--quotes-invoices .doc.invoice .d-type {color:var(--green-deep)}.wf-anim-block--quotes-invoices .d-num {font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:1px}.wf-anim-block--quotes-invoices .d-meta {display:flex;align-items:center;gap:8px;margin-top:14px}.wf-anim-block--quotes-invoices .d-billto {font-size:12px;color:var(--ink-2)}.wf-anim-block--quotes-invoices .d-billto b {font-weight:700;color:var(--ink)}.wf-anim-block--quotes-invoices .pill {
  margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-radius:999px;padding:4px 10px;
  background:#EEF1F6;color:var(--muted);
  transition:background .35s,color .35s;
}.wf-anim-block--quotes-invoices .pill.sent {background:var(--blue-soft);color:var(--blue-deep)}.wf-anim-block--quotes-invoices .pill.accepted {background:var(--green-soft);color:var(--green)}.wf-anim-block--quotes-invoices .pill.invoiced {background:var(--green);color:#fff}.wf-anim-block--quotes-invoices .d-items {margin-top:14px;border-top:1px solid var(--line)}.wf-anim-block--quotes-invoices .d-item {
  display:flex;align-items:baseline;gap:10px;
  padding:9px 0;border-bottom:1px dashed var(--line);
  opacity:0;transform:translateX(-12px);
}.wf-anim-block--quotes-invoices .d-item.in {transition:opacity .4s,transform .45s cubic-bezier(.34,1.56,.64,1);opacity:1;transform:none}.wf-anim-block--quotes-invoices .di-name {font-size:12.5px;font-weight:600}.wf-anim-block--quotes-invoices .di-sub {font-size:10.5px;color:var(--muted);margin-top:1px}.wf-anim-block--quotes-invoices .di-amt {margin-left:auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}.wf-anim-block--quotes-invoices .d-totals {margin-top:11px}.wf-anim-block--quotes-invoices .d-trow {display:flex;font-size:12px;color:var(--ink-2);padding:2px 0}.wf-anim-block--quotes-invoices .d-trow b {margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}.wf-anim-block--quotes-invoices .d-due {
  display:flex;align-items:baseline;margin-top:7px;padding-top:9px;border-top:2px solid var(--ink);
}.wf-anim-block--quotes-invoices .d-due .l {font-size:12.5px;font-weight:800;letter-spacing:.02em}.wf-anim-block--quotes-invoices .d-due .v {
  margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:21px;
  font-variant-numeric:tabular-nums;
}.wf-anim-block--quotes-invoices .d-micro {font-size:10px;color:var(--muted);margin-top:5px}.wf-anim-block--quotes-invoices .d-sign {margin-top:13px;display:flex;align-items:flex-end;gap:10px}.wf-anim-block--quotes-invoices .sig-box {flex:1}.wf-anim-block--quotes-invoices .sig-svg {display:block;width:120px;height:30px;overflow:visible}.wf-anim-block--quotes-invoices .sig-svg path {fill:none;stroke:var(--blue-deep);stroke-width:2;stroke-linecap:round}.wf-anim-block--quotes-invoices .sig-line {border-bottom:1px solid var(--ink-2);margin-top:-4px}.wf-anim-block--quotes-invoices .sig-cap {font-size:9.5px;color:var(--muted);margin-top:4px}.wf-anim-block--quotes-invoices .d-stamp {
  font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green);border:1.5px solid var(--green);border-radius:6px;padding:3px 7px;
  transform:rotate(-6deg);opacity:0;transition:opacity .35s, transform .45s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--quotes-invoices .d-stamp.show {opacity:1;transform:rotate(-6deg) scale(1)}.wf-anim-block--quotes-invoices .plane {
  position:absolute;top:18px;right:20px;color:var(--blue);opacity:0;pointer-events:none;
}

/* ---------- Right: timeline panel ---------- */
.wf-anim-block--quotes-invoices .side {z-index:2}.wf-anim-block--quotes-invoices .linked {
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:10px 13px;box-shadow:var(--shadow-sm);
  font-size:12.5px;font-weight:600;color:var(--ink-2);
}.wf-anim-block--quotes-invoices .linked .lk-ic {
  width:26px;height:26px;border-radius:8px;flex:none;
  background:var(--blue-soft);color:var(--blue-deep);
  display:flex;align-items:center;justify-content:center;
}.wf-anim-block--quotes-invoices .linked b {color:var(--ink);font-variant-numeric:tabular-nums}.wf-anim-block--quotes-invoices .timeline {
  margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:16px 16px 10px;box-shadow:var(--shadow-sm);
}.wf-anim-block--quotes-invoices .tl-title {font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.wf-anim-block--quotes-invoices .step {display:flex;gap:11px}.wf-anim-block--quotes-invoices .s-rail {display:flex;flex-direction:column;align-items:center;width:22px;flex:none}.wf-anim-block--quotes-invoices .s-dot {
  width:22px;height:22px;border-radius:50%;flex:none;
  border:2px solid var(--line);background:#fff;color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .35s,border-color .35s,transform .35s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--quotes-invoices .s-dot svg {opacity:0;transition:opacity .25s}.wf-anim-block--quotes-invoices .step.done .s-dot {background:var(--green);border-color:var(--green);transform:scale(1.08)}.wf-anim-block--quotes-invoices .step.done .s-dot svg {opacity:1}.wf-anim-block--quotes-invoices .s-bar {width:2px;flex:1;min-height:18px;background:var(--line);margin:3px 0;position:relative;overflow:hidden}.wf-anim-block--quotes-invoices .s-bar i {position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:top;transition:transform .45s ease}.wf-anim-block--quotes-invoices .step.filled .s-bar i {transform:scaleY(1)}.wf-anim-block--quotes-invoices .s-body {padding-bottom:16px}.wf-anim-block--quotes-invoices .s-t {font-size:13px;font-weight:700;color:var(--muted);transition:color .3s}.wf-anim-block--quotes-invoices .step.done .s-t {color:var(--ink)}.wf-anim-block--quotes-invoices .s-sub {font-size:11px;color:var(--muted);margin-top:2px;min-height:14px;opacity:0;transition:opacity .35s}.wf-anim-block--quotes-invoices .step.done .s-sub {opacity:1}.wf-anim-block--quotes-invoices .convert-btn {
  margin-top:14px;width:100%;
  background:var(--green);color:#fff;font-weight:700;font-size:13.5px;
  border:none;border-radius:10px;padding:12px 14px;font-family:var(--font-body);
  box-shadow:0 2px 8px rgba(33,164,93,.35);
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
  transition:transform .15s, opacity .35s;
}.wf-anim-block--quotes-invoices .convert-btn.off {opacity:.4;filter:saturate(.4)}.wf-anim-block--quotes-invoices .convert-btn.press {transform:scale(.95)}

/* ---------- Cursor ---------- */
.wf-anim-block--quotes-invoices .cursor {
  position:absolute;left:0;top:0;z-index:20;opacity:0;pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(21,25,43,.35));
  transition:opacity .3s;
}.wf-anim-block--quotes-invoices .cursor.click {animation:curClick .28s ease-out 1}
@keyframes curClick{0%{scale:1}40%{scale:.82}100%{scale:1}}

/* ---------- Toast ---------- */
.wf-anim-block--quotes-invoices .toast {
  position:absolute;top:60px;right:22px;z-index:9;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--green);
  border-radius:12px;box-shadow:0 16px 40px rgba(21,25,43,.18);
  padding:12px 16px 12px 13px;display:flex;align-items:center;gap:11px;
  opacity:0;transform:translateX(40px);
  transition:opacity .5s,transform .5s cubic-bezier(.34,1.56,.64,1);
}.wf-anim-block--quotes-invoices .toast.show {opacity:1;transform:translateX(0)}.wf-anim-block--quotes-invoices .t-icon {
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--green-soft);color:var(--green);
  display:flex;align-items:center;justify-content:center;
}.wf-anim-block--quotes-invoices .t-title {font-size:13.5px;font-weight:700}.wf-anim-block--quotes-invoices .t-sub {font-size:12px;color:var(--muted)}.wf-anim-block--quotes-invoices .t-sub b {color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}.wf-anim-block--quotes-invoices .footnote b {color:var(--ink-2)}

@media (max-width:760px){.wf-anim-block--quotes-invoices .page {padding:36px 16px 60px}.wf-anim-block--quotes-invoices .appbar .meta {display:none}
}