/* site\assets\css\pages\home.css: the home page's own CSS (specs\home.md): where each part sits and how big it is, with
   the tokens of system.css only; the parts' look is in design\components.css. Widths: the computer (1200 and up, drawn
   at 1440), the small laptop (900 to 1199, drawn at 1024), the tablet (700 to 899) and the phone (under 700, drawn at
   390). */

/* ================= hero: the words 7 of 12, the stage 5 of 12 ================= */
.hero { --step-color: var(--c-sky); display: flex; align-items: center; min-height: max(720px, 100svh); padding-top: 128px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; align-items: center; }
.hero__words { position: relative; z-index: 2; }
.hero__title, .hero__sizers { margin-bottom: 22px; } /* both, as they share one grid cell */
.hero__line { max-width: 27em; margin: 0 0 28px; }
.hero__picker { max-width: 560px; }
/* The stage's geometry: the frame (--fw x --fh), the two bars (--bw wide, each --bo behind the next), the booking card
   (--cw) and the forecast card (--fcw, --fco outside the frame's left edge, 34px below its bottom). */
.hero__stage { z-index: 1; --fw: 456px; --fh: 560px; --bw: 110px; --bo: 22px; --cw: 262px; --fcw: 228px; --fco: 70px; }
.hero__frame { width: var(--fw); height: var(--fh); margin-left: auto; }
.hero__bar { width: var(--bw); }
.hero__bar--2 { right: calc(var(--fw) - var(--bo)); height: calc(var(--fh) * 0.74); }
.hero__bar--1 { right: calc(var(--fw) + var(--bw) - 2 * var(--bo)); height: calc(var(--fh) * 0.52); }
.hero__card { right: 18px; bottom: 22px; width: var(--cw); }
.hero__forecast { right: calc(var(--fw) + var(--fco) - var(--fcw)); bottom: -34px; width: var(--fcw); }

@media (max-width: 1199px) {
  .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__line { max-width: 20em; }
  .hero__picker { max-width: 420px; }
  .hero__stage { --fw: 370px; --fh: 462px; --bw: 84px; --bo: 18px; --cw: 214px; --fcw: 204px; --fco: 76px; }
  .hero__card { right: 14px; bottom: 18px; }
}
/* the tablet: one column, the stage centered under the words, its bars and forecast kept */
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; padding-top: 112px; }
  .hero__grid { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .hero__line { max-width: 30em; }
  .hero__picker { max-width: 560px; }
  .hero__stage { --fw: 400px; --fh: 500px; --bw: 96px; --bo: 20px; --cw: 230px; --fcw: 210px; --fco: 70px; width: calc(var(--fw) + 2 * (var(--bw) - var(--bo))); margin: 0 auto 34px; }
}
/* the phone: the stage a wide frame (16:10) under the words, its booking card at the lower left */
@media (max-width: 699px) {
  .hero { padding-top: 100px; }
  .hero__grid { row-gap: 36px; }
  .hero__title, .hero__sizers { margin-bottom: 16px; }
  .hero__line { margin-bottom: 22px; }
  .hero__stage { --cw: min(256px, calc(100% - 24px)); width: auto; margin: 0; }
  .hero__frame { width: 100%; height: auto; aspect-ratio: 16 / 10; }
  .hero__bar, .hero__forecast { display: none; }
  .hero__card { left: 12px; right: auto; bottom: 12px; gap: 10px; padding: 10px 12px 10px 10px; }
  .hero__check { width: 30px; height: 30px; }
  .hero__check::after { left: 10px; top: 5px; }
}
/* the computer and the tablet: the word never wraps inside its sticker (it may on the phone) */
@media (min-width: 1200px), (min-width: 700px) and (max-width: 899px) { .hero__word { white-space: nowrap; } }

/* ================= plan: the tabs and the button 4 of 12, the stage 8 of 12 ================= */
.tour { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 40px; }
.tour > .section-head { grid-column: 1 / -1; }
.tour__side { grid-column: 1; grid-row: 2; align-self: end; }
.tour__tabs { height: 340px; }
.tour__tab--1 { height: 62%; }
.tour__tab--2 { height: 80%; }
.tour__tab--3 { height: 100%; }
.tour__go { grid-column: 1; grid-row: 3; padding-top: 28px; }
.tour__stage { grid-column: 2; grid-row: 2 / 4; height: 560px; }
/* the radar's box: 520 high, at most 760 wide, centered */
.tour__panel { top: 20px; bottom: 20px; left: max(20px, (100% - 760px) / 2); right: max(20px, (100% - 760px) / 2); }

