/* Editorial direction for the Workflow proof and the later audience/closer. */

:is(#marketing-v5, .uses-site-flip-viewport-portal) {
  --editorial-beat-span: 105vh; --editorial-beat-span: 105svh;
  --editorial-stage-top: 31vh; --editorial-stage-top: 31svh;
  --editorial-stage-gap: clamp(132px, 10vw, 176px);
  --editorial-stage-width: min(1400px, calc(100vw - 120px));
  --editorial-audience-offset: 24px;
  --editorial-closer-offset: 24px;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) #workflow,
:is(#marketing-v5, .uses-site-flip-viewport-portal) #audience,
:is(#marketing-v5, .uses-site-flip-viewport-portal) #closer {
  overflow-x: clip;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) #workflow {
  display: block;
  min-block-size: calc(5 * var(--editorial-beat-span));
  padding: 0;
}

/* One extra screen holds the completed pair before it leaves in normal flow. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) #where {
  display: block;
  min-block-size: 120vh; min-block-size: 120svh;
  padding: 0;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-full-copy {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-workflow {
  width: var(--editorial-stage-width);
  margin-inline: auto;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat {
  display: grid;
  min-block-size: var(--editorial-beat-span);
  align-content: start;
  padding-block-start: 15.5vh; padding-block-start: 15.5svh;
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat .editorial-visual {
  position: relative;
  top: calc(
    var(--editorial-pin, 0) * var(--editorial-beat-span)
    + var(--editorial-hold-y, 0px)
  );
  opacity: 0;
  filter: none;
  pointer-events: none;
  transform: none;
  clip-path: inset(-8% 100% -8% -2%);
  transform-origin: 0 50%;
  transition:
    opacity .35s ease,
    clip-path .95s cubic-bezier(.22, .65, .2, 1);
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat[data-editorial-phase="active"] .editorial-visual {
  opacity: 1;
  filter: blur(0);
  transform: none;
  clip-path: inset(-8% -2% -8% -2%);
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat[data-editorial-phase="after"] .editorial-visual {
  opacity: 0;
  filter: none;
  transform: none;
  clip-path: inset(-8% -2% -8% -2%);
  transition-duration: .35s, 0s;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat .editorial-visual {
  display: block;
  width: min(100%, 1100px);
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(34px, 3.65vw, 58px);
  font-weight: var(--bb-weight-display);
  line-height: 1.02;
  letter-spacing: var(--bb-tracking-display);
  text-wrap: balance;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat:not(.editorial-beat--converge) [data-editorial-fragment] {
  display: inline-block;
  color: var(--bb-white);
  opacity: 1;
}

/* A light curtain reveals complete lines in place, never moving the glyphs. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat--converge {
  align-content: center;
  justify-items: center;
  padding-block: 0;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat--converge .editorial-visual {
  display: grid;
  width: min(94vw, 1320px);
  justify-items: center;
  gap: 0.08em;
  text-align: center;
  font-size: clamp(60px, 7.2vw, 116px);
  line-height: 0.94;
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat--converge[data-editorial-phase="active"] .editorial-visual {
  opacity: 1;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat--converge [data-editorial-fragment] {
  display: block;
  opacity: 0;
  filter: none;
  transform: none;
  clip-path: inset(-8% 100% -8% -2%);
  transition:
    opacity .45s ease,
    clip-path 1.1s cubic-bezier(.22, .65, .2, 1);
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat--converge[data-editorial-phase="active"] [data-editorial-fragment] {
  opacity: 1;
  filter: blur(0);
  transform: none;
  clip-path: inset(-8% -2% -8% -2%);
}

#marketing-v5[data-editorial-mounted="true"] .editorial-beat--converge[data-editorial-phase="active"] [data-editorial-fragment="dialogue"] {
  transition-delay: .2s;
}

/* The opening lines own their masks; their parent only fades as one title. */
#marketing-v5[data-editorial-mounted="true"] .editorial-beat--converge .editorial-visual {
  clip-path: none;
}

