.growth-experiments-story .selected-case-visual{isolation:isolate;}

.ge-motion-stage{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0;
  pointer-events:none;
}

.ge-motion-figure{
  width:auto;
  height:min(88%,620px);
  aspect-ratio:1;
  margin:0;
  opacity:1;
  contain:layout paint;
  transition:opacity .16s ease;
}

.ge-motion-figure svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
}

.ge-motion-js:not(.ge-motion-ready) .ge-motion-figure{opacity:0;}

.ge-motion-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* The scene is one generated SVG whose elements are driven with native SVG
   transform attributes, so no per-element CSS transform boxes are needed.
   Promotion is requested once, on the figure, rather than on two hundred
   nodes. */
.ge-motion-figure svg{will-change:transform;}

@media (max-width:820px){
  .ge-motion-figure{height:min(92%,520px);}
}

@media (orientation:portrait) and (max-width:700px){
  .ge-motion-figure{contain:layout;}
}

@media (orientation:landscape) and (max-height:520px) and (max-width:1024px){
  .growth-experiments-story{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    height:calc(100dvh - var(--home-sticky-header-height));
  }
  .growth-experiments-story .selected-case-text{
    grid-column:1;
    grid-row:1;
    min-height:100%;
    height:100%;
    padding-block:clamp(14px,4dvh,20px);
    padding-inline:clamp(16px,3vw,24px);
    border:var(--selected-case-divider-size) solid var(--line);
  }
  .growth-experiments-story .selected-case-visual{
    grid-column:2 / 4;
    grid-row:1;
    min-height:100%;
    height:100%;
    margin-top:0;
    border-block:var(--selected-case-divider-size) solid var(--line);
  }
  .growth-experiments-story .selected-case-text::before,
  .growth-experiments-story .selected-case-text::after,
  .growth-experiments-story .selected-case-visual::before,
  .growth-experiments-story .selected-case-visual::after{content:none;}
  .growth-experiments-story .selected-case-number{margin-bottom:clamp(10px,3dvh,18px);}
  .growth-experiments-story .selected-case-title{
    margin-bottom:clamp(8px,2.4dvh,14px);
    font-size:clamp(18px,3.2vw,23px);
    line-height:1.12;
  }
  .growth-experiments-story .selected-case-description{
    font-size:clamp(11px,1.8vw,14px);
    line-height:1.45;
  }
  .ge-motion-stage{padding:0;}
  .ge-motion-figure{
    width:min(94%,calc(100dvh - var(--home-sticky-header-height) - 12px));
    height:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  .ge-motion-figure svg{will-change:auto;}
}
