/* Home search (/home-search), the buyer quiz. Loads after site.css and
   free-home-evaluation.css (header, band, card, steps, tiles, thank you).
   Look only: the page's inline script (unchanged) drives .f-step.active,
   .f-opt.selected, #priceRange, #fBar, .funnel-thanks.show and #evalModal. */

/* A house for sale in the band, faded into the navy */
.hs .fe-band::before{ background:url("/media/heroes/buying.jpg") center 50% / cover no-repeat;
  background-image:image-set(url("/media/heroes/buying.webp") type("image/webp"), url("/media/heroes/buying.jpg") type("image/jpeg")); }

/* ---------- Price band: two native ranges on one track ---------- */
.hs-range{ max-width:560px; margin:30px auto 0; }
.rd-values{ display:flex; justify-content:space-between; font-size:clamp(1.5rem, 3vw, 2rem); font-weight:500; letter-spacing:-0.03em; color:var(--ink); }
.range-dual{ position:relative; height:44px; margin-top:10px; }
.rd-track{ position:absolute; left:0; right:0; top:50%; height:8px; margin-top:-4px; border-radius:999px; background:var(--panel-2, #E4E9F0); }
.rd-fill{ position:absolute; top:0; bottom:0; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-tint)); }
.range-dual input[type="range"]{ position:absolute; inset:0; width:100%; height:44px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none; }
.range-dual input[type="range"]::-webkit-slider-runnable-track{ background:none; border:0; }
.range-dual input[type="range"]::-moz-range-track{ background:none; border:0; }
.range-dual input[type="range"]::-webkit-slider-thumb{ pointer-events:auto; -webkit-appearance:none; width:30px; height:30px; border-radius:50%; background:#fff; border:0;
  box-shadow:0 0 0 2px var(--ink), 0 8px 18px -8px rgba(7,25,49,.6); cursor:grab; }
.range-dual input[type="range"]::-moz-range-thumb{ pointer-events:auto; width:30px; height:30px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 2px var(--ink), 0 8px 18px -8px rgba(7,25,49,.6); cursor:grab; }
.range-dual input[type="range"]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 2px var(--ink), 0 0 0 7px rgba(201,164,92,.4); }
.rd-caption{ margin-top:10px; font-size:14px; color:var(--muted); }

/* Bathrooms has four tiles */
.fe-tiles.hs-tiles-4{ grid-template-columns:repeat(4, 1fr); max-width:540px; }

/* Last step: the "phone is your password" note */
.f-passnote{ display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:16px; background:var(--accent-soft); text-align:left; font-size:14px; line-height:1.55; color:var(--ink-2); }
.f-passnote i{ font-size:20px; color:var(--accent-text); flex:none; margin-top:1px; }
.f-passnote b{ color:var(--ink); }
.f-step form.field-group{ display:grid; gap:10px; }

/* ---------- Thank you ---------- */
.hs .fe-t-faces{ display:flex; justify-content:center; margin:0 0 18px; }
.hs .fe-t-faces[hidden]{ display:flex; }
.hs-t-ctas{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:28px; }
.hs-t-ctas .pill-line{ gap:10px; }

