/* site\assets\css\pages\home.css: the home page's own placements and crops (specs\home.md). The components are in
   components.css; this file only places and sizes the home page's parts, with the tokens of system.css. */

/* ---------- #top: the crop of each clip, on the video inside its slide (the kit moves the slide itself) ---------- */
/* From 1220px the footage fills the hero behind the copy and the cards: each clip is zoomed so its faces sit right of
   the H1 and the line (24px or more clear), off the form box and off the cards, at every width from 1220 to 2560 and
   every height. Below 1220px the footage is a block of its own above the copy, shown whole. */
@media (min-width: 1220px) {
  /* hero-roof: the roofers' faces along the ridge (x 35-66%, y 20-36% of the clip); four sit between the copy and the
     cards' top, the fifth (x 63-66%) leaves the frame at the right */
  .hero__slide--roofing video { object-position: 50% 0%; transform: scale(1.59); transform-origin: 0% 45%; }
  /* hero-hvac: the technician's face (x 55-65%, y 20-35%) between the H1's line ends and the cards */
  .hero__slide--hvac video { object-position: 0% 0%; transform: scale(1.21); transform-origin: 45% 100%; }
}

/* ---------- #scoreboard: a 16:9 stage (4:5 on the phone), the scene filling it over the owner's clip ---------- */
/* the scene keeps its board in the left 4-62% on the computer and in the lower 60% on the phone; his face (75-82%
   across, upper third) stays clear: at the right on the computer, at the top of the stage on the phone */
.stage--board { aspect-ratio: 4 / 5; }
.stage--board > video { object-position: 78% 20%; }
.grade--board { background: linear-gradient(90deg, color-mix(in srgb, var(--c-night) 62%, transparent) 0%, color-mix(in srgb, var(--c-night) 62%, transparent) 62%, color-mix(in srgb, var(--c-night) 46%, transparent) 100%); }
@media (max-width: 699px) { .grade--board { background: linear-gradient(0deg, color-mix(in srgb, var(--c-night) 62%, transparent) 0%, color-mix(in srgb, var(--c-night) 62%, transparent) 60%, color-mix(in srgb, var(--c-night) 46%, transparent) 100%); } }
@media (min-width: 700px) {
  .stage--board { aspect-ratio: 16 / 9; }
  .stage--board > video { object-position: 50% 50%; }
}

/* ---------- #how: copy left, the phone in the hand right, zoomed so its screen reads ---------- */
.how__copy .head { margin-bottom: 0; }
.how__copy .steps { margin-top: var(--space-4); }
.how__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin-top: var(--space-5); }
.how__watch { display: inline-flex; align-items: center; gap: 14px; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; font: 600 var(--fs-body)/1.3 var(--font-ui); text-align: left; color: var(--c-ink); cursor: pointer; }
.how__watch:hover { color: var(--c-brand); }
.how__watch:hover .play { transform: scale(1.06); box-shadow: var(--shadow-l); }
.how__watch:focus-visible { box-shadow: none; }
.how__watch:focus-visible .play { box-shadow: var(--ring-focus); }
/* phone-hand: its screen (x 42-61%, y 20-74% of the photo) brought to the middle and shown near its design size: from
   700px a 696px tall stage (580 wide at most, narrower in the split's column from 960 to 1137px) shows it 320 x 620;
   on the phone a 620px tall stage shows it at about 297 x 575 on every phone width, so plan-chat's smallest words
   (15px in its design) still read at 13px or more */
.stage--how { height: 620px; aspect-ratio: auto; --zoom: 1.73; --zoom-at: 50% 42.9%; }
.stage--how [data-screen-photo] img { object-position: 52.4% 50%; }
@media (min-width: 700px) {
  .stage--how { width: 100%; max-width: 580px; height: 696px; margin-inline: auto; --zoom: 1.662; --zoom-at: 50% 42.5%; }
  .stage--how [data-screen-photo] img { object-position: 53.2% 50%; }
}

/* ---------- #plan: the radar over the neighborhood, a 21:9 stage from 1081px (16:10 from 700 to 1080px, where 21:9
   is too short for the plan card and the rivals' pills; 4:5 on the phone) ---------- */
.plan__head { display: grid; gap: var(--space-3); justify-items: start; }
.plan__cta { margin-top: var(--space-2); }
.stage--wide { aspect-ratio: 4 / 5; box-shadow: 0 0 0 1px var(--c-line-night), var(--shadow-l); }
.grade--plan { background: color-mix(in srgb, var(--c-night) 55%, transparent); }
@media (min-width: 700px) { .stage--wide { aspect-ratio: 16 / 10; } }
@media (min-width: 1081px) { .stage--wide { aspect-ratio: 21 / 9; } }
@media (min-width: 960px) {
  .plan__head { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-6); align-items: end; }
  .plan__head > :not(.plan__cta) { grid-column: 1; }
  .plan__cta { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; }
}

/* ---------- #services: each tab's photo and its screen zoomed together around the device ---------- */
/* From 700px the tabs (their list, the stage and its line) are only as wide as lets the tab list and the whole stage fit
   in one screen: the stage at most 64% of the screen's height (576px on a 900px screen, where 62% would show svc-map's
   street names under 13px), and on a short screen up to 560px while it still fits under the header and the tab list,
   so tab 1's phone screen shows at 0.8 of its design size or more; every stage keeps its proportions, 16:9 (4:3 from
   700 to 1023px) */
