/* ───── Hero, compact (≤1120px): one centred column that reads top to bottom ─────
   headline → subline → agent prompt → signup → the demo (chips, agent window, Coralogix row)
   → "Trusted by…" → logos. Loaded last, so it wins over the older tablet/phone rules. */
@media (max-width: 1120px) {
  .hero[data-demo] { min-height: 0; zoom: 1 !important; }
  .hero[data-demo] .hero-inner {
    display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; align-content: start;
    text-align: center; padding: clamp(28px, 5vw, 48px) 20px 40px; column-gap: 0; row-gap: 0;
  }
  .hero[data-demo] .hero-left { display: contents; }
  .hero[data-demo] .hero-left > *, .hero[data-demo] .hero-stage { grid-column: 1 !important; grid-row: auto !important; justify-self: center; }
  .hero[data-demo] .hero-title { order: 0; font-size: clamp(36px, 8.4vw, 56px); line-height: 1.04; }
  .hero[data-demo] .hero-powered { order: 1; margin-top: 14px; font-size: clamp(15px, 3.6vw, 18px); }
  .hero[data-demo] .agent-cta { order: 2; width: min(100%, 440px); margin-top: 28px; text-align: left; align-items: stretch; }
  .hero[data-demo] .agent-cta .agent-tab { align-self: flex-start; }
  .hero[data-demo] .hero-stage { order: 4; position: relative; inset: auto !important; left: auto !important; right: auto !important; top: auto; bottom: auto;
    display: block; width: min(100%, 520px); max-width: none; margin: 44px auto 0; }
  .hero[data-demo] :is(.hero-mark, .hero-sub) { display: none !important; }

  /* the use cases: the same quiet chip row as desktop, centred, scrollable if it ever overflows */
  .hero[data-demo] .hero-stage .uc { display: flex; justify-content: center; align-items: center; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 4px; }
  .hero[data-demo] .hero-stage .uc::-webkit-scrollbar { display: none; }
  .hero[data-demo] .hero-stage .uc button { flex: none; display: inline-flex; align-items: center; height: 32px; padding: 0 13px 0 11px; border-radius: 999px; border: 1px solid rgb(var(--ink) / .1); background: transparent; }
  .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); box-shadow: none; }
  .hero[data-demo] .hero-stage .uc :is(.uc-more, .uc-q, .uc-go) { display: none; }
  .hero[data-demo] .hero-stage .uc .uc-k { gap: 7px; font-size: 13px; 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; }

  /* the agent window, full card width */
  .hero[data-demo] .hero-stage .agw { width: 100%; }
  .hero[data-demo] .hero-stage .agw-conv { height: clamp(300px, 62vw, 380px); }
  /* the old slim service panel and its seam give way to the Coralogix row */
  .hero[data-demo] .hero-stage .rt2 > .px:not(.open), .hero[data-demo] .hero-stage .rt2-lbl { display: none !important; }
  .hero[data-demo] .hero-stage .rt2 { order: 0; }
  .hero[data-demo] .hero-stage .cxv-mount { position: static; order: 2; pointer-events: auto; }

  /* Coralogix as one row under the agent window: a short link, the node, the live pill */
  .hero[data-cxv="node"] .cxn { position: relative; inset: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 22px 4px 0; }
  .hero[data-cxv="node"] .cxn::before { content: ""; position: absolute; left: 50%; top: 0; height: 22px; width: 1px; background: linear-gradient(rgb(var(--ink) / .18), rgb(var(--ink) / .08)); }
  .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"])::before { background: linear-gradient(rgba(94,242,176,.5), rgba(94,242,176,.2)); }
  .hero[data-cxv="node"] :is(.cxn-glow, .cxn-wire, .cxn-meta) { display: none; }
  .hero[data-cxv="node"] .cxn-node { position: relative; left: auto; top: auto; grid-row: 1 / span 2; width: 52px; height: 52px; }
  .hero[data-cxv="node"] .cxn-node img { width: 30px; height: 30px; }
  .hero[data-cxv="node"] .cxn-ring { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); }
  .hero[data-cxv="node"] .cxn-word { position: static; width: auto; text-align: left; font-size: 14px; }
  .hero[data-cxv="node"] .cxn-pill { position: relative; left: auto; top: auto; transform: none; margin-top: 6px; max-width: min(400px, calc(100vw - 120px)); height: 34px; }
  .hero[data-cxv="node"] .cxn-track { inset: 0 12px; }
  .hero[data-cxv="node"] .cxn-t { height: 34px; max-width: 100%; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .hero[data-demo] .hero-inner { padding-left: 16px; padding-right: 16px; }
  .hero[data-demo] .hero-stage .uc .uc-k { font-size: 12.5px; }
  .hero[data-demo] .hero-stage .uc button { padding: 0 11px 0 9px; }
  .hero[data-cxv="node"] .cxn-tick { display: none; }
}
@media (max-width: 1120px) {
  /* the Coralogix row sits centred under the agent window, on the line from it */
  .hero[data-cxv="node"] .cxn { grid-template-columns: auto auto; justify-content: center; }
  .hero[data-cxv="node"] .cxn-pill { min-width: 190px; }
  .hero[data-cxv="node"] .cxn-t { max-width: min(366px, calc(100vw - 154px)); } /* the measured width, so the pill grows to fit and the fact ellipsises only on very narrow phones */
}