/* Animated product demos, shared by every page. No screenshots: the UI is drawn and moves. */
@keyframes h-pulse{0%{box-shadow:0 0 0 0 rgba(247,128,31,.55)}70%{box-shadow:0 0 0 9px rgba(247,128,31,0)}100%{box-shadow:0 0 0 0 rgba(247,128,31,0)}}
/* animated module demos (no screenshots) */
.dm{display:grid;grid-template-columns:1.05fr .95fr;gap:14px;align-items:start}
.dm-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;box-shadow:var(--sh-1);font-size:13.5px}
.dm-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.dm-hd b{font-size:14px}
.dm-rank{display:grid;gap:12px}
.dm-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:12.5px;align-items:center}
.dm-row span{grid-column:1}.dm-row b{grid-column:2;grid-row:1/3;font-size:15px;font-family:var(--font-d);text-align:right}
.dm-row i{grid-column:1;display:block;height:6px;border-radius:99px;background:var(--brand);width:0;transition:width 1.2s var(--ease)}
.dm-flow{display:grid;gap:12px}
.dm-ev{display:flex;gap:10px;align-items:center}.dm-ev i{width:30px;height:30px;border-radius:8px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-style:normal;font-weight:700}
.dm-ev b,.dm-ch b{display:block;font-size:13px}.dm-ev s,.dm-ch s{text-decoration:none;color:var(--text-3);font-size:12px}
.dm-fan{display:grid;gap:8px;padding-left:14px;border-left:2px solid var(--line-2);margin-left:14px}
.dm-ch{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:10px;opacity:.35;transform:translateX(-6px);transition:all .4s var(--ease)}
.dm-ch .ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;color:#fff;flex:0 0 auto}.dm-ch .ic svg{width:13px;height:13px}
.dm-ch em{margin-left:auto;font-style:normal;width:20px;height:20px;border-radius:50%;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;font-size:11px;font-weight:700;opacity:0;transform:scale(.6);transition:all .3s var(--ease)}
.dm-ch.on{opacity:1;transform:none}.dm-ch.done em{opacity:1;transform:none}
.dm-out{padding:10px 12px;border-radius:8px;background:var(--alt);font-size:13px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-height:40px;opacity:.5;transition:opacity .4s}.dm-out.on{opacity:1}
.dm-prod{display:grid;grid-template-columns:72px 1fr;gap:12px;font-size:12.5px}
.dm-ph{aspect-ratio:4/5;border-radius:8px;background:#EFEAE4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 250'%3E%3Cpath d='M60 70l25-18h30l25 18 14 40-22 8-3-8v110H71V110l-3 8-22-8z' fill='%23DCD4CB'/%3E%3C/svg%3E") center/70% no-repeat}
.dm-pr .pill{white-space:nowrap}.dm-pr{flex-wrap:wrap}.dm-k{font-size:11px;color:var(--text-3);letter-spacing:.05em;text-transform:uppercase;font-weight:600}.dm-t{display:block;font-size:14.5px;margin:2px 0}.dm-pr{font-size:13.5px;font-weight:600;margin-bottom:10px;display:flex;gap:8px;align-items:center}
.dm-urg{display:flex;align-items:center;gap:6px;padding:7px 9px;white-space:nowrap;border-radius:8px;background:var(--warn-soft);color:var(--warn);font-size:12.5px;font-weight:600;margin-bottom:8px}
.dm-urg i{width:7px;height:7px;border-radius:50%;background:var(--warn);animation:h-pulse 1.8s infinite}
.dm-urg .bar{flex:1;height:5px;border-radius:99px;background:rgba(0,0,0,.08);overflow:hidden}.dm-urg .bar i{display:block;width:100%;height:100%;border-radius:0;animation:none;background:var(--warn);transition:width .9s var(--ease)}
.dm-atc{display:block;text-align:center;padding:10px;border-radius:8px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:600}
.dm-rules{display:grid;gap:6px}
.dm-rule{display:flex;justify-content:space-between;padding:9px 11px;border:1px solid var(--line);border-radius:8px;font-size:12.5px;transition:all .3s}.dm-rule b{font-weight:600}.dm-rule.dim{opacity:.5}
.dm-rule.hit{border-color:var(--warn);background:var(--warn-soft);color:var(--warn)}
.dm-split{display:grid;gap:6px;font-size:12px;margin-bottom:10px}.dm-split div{display:flex;justify-content:space-between;color:var(--text-2)}.dm-split b{color:var(--ink)}
.dm-split .seg{display:flex;height:7px;border-radius:99px;background:var(--alt-2);overflow:hidden}.dm-split .seg i{display:block;height:100%;width:0;transition:width .9s var(--ease)}.dm-dep{background:var(--info)}.dm-bal{background:#A9B8EA}
.dm-tl{position:relative;display:grid;gap:14px;padding-left:26px;margin:4px 0 12px}
.dm-tl .ln{position:absolute;left:7px;top:6px;bottom:6px;width:2px;background:var(--line)}
.dm-tl .mk{position:absolute;left:2px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--info);box-shadow:0 0 0 4px var(--info-soft);transition:top .8s var(--ease)}
.dm-st{opacity:.4;transition:opacity .4s}.dm-st.on{opacity:1}.dm-st b{display:block;font-size:13px}.dm-st s{text-decoration:none;color:var(--text-3);font-size:12px}
.dm-embed{max-width:460px;margin:0 auto}
.dm-tg{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-top:1px solid var(--line-2)}.dm-tg b{display:block;font-size:13.5px}.dm-tg s{text-decoration:none;color:var(--text-3);font-size:12px}
.dm-tg .sw{width:40px;height:24px;border-radius:99px;background:var(--alt-2);position:relative;flex:0 0 auto;transition:background .3s}.dm-tg .sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .3s var(--ease)}
.dm-tg.on .sw{background:var(--ok)}.dm-tg.on .sw::after{left:19px}
.dm-live{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--alt);font-size:13px;font-weight:600;display:flex;gap:8px;align-items:center;opacity:.4;transition:all .4s}.dm-live i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.dm-live.on{opacity:1;background:var(--ok-soft);color:var(--ok)}.dm-live.on i{background:var(--ok);animation:h-pulse 1.8s infinite}
@media(max-width:600px){.dm{grid-template-columns:1fr}}
.dm-stack{grid-template-columns:1fr}
.dm-stack .dm-prod{grid-template-columns:110px 1fr;align-items:center}
.dm-stack .dm-prod .dm-ph{aspect-ratio:1}
.dm-stack .dm-urg{max-width:320px}
.dm-stack .dm-rules{display:grid;grid-template-columns:1fr;gap:6px}
.dm-stack .dm-rule{font-size:13px;padding:10px 12px}

