/* home.css: the home page's own layout (components in design\components.css; tokens in design\system.css). */

/* ---------- hero: full-bleed footage under the site header, the words on the left, one card on the right ---------- */
/* On .hero__media: --text-r is where the words end (the left column, 560px at most), --wr a clip's width when it fits
   the hero's height, --edge the page's content edge, --card-w the card's width. Each slide frames its clip (--x0: where
   the clip starts) from the faces in it (media\taken.json) and names where its card goes (--card-x, --card-y);
   hero-week.js reads them from the slide whose card shows. */
.hero { position: relative; z-index: 2; isolation: isolate; overflow: clip; display: flex; flex-direction: column; min-height: max(680px, min(100svh, 1000px)); background: var(--bg-0); container-type: inline-size; }
.hero__in { position: relative; z-index: 3; flex: 1 0 auto; display: flex; align-items: center; width: min(var(--max-w), 100% - 2 * var(--gutter)); margin: 0 auto; padding: calc(var(--header-h) + 28px) var(--gutter) 40px; pointer-events: none; }
.hero__copy { width: min(560px, 47cqw); pointer-events: auto; }
.hero__title { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--track-display); }
.hero__strong { display: block; color: var(--text); }
.hero__soft { display: block; color: var(--text-muted); }
.hero__lead { margin-top: 20px; max-width: min(520px, 100% - 40px); font-size: var(--fs-lead); line-height: 1.5; color: var(--text-soft); }
.hero .picker { margin-top: 30px; }

.hero__media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-0); container-type: size;
  --edge: max(var(--gutter), (100cqw - var(--max-w)) / 2);
  --text-r: calc(var(--edge) + min(560px, 47cqw));
  --wr: calc(100cqh * 16 / 9);
  --card-w: clamp(300px, 22.5cqw, 340px);
}
.hero__slides { position: absolute; inset: 0; z-index: 0; }
.hero__clip { position: absolute; top: 0; left: var(--x0, 0px); width: max(100cqw - var(--x0, 0px), var(--wr)); aspect-ratio: 16 / 9; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 160px); mask-image: linear-gradient(90deg, transparent 0, #000 160px); }
.hero__slide video { object-position: var(--pos, 50% 50%); }
/* slide 1, hero-1: his head moves within 0.29-0.41 of the clip (chin at 0.33 down), her face within 0.60-0.724 (0.25-0.46
   down), the hands from 0.59 down. He stands just right of the words; she stays inside the right edge where the screen
   is wide enough for her (narrower or taller, she leaves the frame whole). The card sits under his chin, from his
   collar (0.36), clear of her face and above the hands; or, without her, between him and the content edge. */
.hero__slide--1 {
  --x0: calc(var(--text-r) + 75px - 0.3 * var(--wr));
  --card-x: min(var(--x0) + 0.36 * var(--wr), 100cqw - var(--edge) - var(--card-w));
  --card-y: 40cqh;
}
/* slide 2, hero-2: his face at 0.55-0.65 across, 0.20-0.35 down; slide 3, hero-3b: his face at 0.57-0.62, 0.33-0.42.
   Each face just right of the words; the card in the lower right, under the face, on the content edge. */
.hero__slide--2 { --x0: calc(var(--text-r) + 160px - 0.6 * var(--wr)); --card-x: calc(100cqw - var(--edge) - var(--card-w)); --card-y: 62cqh; }
.hero__slide--3 { --x0: calc(var(--text-r) + 110px - 0.595 * var(--wr)); --card-x: calc(100cqw - var(--edge) - var(--card-w)); --card-y: 62cqh; }
@media (max-width: 1274px), (max-aspect-ratio: 31/20) {
  .hero__slide--1 { --x0: max(var(--text-r) + 75px - 0.3 * var(--wr), 100cqw - 0.6 * var(--wr) + 4px); }
}
/* the grade: near-black behind the words, gone a little past them (about 55% at 1440); the site header's band; the foot */
.hero__grade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 11, 21, 0.8) 0, rgba(5, 11, 21, 0.62) 60px, rgba(5, 11, 21, 0.26) 122px, rgba(5, 11, 21, 0) 190px),
    linear-gradient(0deg, var(--bg-0) 0, var(--bg-0) 4%, rgba(5, 11, 21, 0.9) 11%, rgba(5, 11, 21, 0.42) 21%, rgba(5, 11, 21, 0) 33%),
    linear-gradient(90deg, rgba(5, 11, 21, 0.94) 0, rgba(5, 11, 21, 0.9) calc(var(--text-r) - 70px), rgba(5, 11, 21, 0.62) calc(var(--text-r) - 10px), rgba(5, 11, 21, 0.22) calc(var(--text-r) + 50px), rgba(5, 11, 21, 0) calc(var(--text-r) + 115px));
}
.hero__stage { inset: 0; pointer-events: none; }
.hero__stage > .scene { position: absolute; inset: 0; }
.hero__stop { right: var(--edge); bottom: 108px; }