/* Removing the internal chat labels also removes their otherwise empty row. */
#marketing-v5 .where-browser__page:not(:has(.where-surface-brand)),
#marketing-v5 .where-ai-app__conversation:not(:has(.where-surface-brand)) {
  grid-template-rows: minmax(0, 1fr) auto;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-accent {
  font: inherit;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-accent--3d { color: var(--bb-orange); }
:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-accent--ai { color: var(--bb-cyan); }

/* Cube shares the upper-right headline band instead of competing at centre. */
:is(#marketing-v5, .uses-site-flip-viewport-portal) #workflow > .world-anchor {
  left: 86%;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) #where > .world-anchor { left: 50%; }

/* The arrival stays beside the centred game heading, above the product. */
#marketing-v5 #uses-game > .world-anchor { left: 78%; }

/* Product stage ----------------------------------------------------------- */

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage {
  position: absolute;
  z-index: 1;
  top: calc(var(--editorial-stage-top) + var(--editorial-stage-y, 0px));
  right: 0;
  left: 0;
  pointer-events: none;
}

#marketing-v5[data-editorial-mounted="true"] .editorial-stage {
  opacity: var(--editorial-stage-presence, 0);
  transform: none;
  transform-origin: 50% 10%;
  transition:
    opacity .38s ease,
    transform .52s cubic-bezier(.16, .78, .18, 1);
}

#marketing-v5[data-editorial-mounted="true"] .editorial-stage[data-editorial-stage-visible="true"] {
  opacity: 1;
  transform: none;
}

