/* ───── Hero (desktop), stacked: the message on top, then the demo in one wide frame that runs past the fold ─────
   Same order as phones (headline → subline → how to start → the demo). hero-demo.js moves the stage under .hero-inner
   and sizes the frame to the demo's scale; ?hero=split brings back the side-by-side layout. */
@media (min-width: 1121px) {
  .hero[data-layout="stack"] { min-height: 0; }
  .hero[data-layout="stack"] .hero-inner { display: block; flex: none; padding: clamp(72px, 9svh, 104px) 48px 0; } /* air above a calm headline, as on cursor.com */
  .hero[data-layout="stack"] .hero-left {
    display: grid; grid-template-columns: max-content minmax(0, 1fr); justify-content: start; align-items: end; column-gap: 44px; max-width: none; /* the prompt column hugs the card, so the headline spanning both cannot widen the gap to the signup pill */
  }
  .hero[data-layout="stack"] .hero-left > :is(.hero-title, .hero-powered) { grid-column: 1 / -1; }
  .hero[data-layout="stack"] .hero-title { font-size: clamp(40px, 3.3vw, 50px); letter-spacing: -.035em; }
  .hero[data-layout="stack"] .hero-title br { display: none; }
  .hero[data-layout="stack"] .hero-powered { margin-top: 12px; font-size: clamp(16px, 1.2vw, 18px); }
  .hero[data-layout="stack"] .hero-powered span { display: inline; }
  .hero[data-layout="stack"] .hero-left .agent-cta { grid-row: 3; grid-column: 1; justify-self: start; margin-top: 32px; }
  .hero[data-layout="stack"] .agent-prompt { width: auto; gap: 14px; padding-right: 14px; } /* as wide as the command, no wider */
  .hero[data-layout="stack"] .hero-signup { grid-row: 3; grid-column: 2; align-self: end; flex-wrap: nowrap; gap: 24px; margin: 0; }

  /* the frame: one surface holding both sides at work, the agent (left) and Coralogix (right) */
  .hero[data-layout="stack"] .hero-stage {
    position: relative; inset: auto; top: auto; z-index: 3; flex: none; align-items: flex-start; padding-top: 32px;
    width: calc(100% - 96px); max-width: 1344px; margin: 64px auto 0;
    border-radius: 28px; border: 1px solid rgb(var(--ink) / .12);
    background:
      radial-gradient(60% 70% at 72% 18%, rgba(19,233,137,.10), transparent 70%),
      radial-gradient(50% 60% at 20% 30%, rgba(99,102,241,.08), transparent 70%),
      linear-gradient(180deg, rgb(var(--ink) / .045), rgb(var(--ink) / .015));
    box-shadow: inset 0 1px 0 rgb(var(--ink) / .08), 0 40px 120px -40px rgb(0 0 0 / calc(.8 * var(--sh)));
  }
  .hero[data-layout="stack"] .stage-in { transform-origin: top center; }

  /* the two windows fill the frame's design width (1180, see DW_S): agent 540 · link 80 · Coralogix 560 */
  .hero[data-layout="stack"] .rt2 { width: 1180px; }
  .hero[data-layout="stack"] .agw { width: 540px; }
  .hero[data-layout="stack"] .px[data-px="stack"].open { left: 620px; top: 24px; width: 560px; height: 520px; } /* the agent window's top and height */
  .hero[data-layout="stack"] .ps-layers { flex: 1; display: flex; flex-direction: column; }
  .hero[data-layout="stack"] .ps-row { flex: 1; padding-top: 16px; } /* the four layers share the panel's height */
  .hero[data-layout="stack"] .ps-row::before { top: 21px; }
  .hero[data-layout="stack"][data-cxv="node"] .rt2-link { display: block; left: 540px; width: 80px; }
  .hero[data-layout="stack"] .px-x, .hero[data-layout="stack"] .cxv-mount { display: none !important; }
  .hero[data-layout="stack"] .wl-agw { left: 270px; }
  .hero[data-layout="stack"] .hero-stage .wl-px, .hero[data-layout="stack"] .hero-stage:has(.px.open) .wl-px { left: 900px !important; top: 70px !important; } /* on the panel's top edge, like the agent's */
  /* whichever side is working leads; the other rests, still readable */
  .hero[data-layout="stack"] .rt2:is([data-step="ask"], [data-step="answer"]) .px.open { opacity: .62; filter: saturate(.7); }
  .hero[data-layout="stack"] .customers-label { margin-top: 72px; }
}

/* ───── HERO-L1: the hero demo in the light skin ─────
   Solid surfaces instead of frosted glass, no colored haze or neon halos, and a waiting window
   that dims its contents instead of fading the whole panel (which read as "disabled"). Light only:
   every rule is :root[data-theme="light"]-scoped, so the dark skin is unchanged. */
:root[data-theme="light"] .hero[data-demo] .hero-aurora i:nth-child(n+2) { display: none; } /* no sky/indigo blobs */
:root[data-theme="light"] .hero[data-demo] .hero-aurora i:nth-child(1) { opacity: .7; }     /* the mint glow, back at its original strength */
:root[data-theme="light"] .hero[data-layout="stack"] .hero-stage { background: radial-gradient(60% 70% at 72% 18%, rgba(19,233,137,.10), transparent 70%), var(--bg-1); box-shadow: 0 1px 2px rgb(0 0 0 / .04); } /* mint wash kept, indigo dropped */
:root[data-theme="light"] .hero[data-demo] .glass {
  background: #fff; border-color: var(--line);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 24px 60px -30px rgb(0 0 0 / .18);
}
:root[data-theme="light"] .hero[data-demo] .agw { background: #fff; }
/* waiting window: the panel stays opaque, its contents dim (same .6s transition) */
:root[data-theme="light"] .hero[data-demo] .rt2:is([data-step="ask"], [data-step="answer"]) :is(.px, .px.open),
:root[data-theme="light"] .hero[data-demo] .rt2[data-step="query"] .agw { opacity: 1; filter: none; }
:root[data-theme="light"] .hero[data-demo] .rt2 :is(.agw, .px) > * { transition: opacity .6s; }
:root[data-theme="light"] .hero[data-demo] .rt2:is([data-step="ask"], [data-step="answer"]) .px > *,
:root[data-theme="light"] .hero[data-demo] .rt2[data-step="query"] .agw > * { opacity: .7; }
/* active window: a crisp green border and the neutral shadow, no glow */
:root[data-theme="light"] .hero[data-demo] .rt2:is([data-step="ask"], [data-step="answer"]) .agw,
:root[data-theme="light"] .hero[data-demo] .rt2[data-step="query"] .px {
  border-color: rgba(11,158,94,.5);
  box-shadow: 0 1px 2px rgb(0 0 0 / .05), 0 24px 60px -30px rgb(0 0 0 / .18);
}
:root[data-theme="light"] .wl { box-shadow: 0 1px 2px rgb(0 0 0 / .06); }                 /* step label: no green glow */
/* the Coralogix node's halos */
:root[data-theme="light"] .hero[data-cxv="node"] .cxn-glow { opacity: 0; }
:root[data-theme="light"] .hero[data-cxv="node"] .cxn:is([data-state="start"], [data-state="step"], [data-state="ready"]) .cxn-node { box-shadow: inset 0 0 0 1px rgba(11,158,94,.5), 0 14px 30px -16px rgb(0 0 0 / .18); }
:root[data-theme="light"] .hero[data-cxv="node"] :is(.cxn-live, .cxn-dot) { box-shadow: none; }
:root[data-theme="light"] .hero[data-demo] .hero-stage .uc::before { color: var(--fg-3); } /* "Ask it about" */