/* layout inside tinted panels */
.dm-one{grid-template-columns:1fr;max-width:440px;margin:0 auto}
.hero-v>.dm,.feat-v>.dm{width:100%;max-width:none}
.hero-v>.dm-one,.feat-v>.dm-one{max-width:440px}
.hero-v .dm-card,.feat-v .dm-card{border:0;box-shadow:0 20px 40px -24px rgba(90,40,10,.3)}
.hero-v.amber,.feat-v.amber{background:linear-gradient(165deg,#FFF7E6,#FFEAC2)}
.hero-v.blue,.feat-v.blue{background:linear-gradient(165deg,#EEF2FF,#DCE5FF)}
.hero-v.green,.feat-v.green{background:linear-gradient(165deg,#E9F8F0,#CDEEDC)}
.dm-cnt .dm-row i{width:0}.dm-cnt.in .dm-row i{width:var(--w)}
.dm.in .dm-row i{width:var(--w)}
/* buttons and states */
.dm-atc.b{background:var(--brand)}.dm-atc.soft{background:var(--alt-2);color:var(--text-3)}
.dm-atc{transition:transform .15s var(--ease),background .3s}.dm-atc.press{transform:scale(.96)}
.dm-urg.ok{background:var(--ok-soft);color:var(--ok)}.dm-urg.ok i{background:var(--ok);animation:none}
.dm-urg.info{background:var(--info-soft);color:var(--info)}.dm-urg.info i{background:var(--info);animation:none}
.dm-urg{transition:background .35s,color .35s}
/* popup */
.dm-popup{transition:all .45s var(--ease)}
.dm-tabs{display:flex;gap:6px;margin-bottom:10px}
.dm-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:7px 4px;border-radius:8px;border:1px solid var(--line);font-size:12px;font-weight:600;color:var(--text-3);transition:all .3s}
.dm-tab svg{width:13px;height:13px}.dm-tab.on{border-color:var(--ink);color:var(--ink);background:var(--alt)}
.dm-in{padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--text-3);min-height:40px;background:#fff;margin-bottom:8px;white-space:nowrap;overflow:hidden}
.dm-in.t{color:var(--ink)}.dm-in.t::after{content:'';display:inline-block;width:1.5px;height:13px;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:dm-blink 1s steps(2) infinite}
.dm-done{display:none;text-align:center;padding:10px 0 4px}.dm-done i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ok-soft);color:var(--ok);margin:0 auto 10px;font-style:normal;font-weight:700}
.dm-done b{display:block;font-size:14px}.dm-done s{text-decoration:none;color:var(--text-3);font-size:12px}
.dm-popup.ok .dm-done{display:block}.dm-popup.ok .dm-form{display:none}
@keyframes dm-blink{to{opacity:0}}
/* segmented control */
.dm-segc{display:flex;background:var(--alt);border-radius:9px;padding:3px;gap:3px;margin-bottom:12px}
.dm-segc span{flex:1;text-align:center;font-size:12px;font-weight:600;padding:6px;border-radius:7px;color:var(--text-3);transition:all .3s}
.dm-segc span.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.dm-bar{height:7px;border-radius:99px;background:var(--alt-2);overflow:hidden;margin:6px 0 8px}.dm-bar i{display:block;height:100%;width:0;background:var(--brand);border-radius:99px;transition:width .9s var(--ease)}
/* key/value tiles */
.dm-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dm-kv div{padding:12px;border-radius:10px;background:var(--alt)}
.dm-kv s{text-decoration:none;font-size:11.5px;color:var(--text-3);display:block;margin-bottom:2px}
.dm-kv b{font-size:19px;font-family:var(--font-d);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dm-kv b.red{color:#B42318}
/* event feed */
.dm-ev i.rm{background:var(--alt-2);color:var(--text-3)}.dm-ev i.info{background:var(--info-soft);color:var(--info)}.dm-ev i.warn{background:var(--warn-soft);color:var(--warn)}
.dm-ev.seq{opacity:.3;transform:translateX(-6px);transition:all .4s var(--ease)}.dm-ev.seq.on{opacity:1;transform:none}
.dm-ev s.dt{margin-left:auto;padding-left:8px}
/* WhatsApp chat */
.dm-chat{background:#E7DFD6;border-radius:14px;padding:14px;display:grid;gap:8px;min-height:150px;align-content:start}
.dm-bub{background:#fff;border-radius:10px 10px 10px 2px;padding:10px 12px;font-size:13px;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.08);opacity:0;transform:translateY(6px);transition:all .4s var(--ease);line-height:1.45}
.dm-bub.on{opacity:1;transform:none}.dm-bub .tk{display:block;text-align:right;font-size:10.5px;color:var(--text-3);margin-top:4px;transition:color .3s}.dm-bub .tk.rd{color:#34B7F1}
.dm-bub a{color:#027EB5;font-weight:600}
.dm-typing{display:inline-flex;gap:4px;padding:11px 12px;background:#fff;border-radius:10px 10px 10px 2px;width:max-content;transition:opacity .3s}.dm-typing.off{opacity:0}
.dm-typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:dm-dot 1.2s infinite}.dm-typing i:nth-child(2){animation-delay:.2s}.dm-typing i:nth-child(3){animation-delay:.4s}
@keyframes dm-dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
.dm-wahd{display:flex;gap:10px;align-items:center;margin-bottom:10px}.dm-wahd i{width:32px;height:32px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:12px}
.dm-wahd b{display:block;font-size:13px}.dm-wahd s{text-decoration:none;color:var(--ok);font-size:11.5px}
/* embed toggles */
.dm-embed .dm-card{padding:18px 20px 4px}

.dm-hd{flex-wrap:wrap;gap:4px 10px}.dm-hd .pill,.dm-hd .small{white-space:nowrap}
.dm-atc{display:flex;align-items:center;justify-content:center;gap:6px}.dm-atc svg{width:14px;height:14px;flex:0 0 auto}
.dm-prod .dm-t{line-height:1.3}
@media(max-width:760px){.hero-v .dm,.feat-v .dm{grid-template-columns:1fr}.hero-v .dm-prod{grid-template-columns:72px 1fr}}