/* The home page's own CSS: it only places and sizes its parts (each clip's crop, each card and scene clear of the faces),
   with the tokens of system.css. The components are in components.css. */

/* the header: each field's crop (--pos on a computer, then on the phone) and its card */
.hero__slide--1 { --pos: 71%; }
.hero__slide--2 { --pos: 100%; }
.hero__slide--3 { --pos: 70%; }
.hero__slide--4 { --pos: 57%; }
.hero__slide--5 { --pos: 80%; }
@media (max-width: 899px) {
  .hero__slide--1 { --pos: 81%; }
  .hero__slide--3 { --pos: 62%; }
  .hero__slide--4 { --pos: 50%; }
  .hero__slide--5 { --pos: 70%; }
}

/* how: the phone beside the steps */
.how__device { position: relative; }
.how__device .stop { right: 14px; bottom: 14px; }

/* the free plan: the owner's workplace behind the tour, soft and dark */
.plan .band__bg video { filter: blur(5px) saturate(1.05); transform: scale(1.06); }
.plan .band__bg::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 90%, transparent) 0%, color-mix(in srgb, var(--c-ink) 74%, transparent) 45%, color-mix(in srgb, var(--c-ink) 92%, transparent) 100%); }
.tour__panel > .tour__scene--scan { width: min(100%, 560px); }

/* outcomes: each clip's crop, its demo on the side with no face */
.outcomes .wrap { position: relative; }
.outcomes__stop { top: calc(var(--section-y) * -1 + 18px); right: 0; bottom: auto; }
.outcomes__more { margin-top: 28px; text-align: center; }
.ocard--found .ocard__media video { --pos: 50%; }
.ocard--answer .ocard__media video { --pos: 0%; --pos-m: 35%; }
.ocard--reviews .ocard__media video { --pos: 0%; --pos-m: 0%; }
.ocard--work .ocard__media video { --pos: 0%; --pos-m: 100%; }
.ocard--found .ocard__scene { --scene-w: 62%; }

/* who: each tile's crop */
.tile--home .tile__photo { --pos: 46%; --pos-y: 30%; }
.tile--outdoor .tile__photo { --pos: 50%; --pos-y: 60%; }
.tile--law .tile__photo { --pos: 62%; --pos-y: 25%; }
.tile--health .tile__photo { --pos: 52%; --pos-y: 20%; }
.tile--property .tile__photo { --pos: 50%; --pos-y: 30%; }
.tile--events .tile__photo { --pos: 70%; --pos-y: 40%; }
.who__titan { font-weight: var(--fw-semi); color: var(--c-brand-text); }

/* community: the room on the left, the man on the right; the join story on the left */
.community__media > video { --pos: 0%; --pos-m: 41%; }
.community__scene { position: absolute; left: 4%; top: 7%; bottom: 7%; width: 52%; }
@media (max-width: 899px) { .community__scene { width: 62%; top: 5%; bottom: auto; height: 74%; } }

/* faq: the WhatsApp button under the head */
.faq__intro .head { margin-bottom: var(--space-5); }

/* the close: the man smiling at his phone on the right */
.close .band__bg video { object-position: 60% 30%; }