@media (max-width: 1199px) {
  .tour { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 32px; }
  .tour__tabs { height: 320px; gap: 10px; }
  .tour__stage { height: 540px; }
  .tour__panel { inset: 14px; }
}
/* the phone: the bar-tabs in a row (72, 88, 104px, titles only), the stage, then the button */
@media (max-width: 899px) {
  .tour { display: flex; flex-direction: column; }
  .tour__side { align-self: stretch; }
  .tour__tabs { height: 104px; gap: 8px; margin-bottom: 22px; }
  .tour__tab { padding: 10px 10px 24px; }
  .tour__tab--1 { height: 72px; }
  .tour__tab--2 { height: 88px; }
  .tour__tab--3 { height: 104px; }
  .tour__tab-line { display: none; }
  .tour__fill { left: 10px; right: 10px; bottom: 10px; }
  .tour__stage { height: 520px; }
  .tour__panel { inset: 0; }
  .tour__go { padding-top: 26px; }
}
@media (max-width: 359px) {
  .tour__tabs { gap: 6px; }
  .tour__tab { padding-inline: 7px; }
  .tour__tab-title { letter-spacing: -0.02em; }
}

/* ================= how: the steps 5 of 12, the stage 7 of 12 ================= */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 40px; align-items: center; }
.steps > .section-head { grid-column: 1 / -1; }
/* the frame on the right (--fw x --fh, 40px down), the phone (--pw x --ph) over the frame's left third, taller */
.steps__stage { --pw: 300px; --ph: 580px; --fw: min(600px, 1.5 * (100% - var(--pw))); --fh: 420px; height: var(--ph); }
.steps__frame { position: absolute; top: 40px; right: 0; width: var(--fw); height: var(--fh); }
.steps__clip { object-position: 70% 50%; }
.phone { top: 0; left: max(0px, 100% - var(--fw) * 2 / 3 - var(--pw)); width: var(--pw); height: var(--ph); }

@media (max-width: 1199px) {
  .steps { column-gap: 32px; }
  .steps__stage { --pw: 280px; --ph: 540px; --fh: 380px; }
  .steps__item { padding: 18px; gap: 14px; }
}
/* the phone: the steps stacked, then the frame as the phone's backdrop (600 high) with the phone centered on it */
@media (max-width: 899px) {
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .steps__stage { height: 600px; }
  .steps__frame { inset: 0; width: auto; height: auto; }
  .phone { left: 50%; top: 72px; width: 290px; height: 510px; transform: translateX(-50%); }
}

