/* The demos carousel (demos/carousel.js). Uses the site tokens (--ink, --line, --orange…),
   which both index.html and demos/site.css define. */
.cx { position: relative; font-family: var(--sans); }
.cx-track { display: grid; grid-auto-flow: column; grid-auto-columns: min(82%, 340px); gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 10px;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.cx-track::-webkit-scrollbar { display: none; }
.cx-track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 18px; }
@media (min-width: 760px) { .cx-track { grid-auto-columns: calc((100% - 3 * 14px) / 3.4); } }
.cx-card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
  background: #fff; color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.cx-card:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 14px 30px -14px rgba(11, 11, 11, .35); }
.cx-card:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cx-shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--line); }
/* Each screenshot is an 800x500 window (brand/demo-shots.sh), shown slightly zoomed into its
   top-left, where each demo's main content is. */
.cx-shot img { display: block; width: 125%; max-width: none; height: auto; }
.cx-body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 16px; flex: 1; }
.cx-for { font: 600 11px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-text); }
.cx-body b { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.cx-blurb { font: 14.5px/1.5 var(--serif); color: var(--muted); }
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; }
.cx-price { font: 600 12.5px var(--sans); padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.cx-try { font: 600 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.cx-nav { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.cx-count { font-size: 13px; color: var(--muted); min-width: 64px; text-align: center; }
.cx-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; }
.cx-btn:hover:not([disabled]) { border-color: var(--ink); }
.cx-btn[disabled] { opacity: .35; cursor: default; }
.cx-btn:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cx-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .cx-card { transition: none; } .cx-card:hover { transform: none; } }