/* the kit's header that changes its picture (kit\kit.md), as it is */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(calc((1 - var(--kit-move, 1)) * 4%)); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; } /* the first picture is simply there */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; } /* the first picture shows before the scripts run */
[data-kit-scene="rotate"] [data-kit-slide] video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); } /* each clip 1 px inside its frame: the first picture stays the largest paint */

/* the counters (Tomer's request): a slim strip along the hero's foot; they tick once as it comes in */
.counters { position: relative; z-index: 3; width: min(var(--max-w), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.counter { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 18px 22px 22px; border-top: 1px solid var(--hair-strong); }
.counter + .counter { border-left: 1px solid var(--hair); }
.counter:first-child { padding-left: 0; }
.counter__value { display: flex; align-items: baseline; gap: 4px; flex: none; margin: 0; }
.counter__num { font: 600 2.125rem/1 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.counter__unit { font: 500 1.125rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--text-soft); }
.counter__num.is-pre { opacity: 0; transform: translateY(10px); }
.counter__num[data-count-pop] { display: inline-block; transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
.counter__label { margin: 0; max-width: 170px; font-size: 0.875rem; line-height: 1.35; color: var(--text-muted); }

@media (max-width: 1199px) and (min-width: 900px) {
  .counter { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 16px; padding-bottom: 18px; }
  .hero__stop { bottom: 132px; }
}
@media (max-width: 899px) {
  /* the phone: the words and the picker, then the footage as a block with its card in the lower left, then the counters */
  .hero { display: block; min-height: 0; padding-top: calc(var(--header-h) + 20px); }
  .hero__in { display: block; width: auto; padding: 0 var(--gutter); }
  .hero__copy { width: auto; max-width: 560px; }
  .hero__lead { max-width: 520px; }
  .hero__media { position: relative; inset: auto; height: clamp(300px, 87.5vw, 600px); margin-top: 28px; --card-w: 264px; }
  .hero__clip { left: 0; width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .hero__slide--1 { --pos: 50% 50%; }
  .hero__slide--2 { --pos: 60% 50%; }
  .hero__slide--3 { --pos: 55% 50%; }
  .hero__slide--1, .hero__slide--2, .hero__slide--3 { --card-x: 14px; --card-y: calc(100cqh - 112px); }
  .hero__grade { background: linear-gradient(180deg, rgba(5, 11, 21, 0.5) 0, rgba(5, 11, 21, 0) 14%), linear-gradient(0deg, var(--bg-0) 0, rgba(5, 11, 21, 0.45) 12%, rgba(5, 11, 21, 0) 30%); }
  .hero__stop { top: 12px; right: 12px; bottom: auto; }
  .counters { width: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 var(--gutter) 8px; }
  .counter { flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 14px 18px; }
  .counter:nth-child(odd) { padding-left: 0; border-left: 0; }
  .counter__num { font-size: 1.625rem; }
  .counter__unit { font-size: 1rem; }
  .counter__label { max-width: none; font-size: 0.8125rem; }
}

/* ---------- compare ---------- */
.compare .compare__img { transform: scaleX(-1); } /* both photos turned, so each side's subject sits in its own half */
.compare .after .compare__img { object-position: 50% 0%; }
@media (max-width: 760px) {
  .compare .before .compare__img { object-position: 100% 50%; }
  .compare .after .compare__img { object-position: 38% 0%; }
}

/* ---------- plan: the cards on the left 56%, his face (0.66 across, upper middle) on the right ---------- */
.plan-stage { position: relative; height: clamp(560px, 48vw, 660px); }
.plan-stage__video { object-position: 50% 40%; transform: scale(1.08); transform-origin: 0% 40%; }
.plan-stage__grade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(5, 11, 21, 0.84) 0%, rgba(5, 11, 21, 0.6) 40%, rgba(5, 11, 21, 0.14) 62%, rgba(5, 11, 21, 0) 78%, rgba(5, 11, 21, 0.2) 100%), linear-gradient(0deg, rgba(5, 11, 21, 0.45), rgba(5, 11, 21, 0) 36%); }
.plan-stage__scene { left: 0; top: 0; bottom: 0; width: max(56%, 660px); }
.plan-stage__scene > .scene { position: absolute; inset: 0; }
@media (max-width: 1199px) {
  .plan-stage__scene { width: min(50%, 540px); }
}
@media (max-width: 899px) {
  /* the phone: the cards stack over the leaves on the clip's left half (no face there) */
  .plan-stage { height: auto; min-height: 600px; }
  .plan-stage__video { object-position: 0% 50%; transform: none; }
  .plan-stage__grade { background: linear-gradient(180deg, rgba(5, 11, 21, 0.3) 0%, rgba(5, 11, 21, 0.6) 55%, rgba(5, 11, 21, 0.84) 100%); }
  .plan-stage__scene { position: relative; top: auto; bottom: auto; left: auto; width: min(420px, calc(100% - 24px)); height: auto; aspect-ratio: 360 / 560; margin: 40px 12px 24px; }
}

/* ---------- outcomes: each scene off its footage's faces ---------- */
.outcome__scene > .scene { width: 100%; }
.outcome [data-scene] { --c-paper: var(--text); --c-ink: var(--bg-1); --c-on-brand: var(--text); --c-line: rgba(196, 210, 232, 0.24); }
.outcome--found [data-scene] { --c-brand: color-mix(in srgb, var(--blue) 72%, var(--bg-0)); --c-brand-text: #A9C6F7; }
.outcome--answer [data-scene] { --c-brand: color-mix(in srgb, var(--good) 78%, var(--bg-0)); }
.outcome--work [data-scene] { --c-brand: var(--good); --c-brand-light: #A8EBC8; --c-brand-dark: color-mix(in srgb, var(--good) 55%, var(--bg-0)); }
/* her phone and hands (the clip is cut at her chin): framed low, so no cut face shows */
.outcome--found .outcome__media video { object-position: 50% 100%; transform: scale(1.3); transform-origin: 50% 100%; }
/* his head moves within x 0.48-0.62 of the clip (it leaves the clip's top when he stands): the frame starts at 0.46 of
   the clip, or as far right as the clip allows, so his head stays in the left part, whole at its sides; the card on the right */
.outcome--answer .outcome__media { container-type: size; }
.outcome--answer .outcome__media video { object-position: max(-81.8cqh, 100%) 50%; }
.outcome--answer .outcome__scene { left: auto; right: 22px; width: min(330px, 52%); }
/* her face at x 0.45-0.55, 0.30-0.45 down: the review over the curtains on the left, above her face's line */
.outcome--picked .outcome__media video { object-position: 24% 50%; }
.outcome--picked .outcome__scene { width: min(310px, 50%); }
/* his face at x 0.33-0.41 of the clip, 0.38-0.50 down: in the left part; the chart over the machines on the right */
.outcome--work .outcome__media video { object-position: 50% 50%; }
.outcome--work .outcome__scene { left: auto; right: 22px; width: min(320px, 50%); }
@media (max-width: 760px) {
  /* on the phone: the footage on top, its scene over the footage's foot, the words under it */
  .outcome { min-height: 0; display: flex; flex-direction: column; }
  .outcome__media { position: relative; inset: auto; height: 290px; }
  .outcome__media video { object-position: 50% 50% !important; }
  .outcome--found .outcome__media video { object-position: 50% 100% !important; }
  .outcome--answer .outcome__media video { object-position: 85% 50% !important; }
  .outcome__grade { inset: 0 0 auto 0; height: 290px; background: linear-gradient(180deg, rgba(5, 11, 21, 0.1) 0%, rgba(5, 11, 21, 0) 45%, var(--bg-2) 100%); }
  .outcome__scene, .outcome--answer .outcome__scene, .outcome--picked .outcome__scene, .outcome--work .outcome__scene { position: relative; top: auto; left: auto; right: auto; width: auto; margin: -104px 16px 0; }
  .outcome--work .outcome__scene { margin-top: -60px; } /* he leans down to his work, to 0.65 of the clip's height */
  .outcome__text { position: relative; padding: 22px 22px 26px; }
}

/* ---------- the calculator: its head on one line, so the result and its button show with the part at the top ---------- */
#worth { padding-top: clamp(64px, 5vw, 80px); }
#worth .section__head { max-width: none; margin-bottom: 36px; }
#worth .section__head .lead { max-width: none; }

/* ---------- who: the bento ---------- */
.tiles { grid-auto-rows: 240px; }
.tile--big { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.tile--wide { grid-column: span 2; }
.tile--law img { object-position: 60% 50%; }
.tile--more img { object-position: 50% 22%; }
@media (max-width: 980px) { .tile--big { grid-column: 1 / -1; grid-row: span 2; } }
@media (max-width: 560px) { .tile--big { grid-row: span 1; } }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.faq-wrap__head { position: sticky; top: calc(var(--header-h) + 40px); }
.faq-wrap__head h2 { font-size: var(--fs-h2); letter-spacing: var(--track-h2); line-height: 1.06; }
.faq-wrap__head .lead { margin-top: 16px; font-size: var(--fs-lead); color: var(--text-muted); }
.faq-wrap__head .cta-row { margin-top: 32px; }
.faq { max-width: none; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-wrap__head { position: static; }
  .faq-wrap__head .cta-row { display: none; }
}

/* ---------- close: the carpenter (face 0.33-0.41 across) moved right of the words ---------- */
#close { --cl: 30%; }
@media (max-width: 1199px) { #close { --cl: 38%; } }