/* css/pages/search.css : Home Search (brief 5.6) in the cinematic system. Loaded after city.css. Unlayered on purpose.
   Award round (2026-09-28, change-plan §3.9, feedback items 17, 21-24) and round 5 (2026-09-29, playbook §3.9, items
   23 and 32): bone with two ink moments, THE SIGNAL (js/scenes/signal.js, an ink plate that opens to bone) before the
   portal wishlist, him and his proof, the Zillow text, and the shared text-me ending (site.css §14). Round 6 (the scroll
   review, 2026-09-29): the payoff's banner, ring and bloom, the peak line, the floor's fade into the paper, the live
   portal card over the form, T1's three stills, the Zillow demo and the proof's scrubbed hairlines. Round 7 (Ashton,
   2026-09-29: "fantastic job", the search is "a little bit dull", the homes should be crisp and real): the opening is
   THE LIVE SEARCH (a sliding mode pill, a glowing budget track, beds and baths that tick, a tilted live map whose area
   chips light their town, an illustrative "homes like this" count that rolls), the wishlist's chips pop and its budget
   glows, and the Signal's pictures are crisp stills from his own listing films (js/scenes/signal.js). */

/* a porcelain surface for the search pill and the text preview (it follows the theme; a neutral white since the
   2026-09-30 white sweep) */
.page--search { --porcelain: #FAF9F8; --porcelain-edge: rgba(255, 255, 255, .9); }
:root[data-theme="dark"] .page--search { --porcelain: #1E1D1B; --porcelain-edge: rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--search { --porcelain: #1E1D1B; --porcelain-edge: rgba(255, 255, 255, .06); } }

/* ------------------------------------------------------------------ opening (bone): THE LIVE SEARCH (search.js initLive).
   Left: the headline and the search (a sliding mode pill, the where pill, a glowing budget track, beds and baths that
   tick). Right: a porcelain card with the live map (a tilted plane of little listings, the area's lens, pins that stand
   up), the rolling "homes like this" count (labelled an illustration) and the area chips. */
.sr-hero > .container { padding-block: clamp(48px, 7vh, 96px) clamp(36px, 5.5vh, 72px); }
.sr-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .sr-hero__grid { grid-template-columns: minmax(0, 13fr) minmax(360px, 10fr); } }
.sr-hero__copy { display: grid; justify-items: start; gap: 24px; min-width: 0; }
.sr-hero h1 { font-weight: 300; font-size: clamp(3rem, 6vw, 6.25rem); line-height: .9; letter-spacing: -.055em; color: var(--ink); }
.sr-hero h1 .kicker { display: block; font-size: 12px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); margin-bottom: clamp(16px, 2vw, 26px); line-height: 1.5; }
.sr-hero h1 .h1-main { display: block; }
.sr-hero h1 em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--blue-text); letter-spacing: -.015em; }
.sr-hero__rental { transition: color var(--dur-2); }
.sr-hero__rental .is-sm { display: none; }
@media (max-width: 559px) { .sr-hero__rental { font-size: 12px; letter-spacing: .12em; } .sr-hero__rental .is-lg { display: none; } .sr-hero__rental .is-sm { display: inline; } }
.sr-hero__rental.is-lit { color: var(--blue-text); }

.launcher { display: grid; gap: 14px; width: min(100%, 620px); }
/* Buy / Rent / Invest: a dark pill slides to the choice (without JS, the pressed button fills) */
.launcher__mode { position: relative; display: inline-flex; justify-self: start; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); }
.launcher__mode button { position: relative; z-index: 1; min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); transition: background-color var(--dur-2), color .35s var(--ease-out); }
.launcher__mode button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.launcher__thumb { position: absolute; z-index: 0; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--ink); box-shadow: 0 8px 18px -10px rgba(21, 19, 17, .7); opacity: 0; transition: transform .55s cubic-bezier(.34, 1.36, .64, 1), width .45s var(--ease-out), opacity .2s; }
.launcher__mode.has-thumb .launcher__thumb { opacity: 1; }
.launcher__mode.has-thumb button[aria-pressed="true"] { background: transparent; }
.launcher__pill { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 8px 8px 8px 22px; border-radius: 999px; background: var(--porcelain); border: 1px solid var(--line); box-shadow: 0 24px 48px -36px rgba(21, 19, 17, .45); transition: border-color var(--dur-2), box-shadow var(--dur-3); }
.launcher__pill:focus-within { border-color: var(--ink); box-shadow: 0 0 0 4px rgba(40, 82, 229, .14), 0 24px 48px -36px rgba(21, 19, 17, .45); }
.launcher__icon { color: var(--muted); }
.launcher__input { flex: 1; min-width: 0; width: 0; /* a search input's intrinsic width would widen the column at 320 */ height: 48px; padding: 0; font: 300 clamp(1.125rem, 2vw, 1.5rem)/1.2 var(--sans); letter-spacing: -.02em; color: var(--ink); background: transparent; border: 0; outline: none; }
.launcher__input::placeholder { color: var(--muted); opacity: 1; }
.launcher__go { flex: none; border-radius: 999px; min-height: 50px; }
.launcher__go:active { transform: scale(.96); }
.launcher__note { font-size: 13px; color: var(--muted); }
@media (max-width: 559px) { .launcher__go span { display: none; } .launcher__go { padding: 0 16px; } .launcher__pill { padding-left: 16px; } }

