/* The home page's own CSS: it only places and sizes its parts, with the tokens of system.css. */

/* #hero: the technician's clip is cooler than the others: warmed to the site's daylight */
.hero [data-kit-slide]:nth-child(2) video { filter: sepia(.16) saturate(1.1) brightness(1.06) contrast(1.02); }

/* #services: the bento: the Video tile tall on the left, Google wide, Social and Calls side by side */
.bento { display: grid; grid-template-columns: 1.06fr 1fr 1fr; grid-template-rows: 400px 430px; gap: 16px; }
.tile--video { grid-row: 1 / 3; }
.tile--found { grid-column: 2 / 4; }
.tile--video .tile__scene { inset: 0 0 168px 0; }
.tile--video .tile__media video { object-position: 50% 30%; }
.tile--found .tile__media video { left: -30%; width: 130%; max-width: none; }
.tile--found .tile__scene { top: 22px; right: 22px; width: min(374px, 52%); }
.tile--found .tile__body { max-width: 50%; }
.tile--social .tile__media img { filter: blur(3px) brightness(.72) saturate(1.1); transform: scale(1.06); }
.tile--social .tile__scene { inset: 8px 8px 150px 8px; }
.tile--calls .tile__scene { top: 22px; left: 20px; right: 20px; }
.tile .stop { top: 14px; right: 14px; }
.tile--found .stop, .tile--social .stop, .tile--calls .stop { top: auto; bottom: 14px; }
@media (max-width: 1099px) {
  .bento { grid-template-columns: 1fr 1fr; grid-template-rows: 430px 430px 460px; }
  .tile--video { grid-row: 1 / 3; }
  .tile--found { grid-column: 1 / 3; grid-row: 3; }
}
@media (max-width: 700px) {
  .bento { display: grid; grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
  .tile { min-height: 0; display: block; }
  .tile::after { display: none; }
  .tile__media { position: relative; inset: auto; z-index: 0; height: var(--tile-h, 400px); }
  .tile__body { padding: 18px 20px 22px; }
  .tile--video, .tile--found { grid-row: auto; grid-column: auto; }
  .tile--video { --tile-h: 560px; }
  .tile--video .tile__scene { inset: 0 0 auto 0; height: 560px; }
  .tile--found { --tile-h: 500px; }
  .tile--found .tile__media video { left: 0; width: 100%; }
  .tile--found .tile__scene { top: auto; bottom: auto; left: 12px; right: 12px; width: auto; top: calc(500px - 290px); }
  .tile--found .tile__body { max-width: none; }
  .tile--found .stop { top: 14px; bottom: auto; }
  .tile--social { --tile-h: 330px; }
  .tile--social .tile__scene { inset: 0 0 auto 0; height: 330px; }
  .tile--calls { --tile-h: 330px; }
  .tile--calls .tile__scene { top: 18px; left: 14px; right: 14px; }
}

/* #plan: the market scan's width in the tour */
.tour__panel > .plan__scan { width: min(100%, 560px); }

/* #how: the steps beside a phone over footage */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.how__text h2 { margin-bottom: 28px; }
.how__cta { margin-top: 28px; }
.how__media { position: relative; display: grid; place-items: center; min-height: 720px; padding: 44px 20px; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow-l); }
.how__footage { position: absolute; inset: 0; }
.how__footage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.how__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31, 61, 66, .05), rgba(31, 61, 66, .32)); pointer-events: none; }
.how .phone { z-index: 2; width: min(300px, 82%); }
.how .stop { z-index: 3; }
@media (max-width: 899px) { .how { grid-template-columns: 1fr; } .how__media { min-height: 680px; } }

