/* Homepage hero: headline and actions top-left, the product in a framed window
   beneath, three collaborator cursors moving over it. The exported React hero
   keeps its markup (the headline, the CTA, and "Scroll to explore" are the same
   nodes the gates read); this sheet only relays them out and hides the old
   floating cards. The stage is mounted by product-hero.js after hydration. */

.EnterpriseHero .graph { display: none !important; }

.EnterpriseHero > div {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(92px, 11vh, 118px) !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}

/* The copy block stops floating at 34% and becomes the first row. */
.EnterpriseHero > div > div:has(> .HeadlineWithCta) {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  display: block !important;
  width: min(1040px, 100%) !important;
  max-width: 100% !important;
  height: auto !important;
  flex: 0 0 auto;
}

.EnterpriseHero .HeadlineWithCta {
  grid-column: 1 / -1 !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 18px !important;
  padding: 0 !important;
  width: 100% !important;
}

.EnterpriseHero .HeadlineWithCta h1 {
  text-align: left !important;
  max-width: 640px;
  font-size: clamp(1.75rem, 3.15vw, 2.6rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* The reference hero carries the headline and its two actions, nothing else. */
.EnterpriseHero .HeadlineWithCta p { display: none !important; }

.EnterpriseHero .HeadlineWithCta .FlatCta,
.EnterpriseHero .HeadlineWithCta a.FlatCta {
  border-radius: 999px !important;
  height: 44px;
  padding-inline: 4px;
}

.EnterpriseHero .product-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.EnterpriseHero .product-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: #eef2f7;
  color: #0b1220;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms ease;
}
.EnterpriseHero .product-hero-secondary:hover { background: #e3e9f2; }
.EnterpriseHero .product-hero-secondary svg { width: 14px; height: 14px; }

/* The stage: a soft panel that frames the product window and crops it at the
   bottom, so the eye reads "the product, in use" rather than a screenshot. */
.EnterpriseHero .product-hero-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: min(1040px, 100%);
  margin-top: clamp(20px, 3vh, 30px);
  margin-bottom: calc(5vh + 34px);
  border-radius: 18px;
  background:
    radial-gradient(120% 80% at 50% 0%, #f4f7fc 0%, #e9eff8 55%, #e1e9f5 100%);
  box-shadow: inset 0 0 0 1px rgba(17, 51, 89, 0.06);
  overflow: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.EnterpriseHero .product-hero-stage.is-ready { opacity: 1; transform: none; }

.EnterpriseHero .product-hero-window {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 62.5px;
  border-radius: 10px;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(17, 51, 89, 0.12),
    0 30px 60px -30px rgba(17, 51, 89, 0.35),
    0 12px 28px -18px rgba(17, 51, 89, 0.25);
  overflow: hidden;
}

/* The screens of the sequence sit on top of one another; the active one shows. */
.EnterpriseHero .product-hero-window img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 320ms ease;
}
.EnterpriseHero .product-hero-window img.is-active { opacity: 1; }

/* Cursors: the tour's kite pointer with its name tag, one per collaborator.
   Position is a percentage of the screen, moved on a damped curve. */
.EnterpriseHero .product-hero-cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  pointer-events: none;
  will-change: transform;
  transition: transform 1100ms cubic-bezier(0.22, 0.9, 0.24, 1);
}
.EnterpriseHero .product-hero-cursor .product-hero-pointer {
  transform-origin: 3px 2.5px;
  transition: transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.EnterpriseHero .product-hero-cursor.is-pressed .product-hero-pointer { transform: scale(0.78); }
.EnterpriseHero .product-hero-cursor svg { display: block; width: 22px; height: 22px; }
.EnterpriseHero .product-hero-tag {
  position: absolute;
  left: 13px;
  top: 19px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.EnterpriseHero .product-hero-tag .fin-glyph { width: 13px; height: 13px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .EnterpriseHero .product-hero-stage { transition: none; }
  .EnterpriseHero .product-hero-cursor { transition: none; }
}

@media (max-width: 767px) {
  .EnterpriseHero > div { padding-top: calc(var(--announcement-offset, 0px) + 88px) !important; }
  .EnterpriseHero .HeadlineWithCta h1 { max-width: 100%; }
  .EnterpriseHero .product-hero-stage {
    flex: 0 0 auto;
    aspect-ratio: 6 / 5;
    margin-top: 22px;
    margin-bottom: 24px;
    border-radius: 14px;
  }
  .EnterpriseHero .product-hero-tag { font-size: 10.5px; height: 20px; }
}