/* home.css: the home page's own placing and sizing (plan.md, "Home"), with the tokens of design\system.css only. The
   components themselves are in design\components.css. */

/* ---------- hero ---------- */
.hero__slide video, .hero__slide img.kit-first { object-position: 62% 50%; }
/* The handshake's sky is the brightest of the five: toned down to the others' dusk gold. */
.hero__slide:first-child video, .hero__slide:first-child img.kit-first { filter: brightness(.64) saturate(.8) contrast(1.08); }

/* ---------- outcomes ---------- */
.outcomes .leaves--right { opacity: .55; }

/* ---------- compare ---------- */
.compare-part__title { max-width: 24ch; margin-bottom: clamp(24px, 3vw, 36px); }
.compare-part__gold { display: block; }
/* the report stack is at the right of its photo: mirrored, so it shows on the usual agency's side at rest */
.compare .before > img { transform: scaleX(-1); }
/* the job under way (the torch at the joint, the hand feeding the solder) stays right of the line at rest, clear of
   the knob and the cards, at every width */
.compare .after > img { object-position: 50% 45%; }
/* on the phone the frame is narrow and tall, and the flame and the joint would sit behind the cards: the photo is
   enlarged from a point low at the right, which lifts them into the free top half */
@media (max-width: 560px) { .compare .after > img { object-position: 44% 50%; transform: scale(1.5); transform-origin: 74% 88%; } }

/* ---------- close ---------- */
.closing .opener__tag { text-shadow: 0 1px 14px rgb(7 11 11 / .95); }

/* ---------- who ---------- */
.who__title { max-width: 26ch; margin-bottom: clamp(24px, 3vw, 36px); }

/* ---------- faq ---------- */
.faq-part__intro { display: grid; justify-items: start; gap: 18px; }
.faq-part__intro .lede { max-width: 26em; }
@media (min-width: 900px) { .faq-part__intro { position: sticky; top: calc(var(--header-h) + 24px); } }