/* ───── Hero (desktop): headline → subline → how to start; the use cases sit on the demo ───── */
@media (min-width: 1121px) {
  .hero[data-demo] .hero-left { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; max-width: min(480px, var(--lmax, 480px)); } /* never runs under the agent window (see fit) */
  .hero[data-demo] .hero-powered { margin-top: 16px; }

  /* how to start: the prompt, then the signup */
  .hero[data-demo] .hero-left .agent-cta { justify-self: stretch; display: flex; margin-top: 40px; }

  /* the use cases: one slim row of chips on top of the agent window */
  .hero[data-demo] .hero-stage .uc { display: flex; align-items: center; gap: 6px; height: 30px; }
  .hero[data-demo] .hero-stage .uc::before { content: "Ask it about"; margin-right: 6px; font-size: 13.5px; letter-spacing: -.005em; color: rgb(var(--ink) / .42); }
  .hero[data-demo] .hero-stage .uc button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px 0 10px; border-radius: 999px; border: 1px solid rgb(var(--ink) / .1); background: transparent; box-shadow: none; transition: background .3s, border-color .3s; }
  .hero[data-demo] .hero-stage .uc button:hover { background: rgb(var(--ink) / .04); border-color: rgb(var(--ink) / .18); }
  .hero[data-demo] .hero-stage .uc button[aria-selected="true"] { background: color-mix(in srgb, var(--uc) 14%, transparent); border-color: color-mix(in srgb, var(--uc) 50%, transparent); }
  .hero[data-demo] .hero-stage .uc .uc-k { gap: 7px; font-size: 13px; font-weight: 500; color: rgb(var(--ink) / .62); }
  .hero[data-demo] .hero-stage .uc button[aria-selected="true"] .uc-k { color: var(--fg-0); }
  .hero[data-demo] .hero-stage .uc .uc-k i { width: 6px; height: 6px; box-shadow: none; opacity: .85; }
  .hero[data-demo] .hero-stage .uc button[aria-selected="true"] .uc-k i { opacity: 1; box-shadow: 0 0 8px var(--uc); }
  .hero[data-demo] .hero-stage .uc :is(.uc-more, .uc-q, .uc-go) { display: none; }
  .hero[data-demo] .hero-stage .uc [data-cat="incident"] .uc-k > span::after { content: "s"; }

  /* window labels shift down by the chip row (30px + 16px gap) */
  .hero[data-demo] .wl-agw { top: 70px; }
  .hero[data-demo] .wl-px { top: 158px !important; }
  .hero[data-demo] .hero-stage:has(.px.open) .wl-px { top: 108px !important; }
}
@media (min-width: 1121px) {
  .hero[data-demo] .hero-left { container-type: inline-size; }
}
@container (max-width: 380px) { /* small laptops: keep the full install command readable */
  .hero[data-demo] .agent-prompt { font-size: 11.5px; gap: 8px; padding: 11px 12px; letter-spacing: -.02em; }
  .hero[data-demo] .agent-copy { margin-left: 2px; }
}