/* 2026-11-07: "Play in browser" buttons on the homepage CS cards (js/cs-play-links-20261107.js).
   ZP red / PUBLIC deep purple, the same tokens as each card (PUBLIC buttons #7526B4 -> #611E96 keep white text
   readable). Own class names only: the sitewide .sc-action / .copybtn paint rules never match these. */
.csweb-play-row { padding: 0 0 12px; }
.node__ctas + .csweb-play-row, .csweb-play-row + .node__ctas { margin-top: 12px; }
.csweb-play-row--pub { padding: 0 0 14px; }
.csweb-play {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 16px;
  border-radius: 8px; border: 1px solid rgba(255, 255, 255, .14); text-decoration: none; color: #F7FAFF;
  font: 700 14px/1.1 'Chakra Petch', 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--csweb-1), var(--csweb-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 30px -16px var(--csweb-1);
  transition: filter .15s ease, transform .15s ease;
}
.csweb-play:hover { filter: brightness(1.1); color: #fff; }
.csweb-play:focus-visible { outline: 2px solid #F7FAFF; outline-offset: 2px; }
.csweb-play svg { width: 18px; height: 18px; flex: none; }
.csweb-play__t { flex: 1 1 auto; min-width: 0; }
.csweb-play__s {
  flex: none; font: 600 11.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .02em; text-transform: none;
  opacity: .82; white-space: nowrap;
}
.csweb-play--zp { --csweb-1: #E04654; --csweb-2: #B5303C; }
.csweb-play--pub { --csweb-1: #7526B4; --csweb-2: #611E96; }
@media (max-width: 380px) { .csweb-play__s { display: none; } }
@media (prefers-reduced-motion: reduce) { .csweb-play { transition: none; } }