/* #worth: the calculator's picture, an editor's split screen: today against with us */
.worth__board { display: grid; gap: 14px; }
.worth__pic { position: relative; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: var(--radius-xl); background: var(--c-card); box-shadow: var(--shadow-m); }
.worth__pic::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: var(--c-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent) 20%, transparent); }
.worth__side { display: grid; gap: 14px; align-content: start; padding: 22px 22px 20px; }
.worth__side--today { background: var(--c-paper-alt); }
.worth__side--today .worth__calls, .worth__side--today .gbp, .worth__side--today .worth__crowd { filter: saturate(.15); }
.worth__label { font: 400 1.75rem/1 var(--font-num); letter-spacing: .06em; color: var(--c-ink-soft); }
.worth__side--us .worth__label { color: var(--c-brand-text); }
.worth__calls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.call { display: grid; place-items: center; aspect-ratio: 1.35; border-radius: 10px; background: var(--c-brand); color: var(--c-on-brand); transition: background-color var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring), opacity var(--dur-med) var(--ease-out); }
.call svg { width: 16px; height: 16px; }
.call--missed { background: color-mix(in srgb, var(--c-missed) 45%, var(--c-card)); color: var(--c-ink-soft); }
.gbp { position: relative; display: grid; gap: 6px; min-height: 148px; padding: 10px; border-radius: 16px; background: var(--c-card); border: 1px solid var(--c-line); transition: border-color var(--dur-med), opacity var(--dur-med), transform var(--dur-med) var(--ease-spring); }
.gbp__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.gbp__photos i { position: relative; display: grid; place-items: center; aspect-ratio: 1.2; border-radius: 9px; background-size: cover; background-position: center; transition: opacity var(--dur-med); }
.gbp__vid .playmark { width: 14px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); }
.gbp__name { font: 700 14px/1.2 var(--font-ui); }
.gbp__line { font: 500 13px/1.2 var(--font-ui); color: var(--c-ink-soft); }
.gbp__btns { display: flex; gap: 6px; }
.gbp__btns span { padding: 5px 12px; border-radius: 999px; background: var(--c-brand-light); color: var(--c-brand-dark); font: 700 13px/1 var(--font-ui); }
.gbp__none { position: absolute; inset: 0; display: none; place-items: center; font: 600 14px/1.2 var(--font-ui); color: var(--c-ink-soft); }
.gbp[data-level="1"] .gbp__photos i { background-image: none !important; border: 1.5px dashed var(--c-line); }
.gbp[data-level="1"] .gbp__photos .playmark, .gbp[data-level="1"] .gbp__btns, .gbp[data-level="2"] > :not(.gbp__none) { visibility: hidden; }
.gbp[data-level="2"] { border: 1.5px dashed color-mix(in srgb, var(--c-missed) 70%, transparent); background: transparent; }
.gbp[data-level="2"] .gbp__none { display: grid; }
.worth__crowd { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; min-height: 64px; }
.mark { width: 13px; height: 17px; color: var(--c-ink-soft); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-spring); }
.worth__side--us .mark { color: var(--c-brand); }
.worth__side--us .mark--new { color: var(--c-accent-dark); }
.worth__unit { flex-basis: 100%; font: 600 13px/1.2 var(--font-ui); color: var(--c-ink-soft); }
.worth__n { font: 600 14px/1.2 var(--font-ui); color: var(--c-ink-soft); }
.worth__n b { font: 400 1.9rem/1 var(--font-num); letter-spacing: var(--ls-num); color: var(--c-ink); margin-right: 4px; }
.worth__pic:not([data-built]) .call, .worth__pic:not([data-built]) .mark, .worth__pic:not([data-built]) .gbp { opacity: 0; transform: translateY(6px); }
.worth__pic[data-built] .call, .worth__pic[data-built] .mark { transition-delay: calc(var(--i, 0) * 14ms); }
.worth__result { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 20px 26px; border-radius: var(--radius-xl); background: var(--c-brand-deep); color: var(--c-on-dark); }
.worth__more { display: flex; align-items: baseline; gap: 10px; }
.worth__more b { font: 400 clamp(3rem, 2.4rem + 2vw, 4rem)/1 var(--font-num); letter-spacing: var(--ls-num); color: var(--c-accent); }
.worth__more span { font: 700 1.1rem/1.2 var(--font-ui); }
.worth__year { font: 500 1rem/1.4 var(--font-ui); color: var(--c-on-dark-soft); }
.worth__year b { font-weight: 800; color: var(--c-on-dark); }
.worth__zero { flex-basis: 100%; font: 500 1rem/1.45 var(--font-ui); color: var(--c-on-dark); }
.worth__fine { font: 500 var(--fs-micro)/1.5 var(--font-ui); color: var(--c-ink-soft); }
.seg3__mini { display: block; width: 30px; height: 22px; border-radius: 5px; border: 1.5px solid var(--c-brand); background: linear-gradient(var(--c-brand-light), var(--c-brand-light)) 3px 3px / 9px 7px no-repeat, linear-gradient(var(--c-brand-light), var(--c-brand-light)) 15px 3px / 9px 7px no-repeat, linear-gradient(var(--c-brand), var(--c-brand)) 3px 13px / 21px 3px no-repeat; }
.seg3__mini[data-level="1"] { background: linear-gradient(var(--c-brand), var(--c-brand)) 3px 13px / 14px 3px no-repeat; }
.seg3__mini[data-level="2"] { border-style: dashed; border-color: var(--c-missed); background: none; }
@media (max-width: 600px) { .worth__side { padding: 16px 12px; gap: 12px; } .worth__calls { gap: 4px; } .call { border-radius: 8px; } .call svg { width: 13px; height: 13px; } .gbp { min-height: 128px; padding: 8px; } .gbp__btns span { padding: 4px 8px; } }

/* #ray: his portrait and words beside the booking card */
.ray { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.ray .portrait { margin-bottom: 26px; }
.ray h2 { color: var(--c-on-dark); }
.ray .lead { margin-top: 14px; }
.ray__quote { margin: 26px 0 0; padding-left: 18px; border-left: 3px solid var(--c-accent); }
.ray__quote .quote { color: var(--c-on-dark); }
.ray__quote cite { display: block; margin-top: 8px; font: 600 var(--fs-small)/1.3 var(--font-ui); font-style: normal; color: var(--c-on-dark-soft); }
.ray__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ray__stage { position: relative; display: grid; place-items: center; min-height: 500px; padding: 28px; border-radius: var(--radius-xl); background: radial-gradient(120% 90% at 30% 20%, color-mix(in srgb, var(--c-brand) 55%, transparent), transparent 70%), color-mix(in srgb, var(--c-on-dark) 4%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-dark) 10%, transparent); }
.ray__book { width: min(100%, 430px); height: 440px; }
@media (max-width: 899px) { .ray { grid-template-columns: 1fr; } .ray__stage { min-height: 480px; padding: 16px 16px 68px; } }

/* #faq: its heading and Ray beside the questions */
.faq-part { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.faq-part__head { position: sticky; top: calc(var(--header-h) + 28px); }
.faq-part__head .lead { margin: 14px 0 22px; }
@media (max-width: 899px) { .faq-part { grid-template-columns: 1fr; } .faq-part__head { position: static; } }