#marketing-v5[data-editorial-mounted="true"] .editorial-stage[style*="--editorial-stage-presence: 0.0000"] {
  visibility: hidden;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage__pair {
  display: grid;
  width: var(--editorial-stage-width);
  margin-inline: auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--editorial-stage-gap);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage__column {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: 24px auto;
  gap: 14px;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage__label {
  color: var(--bb-white);
  font-size: clamp(14px, 1.06vw, 17px);
  font-weight: var(--bb-weight-bold);
  letter-spacing: -0.01em;
  line-height: 24px;
  text-align: center;
  text-transform: none;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage .proof-slot {
  min-height: 0;
  height: auto;
  aspect-ratio: 1280 / 840;
  grid-template-rows: minmax(0, 1fr);
}

/* Audience --------------------------------------------------------------- */

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(32px, 5vw, 96px);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience__head {
  grid-column: 1 / -1;
  margin-bottom: clamp(18px, 3vh, 44px); margin-bottom: clamp(18px, 3svh, 44px);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience__head h2 {
  max-width: 26ch;
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: var(--bb-weight-display);
  line-height: 1.06;
  letter-spacing: var(--bb-tracking-display);
  opacity: var(--block-progress-in, 1);
  transform: translate3d(0, calc((1 - var(--block-progress-in, 1)) * 24px), 0);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience__label {
  display: block;
  margin-bottom: clamp(12px, 2vh, 22px); margin-bottom: clamp(12px, 2svh, 22px);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--bb-cyan-rgb), var(--bb-line-strong));
  color: var(--bb-cyan);
  font-size: clamp(12px, 1.05vw, 15px);
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-tracking-label);
  text-transform: uppercase;
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience article:last-child .editorial-audience__label {
  border-bottom-color: rgba(var(--bb-orange-rgb), var(--bb-line-strong));
  color: var(--bb-orange);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience article:first-of-type {
  opacity: var(--block-progress-in, 1);
  transform: translate3d(0, calc((1 - var(--block-progress-in, 1)) * 22px), 0);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience article:last-of-type {
  opacity: var(--block-progress-late, 1);
  transform: translate3d(0, calc((1 - var(--block-progress-late, 1)) * 22px), 0);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience .editorial-visual {
  display: grid;
  gap: 0.24em;
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(28px, 3vw, 46px);
  font-weight: var(--bb-weight-display);
  line-height: 1.08;
  letter-spacing: var(--bb-tracking-display);
}

/* Closer ----------------------------------------------------------------- */

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer {
  align-content: center;
  gap: clamp(20px, 3.4vh, 44px); gap: clamp(20px, 3.4svh, 44px);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer::before {
  content: "";
  width: clamp(120px, 22vw, 320px);
  height: 1px;
  background: rgba(var(--bb-cyan-rgb), 0.72);
  opacity: var(--block-progress-in, 1);
  transform: scaleX(var(--block-progress-in, 1));
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer .editorial-visual {
  display: grid;
  max-inline-size: 17ch;
  gap: 0.42em;
  margin: 0;
  color: var(--bb-text-primary);
  font-size: clamp(48px, 7.6vw, 124px);
  font-weight: var(--bb-weight-display);
  line-height: 0.94;
  letter-spacing: var(--bb-tracking-display);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer [data-editorial-fragment="proximity"] {
  opacity: var(--block-progress-in, 1);
  transform: translate3d(calc((var(--editorial-assembly, 1) - 1) * var(--editorial-closer-offset)), calc((1 - var(--block-progress-in, 1)) * 36px), 0);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer [data-editorial-fragment="invitation"] {
  max-inline-size: 26ch;
  justify-self: center;
  font-size: 0.3em;
  line-height: 1.42;
  opacity: var(--block-progress-late, 1);
  transform: translate3d(calc((1 - var(--editorial-assembly, 1)) * var(--editorial-closer-offset)), calc((1 - var(--block-progress-late, 1)) * 22px), 0);
}

:is(#marketing-v5, .uses-site-flip-viewport-portal) #uses-more .uses-capabilities svg {
  max-block-size: none;
  block-size: clamp(280px, 42vh, 460px); block-size: clamp(280px, 42svh, 460px);
}

@media (max-width: 900px) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) {
    --editorial-stage-top: 25vh; --editorial-stage-top: 25svh;
    --editorial-stage-height: 70vh; --editorial-stage-height: 70svh;
    --editorial-stage-width: calc(100vw - 32px);
    --editorial-stage-gap: 14px;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-workflow {
    width: var(--editorial-stage-width);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat .editorial-visual {
    font-size: clamp(30px, 5vw, 44px);
  }
}

@media (max-width: 620px) {
  :is(#marketing-v5, .uses-site-flip-viewport-portal) {
    --editorial-beat-span: 112vh; --editorial-beat-span: 112svh;
    --editorial-stage-top: 24vh; --editorial-stage-top: 24svh;
    --editorial-stage-height: 82vh; --editorial-stage-height: 82svh;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat {
    padding-block-start: 9vh; padding-block-start: 9svh;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat .editorial-visual {
    width: 100%;
    font-size: clamp(28px, 8vw, 38px);
    line-height: 1.04;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-beat--converge .editorial-visual {
    width: calc(100vw - 28px);
    font-size: clamp(48px, 13vw, 72px);
    line-height: 0.97;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage__pair {
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage__label {
    font-size: 11px;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience {
    grid-template-columns: 1fr;
    gap: 18vh; gap: 18svh;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience .editorial-visual {
    font-size: clamp(27px, 8.5vw, 38px);
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer .editorial-visual {
    font-size: clamp(32px, 10vw, 46px);
  }
}

@media (prefers-reduced-motion: reduce) {
  #marketing-v5[data-editorial-mounted="true"] .editorial-beat .editorial-visual {
    /* top is physical counter-translation, not an animated reveal. */
    filter: none !important;
    clip-path: none !important;
    transform: none !important;
    transition: none !important;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) [data-editorial-fragment],
  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-audience article,
  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-closer [data-editorial-fragment] {
    opacity: 1 !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  :is(#marketing-v5, .uses-site-flip-viewport-portal) .editorial-stage {
    /* Preserve the shared Workflow/Where stage's physical hold. */
    transition: none !important;
  }
}

#marketing-v5 #uses-video .marketing-copy {
  width: var(--uses-video-content-width, min(100%, calc(56vh * 2.777778 + 5vw))); width: var(--uses-video-content-width, min(100%, calc(56svh * 2.777778 + 5vw)));
  max-width: none;
  margin-inline: auto;
}
#marketing-v5 #uses-video .marketing-copy h2 {
  max-width: none;
  font-size: clamp(32px, 3.7vw, 58px);
  color: var(--bb-white);
}
@media (min-width: 1100px) {
  #marketing-v5 #uses-video .marketing-copy h2 {
    white-space: nowrap;
  }
}