.ax-chat-demos { padding: var(--ax-space-24) var(--ax-space-8); background: var(--ax-bg-page); border-top: 1px solid var(--ax-border); }
.ax-chat-demos__container { max-width: 1280px; margin: 0 auto; }
.ax-chat-demos__heading { max-width: 1000px; margin-bottom: var(--ax-space-12); }
.ax-chat-demos__eyebrow { font-family: var(--ax-font-display); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ax-coral-500); }
.ax-chat-demos h2 { font-family: var(--ax-font-display); font-size: clamp(32px, 4vw, 52px); line-height: 1.08; margin: var(--ax-space-4) 0; }
.ax-chat-demos__lede { color: var(--ax-fg-2); font-size: 17px; line-height: 1.6; max-width: 600px; }
.ax-chat-demos__layout { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 2fr); gap: var(--ax-space-8); align-items: start; }
.ax-chat-demos__tabs { display: flex; flex-direction: column; gap: var(--ax-space-2); position: sticky; top: 100px; }
.ax-chat-demos__tab { display: flex; gap: var(--ax-space-4); align-items: center; width: 100%; padding: var(--ax-space-4); border: 1px solid var(--ax-border); border-radius: var(--ax-radius-md); background: var(--ax-bg-card); color: var(--ax-fg-1); font: 500 15px var(--ax-font-body); text-align: left; cursor: pointer; text-decoration: none; }
.ax-chat-demos__number { color: var(--ax-fg-3); font: 12px var(--ax-font-mono); }
.ax-chat-demos__tab:hover { border-color: var(--ax-coral-500); }
.ax-chat-demos__tab[aria-selected="true"] { background: var(--ax-bg-inverse); color: var(--ax-paper); border-color: var(--ax-bg-inverse); }
.ax-chat-demos__tab[aria-selected="true"] .ax-chat-demos__number { color: var(--ax-coral-300); }
.ax-chat-demos :focus-visible { outline: 2px solid var(--ax-coral-500); outline-offset: 4px; }
.ax-chat-demos__panel { min-width: 0; margin-bottom: var(--ax-space-8); }
.ax-chat-demos__panel[hidden] { display: none; }
.ax-chat-demos__figure { margin: 0; border: 1px solid var(--ax-border); border-radius: var(--ax-radius-lg); overflow: hidden; background: var(--ax-bg-card); }
.ax-chat-demos__image-link { display: block; overflow: hidden; }
.ax-chat-demos__image { display: block; width: 100%; height: auto; }
.ax-chat-demos__caption { padding: var(--ax-space-6); border-top: 1px solid var(--ax-border); }
.ax-chat-demos__caption h3 { margin: 0 0 var(--ax-space-2); font-size: 22px; line-height: 1.25; }
.ax-chat-demos__caption p { margin: 0 0 var(--ax-space-4); color: var(--ax-fg-2); line-height: 1.6; }
.ax-chat-demos__full-size { color: var(--ax-fg-1); font-size: 14px; text-underline-offset: 4px; }
.ax-chat-demos__transcript { margin-top: var(--ax-space-4); font-size: 14px; }
.ax-chat-demos__transcript summary { cursor: pointer; font-weight: 600; }
.ax-chat-demos__transcript p { margin: var(--ax-space-3) 0; color: var(--ax-fg-1); }
.ax-chat-demos__note { margin: var(--ax-space-6) 0 0; color: var(--ax-fg-2); font-size: 13px; line-height: 1.6; }
@media (max-width: 760px) {
  .ax-chat-demos { padding: var(--ax-space-16) var(--ax-space-4); }
  .ax-chat-demos__heading { margin-bottom: var(--ax-space-6); }
  .ax-chat-demos__layout { grid-template-columns: minmax(0, 1fr); gap: var(--ax-space-6); }
  .ax-chat-demos__tabs { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax-chat-demos__tab { padding: var(--ax-space-3); gap: var(--ax-space-2); font-size: 13px; }
  .ax-chat-demos__image { width: 180%; max-width: none; margin-left: -40%; }
  .ax-chat-demos__caption { padding: var(--ax-space-4); }
}