/* the filters: a budget on a glowing track, and beds and baths steppers */
.lf { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px 20px; align-items: end; padding: 16px 18px 14px; border-radius: 22px; background: color-mix(in srgb, var(--porcelain) 72%, transparent); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 559px) { .lf { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 14px 12px; } .lf__price { grid-column: 1 / -1; } }
.lf__label { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.lf__label label { cursor: pointer; }
.lf__val { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.lf__val.is-tick { animation: lf-tick .3s var(--ease-out); }
@keyframes lf-tick { from { transform: translate3d(0, 4px, 0); opacity: .4; } to { transform: none; opacity: 1; } }
.lf__price { position: relative; min-width: 0; }
.lf__price::after { content: ""; position: absolute; left: 0; bottom: 11px; height: 8px; width: var(--fill, 19%); border-radius: 8px; background: #5B7BFF; filter: blur(8px); opacity: .55; pointer-events: none; transition: opacity .25s; }
.lf__price:has(.lf__range:active)::after { opacity: .9; }
.lf__range { display: block; width: 100%; height: 30px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.lf__range::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg, #1F44D6 0, #5B7BFF calc(var(--fill) - 2%), #9DB0FF var(--fill), color-mix(in srgb, var(--ink) 13%, transparent) var(--fill)); }
.lf__range::-moz-range-track { height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 14%, transparent); }
.lf__range::-moz-range-progress { height: 4px; border-radius: 4px; background: linear-gradient(90deg, #2852E5, #6F8CFF); box-shadow: 0 0 12px rgba(40, 82, 229, .6); }
.lf__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2852E5; box-shadow: 0 0 0 6px rgba(40, 82, 229, .12), 0 6px 16px -4px rgba(40, 82, 229, .7); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.lf__range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2852E5; box-shadow: 0 0 0 6px rgba(40, 82, 229, .12), 0 6px 16px -4px rgba(40, 82, 229, .7); }
.lf__range:active::-webkit-slider-thumb, .lf__range:focus-visible::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(40, 82, 229, .16), 0 0 22px rgba(40, 82, 229, .55); }
.lf__range:focus-visible { outline: none; }
.lf__range:focus-visible::-webkit-slider-runnable-track { box-shadow: 0 0 0 3px rgba(40, 82, 229, .2), 0 0 14px -2px rgba(40, 82, 229, .45); }
.stepper { display: inline-flex; align-items: center; gap: 2px; height: 44px; padding: 3px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.stepper__btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: var(--ink); background: var(--porcelain); box-shadow: 0 0 0 1px var(--line), 0 4px 10px -6px rgba(21, 19, 17, .45); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), background-color .2s, color .2s, opacity .2s; }
.stepper__btn .icon { width: 16px; height: 16px; }
.stepper__btn:hover:not(:disabled) { color: var(--blue-text); }
.stepper__btn:disabled { opacity: .35; cursor: default; box-shadow: 0 0 0 1px var(--line); }
.stepper__btn.is-press { animation: st-press .32s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes st-press { 40% { transform: scale(.84); background: #2852E5; color: #FFFFFF; } }
.stepper__val { position: relative; display: grid; min-width: 3.4ch; height: 38px; overflow: hidden; font-size: 1.0625rem; font-weight: 500; color: var(--ink); text-align: center; }
.stepper__val > span { grid-area: 1 / 1; display: grid; place-items: center; }
.stepper__val > .is-in.is-up { animation: st-in-up .4s cubic-bezier(.16, 1, .3, 1) both; }
.stepper__val > .is-in.is-down { animation: st-in-down .4s cubic-bezier(.16, 1, .3, 1) both; }
.stepper__val > .is-out.is-up { animation: st-out-up .4s cubic-bezier(.16, 1, .3, 1) both; }
.stepper__val > .is-out.is-down { animation: st-out-down .4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes st-in-up { from { transform: translate3d(0, 100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-in-down { from { transform: translate3d(0, -100%, 0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes st-out-up { to { transform: translate3d(0, -100%, 0); opacity: 0; } }
@keyframes st-out-down { to { transform: translate3d(0, 100%, 0); opacity: 0; } }

/* the live card: the count, the map, the chips */
.sr-live { position: relative; display: grid; gap: 6px; min-width: 0; padding: clamp(18px, 2vw, 26px); border-radius: 30px; background: var(--porcelain);
  box-shadow: inset 0 0 0 1px var(--porcelain-edge), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 40px 80px -48px rgba(21, 19, 17, .55), 0 18px 30px -26px rgba(40, 82, 229, .35); }
.sr-live__head { position: relative; z-index: 2; display: grid; gap: 2px; }
.sr-live__n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.sr-live__num { font-size: clamp(2.75rem, 4.4vw, 3.75rem); font-weight: 300; line-height: 1; letter-spacing: -.045em; color: var(--ink); }
.sr-live__unit { font-size: 1.0625rem; color: var(--ink-2); }
.sr-live__where { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0; font-size: 14px; color: var(--muted); }
.sr-live__where > span:first-child { color: var(--blue-text); font-weight: 500; }
.sr-live__tag { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
.roll__row { display: inline-flex; }
.roll { display: inline-block; height: 1em; overflow: hidden; }
.roll__s { display: flex; flex-direction: column; transition: transform .85s cubic-bezier(.16, 1, .3, 1); }
.roll__s > i { display: block; height: 1em; line-height: 1; font-style: normal; text-align: center; }
.roll__sep { display: inline-block; }
.roll.is-new { animation: roll-new .6s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes roll-new { from { opacity: 0; transform: translate3d(0, .35em, 0); } to { opacity: 1; transform: none; } }

/* the map: a porcelain plane, tilted; the pins stand up off it and face you */
.sr-map { --tx: 54deg; --tz: -20deg; position: relative; aspect-ratio: 1.5; margin: -4px -8px 4px; perspective: 1100px; }
.sr-map__tilt { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d;
  transform: rotateY(calc(var(--px, 0) * 7deg)) rotateX(calc(var(--py, 0) * -5deg)); transition: transform .9s var(--ease-out); }
.sr-map__plane { position: relative; width: 72%; aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--tx)) rotateZ(var(--tz)); border-radius: 22px;
  background: radial-gradient(120% 90% at 40% 30%, color-mix(in srgb, var(--porcelain) 70%, #FFFFFF), var(--paper) 78%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent), 0 30px 50px -24px rgba(21, 19, 17, .45); }
.sr-map__field { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; }
.sr-pin { position: absolute; left: calc(var(--x) * 100%); top: calc(var(--y) * 100%); width: 0; height: 0; transform-style: preserve-3d; }
.sr-pin__b { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  transform: translateX(-50%) rotateZ(calc(-1 * var(--tz))) rotateX(calc(-1 * var(--tx))); pointer-events: none; }
.sr-pin__l { padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--muted); background: color-mix(in srgb, var(--porcelain) 80%, transparent); transition: color .3s, background-color .3s, transform .5s cubic-bezier(.34, 1.56, .64, 1); transform: translate3d(0, 4px, 0) scale(.92); }
.sr-pin__stem { display: block; width: 1.5px; height: 5px; background: color-mix(in srgb, var(--ink) 40%, transparent); transition: height .6s cubic-bezier(.34, 1.56, .64, 1), background-color .3s; }
.sr-pin__dot { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); transition: background-color .3s, box-shadow .3s, transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.sr-pin.is-near .sr-pin__l { opacity: 0; transform: translate3d(0, 6px, 0) scale(.85); }
.sr-pin__l { transition: color .3s, background-color .3s, opacity .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.sr-pin.is-on .sr-pin__l { color: #FFFFFF; background: #2852E5; transform: none; box-shadow: 0 8px 16px -8px rgba(40, 82, 229, .8); }
.sr-pin.is-on .sr-pin__stem { height: 34px; background: #2852E5; }
/* a town just north of the picked one lifts its name above the picked chip (2026-09-30, feedback #20: Anna under McKinney) */
.sr-pin.is-lift .sr-pin__stem { height: 50px; background: color-mix(in srgb, var(--ink) 22%, transparent); }
.sr-pin.is-on .sr-pin__dot { background: #2852E5; transform: scale(1.35); box-shadow: 0 0 0 6px rgba(40, 82, 229, .2), 0 0 16px rgba(40, 82, 229, .85); }

/* the area chips: they pop in, pop when picked, and the picked one glows blue */
.sr-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; position: relative; z-index: 2; }
.sr-chip { position: relative; display: inline-flex; cursor: pointer; }
.sr-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sr-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; font-size: 14px; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .25s, color .25s, box-shadow .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sr-chip:hover span { box-shadow: inset 0 0 0 1px var(--ink); }
.sr-chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-chip input:checked + span { color: #FFFFFF; background: #2852E5; box-shadow: 0 10px 20px -10px rgba(40, 82, 229, .9), inset 0 0 0 1px #2852E5; }
.sr-chip.is-preview span { color: #FFFFFF; background: #2852E5; box-shadow: 0 10px 20px -10px rgba(40, 82, 229, .9), inset 0 0 0 1px #2852E5; }
/* while the demo previews a town, only that chip looks picked: the checked one steps back */
.sr-chips.is-previewing .sr-chip input:checked + span { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.sr-chip.is-pop span { animation: chip-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
.sr-chip.is-pop::after { content: ""; position: absolute; inset: 0; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 rgba(40, 82, 229, .5); animation: chip-ring .6s var(--ease-out) forwards; }
@keyframes chip-pop { 0% { transform: scale(1); } 35% { transform: scale(.9); } 70% { transform: scale(1.07); } 100% { transform: scale(1); } }
@keyframes chip-ring { to { box-shadow: 0 0 0 12px rgba(40, 82, 229, 0); } }
@media (max-width: 999px) { .sr-live { border-radius: 26px; } }
@media (max-width: 559px) {
  .sr-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -4px; padding: 2px 4px 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .sr-chips::-webkit-scrollbar { display: none; }
  .sr-chip { flex: none; }
  .sr-map { aspect-ratio: 1.3; }
  .sr-map__plane { width: 76%; }
  .sr-pin__l { font-size: 9.5px; letter-spacing: .1em; padding: 2px 6px; }
}
/* the hand-off: his face and a sliver of what's next (it takes you to the top of the Signal) */
.sr-hero__me { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-top: clamp(22px, 3.2vh, 34px); border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.sr-hero__me picture { flex: none; display: block; }
.sr-hero__av { display: block; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line), 0 12px 24px -14px rgba(21, 19, 17, .55); }
.sr-hero__me-t { font-size: 1.0625rem; line-height: 1.4; color: var(--ink-2); }
.sr-hero__me-t b { font-weight: 500; color: var(--ink); transition: color var(--dur-2); }
.sr-hero__me-i { flex: none; width: 20px; height: 20px; color: var(--blue-text); transition: transform .5s var(--ease-out); }
.sr-hero__me:hover b, .sr-hero__me:focus-visible b { color: var(--blue-text); }
.sr-hero__me:hover .sr-hero__me-i, .sr-hero__me:focus-visible .sr-hero__me-i { transform: translateY(4px); }
@media (max-width: 559px) { .sr-hero__me { align-items: flex-start; } .sr-hero__me-t { font-size: 1rem; } .sr-hero__me-t > span { display: block; } .sr-hero__me-i { margin-top: 14px; } }
@media (max-width: 767px) { .sr-hero h1 { font-size: clamp(2.75rem, 12vw, 3.75rem); } .sr-hero h1 .kicker { letter-spacing: .18em; font-size: 11px; } .sr-hero > .container { padding-block: 36px clamp(44px, 8vh, 96px); } }
/* T0 (reduced motion, paused): nothing slides or ticks; every state shows at once */
:root[data-motion="paused"] :is(.launcher__thumb, .roll__s, .sr-pin__l, .sr-pin__stem, .sr-pin__dot, .sr-chip span, .sr-map__tilt) { transition: none !important; }
:root[data-motion="paused"] :is(.stepper__val > span, .sr-chip span, .sr-chip::after, .lf__val) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.launcher__thumb, .roll__s, .sr-pin__l, .sr-pin__stem, .sr-pin__dot, .sr-chip span, .sr-map__tilt) { transition: none !important; }
  :is(.stepper__val > span, .sr-chip span, .sr-chip::after, .lf__val, .stepper__btn) { animation: none !important; }
}

/* ------------------------------------------------------------------ the portal: THE SIGNAL (js/scenes/signal.js), the page's
   first dark moment (Ashton 2026-09-28: "more wow factor", "dramatic lighting, possibly on a dark ink stage", "mix in some
   black"). A sticky full-bleed ink stage (the page canvas draws the scene over .sig__bg), the story's copy on top of it
   (left on wide screens, low on phones), scrubbed by one timeline in search.js. As the story ends the lights come up:
   --day (0 ink .. 1 the page's bone, set by search.js) fades the backdrop to paper while the scene turns transparent over
   it, and the heading returns in ink with "No cost, no commitment." Then the wishlist, on bone: over the left column
   beside the live scene on desktop, in the flow on phones. */
.page--search { --studio: #121110; }
:root[data-theme="dark"] .page--search { --studio: #080807; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .page--search { --studio: #080807; } }
/* --day flips the type between light-on-ink and ink-on-bone (eased); --dayc is the continuous progress; --dx --dy --dr are
   the flood of daylight (the scene sends its exact circle, so the page's ink and the scene open together) */
@property --day { syntax: '<number>'; inherits: true; initial-value: 0; }
.sig { --day: 0; --dayc: 0; --sig-ink: #0B0B0C; transition: --day .6s var(--ease-out);
  --sig-fg: color-mix(in srgb, #EDE7DC calc(100% - var(--day) * 100%), var(--ink));
  --sig-fg-2: color-mix(in srgb, #C9C2B6 calc(100% - var(--day) * 100%), var(--ink-2));
  --sig-muted: color-mix(in srgb, #8F897F calc(100% - var(--day) * 100%), var(--muted));
  --sig-line: color-mix(in srgb, rgba(237, 231, 220, .16) calc(100% - var(--day) * 100%), var(--line));
  --sig-blue: color-mix(in srgb, #8EA4FF calc(100% - var(--day) * 100%), var(--blue-text));
  position: relative; background: var(--paper); color: var(--sig-fg); }
/* overflow: clip (not hidden: no scroll box, so sticky still works) contains the backdrop: its -100vh margin lets it stay
   pinned to the chapter's very end, and without the clip its last 100vh would hang over the proof and Zillow sections */
.sig__pin { position: relative; overflow: clip; }
/* the backdrop sits UNDER the page canvas (z-index auto): ink with a soft lift behind the scene, fading to paper by --day */
.sig__bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; pointer-events: none; background: var(--paper); }
.sig__bg::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 64% 30%, #191A1F 0%, #0F0F12 46%, #0B0B0C 100%);
  -webkit-mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), transparent calc(var(--dr, -240px) - 110px), #000 var(--dr, -240px));
  mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), transparent calc(var(--dr, -240px) - 110px), #000 var(--dr, -240px)); }
/* the frame (copy, legend) sits over the canvas (z-index 2); it is the header's night zone until the lights come up */
.sig__frame { position: sticky; top: 0; z-index: 2; height: 100vh; height: 100svh; overflow: hidden; }
.sig__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); background-size: 96px; opacity: calc(.05 * (1 - var(--day))); mix-blend-mode: overlay; }
/* the arrival (playbook B4a, the plate): the ink rises out of the bone as a rounded plate a gutter in from the edges and
   opens to full bleed as it pins (--arr: 0 with the chapter at the foot of the screen, 1 pinned). The scene is drawn on
   the page's canvas UNDER this frame, so the plate is a paper mat over it: a rounded hole in a sheet of the page's bone. */
.sig { --plate-in: min(64px, 4.5vw); }
.sig__frame::before { content: ""; position: absolute; z-index: 6; top: 0; bottom: -40px; pointer-events: none;
  --e: clamp(0, calc(1 - var(--arr, 1) / .72), 1);
  left: calc(var(--e) * var(--e) * var(--plate-in)); right: calc(var(--e) * var(--e) * var(--plate-in));
  border-radius: calc(var(--e) * 34px) calc(var(--e) * 34px) 0 0;
  box-shadow: 0 0 0 100vmax var(--paper); }
@media (max-width: 767px) { .sig { --plate-in: min(18px, 4.6vw); } .sig__frame::before { border-radius: calc(var(--e) * 22px) calc(var(--e) * 22px) 0 0; } }
.sig--static .sig__frame::before { display: none; }
/* the tag and Skip wait for the ink (light type on the dusk gradient would be lost) */
.sig:not(.sig--static) :is(.sig__tag, .sig__skip) { opacity: clamp(0, (var(--arr, 1) - .55) * 2.6, 1); }
.sig__track { height: 420vh; height: 420svh; pointer-events: none; }   /* paced (js/core/pace.js): 9.75 beat weights, about 0.43 screen each */
/* the pacer's measuring box (search.js): the frame plus the track, from the pin's top */
.sig__pacebox { position: absolute; left: 0; top: 0; width: 1px; height: calc(100vh + 420vh); height: calc(100svh + 420svh); visibility: hidden; pointer-events: none; }
@media (max-width: 767px) {
  .sig__track { height: 530vh; height: 530svh; } /* phones: about 0.55 small screen per beat weight (fix pass 2026-10-02) */
  .sig__pacebox { height: calc(100vh + 530vh); height: calc(100svh + 530svh); }
}
:is(html.is-failsafe, :root:not(.cine-js)) .sig__track { height: 280vh; } /* the fail-safe and no script (no pacer): today's track */
.sig__stage { position: absolute; inset: 0; background: transparent !important; overflow: hidden; container-type: size; }
/* the stills (T1, no WebGL; T0; a failed stage): three frames rendered from the scene (the lenses, the feed, the phone),
   one sprite of 2640 x 2700 (wide cells 1440 x 900 stacked at x 0; tall cells 600 x 1300 at 1440 0, 2040 0, 1440 1300),
   each layer shown with cover. search.js stillMotion cross-fades them on the story's beats (and on the form's steps). */
.sig__still { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); background: #0B0B0C; overflow: hidden; }
.sig__still > i { position: absolute; inset: 0; opacity: 0; background-repeat: no-repeat;
  --cw: 1440; --ch: 900; --cx: 0; --cy: 0; --s: max(100cqw / var(--cw), 100cqh / var(--ch));
  background-size: calc(var(--s) * 2640) auto;
  background-position: calc((100cqw - var(--s) * var(--cw)) / 2 - var(--s) * var(--cx)) calc((100cqh - var(--s) * var(--ch)) / 2 - var(--s) * var(--cy)); }
.sig__still > i:nth-child(2) { --cy: 900; }
.sig__still > i:nth-child(3) { --cy: 1800; }
@container (max-aspect-ratio: 19 / 20) {
  .sig__still > i { --cw: 600; --ch: 1300; --cx: 1440; --cy: 0; }
  .sig__still > i:nth-child(2) { --cx: 2040; --cy: 0; }
  .sig__still > i:nth-child(3) { --cx: 1440; --cy: 1300; }
}
.sig.is-still .sig__still, .sig--static .sig__still { opacity: 1; }
.sig.is-still .sig__still > i, .sig--static .sig__still > i { background-image: url(../../assets/renders/search-signal.jpg); }
.sig--static .sig__still > i:nth-child(3) { opacity: 1; }
/* T1, the lenses still: your cities' lenses open (two masks growing from their centers), the names engrave in (a wipe
   across each plate), then the rest of the frame comes up (--open, --wipe, --all and the places, set by search.js) */
.sig.is-still:not(.sig--static):not(.is-docked) .sig__still > i:first-child {
  --ml: #000 calc(var(--open, 1) * 100% - 1.5%), transparent calc(var(--open, 1) * 100%);
  --mw: #000 calc(var(--wipe, 1) * 100%), transparent calc(var(--wipe, 1) * 100% + 1px);
  -webkit-mask-image: radial-gradient(var(--r0, 1px 1px) at var(--l0, 50% 50%), var(--ml)), radial-gradient(var(--r1, 1px 1px) at var(--l1, 50% 50%), var(--ml)), linear-gradient(90deg, var(--mw)), linear-gradient(90deg, var(--mw)), linear-gradient(rgb(0 0 0 / var(--all, 1)), rgb(0 0 0 / var(--all, 1)));
  mask-image: radial-gradient(var(--r0, 1px 1px) at var(--l0, 50% 50%), var(--ml)), radial-gradient(var(--r1, 1px 1px) at var(--l1, 50% 50%), var(--ml)), linear-gradient(90deg, var(--mw)), linear-gradient(90deg, var(--mw)), linear-gradient(rgb(0 0 0 / var(--all, 1)), rgb(0 0 0 / var(--all, 1)));
  -webkit-mask-position: 0 0, 0 0, var(--n0, 0 0), var(--n1, 0 0), 0 0; mask-position: 0 0, 0 0, var(--n0, 0 0), var(--n1, 0 0), 0 0;
  -webkit-mask-size: 100% 100%, 100% 100%, var(--ns0, 1px 1px), var(--ns1, 1px 1px), 100% 100%; mask-size: 100% 100%, 100% 100%, var(--ns0, 1px 1px), var(--ns1, 1px 1px), 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
/* T1 beside the form (desktop): the still for the step in view cross-fades in and drifts slowly */
.sig.is-still.is-docked .sig__still > i { transition: opacity .9s var(--ease-out); }
@media (prefers-reduced-motion: no-preference) { .sig.is-still.is-docked:not(.sig--static) .sig__still > i { animation: sig-drift 16s ease-in-out infinite alternate; } }
@keyframes sig-drift { from { transform: scale(1); } to { transform: scale(1.045) translate3d(-.6%, -.4%, 0); } }
/* T1: the sheet of light that sweeps the budget, the comet and the impact's flash (search.js places them) */
.sig__fx { display: none; }
.sig.is-still:not(.sig--static):not(.is-docked) .sig__fx { display: block; position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fx__sweep { position: absolute; left: -5%; right: -5%; height: 30%; top: calc((1 - var(--sweep, 0)) * 100% - 15%); opacity: var(--sweep-o, 0); mix-blend-mode: screen;
  background: linear-gradient(to top, transparent, rgba(170, 188, 255, .12) 40%, rgba(236, 242, 255, .55) 50%, rgba(170, 188, 255, .12) 60%, transparent); }
.fx__comet { position: absolute; left: 0; top: 0; width: min(26vw, 240px); height: 3px; border-radius: 2px; transform-origin: 100% 50%; opacity: var(--co, 0);
  transform: translate(calc(var(--cx, 0px) - min(26vw, 240px)), calc(var(--cy, 0px) - 1.5px)) rotate(calc(var(--ca, 0) * 1deg));
  background: linear-gradient(90deg, transparent, rgba(120, 146, 255, .45) 55%, #FFFFFF); box-shadow: 0 0 12px rgba(140, 164, 255, .8); }
.fx__comet::after { content: ""; position: absolute; right: -9px; top: -8px; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #fff 20%, rgba(160, 180, 255, .6) 45%, transparent 70%); }
.fx__flash { position: absolute; left: var(--fx, 60%); top: var(--fy, 45%); width: 70vmin; height: 70vmin; translate: -50% -50%; border-radius: 50%; opacity: var(--flash, 0); mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(170, 188, 255, .4) 26%, transparent 62%); }
/* T1: the market as CSS, a field of dark glass tiles in perspective that streams toward you with the scroll (--flow) and
   gives way as the lenses open (search.js fades it). Lit rows are the listings' photos glowing like screens. */
.sig__field { display: none; }
.sig.is-still:not(.sig--static) .sig__field { display: block; position: absolute; left: -110%; right: -110%; bottom: 0; height: 320%; pointer-events: none;
  transform-origin: 50% 100%; transform: perspective(1200px) rotateX(60deg);
  background-image:
    repeating-linear-gradient(90deg, #050507 0 5px, transparent 5px 58px),
    repeating-linear-gradient(0deg, #050507 0 5px, transparent 5px 44px),
    repeating-linear-gradient(0deg, transparent 0 14px, rgba(170, 182, 236, .22) 14px 20px, transparent 20px 44px),
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(200, 208, 240, .08) 11px 44px, transparent 44px 58px),
    linear-gradient(to top, #343846, #181A22 55%, #0C0D11);
  background-position: 0 var(--flow, 0px), 0 var(--flow, 0px), 0 var(--flow, 0px), 0 var(--flow, 0px), 0 0;
  -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 62%); mask-image: linear-gradient(to top, #000 8%, transparent 62%); }
.sig__scrim { position: absolute; inset: 0; pointer-events: none; }
.sig__scrim::before, .sig__scrim::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sc) 90%, transparent) 0%, color-mix(in srgb, var(--sc) 74%, transparent) 24%, color-mix(in srgb, var(--sc) 30%, transparent) 40%, transparent 52%), linear-gradient(0deg, color-mix(in srgb, var(--sc) 84%, transparent) 0, color-mix(in srgb, var(--sc) 52%, transparent) 9%, transparent 26%); }
/* as the lights come up, the floor dissolves into the paper at the foot of the frame (no hard edge when the pin lets go) */
.sig__fade { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(130px, 19vh, 180px); pointer-events: none; opacity: var(--dayc, 0);
  background: linear-gradient(to top, var(--paper) 10%, color-mix(in srgb, var(--paper) 72%, transparent) 42%, transparent); }
.sig--static .sig__fade { display: none; }
.sig__scrim::before { --sc: #08080A;
  -webkit-mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), transparent calc(var(--dr, -240px) - 110px), #000 var(--dr, -240px));
  mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), transparent calc(var(--dr, -240px) - 110px), #000 var(--dr, -240px)); }
/* by day, the same shape in paper (it keeps the heading clear of the field of cards), inside the flood of light */
.sig__scrim::after { --sc: var(--paper);
  -webkit-mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), #000 calc(var(--dr, -240px) - 110px), transparent var(--dr, -240px));
  mask-image: radial-gradient(circle at var(--dx, 70%) var(--dy, 45%), #000 calc(var(--dr, -240px) - 110px), transparent var(--dr, -240px)); }

/* the copy column */
.sig__copy { position: absolute; left: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); top: calc(var(--header-h) + 5vh); bottom: 9vh; width: min(32rem, 34vw); pointer-events: none; }
.sig__copy a, .sig__copy button { pointer-events: auto; }
.sig__cap { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.sig__cap--intro { top: 46%; right: auto; width: min(44vw, 40rem); display: grid; grid-template-columns: minmax(0, 1fr); }
/* the lead and the close share one place: the close takes over as the lights come up */
.sig__lead, .sig__close { grid-row: 3; grid-column: 1; align-self: start; }
.sig .caps { color: var(--sig-fg-2); }
.sig__h2 { margin: 18px 0 22px; font-weight: 300; font-size: clamp(2.9rem, 4.1vw, 4.9rem); line-height: .95; letter-spacing: -.05em; color: var(--sig-fg); }
.sig__h2 em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.015em; color: var(--sig-blue); }
.sig__l { display: block; overflow: clip; padding-bottom: .08em; margin-bottom: -.08em; }
.sig__l > span { display: inline-block; }
.sig__lead { max-width: 30ch; font-size: clamp(1.125rem, 1.35vw, 1.3125rem); line-height: 1.5; color: var(--sig-fg-2); }
.sig__cap--alerts { right: auto; width: min(46vw, 44rem); }
.sig__cap--alerts .caps { margin-bottom: 18px; }
/* the peak: "New match, / now." rises by line, big; "now." catches the light as the ring leaves the phone */
.sig__k { font-weight: 300; font-size: clamp(3.4rem, 6.3vw, 6.4rem); line-height: .94; letter-spacing: -.055em; color: var(--sig-fg); }
.sig__k .sig__l { padding-bottom: .12em; margin-bottom: -.12em; }
.sig__k em { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.36em; line-height: .9; letter-spacing: -.01em; color: var(--sig-blue); transition: color .6s; }
.sig__k .sig__l:last-child { transition: filter .6s var(--ease-out); }
.sig.is-popped .sig__k em { color: #B4C3FF; }
.sig.is-popped .sig__k .sig__l:last-child { filter: drop-shadow(0 0 14px rgba(91, 123, 255, .75)) drop-shadow(0 0 34px rgba(40, 82, 229, .45)); }
.sig__t { max-width: 28ch; font-size: clamp(1.0625rem, 1.25vw, 1.25rem); line-height: 1.5; color: var(--sig-fg-2); }
/* the close, in daylight: the heading back in ink, then the promise and the way in */
.sig__close { display: grid; justify-items: start; gap: 22px; margin-top: 4px; }
.sig__nocost { font-weight: 300; font-size: clamp(1.625rem, 2.2vw, 2.25rem); line-height: 1.1; letter-spacing: -.035em; color: var(--sig-fg); }
.sig__nocost em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--sig-blue); }
.sig__cta { min-height: 54px; padding-inline: 26px; border-radius: 999px; }
.sig__cta .icon { transition: transform .4s var(--ease-out); }
.sig__cta:hover .icon, .sig__cta:focus-visible .icon { transform: translateY(3px); }

/* the portal's features, as the story ends */
.sig__cap--end { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.sig__cap--end li { padding-left: 18px; border-left: 2px solid var(--sig-line); font-size: clamp(1rem, 1.15vw, 1.125rem); line-height: 1.5; color: var(--sig-fg-2); max-width: 30ch; }
.sig__cap--end li b { display: block; margin-bottom: 2px; font-weight: 300; font-size: clamp(1.75rem, 2.5vw, 2.5rem); letter-spacing: -.04em; line-height: 1.1; color: var(--sig-fg); }
.sig__cap--end li:first-child { border-left-color: #2852E5; }

/* the search, as it builds: a frosted glass panel, the count of homes that fit falling as each answer lands */
.sig__hud { position: absolute; left: 0; bottom: 0; width: min(100%, 27rem); padding: 18px 18px 16px; border-radius: 20px;
  background: rgba(20, 20, 23, .62); border: 1px solid rgba(237, 231, 220, .16); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -34px rgba(0, 0, 0, .9); color: #EDE7DC; }
.hud__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hud__label { font-size: 11px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: #8F897F; }
.hud__count { font-size: 14px; color: #C9C2B6; white-space: nowrap; }
.hud__count b { display: inline-block; min-width: 3.4ch; text-align: right; margin-right: 4px; font-weight: 500; font-size: 20px; letter-spacing: -.02em; color: #EDE7DC; font-variant-numeric: tabular-nums; }
.hud__chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; min-height: 76px; align-content: flex-start; }
.hud__chips li { display: inline-flex; align-items: center; min-height: 32px; padding: 0 13px; border-radius: 999px; font-size: 14px; color: #EDE7DC; background: rgba(237, 231, 220, .08); border: 1px solid rgba(237, 231, 220, .22); }
.hud__chips li.is-blue { background: #2852E5; border-color: #2852E5; color: #fff; }
.hud__alerts { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding-top: 12px; border-top: 1px solid rgba(237, 231, 220, .16); }
.hud__alerts b { display: block; font-size: 15px; font-weight: 500; color: #EDE7DC; }
.hud__alerts small { display: block; font-size: 13px; color: #8F897F; }
.hud__toggle { position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: rgba(237, 231, 220, .16); --on: 0; }
.hud__toggle::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #2852E5; opacity: var(--on); }
.hud__toggle::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transform: translateX(calc(var(--on) * 18px)); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* the payoff (search.js payoff(), on the story's clock): his blue alert drops in from behind the top edge of the phone's
   glass (clipped there) at the width of the notification's place, settles, then lifts off the glass and grows toward you
   with back.out(1.6), a touch wider than the phone, a shadow opening under it (--lift); its heart fills (--heart). At the
   tuck it settles back onto the glass and the 3D card takes its place. Its photo is the same painted dusk picture as the
   3D card (never a real listing). The ring: one soft blue ring leaving the phone at the pop (--r). The bloom: the T1 still's
   stand-in for the scene's blue backdrop bloom, pulsing with the buzz. */
.sig__alert { --heart: 0; --lift: 0; position: absolute; z-index: 1; left: 0; top: 0; width: 300px; pointer-events: none; visibility: hidden; opacity: 0;
  transform-origin: 50% 50%; will-change: transform; border-radius: 20px; background: #2852E5; color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 calc(8px + var(--lift) * 42px) calc(20px + var(--lift) * 64px) calc(-12px - var(--lift) * 20px) rgba(0, 0, 0, .88),
    0 calc(var(--lift) * 20px) calc(var(--lift) * 80px) calc(var(--lift) * -20px) rgba(40, 82, 229, .8); }
.al__photo { display: block; width: 100%; height: auto; aspect-ratio: 688 / 250; object-fit: cover; object-position: 50% 58%; border-radius: 20px 20px 0 0; background: #10121C; }
.al__body { position: relative; display: grid; padding: 13px 18px 16px; }
.al__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: rgba(255, 255, 255, .8); }
.al__av { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .55); }
.al__now { margin-left: auto; color: rgba(255, 255, 255, .66); }
.al__k { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.al__k i { width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px rgba(255, 255, 255, .24); }
.al__t { margin-top: 6px; padding-right: 36px; font-size: clamp(1.0625rem, 1.35vw, 1.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.al__s { font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .8); }
.al__heart { position: absolute; right: 16px; bottom: 16px; width: 28px; height: 28px; fill: rgba(255, 255, 255, var(--heart)); stroke: #FFFFFF; stroke-width: 1.6; stroke-linejoin: round;
  scale: calc(1 + sin(var(--heart) * 180deg) * .45); }
@media (max-width: 559px) { .al__body { padding: 10px 13px 12px; } .al__top { margin-bottom: 6px; font-size: 11px; } .al__t { font-size: 1rem; padding-right: 30px; } .al__s { font-size: 13px; } .al__heart { width: 24px; height: 24px; right: 12px; bottom: 12px; } }
.sig__ring { position: absolute; left: 0; top: 0; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; transform-origin: 50% 50%;
  box-shadow: 0 0 0 2px rgba(128, 152, 255, .95), 0 0 28px 5px rgba(91, 123, 255, .42), inset 0 0 26px rgba(91, 123, 255, .3);
  opacity: calc(min(1, var(--r, 0) * 14) * (1 - var(--r, 0))); }
.sig--static .sig__ring { display: none; }
.sig__bloom { display: none; }
.sig.is-still:not(.sig--static) .sig__bloom { display: block; position: absolute; left: var(--bx, 65%); top: var(--by, 45%); width: var(--bs, 60vmin); height: var(--bs, 60vmin); translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .9s var(--ease-out);
  background: radial-gradient(closest-side, rgba(40, 82, 229, .5), rgba(40, 82, 229, .16) 52%, transparent); }
.sig.is-still.is-match:not(.sig--static):not(.is-docked) .sig__bloom { opacity: calc(1 - var(--dayc, 0)); }
@media (prefers-reduced-motion: no-preference) {
  .sig.is-still.is-buzz .sig__bloom { animation: sig-pulse .9s var(--ease-out) both; }
  .sig.is-still.is-buzz .sig__alert { animation: sig-shake .3s linear both; }
}
@keyframes sig-pulse { 0% { scale: .92; filter: brightness(1); } 35% { scale: 1.12; filter: brightness(1.9); } 100% { scale: 1; filter: brightness(1); } }
@keyframes sig-shake { 0%, 100% { translate: 0 0; } 8.3% { translate: 2.5px 0; } 25% { translate: -2.5px 0; } 41.6% { translate: 2.5px 0; } 58.3% { translate: -2.5px 0; } 75% { translate: 2px 0; } 91.6% { translate: -1.5px 0; } }

.sig__tag { position: absolute; right: var(--gutter); bottom: 22px; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sig-fg-2); text-shadow: 0 1px 8px color-mix(in srgb, var(--sig-ink) calc(100% - var(--day) * 100%), var(--paper)); }
.sig__skip { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 18px); color: var(--sig-fg-2); font-size: 12px; }
.sig__skip:hover { color: var(--sig-fg); }
/* the steps, a quiet readout along the foot of the frame (desktop): each fills as the story passes it; a click jumps */
.sig__legend { position: absolute; left: calc(max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))) + min(32rem, 34vw) + clamp(32px, 4vw, 72px)); right: calc(var(--gutter) + 19rem); bottom: 18px; display: flex; gap: clamp(12px, 1.6vw, 28px); }
.sig__legend button { position: relative; flex: 1; min-width: 0; min-height: 44px; padding: 14px 0 6px; text-align: left; white-space: nowrap; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--sig-fg-2); transition: color .3s, text-shadow .3s; --fill: 0; }
.sig__legend button::before, .sig__legend button::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--sig-line); }
.sig__legend button::after { background: #5B7BFF; transform-origin: 0 50%; transform: scaleX(var(--fill)); }
.sig__legend button:hover, .sig__legend button:focus-visible, .sig__legend button.is-on { color: var(--sig-fg); }
.sig.is-match .sig__legend button:last-child { color: color-mix(in srgb, #B4C3FF calc(100% - var(--day) * 100%), var(--blue-text)); text-shadow: 0 0 12px rgba(91, 123, 255, calc(.6 - var(--day) * .6)); }
.sig.is-match .sig__legend button:last-child::after { background: #7F98FF; box-shadow: 0 0 10px rgba(91, 123, 255, .8); }

/* the form, after the story: on bone. Desktop: it rises over the left column while the scene steps right and goes live
   (the pin holds the stage); phones: in the flow after the chapter. */
.sig__build { position: relative; z-index: 3; color: var(--ink); }
.sig__build-inner { width: min(36rem, 42vw); margin-left: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); padding-block: 24vh 9vh; display: grid; gap: 18px; }
.sig__build .caps { color: var(--muted); }
.portal__trust { font-size: 14px; color: var(--ink-2); }
/* his face at the top of the form (the one who builds it) */
.portal__me { display: flex; align-items: center; gap: 14px; max-width: 34rem; font-size: 1.0625rem; line-height: 1.45; color: var(--ink-2); }
.portal__me picture { flex: none; display: block; }
.portal__av { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.portal__me b { font-weight: 500; color: var(--ink); }
/* the live portal card over the form (phones; T1 desktop): sticky, frosted porcelain. The four questions fill as you
   scroll through them, your answers pop in as chips, and at the invite a new match lands on its little phone. */
.sig__mini { display: none; }
@media (max-width: 999px) { .sig__mini { display: block; position: sticky; top: calc(var(--header-h) + 10px); z-index: 5; margin: 2px 0 4px; } }
@media (min-width: 1000px) { .sig.is-still .sig__mini { display: block; position: sticky; top: calc(var(--header-h) + 16px); z-index: 5; } }
.sig__mini { transition: opacity .45s var(--ease-out, ease), translate .45s var(--ease-out, ease); }
.sig__mini.is-done { opacity: 0; translate: 0 -12px; pointer-events: none; }
.mini { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--porcelain) 86%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: inset 0 0 0 1px var(--porcelain-edge), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 20px 40px -26px rgba(21, 19, 17, .5); }
.mini__phone { position: relative; flex: none; width: 34px; height: 64px; border-radius: 9px; overflow: hidden;
  background: radial-gradient(90% 60% at 80% 100%, rgba(40, 82, 229, .6), transparent), linear-gradient(170deg, #1C2238, #0A0C16 72%);
  box-shadow: inset 0 0 0 1.5px #CBCED6, inset 0 0 0 2.5px #0B0C10, 0 8px 14px -8px rgba(0, 0, 0, .55); }
.mini__phone::before { content: ""; position: absolute; left: 32%; right: 32%; top: 10px; height: 5px; border-radius: 2px; background: rgba(248, 246, 242, .82); }
/* its screen: the market streaming past (tiny lit listings), until the invite's new match lands and it stops */
.mini__phone::after { content: ""; position: absolute; left: 5px; right: 5px; top: 20px; bottom: 6px; border-radius: 3px; opacity: .9;
  background: repeating-linear-gradient(180deg, rgba(236, 240, 255, .55) 0 6px, rgba(236, 240, 255, .12) 6px 7px, transparent 7px 10px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
  background-position: 0 var(--mf, 0px); transition: opacity .4s; }
@media (prefers-reduced-motion: no-preference) { .mini__phone::after { animation: mini-stream 2.4s linear infinite; } }
@keyframes mini-stream { to { background-position: 0 -40px; } }
.sig__mini.is-invite .mini__phone::after { opacity: 0; animation-play-state: paused; }
.mini__note { position: absolute; z-index: 1; left: 4px; right: 4px; top: 21px; height: 15px; border-radius: 4px; background: #2852E5; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
  opacity: 0; transform: translateY(-22px); transition: transform .7s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.sig__mini.is-invite .mini__note { opacity: 1; transform: none; }
.mini__main { flex: 1; min-width: 0; display: grid; gap: 7px; }
.mini__top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.mini__top b { font-weight: 600; color: var(--ink); }
.mini__step { color: var(--blue-text); letter-spacing: .14em; }
.mini__bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.mini__bar i { position: relative; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.mini__bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: #2852E5; transform-origin: 0 50%; transform: scaleX(var(--f, 0)); }
.mini__chips { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; overflow: hidden; min-height: 26px;
  -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent); mask-image: linear-gradient(90deg, #000 84%, transparent); }
.mini__chips li { flex: none; display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; white-space: nowrap; color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.mini__chips li.is-blue { background: #2852E5; color: #FFFFFF; box-shadow: none; }
.mini__chips li.is-more { color: var(--muted); }
.mini__chips li.is-ghost { width: 58px; background: transparent; box-shadow: none; border: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); }
.mini__chips li.is-ghost:nth-child(2) { width: 74px; } .mini__chips li.is-ghost:nth-child(3) { width: 46px; }
@media (prefers-reduced-motion: no-preference) {
  .mini__chips li.is-new { animation: mini-pop .55s cubic-bezier(.34, 1.56, .64, 1) both; }
  .mini__step.is-new { animation: mini-in .5s var(--ease-out, ease) both; }
  .sig__mini.is-invite .mini__phone { animation: mini-buzz .3s linear .55s both; }
}
@keyframes mini-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes mini-in { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: none; } }
@keyframes mini-buzz { 0%, 100% { translate: 0 0; } 16% { translate: 1.5px 0; } 33% { translate: -1.5px 0; } 50% { translate: 1.5px 0; } 66% { translate: -1.5px 0; } 83% { translate: 1px 0; } }

/* the questions are words, not numbered steps */
.sig .wl__n { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sig .wl__block.is-armed { opacity: 0; transform: translate3d(0, 30px, 0); }
  .sig .wl__block.is-armed.is-in { opacity: 1; transform: none; transition: opacity .8s var(--ease-out, ease), transform 1.1s cubic-bezier(.16, 1, .3, 1); }
}
html.is-failsafe .sig .wl__block { opacity: 1 !important; transform: none !important; }
.sig .wl { grid-template-columns: minmax(0, 1fr) !important; }
.sig .wl__side { display: none !important; }
.wl__legend { font-weight: 300; font-size: clamp(1.625rem, 2.6vw, 2.25rem); letter-spacing: -.04em; }
@media (min-width: 1000px) {
  .sig .wl__block { padding-block: 18px 20px; gap: 12px; }
  .sig .wl__legend { font-size: clamp(1.5rem, 2.1vw, 1.875rem); margin-bottom: 2px; }
}
.wl__n { color: var(--blue-text); }
.wl__block { border-top-color: var(--ink); }
.wl .chip { border-radius: 999px; }
/* Beds and Baths side by side: rows start at the top of each column, and a slightly tighter chip keeps Any to 5+ on one line */
.sig .wl__two > div { align-content: start; }
.sig .wl__two { column-gap: 20px; }
.sig .wl__two .chip-row { gap: 6px; }
.sig .wl__two .chip { padding: 0 11px; }
:is(.portal__tool, .zillow__tool) .tool-mount__summary.credits { padding: clamp(28px, 4vw, 48px); border: 0; border-top: 3px solid var(--ink); background: var(--paper-2); color: var(--ink); justify-items: center; }
:is(.portal__tool, .zillow__tool) .tool-mount__summary.credits p:not([class]) { max-width: 56ch; margin: 0 auto; color: var(--ink-2); }
/* the wishlist, alive (round 7, "a little bit dull"): chips lift on hover, pop and glow blue when picked, and the budget
   runs on the same glowing track as the opening's search */
.sig .wl .chip { transition: background-color .25s, color .25s, border-color .25s, box-shadow .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.sig .wl .chip-radio:hover .chip { transform: translate3d(0, -1px, 0); }
.sig .wl .chip-radio input:checked + .chip { box-shadow: 0 10px 20px -10px rgba(40, 82, 229, .9); }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]) .sig .wl .chip-radio input:checked + .chip { animation: chip-pop .5s cubic-bezier(.34, 1.56, .64, 1); }
}
.sig .wl .range { height: 32px; }
.sig .wl .range::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; background: linear-gradient(90deg, #1F44D6 0, #5B7BFF calc(var(--fill) - 2%), #9DB0FF var(--fill), color-mix(in srgb, var(--ink) 13%, transparent) var(--fill)); }
.sig .wl .range::-moz-range-track { height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--ink) 13%, transparent); }
.sig .wl .range::-moz-range-progress { height: 5px; border-radius: 5px; background: linear-gradient(90deg, #1F44D6, #5B7BFF); box-shadow: 0 0 12px rgba(40, 82, 229, .6); }
.sig .wl .range::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2852E5; box-shadow: 0 0 0 6px rgba(40, 82, 229, .12), 0 6px 16px -4px rgba(40, 82, 229, .7); transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s; }
.sig .wl .range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; border: 2px solid #2852E5; box-shadow: 0 0 0 6px rgba(40, 82, 229, .12), 0 6px 16px -4px rgba(40, 82, 229, .7); }
.sig .wl .range:active::-webkit-slider-thumb, .sig .wl .range:focus-visible::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(40, 82, 229, .16), 0 0 22px rgba(40, 82, 229, .55); }
/* the wishlist's success panel: in preview nothing has been sent yet, so "You're in" gives way to the hand-off, which
   comes right after the summary (then "Prefer to talk it through?") */
.sig .wl-success:has(.form-handoff) > .eyebrow { display: none; }
.sig .wl-success > .form-handoff { order: 1; }
.sig .wl-success > p:not([class]):not([data-success-sum]) { order: 2; }
/* desktop, in the form: a soft wash of paper behind the column, so the live scene never shows through the questions */
@media (min-width: 1000px) {
  .sig__build-inner { position: relative; }
  .sig__build-inner::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: calc(-1 * max(var(--gutter), calc((100vw - var(--max-wide)) / 2 + var(--gutter)))); right: -5vw; pointer-events: none;
    background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 94%, transparent) 70%, transparent); }
}

/* ------------------------------------------------------------------ phones and tablets: the copy sits low, over a soft scrim */
@media (max-width: 999px) {
  .sig__scrim::before, .sig__scrim::after { background: linear-gradient(0deg, color-mix(in srgb, var(--sc) 94%, transparent) 0%, color-mix(in srgb, var(--sc) 80%, transparent) 30%, transparent 54%); }
  .sig__copy { left: var(--gutter); right: var(--gutter); width: auto; top: auto; bottom: calc(var(--bar-space, 0px) + 20px); height: 46%; }
  .sig__cap, .sig__cap--intro { top: auto; bottom: 0; translate: none; }
  .sig__cap--intro { width: auto; right: 0; }
  .sig__h2 { font-size: clamp(2.15rem, 9.2vw, 3.2rem); margin: 10px 0 12px; }
  .sig__lead { font-size: 1rem; max-width: 34ch; }
  .sig__close { gap: 16px; }
  .sig__nocost { font-size: clamp(1.375rem, 6vw, 1.75rem); }
  .sig__k { font-size: clamp(2.6rem, 12.6vw, 3.9rem); }
  .sig__cap--alerts { width: auto; right: 0; }
  .sig__t { font-size: 1rem; }
  .sig__cap--alerts, .sig__cap--end { bottom: 0; }
  .sig__hud { top: auto; bottom: 0; left: 0; right: 0; width: auto; padding: 12px 12px 10px; border-radius: 16px; }
  .hud__row { margin-bottom: 8px; }
  .hud__count b { font-size: 17px; }
  .hud__chips { min-height: 0; margin-bottom: 8px; gap: 5px; }
  .hud__chips li { min-height: 28px; padding: 0 10px; font-size: 13px; }
  .hud__alerts { padding-top: 8px; }
  .hud__alerts small { display: none; }
  .sig__cap--end { gap: 12px; }
  .sig__cap--end li { font-size: .9375rem; }
  .sig__cap--end li b { font-size: 1.5rem; }
  .sig__legend { display: none; }
  .sig__tag { left: var(--gutter); right: auto; top: calc(var(--header-h) + 12px); bottom: auto; z-index: 1; text-shadow: 0 0 3px color-mix(in srgb, var(--sig-ink) calc(100% - var(--day) * 100%), var(--paper)), 0 0 10px color-mix(in srgb, var(--sig-ink) calc(100% - var(--day) * 100%), var(--paper)); }
  .sig__skip { top: calc(var(--header-h) + 4px); }
  /* the narrowest phones: "Illustration." alone, so the tag never runs into Skip */
  @media (max-width: 359px) { .sig__tag span { display: none; } }
  .sig__build-inner { width: auto; margin-inline: var(--gutter); padding-block: 44px 36px; }
}
@media (max-width: 999px) and (min-width: 600px) { .sig__copy { width: min(34rem, 80vw); right: auto; } }

/* ------------------------------------------------------------------ T0 (reduced motion, paused): a still chapter in the flow,
   every word visible: the copy in one column, the still in a frame beside it (under it on phones), then the form */
.sig--static .sig__bg { display: none; }
.sig--static { --day: 0; background: var(--sig-ink); }
.sig--static .sig__frame { position: relative; height: auto; overflow: visible; display: grid; gap: 28px; padding: calc(var(--header-h) + 40px) 0 56px; }
.sig--static .sig__track, .sig--static .sig__pacebox, .sig--static .sig__legend, .sig--static .sig__skip, .sig--static .sig__scrim { display: none; }
.sig--static .sig__stage { position: relative; inset: auto; order: 2; aspect-ratio: 16 / 10; margin-inline: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); border-radius: 4px; }
.sig--static .sig__copy { position: static; width: auto; margin-inline: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); display: grid; gap: 36px; order: 1; }
.sig--static .sig__cap, .sig--static .sig__hud, .sig--static .sig__close { position: static; translate: none; opacity: 1 !important; visibility: visible !important; transform: none !important; }
.sig--static .sig__copy > * { max-width: 40rem; }
.sig--static .sig__close { grid-row: 4; margin-top: 18px; }
.sig--static .sig__tag { position: static; order: 3; margin-inline: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); }
.sig--static .hud__toggle { --on: 1; }
.sig--static .sig__build { background: var(--paper); }
@media (min-width: 1000px) {
  .sig--static .sig__frame { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 4vw, 72px); align-items: start; padding-inline: max(var(--gutter), calc((100% - var(--max-wide)) / 2 + var(--gutter))); }
  .sig--static .sig__copy, .sig--static .sig__stage, .sig--static .sig__tag { margin-inline: 0; }
  .sig--static .sig__copy { grid-column: 1; grid-row: 1 / span 2; order: 0; }
  .sig--static .sig__stage { grid-column: 2; grid-row: 1; order: 0; position: sticky; top: calc(var(--header-h) + 24px); }
  .sig--static .sig__tag { grid-column: 2; grid-row: 2; order: 0; }
}
@media (max-width: 999px) { .sig--static .sig__stage { aspect-ratio: 390 / 520; } .sig--static .sig__hud { position: static; } }
/* the fail-safe (the page module never ran): the same still chapter */
html.is-failsafe .sig:not(.sig--static) :is(.sig__cap, .sig__hud, .sig__close) { opacity: 1; visibility: visible; }

/* QA only (?shoot): the stage alone, for rendering the stills */
.sig-shoot :is(.site-header, .bottombar, .sig__copy, .sig__scrim, .sig__fade, .sig__tag, .sig__legend, .sig__skip, .sig__alert, .sig__ring, .sig__bloom) { visibility: hidden !important; }

/* ------------------------------------------------------------------ who's building it (bone): him, a warm portrait (data-mask),
   his own words lit word by word (search.js initLit: 14% to full ink as the statement rises; "people." lands last, in
   blue), then the proof: four figures on hairlines; each rule draws from the left WITH the scroll (--draw), the figures
   rise in turn as the row arrives and the numbers count up (data-count). Armed only while motion is on; at T0 it shows. */
.pb { --pb-size: clamp(3.5rem, 7vw, 6.25rem); }
.pb > .container { padding-block: clamp(64px, 8vw, 116px) clamp(8px, 2vw, 24px); display: grid; gap: clamp(28px, 3.4vw, 48px); }
@media (min-width: 900px) {
  .pb__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 112px); align-items: center; }
  .pb__stats, .pb__broker { grid-column: 1 / -1; }
  .pb__stats { margin-top: clamp(12px, 2vw, 28px); }
}
.pb__face { position: relative; margin: 0; width: min(100%, 500px); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: var(--paper-2);
  box-shadow: 0 50px 80px -52px rgba(21, 19, 17, .6), 0 16px 30px -24px rgba(21, 19, 17, .35); }
.pb__face picture, .pb__face img { display: block; width: 100%; height: 100%; }
.pb__face img { object-fit: cover; object-position: 50% 22%; }
@media (max-width: 899px) { .pb__face { width: min(76vw, 360px); } }
.pb__main { display: grid; gap: clamp(20px, 2.6vw, 34px); align-content: center; }
.pb__h { color: var(--muted); }
.pb__q { margin: 0; }
.pb__q p { max-width: 26ch; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.875rem, 3.5vw, 3.5rem); line-height: 1.14; letter-spacing: -.012em; color: var(--ink); text-wrap: pretty; }
.pb__q em { color: var(--blue-text); }
.is-lit-armed .wi { opacity: calc(.14 + .86 * var(--o, 0)); transition: opacity .35s linear; }
.pb__stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4.4vw, 56px) clamp(20px, 3vw, 48px); }
@media (min-width: 1000px) { .pb__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.pb__stats > li { position: relative; padding-top: clamp(18px, 2vw, 28px); }
.pb__stats > li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.pb__stats > li:nth-child(2) { --i: 1; } .pb__stats > li:nth-child(3) { --i: 2; } .pb__stats > li:nth-child(4) { --i: 3; }
.pb__stat { display: grid; gap: 10px; align-content: start; color: var(--ink); text-decoration: none; }
.pb__n { display: flex; align-items: flex-end; gap: 8px; height: calc(var(--pb-size) * .9); font-weight: 300; font-size: var(--pb-size); line-height: .9; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb__n--word { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 3.3vw, 3.25rem); line-height: 1; letter-spacing: -.01em; padding-bottom: .02em; }
.pb__n em { font-style: italic; color: var(--blue-text); }
.pb__out { flex: none; width: 18px; height: 18px; margin-bottom: .55em; color: var(--muted); transition: transform var(--dur-3, .3s) var(--ease-out, ease), color var(--dur-2, .2s); }
a.pb__stat:hover .pb__out, a.pb__stat:focus-visible .pb__out { color: var(--blue-text); transform: translate(3px, -3px); }
.pb__l { font-size: 16px; font-weight: 500; line-height: 1.35; }
.pb__d { font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pb__broker { font-size: 14px; color: var(--ink-2); }
.pb__broker span { color: var(--ink); font-weight: 500; }
@media (max-width: 559px) { .pb__l { font-size: 15px; } .pb__d { letter-spacing: .1em; } }
@media (prefers-reduced-motion: no-preference) {
  .pb__stats.is-armed > li::before { transform: scaleX(var(--draw, 0)); }
  .pb__stats.is-armed > li > .pb__stat { transition: opacity .9s var(--ease-out, ease) calc(var(--i, 0) * 130ms), transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--i, 0) * 130ms); }
  .pb__stats.is-armed:not(.is-in) > li > .pb__stat { opacity: 0; transform: translate3d(0, 26px, 0); }
}
html.is-failsafe .pb__stats > li > .pb__stat, html.is-failsafe .pb__stats > li::before { opacity: 1 !important; transform: none !important; }

/* ------------------------------------------------------------------ link to text (bone) */
.zillow > .container { padding-block: clamp(64px, 9.5vw, 136px) clamp(56px, 7vw, 100px); display: grid; gap: clamp(24px, 3vw, 40px); }
.zillow__grid { align-items: start; }
@media (min-width: 1000px) { .zillow > .zillow__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 96px); } }
.zillow__head { display: grid; gap: 18px; }
.zillow__head .cine-h2 { font-size: clamp(2.5rem, 4.8vw, 4.5rem); }
.zillow__tool { min-width: 0; }
.zillow .lt__phone { gap: 12px; padding: 20px 20px 24px; border: 0; border-radius: 28px; background: var(--porcelain); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--porcelain-edge), 0 0 0 1px color-mix(in srgb, var(--ink) 7%, transparent), 0 44px 60px -44px rgba(21, 19, 17, .5), 0 14px 26px -20px rgba(21, 19, 17, .28); }
.zillow .lt__to { font-size: 12px; letter-spacing: .04em; color: var(--muted); border-bottom-color: var(--line); }
.zillow .lt__bubble { border-radius: 20px 20px 6px 20px; box-shadow: 0 10px 18px -12px rgba(40, 82, 229, .6); }
.zillow .lt__card { border-radius: 16px; background: var(--paper); border-color: var(--line); color: var(--ink); }
/* as it arrives, the phone rises into place and the text to me pops in like it was just sent (search.js arms it) */
@media (prefers-reduced-motion: no-preference) {
  .zillow__tool.is-armed .lt__phone { opacity: 0; transform: translate3d(0, 34px, 0) rotate(-1.5deg); }
  .zillow__tool.is-armed .lt__bubble { animation: none; opacity: 0; }
  .zillow__tool.is-armed.is-in .lt__phone { opacity: 1; transform: none; transition: opacity .8s var(--ease-out, ease), transform 1.2s cubic-bezier(.16, 1, .3, 1); }
  .zillow__tool.is-armed.is-in .lt__bubble { opacity: 1; animation: zl-pop .75s cubic-bezier(.34, 1.56, .64, 1) .5s both; }
}
@keyframes zl-pop { from { opacity: 0; transform: scale(.55) translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } }
html.is-failsafe .zillow__tool :is(.lt__phone, .lt__bubble) { opacity: 1 !important; transform: none !important; animation: none !important; }
/* until a link is in: a clear outline button in his blue (not a washed-out primary) */
.zillow .lt:not(.has-url) [data-send] { opacity: 1; background: transparent; color: var(--blue-text); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--blue-text) 60%, transparent); }
.zillow .lt:not(.has-url) [data-send]:hover { box-shadow: inset 0 0 0 1.5px var(--blue-text); }
/* the preview card: a thumbnail, the site and its host */
.zillow .lt__card { grid-template-columns: 54px minmax(0, 1fr); column-gap: 12px; align-items: center; }
.zillow .lt__card::before { content: ""; grid-row: 1 / span 2; width: 54px; height: 42px; border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  background: linear-gradient(180deg, #1C2340 0, #4A4F74 46%, #8E8BA6 60%, #1A1B24 61%, #2A2C38 72%, #0C0D12); }
.zillow .lt__site, .zillow .lt__host { grid-column: 2; }
/* the demo that plays as it arrives (search.js initZillow): the link pastes in, the text types, the link unfurls, I type */
.zillow .lt.is-demo .lt__bubble { animation: none; transition: opacity .35s var(--ease-out), transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.zillow .lt.is-demo .lt__bubble:has(.lt__lead:empty) { opacity: 0; transform: scale(.85) translate3d(0, 6px, 0); }
.zillow .lt.is-demo .lt__url { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .zillow .lt.is-pasted .lt__input .input { animation: zl-paste 1.1s var(--ease-out, ease) both; }
  .zillow .lt.is-unfurled .lt__card { animation: zl-unfurl .7s cubic-bezier(.16, 1, .3, 1) both; }
  .zillow .lt__dots { animation: zl-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
  .zillow .lt__dots i { animation: zl-dot 1.2s ease-in-out infinite; }
  .zillow .lt__dots i:nth-child(2) { animation-delay: .15s; } .zillow .lt__dots i:nth-child(3) { animation-delay: .3s; }
}
@keyframes zl-paste { 0% { box-shadow: 0 0 0 0 rgba(40, 82, 229, 0); } 18% { box-shadow: 0 0 0 5px rgba(40, 82, 229, .2); background-color: rgba(40, 82, 229, .06); } 100% { box-shadow: 0 0 0 0 rgba(40, 82, 229, 0); } }
@keyframes zl-unfurl { from { opacity: 0; transform: translate3d(0, -6px, 0); clip-path: inset(0 0 100% 0 round 16px); } to { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 16px); } }
@keyframes zl-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translate3d(0, -4px, 0); opacity: 1; } }
.zillow .lt__dots { justify-self: start; display: inline-flex; gap: 5px; padding: 13px 15px; border-radius: 18px 18px 18px 6px; background: color-mix(in srgb, var(--ink) 7%, var(--paper)); }
.zillow .lt__dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }

/* ------------------------------------------------------------------ explore (inside the Zillow section), then the ending */
.zillow .keep { grid-column: 1 / -1; min-width: 0; margin-top: clamp(8px, 2vw, 28px); }
.keep .explore__link { min-height: 96px; align-content: end; }
/* phones: a tight list of links, not a wall of cards before the ending */
@media (max-width: 767px) {
  .keep .explore__link { min-height: 0; padding: 15px 36px 15px 0; }
  .keep .explore__link .icon { top: 50%; margin-top: -9px; right: 4px; }
  .keep .explore__link strong { font-size: 1.25rem; }
}
@media (max-width: 767px) { .zillow > .container { padding-bottom: 48px; } }
/* the text-me ending (site.css §14) rises as a rounded ink plate a gutter in from the edges (search.js initEndPlate) */
.sr-end.is-plate { clip-path: inset(0 var(--plate-x, 0px) round var(--plate-r, 0px) var(--plate-r, 0px) 0 0); }
.idx { margin-top: 28px; max-width: 80ch; }
.keep .explore__link strong { padding-right: 28px; }

/* ------------------------------------------------------------------ motion that can't get stuck (guide 13)
   The opening rises in on load: the headline, the search, the filters, then the live card, whose chips pop in one by one
   and whose pins stand up. CSS only, no observer, so it always ends visible. The explore row rises as it scrolls in where
   the browser has scroll-driven animations; elsewhere it just shows. */
@keyframes sr-rise { from { opacity: 0; transform: translate3d(0, 22px, 0); } to { opacity: 1; transform: none; } }
@keyframes sr-card { from { opacity: 0; transform: translate3d(0, 34px, 0) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sr-chip-in { from { opacity: 0; transform: scale(.6) translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes sr-pin-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="paused"]) :is(.sr-hero h1 > span, .sr-hero h1 > em, .launcher__mode, .launcher__pill, .lf, .launcher__note, .launcher + .sr-hero__rental) { animation: sr-rise 1s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both; }
  .sr-hero h1 > em { display: inline-block; }
  :root:not([data-motion="paused"]) .sr-hero h1 > .h1-main { animation-delay: .08s; }
  :root:not([data-motion="paused"]) .sr-hero h1 > em { animation-delay: .18s; }
  :root:not([data-motion="paused"]) .launcher__mode { animation-delay: .3s; }
  :root:not([data-motion="paused"]) .launcher__pill { animation-delay: .38s; }
  :root:not([data-motion="paused"]) .lf { animation-delay: .48s; }
  :root:not([data-motion="paused"]) .launcher__note { animation-delay: .56s; }
  :root:not([data-motion="paused"]) .launcher + .sr-hero__rental { animation-delay: .62s; }
  :root:not([data-motion="paused"]) .sr-live { animation: sr-card 1.2s cubic-bezier(.16, 1, .3, 1) .25s both; }
  :root:not([data-motion="paused"]) .sr-chip { animation: sr-chip-in .6s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(.75s + var(--i, 0) * 60ms); }
  :root:not([data-motion="paused"]) .sr-pin__b { animation: sr-pin-in .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: .9s; }
  @supports (animation-timeline: view()) {
    :root:not([data-motion="paused"]) .keep .explore__link { animation: sr-rise linear both; animation-timeline: view(); animation-range: entry 5% entry 70%; }
    :root:not([data-motion="paused"]) .keep .explore__link:nth-child(2) { animation-range: entry 10% entry 76%; }
    :root:not([data-motion="paused"]) .keep .explore__link:nth-child(3) { animation-range: entry 15% entry 82%; }
    :root:not([data-motion="paused"]) .keep .explore__link:nth-child(4) { animation-range: entry 20% entry 88%; }
    :root:not([data-motion="paused"]) .keep .explore__link:nth-child(5) { animation-range: entry 25% entry 94%; }
  }
}