/* ───── Hero signup: one "Sign up now" pill under the agent prompt (Google and email icons: both ways in are on the signup page) ─────
   The one way in on the first fold (Book a demo lives in the nav: "Talk to an expert", and the menu drawer on phones).
   Email signup lives on the signup page itself. */
.hero-powered span { display: block; }

.hero-signup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.hero-signup .su-now { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px 0 18px; border-radius: 999px; background: var(--inv); color: var(--on-inv); font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 6px 18px -8px rgb(0 0 0 / calc(.5 * var(--sh, 1))); transition: transform .2s var(--ease), box-shadow .25s; }
.hero-signup .su-now:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgb(255 255 255 / .2) inset, 0 10px 26px -10px rgb(0 0 0 / calc(.6 * var(--sh, 1))), 0 0 0 4px rgb(var(--ink) / .06); }
.hero-signup .su-now svg { width: 18px; height: 18px; flex: none; }
.hero-signup .su-now:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-theme="light"] .hero-signup .su-now { background: var(--bg); color: var(--fg-0); box-shadow: inset 0 0 0 1px rgb(var(--ink) / .16), 0 6px 18px -12px rgb(0 0 0 / .3); }

@media (min-width: 1121px) {
  .hero[data-demo] .hero-signup { justify-self: start; margin-top: 28px; }
}
/* compact: centred under the prompt */
@media (max-width: 1120px) {
  .hero[data-demo] .hero-signup { order: 3; flex-direction: column; gap: 14px; margin-top: 28px; }
  .hero[data-demo] .customers-label { margin-top: 32px; } /* 72px of air under the demo, as on desktop */
}
@media (max-width: 560px) {
  .hero[data-demo] .hero-title { font-size: clamp(40px, 11.4vw, 56px); line-height: 1.02; }
  .hero[data-demo] .hero-powered { margin-top: 16px; font-size: clamp(15.5px, 4.3vw, 18px); line-height: 1.4; }
  .hero[data-demo] .agent-cta { margin-top: 32px; }
  .hero[data-demo] .hero-signup { margin-top: 26px; }
  .hero[data-demo] .hero-signup .su-now { height: 48px; padding: 0 26px 0 22px; font-size: 15.5px; }
}

/* the subline: the first line in the headline's colour, only the product line in the brand green,
   so the green on the fold belongs to Coralogix */
.hero .hero-powered b { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--fg-0); }
/* "Complete Observability and SIEM" is one phrase and wraps as one. Left to itself the line broke
   after "Observability", which reads as two products. Nowrap makes the break fall before the
   phrase instead; it still fits a 320px screen at the clamp's minimum size. */
.hero .hero-powered b i { font-style: normal; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-theme="light"]) .hero .hero-powered b i { background: none; color: color-mix(in srgb, var(--mint) 80%, #fff); }

/* the customer logos: proof, not a headline; quieter and about a quarter smaller so the signup leads */
.hero .clogo { opacity: .5; transition: opacity .3s var(--ease), color .3s var(--ease); }
@media (min-width: 1121px) {
  .hero .clogo { font-size: 20px; gap: 8px; } .hero .clogo svg { height: 20px; }
  .hero .logo-masterclass svg { height: 23px; } .hero .logo-sophos svg { height: 17px; } .hero .logo-jfrog svg { height: 41px; }
  .hero .logo-ferrari svg { height: 20px; } .hero .logo-tradeweb svg { height: 21px; }
}

/* the two ways in, as a pair of white chips after the label */
.hero-signup .su-icons { margin-left: 2px; } /* chips: .su-ico in styles.css */
.hero-signup .su-now .su-ico svg { width: 15px; height: 15px; }
.hero-signup .su-now { padding: 0 9px 0 22px; }
@media (max-width: 560px) { .hero[data-demo] .hero-signup .su-now { padding: 0 11px 0 26px; } .hero-signup .su-ico { width: 28px; height: 28px; } }

/* the same pill beside the prompt card in the final CTA */
.final-actions { display: flex; align-items: flex-end; justify-content: center; gap: 24px; margin-top: 56px; }
.final-actions .agent-cta { margin-top: 0; min-width: 0; max-width: 100%; }
.final .final-signup { margin-top: 0; flex: none; flex-wrap: nowrap; }
@media (max-width: 1120px) { /* stacked as soon as the prompt and the pill no longer fit side by side */
  .final-actions { flex-direction: column; align-items: center; gap: 28px; }
  .final-actions .agent-cta { width: min(100%, 640px); }
}
@media (max-width: 560px) {
  .final-actions { align-self: stretch; }
  .final .final-signup .su-now { height: 48px; padding: 0 11px 0 26px; font-size: 15.5px; }
}