/* "See it work" on /business/digital/ (demos.js): sample chat and sample dashboard. Prefix .dm-* | kit tokens only | logical properties only | no text under 13px | targets at least 44px.
   Moved from the Home mosaic. Without script, or with reduced motion / data saver, the tiles show their finished still state. */
.dm-trade{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:0 0 var(--s-4);padding:0;border:0}
.dm-chip{min-block-size:44px;min-inline-size:44px;padding:0 14px;border-radius:999px;border:1.5px solid var(--border-strong);background:var(--card);color:var(--ink);font:var(--fw-semibold) var(--fs-15)/1 var(--font-sans);cursor:pointer}
.dm-chip:hover{background:var(--card-2)}
.dm-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.dm-chip:focus-visible,.dm-btn:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.dm-grid{display:grid;gap:var(--s-4);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.dm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dm-card{display:flex;flex-direction:column;gap:var(--s-3);padding:var(--s-4);min-inline-size:0}
.dm-head{display:flex;align-items:center;gap:var(--s-2);flex-wrap:wrap}
.dm-head h3{margin:0;font-size:var(--fs-18)}
.dm-head .badge{padding:0 7px}
.dm-head .badge::before{display:none}
.dm-btn{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;min-block-size:44px;min-inline-size:44px;padding:0 16px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font:var(--fw-semibold) var(--fs-15)/1.1 var(--font-sans);text-align:center;text-decoration:none}
.dm-btn:hover{background:var(--card-2);text-decoration:none}
.dm-chat{display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-block-size:250px;padding:var(--s-3);border-radius:var(--r-md);background:var(--card-2);overflow:hidden}
.dm-b{display:none;margin:0;max-inline-size:90%;padding:6px 10px;border-radius:12px;font:var(--fs-15)/1.35 var(--font-sans);color:var(--ink);overflow-wrap:anywhere}
.dm-b.is-on{display:block}
.dm-play .dm-b.is-on{animation:dm-in .3s ease-out}
.dm-b-c{align-self:flex-start;background:var(--card);border:1px solid var(--border)}
.dm-b-a{align-self:flex-end;background:var(--ok-bg);border:1px solid var(--ok-line)}
.dm-ok{font-weight:var(--fw-semibold)}
.dm-b-n{align-self:center;text-align:center;background:transparent;border:1px dashed var(--border-strong);color:var(--muted)}
.dm-b small{display:block;font-size:13px;font-weight:var(--fw-semibold);color:var(--ok-ink)}
.dm-dash{position:relative;display:flex;flex-direction:column;gap:var(--s-3);min-block-size:250px;overflow:hidden}
.dm-kpis{display:flex;gap:var(--s-5)}
.dm-kpis p{margin:0;display:flex;flex-direction:column}
.dm-n{font:800 32px/1 var(--font-sans);font-variant-numeric:tabular-nums}
.dm-kpis span,.dm-note{font:13px/1.3 var(--font-sans);color:var(--muted);margin:0}
.dm-bars{flex:1;min-block-size:90px;display:flex;align-items:flex-end;gap:5px}
.dm-bars i{flex:1;block-size:var(--h,50%);background:var(--primary);border-radius:4px 4px 0 0;opacity:.85}
.dm-play .dm-bars i{transition:block-size .9s ease}
.dm-new{position:absolute;inset-inline:0;inset-block-end:26px;margin:0;padding:8px 10px;border-radius:12px;background:var(--ok);color:var(--on-solid);font:var(--fw-semibold) 14px/1.3 var(--font-sans);transform:translateY(170%);opacity:0}
.dm-play .dm-new{transition:transform .4s ease,opacity .4s ease}
.dm-new.is-on{transform:none;opacity:1}
@keyframes dm-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dm-play .dm-b.is-on{animation:none}.dm-play .dm-new,.dm-play .dm-bars i{transition:none}}