/* Site v11 home: places the motion in 10F's own sections. Layout is 10F's; only the visuals changed. */
.mo-stage { display: block; margin-inline: auto; }
.v10-mo .mo-wide, .mo-wide { max-width: min(100%, calc((100vh - 390px) * 1.8)); }
.mo-tag--hero { position: absolute; left: max(16px, calc(var(--vw) * 1.4)); top: 92px; z-index: 40; }
.op-on .mo-tag--hero { opacity: 0; }
#m-pair .mo { --mo-bg: #fff; }

/* Works with: S1b. The windows sit straight on the section's own field, so there is no panel, and the still shows only while the transparent loop isn't running. */
.mo-s1b { max-width: min(100%, calc((100vh - 330px) * 1.855)); }
.mo-s1b .mo { --mo-bg: transparent; --mo-r: 0px; }
.mo-s1b .mo-still { transition: opacity .45s ease;
  /* a JPEG can't be transparent, and the field's gradient falls differently at each window size: its outer margin melts away */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 1.8%, #000 98.2%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 94.7%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 1.8%, #000 98.2%, transparent), linear-gradient(to bottom, transparent, #000 2.5%, #000 94.7%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.mo-s1b .mo.is-live:not(.is-resting) .mo-still { opacity: 0; }

/* F1 Three screens, between the founder's story and "Why not just use Typeform". No field: three phones on the page's own white.
   The piece decides its layout by its own width (1020 and up: all three screens; under that: one on a track), and the box
   follows the same line, so nothing moves when the frame arrives. */
.v10g-flow { position: relative; margin-top: max(72px, calc(var(--vw) * 6)); container-type: inline-size; }
.v10g-flow + .v10d-ex { margin-top: max(72px, calc(var(--vw) * 6.5)); }
.v10g-flow .mo { --mo-bg: #fff; --mo-r: 0px; }
.v10g-flow .v9e-pp { right: 0; bottom: 8px; background: #F4F1F7; }
@container (max-width: 1199px) { .v10g-flow .mo { aspect-ratio: auto; height: 660px; } }
@container (max-width: 1019px) { .v10g-flow .mo { height: 600px; } }
/* On a phone it runs edge to edge, so the screens on either side show at the page's edges. */
@media (max-width: 600px) { .v10g-flow { margin-inline: calc(var(--gut) * -1); } .v10g-flow .v9e-pp { right: var(--gut); } }
@media (min-width: 601px) and (max-width: 1067px) { .v10g-flow .mo-stage { max-width: 720px; } }