@media (min-width: 700px) { .tabs { max-width: calc(max(64svh, min(560px, 100svh - 200px)) * 16 / 9); margin-inline: auto; } }
@media (min-width: 700px) and (max-width: 1023px) { .tabs { max-width: calc(max(64svh, min(560px, 100svh - 200px)) * 4 / 3); } }
/* On the phone every tab's stage is 9:14 (not 4:5), so tab 1's phone screen can show 450px tall and the stage keeps one
   height from tab to tab. */
@media (max-width: 699px) { .tabs__panel .stage { aspect-ratio: 9 / 14; } }
/* tab 1, tab-search: the phone's screen (x 27-37%, y 17-52% of the photo) in the middle of the stage, filling 93% of its
   height on the computer (about 265 x 535 at 1440 x 900); on the phone the whole screen (all 580 design pixels of its height) inside the 9:14 stage
   with about 30-50px above and below it, at 0.78 of its design size or more (220 x 450 on a 360px phone, 231 x 461 on
   a 390px one) */
.stage--found { --zoom: 2.38; --zoom-at: 50% 23.5%; }
.stage--found [data-screen-photo] img { object-position: 22.1% 50%; }
@media (max-width: 389px) { .stage--found { --zoom: 2.55; --zoom-at: 50% 24.65%; } }
/* the photo's green chroma screen shows a hairline past the screen's lower edge at this zoom: a thin bezel-dark ring
   around the screen covers it */
.stage--found [data-screen] { box-shadow: 0 0 0 3px var(--c-night); }
@media (min-width: 700px) {
  .stage--found { --zoom: 2.67; --zoom-at: 21.51% 25.43%; }
  .stage--found [data-screen-photo] img { object-position: 50% 50%; }
}
/* tab 1's map credit (svc-map's map is OpenStreetMap data), on a row of its own under the line and the link; in
   --c-ink-soft, as --c-ink-faint is only 4.36:1 on the white band */
.tabs__credit { flex-basis: 100%; margin: 0; font: 400 var(--fs-small)/1.4 var(--font-ui); color: var(--c-ink-soft); }
/* tab 2, tab-ads: the worker on his ladder (about 77% across) kept in the phone's narrow crop; the cards sit over the
   left 55% on the computer and the top 60% on the phone. Tab 3, tab-calls: the hands at the wall box stay centered. */
.stage--ads > video { object-position: 93% 50%; }
@media (min-width: 700px) { .stage--ads > video { object-position: 50% 50%; } }
/* tab 4, tab-laptop: the laptop's screen (x 47-83%, y 28-62% of the photo) in the middle of the stage, shown about
   880 x 550 on the computer; on the phone the whole laptop, its screen about 325 x 205 (316 x 199 under 390px) */
.stage--cost { --zoom: 1.1; --zoom-at: 50% 0%; }
.stage--cost [data-screen-photo] img { object-position: 76% 50%; }
@media (max-width: 389px) { .stage--cost { --zoom: 1.16; } }
@media (min-width: 700px) {
  .stage--cost { --zoom: 2.213; --zoom-at: 77.1% 39%; }
  .stage--cost [data-screen-photo] img { object-position: 50% 50%; }
}
/* From 700 to 1023px (the tablets) every tab's stage is 4:3, as a 16:9 stage there is too short for tab 1's whole phone
   screen at 0.78 of its design size or more: tab 1's screen fills 90% of the stage's height from 768px (0.82 of its
   design size there); tab 4's laptop shows whole with its screen about half the stage wide, under
   500px, so svc-dash shows its big type (13px at 300px shown, so 15px or more here) */
@media (min-width: 700px) and (max-width: 1023px) {
  .tabs__panel .stage { aspect-ratio: 4 / 3; }
  .stage--found { --zoom: 2.584; --zoom-at: 38.4% 24.9%; }
  .stage--found [data-screen-photo] img { object-position: 0% 50%; }
  .stage--cost { --zoom: 1.3; --zoom-at: 95.3% 27.9%; }
  .stage--cost [data-screen-photo] img { object-position: 100% 50%; }
}
/* from 700 to 767px tab 1's screen fills 94% of the stage's height, so it still shows at 0.78 of its design size */
@media (min-width: 700px) and (max-width: 767px) { .stage--found { --zoom: 2.69; --zoom-at: 38.7% 25.5%; } }

/* ---------- #trades: crops that keep each face clear of the name gradient ---------- */
.trade--roof { --focus: 45% 50%; }
.trade--hvac { --focus: 66% 28%; }
.trade--plumb { --focus: 50% 12%; }
.trade--elec { --focus: 80% 28%; }
.trade--pest { --focus: 80% 35%; }
.trade--garage { --focus: 62% 100%; }
.trade--garage img { scale: 1.14; transform-origin: 62% 100%; }

/* ---------- #faq: the headline left, the questions right ---------- */
.faq-wrap { display: grid; gap: var(--space-3); }
.faq-wrap .head { margin-bottom: 0; }
.faq-wrap__all { margin-top: var(--space-4); }
@media (min-width: 960px) {
  .faq-wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6); align-items: start; }
  .faq-wrap .head { position: sticky; top: calc(var(--header-h) + var(--space-5)); }
}