/* ---------- Free home eval pop-up (#evalModal) ---------- */
.quick-modal{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:20px; }
.quick-modal[hidden]{ display:none; }
.qm-backdrop{ position:absolute; inset:0; background:rgba(4,13,27,.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.qm-card{ position:relative; width:min(480px, 100%); padding:clamp(24px, 3vw, 34px); border-radius:var(--r-sec); background:#fff; text-align:left; box-shadow:0 40px 90px -30px rgba(0,0,0,.6); animation:popIn .35s var(--ease) both; }
.qm-close{ position:absolute; right:14px; top:14px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--panel); font-size:18px; }
.qm-close:hover{ background:var(--line); }
.qm-card h3{ padding-right:44px; font-size:clamp(1.4rem, 2.4vw, 1.75rem); font-weight:500; letter-spacing:-0.03em; }
.qm-card > p{ margin-top:8px; font-size:15px; line-height:1.6; color:var(--muted); }
.qm-card .field-group{ display:grid; gap:10px; margin-top:18px; }
.qm-card .field{ width:100%; background:var(--panel); border-color:transparent; }
.qm-card .field:focus{ background:#fff; }
.qm-card .btn{ width:100%; height:54px; font-weight:600; }
.qm-card .f-legal{ margin-top:2px; }
.qm-card .form-success{ margin-top:16px; align-items:center; }
.qm-card .form-success i{ font-size:22px; }

@media (max-width:760px){
  .rd-values{ font-size:1.4rem; }
  .fe-tiles.hs-tiles-4{ grid-template-columns:repeat(4, 1fr); }
  .hs-t-ctas .pill{ width:100%; justify-content:center; }
  .quick-modal{ place-items:end center; padding:0; }
  .qm-card{ border-radius:24px 24px 0 0; padding:24px var(--gut, 30px) calc(24px + env(safe-area-inset-bottom)); }
}

/* ---------- First step: pitch over a moving wall of homes ---------- */
.hs .fe-band{ height:min(100svh, 980px); overflow:hidden; background:#050F20; }
.hs .fe-band::before{ display:none; }
.hs .fe-band::after{ z-index:2; opacity:1; background:
  radial-gradient(60% 55% at 50% 45%, rgba(5,15,32,.55) 0%, rgba(5,15,32,.78) 60%, rgba(5,15,32,.94) 100%),
  linear-gradient(180deg, rgba(5,15,32,.6) 0%, rgba(5,15,32,.2) 30%, rgba(5,15,32,.85) 88%, #050F20 100%);
  -webkit-mask-image:none; mask-image:none; }
.hs-wall{ position:absolute; left:50%; top:50%; width:170%; height:200%; display:flex; gap:18px; justify-content:center;
  transform:translate(-50%, -50%) perspective(1600px) rotateX(24deg) rotateZ(-9deg); transform-origin:50% 50%; opacity:.85; }
.hs-col{ width:230px; flex:none; overflow:hidden; }
.hs-col-in{ display:flex; flex-direction:column; gap:18px; animation:hsUp var(--d, 44s) linear infinite; }
.hs-col.is-down .hs-col-in{ animation-name:hsDown; }
@keyframes hsUp{ from{ transform:translateY(0); } to{ transform:translateY(-50%); } }
@keyframes hsDown{ from{ transform:translateY(-50%); } to{ transform:translateY(0); } }
.hs-card{ border-radius:18px; overflow:hidden; background:#10284A; box-shadow:0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06); }
.hs-card-img{ aspect-ratio:4 / 3; background-size:cover; background-position:center; }
.hs-card-body{ position:relative; display:grid; gap:8px; padding:14px 16px 16px; }
.hs-card-body i{ display:block; height:9px; border-radius:999px; background:rgba(255,255,255,.18); }
.hs-card-body i:first-child{ width:62%; height:12px; background:rgba(255,255,255,.3); }
.hs-card-body i:nth-child(2){ width:42%; }
.hs-card-chip:empty{ display:none; }
.hs-card-chip{ position:absolute; right:14px; top:12px; height:22px; padding:0 10px; border-radius:999px; background:var(--accent); color:var(--ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; }

.hs .fe-main{ justify-content:flex-start; padding-top:clamp(40px, 7vh, 88px); }
.hs-intro{ max-width:860px; margin:0 auto clamp(32px, 5vh, 48px); color:#fff; text-align:center; }
.hs-proof{ display:inline-flex; align-items:center; gap:10px; height:40px; padding:0 18px; border-radius:999px; font-size:14px; color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.hs-proof b{ color:#fff; font-weight:600; }
.hs-stars{ display:inline-flex; gap:1px; color:var(--accent); font-size:13px; }
.hs-dot{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.5); }
.hs-intro h1{ margin-top:22px; font-size:clamp(2.5rem, 5.4vw, 4.6rem); font-weight:500; letter-spacing:-0.045em; line-height:1.02; text-wrap:balance; }
.hs-intro h1 em{ font-style:normal; color:var(--accent-tint); }
.hs-intro p{ max-width:56ch; margin:18px auto 0; font-size:clamp(16px, 1.3vw, 18.5px); line-height:1.6; color:rgba(255,255,255,.84); }
body.fe-in-quiz .hs-intro{ display:none; }
body.fe-in-quiz .hs .fe-main, body.fe-in-quiz.hs .fe-main{ justify-content:center; }

/* The card: a gold "Start here" tab on the first step */
.hs .fe-card{ max-width:760px; margin:0 auto; overflow:visible; }
.hs-tab{ position:absolute; left:50%; top:0; transform:translate(-50%, -50%); height:34px; padding:0 18px; border-radius:999px; display:inline-flex; align-items:center;
  background:var(--accent); color:var(--ink); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; box-shadow:0 12px 26px -12px rgba(185,140,50,.9); }
body.fe-in-quiz .hs-tab{ display:none; }
.hs-q-count{ font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.hs .f-step[data-step="1"] h2{ margin-top:8px; }
.hs .fe-card{ box-shadow:0 60px 120px -50px rgba(0,0,0,.8), 0 0 0 1px rgba(201,164,92,.35); }

@media (max-width:760px){
  .hs .fe-band{ height:min(100svh, 820px); }
  .hs-wall{ width:260%; opacity:.7; }
  .hs-col{ width:170px; }
  .hs .fe-main{ padding-top:34px; }
  .hs-intro{ margin-bottom:34px; }
  .hs-intro h1{ font-size:clamp(2.1rem, 9.4vw, 2.6rem); }
  .hs-intro p{ font-size:15.5px; }
  .hs-proof{ font-size:13px; padding:0 14px; }
  .hs-tab{ font-size:11px; }
}
@media (prefers-reduced-motion:reduce){ .hs-col-in{ animation:none; } }

/* ---------- Pass 3: two line title, pills in a row, square hero ---------- */
.hs .fe-band{ border-radius:0; }
.hs-intro{ max-width:1180px; }
.hs-intro h1{ font-size:clamp(2.5rem, 5vw, 4.4rem); }
@media (min-width:761px){
  .hs .fe-trust{ flex-wrap:nowrap; max-width:none; }
  .hs .fe-trust > span{ white-space:nowrap; font-size:13.5px; padding:0 14px; }
}

/* ---------- Below the quiz ---------- */
.hs-more{ position:relative; z-index:1; padding:clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 112px); background:#F5F7FA; }
body.fe-in-quiz .hs-more, .hs-more:has(~ .funnel-thanks.show){ display:none; }
.hs-more .wrap{ max-width:1180px; }
.hs-why{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.hs-why li{ padding:clamp(24px, 3vw, 34px); border-radius:var(--r-card); background:#fff; box-shadow:0 0 0 1px rgba(7,25,49,.05); text-align:center; }
.hs-why-ic{ width:60px; height:60px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:var(--navy-grad); color:var(--accent-tint); font-size:27px; }
.hs-why h3{ margin-top:18px; font-size:19px; font-weight:500; letter-spacing:-0.02em; }
.hs-why p{ margin-top:8px; font-size:15px; line-height:1.6; color:var(--muted); }
.hs-faq{ margin-top:clamp(56px, 7vw, 96px); }
.hs-cta{ margin-top:clamp(48px, 6vw, 80px); padding:clamp(40px, 6vw, 64px) 24px; border-radius:var(--r-sec); text-align:center; color:#fff;
  background:radial-gradient(50% 90% at 86% 0%, rgba(201,164,92,.2) 0%, rgba(201,164,92,0) 62%), var(--navy-grad); }
.hs-cta > p{ margin:12px auto 26px; font-size:16.5px; color:rgba(255,255,255,.82); }

/* ---------- Thank you: live search + feed ---------- */
.hs-t-idx .wrap{ max-width:1320px; text-align:center; }
.hs-t-idx .h2{ margin-bottom:24px; }
.idx-live{ display:grid; gap:14px; padding:clamp(12px, 1.6vw, 20px); border-radius:var(--r-sec); background:#fff; box-shadow:0 0 0 1px rgba(7,25,49,.05); text-align:left; }
.idx-live-search{ min-height:60px; }
.idx-live-feed{ min-height:420px; }
.idx-note{ margin-top:12px; font-size:13px; color:var(--muted); }
@media (max-width:760px){
  .hs-why{ grid-template-columns:1fr; gap:10px; }
  .hs-why li{ display:grid; grid-template-columns:52px 1fr; column-gap:14px; text-align:left; padding:18px; }
  .hs-why-ic{ width:52px; height:52px; font-size:23px; grid-row:span 2; margin:0; }
  .hs-why h3{ margin-top:2px; font-size:17px; }
  .hs-why p{ margin-top:2px; font-size:14px; }
  .hs-cta{ border-radius:24px; }
  .hs-cta .pill{ width:100%; justify-content:space-between; }
  .idx-live{ padding:10px; border-radius:22px; }
}
.hs .fe-main{ max-width:1240px; min-height:0; }
.hs-intro h1{ font-size:clamp(2.5rem, 4.6vw, 4.2rem); }
/* Soft fade from the navy wall into the page, and room above the card mid-quiz */
.hs .fe-band{ -webkit-mask-image:linear-gradient(180deg, #000 72%, transparent 100%); mask-image:linear-gradient(180deg, #000 72%, transparent 100%); }
body.hs.fe-in-quiz .fe-main{ padding-top:clamp(64px, 12vh, 130px); }
@media (max-width:760px){ body.hs.fe-in-quiz .fe-main{ padding-top:40px; } }
/* Full navy behind the whole card (home-search.js sizes the band to the card),
   just a short soft edge below it; lighter card shadow. */
.hs .fe-band{ -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%); mask-image:linear-gradient(180deg, #000 calc(100% - 90px), transparent 100%); }
.hs .fe-card{ box-shadow:0 30px 60px -36px rgba(7,25,49,.45), 0 0 0 1px rgba(201,164,92,.35); }
@media (max-width:760px){ .hs .fe-main{ padding-top:44px; } .hs-intro{ margin-bottom:38px; } }