/* 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: the product window itself, with nothing framing it. It runs off
   the bottom of the stage and fades into the page there. */
.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);
  clip-path: inset(-60px -60px 0 -60px);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.EnterpriseHero .product-hero-stage::after {
  content: "";
  position: absolute;
  inset: auto -60px 0 -60px;
  height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
  z-index: 4;
}
.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 24px 60px -24px rgba(17, 51, 89, 0.28),
    0 8px 24px -12px rgba(17, 51, 89, 0.16);
  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.3, 0.75, 0.25, 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: 9px; height: 9px; 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;
    align-self: flex-start;
    width: calc(100% + 1.5rem);
    max-width: none;
    margin-right: -1.5rem;
    clip-path: inset(-40px 0 -60px -40px);
  }
  .EnterpriseHero .product-hero-stage::after { display: none; }
  .EnterpriseHero .product-hero-tag { font-size: 10.5px; height: 20px; }
}

/* Client logos along the bottom edge of the hero: a caption, then a row of
   marks running edge to edge and fading out at both sides. The stage gives
   up its old bottom margin to them.
   Mounted by product-hero.js with the stage. */
.EnterpriseHero[data-hero-logos] > div {
  --hero-logo-tile-h: 66px;
  --hero-logo-gap: 60px;
  --hero-logo-pad: 26px;
  --hero-logo-caption: 24px;
  padding-top: clamp(84px, 10vh, 108px) !important;
}
.EnterpriseHero[data-hero-logos] .product-hero-stage {
  margin-bottom: clamp(10px, 1.6vh, 16px);
}
.EnterpriseHero .hero-logos {
  flex: 0 0 auto;
  align-self: stretch;
  margin-inline: -1.5rem;
  padding-bottom: var(--hero-logo-pad);
  opacity: 0;
  transition: opacity 600ms ease 120ms;
}
.EnterpriseHero .hero-logos.is-ready { opacity: 1; }
.EnterpriseHero .hero-logos-caption {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: var(--hero-logo-caption);
  margin: 0 0 8px;
  padding-inline: 24px;
  color: #5b6472;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}
.EnterpriseHero .hero-logos-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.EnterpriseHero .hero-logos-track {
  display: flex;
  width: max-content;
  animation: hero-logos-scroll 90s linear infinite;
  will-change: transform;
}
.EnterpriseHero .hero-logos-tile {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--hero-logo-tile-h);
  margin-right: var(--hero-logo-gap);
}
.EnterpriseHero .hero-logos-tile img {
  display: block;
  width: auto;
  height: calc(var(--hero-logo-tile-h) * var(--logo-scale, 0.6));
  object-fit: contain;
  opacity: 0.9;
}
@keyframes hero-logos-scroll { to { transform: translate3d(-50%, 0, 0); } }

/* "Scroll to explore" is retired; the logos close the hero. */
.EnterpriseHero[data-hero-logos] > div > .absolute.right-8 { display: none !important; }

@media (max-height: 780px) and (min-width: 768px) {
  .EnterpriseHero[data-hero-logos] > div {
    --hero-logo-tile-h: 56px;
    --hero-logo-gap: 52px;
    --hero-logo-pad: 18px;
  }
}
@media (max-width: 767px) {
  .EnterpriseHero[data-hero-logos] > div {
    --hero-logo-tile-h: 56px;
    --hero-logo-gap: 40px;
    --hero-logo-pad: 16px;
    --hero-logo-caption: 22px;
    padding-top: calc(var(--announcement-offset, 0px) + 88px) !important;
  }
  .EnterpriseHero[data-hero-logos] .product-hero-stage {
    flex: 0 1 auto;
    min-height: 0;
    margin-bottom: 0;
  }
  .EnterpriseHero .hero-logos { margin-top: auto; padding-top: 16px; }
  .EnterpriseHero .hero-logos-caption { font-size: 13px; margin-bottom: 10px; }
  .EnterpriseHero .hero-logos-track { animation-duration: 70s; }
}

/* "As seen on": the launch coverage, in place of the client marquee that used
   to sit in the dark bridge panel. The exported label and marquee stay in the
   React tree, hidden; this block is an extra sibling. */
.EnterpriseBridge [data-press="ready"] > div:has(> .triangle),
.EnterpriseBridge [data-press="ready"] > .LogoMarquee { display: none !important; }
.EnterpriseBridge .press-strip { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.EnterpriseBridge .press-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.EnterpriseBridge .press-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: hero-logos-scroll 36s linear infinite;
  will-change: transform;
}
.EnterpriseBridge .press-viewport:hover .press-track,
.EnterpriseBridge .press-viewport:focus-within .press-track { animation-play-state: paused; }
.EnterpriseBridge .press-item {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 48px;
  margin-right: 44px;
  opacity: 0.86;
  transition: opacity 200ms ease;
}
.EnterpriseBridge a.press-item:hover,
.EnterpriseBridge a.press-item:focus-visible { opacity: 1; }
.EnterpriseBridge .press-item img { display: block; width: auto; height: var(--press-h, 24px); }
.EnterpriseBridge .press-item img.press-emblem { border-radius: 4px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22); }

@media (prefers-reduced-motion: reduce) {
  .EnterpriseHero .hero-logos { transition: none; }
  .EnterpriseHero .hero-logos-track,
  .EnterpriseBridge .press-track { animation: none; }
  .EnterpriseBridge .press-viewport { overflow-x: auto; }
}