/* ================= worth: the sliders 5 of 12, the result 7 of 12, equal heights ================= */
.worth__box { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* the computer and the tablet: the figures and the button on the result's left, the picture on its right, as tall as
   the card (a mark about as tall as it is wide, like the logo's) */
@media (min-width: 1200px), (min-width: 700px) and (max-width: 899px) {
  .worth__result { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; column-gap: 30px; row-gap: 24px; }
  .worth__head { grid-column: 1; grid-row: 1; }
  .worth__go { grid-column: 1; grid-row: 2; flex-direction: column; align-items: flex-start; }
  .worth__note { flex: 0 0 auto; }
  .worth__year { grid-column: 2; grid-row: 1 / 3; --bars-l: 8%; --bar-w: 20%; --bar-g: 9.5%; }
  .worth__stage { min-height: 300px; }
  .worth__facts { margin-top: 20px; }
}
@media (max-width: 1199px) {
  .worth__box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
  .worth__result { padding: 26px 24px 28px; }
}
@media (max-width: 899px) {
  .worth__box { grid-template-columns: minmax(0, 1fr); }
}
/* the phone: everything stacked, the bars a little wider, the stage 260 high */
@media (max-width: 699px) {
  .worth__inputs { padding: 22px 20px 20px; }
  .worth__result { gap: 18px; padding: 24px 20px 24px; }
  .worth__year { --bars-l: 6%; --bar-w: 21%; --bar-g: 9.5%; }
  .worth__stage { min-height: 260px; }
}

/* ================= outcomes: 2 x 2 cards, one stop icon at the head's top right ================= */
.outcomes { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; }
.outcomes > .section-head { grid-column: 1; grid-row: 1; }
.outcomes__stop { position: relative; top: auto; right: auto; grid-column: 2; grid-row: 1; align-self: start; }
.outcomes__grid { grid-column: 1 / -1; }
.outcome { height: 580px; }
.outcome--out-found .outcome__clip { object-position: 47% 50%; }
.outcome--out-reviews .outcome__clip { object-position: 51% 50%; }
/* the stars of the reviews scene in their real color */
#outcomes [data-scene="out-reviews"] { --oc-star: var(--c-star); }
/* 1024: the cards are too narrow for a face beside the scene, so the faces go out of the frame */
@media (max-width: 1199px) {
  .outcome { height: 520px; }
  .outcome--out-found .outcome__clip, .outcome--out-reviews .outcome__clip { object-position: 0% 50%; }
}
/* the tablet, one column: the cards are wide, so the faces sit in the right part, clear of the scene */
@media (max-width: 899px) {
  .outcomes__grid { grid-template-columns: minmax(0, 1fr); }
  .outcome--out-found .outcome__clip, .outcome--out-reviews .outcome__clip { object-position: 100% 50%; }
}
/* the phone: the scene spans the card, so the faces go out of the frame */
@media (max-width: 699px) {
  .outcome__scene { left: 16px; top: 16px; width: calc(100% - 32px); }
  .outcome__words { left: 20px; right: 20px; bottom: 22px; }
  .outcome--out-found .outcome__clip, .outcome--out-reviews .outcome__clip { object-position: 0% 50%; }
}

/* ================= compare: the box full width, the chips in a row ================= */
.compare { height: 560px; }
.compare__side--ours .compare__photo { object-position: 50% 15%; }
@media (max-width: 1199px) { .compare { height: 520px; } .compare__cards { width: min(330px, 35%); } } /* the knob at rest stays clear of both groups of cards */
/* the phone: 560 high, each side's cards stacked in its own free half, the knob above them */
@media (max-width: 699px) {
  .compare { --knob-y: 42%; height: 560px; }
  .compare__side--ours .compare__photo { object-position: 80% 50%; }
  .compare__tag { top: 12px; padding: 6px 11px; }
  .compare__side--usual .compare__tag { left: 10px; }
  .compare__side--ours .compare__tag { right: 10px; }
  .compare__cards { bottom: 12px; gap: 8px; width: auto; }
  .compare__side--usual .compare__cards { left: 8px; right: calc(45% + 12px); }
  .compare__side--ours .compare__cards { right: 8px; left: calc(55% + 12px); }
  .compare__card { padding: 8px 10px; }
  .compare__card .compare__mark { display: none; }
  .compare__card b { font-size: var(--fs-small); }
  .compare__card small { font-size: calc(var(--fs-small) * 0.9); }
  .compare__hint { top: calc(var(--knob-y) - 66px); }
  .promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .promises .chip { justify-content: center; padding: 8px 10px; text-align: center; white-space: normal; }
}

/* ================= who: the bento (4 columns, rows 250) ================= */
.tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 250px; }
.tile--home { grid-area: 1 / 1 / 3 / 3; }
.tile--outdoor { grid-area: 1 / 3 / 2 / 4; }
.tile--law { grid-area: 1 / 4 / 3 / 5; }
.tile--health { grid-area: 2 / 3 / 3 / 4; }
.tile--realestate { grid-area: 3 / 1 / 4 / 2; }
.tile--events { grid-area: 3 / 2 / 4 / 4; }
.tile--more { grid-area: 3 / 4 / 4 / 5; }
.tile--home .tile__photo { object-position: 50% 40%; }
.tile--outdoor .tile__photo { object-position: 40% 40%; }
.tile--law .tile__photo { object-position: 50% 30%; }
.tile--health .tile__photo { object-position: 30% 40%; }
.tile--realestate .tile__photo { object-position: 50% 35%; }
.tile--events .tile__photo { object-position: 60% 35%; }
@media (max-width: 1199px) {
  .tiles { grid-auto-rows: 210px; gap: 18px; }
  .tile__words { padding: 44px 16px 14px; }
  .tile--more { padding: 18px; }
}
@media (max-width: 899px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 230px; }
  .tiles > .tile { grid-area: auto; }
  .tiles > .tile--home { grid-column: 1 / -1; }
}
@media (max-width: 699px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ================= faq: the questions 8 of 12, the founder card 4 of 12 (sticky) ================= */
.faq { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 40px; align-items: start; }
.faq > .section-head { grid-column: 1 / -1; }
.founder { position: sticky; top: 110px; }
@media (max-width: 1199px) { .faq { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 32px; } }
@media (max-width: 899px) {
  .faq { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .founder { position: static; }
}
@media (max-width: 699px) {
  .faq__item summary { padding: 18px 56px 18px 18px; }
  .faq__item summary::before, .faq__item summary::after { right: 20px; }
  .faq__answer { padding: 0 18px 18px; }
}

/* ================= close: the words and picker 6 of 12, the frame 6 of 12 ================= */
.close { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: center; }
.close__picker { max-width: 560px; }
.close__frame { height: 440px; }
@media (max-width: 1199px) { .close { column-gap: 32px; } .close__frame { height: 400px; } }
@media (max-width: 899px) {
  .close { grid-template-columns: minmax(0, 1fr); row-gap: 36px; }
  .close__frame { height: auto; aspect-ratio: 16 / 10; }
}