/* SRG home search v3 (2026-10-28): Zillow's structure and shapes (photo-first, rounded cards, sheet over the photo,
   fact tiles, AI chips, inline tour picker, sticky actions) in SRG's dark brand: ink ground, raised panels, hairlines,
   paper (#F6F4EF) for the primary action, seafoam for accents and the AI.
   Motion: springs via CSS linear(), quick presses, sheets that follow the finger, photo-to-hero continuity;
   transform/opacity only; off under reduce-motion. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/fonts/montserrat-latin.woff2") format("woff2"); }
/* Fallback tuned to Montserrat's measured widths and heights (fontTools, 10-29), so if the page paints before the font
   arrives, the swap barely moves anything: no layout jump on slow connections, same font once it lands. */
@font-face { font-family: "Montserrat Fallback"; src: local("Arial"), local("ArialMT"); font-weight: 100 549; size-adjust: 115%; ascent-override: 84.2%; descent-override: 21.8%; line-gap-override: 0%; }
@font-face { font-family: "Montserrat Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"); font-weight: 550 900; size-adjust: 112%; ascent-override: 86.4%; descent-override: 22.4%; line-gap-override: 0%; }

:root {
  --bg: #0D0D0E; --card: #161718; --card2: #1D1E20; --ink: #F6F4EF; --text: #F4F4F2; --soft: #B4B6BA; --muted: #8B8E93;
  --line: rgba(255,255,255,.09); --line2: rgba(255,255,255,.18); --field: #202124;
  --paper: #F6F4EF; --on-paper: #0D0D0E;
  --sea: #7FB7AE; --sea-ink: #2E6B63; --sea-500: #7FB7AE; --sea-50: rgba(127,183,174,.12); --sea-100: rgba(127,183,174,.28);
  --warn: #F2A65A; --good: #6FD3A8;
  --r-card: 18px; --r-btn: 14px; --r-photo: 14px; --r-pill: 999px;
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  --glass: rgba(18,19,20,.72);
  --font: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.32,.72,0,1); --ease-in: cubic-bezier(.4,0,1,1);
  --spring: var(--ease); --spring-soft: var(--ease);
  --t-press: 130ms; --t-ui: 280ms; --t-sheet: 520ms;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring: linear(0, .0539, .1779, .3296, .4821, .62, .7359, .828, .8974, .947, .9805, 1.0015, 1.0133, 1.0187, 1.0199, 1.0187, 1.0161, 1.0131, 1.01, 1.0073, 1.0051, 1.0033, 1.0019, 1.001, 1.0003, .9999, .9997, .9996, .9996, .9996, .9997, .9997, .9998, .9999, .9999, .9999, 1);
    --spring-soft: linear(0, .061, .1937, .3472, .4942, .6219, .7262, .8075, .8686, .9131, .9446, .9661, .9804, .9896, .9953, .9986, 1.0004, 1.0012, 1.0015, 1.0015, 1.0013, 1.0011, 1.0008, 1.0006, 1.0005, 1.0003, 1.0002, 1.0002, 1.0001);
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "lnum" 1, "tnum" 1; }
a { color: inherit; }
button { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: var(--r-btn); border: 1.5px solid var(--line2); background: transparent; color: var(--text); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform var(--t-ui) var(--spring), background-color .2s; white-space: nowrap; }
.btn:active, .pill:active, .ib:active, .chip:active, .day:active, .slot:active { transform: scale(.96); transition-duration: var(--t-press); transition-timing-function: var(--ease-in); }
.btn-ink { background: var(--paper); border-color: var(--paper); color: var(--on-paper); }
.btn-ink:hover { background: #fff; }
.btn-sea { background: var(--sea); border-color: var(--sea); color: #0D0D0E; }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; pointer-events: none; }
.btn .two { display: flex; flex-direction: column; line-height: 1.2; align-items: center; }
.btn .two small { font-size: 12.5px; font-weight: 500; opacity: .85; }
.link { color: var(--sea); font-weight: 700; text-decoration: none; background: none; border: 0; cursor: pointer; font-size: 15px; display: inline-flex; gap: 4px; align-items: center; padding: 0; }
.link svg.i { width: 18px; height: 18px; }

/* Round icon buttons (frosted, over photos) */
.ib { width: 44px; height: 44px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); color: #fff; cursor: pointer; box-shadow: 0 1px 8px rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.12); transition: transform var(--t-ui) var(--spring); text-decoration: none; }
.ib.saved svg.i { fill: #E0445C; stroke: #E0445C; }
.ib-group { display: inline-flex; gap: 4px; padding: 3px; border-radius: var(--r-pill); background: var(--glass); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: 0 1px 8px rgba(0,0,0,.35); }
.ib-group .ib { background: transparent; box-shadow: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; width: 42px; height: 42px; }
.ai-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; background: linear-gradient(140deg, #8FC9BF 0%, #4E8F86 100%); color: #0D0D0E; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 6px 18px rgba(30,92,84,.35); transition: transform var(--t-ui) var(--spring); }
.ai-btn svg.i { width: 24px; height: 24px; fill: currentColor; stroke: none; }

/* Pills / chips */
.pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--card); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; transition: transform var(--t-ui) var(--spring), border-color .2s, background .2s; }
.pill svg.i { width: 16px; height: 16px; }
.pill[aria-pressed="true"], .pill.on { border-color: var(--paper); background: var(--paper); color: var(--on-paper); }
.pill .badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--sea); color: #0D0D0E; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.pill .badge:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--card); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform var(--t-ui) var(--spring); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r-pill); background: var(--field); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--text); }
.tag.sea { background: var(--sea-50); color: var(--sea); }
.rail-x { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.rail-x::-webkit-scrollbar { display: none; }
/* Inside a card the chip rails run to the card's edge and start/stop at its padding, so a chip slides out of view at
   the edge instead of being cut off mid-word at the padding line (2026-10-29) */
.card .rail-x, .card .days, .card .slots, .card .sim { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; scroll-padding-inline: 20px; overscroll-behavior-x: contain; }

/* Cards */
.card { background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 22px 20px; }
.card h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 14px; }
.card h3 { font-size: 16px; font-weight: 800; margin-bottom: 8px; }
.stack { display: grid; gap: 14px; }

/* ---------------------------------------------------------------- Header */
.hs-top { position: sticky; top: 0; z-index: 50; background: rgba(13,13,14,.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); padding: calc(10px + var(--safe-t)) 16px 10px; display: flex; align-items: center; gap: 12px; transition: transform .42s var(--spring); }
.hs-top.away { transform: translateY(-100%); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand img { height: 34px; width: auto; }
.brand span { display: flex; flex-direction: column; line-height: 1.05; }
.brand b { font-size: 13px; font-weight: 800; letter-spacing: .2em; }
.brand b { color: var(--sea); }
.brand small { font-size: 9px; font-weight: 600; letter-spacing: .18em; color: var(--muted); }
/* The real logo (2026-10-29): Mick's chrome s|r + SHARP / REAL ESTATE GROUP LLC set side by side from the LLC master
   (brand/lockup-llc/srg-lockup-horizontal-dark-llc-8527px.png), not typed text */
.brand img.brand-lockup { height: 42px; width: auto; display: block; }
.top-nav { display: flex; gap: 4px; margin-left: 12px; }
.top-nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: var(--soft); padding: 8px 12px; border-radius: 10px; }
.top-nav a.on, .top-nav a:hover { color: var(--text); background: var(--field); }
.acct-btn { margin-left: auto; }
.top-call { margin-left: 8px; }
.hs-wrap { max-width: 1480px; margin: 0 auto; padding: 0 20px 40px; }

/* ---------------------------------------------------------------- Search page */
.s-bar { display: flex; gap: 10px; align-items: center; padding: 14px 0 10px; }
.s-field { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: var(--r-btn); background: var(--card); border: 1.5px solid var(--line2); transition: border-color .2s, box-shadow .2s; }
.s-field:focus-within { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(127,183,174,.14); }
.s-field svg.i { color: var(--sea); width: 20px; height: 20px; }
.s-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); padding: 13px 0; }
.s-field input::placeholder { color: #7D8085; }
.s-go { border: 0; background: var(--paper); color: var(--on-paper); width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.s-go svg.i { width: 18px; height: 18px; }
.s-ask { flex: none; }
.understood { display: none; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 10px; font-size: 13px; color: var(--soft); }
.understood.on { display: flex; animation: rise .45s var(--spring-soft) both; }
.understood .lbl { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--sea); }
.understood .lbl svg.i { width: 16px; height: 16px; fill: var(--sea); stroke: none; }
.u-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px 6px 12px; border-radius: var(--r-pill); background: var(--sea-50); color: var(--sea); font-weight: 700; font-size: 13px; border: 0; cursor: pointer; }
.u-chip i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: rgba(127,183,174,.2); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.u-note { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
.f-row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0 12px; }
.f-row::-webkit-scrollbar { display: none; }
.s-hero { display: none; margin: 4px 0 16px; padding: 22px 22px; border-radius: var(--r-card); background: linear-gradient(135deg, #161718 0%, #17302C 100%); border: 1px solid var(--line); color: #fff; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.s-hero.on { display: grid; animation: rise .5s var(--spring-soft) both; }
.s-hero .k { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-500); }
.s-hero h1, .s-hero #hero-h { font-size: clamp(22px, 3vw, 32px); font-weight: 800; letter-spacing: -.015em; line-height: 1.15; margin-top: 6px; }
.s-hero p { color: rgba(255,255,255,.8); font-size: 14.5px; margin-top: 8px; max-width: 60ch; }
.s-hero p b { color: #fff; }
.s-hero .btn { border-color: var(--paper); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 760px; gap: 20px; align-items: start; }
.map-pane { position: sticky; top: 86px; height: calc(100vh - 106px); min-height: 520px; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); background: #101112; border: 1px solid var(--line); }
#map { width: 100%; height: 100%; }
.area-btn { position: absolute; z-index: 600; top: 14px; left: 50%; transform: translate(-50%, -8px); opacity: 0; pointer-events: none; transition: opacity .25s, transform var(--t-ui) var(--spring); box-shadow: var(--shadow-lg); }
.area-btn.show { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.res-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 2px 12px; }
.res-head h1, .res-head .res-h { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
/* "24 homes" in the heading's own weight, "in Stuart" softer (10-30: the rule hit the count and noun spans too, so the
   whole line came out 15px and the space between them read as a double space) */
.res-head h1 span span, .res-head .res-h span span { font-weight: 600; color: var(--soft); font-size: 15px; }
.sort select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0 center / 16px; padding: 6px 22px 6px 4px; font: inherit; font-size: 15px; font-weight: 700; color: var(--text); cursor: pointer; }
.res-sub { font-size: 12.5px; color: var(--muted); margin: -6px 2px 14px; }
.res-sub b { color: var(--soft); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.more-row { display: flex; justify-content: center; margin-top: 22px; }

/* Listing card (search + similar homes) */
.hcard { position: relative; display: block; text-decoration: none; color: inherit; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; transition: transform var(--t-ui) var(--spring), box-shadow .3s; }
.hcard { border: 1px solid var(--line); }
/* Hover and press only with a real mouse (10-30): on iPhones :active scaled the card the moment a finger landed to swipe
   a rail, and :hover stuck after a tap, animating a big shadow on a moving card. Both read as a hitch. */
@media (hover: hover) and (pointer: fine) {
  .hcard:hover { border-color: var(--line2); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
  .hcard:active { transform: scale(.985); transition-duration: var(--t-press); }
}
.hcard.enter { animation: rise .62s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } }
.hc-media { position: relative; aspect-ratio: 16 / 10.5; background: #1B1C1E; overflow: hidden; }
.hc-track { position: absolute; inset: 0; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-track img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; scroll-snap-stop: always; -webkit-user-drag: none; user-select: none; }
.hc-ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: radial-gradient(120% 90% at 50% 0%, #1F2022 0%, #151617 65%); }
.hc-ph img { width: 46px; height: auto; opacity: .5; }
.hc-tags { position: absolute; top: 12px; left: 12px; right: 60px; z-index: 2; display: flex; gap: 6px; flex-wrap: wrap; pointer-events: none; }
.hc-tags .tag { background: rgba(13,13,14,.82); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.hc-tags .tag.ours { background: var(--sea); color: #0D0D0E; }
.hc-heart { position: absolute; top: 8px; right: 8px; z-index: 3; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hc-heart svg.i { width: 28px; height: 28px; fill: rgba(0,0,0,.28); stroke: #fff; stroke-width: 2; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); transition: fill .2s, transform .45s var(--spring); }
.hc-heart.saved svg.i { fill: #E0445C; }
.hc-heart.pop svg.i { animation: pop .5s var(--spring); }
/* Brent mode: the + beside the heart (agent.js; only signed-in devices render it) */
.hc-add { position: absolute; top: 12px; right: 54px; z-index: 3; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(13,13,14,.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font-size: 25px; font-weight: 500; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.hc-add::before { content: "+"; margin-top: -2px; }
.hc-add svg.i { display: none; width: 19px; height: 19px; stroke-width: 2.6; }
.hc-add.on { background: var(--sea); color: #0B1F1C; }
.hc-add.on::before { content: none; }
.hc-add.on svg.i { display: block; }
@keyframes pop { 35% { transform: scale(1.3); } }
/* Photo dots (idx.js dotsHTML + dotScrub, 10-30; Zillow's look 10-30 pm): a dark see-through pill of up to 5 white dots,
   15 px apart, the current one a bit bigger and the end dot small when there are more. Press it and slide along to flick
   through every photo. The touch area is a 44 px band, wider than the pill. Sideways the finger belongs to the scrubber
   (never the photos or the rail), up and down still scrolls the page (pan-y), and it never selects text or opens iOS's
   link preview. */
.hc-dots { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 3; padding: 14px 26px 10px; touch-action: pan-y; cursor: ew-resize; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* the pill is drawn behind (::before) and .ds clips to exactly the dots, so the 6th dot never peeks out at the edge */
.hc-dots::before { content: ""; position: absolute; top: 14px; bottom: 10px; left: 26px; right: 26px; border-radius: var(--r-pill); background: rgba(22,22,24,.58); box-shadow: 0 1px 6px rgba(0,0,0,.18); transition: transform .3s var(--spring), background .2s; }
.hc-dots .ds { position: relative; display: block; width: calc(var(--dn, 5) * 15px - 7px); height: 10px; margin: 4.5px 10px; overflow: hidden; transition: transform .3s var(--spring); }
.ds-strip { display: flex; align-items: center; gap: 9px; width: max-content; height: 100%; padding: 0 1px; transition: transform .28s var(--ease); }
.ds-strip i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.78); transition: transform .28s var(--ease), background .2s; }
.ds-strip i.on { background: #fff; transform: scale(1.3); }
.ds-strip i.sm { transform: scale(.62); }
.hc-dots.scrub .ds, .hc-dots.scrub::before { transform: scale(1.12); }
.hc-dots.scrub::before { background: rgba(22,22,24,.8); }
.hc-dots.scrub .ds-strip, .hc-dots.scrub .ds-strip i { transition-duration: .1s; }
.ds-n { position: absolute; left: 50%; bottom: calc(100% - 8px); transform: translate(-50%, 6px) scale(.9); opacity: 0; pointer-events: none; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(13,13,14,.86); color: #fff; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.35); transition: opacity .15s, transform .3s var(--spring); }
.hc-dots.scrub .ds-n { opacity: 1; transform: translate(-50%, 0); }
.hc-mls { position: absolute; right: 10px; bottom: 10px; z-index: 2; background: rgba(255,255,255,.92); border-radius: 6px; padding: 3px 7px; font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #0B5F7A; display: inline-flex; align-items: center; }
.hc-mls img { height: 16px; width: auto; }
.hc-arrow { position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; border: 0; background: rgba(13,13,14,.82); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; opacity: 0; cursor: pointer; transition: opacity .2s, transform var(--t-ui) var(--spring); }
.hc-arrow svg.i { width: 16px; height: 16px; }
.hc-arrow.l { left: 10px; } .hc-arrow.r { right: 10px; }
@media (hover: hover) { .hcard:hover .hc-arrow { opacity: 1; } }
.hc-body { padding: 12px 16px 14px; }
.hc-price { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; display: flex; align-items: baseline; gap: 8px; }
.hc-cut { font-size: 12.5px; font-weight: 700; color: var(--good); }
.hc-facts { font-size: 14px; color: var(--text); margin-top: 2px; }
.hc-facts b { font-weight: 800; }
.hc-facts .sep { color: #4A4C50; margin: 0 6px; }
.hc-addr { font-size: 14px; color: var(--soft); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The listing firm on a card: its name alone, small and grey, like Zillow's (Grayson 10-30 pm). Cards are minimal displays
   linked to the full page, where "Listing courtesy of [firm] · MLS#" runs at the listing data's size (BeachesMLS 20.3.3). */
.hc-attr { font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lead magnet in results */
.lm { grid-column: 1 / -1; border-radius: var(--r-card); background: linear-gradient(135deg, #142624 0%, #161718 100%); border: 1px solid var(--sea-100); padding: 20px; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; }
.lm b { display: block; font-size: 18px; font-weight: 800; color: var(--text); }
.lm p { font-size: 14px; color: var(--soft); margin-top: 4px; }

/* Skeletons + states */
.skel { border-radius: var(--r-card); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.skel { border: 1px solid var(--line); }
html:not(.js) .skel { display: none; }   /* no script, no results coming: the crawler copy shows instead */
.skel i { display: block; background: linear-gradient(90deg, #1A1B1D 0%, #232427 50%, #1A1B1D 100%); background-size: 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.skel i:first-child { aspect-ratio: 16 / 10.5; }
.skel i + i { height: 18px; width: 40%; margin: 14px 16px 0; border-radius: 6px; }
.skel i + i + i { height: 12px; width: 70%; margin: 10px 16px 18px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.state { grid-column: 1 / -1; text-align: center; padding: 40px 24px; background: var(--card); border-radius: var(--r-card); box-shadow: var(--shadow); border: 1px solid var(--line); }
.state h2 { font-size: 20px; font-weight: 800; }
.state p { color: var(--soft); max-width: 46ch; margin: 8px auto 18px; }
.state .btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.demo { font-size: 12.5px; color: var(--warn); background: rgba(242,166,90,.08); border: 1px dashed rgba(242,166,90,.4); border-radius: 12px; padding: 9px 12px; margin: 6px 0 12px; }
.demo b { font-weight: 800; }

/* Map pins (light) */
.price-pin { background: transparent; border: 0; width: 0; height: 0; }
/* the pin is a zero-size point on the home; .pin-in hangs above it, so the pill's tip lands on the home at any width */
.pin-in { position: absolute; left: 0; bottom: 5px; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transform-origin: 50% calc(100% + 5px); transition: transform .4s var(--spring); }
.price-pin .pp { display: inline-flex; align-items: center; background: #0D0D0E; color: #fff; border: 1px solid rgba(127,183,174,.5); font-family: var(--font); font-size: 12px; font-weight: 800; padding: 5px 9px; border-radius: 8px; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .35s var(--spring), background .2s; position: relative; }
.price-pin .pp::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: #0D0D0E; }
.price-pin.ours .pp { background: var(--sea); color: #0D0D0E; } .price-pin.ours .pp::after { border-top-color: var(--sea); }
.price-pin.active .pp { transform: scale(1.14); background: var(--sea); color: #0D0D0E; }
@media (hover: hover) { .price-pin .pp:hover { transform: scale(1.14); background: var(--sea); color: #0D0D0E; } }
.leaflet-container { font-family: var(--font); background: #101112; }   /* not Leaflet's light grey while tiles load */
.leaflet-popup-content-wrapper { border-radius: 16px; padding: 0; overflow: hidden; background: var(--card); color: var(--text); }
.leaflet-popup-tip { background: var(--card); }
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.92) saturate(.4); }
.leaflet-control-attribution { background: rgba(13,13,14,.75) !important; color: var(--muted) !important; }
.leaflet-control-attribution a { color: var(--soft) !important; }
.leaflet-bar a { background: var(--card) !important; color: var(--text) !important; border-color: var(--line) !important; }
.leaflet-popup-content { margin: 0; width: 250px !important; }
.pop { display: block; text-decoration: none; color: var(--text); }
.pop img { width: 100%; height: 130px; object-fit: cover; }
.pop div { padding: 10px 12px 12px; }
.pop b { font-size: 17px; font-weight: 800; display: block; }
.pop span { font-size: 13px; color: var(--soft); display: block; }
/* Map card slider (search.js openDock, 10-30): solid cards, photo on top, one per home in view; rules in 10-30 BROWSE */
.map-dock { position: absolute; left: 0; right: 0; bottom: calc(76px + var(--safe-b)); z-index: 700; transform: translate3d(0, calc(100% + 190px), 0); visibility: hidden;
  transition: transform var(--t-sheet) var(--spring), visibility 0s linear var(--t-sheet); }
.map-dock.show { transform: none; visibility: visible; transition: transform var(--t-sheet) var(--spring); }
.map-toggle { display: none; }

/* Attribution + footer */
.attr { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.attr b { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); white-space: nowrap; }
.attr a { color: var(--soft); }
.mls-logo { height: 22px; width: auto; display: inline-block; vertical-align: middle; margin-right: 8px; }
.foot { max-width: 1480px; margin: 0 auto; padding: 22px 20px calc(30px + var(--safe-b)); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 20px; justify-content: space-between; }
.foot a { color: var(--soft); text-decoration: none; }

/* ---------------------------------------------------------------- Listing page */
body.pg-listing { background: var(--bg); }
.lp-hero { position: relative; }
.lp-photos { position: relative; height: 100%; }
.lp-track { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 8px; height: min(58vh, 560px); }
.lp-track button { position: relative; border: 0; padding: 0; background: #1B1C1E; overflow: hidden; cursor: zoom-in; }
.lp-track button:first-child { grid-row: 1 / 3; border-radius: var(--r-card) 0 0 var(--r-card); }
.lp-track button:nth-child(3) { border-radius: 0 var(--r-card) 0 0; }
.lp-track button:nth-child(5) { border-radius: 0 0 var(--r-card) 0; }
.lp-track button:nth-child(n+6) { display: none; }
.lp-track.n1 { grid-template-columns: 1fr; } .lp-track.n1 button:first-child { border-radius: var(--r-card); grid-row: auto; }
.lp-track img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
@media (hover: hover) { .lp-track button:hover img { transform: scale(1.03); } }
.lp-ph { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: radial-gradient(120% 90% at 50% 0%, #1F2022 0%, #151617 65%); border-radius: var(--r-card); }
.lp-ph img { width: 70px; opacity: .5; }
.lp-float { position: absolute; top: 14px; left: 14px; right: 14px; z-index: 5; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.lp-float > * { pointer-events: auto; }
.lp-float .r { display: flex; gap: 10px; align-items: center; }
.lp-status { position: absolute; left: 14px; bottom: 14px; z-index: 4; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: var(--r-pill); background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 700; color: #fff; }
.lp-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.lp-status.pending i { background: var(--warn); }
.lp-count { position: absolute; right: 14px; bottom: 14px; z-index: 4; padding: 6px 12px; border-radius: var(--r-pill); background: rgba(13,13,14,.72); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; border: 0; cursor: pointer; }
.lp-count svg.i { width: 16px; height: 16px; }
.lp-body { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; margin-top: 22px; }
.lp-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.lp-head .price { font-size: 38px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.lp-head .price s { font-size: 17px; color: var(--muted); font-weight: 600; }
.lp-specs { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 10px; font-size: 17px; }
.lp-specs span { display: inline-flex; align-items: center; gap: 8px; }
.lp-specs b { font-weight: 800; }
.lp-specs svg.i { width: 22px; height: 22px; color: var(--soft); }
.lp-addr { font-size: 17px; margin-top: 8px; color: var(--text); }
.lp-meta { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.lp-like { margin-top: 12px; font-size: 14.5px; min-height: 32px; }   /* outside visitors on phones: "See 23 more homes in ..." (listing.js likeLine) */
.pay-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 14px 18px; border-radius: var(--r-btn); background: linear-gradient(120deg, #2E6B63 0%, #1E4E48 100%); color: #fff; border: 1px solid rgba(127,183,174,.35); text-decoration: none; }
.pay-strip span { font-size: 16px; }
.pay-strip b { font-weight: 800; }
.pay-strip u { font-weight: 700; text-underline-offset: 4px; }
.attr-line { margin-top: 12px; font-size: 14px; color: var(--soft); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attr-line b { color: var(--text); font-weight: 700; }
.ff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.ff { display: flex; gap: 12px; align-items: center; font-size: 15.5px; line-height: 1.3; }
.ff svg.i { width: 28px; height: 28px; stroke-width: 1.6; color: var(--sea); }
.ff small { display: block; font-size: 12.5px; color: var(--muted); }
.ff-more { display: none; margin-top: 18px; }
.ff-more.open { display: block; animation: rise .4s var(--spring-soft) both; }
.kv { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--soft); }
.kv b { font-weight: 700; text-align: right; }
.kv-group h3 { margin-top: 16px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ask-head { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.ask-head svg.i { width: 26px; height: 26px; fill: var(--sea); stroke: none; }
.ask-rows { display: grid; gap: 8px; }
.ask-rows .rail-x .chip { border-color: var(--line2); }
.ask-rows .chip:hover { border-color: var(--sea); }
.special .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.remarks { font-size: 16px; line-height: 1.6; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.remarks.open { display: block; }
.updated { font-size: 14px; color: var(--soft); margin-top: 12px; line-height: 1.6; }
.stats { display: flex; justify-content: space-between; gap: 10px; padding: 4px 4px; font-size: 15px; }
.stats div { text-align: center; flex: 1; }
.stats b { font-weight: 800; display: block; font-size: 18px; }
.stats span { color: var(--soft); font-size: 13px; }
/* Tour picker */
.days { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; padding: 2px 2px 4px; }
.days::-webkit-scrollbar { display: none; }
.day { flex: none; width: 92px; padding: 12px 8px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); text-align: center; cursor: pointer; scroll-snap-align: start; transition: transform var(--t-ui) var(--spring), border-color .2s, background .2s; }
.day small { display: block; font-size: 14px; color: var(--soft); }
.day b { display: block; font-size: 26px; font-weight: 800; line-height: 1.2; }
.day span { font-size: 14px; color: var(--soft); }
.day[aria-pressed="true"] { border: 2px solid var(--paper); background: var(--card2); }
.slots { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; margin-top: 12px; padding: 2px; }
.slots::-webkit-scrollbar { display: none; }
.slot { flex: none; min-width: 104px; padding: 10px 14px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--card); font-size: 15px; font-weight: 700; cursor: pointer; transition: transform var(--t-ui) var(--spring); }
.slot[aria-pressed="true"] { border: 2px solid var(--paper); background: var(--card2); }
.tour-type { display: flex; gap: 8px; margin-top: 12px; }
.tour-note { font-size: 13px; color: var(--muted); margin-top: 10px; display: flex; gap: 8px; align-items: center; }
.tour-note img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
/* Payment */
.pay-big { font-size: 32px; font-weight: 800; letter-spacing: -.01em; }
.pay-big small { font-size: 16px; color: var(--soft); font-weight: 600; }
.pay-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: 14px; }
.pay-legend div { display: flex; flex-direction: column; }
.pay-legend span { display: inline-flex; gap: 6px; align-items: center; color: var(--soft); }
.pay-legend i { width: 10px; height: 10px; border-radius: 50%; }
.pay-legend b { font-size: 17px; font-weight: 800; padding-left: 16px; }
.pay-bar { display: flex; gap: 3px; height: 12px; margin: 14px 0 6px; }
.pay-bar i { display: block; border-radius: 6px; transition: flex-grow .6s var(--spring-soft); }
.pay-ctl { display: grid; grid-template-columns: 1fr 120px; gap: 12px; margin-top: 14px; align-items: end; }
.pay-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.6; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; background: var(--field); border-radius: 12px; }
.seg button { min-height: 40px; border: 0; background: transparent; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--soft); cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--on-paper); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.f-label { display: block; font-size: 13px; font-weight: 700; color: var(--soft); margin-bottom: 8px; }
.f-input, .sheet select { width: 100%; min-height: 50px; border-radius: 12px; border: 1.5px solid var(--line2); background: var(--card); font: inherit; font-size: 16px; padding: 12px 14px; color: var(--text); outline: 0; transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.f-input:focus, .sheet select:focus { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(127,183,174,.14); }
textarea.f-input { min-height: 110px; resize: vertical; line-height: 1.5; }
.sheet select { background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F4F4F2' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 16px; padding-right: 36px; }
.f-stack { display: grid; gap: 10px; }
.f-err { color: #F5A3A3; font-size: 13px; margin-top: 8px; min-height: 1em; }
.consent { display: grid; gap: 10px; margin-top: 12px; }
.consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.consent input { margin-top: 2px; width: 18px; height: 18px; accent-color: #7FB7AE; flex: none; }
.consent p { font-size: 11px; color: var(--muted); }
.trust { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--soft); margin-top: 12px; }
.trust img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; }
.trust b { color: var(--text); }
.listed-by { font-size: 15.5px; line-height: 1.7; }
.listed-by b { font-weight: 700; }
.map-box { position: relative; isolation: isolate; height: 240px; border-radius: 14px; overflow: hidden; background: #101112; }
/* "Explore map" on the still phone maps (listing.js mapOpen), and the full-screen map it opens */
.map-box .map-open, .nb-mapwrap .map-open { position: absolute; left: 10px; top: 10px; z-index: 1000; height: 38px; padding: 0 14px; font-size: 14px; gap: 7px; border: 1px solid rgba(255,255,255,.14); background: var(--glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
.map-open svg.i { width: 17px; height: 17px; color: var(--sea); }
@media (min-width: 901px) { .map-box .map-open, .nb-mapwrap .map-open { display: none; } }   /* desktop maps already pan and zoom */
.nb-mapwrap { position: relative; isolation: isolate; }
.fmap { position: fixed; inset: 0; z-index: 1050; background: #101112; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s linear .25s; }
.fmap.open { opacity: 1; visibility: visible; transition: opacity .25s; }
#fmap-map { position: absolute; inset: 0; }
.fmap .fmap-x { position: absolute; top: calc(12px + var(--safe-t)); right: 14px; z-index: 1000; font-size: 26px; line-height: 1; color: #fff; }
/* the card along the bottom: this home, or the price tag just tapped (listing.js fmCard). It sits above the map credit. */
.fmap-card { position: absolute; left: 12px; right: 12px; bottom: calc(26px + var(--safe-b)); z-index: 1000; max-width: 520px; margin: 0 auto; padding: 12px; border-radius: 22px; background: rgba(22,23,24,.94); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); border: 1px solid var(--line2); box-shadow: 0 18px 50px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.35); }
.fmap.open .fmap-card { animation: rise .45s var(--spring) .08s both; }
.fc-main { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; align-items: center; width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fc-ph { width: 76px; height: 76px; border-radius: 14px; overflow: hidden; background: var(--card2); }
.fc-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fc-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fc-eye { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-eye.me { color: var(--sea); }
.fc-eye i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sea); box-shadow: 0 0 0 3px rgba(127,183,174,.22); }
.fc-txt b { font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fc-addr { font-size: 14.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-specs { font-size: 13px; color: var(--soft); }
.fc-foot { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.fc-legend { display: flex; align-items: center; gap: 10px; font-size: 13px; line-height: 1.4; color: var(--soft); text-wrap: pretty; }
.fc-swatch { flex: none; position: relative; display: inline-flex; align-items: center; height: 22px; margin-bottom: 4px; padding: 0 7px; border-radius: 6px; background: #0D0D0E; border: 1px solid rgba(127,183,174,.5); color: #fff; font-size: 11px; font-weight: 800; }
.fc-swatch::after { content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px; border: 4px solid transparent; border-bottom: 0; border-top-color: #0D0D0E; }   /* a tiny price tag */
.fc-btns { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; }
.fc-btns .btn { min-height: 46px; padding: 0 12px; gap: 6px; }
.fc-btns .btn svg.i { width: 17px; height: 17px; }
.fmap-card.swap .fc-main, .fmap-card.swap .fc-foot { animation: fcIn .28s var(--ease) both; }
@keyframes fcIn { from { opacity: 0; transform: translate3d(0, 6px, 0); } }
/* The home a listing is about, on its maps (listing.js homePinHTML): a sea "This home" tag (with the photo on the
   full-screen map) over a pulsing dot on the spot, drawn above every price tag. The price tag tapped turns white. */
.home-pin { background: none; border: 0; width: 0; height: 0; }
.ghome { position: absolute; z-index: 6; }
.home-pin.leaflet-interactive, .ghome.tap { cursor: pointer; }
.hp-in { position: absolute; left: 0; bottom: 15px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; }
.hp-ph { display: block; width: 78px; height: 56px; margin-bottom: -9px; border-radius: 12px; overflow: hidden; background: #1B1C1E; border: 2.5px solid var(--sea); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.hp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 11px 0 9px; border-radius: var(--r-pill); background: var(--sea); color: #0D0D0E; font-family: var(--font); font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 0 2px #0D0D0E, 0 6px 16px rgba(0,0,0,.5); }
.hp-tag svg.i { width: 14px; height: 14px; stroke-width: 2.5; }
.hp-tag::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--sea); }
.hp-dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--sea); border: 3px solid #0D0D0E; box-sizing: border-box; animation: hp-pulse 2s ease-out infinite; }
@keyframes hp-pulse { from { box-shadow: 0 0 0 0 rgba(127,183,174,.65); } to { box-shadow: 0 0 0 16px rgba(127,183,174,0); } }
@media (prefers-reduced-motion: reduce) { .hp-dot, .fmap.open .fmap-card, .fmap-card.swap .fc-main, .fmap-card.swap .fc-foot { animation: none; } }
#mini-map { position: absolute; inset: 0; }
.flood { display: flex; gap: 12px; align-items: flex-start; margin-top: 14px; font-size: 14.5px; }
.flood svg.i { width: 24px; height: 24px; color: var(--sea); }
.sim { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 -2px; }
.sim::-webkit-scrollbar { display: none; }
.sim .hcard { flex: 0 0 min(300px, 78vw); scroll-snap-align: start; }
.rail { position: sticky; top: 90px; display: grid; gap: 14px; }
.rail .card { padding: 22px; }
.rail .price { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.rail .btn { width: 100%; margin-top: 10px; }
.brent { display: flex; gap: 12px; align-items: center; }
.brent img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.brent b { display: block; font-size: 15px; }
.brent span { font-size: 13px; color: var(--soft); line-height: 1.4; display: block; }
.sn { display: block; text-decoration: none; padding: 18px 20px; border-radius: var(--r-card); background: linear-gradient(135deg, #17302C 0%, #161718 100%); border: 1px solid var(--sea-100); color: #fff; }
.sn b { display: block; font-size: 17px; font-weight: 800; }
.sn span { font-size: 14px; color: rgba(255,255,255,.75); }
.story p { font-size: 16px; line-height: 1.7; margin-bottom: 14px; }
.story .by { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--soft); }
.story .by img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; }
.reveal { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity .7s var(--ease), transform .8s var(--spring-soft); }
.reveal.in { opacity: 1; transform: none; }
.reveal.now { transition: none; }
/* Listing before listing.js has the home (direct visits and shared links): hold the photo's space so nothing jumps */
#listing:empty { min-height: 100vh; }
#listing:empty::before { content: ""; display: block; height: min(58vh, 560px); margin-top: 22px; border-radius: var(--r-card); background: #161718; }
@media (max-width: 900px) { #listing:empty::before { height: min(calc(75vw + 28px), 74vh); margin-top: 0; border-radius: 0; } }   /* below the fold when it arrived: just there, no fade under a fast flick (idx.js reveal) */

/* Sticky bottom action bar (phones) */
.actbar { display: none; }

/* Lightbox */
.lbx { position: fixed; inset: 0; z-index: 1100; background: #050506; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s linear .3s; }
.lbx.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.lbx-top { display: flex; align-items: center; justify-content: space-between; padding: calc(12px + var(--safe-t)) 16px 10px; color: #fff; font-size: 14px; font-weight: 700; }
.lbx-top .ib { background: rgba(255,255,255,.14); color: #fff; box-shadow: none; }
.lbx-track { flex: 1; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.lbx-track::-webkit-scrollbar { display: none; }
.lbx-track figure { flex: 0 0 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.lbx-count { text-align: center; color: #fff; font-size: 17px; font-weight: 700; padding: 16px 16px 4px; font-variant-numeric: tabular-nums; }
.lbx-cta { padding: 12px 16px calc(14px + var(--safe-b)); }
.lbx-cta .btn { width: 100%; max-width: 560px; margin: 0 auto; display: flex; }
.lbx-track img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lbx-nav { position: absolute; top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 28px; cursor: pointer; }
.lbx-nav.p { left: 18px; } .lbx-nav.n { right: 18px; }
@media (hover: none) { .lbx-nav { display: none; } }
.frame { position: fixed; inset: 0; z-index: 1100; background: rgba(5,5,6,.92); display: none; align-items: center; justify-content: center; }
.frame.open { display: flex; }
.frame iframe { width: min(1100px, 94vw); height: min(700px, 80vh); border: 0; border-radius: 16px; background: #000; }
.frame .ib { position: absolute; top: calc(14px + var(--safe-t)); right: 14px; }

/* ---------------------------------------------------------------- Sheets (filters, tour, gate, save) */
.sheet { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; visibility: hidden; pointer-events: none; }
.sheet.open { visibility: visible; pointer-events: auto; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .32s; }
.sheet.open .sheet-scrim { opacity: 1; }
.sheet-panel { position: relative; min-width: 0; width: 100%; max-height: calc(100dvh - 20px); display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 24px 24px 0 0; transform: translate3d(0, 105%, 0); transition: transform var(--t-sheet) var(--spring); padding-bottom: var(--safe-b); box-shadow: var(--shadow-lg); }
.sheet.open .sheet-panel { transform: none; }
.sheet.dragging .sheet-panel { transition: none; }
.sheet-grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.22); margin: 9px auto 0; flex: none; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 12px 20px 12px; flex: none; touch-action: none; }
.sheet-head h2 { flex: 1; font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.sheet-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--field); font-size: 22px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.sheet-body { padding: 4px 20px 16px; overflow-y: auto; overscroll-behavior: contain; min-width: 0; }
.sheet-foot { display: flex; gap: 10px; padding: 12px 20px 16px; border-top: 1px solid var(--line); flex: none; }
.sheet-foot .btn { flex: 1; }
.sheet.locked .sheet-x, .sheet.locked .sheet-grab { display: none; }
.sheet-body > button[type="submit"] { position: sticky; bottom: 10px; z-index: 2; margin-top: 16px; box-shadow: 0 0 0 10px var(--card), 0 -18px 20px 4px var(--card); }
.sw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 600; cursor: pointer; }
.sw-row small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; }
.sw { position: relative; width: 51px; height: 31px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw span { position: absolute; inset: 0; border-radius: 16px; background: #3A3B3E; transition: background .25s; pointer-events: none; }
.sw span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.2); transition: transform .38s var(--spring); }
.sw input:checked + span { background: var(--sea); }
.sw input:checked + span::after { transform: translateX(20px); }
.f-group { margin-bottom: 20px; }
.f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lead-home { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; padding: 10px; border-radius: 14px; background: var(--field); }
.lead-home img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; }
.lead-home b { display: block; font-size: 14.5px; font-weight: 800; }
.lead-home span { font-size: 13px; color: var(--soft); }
.when { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line2); margin-bottom: 14px; font-weight: 700; }
.when svg.i { color: var(--sea); }
.perks { display: grid; gap: 10px; margin: 2px 0 18px; }
.perks div { display: flex; gap: 10px; font-size: 15px; }
.perks svg.i { color: var(--sea); width: 20px; height: 20px; }
.gate-lead { color: var(--soft); font-size: 15px; margin-bottom: 14px; }
.gate-skip { width: 100%; background: none; border: 0; padding: 14px; font-size: 14px; font-weight: 600; color: var(--soft); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.done { text-align: center; padding: 24px 8px 14px; }
.done svg { width: 72px; height: 72px; }
.done circle { stroke: var(--sea); stroke-width: 2.5; fill: rgba(127,183,174,.1); stroke-dasharray: 176; stroke-dashoffset: 176; animation: draw .7s var(--ease) forwards; }
.done path { stroke: var(--sea); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s var(--ease) .45s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h3 { font-size: 22px; font-weight: 800; margin-top: 14px; }
.done p { color: var(--soft); margin: 8px auto 0; max-width: 34ch; }
body.gated .lp-body, body.gated .lp-hero { filter: blur(6px); opacity: .55; pointer-events: none; user-select: none; transition: filter .4s, opacity .4s; }

/* ---------------------------------------------------------------- AI chat */
.chat .sheet-panel { height: min(92dvh, 820px); }
/* Keyboard up (idx.js fitKeyboard): sheets sit in the visible area above it, the chat box stays in view while typing */
html.kb-open .sheet { top: var(--vv-top, 0px); bottom: auto; height: var(--vv-h, 100%); }
html.kb-open .sheet-panel { max-height: calc(var(--vv-h, 100dvh) - 8px); }
html.kb-open .chat .sheet-panel { height: calc(var(--vv-h, 100dvh) - 8px); }
html.kb-open .chat-disc { display: none; }
html.kb-open .sheet-scrim { position: fixed; inset: 0; }   /* still dims the page behind the keyboard's toolbar */
.chat-head { display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px; border-bottom: 1px solid var(--line); flex: none; touch-action: none; }
.chat-av { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(140deg, #8FC9BF, #4E8F86); color: #0D0D0E; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.chat-av svg.i { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.chat-head b { display: block; font-size: 17px; font-weight: 800; }
.chat-head small { display: block; font-size: 12px; color: var(--muted); }
.chat-head .sheet-x { margin-left: auto; }
.chat-ctx { display: flex; gap: 10px; align-items: center; padding: 10px 18px; background: var(--field); font-size: 13px; color: var(--soft); flex: none; }
.chat-ctx img { width: 44px; height: 32px; border-radius: 8px; object-fit: cover; }
.chat-ctx b { color: var(--text); }
.chat-log { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 86%; padding: 11px 15px; border-radius: 20px; font-size: 15.5px; line-height: 1.45; animation: msg .42s var(--spring-soft) both; white-space: pre-line; overflow-wrap: anywhere; }
@keyframes msg { from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.98); } }
.msg.me { align-self: flex-end; background: var(--paper); color: var(--on-paper); border-bottom-right-radius: 6px; }
.msg.ai { align-self: flex-start; background: var(--field); border-bottom-left-radius: 6px; }
.msg.ai a { color: var(--sea); font-weight: 700; }
.typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: 14px 16px; background: var(--field); border-radius: 20px; border-bottom-left-radius: 6px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: #8B8E93; animation: blink 1.2s infinite; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 8px 18px 4px; flex: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chips .chip { font-size: 13.5px; padding: 8px 12px; }
.chat-in { display: flex; gap: 8px; align-items: flex-end; padding: 10px 14px 12px; border-top: 1px solid var(--line); flex: none; }
.chat-in textarea { flex: 1; min-height: 46px; max-height: 120px; resize: none; border-radius: 23px; border: 1.5px solid var(--line2); padding: 11px 16px; font: inherit; font-size: 16px; outline: 0; background: var(--field); color: var(--text); }
.chat-in textarea:focus { border-color: var(--sea); }
.chat-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--paper); color: var(--on-paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: transform var(--t-ui) var(--spring), opacity .2s; }
.chat-send:disabled { opacity: .35; }
.chat-card { align-self: stretch; background: var(--card); border: 1.5px solid var(--line2); border-radius: 18px; padding: 16px; animation: msg .45s var(--spring-soft) both; }
.chat-card b { display: block; font-size: 16px; font-weight: 800; margin-bottom: 4px; }
.chat-card p { font-size: 13.5px; color: var(--soft); margin-bottom: 12px; }
.chat-disc { font-size: 11.5px; color: var(--muted); text-align: center; padding: 0 18px 8px; flex: none; }

/* ---------------------------------------------------------------- Continuity + accessibility */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: var(--ease); }
::view-transition-group(listing-hero) { animation-duration: .5s; animation-timing-function: var(--ease); }
::view-transition-old(listing-hero), ::view-transition-new(listing-hero) { animation: none; mix-blend-mode: normal; height: 100%; object-fit: cover; overflow: clip; }

@media (min-width: 769px) {
  .sheet { align-items: center; justify-content: center; grid-template-columns: minmax(0, min(540px, calc(100vw - 48px))); }
  .sheet-panel { border-radius: 24px; transform: translate3d(0, 24px, 0) scale(.98); opacity: 0; transition: transform .42s var(--spring), opacity .22s; }
  .sheet.open .sheet-panel { transform: none; opacity: 1; }
  .sheet-grab { display: none; }
  .chat { justify-content: end; align-items: stretch; grid-template-columns: minmax(0, 440px); }
  .chat .sheet-panel { height: auto; max-height: none; border-radius: 24px 0 0 24px; transform: translate3d(40px, 0, 0); }
  .chat.open .sheet-panel { transform: none; }
}
@media (max-width: 1300px) { .split { grid-template-columns: minmax(0, 1fr) 420px; } .grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) { .lp-body { grid-template-columns: minmax(0, 1fr) 320px; } }

/* ---------------------------------------------------------------- Phones */
@media (max-width: 900px) {
  .top-nav, .brand small { display: none; }
  .brand img.brand-lockup { height: 34px; }
  .hs-wrap { padding: 0 16px 24px; }
  /* the filter chips run to the screen edge like Zillow's, instead of stopping at the page margin */
  .f-row { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; overscroll-behavior-x: contain; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .map-pane { display: none; }
  body.show-map .map-pane { display: block; position: fixed; inset: 0; z-index: 70; border-radius: 0; height: 100%; top: 0; }
  body.show-map .hs-top { visibility: hidden; }
  .map-toggle { display: inline-flex; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + var(--safe-b)); z-index: 80; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); box-shadow: var(--shadow-lg); }
  /* Every home on its own card, like Zillow's list (10-30 pm): a lighter surface, a hairline edge and a soft shadow,
     the photo flush with the card's top, and a clear gap before the next one, so a card's text never reads as part of
     the next home's photo. */
  .grid { gap: 16px; }
  .hcard { border-radius: 18px; background: #18191B; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 10px 26px rgba(0,0,0,.5); overflow: hidden; }
  .hc-media { border-radius: 0; aspect-ratio: 4 / 3; }
  /* Result photos are 4:3, the shape MLS photos come in, so the whole house shows with nothing cropped, and the card is
     the same shape as the listing photo it opens into (Grayson 10-30 late; 16:9 was tried that evening). */
  .grid .hc-media, .grid .skel i:first-child { aspect-ratio: 4 / 3; }
  .hc-body { padding: 11px 14px 13px; }
  .hc-arrow { display: none; }
  .lm { grid-template-columns: minmax(0, 1fr); }
  .s-hero.on { grid-template-columns: minmax(0, 1fr); padding: 20px 18px; }
  .s-hero .btn { width: 100%; }
  .s-ask span { display: none; }
  .s-ask { width: 52px; padding: 0; }

  /* Listing: photo pinned behind, sheet slides over it (the Zillow move), sticky actions */
  body.pg-listing .hs-top { display: none; }
  body.pg-listing .hs-wrap { padding: 0; }
  /* Listing on phones (v3.4): the photo is a sticky header. It scrolls up until only the strip under the back / save /
     share / AI bar is left (bar bottom + 32px = 96px + safe area), then stays, and the details slide under it. Its bottom
     28px is the sheet's rounded top edge, so nothing has to be clipped while scrolling: native sticky, smooth at any speed.
     Size (10-30 late): the photo above the sheet's edge is 4:3, the shape MLS photos come in, so the whole picture shows
     with nothing cut off (Zillow's listing photo). 52% of the screen height cut the house's sides off; the card's 16:9 was
     a thin band with the buttons and badges crowding it. The card's 16:9 photo grows into it (the morph crops to cover,
     so it just opens taller). Capped for phones held sideways. */
  .lp-hero { --hero-h: min(calc(75vw + 28px), 74vh); --hero-run: calc(var(--hero-h) - 124px - var(--safe-t));
    position: sticky; top: calc(0px - var(--hero-run)); height: var(--hero-h); z-index: 2; overflow: hidden; }
  .lp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 29px; z-index: 6; pointer-events: none;
    border-radius: 26px 26px 0 0; border-top: 1px solid var(--line); box-shadow: 0 -10px 30px rgba(0,0,0,.5);
    background: var(--bg); }   /* the handle itself is .lp-grab i (draggable, 10-30 block) */
  .lp-track { display: flex; height: 100%; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .lp-track::-webkit-scrollbar { display: none; }
  .lp-track button { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; border-radius: 0 !important; cursor: default; }
  .lp-track button:nth-child(n+6) { display: block; }
  .lp-ph { border-radius: 0; }
  /* Zillow keeps back / save / share / AI on screen the whole way down: the bar is fixed above the sliding sheet */
  .lp-float { position: fixed; top: calc(12px + var(--safe-t)); left: 12px; right: 12px; z-index: 70; }
  .lp-status { bottom: 42px; transition: opacity .2s; }
  .lp-count { bottom: 42px; transition: opacity .2s; }
  body.lp-stuck .lp-status, body.lp-stuck .lp-count { opacity: 0; pointer-events: none; }
  .lp-body { position: relative; z-index: 1; display: block; margin-top: -1px; background: var(--bg); padding: 4px 16px calc(96px + var(--safe-b)); }
  .lp-main { gap: 14px; }
  .rail { display: none; }
  .lp-head { padding: 0 4px; }
  .lp-head .price { font-size: 34px; }
  .card { padding: 20px 18px; }
  .ff-grid { gap: 20px 14px; }
  .actbar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 14px calc(10px + var(--safe-b)); background: rgba(13,13,14,.9); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-top: 1px solid var(--line); }
  .actbar .btn { min-height: 58px; }
  .actbar .btn:first-child { flex: 0 0 34%; }
  .actbar .btn:last-child { flex: 1; }
  .pay-ctl { grid-template-columns: 1fr; }
  .attr { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* Chat: homes the AI found, as real cards in the conversation */
.chat-homes { align-self: stretch; margin: 2px -18px; }
.chat-homes .sim { padding: 4px 18px 6px; margin: 0; }
.chat-homes .sim .hcard { flex: 0 0 236px; }
.chat-homes .btn { margin: 0 18px; width: calc(100% - 36px); }
.chat-homes .hc-price { font-size: 19px; }
.chat-homes .hc-facts, .chat-homes .hc-addr { font-size: 13px; }
@media (max-width: 900px) { .hide-sm { display: none; } .top-call { min-height: 42px; width: 42px; padding: 0; border-radius: 50%; } }

/* ================================================================ v3.1 (2026-10-28): liquid glass + Zillow app structure
   Glass recipe (Apple's Liquid Glass, dark): a thin tinted lens over a strong blur + saturation, a bright specular rim
   on top, a faint rim below, and a soft inner glow for thickness. Pressed glass swells and brightens instead of
   sinking. Used for floating controls only (map pill, tab bar, buttons over photos and headers); content stays solid. */
.lg, .ib, .ib-group, .gl-btn, .gl-pill, .map-toggle, .tabbar, .lp-status, .cmp-bar {
  --lg-tint: rgba(38,39,42,.40);
  background: var(--lg-tint);
  -webkit-backdrop-filter: blur(18px) saturate(185%) brightness(1.08);
  backdrop-filter: blur(18px) saturate(185%) brightness(1.08);
  border: 0;
  box-shadow: inset 0 1px .5px rgba(255,255,255,.40), inset 0 -.5px .5px rgba(255,255,255,.16), inset 0 0 0 .5px rgba(255,255,255,.14),
    inset 0 0 18px rgba(255,255,255,.05), 0 8px 26px rgba(0,0,0,.38), 0 1px 2px rgba(0,0,0,.28);
  isolation: isolate;
}
.lg::before, .ib::before, .gl-btn::before, .gl-pill::before, .map-toggle::before, .tabbar::before, .cmp-bar::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(120% 85% at 28% -14%, rgba(255,255,255,.26), rgba(255,255,255,0) 56%),
              radial-gradient(90% 60% at 80% 118%, rgba(255,255,255,.09), rgba(255,255,255,0) 62%);
  transition: opacity .3s, background-color .3s;
}
.ib, .gl-btn, .gl-pill { position: relative; }
.ib-group .ib { box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; background: transparent; }
.ib-group .ib::before { display: none; }
.ib:active, .gl-btn:active, .gl-pill:active, .map-toggle:active { transform: scale(1.07); transition: transform .5s var(--spring); }
.ib:active::before, .gl-btn:active::before, .gl-pill:active::before, .map-toggle:active::before { background-color: rgba(255,255,255,.10); }
.map-toggle:active { transform: translateX(-50%) scale(1.07); }
.gl-btn { width: 52px; height: 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); cursor: pointer; flex: none; text-decoration: none; transition: transform .45s var(--spring); }
.gl-btn svg.i { width: 23px; height: 23px; }
.gl-btn .badge { position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; border-radius: 10px; background: var(--sea); color: #0D0D0E; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; box-shadow: 0 0 0 2px var(--bg); }
.gl-btn .badge:empty { display: none; }
.gl-pill { height: 46px; padding: 0 20px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: var(--text); text-decoration: none; cursor: pointer; transition: transform .45s var(--spring); white-space: nowrap; }
.gl-pill.sea { color: var(--sea); }

/* AI orb: seafoam lens with a slow light sweep around its rim (the "AI is here" signal; still under reduce-motion) */
@property --orb { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.ai-orb { position: relative; height: 52px; min-width: 52px; padding: 0 15px; border-radius: var(--r-pill); border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  color: #0B1F1C; font-size: 15px; font-weight: 800; white-space: nowrap;
  background: radial-gradient(120% 130% at 28% 12%, #C2EAE2 0%, #86C2B8 42%, #3F8077 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.7), inset 0 -3px 8px rgba(0,0,0,.2), 0 8px 22px rgba(63,128,119,.45); transition: transform .45s var(--spring); }
.ai-orb svg.i { width: 23px; height: 23px; fill: currentColor; stroke: none; }
.ai-orb::after { content: ""; position: absolute; inset: -3px; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--orb), rgba(194,234,226,0) 0deg, rgba(222,250,244,.95) 50deg, rgba(194,234,226,0) 110deg, rgba(194,234,226,0) 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: orb 4.5s linear infinite; }
@keyframes orb { to { --orb: 360deg; } }
.ai-orb:active { transform: scale(1.07); }
.ai-orb.solo { width: 52px; padding: 0; }

/* ---------------------------------------------------------------- Search top (Zillow app: filters · search · AI) */
.s-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 14px 0 10px; }
.s-field { min-height: 52px; border-radius: var(--r-pill); padding: 0 6px 0 16px; background: var(--card2); border: 1px solid var(--line2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.s-field > svg.i { color: var(--soft); }
.s-mic { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; transition: color .2s, background .2s; }
.s-mic[hidden] { display: none; }
.s-mic.on { color: #0B1F1C; background: var(--sea); animation: mic 1.4s ease-in-out infinite; }
@keyframes mic { 50% { box-shadow: 0 0 0 8px rgba(127,183,174,.18); } }
.f-row { align-items: center; }
.pill.o { background: transparent; border-color: var(--line2); }
.pill.sortp { position: relative; }
.pill.sortp select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 16px; }
.f-div { flex: none; width: 1px; height: 26px; background: var(--line2); margin: 0 2px; }
.res-head .sort { display: none; }

/* Photo pills: sentence case like Zillow; price cut on paper so it reads first */
/* Card tags: a solid tint, not a live blur. Every card on screen used to re-blur its photo on every scroll frame. */
.hc-tags .tag { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 700; padding: 6px 11px; background: rgba(20,21,23,.78); box-shadow: inset 0 .5px 0 rgba(255,255,255,.25), 0 1px 4px rgba(0,0,0,.3); }
.hc-tags .tag.cut { background: var(--paper); color: var(--on-paper); }
.hc-tags .tag.new { background: var(--sea); color: #0B1F1C; }
.hc-body { position: relative; }
.hc-price { padding-right: 44px; }
.hc-more { position: absolute; top: 6px; right: 6px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--sea); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s, transform .4s var(--spring); }
.hc-more:hover { background: var(--field); }
.hc-more:active { transform: scale(.9); }
.hcard.leaving { opacity: 0; transform: scale(.96); transition: opacity .28s, transform .32s var(--ease); }

/* ---------------------------------------------------------------- Tab bar (phones) */
.tabbar { display: none; }
@media (max-width: 900px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); position: fixed; left: 12px; right: 12px; bottom: calc(10px + var(--safe-b)); z-index: 90; height: 66px; padding: 5px; border-radius: 33px; --lg-tint: rgba(30,31,34,.52); view-transition-name: tabbar; }
  .tabbar a, .tabbar button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; border: 0; background: none; border-radius: 28px; color: var(--soft); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer; transition: color .25s, transform .45s var(--spring); }
  .tabbar a:active, .tabbar button:active { transform: scale(1.08); }
  .tabbar svg.i { width: 25px; height: 25px; stroke-width: 1.9; }
  .tabbar [aria-current="page"] { color: var(--sea); }
  .tabbar [aria-current="page"] svg.i { fill: rgba(127,183,174,.22); }
  .tabbar [data-tab=ask] svg.i { fill: currentColor; stroke: none; }
  .tabbar .n { position: absolute; top: 3px; left: 50%; margin-left: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--sea); color: #0B1F1C; font-size: 10.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; box-shadow: 0 0 0 2px rgba(20,21,23,.9); }
  .tabbar .n:empty { display: none; }
  .tab-ind { position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc((100% - 10px) / 5); border-radius: 28px; background: rgba(255,255,255,.11); box-shadow: inset 0 1px .5px rgba(255,255,255,.28), inset 0 0 0 .5px rgba(255,255,255,.08);
    transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform .62s var(--spring); view-transition-name: tab-ind; }
  body.has-tabs .foot { padding-bottom: calc(104px + var(--safe-b)); }
  .map-toggle { bottom: calc(88px + var(--safe-b)); min-height: 50px; padding: 0 24px; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 700; cursor: pointer; color: var(--text); font-size: 16px; --lg-tint: rgba(30,31,34,.5); border: 0; }
  .map-toggle svg.i { width: 20px; height: 20px; }
  .map-dock { bottom: calc(144px + var(--safe-b)); }
  .s-bar { padding-top: 12px; }
  .ai-orb:not(.solo) span { display: none; }
  .ai-orb:not(.solo) { width: 52px; padding: 0; }
}

/* ---------------------------------------------------------------- Toast + card menu */
.toast { position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); z-index: 1200; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 18px; border-radius: var(--r-pill); color: #fff; font-size: 14.5px; font-weight: 600; --lg-tint: rgba(30,31,34,.78);
  transform: translate(-50%, 24px) scale(.96); opacity: 0; pointer-events: none; transition: transform .55s var(--spring), opacity .25s; max-width: calc(100vw - 32px); white-space: nowrap; }
.toast.show { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast button { border: 0; background: var(--paper); color: var(--on-paper); font-family: inherit; font-weight: 800; font-size: 14px; padding: 9px 14px; border-radius: var(--r-pill); cursor: pointer; }
@media (min-width: 901px) { .toast { bottom: 28px; } }
.menu .sheet-panel { padding-bottom: calc(10px + var(--safe-b)); }
.menu-home { display: flex; gap: 12px; align-items: center; padding: 10px 20px 14px; border-bottom: 1px solid var(--line); }
.menu-home img { width: 64px; height: 48px; border-radius: 10px; object-fit: cover; flex: none; }
.menu-home b { display: block; font-size: 17px; font-weight: 800; }
.menu-home span { font-size: 13.5px; color: var(--soft); }
.menu-home span + span { display: block; color: var(--muted); }   /* IDX courtesy line (10-30), same size as the address */
.menu-list { display: grid; padding: 6px 8px 4px; }
.menu-list button { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 0 14px; border: 0; background: none; border-radius: 14px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: left; transition: background .15s; }
.menu-list button:hover, .menu-list button:active { background: var(--field); }
.menu-list svg.i { width: 22px; height: 22px; color: var(--sea); }
.menu-list button:nth-child(3) svg.i { fill: var(--sea); stroke: none; }
@media (min-width: 769px) { .sheet.menu { grid-template-columns: minmax(0, 420px); } }

/* ---------------------------------------------------------------- Filters: full screen on phones (Zillow's filter page) */
.sheet.full .sheet-panel { height: 100dvh; max-height: none; border-radius: 0; border: 0; padding-bottom: 0; transform: translate3d(100%, 0, 0); overflow: hidden; }
.sheet.full.open .sheet-panel { transform: none; }
.fp-head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(10px + var(--safe-t)) 14px 18px;
  background: linear-gradient(180deg, rgba(22,23,24,.97) 0%, rgba(22,23,24,.86) 62%, rgba(22,23,24,0) 100%); pointer-events: none; }
.fp-head > * { pointer-events: auto; }
.fp-head h2 { font-size: 18px; font-weight: 800; text-align: center; }
.fp-head .gl-btn { width: 48px; height: 48px; justify-self: start; }
.fp-head .gl-pill { justify-self: end; color: var(--sea); }
.fp-body { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(76px + var(--safe-t)) 0 calc(120px + var(--safe-b)); }
.fp-alert { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; background: var(--field); font-size: 15px; color: var(--soft); }
.fp-alert svg.i { color: var(--sea); flex: none; }
.fp-alert span { flex: 1; }
.fp-alert button { border: 0; background: none; color: var(--sea); font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; white-space: nowrap; min-height: 44px; margin: -10px -8px; padding: 0 8px; border-radius: 12px; }   /* 44px finger target (10-30) */
.fp-sec { padding: 24px 20px; border-bottom: 1px solid var(--line); }
.fp-sec:last-child { border-bottom: 0; }
.fp-sec h3 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-sec h3 small, .fp-sub { font-size: 13px; color: var(--muted); font-weight: 600; }
.fp-sub { display: block; margin: -8px 0 14px; font-weight: 500; line-height: 1.5; }
.fp-sec h4 { font-size: 15px; font-weight: 700; margin: 18px 0 10px; }
.fp-sec h3.mt { margin-top: 26px; }
.fp-sec select + h3.mt, .fp-sec .f-grid2 + h3.mt { margin-top: 26px; }
details.fp-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; font-size: 18px; font-weight: 800; cursor: pointer; }
details.fp-sec > summary::-webkit-details-marker { display: none; }
details.fp-sec > summary svg.i { transition: transform .4s var(--spring); }
details.fp-sec[open] > summary { margin-bottom: 14px; }
details.fp-sec[open] > summary svg.i { transform: rotate(180deg); }
.fp-foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 22px 16px calc(14px + var(--safe-b)); background: linear-gradient(180deg, rgba(22,23,24,0) 0%, rgba(22,23,24,.92) 38%, var(--card) 100%); }
.fp-foot .btn { width: 100%; min-height: 58px; border-radius: var(--r-pill); font-size: 17px; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.seg.round { border-radius: var(--r-pill); padding: 4px; }
.seg.round button { border-radius: var(--r-pill); min-height: 44px; font-size: 15px; }
.seg.round + .seg.round, .fp-sec .seg + .hist { margin-top: 16px; }
.hist { display: flex; align-items: flex-end; gap: 2px; height: 76px; margin: 22px 15px 0; }
.hist i { flex: 1; background: var(--sea); border-radius: 2px 2px 0 0; min-height: 3px; transition: opacity .2s, height .55s var(--spring-soft); }
.hist i.off { opacity: .2; }
.rng { position: relative; height: 32px; }
.rng .track { position: absolute; left: 15px; right: 15px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--line2); }
.rng .fill { position: absolute; top: 0; bottom: 0; left: var(--lo, 0%); right: calc(100% - var(--hi, 100%)); background: var(--sea); border-radius: 2px; }
.rng input { position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; outline: 0; }
.rng input::-webkit-slider-runnable-track { height: 32px; background: none; }
.rng input::-moz-range-track { background: none; }
.rng input::-webkit-slider-thumb { -webkit-appearance: none; pointer-events: auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.5), inset 0 -1px 2px rgba(0,0,0,.1); cursor: grab; transition: transform .35s var(--spring); }
.rng input::-moz-range-thumb { pointer-events: auto; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 10px rgba(0,0,0,.5); cursor: grab; }
.rng input:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.rng input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(127,183,174,.45), 0 2px 10px rgba(0,0,0,.5); }
.rng-ends { display: flex; justify-content: space-between; font-size: 15px; color: var(--soft); margin: 2px 0 16px; }
.money-in { position: relative; display: block; }
.money-in .f-label { margin-bottom: 6px; color: var(--text); font-size: 15px; }
.money-in input { padding-left: 30px; }
.money-in::before { content: "$"; position: absolute; left: 15px; bottom: 15px; color: var(--muted); font-size: 16px; pointer-events: none; }
.money-in.mo::after { content: "/mo"; position: absolute; right: 14px; bottom: 15px; color: var(--muted); font-size: 14px; pointer-events: none; }
.fp-note { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.55; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 94px; padding: 12px 6px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card); color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: center; transition: transform .45s var(--spring), border-color .2s, background .2s; }
.tile svg.i { width: 30px; height: 30px; stroke-width: 1.6; }
.tile[aria-pressed="true"] { border: 2px solid var(--sea); background: var(--sea-100); color: #fff; }
.tile[aria-pressed="true"] svg.i { color: var(--sea); }
.tile:active { transform: scale(.95); }
.ck-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; font-size: 16px; cursor: pointer; }
.ck-row input { -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin: 0; border-radius: 8px; border: 2px solid #5A5D62; background: transparent; flex: none; display: grid; place-content: center; cursor: pointer; transition: background .2s, border-color .2s; }
.ck-row input::after { content: ""; width: 12px; height: 7px; margin-top: -3px; border-left: 2.5px solid #0B1F1C; border-bottom: 2.5px solid #0B1F1C; transform: rotate(-45deg) scale(0); transition: transform .35s var(--spring); }
.ck-row input:checked { background: var(--sea); border-color: var(--sea); }
.ck-row input:checked::after { transform: rotate(-45deg) scale(1); }
.ck-row input[type=radio] { border-radius: 50%; }
.ck-row input[type=radio]::after { width: 10px; height: 10px; margin: 0; border: 0; border-radius: 50%; background: #0B1F1C; transform: scale(0); }
.ck-row input[type=radio]:checked::after { transform: scale(1); }
.ck-row small { display: block; font-size: 13px; color: var(--muted); }
.ck-row .info { margin-left: auto; color: var(--muted); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; }
.fchip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 15px 8px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--card); font-family: inherit; font-size: 14.5px; font-weight: 700; color: var(--text); cursor: pointer; transition: transform .45s var(--spring), border-color .2s, background .2s; }
.fchip svg.i { width: 19px; height: 19px; color: var(--sea); }
.fchip[aria-pressed="true"] { border-color: var(--sea); background: var(--sea); color: #0B1F1C; }
.fchip[aria-pressed="true"] svg.i { color: #0B1F1C; }
.fchip:active { transform: scale(.95); }
.fp-sec .f-grid2 + h4 { margin-top: 18px; }
@media (min-width: 769px) {
  .sheet.full { grid-template-columns: minmax(0, min(620px, calc(100vw - 48px))); }
  .sheet.full .sheet-panel { height: min(90vh, 920px); border-radius: 24px; border: 1px solid var(--line); transform: translate3d(0, 24px, 0) scale(.98); }
  .sheet.full.open .sheet-panel { transform: none; }
  .fp-head { padding-top: 12px; border-radius: 24px 24px 0 0; }
  .fp-body { padding-top: 76px; }
}

/* ---------------------------------------------------------------- Saved / Tours / Updates (the app's other tabs) */
.gl-head { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: calc(10px + var(--safe-t)) 16px 16px;
  background: linear-gradient(180deg, rgba(13,13,14,.96) 0%, rgba(13,13,14,.82) 58%, rgba(13,13,14,0) 100%); }
.gl-head h1 { font-size: 18px; font-weight: 800; text-align: center; }
.gl-head > :first-child { justify-self: start; }
.gl-head > :last-child { justify-self: end; }
.hub { max-width: 780px; margin: 0 auto; padding: 0 16px 60px; }
.hub-view[hidden] { display: none; }
.rows { margin: 0 -16px; border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); font-size: 17px; font-weight: 700; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; font-family: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.row:active { background: var(--card); }
.row > svg.i:first-child { width: 26px; height: 26px; color: var(--sea); stroke-width: 1.7; }
.row small { display: block; font-size: 13px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.row .end { margin-left: auto; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 700; }
.row .end svg.i { width: 22px; height: 22px; }
.hub-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 26px 0 14px; }
.hub-h h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.hub-h p { color: var(--soft); font-size: 15px; margin-top: 4px; }
.hub-h .btn { min-height: 46px; border-radius: var(--r-pill); }
.hub-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.hub-tools .btn { min-height: 50px; border-radius: 14px; padding: 8px 10px; }
.hub-tools .btn[aria-pressed="true"] { border-color: var(--sea); color: var(--sea); background: var(--sea-50); }
.hub-tools .sortp { position: relative; }
.hub-tools .sortp select { position: absolute; inset: 0; opacity: 0; width: 100%; cursor: pointer; font-size: 16px; }
.saved-list { display: grid; gap: 18px; }
.sv-item { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); animation: rise .55s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 50ms); }
.sv-item .hcard { border: 0; border-radius: 0; box-shadow: none; background: transparent; overflow: visible; }
.sv-item .hc-media { border-radius: 0; aspect-ratio: 16 / 10; }
.sv-item .hc-body { padding: 12px 16px 4px; }
.sv-note { margin: 4px 16px 0; font-size: 14px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.sv-note.good { color: var(--good); } .sv-note.warn { color: var(--warn); } .sv-note.gone { color: var(--muted); }
.sv-note svg.i { width: 18px; height: 18px; }
.sv-act { display: flex; gap: 10px; padding: 12px 16px 16px; }
.sv-act .btn { flex: 1; min-height: 52px; border-radius: var(--r-pill); }
.sv-item.off .hc-media { filter: grayscale(.8) brightness(.6); }
.empty { text-align: center; padding: 28px 8px 12px; }
.empty svg.art { width: 190px; height: auto; }
.empty h2 { font-size: 24px; font-weight: 800; margin-top: 12px; letter-spacing: -.01em; }
.empty p { color: var(--soft); margin: 6px auto 18px; max-width: 34ch; }
.tour-item { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); animation: rise .5s var(--spring-soft) both; }
.tour-item img, .tour-item .ph { width: 92px; height: 92px; border-radius: 12px; object-fit: cover; background: var(--field); }
.tour-when { font-size: 16px; font-weight: 800; }
.tour-addr { color: var(--soft); font-size: 14px; margin-top: 2px; }
.tour-st { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--warn); margin-top: 6px; }
.tour-st i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tour-acts { grid-column: 1 / -1; display: flex; gap: 8px; }
.tour-acts .btn { flex: 1; min-height: 46px; font-size: 14px; border-radius: var(--r-pill); }
.tour-list { display: grid; gap: 12px; }
.recs { margin-top: 30px; }
.recs h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.recs > p { color: var(--soft); margin: 2px 0 12px; }
.recs .sim { margin: 0 -16px; padding: 4px 16px 12px; }
.recs .sim .hcard { flex: 0 0 min(290px, 78vw); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.recs .sim .hc-media { border-radius: 0; }
.recs .sim .hc-body { padding: 10px 14px 12px; }
.ss-card { padding: 18px; border-radius: var(--r-card); background: linear-gradient(135deg, #17302C 0%, #161718 100%); border: 1px solid var(--sea-100); }
.ss-card b { display: block; font-size: 18px; font-weight: 800; }
.ss-card p { color: var(--soft); font-size: 14.5px; margin: 4px 0 14px; }
.ss-card .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.ss-card .btn { flex: 1; border-radius: var(--r-pill); }
.up-list { display: grid; gap: 10px; }
.up-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); }
.up-row img, .up-row .ph { width: 76px; height: 58px; border-radius: 10px; object-fit: cover; background: var(--field); }
.up-row b { display: block; font-size: 16px; font-weight: 800; }
.up-row span { display: block; font-size: 13px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-row em { font-style: normal; font-size: 12.5px; font-weight: 800; color: var(--good); white-space: nowrap; }
.up-row em.warn { color: var(--warn); }
@media (min-width: 901px) {
  body.pg-hub .gl-head { position: static; background: none; padding-top: 18px; }
  .hub { padding-bottom: 80px; }
  .saved-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  body.pg-hub .hs-top { display: none; }
  body.has-tabs .hub { padding-bottom: calc(110px + var(--safe-b)); }
}
@media (prefers-reduced-motion: reduce) { .ai-orb::after { animation: none; } }
.top-nav .nav-n { margin-left: 6px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--sea); color: #0B1F1C; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; vertical-align: 1px; }
.top-nav .nav-n:empty { display: none; }
.row .end b:empty { display: none; }
.row .end b { min-width: 22px; height: 22px; border-radius: 11px; background: var(--sea); color: #0B1F1C; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
@media (max-width: 900px) {
  .tabbar { transition: transform .55s var(--spring), opacity .3s; }
  body.tabs-away .tabbar { transform: translate3d(0, calc(100% + 26px + var(--safe-b)), 0); opacity: 0; }
  /* Map pill (v3.2): one fixed spot, moved only with the GPU (translate), a soft spring with no overshoot, and the
     press swell on its own `scale` so it never fights the move. Animating `bottom` made it jitter and bob on iPhone. */
  .map-toggle { bottom: calc(88px + var(--safe-b)); transform: none; translate: -50% 0; scale: 1; will-change: translate;
    transition: translate .45s var(--ease), scale .35s var(--spring), opacity .2s; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
  .map-toggle:active { transform: none; scale: 1.06; }
  body.tabs-away .map-toggle { translate: -50% 70px; }
  body.show-map .map-toggle { translate: -50% 0; }
  .s-field { gap: 8px; padding-left: 14px; }
  .s-mic { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------- Accounts (sign in, create, profile) */
.acct-btn { gap: 8px; }
.acct-btn .av, .gl-btn .av { width: 28px; height: 28px; border-radius: 50%; background: var(--sea); color: #0B1F1C; font-size: 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.gl-btn .av { width: 34px; height: 34px; font-size: 16px; }
.av.big { width: 52px; height: 52px; border-radius: 50%; background: var(--sea); color: #0B1F1C; font-size: 22px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.acct-tabs { margin-bottom: 16px; }
.acct-note { background: var(--sea-50); color: var(--text); border: 1px solid var(--sea-100); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin-bottom: 14px; }
.g-wrap:not(.on) { display: none !important; }
.g-wrap .g-btn { display: flex; justify-content: center; min-height: 44px; }
.g-btn iframe { color-scheme: light; }   /* the page is dark: without this, Chrome paints Google's button frame as a white box */
.g-wrap .or { max-width: 400px; margin-left: auto; margin-right: auto; }   /* Google's button tops out at 400 px: the divider matches it */
/* Sign in with Google (2026-11-04): Google draws its own button (outline theme, pill) in .g-btn; never restyle it.
   A new Google sign-up (form.g-finish) shows the Google email on a chip and asks only for the name and mobile. */
.g-busy .g-wrap, .acct.g-busy .g-wrap, form.g-busy .g-wrap { opacity: .55; pointer-events: none; transition: opacity .2s; }
.g-chip { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 14px; background: var(--field); border: 1px solid var(--line2); }
.g-chip > svg.i { color: var(--sea); flex: none; }
.g-chip span { flex: 1; min-width: 0; }
.g-chip small { display: block; font-size: 13px; font-weight: 600; color: var(--soft); }
.g-chip b { display: block; font-size: 15px; font-weight: 700; color: var(--text); overflow-wrap: break-word; }
.g-chip .link { flex: none; min-height: 40px; }
.g-lead { display: none; }
form.g-finish .g-lead { display: block; }
form.g-finish input[name="email"], form.g-finish .perks, form.g-finish .g-wrap, form.g-finish .gate-in,
.acct.g-finish .g-wrap, .acct.g-finish .acct-tabs, .acct.g-finish .acct-note { display: none !important; }
#acct-up > button[type="submit"] { margin-top: 16px; }   /* the fine print sat flush on the button (11-04) */
.f-err:empty:has(+ .consent) { min-height: 0; margin-top: 4px; }   /* no error yet: the text boxes sit 16 px under the fields, not 33 */
.or { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); }
#acct-in .f-input, #acct-code .f-input { margin-bottom: 4px; }
.code-in { text-align: center; font-size: 30px !important; font-weight: 800; letter-spacing: .38em; padding-left: .38em !important; font-variant-numeric: tabular-nums; }
.preview-code { margin-top: 10px; font-size: 13px; color: var(--warn); background: rgba(242,166,90,.08); border: 1px dashed rgba(242,166,90,.4); border-radius: 10px; padding: 8px 12px; }
.acct-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.link.danger { color: #F5A3A3; }
.link.danger.arm { font-weight: 800; }
.gate-in { text-align: center; font-size: 14px; color: var(--soft); margin-top: 2px; }
.me-card { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.me-card b { display: block; font-size: 18px; font-weight: 800; }
.me-card span { display: block; font-size: 13.5px; color: var(--soft); }
.me-card span.em { overflow-wrap: anywhere; }
.me-verify { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: 12px; background: rgba(242,166,90,.08); border: 1px solid rgba(242,166,90,.3); font-size: 14px; margin-bottom: 14px; }
.me-verify svg.i { color: var(--warn); }
.me-verify span { flex: 1; }
.acct-me .rows { margin: 0 -20px 4px; }
.acct-me .row { padding: 15px 20px; font-size: 16px; }
.ss-quick .seg { margin-top: 6px; }
.ss-wrap { margin-top: 4px; }
.ss-list { display: grid; gap: 10px; }
.ss-row { padding: 14px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--line); }
.ss-top { display: flex; gap: 10px; align-items: flex-start; }
.ss-top a { flex: 1; text-decoration: none; color: var(--text); min-width: 0; }
.ss-top b { display: block; font-size: 16px; font-weight: 800; line-height: 1.3; }
.ss-top span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }
.ss-del { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--field); color: var(--soft); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ss-del svg.i { width: 16px; height: 16px; }
.ss-freq { margin-top: 12px; }
.ss-freq button { font-size: 13px; min-height: 38px; }
@media (max-width: 900px) { .acct-btn { min-height: 42px; width: 42px; padding: 0; border-radius: 50%; } .acct-btn .av { width: 30px; height: 30px; } }
.tour-acts { display: grid; grid-template-columns: 1.25fr 1.15fr .8fr; }
.tour-acts .btn { padding: 8px 8px; min-width: 0; gap: 6px; }
.tour-acts .btn svg.i { width: 18px; height: 18px; }
/* Tours tab: reschedule or cancel (hub.js, 10-30). Quiet links under the main buttons, then the cancel sheet's two steps
   (cancel or reschedule instead, then are you sure). Red only on the destructive buttons. */
.tour-manage { grid-column: 1 / -1; display: flex; justify-content: center; gap: 26px; margin-top: -4px; }
.tour-manage a, .tour-manage button { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 6px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--soft); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tour-manage svg.i { width: 17px; height: 17px; }
.tour-manage .tc-link { color: #F0838F; }
.tc-text { font-size: 15px; line-height: 1.5; color: var(--soft); margin: 14px 0 0; }
.tc-text b { color: var(--text); }
.tc-btns { display: grid; gap: 10px; margin-top: 18px; }
.tc-btns .btn svg.i { width: 18px; height: 18px; }
.tc-danger { color: #F0838F; border-color: rgba(240,131,143,.45); }
.tc-danger.solid { background: #E0445C; border-color: #E0445C; color: #fff; }
.tc-keep { min-height: 44px; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 700; color: var(--soft); cursor: pointer; }
.tc-moving { display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 14px; padding: 12px 14px; border-radius: 14px; background: var(--sea-50); border: 1px solid var(--sea-100); font-size: 14px; line-height: 1.45; color: var(--soft); }
.tc-moving svg.i { width: 18px; height: 18px; color: var(--sea); flex: none; margin-top: 1px; }
.tc-moving b { color: var(--text); }

/* ---------------------------------------------------------------- Ask Brent (text / call / AI) */
/* Ask Brent sheet (11-04 layout): header card, then "Quick questions" (2-up tiles + Ask SRG), then "Talk to Brent"
   (Text + Call side by side). One rhythm: 8px gaps inside a group, 22px between groups, 14px radius on every tile. */
.ab-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; row-gap: 14px; padding: 6px 20px 18px; border-bottom: 1px solid var(--line); }
.ab-head img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--sea), 0 0 0 5px rgba(127,183,174,.18); }
.ab-head > div { min-width: 0; }
.ab-head b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.ab-head b .tag { font-style: normal; font-size: 10.5px; padding: 3px 8px; }
.ab-head span { display: block; margin-top: 3px; font-size: 13px; color: var(--soft); }
.ab-head .ab-fast { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: rgba(111,211,168,.08); color: var(--good); font-weight: 600; font-size: 12px; line-height: 1.35; text-wrap: balance; }
.ab-head .ab-fast i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px rgba(111,211,168,.18); flex: none; }
.ask .sheet-body { padding-top: 18px; }
.ab-ctx { display: flex; gap: 10px; align-items: center; padding: 11px 14px; border-radius: 14px; background: var(--field); font-size: 14px; color: var(--soft); }
.ab-ctx svg.i { color: var(--sea); flex: none; }
.ab-ctx span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-ctx b { color: var(--text); }
.ab-label { margin: 22px 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ab-ctx + .ab-label { margin-top: 20px; }
.ab-label:first-child { margin-top: 0; }
.ab-qs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-q { display: flex; align-items: center; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); font-family: inherit; font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; cursor: pointer; transition: transform var(--t-press) var(--spring), background var(--t-ui); }
.ab-q:active { transform: scale(.97); }
@media (hover: hover) { .ab-q:hover { background: var(--field); } }
.ab-qs .ab-q:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ab-ai { width: 100%; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 10px 14px; margin-top: 8px; border-radius: 14px; border: 1px solid var(--sea-100); background: var(--sea-50); color: var(--text); font-family: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.ab-ai > svg.i:first-child { color: var(--sea); fill: var(--sea); stroke: none; width: 20px; height: 20px; flex: none; }
.ab-ai span { flex: 1; color: var(--soft); line-height: 1.35; }
.ab-ai b { display: block; color: var(--text); font-size: 14px; }
.ab-talk { display: grid; grid-template-columns: 1.35fr 1fr; gap: 8px; }
.ab-big { min-height: 54px; font-size: 16px; border-radius: var(--r-pill); }
/* Text Brent's attention wiggle (idx.js askBrent): two short passes, a few degrees, settles flat */
@keyframes ab-nudge { 0%, 100% { transform: none; } 12% { transform: rotate(-3deg) scale(1.03); } 26% { transform: rotate(3deg) scale(1.03); } 40% { transform: rotate(-2deg) scale(1.02); } 54% { transform: rotate(2deg) scale(1.01); } 68% { transform: rotate(-1deg); } 82% { transform: rotate(.5deg); } }
.ab-big.nudge { animation: ab-nudge .8s ease-in-out both; }
@media (prefers-reduced-motion: reduce) { .ab-big.nudge { animation: none; } }
.ab-note { margin-top: 14px; text-align: center; font-size: 12px; text-wrap: balance; }
.ab-head b { white-space: nowrap; flex-wrap: wrap; row-gap: 2px; }
@media (max-width: 360px) {
  .ab-head { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; }
  .ab-head img { width: 44px; height: 44px; }
  .ab-head b { font-size: 17px; }
  .ab-head span { font-size: 12px; }
  .ab-q { font-size: 13.5px; padding: 9px 12px; }
}
/* Short screens (SE-size phones, a browser bar showing): tighter rhythm so Text and Call stay on screen */
@media (max-height: 700px) {
  .ab-head { padding-bottom: 12px; row-gap: 10px; }
  .ask .sheet-body { padding-top: 12px; }
  .ab-ctx { padding: 8px 12px; }
  .ab-label { margin: 14px 0 8px; }
  .ab-ctx + .ab-label { margin-top: 14px; }
  .ab-q, .ab-ai { min-height: 44px; padding-top: 7px; padding-bottom: 7px; }
  .ab-big { min-height: 48px; }
  .ab-note { margin-top: 10px; }
}
@media (max-height: 600px) { .ab-ctx { display: none; } .ab-ctx + .ab-label { margin-top: 0; } }
@media (min-width: 769px) { .sheet.ask { grid-template-columns: minmax(0, 420px); } }
.tabbar .tab-brent { width: 27px; height: 27px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 1.5px rgba(255,255,255,.5); }
.tabbar [aria-current="page"] .tab-brent { box-shadow: 0 0 0 2px var(--sea); }
/* Brent's face on Ask Brent buttons: a round avatar tucked into the pill's left edge, like a contact chip */
.ab-face { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; box-shadow: 0 0 0 1.5px var(--sea), 0 0 0 4px rgba(127,183,174,.18); }
.btn:has(> .ab-face) { padding-left: 9px; gap: 10px; }
.sv-act .btn-ask { flex: 0 0 auto; padding: 0 18px; }

/* ================================================================ Front page (/homes/ before a search), v3.2
   The dot-art coastline (SRG's own map graphic) behind a glass search, live market numbers, rails of real listings,
   town tiles with live counts, lifestyle shortcuts, Ask SRG, Brent and the free account. Same tokens as everything else. */
body.front-mode .s-bar, body.front-mode .understood, body.front-mode .f-row, body.front-mode .s-hero, body.front-mode .split,
body.front-mode .map-toggle { display: none !important; }
/* Bare /homes/ before the scripts run (build.py BOOT adds html.fr-boot): the front page paints right away instead of
   waiting for search.js; showFront() takes over and removes the class. */
/* !important: the global [hidden] rule above is !important too, and it won, so a slow phone painted an empty page with
   the footer at the top, then everything jumped down when search.js arrived (CLS 0.25 to 0.92, 10-30 pm) */
.fr-boot #front[hidden] { display: block !important; }
.fr-boot .s-bar, .fr-boot .understood, .fr-boot .f-row, .fr-boot .s-hero, .fr-boot .split, .fr-boot .map-toggle { display: none !important; }
.fr-boot .ai-orb.ai-fab { opacity: 0; pointer-events: none; }
.front { margin: 0 -20px; }
.fr-hero { position: relative; min-height: min(78svh, 700px); display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
/* The coastline sits 6% in and eases back to full frame as the hero scrolls away (search.js frontDrift sets the transform) */
.fr-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 22% 30%; z-index: -2; transform: scale(1.06); will-change: transform; animation: frFade 1.2s var(--ease) both; }
@keyframes frFade { from { opacity: 0; } }
.fr-hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(80% 50% at 30% 35%, rgba(127,183,174,.10), rgba(13,13,14,0) 70%), linear-gradient(180deg, rgba(13,13,14,.05) 0%, rgba(13,13,14,.25) 38%, rgba(13,13,14,.88) 70%, var(--bg) 100%); }
.fr-copy { width: 100%; max-width: 820px; padding: 0 20px 26px; animation: rise .8s var(--spring-soft) both; }
.fr-copy .kick, .fr-brent .kick { font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--sea); }
.fr-copy h1, .fr-copy .fr-h1 { font-size: clamp(36px, 10vw, 66px); line-height: 1.02; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.fr-copy h1 span, .fr-copy .fr-h1 span { display: block; color: var(--sea); }
.fr-copy p { font-size: 16px; line-height: 1.55; color: var(--soft); margin-top: 12px; max-width: 46ch; }
.fr-search { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 20px; min-height: 62px; padding: 6px 6px 6px 18px; border-radius: var(--r-pill); --lg-tint: rgba(29,30,32,.62); }
.fr-search > svg.i { color: var(--soft); }
.fr-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 17px; color: var(--text); padding: 12px 0; }
.fr-search input::placeholder { color: #8E9196; }
.fr-go { flex: none; height: 50px; padding: 0 22px; border: 0; border-radius: var(--r-pill); background: var(--paper); color: var(--on-paper); font-family: inherit; font-size: 16px; font-weight: 800; cursor: pointer; transition: transform .35s var(--spring); }
.fr-go:active { transform: scale(.96); }
.fr-search:focus-within { box-shadow: inset 0 1px .5px rgba(255,255,255,.4), 0 0 0 4px rgba(127,183,174,.25), 0 10px 30px rgba(0,0,0,.45); }
.fr-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 14px -20px 0; padding: 2px 20px 4px; }
.fr-chips::-webkit-scrollbar { display: none; }
.fr-chips button { position: relative; flex: none; height: 42px; padding: 0 16px; border-radius: var(--r-pill); color: var(--text); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; --lg-tint: rgba(29,30,32,.5); transition: transform .45s var(--spring); }
.fr-chips button:active { transform: scale(1.06); }
.fr-stats { display: flex; gap: 22px; margin-top: 18px; }
.fr-stats:empty { visibility: hidden; min-height: 50px; }   /* holds the row's height until /api/idx/front answers, so nothing below it jumps */
.fr-stats div { display: flex; flex-direction: column; }
.fr-stats b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.fr-stats span { font-size: 12.5px; color: var(--soft); }
.fr-sec { padding: 26px 20px 4px; }
.fr-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.fr-h h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.fr-h p { font-size: 14px; color: var(--soft); margin-top: 2px; }
.fr-h a { flex: none; color: var(--sea); font-weight: 700; font-size: 15px; text-decoration: none; }
.fr-sec .sim { margin: 0 -20px; padding: 4px 20px 12px; }
.fr-sec .sim .hcard { flex: 0 0 min(290px, 78vw); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.fr-sec .sim .hc-media { border-radius: 0; }
.fr-sec .sim .hc-body { padding: 10px 14px 12px; }
.fr-towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fr-town { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 132px; padding: 14px; border-radius: var(--r-card); overflow: hidden; text-decoration: none; color: var(--text); isolation: isolate; border: 1px solid var(--line);
  background: radial-gradient(rgba(127,183,174,.35) 1px, transparent 1.4px) 0 0 / 11px 11px, radial-gradient(120% 90% at 100% 0%, #1E3A35 0%, #161718 70%);
  transition: transform .45s var(--spring), border-color .2s; animation: rise .6s var(--spring-soft) both; animation-delay: calc(var(--i, 0) * 45ms); }
.fr-town.img > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.fr-town.img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9,10,11,.22) 0%, rgba(9,10,11,0) 24%, rgba(9,10,11,.3) 44%, rgba(9,10,11,.8) 70%, rgba(9,10,11,.94) 100%); }
.fr-town:not(.img)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(22,23,24,0) 30%, rgba(22,23,24,.85) 100%); }
.fr-town b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; padding-right: 22px; }
.fr-town:active { transform: scale(.97); }
.fr-life { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fr-life a { display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; align-content: center; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); text-decoration: none; color: var(--text); transition: transform .45s var(--spring), border-color .2s; }
.fr-life a:active { transform: scale(.97); }
.fr-life svg.i { grid-row: 1 / 3; width: 26px; height: 26px; color: var(--sea); stroke-width: 1.7; }
.fr-life b { font-size: 14.5px; font-weight: 800; }
.fr-life span { font-size: 12px; color: var(--muted); }
.fr-ai { display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: center; padding: 18px; border-radius: 22px; background: linear-gradient(135deg, #17302C 0%, #161718 100%); border: 1px solid var(--sea-100); }
.fr-ai b { display: block; font-size: 18px; font-weight: 800; }
.fr-ai p { font-size: 14px; color: var(--soft); margin-top: 2px; line-height: 1.45; }
.fr-ai-in { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; min-height: 54px; padding: 5px 5px 5px 16px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line2); }
.fr-ai-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.fr-ai-in button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--on-paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.fr-brent { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--line); }
.fr-brent > img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; box-shadow: 0 0 0 2px var(--sea), 0 0 0 6px rgba(127,183,174,.15); }
.fr-brent h2 { font-size: 22px; font-weight: 800; margin-top: 2px; }
.fr-brent p { font-size: 14px; color: var(--soft); line-height: 1.5; margin-top: 4px; }
.fr-brent-btns { grid-column: 1 / -1; display: grid; gap: 10px; }
.fr-brent-btns .btn { border-radius: var(--r-pill); min-height: 52px; white-space: normal; text-align: center; }
@media (max-width: 480px) { .fr-brent { grid-template-columns: 76px 1fr; align-items: start; } .fr-brent > img { width: 76px; height: 76px; margin-top: 6px; } }
.fr-join { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--paper); color: var(--on-paper); }
.fr-join h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.fr-join p { font-size: 14px; color: #3D3F43; margin-top: 4px; line-height: 1.5; }
.fr-join .btn-ink { background: var(--on-paper); color: var(--paper); border-color: var(--on-paper); border-radius: var(--r-pill); min-height: 52px; }
#fr-attr { padding-bottom: 10px; }
@media (max-width: 900px) { .front { margin: 0 -16px; } .fr-copy, .fr-sec { padding-left: 16px; padding-right: 16px; } .fr-chips, .fr-sec .sim { margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } }
@media (min-width: 901px) {
  .fr-hero { min-height: 640px; }
  .fr-bg { object-position: 85% 40%; }
  .fr-hero::after { background: linear-gradient(90deg, rgba(13,13,14,.92) 0%, rgba(13,13,14,.65) 45%, rgba(13,13,14,.05) 75%), linear-gradient(180deg, rgba(13,13,14,0) 60%, var(--bg) 100%); }
  .fr-copy { padding: 0 40px 56px; }
  .fr-sec { padding: 34px 40px 4px; max-width: 1400px; margin: 0 auto; }
  .fr-towns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fr-town { min-height: 170px; }
  .fr-life { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fr-ai { grid-template-columns: 52px 1fr minmax(320px, 1.2fr); }
  .fr-ai-in { grid-column: auto; }
  .fr-brent { grid-template-columns: 110px 1fr auto; }
  .fr-brent-btns { grid-column: auto; }
  .fr-join { grid-template-columns: 1fr auto; align-items: center; }
}
body.signed-in #fr-join { display: none; }
@media (max-width: 900px) {
  /* Phones: the coastline gets its own band above the headline (its town labels never sit behind the words) */
  .fr-hero { display: block; min-height: 0; }
  .fr-hero::after { display: none; }
  .fr-hero picture { display: block; position: relative; height: 37svh; min-height: 260px; max-height: 350px; overflow: hidden; }
  .fr-hero picture::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 45% 45%, rgba(127,183,174,.12), rgba(13,13,14,0) 70%), linear-gradient(180deg, rgba(13,13,14,.35) 0%, rgba(13,13,14,0) 25%, rgba(13,13,14,0) 60%, var(--bg) 100%); }
  .fr-bg { z-index: 0; object-position: 38% 52%; }
  .fr-copy { position: relative; margin-top: -18px; padding-bottom: 22px; }
}
@media (prefers-reduced-motion: reduce) { .fr-bg { transform: none !important; } }
/* Ask SRG: the floating AI orb on every home-search page (above the tab bar or the listing action bar on phones) */
.ai-orb.ai-fab { position: fixed; right: 22px; bottom: 24px; z-index: 85; width: 58px; height: 58px; transition: translate .45s var(--ease), scale .35s var(--spring); }
.ai-orb.ai-fab svg.i { width: 26px; height: 26px; }
.ai-orb.ai-fab:active { transform: none; scale: 1.08; }
@media (max-width: 900px) {
  .ai-orb.ai-fab { right: 14px; bottom: calc(88px + var(--safe-b)); width: 54px; height: 54px; }
  body.tabs-away .ai-orb.ai-fab { translate: 0 70px; }
}
/* Long placeholders and queries fade out instead of being cut off at the edge (not while typing: the caret lives there) */
.fr-search input:not(:focus), .s-field input:not(:focus), .fr-ai-in input:not(:focus) {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 46px), transparent); }

/* Front page credit line for the town photos */
.fr-credit { margin: 26px 20px 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.lp-ai { width: 52px; height: 52px; }
.lp-ai svg.i { width: 24px; height: 24px; }
body.front-mode.fr-top .ai-orb.ai-fab { opacity: 0; scale: .7; pointer-events: none; }
.ai-orb.ai-fab { transition: translate .45s var(--ease), scale .35s var(--spring), opacity .25s; }

/* Listing v3.3: compared to your recently viewed homes, flood risk, travel times (Zillow's sections in SRG's look) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.rv-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.fz { display: flex; flex-direction: column; gap: 3px; margin-top: 12px; padding: 14px 16px; border-radius: 16px; background: rgba(127,183,174,.08); border: 1px solid rgba(127,183,174,.28); }
.fz.high { background: rgba(226,168,107,.09); border-color: rgba(226,168,107,.4); }
.fz-zone { font-size: 17px; font-weight: 800; }
.fz span { font-size: 14px; color: var(--soft); line-height: 1.45; }
.fz-wait { animation: pulseTxt 1.4s ease-in-out infinite; }
@keyframes pulseTxt { 50% { opacity: .5; } }
.fz-links { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 12px; }
.fz-links a, .fz-links .link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--sea); text-decoration: none; }
.fz-links svg.i { width: 16px; height: 16px; }
.tt-add { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 54px; padding: 5px 5px 5px 16px; border-radius: var(--r-pill); background: var(--bg); border: 1px solid var(--line2); }
.tt-add > svg.i { color: var(--soft); flex: none; }
.tt-add input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; color: var(--text); }
.tt-add input:not(:focus) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
.tt-add button { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--on-paper); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tt-add:focus-within { border-color: rgba(127,183,174,.6); }
.tt-list:empty { display: none; }
.tt-list { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.tt-row { display: flex; align-items: center; gap: 10px; padding: 10px 6px 10px 14px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.tt-row > svg.i { color: var(--sea); flex: none; width: 18px; height: 18px; }
.tt-row span { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tt-row a { display: inline-flex; align-items: center; gap: 4px; font-size: 13.5px; font-weight: 800; color: var(--sea); text-decoration: none; white-space: nowrap; }
.tt-row a svg.i { width: 15px; height: 15px; }
.tt-row button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }

/* Listing on phones, where the browser can tie an animation to scroll position (Safari 26+, Chrome): the photo holds still
   while the sheet comes up over it, then the strip shows the top of the photo, like Zillow. Runs on the compositor, no JS;
   older browsers just let the photo scroll up with the page.
   Touch screens only (hover: none, 2026-11-05): Clarity's session player replays a phone visit on a desktop browser and
   gets this scroll-linked hold wrong, so recordings showed the photo pushed down with black above it (Grayson: "it
   confuses me ... thinking the websites glitching"). Phones and tablets keep it; the player and narrow desktop windows get
   the plain scroll, which replays correctly. listing.js mirrors the same test. */
@supports (animation-timeline: scroll()) {
  @media (max-width: 900px) and (prefers-reduced-motion: no-preference) and (hover: none) {
    .lp-photos { animation-name: lpHold; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root); animation-range: 0 var(--hero-run); will-change: transform; }
  }
}
@keyframes lpHold { to { transform: translate3d(0, var(--hero-run), 0); } }
.chat-when { display: inline-block; margin-top: 4px; padding: 2px 9px; border-radius: var(--r-pill); background: rgba(127,183,174,.16); color: var(--sea); font-weight: 700; }

/* More neighborhood facts (listing.js nbOpen): its own scrolling page that slides in over the listing like an iOS push.
   The tour / Ask Brent bar stays on top of it (like Zillow's), and the listing underneath doesn't scroll. */
.nb { position: fixed; inset: 0; z-index: 75; background: var(--bg); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform .45s var(--ease), visibility 0s linear .45s; }
.nb.open { transform: none; visibility: visible; transition: transform .45s var(--ease); }
html.nb-lock, html.nb-lock body { overflow: hidden; }
body.nb-open .actbar { z-index: 80; }
.nb-top { position: sticky; top: 0; z-index: 5; padding: calc(12px + var(--safe-t)) 12px 14px; background: linear-gradient(180deg, var(--bg) 62%, rgba(13,13,14,0)); }
.nb-back { color: var(--text); cursor: pointer; padding: 0 18px 0 12px; }
.nb-back svg.i { width: 20px; height: 20px; }
.nb-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 760px; margin: 0 auto; padding: 0 16px calc(120px + var(--safe-b)); }
.nb-body h1 { font-size: clamp(26px, 7vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.nb-body h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.nb-map { position: relative; z-index: 0; isolation: isolate; height: 300px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); background: #101112; }   /* keeps Leaflet's layers under the sticky Summary bar */
.nb:focus { outline: none; }
.nb-body > .rv-note { margin-top: -8px; }
.nb-load { color: var(--muted); }
.nb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 14px; }
.nb-stats div { display: flex; flex-direction: column; gap: 2px; }
.nb-stats b { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.nb-stats span { font-size: 13px; color: var(--soft); line-height: 1.35; }
.nb-cmp { margin-top: 16px; font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.nb-cmp b { color: var(--text); }
#nb-homes .fr-h { margin-bottom: 12px; }
#nb-homes .sim { margin: 0 -16px; padding: 4px 16px 12px; }
#nb-homes .sim .hcard { flex: 0 0 min(280px, 76vw); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
#nb-homes .sim .hc-media { border-radius: 0; }
#nb-homes .sim .hc-body { padding: 10px 14px 12px; }
.nb-pro { display: flex; align-items: center; gap: 14px; }
.nb-pro img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; flex: none; box-shadow: 0 0 0 2px var(--sea), 0 0 0 6px rgba(127,183,174,.15); }
.nb-pro b { display: block; font-size: 18px; font-weight: 800; }
.nb-pro span { font-size: 13.5px; color: var(--soft); }
.nb-expert > p { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--soft); }
.nb-pro-btns { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; margin-top: 16px; }
.nb-pro-btns .btn { border-radius: var(--r-pill); min-height: 50px; }
.nb-tip { display: flex; gap: 12px; align-items: flex-start; margin: -2px 0 16px; padding: 14px 16px; border-radius: 16px; background: rgba(127,183,174,.1); border: 1px solid rgba(127,183,174,.25); font-size: 14.5px; line-height: 1.5; color: var(--soft); }
.nb-tip svg.i { flex: none; width: 20px; height: 20px; fill: var(--sea); stroke: none; margin-top: 1px; }
@media (min-width: 901px) {
  .nb { left: auto; width: min(680px, 100vw); box-shadow: -24px 0 60px rgba(0,0,0,.55); border-left: 1px solid var(--line); }
  .nb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .nb, .nb.open { transition: none; } }

/* Ask SRG entry points show only while the chat is on (chat.js adds html.chat-on from /api/idx/status) */
html:not(.chat-on) [data-open-chat], html:not(.chat-on) .ab-ai, html:not(.chat-on) .fr-sec:has(#fr-ai) { display: none !important; }
@media (max-width: 360px) { .brand img.brand-lockup { height: 29px; } }

/* Google Maps (X.makeMap in idx.js): our own HTML price pills and home dot as map overlays, the popup in the card look */
.gpin { position: absolute; cursor: pointer; z-index: 1; }
.gpin:hover { z-index: 3; }
.gdot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--sea); border: 3px solid #0D0D0E; box-shadow: 0 1px 6px rgba(0,0,0,.45); box-sizing: border-box; }
.gm-style .gm-style-iw-c { padding: 0 !important; border-radius: 16px; background: var(--card); box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.gm-style .gm-style-iw-d { overflow: hidden !important; padding: 0 !important; max-height: none !important; }
.gm-style .gm-style-iw-tc::after { background: var(--card); }
.gm-style .gm-style-iw-c .pop { width: 250px; }
body.lp-gone .actbar { display: none; }
/* Zoomed out (X.makeMap adds .zoom-far below zoom 13): pills become dots like Zillow's, the price shows on hover/zoom */
.zoom-far .price-pin .pp { font-size: 0; padding: 0; width: 13px; height: 13px; border-radius: 50%; background: var(--sea); border: 2px solid #0D0D0E; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.zoom-far .price-pin .pp::after { display: none; }
.zoom-far .price-pin.ours .pp { background: #fff; }
@media (hover: hover) { .zoom-far .price-pin:hover .pp { font-size: 12px; padding: 5px 9px; width: auto; height: auto; border-radius: 8px; background: var(--sea); color: #0D0D0E; } }

/* Homes near me (2026-10-29): the locate button sits top right of the map like Apple Maps, lit seafoam while it follows
   the visitor; their position is the iOS-style pulsing blue dot (Leaflet .me-pin, Google .gme) */
.loc-btn { position: absolute; z-index: 600; top: 14px; right: 14px; width: 48px; height: 48px; transition: transform .45s var(--spring), color .2s; }
.loc-btn svg.i { width: 22px; height: 22px; }
.loc-btn.on { color: var(--sea); }
.loc-btn.on svg.i { fill: currentColor; }
.loc-btn.busy svg.i { animation: loc-busy 1s ease-in-out infinite; }
@keyframes loc-busy { 50% { opacity: .35; } }
@media (max-width: 900px) { body.show-map .loc-btn { top: calc(14px + var(--safe-t)); right: 14px; } }
.me-pin { background: none; border: 0; }
.gme { position: absolute; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; }
.me-dot { display: block; width: 18px; height: 18px; border-radius: 50%; background: #2F80FF; border: 3px solid #fff; box-sizing: border-box;
  box-shadow: 0 1px 6px rgba(0,0,0,.4); animation: me-pulse 2s ease-out infinite; }
.me-pin .me-dot { margin: 3px; }
@keyframes me-pulse { 0% { box-shadow: 0 1px 6px rgba(0,0,0,.4), 0 0 0 0 rgba(47,128,255,.5); } 100% { box-shadow: 0 1px 6px rgba(0,0,0,.4), 0 0 0 18px rgba(47,128,255,0); } }
@media (prefers-reduced-motion: reduce) { .me-dot, .loc-btn.busy svg.i { animation: none; } }
.fr-chips button[data-near] { display: inline-flex; align-items: center; gap: 7px; }
.fr-chips button[data-near] svg.i, .pill[data-near] svg.i { width: 17px; height: 17px; stroke-width: 2; }

/* SRG Homes on the Home Screen (idx.js addApp): the "Add" card shows on phones that can install it, never inside the
   installed app or after "Not now"; the sheet walks iPhone Safari through the taps */
.app-card { display: none; }
@media (max-width: 900px) {
  html.can-add-app:not(.is-app):not(.app-card-off) .app-card { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 28px; align-items: center; gap: 12px; padding: 12px 10px 12px 12px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); margin-bottom: 16px; }
}
.fr-app { padding-top: 20px; }
@media (min-width: 901px) { .fr-app { display: none; } }
html:not(.can-add-app) .fr-app, html.is-app .fr-app, html.app-card-off .fr-app { display: none; }
.app-card img { width: 52px; height: 52px; border-radius: 12px; }
.app-card b { display: block; font-size: 15px; font-weight: 800; }
.app-card span { display: block; font-size: 12.5px; color: var(--soft); line-height: 1.4; margin-top: 2px; }
.app-card .btn { min-height: 38px; padding: 0 16px; }
.app-x { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
/* The one ask on a listing page (listing.js ASK): a small card above the tab bar after 20 seconds, never on landing */
.ask-card { position: fixed; left: 12px; right: 12px; bottom: calc(92px + var(--safe-b)); z-index: 900; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 10px; padding: 12px 8px 12px 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 14px 36px rgba(0,0,0,.5); opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .35s, transform .35s; }
.ask-card.on { opacity: 1; transform: none; }
.ask-card b { display: block; font-size: 15px; font-weight: 800; }
.ask-card span { display: block; font-size: 12.5px; color: var(--soft); line-height: 1.4; margin-top: 2px; }
.ask-card .btn { min-height: 38px; padding: 0 16px; }
@media (min-width: 769px) { .ask-card { left: auto; right: 24px; bottom: 24px; width: 400px; } }
/* the 6-photo ask opens the account sheet over the photo viewer, which stays open underneath */
html.lbx-on .sheet.open { z-index: 1150; }
.app-sheet .sheet-head img.app-ico { width: 56px; height: 56px; border-radius: 13px; }
.app-sheet .sheet-head div { flex: 1; min-width: 0; }
.app-sheet .sheet-head b { display: block; font-size: 17px; }
.app-sheet .sheet-head span { font-size: 13px; color: var(--soft); }
.app-h { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.app-p { font-size: 14px; color: var(--soft); line-height: 1.5; margin-top: 6px; }
.app-steps { list-style: none; margin: 16px 0 18px; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.app-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--field); font-size: 14.5px; line-height: 1.4; }
.app-steps i { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--card); color: var(--sea); }
.app-steps em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* Server-rendered SEO blocks (netlify/edge-functions/homes-seo.js, idx/seo/render.mjs). .ssr-only is the crawler and
   no-JavaScript copy (hidden by the boot script for everyone else); .seo-about is "the numbers" under town, preset and
   front pages: answer first, a short FAQ and related searches, visible to all */
.ssr { padding: 18px 0 30px; max-width: 760px; line-height: 1.6; }
.ssr h1 { font-size: 26px; font-weight: 800; line-height: 1.2; margin-top: 10px; }
.ssr h2 { font-size: 18px; font-weight: 800; margin-top: 24px; }
.ssr h3 { font-size: 14px; font-weight: 700; margin-top: 14px; color: var(--soft); }
.ssr p, .ssr dd { color: var(--soft); }
.ssr img { width: 100%; height: auto; border-radius: 14px; margin-top: 14px; }
.ssr dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 18px; margin-top: 8px; font-size: 14px; }
.ssr dt { font-weight: 600; }
.ssr a, .ssr-list a { color: var(--sea); }
.ssr-crumbs { font-size: 13px; color: var(--muted); }
.ssr-price b { font-size: 22px; color: var(--text); }
.ssr-disc { font-size: 12px; color: var(--muted); margin-top: 18px; }
/* A listing draws in the browser: until it does, its box holds a screen so the footer never shows up top and then jumps
   away (Lighthouse CLS 0.16, 10-30 pm). A drawn listing is always taller than this. */
html.js #listing { min-height: 100vh; }
.ssr-list { display: grid; gap: 10px; padding-left: 20px; font-size: 14px; color: var(--soft); }
.ssr-list small { display: block; color: var(--muted); }
.seo-about { margin: 56px 0 28px; padding-top: 30px; border-top: 1px solid var(--line); }
.seo-about h2 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.seo-answer { margin-top: 10px; max-width: 72ch; font-size: 16px; line-height: 1.65; color: var(--soft); }
.seo-answer b { color: var(--text); }
.seo-towns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.seo-towns a { display: block; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s; }
.seo-towns a:hover { border-color: var(--sea); }
.seo-towns b { display: block; font-size: 15px; }
.seo-towns span { display: block; margin-top: 2px; font-size: 12.5px; color: var(--soft); }
.seo-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; margin-top: 24px; max-width: 1100px; }
.seo-faq h3 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.seo-faq p { margin-top: 5px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.seo-links { margin-top: 28px; }
.seo-links h3 { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-500); }
.seo-links p { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.seo-links a { padding: 8px 13px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--text); text-decoration: none; transition: border-color .2s; }
.seo-links a:hover { border-color: var(--sea); }
@media (max-width: 900px) { .seo-faq { grid-template-columns: minmax(0, 1fr); } .seo-towns { grid-template-columns: repeat(2, minmax(0, 1fr)); } .seo-about { margin-top: 40px; } }

/* ==== 10-30 BROWSE (search page, cards, rails, map, town tiles) ==== */
/* Rails: snap points line up with the rail's own padding. Without scroll-padding the first card's snap point sat 16px
   past the start, so the first touch yanked the rail 16px and every card after landed flush on the screen edge (the
   "glitchy on certain spots" hitch). Photos inside a card page on their own (overscroll contain on .hc-track); the
   card's text area moves the rail. */
.sim { scroll-padding-inline: 2px; overscroll-behavior-x: contain; }
.fr-sec .sim { --card-w: min(290px, 78vw); scroll-padding-inline: 20px; }
.fr-sec .sim .hcard, .fr-sec .sim .skel { flex: 0 0 var(--card-w); }
.recs .sim, #nb-homes .sim { scroll-padding-inline: 16px; }
.chat-homes .sim { scroll-padding-inline: 18px; }
.fr-sec .sim .skel { scroll-snap-align: start; min-height: calc(var(--card-w) * .656 + 128px); }
.rail-wrap { position: relative; }
/* Back to the first card (idx.js railBack): liquid glass at the rail's left edge, centered on the photos */
.rail-back { position: absolute; z-index: 4; left: -4px; top: calc(4px + var(--rb-y, 96px) - 21px); width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer; opacity: 0; transform: translate3d(-8px, 0, 0) scale(.8); pointer-events: none; visibility: hidden;
  transition: opacity .22s, transform .5s var(--spring), visibility 0s linear .5s; }   /* hidden = no live blur over a moving rail */
.rail-back.on { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity .22s, transform .5s var(--spring); }
.rail-back.on:active { transform: scale(1.08); }
.rail-back svg.i { width: 20px; height: 20px; stroke-width: 2.3; }
.fr-sec .rail-wrap { --rb-y: calc(min(290px, 78vw) * .328); }
@media (max-width: 900px) {
  .fr-sec .sim { scroll-padding-inline: 16px; }
  .fr-sec .rail-wrap { --rb-y: calc(min(290px, 78vw) * .375); }
  .fr-sec .sim .skel { min-height: calc(var(--card-w) * .75 + 128px); }
  .fr-sec .sim .skel i:first-child { aspect-ratio: 4 / 3; }
}

/* Search box: a back chevron to the front page while results show (search.js goFront) */
.s-home { display: none; }
body:not(.front-mode) .s-home { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 40px; margin-left: -10px; border: 0; border-radius: 50%; background: transparent; color: var(--text); cursor: pointer; transition: background .2s; }
body:not(.front-mode) .s-home + svg.i { display: none; }
.s-field .s-home svg.i { width: 22px; height: 22px; stroke-width: 2.2; color: var(--text); }
.s-home:active { background: var(--field); }

/* Map pins (X.makeMap pricePin handles): selected = paper and bigger, with its photo; featured = a photo above the
   price when zoomed in; viewed on this device = paler; hot = the card the mouse rests on (desktop) */
.pp-ph { display: none; }
.price-pin.has-ph .pp-ph { display: block; position: relative; width: 66px; height: 46px; margin-bottom: -7px; border-radius: 10px; overflow: hidden; background: #1B1C1E; border: 2px solid #0D0D0E; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.pp-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
#map:not(.zoom-near) .price-pin.has-ph:not(.sel) .pp-ph, .zoom-far .price-pin .pp-ph { display: none; }
.price-pin.has-ph .pp { z-index: 1; }
.price-pin.sel .pin-in { transform: translateX(-50%) scale(1.16); }
.price-pin.sel .pp { background: var(--paper); color: var(--on-paper); border-color: var(--paper); box-shadow: 0 6px 18px rgba(0,0,0,.55); }
.price-pin.sel .pp::after { border-top-color: var(--paper); }
.price-pin.sel .pp-ph { border-color: var(--paper); }
.price-pin.feat:not(.sel) .pp-ph { border-color: rgba(127,183,174,.85); }
.price-pin.seen:not(.sel):not(.hot) .pp { background: #393B3F; color: #C3C5C9; border-color: rgba(255,255,255,.08); }
.price-pin.seen:not(.sel):not(.hot) .pp::after { border-top-color: #393B3F; }
.price-pin.hot .pin-in { transform: translateX(-50%) scale(1.1); }
.price-pin.hot:not(.sel) .pp { background: var(--sea); color: #0D0D0E; }
.price-pin.hot:not(.sel) .pp::after { border-top-color: var(--sea); }
.price-pin:focus-visible { outline: none; }
.price-pin:focus-visible .pp { outline: 2px solid var(--sea); outline-offset: 2px; }
.zoom-far .price-pin:not(.sel) .pin-in { bottom: -6.5px; }   /* zoomed out the dot sits on the home */
.zoom-far .price-pin .pp::before { content: ""; position: absolute; inset: -13px; border-radius: 50%; }   /* a 39px finger target around the 13px dot */
.zoom-far .price-pin.sel .pp { font-size: 12px; padding: 5px 9px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--paper); background: var(--paper); color: var(--on-paper); }
.zoom-far .price-pin.sel .pp::after { display: block; }
.zoom-far .price-pin.seen:not(.sel) .pp { background: #6B6E73; }

/* The map's card slider (phones). Solid cards, so map labels and pins never show through the text (the 10-29 bug);
   centered with the neighbors peeking, one home per swipe, sitting above the Map/List pill, the AI orb and the tab bar. */
.md-rail { position: relative; display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none;
  overscroll-behavior: contain; padding: 4px 22px 10px; scroll-padding-inline: 22px; touch-action: pan-x; }
.md-rail::-webkit-scrollbar { display: none; }
.map-dock .hcard { flex: 0 0 100%; display: block; scroll-snap-align: center; scroll-snap-stop: always; background: var(--card); border: 1px solid var(--line2); border-radius: 20px; overflow: hidden;
  box-shadow: 0 14px 36px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35); }
.map-dock .hc-media { aspect-ratio: auto; height: clamp(136px, 19svh, 172px); border-radius: 0; }
.map-dock .hc-tags .tag + .tag { display: none; }
.map-dock .hc-body { padding: 10px 14px 12px; }
.map-dock .hc-price { font-size: 21px; }
.map-dock .hc-more { top: 4px; right: 4px; }
@media (min-width: 901px) { .md-rail .hcard { flex-basis: min(100%, 380px); } }

/* Town tiles (10-30, "a little hard to read"): the aerial stays, the words get a deep scrim under them, the live numbers
   sit in solid chips (a tint, not a live blur: eight blurs would repaint on every scroll frame), the arrow in its own chip */
.fr-town { min-height: 144px; padding: 12px; }
.fr-town b { color: #fff; font-size: 17px; line-height: 1.18; padding-right: 0; text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 16px rgba(0,0,0,.45); }
.ft-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; min-height: 22px; }
.ft-meta i { font-style: normal; font-size: 12.5px; font-weight: 700; line-height: 1; color: #fff; padding: 5px 9px; border-radius: var(--r-pill); white-space: nowrap;
  background: rgba(14,15,17,.74); box-shadow: inset 0 .5px 0 rgba(255,255,255,.3), inset 0 0 0 .5px rgba(255,255,255,.14), 0 1px 6px rgba(0,0,0,.25); }
.ft-meta i + i { color: #DDEFEB; }
.ft-meta i.wait { width: 70px; height: 22.5px; padding: 0; background: linear-gradient(90deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.17) 50%, rgba(255,255,255,.07) 100%) 0 0 / 200% 100%; animation: shimmer 1.3s ease-in-out infinite; }
.ft-meta i.wait.w2 { width: 96px; }
.ft-go { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(14,15,17,.6); box-shadow: inset 0 .5px 0 rgba(255,255,255,.3), inset 0 0 0 .5px rgba(255,255,255,.14); }
.ft-go svg.i { width: 16px; height: 16px; stroke-width: 2.3; }
/* "See all" was a 23px-tall target: the same look with a 45px finger area */
.fr-h a { padding: 11px 0 11px 14px; margin: -11px 0 -11px -14px; }
.fr-search .s-mic { width: 42px; height: 42px; }
@media (min-width: 901px) { .fr-town { min-height: 176px; padding: 14px; } .fr-town b { font-size: 19px; } }
@media (prefers-reduced-motion: reduce) { .rail-back, .pin-in, .ds-strip, .ds-strip i, .hc-dots .ds, .hc-dots::before { transition: none; } }
/* ==== end 10-30 BROWSE ==== */

/* ==== 10-30 LISTING + COMPARE (listing page, recently viewed, compare homes, Saved/Updates/Tours) ==== */
/* The sheet's grab handle on phones (listing.js wireGrab): a real button over the sticky photo's bottom strip, 42px tall
   so a thumb finds it. touch-action none: the drag is ours, the page and the photo track never see it. */
.lp-grab { display: none; }
@media (max-width: 900px) {
  .lp-grab { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 42px; z-index: 7; border: 0; padding: 0; margin: 0;
    background: transparent; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .lp-grab i { position: absolute; left: 50%; bottom: 14px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: rgba(255,255,255,.26);
    transition: transform .3s var(--spring), background-color .2s; }
  .lp-grab.on i { background: rgba(255,255,255,.55); transform: scaleX(1.35); transition-duration: .18s; }
  .lp-grab:focus-visible { outline: none; }
  .lp-grab:focus-visible i { box-shadow: 0 0 0 3px var(--sea); }
  /* Deep in the details the handle slides the page itself down (listing.js wireGrab). The page and footer keep a layer of
     their own the whole time, so the browser never has to build one mid-gesture (that froze the simulator ~125 ms).
     Nothing fixed lives inside them on phones (the photo bar is lifted to <body>, listing.js pinBar). */
  body.pg-listing .hs-wrap, body.pg-listing .foot { will-change: transform; }
}

/* Listing photo dots (phones): centered between the For sale and 1 / 21 badges, above the sheet's edge */
.lp-photos .hc-dots { display: none; }
@media (max-width: 900px) {
  .lp-photos .hc-dots { display: block; bottom: 37px; z-index: 8; transition: opacity .2s; }
  body.lp-stuck .lp-photos .hc-dots { opacity: 0; pointer-events: none; }
}

/* Beds, baths and sq ft on one line on a 375-390px phone (the sq ft used to drop to its own line) */
@media (max-width: 900px) {
  .lp-specs { gap: 6px 15px; font-size: 16px; }
  .lp-specs span { gap: 6px; }
  .lp-specs svg.i { width: 20px; height: 20px; }
}

/* Tours / Updates rows without a photo: the SRG mark in the empty tile (it was a blank dark square) */
.tour-item .ph, .up-row .ph { display: flex; align-items: center; justify-content: center; flex: none; }
.tour-item .ph img, .up-row .ph img { width: 34px; height: auto; object-fit: contain; opacity: .45; background: none; border-radius: 0; }

/* Listing action bar: the tour button can shrink, so "as early as tomorrow..." never pushes it past the screen edge
   (it ran 22px off a 390px iPhone) */
.actbar .btn { min-width: 0; }
.actbar .btn .two { min-width: 0; max-width: 100%; }
.actbar .btn .two small { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 4px 12px; }
.sim-h h2 { font-size: 22px; font-weight: 800; }
.sim-h .link svg.i { width: 18px; height: 18px; }

/* Compared to your recently viewed homes (listing.js rvTable, v2 10-30 pm): one row per home that fits the card, so
   nothing slides sideways or gets cut in half. Photo | street + town | price + difference to this home, then beds,
   baths, sqft and $/sqft in fixed slots that line up row to row. */
.rv { --rv-pad: 20px; }
.rv-box { margin: 4px calc(-1 * var(--rv-pad)) 0; }
.rv-t { list-style: none; }
.rv-t > li + li { border-top: 1px solid var(--line); }
.rv-r { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "ph nm pr" "ph sp sp"; column-gap: 12px; align-items: start;
  padding: 13px var(--rv-pad); color: var(--text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.rv-ph { grid-area: ph; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; background: #1F2023; display: flex; align-items: center; justify-content: center; color: var(--muted); }
.rv-nm { grid-area: nm; display: flex; flex-direction: column; min-width: 0; }
.rv-nm b { font-size: 14.5px; font-weight: 800; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.rv-nm small { font-size: 13px; color: var(--soft); font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rv-nm em { align-self: flex-start; font-style: normal; font-size: 11.5px; font-weight: 800; color: #0D0D0E; background: var(--sea); padding: 1px 8px; border-radius: var(--r-pill); margin-bottom: 3px; }
.rv-pr { grid-area: pr; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rv-pr b { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.rv-pr small { display: block; }
.rv-sp { grid-area: sp; display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 13px; line-height: 1.35; color: var(--soft); font-variant-numeric: tabular-nums; }
.rv-sp > span { white-space: nowrap; }
.rv-sp > span:nth-child(1) { min-width: 3.3em; } .rv-sp > span:nth-child(2) { min-width: 3.9em; } .rv-sp > span:nth-child(3) { min-width: 6.4em; }
.rv-sp b { color: var(--text); font-weight: 700; }
.rv-sp .na, .cx-c .na { font-style: normal; color: var(--muted); font-weight: 600; }
.rv-r.cur { background: #1A2120; }
.rv-d { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.rv-d.dn { color: var(--sea); } .rv-d.up { color: #E2A86B; }
a.rv-r { transition: opacity .2s var(--ease); }
a.rv-r:active { opacity: .6; }
@media (hover: hover) { a.rv-r:hover .rv-nm b { color: var(--sea); } }
.rv-go { margin-top: 14px; gap: 10px; }
.rv-go svg.i { width: 19px; height: 19px; }
@media (max-width: 900px) { .rv { --rv-pad: 18px; } }

/* ---------------------------------------------------------------- Compare homes (compare.js)
   A full-screen layer that slides up over any page (z 950: over the tab bar and the listing bar, under sheets, the
   photo viewer and toasts). Two panes: the picker (its list scrolls between a fixed top and the slot footer) and the
   comparison (one vertical scroller; every table lives in one sideways scroller .cx-x). */
.cx { position: fixed; inset: 0; z-index: 950; background: var(--bg); transform: translate3d(0, 100%, 0); visibility: hidden;
  transition: transform .5s var(--ease), visibility 0s linear .5s; contain: layout paint; }
.cx.open { transform: none; visibility: visible; transition: transform .5s var(--ease); }
.cx:focus { outline: none; }
.cx.now { transition: none; }
html.cx-lock, html.cx-lock body { overflow: hidden; }
.cx-pane { position: absolute; inset: 0; background: var(--bg); transition: transform .42s var(--ease), opacity .3s var(--ease); }
.cx-pick { display: flex; flex-direction: column; }
.cx-cmp { overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.cx[data-pane="pick"] .cx-cmp { transform: translate3d(100%, 0, 0); visibility: hidden; transition: transform .42s var(--ease), visibility 0s linear .42s; }
.cx[data-pane="cmp"] .cx-pick { transform: translate3d(-24%, 0, 0); opacity: 0; visibility: hidden; transition: transform .42s var(--ease), opacity .3s var(--ease), visibility 0s linear .42s; }
.cx-top { position: sticky; top: 0; z-index: 6; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: calc(10px + var(--safe-t)) 16px 10px; background: var(--bg); }
.cx-top h2 { font-size: 18px; font-weight: 800; text-align: center; white-space: nowrap; }
.cx-top > :first-child { justify-self: start; }
.cx-top > :last-child { justify-self: end; }
.cx-close { width: 46px; height: 46px; }
.cx-acts .ib { width: 44px; height: 44px; }
.cx-acts .ib svg.i { width: 21px; height: 21px; }

/* picker */
.cx-tabs { position: relative; flex: none; display: flex; gap: 22px; padding: 0 18px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.cx-tabs::-webkit-scrollbar { display: none; }
.cx-tabs button { flex: none; min-height: 46px; padding: 0 2px; border: 0; background: none; font-size: 15.5px; font-weight: 700; color: var(--muted); cursor: pointer; transition: color .2s; }
.cx-tabs button[aria-selected="true"] { color: var(--text); }
.cx-tab-ind { position: absolute; left: 0; bottom: -1px; width: 100px; height: 3px; border-radius: 3px; background: var(--sea); transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .42s var(--spring); pointer-events: none; }
.cx-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 16px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; }
.cx-list .skel { min-height: 120px; }
.cxp-card { position: relative; display: grid; grid-template-columns: 36% minmax(0, 1fr); width: 100%; min-height: 118px; padding: 0; border-radius: 16px; overflow: hidden;
  border: 2px solid var(--line); background: var(--card); color: var(--text); text-align: left; font: inherit; cursor: pointer;
  transition: border-color .2s, background-color .2s, transform var(--t-press) var(--ease-in); -webkit-tap-highlight-color: transparent; }
.cxp-card:active { transform: scale(.985); }
.cxp-card[aria-pressed="true"] { border-color: var(--sea); background: #17211F; }
.cxp-ph { position: relative; background: #1B1C1E; }
.cxp-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cxp-ph img.cx-mk, .cxc-ph img.cx-mk { position: absolute; inset: 0; margin: auto; width: 46px; height: auto; object-fit: contain; opacity: .45; }
.cxp-ph em { position: absolute; left: 8px; top: 8px; font-style: normal; font-size: 11.5px; font-weight: 800; color: #0D0D0E; background: var(--sea); padding: 2px 8px; border-radius: var(--r-pill); }
.cxp-tx { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; padding: 12px 12px 12px 14px; font-size: 14px; line-height: 1.35; color: var(--soft); }
.cxp-tx b { font-size: 19px; font-weight: 800; color: var(--text); letter-spacing: -.01em; padding-right: 34px; }
.cxp-tx > span, .cxc-tx > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cxp-ad { color: var(--text); }
.cxp-ck { position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--line2); background: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; color: #0D0D0E; transition: background-color .2s, border-color .2s; }
.cxp-ck svg.i { width: 17px; height: 17px; stroke-width: 2.6; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .3s var(--spring); }
.cxp-card[aria-pressed="true"] .cxp-ck { background: var(--sea); border-color: var(--sea); }
.cxp-card[aria-pressed="true"] .cxp-ck svg.i { opacity: 1; transform: none; }
.cx-by { margin-top: 6px; padding: 0 4px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.cx-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 12px; text-align: center; color: var(--soft); font-size: 15px; line-height: 1.5; }
.cx-empty b { color: var(--text); font-size: 17px; }
.cx-foot { flex: none; padding: 12px 16px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: rgba(13,13,14,.96); }
.cx-hint { font-size: 15px; font-weight: 800; margin-bottom: 10px; }
.cx-slots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cx-slot { position: relative; aspect-ratio: 1; border-radius: 12px; background: var(--field); border: 0; padding: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-weight: 800; font: inherit; }
.cx-slot.on { cursor: pointer; background: #1B1C1E; animation: cxPop .38s var(--spring); }
.cx-slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cx-minus { position: absolute; top: -6px; left: -6px; width: 24px; height: 24px; border-radius: 50%; background: #E5484D; box-shadow: 0 0 0 2px var(--bg); display: flex; align-items: center; justify-content: center; }
.cx-minus svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 3; stroke-linecap: round; fill: none; }
.cx-slot.on::after { content: ""; position: absolute; inset: -10px; }   /* a 44px+ target for the remove badge */
@keyframes cxPop { from { transform: scale(.7); opacity: 0; } }
.cx-foot .btn { min-height: 52px; border-radius: var(--r-pill); }

/* comparison */
.cx-wrap { max-width: 980px; margin: 0 auto; padding-bottom: calc(40px + var(--safe-b)); }
.cx-loading { display: grid; gap: 16px; padding: 12px 16px; }
.cx-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 8px 16px 12px; }
.cx-h h2, .cx-next h2 { font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.cx-cards { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; padding: 0 16px 6px; overscroll-behavior-x: contain; }
.cx-cards::-webkit-scrollbar { display: none; }
.cxc { flex: 0 0 min(250px, 66vw); min-width: 0; scroll-snap-align: start; }
.cxn { flex-basis: min(316px, 84vw); }
.cxc-in { position: relative; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); }
.cxc-ph { position: relative; display: block; aspect-ratio: 4 / 3; background: #1B1C1E; }
.cxc-ph img { width: 100%; height: 100%; object-fit: cover; }
.cxc-tx { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px 12px; color: var(--soft); text-decoration: none; font-size: 14px; line-height: 1.35; min-width: 0; }
.cxc-tx b { font-size: 18px; font-weight: 800; color: var(--text); }
.cx-heart { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(13,13,14,.42); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cx-heart svg.i { width: 22px; height: 22px; }
.cx-heart.saved svg.i { fill: #F06A6A; stroke: #F06A6A; }
/* Request a tour takes the room Ask Brent doesn't need, in 13 px type, so neither label touches its edges (10-30 pm) */
.cxn-btns { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 2px 12px 12px; }
.cxn-btns .btn { min-height: 44px; padding: 6px 12px; font-size: 13px; gap: 6px; border-radius: 12px; }
.cxn-btns .btn svg.i { width: 16px; height: 16px; }
.cxn-btns .btn:has(> .ab-face) { padding-left: 7px; padding-right: 13px; gap: 7px; }
.cxn-btns .ab-face { width: 26px; height: 26px; }
.cx-key { display: flex; gap: 8px; align-items: baseline; padding: 14px 16px 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
.cx-key i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--sea); transform: translateY(1px); }
.cx-body { margin-top: 8px; }
/* the home names above the columns: pinned under the top bar, moved sideways with the tables (compare.js wireCmp) */
.cx-colhead { position: sticky; top: var(--cx-top-h, 64px); z-index: 5; display: flex; overflow: hidden; background: var(--bg); border-bottom: 1px solid var(--line2); }
.cx-ch-l { flex: none; position: relative; z-index: 1; width: var(--cx-label); background: var(--bg); }
.cx-ch-track { flex: 1; min-width: 0; overflow: hidden; }
.cx-ch-in { display: grid; grid-template-columns: repeat(var(--cx-n), var(--cx-col)); will-change: transform; }
/* a street name wraps whole under its number ("10346 / Captiva"), never hyphenated ("Capti- va", 10-30 pm) */
.cx-ch-in b { padding: 10px 3px 10px 5px; font-size: 13px; font-weight: 800; line-height: 1.25; text-align: right; overflow-wrap: break-word; -webkit-hyphens: manual; hyphens: manual; }
.cx-x { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.cx-x::-webkit-scrollbar { display: none; }
.cx-in { width: max-content; min-width: 100%; }
.cx-blk { position: sticky; left: 0; width: var(--cx-vw, 100vw); padding-left: 16px; padding-right: 16px; }
.cx-sec { padding-top: 26px; }
.cx-sh { font-size: 22px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 10px; }
.cx-sub { font-size: 17px; font-weight: 800; margin: 22px 0 6px; }
.cx-r { display: grid; grid-template-columns: var(--cx-label) repeat(var(--cx-n), var(--cx-col)) 14px; align-items: start; border-bottom: 1px solid var(--line); }
.cx-l { position: sticky; left: 0; z-index: 1; padding: 13px 8px 13px 16px; background: var(--bg); font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--text);
  overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.cx-x.scrolled .cx-l { box-shadow: 8px 0 12px -10px rgba(0,0,0,.9); }
.cx-c { padding: 13px 3px 13px 5px; text-align: right; font-size: 13.5px; line-height: 1.35; color: var(--soft); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cx-c b { color: var(--text); font-weight: 800; }
.cx-c small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cx-c small.hi { color: #E2A86B; }
.cx-c .cx-cut { color: var(--sea); }
.cx-c.best { color: var(--sea); font-weight: 800; }
.cx-c a { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; min-height: 32px; color: var(--sea); font-weight: 800; text-decoration: none; white-space: nowrap; }
.cx-c a svg.i { width: 15px; height: 15px; }
.cx-tt-x { margin-left: 6px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 19px; line-height: 1; cursor: pointer; vertical-align: middle; }
.cx-band { margin-top: 14px; padding-top: 10px; padding-bottom: 10px; background: var(--card); font-size: 14px; font-weight: 800; color: var(--soft); letter-spacing: .02em; }
.cx-sec .cx-extra { display: none; }
.cx-sec.open .cx-extra { display: grid; }
.cx-vm { margin: 14px auto 0; display: flex; min-height: 44px; }
.cx-vm svg.i { transition: transform .3s var(--spring); }
.cx-sec.open .cx-vm svg.i { transform: rotate(180deg); }
.cx-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cx-tt { margin-top: 10px; }
/* photos per section: one home at a time, a pill per home to switch */
.cx-media { margin-bottom: 12px; }
.cx-rooms { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.cx-rooms::-webkit-scrollbar { display: none; }
.cx-rooms button { flex: none; min-height: 42px; border: 0; background: none; padding: 0 1px; font-size: 15px; font-weight: 700; color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; }
.cx-rooms button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--sea); }
.cx-shot { position: relative; border-radius: 16px; overflow: hidden; background: #141516; aspect-ratio: 3 / 2; }
.cx-track { position: absolute; inset: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.cx-track::-webkit-scrollbar { display: none; }
.cx-track figure { position: relative; flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.cx-track img { width: 100%; height: 100%; object-fit: cover; }
.cx-track figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 90px); padding: 4px 10px; border-radius: var(--r-pill); background: rgba(13,13,14,.72); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cx-nophoto img { width: 54px !important; height: auto !important; opacity: .45; }
.cx-n { position: absolute; right: 10px; bottom: 10px; padding: 4px 10px; border-radius: var(--r-pill); background: rgba(13,13,14,.72); color: #fff; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.cx-n:empty { display: none; }
.cx-pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 10px -16px 0; padding: 0 16px; overscroll-behavior-x: contain; }
.cx-pills::-webkit-scrollbar { display: none; }
.cx-pills button { flex: none; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; }
.cx-pills button[aria-pressed="true"] { border-color: var(--sea); color: var(--text); background: var(--sea-50); }
/* compared homes always show their price on the map, even zoomed out (the search map turns far pins into dots) */
.cx .cx-map .price-pin .pp, .cx .cx-map.zoom-far .price-pin .pp { font-size: 12px; padding: 5px 9px; width: auto; height: auto; border-radius: 8px; border: 1px solid var(--paper); background: var(--paper); color: var(--on-paper); }
.cx .cx-map .price-pin .pp::after, .cx .cx-map.zoom-far .price-pin .pp::after { display: block; border-top-color: var(--paper); }
.cx .cx-map.zoom-far .price-pin .pin-in { bottom: 5px; }
.cx .cx-map .price-pin .pp-ph { display: none; }
.cx-map { position: relative; z-index: 0; isolation: isolate; height: 260px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #101112; margin-bottom: 8px; }
.cx-next { margin-top: 34px; }
.cx-next h2 { padding: 0 16px 12px; }
.cx-ai { margin: 16px 16px 0; width: calc(100% - 32px); gap: 8px; }
.cx-attr { padding: 26px 16px 0; }
@media (min-width: 901px) {
  .cx-top { padding-left: 24px; padding-right: 24px; }
  .cx-list { max-width: 720px; width: 100%; margin: 0 auto; }
  .cx-foot > * { max-width: 688px; margin-left: auto; margin-right: auto; }
  .cx-tabs { justify-content: center; }
  .cx-shot { aspect-ratio: 16 / 9; max-height: 440px; }
  .cxc { flex-basis: 260px; }
  .cxn { flex-basis: 316px; }
}
@media (prefers-reduced-motion: reduce) { .cx, .cx-pane { transition: none !important; } }
/* the shareable page draws nothing under the layer */
body.pg-compare { min-height: 100vh; }
body.pg-compare .cx-page { min-height: 60vh; }
/* Around this home (listing.js fillAround, 10-30 pm): label | place (+ what else is near) | miles over minutes */
.ar { margin-top: 18px; }
.ar h3 { font-size: 17px; font-weight: 800; margin-bottom: 2px; }
.ar-list { list-style: none; }
.ar-list li + li { border-top: 1px solid var(--line); }
.ar-list a { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; padding: 11px 0; color: var(--text); text-decoration: none;
  -webkit-tap-highlight-color: transparent; transition: opacity .2s var(--ease); }
.ar-list a:active { opacity: .6; }
.ar-k { font-size: 13px; font-weight: 700; color: var(--muted); }
.ar-n { display: flex; flex-direction: column; min-width: 0; }
.ar-n b { font-size: 14.5px; font-weight: 700; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ar-n small { font-size: 12.5px; line-height: 1.35; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-m { text-align: right; font-size: 14px; font-weight: 700; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ar-m small { display: block; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.ar-src { font-size: 12px; line-height: 1.45; color: var(--muted); margin-top: 6px; }
@media (hover: hover) { .ar-list a:hover .ar-n b { color: var(--sea); } }
/* ==== end 10-30 LISTING + COMPARE ==== */

/* ==== 10-30 CHAT (Ask SRG sheet, place cards) ==== */
/* Nearby places under a chat reply (chat.js placesBlock): grouped rows, name + kind left, miles + minutes right */
.chat-places { align-self: stretch; background: var(--card); border: 1.5px solid var(--line2); border-radius: 18px; padding: 12px 14px 10px; animation: msg .45s var(--spring-soft) both; }
.cp-head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soft); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cp-head svg.i { width: 18px; height: 18px; color: var(--sea); flex: none; }
.cp-head b { color: var(--text); }
.cp-group { padding: 10px 0 4px; border-bottom: 1px solid var(--line); }
.cp-group:last-of-type { border-bottom: 0; }
.cp-group h4 { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.cp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; color: var(--text); text-decoration: none; min-height: 44px; }
.cp-row[hidden] { display: none; }
.cp-row:active { opacity: .7; }
.cp-name { font-size: 15px; font-weight: 700; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.cp-name small, .cp-dist small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.cp-dist { font-size: 14px; font-weight: 700; text-align: right; white-space: nowrap; flex: none; font-variant-numeric: tabular-nums; }
.cp-foot { display: flex; gap: 16px; align-items: center; padding: 2px 0 6px; }
.cp-foot .link, .cp-maps { font-size: 13.5px; }
.cp-maps { color: var(--sea); font-weight: 700; text-decoration: none; }
.cp-none, .cp-note { font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; }
.cp-src { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
@media (hover: hover) { .cp-row:hover .cp-name { color: var(--sea); } }
/* ==== end 10-30 CHAT ==== */

/* Sold or removed listing: homes like it right under the notice (11-04). Phones: the card rail; desktop: a grid. */
.lp-gone-more { margin-top: 28px; }
@media (max-width: 900px) {
  body.pg-listing.lp-gone .hs-top { display: flex; }   /* a page with no listing photo gets the site header back (logo, sign in, call) */
  body.pg-listing.lp-gone #listing { padding: 0 16px; }
  .lp-gone-more { margin: 26px 0 0; }
  .lp-gone-more .sim-h { margin: 0 4px 12px; }
  .lp-gone-more .sim-h h2 { font-size: 20px; }
  .lp-gone-more .sim { margin: 0 -16px; padding: 4px 16px 10px; scroll-padding-inline: 16px; }
}
.lp-gone-more .sim-h .link { white-space: nowrap; flex: none; }
@media (min-width: 901px) {
  .lp-gone-more .sim-h { margin: 0 0 14px; }
  .lp-gone-more .sim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .lp-gone-more .sim .hcard { flex: none; min-width: 0; }
}

/* ---------------------------------------------------------------- Listing on phones: keep browsing (2026-11-04)
   Grayson: "making it really easy to continue to browse, we need them on our app as long as possible". The details
   end in Up next (the next home in the list it was opened from), Similar homes, Nearby homes and Explore more; Contact
   Brent opens compact; the footer clears the action bar. listing.js builds these on phones only and .ph-only is hidden
   from 901px, so the desktop listing is untouched. The phone section order is the DOM order (desktop sets its own). */
@media (min-width: 901px) { .ph-only { display: none !important; } }
@media (max-width: 900px) {
  .lp-lb:empty { display: none; }   /* SRG's own listings: no other firm to name, so no empty card */
  body.pg-listing .lp-body { padding-bottom: 28px; }
  body.pg-listing:not(.lp-gone) .foot { padding-bottom: calc(100px + var(--safe-b)); }   /* the last line and links cleared the bar before, sat under it */
  .sim-sub { margin-top: 3px; font-size: 14px; font-weight: 500; color: var(--soft); }
  .un .sim-h, #near .sim-h { align-items: flex-end; }
  #near .sim-h .link { flex: none; padding: 10px 0 2px 12px; }
  #near .sim-h .link svg.i { width: 17px; height: 17px; }
  .un-card .hcard { display: block; }
  .un-nav { display: flex; gap: 10px; margin-top: 12px; }
  .un-nav .btn { flex: 1; min-height: 50px; padding: 0 12px; gap: 6px; }
  .un-nav .btn svg.i { width: 18px; height: 18px; }
  .ex h2 { margin-bottom: 4px; text-wrap: balance; }   /* "More homes in / Port St. Lucie", never a lone "Lucie" */
  .ex-list { list-style: none; margin: 0; padding: 0; }
  .ex-list a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 0; border-top: 1px solid var(--line); color: var(--text); font-size: 15.5px; font-weight: 600; text-decoration: none; -webkit-tap-highlight-color: transparent; }
  .ex-list li:first-child a { border-top: 0; }
  .ex-list a svg.i { flex: none; width: 18px; height: 18px; color: var(--sea); }
  /* Contact Brent, compact until a tap (listing.js wireAsk): the starters, the message and Send */
  #form-question.cf-min .f-stack > input, #form-question.cf-min .consent { display: none; }
  .cf-lead { margin: -4px 0 12px; font-size: 14.5px; line-height: 1.45; color: var(--soft); }
  .cf-q { margin-bottom: 12px; }
  .cf-q .chip[aria-pressed="true"] { border-color: var(--sea); background: var(--sea-50); color: var(--sea); }
}

/* ---------------------------------------------------------------- Listing on desktop (v4, 2026-11-04)
   Zillow's desktop home page in SRG's look (Grayson: "make our site for desktop more like zillows"): a centered media
   stage (big tile + 4 photos) where the listing video plays in place, a media toolbar under it, a slim sticky bar once
   the photos scroll away, the head as status / price + address / big bed-bath-sqft numbers, a sticky right column
   (Brent, then the tour request), and Zillow's section order. Everything here is desktop only (901px and up); the phone
   listing (the "Listing on phones" rules above) is untouched. */
.lp-vid, .lp-tools, .lp-bar, .lp-state, .lp-count .lp-all, .sim-all { display: none; }
@media (min-width: 901px) {
  body.pg-listing { --hs-h: 69px; --bar-h: 72px; }
  body.pg-listing .hs-wrap { max-width: 1280px; padding: 20px 32px 48px; }   /* the gap above the photos is padding from the first paint: a margin on the photos moved the page 20 px when it rendered over the edge's crawler copy (CLS 0.011) */
  body.pg-listing .foot { max-width: 1280px; padding-left: 32px; padding-right: 32px; }
  #listing:empty::before { height: clamp(420px, 64vh, 620px); margin-top: 0; }
  .lp-hero { margin-top: 0; }
  body.lp-gone #listing > .state { margin-top: 0 !important; }
  .lp-track { height: clamp(420px, 64vh, 620px); }
  .lp-status { display: none; }   /* the status sits over the price instead (.lp-state) */
  .lp-count { right: 16px; bottom: 16px; padding: 9px 16px; font-size: 14px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); }
  .lp-count > span:not(.lp-all) { display: none; }
  .lp-count .lp-all { display: inline; }

  /* the video in the big tile; open, it takes the whole photo area */
  .lp-vid { display: block; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: calc((100% - 16px) / 2); border-radius: var(--r-card) 0 0 var(--r-card); overflow: hidden; background: #050506;
    transition: width .5s var(--ease), border-radius .5s var(--ease); }
  /* listings with 2 to 4 photos fill the stage too (they used to leave empty cells) */
  .lp-track.n2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .lp-track.n2 button:first-child { grid-row: auto; }
  .lp-track.n2 button:nth-child(2) { border-radius: 0 var(--r-card) var(--r-card) 0; }
  .lp-track.n3, .lp-track.n4 { grid-template-columns: 2fr 1fr; }
  .lp-track.n4 { grid-template-rows: repeat(3, 1fr); }
  .lp-track.n4 button:first-child { grid-row: 1 / 4; }
  .lp-track.n3 button:nth-child(2), .lp-track.n4 button:nth-child(2) { border-radius: 0 var(--r-card) 0 0; }
  .lp-track.n3 button:nth-child(3) { border-radius: 0 0 var(--r-card) 0; }
  .lp-track.n4 button:nth-child(3) { border-radius: 0; }
  .lp-track.n4 button:nth-child(4) { border-radius: 0 0 var(--r-card) 0; }
  .lp-track.n2 ~ .lp-vid { width: calc((100% - 8px) / 2); }
  .lp-track.n3 ~ .lp-vid, .lp-track.n4 ~ .lp-vid { width: calc((100% - 8px) * 2 / 3); }
  .lp-photos.one .lp-vid, .lp-hero.vid-on .lp-vid, .lp-hero.vid-on .lp-track ~ .lp-vid { width: 100%; border-radius: var(--r-card); }
  .lp-vid img, .lp-vid video, .lp-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
  .lp-vid iframe { z-index: 2; background: #000; color-scheme: normal; }   /* a dark page would give a light player a white canvas */
  .lp-play:focus-visible { outline: none; }
  .lp-play:focus-visible > i { box-shadow: 0 0 0 3px var(--sea), 0 10px 30px rgba(0,0,0,.45); }   /* the tile clips outlines */
  .lp-play:focus-visible .lp-snd { box-shadow: 0 0 0 3px var(--sea); }
  .frame #frame-close { font-size: 30px; line-height: 1; font-weight: 300; }
  .lp-hero.vid-on .lp-vid video { object-fit: contain; z-index: 2; background: #000; }
  .lp-vid::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.55), transparent); transition: opacity .3s; }
  .lp-hero.vid-on .lp-vid::after { opacity: 0; }
  .lp-play { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; border: 0; padding: 0; background: transparent; color: #fff; cursor: pointer; }
  .lp-play > i { position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: rgba(13,13,14,.5); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255,255,255,.28);
    box-shadow: 0 10px 30px rgba(0,0,0,.45); transition: transform .45s var(--spring), background .2s; }
  .lp-play > i svg.i { width: 34px; height: 34px; margin-left: 5px; fill: #fff; stroke: none; }
  .lp-play:hover > i { transform: scale(1.06); background: rgba(13,13,14,.62); }
  .lp-play-l { position: absolute; left: 0; right: 0; top: calc(50% + 56px); font-size: 15px; font-weight: 700; letter-spacing: .01em; text-shadow: 0 1px 12px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.5); }
  .lp-play-l small { margin-left: 4px; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.8); }
  .lp-snd { display: none; position: absolute; left: 16px; bottom: 16px; align-items: center; gap: 8px; padding: 9px 16px 9px 13px; border-radius: var(--r-pill);
    background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.14); font-size: 14px; font-weight: 700; }
  .lp-snd svg.i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
  .lp-vid.live .lp-play > i, .lp-vid.live .lp-play-l { display: none; }   /* SRG's film playing muted: only the sound chip */
  .lp-vid.live .lp-snd { display: inline-flex; }
  .lp-hero.vid-on .lp-play { display: none; }   /* playing with sound: the player's own controls take the clicks */
  .lp-hero.vid-on .lp-float, .lp-hero.vid-on .lp-count { opacity: 0; pointer-events: none; }
  .lp-float, .lp-count { transition: opacity .25s; }

  /* the media toolbar under the photos (and in the sticky bar) */
  .lp-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
  .lt-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--card);
    color: var(--text); font: 700 14px/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; transition: border-color .2s, background .2s, color .2s, transform var(--t-ui) var(--spring); }
  .lt-pill svg.i { width: 18px; height: 18px; }
  .lt-pill:hover { border-color: rgba(255,255,255,.38); }
  .lt-pill:active { transform: scale(.96); transition-duration: var(--t-press); }
  .lt-pill small { font-size: 13px; font-weight: 600; opacity: .7; }
  .lt-pill.vid { background: var(--sea); border-color: var(--sea); color: #0D0D0E; }
  .lt-pill.vid svg.i { fill: currentColor; stroke: none; width: 15px; height: 15px; }
  .lt-pill.vid:hover { background: #93C6BD; border-color: #93C6BD; }
  .lt-pill.vid[aria-pressed="true"] { background: transparent; color: var(--sea); }
  .lt-pill.vid[aria-pressed="true"] svg.i { fill: none; stroke: currentColor; width: 17px; height: 17px; }
  .lt-pill.saved svg.i { fill: #E0445C; stroke: #E0445C; }

  /* the sticky bar */
  .lp-bar { display: block; position: fixed; left: 0; right: 0; top: var(--hs-h); z-index: 45; height: var(--bar-h); background: rgba(13,13,14,.94);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line);
    transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .25s, visibility 0s linear .35s; }
  body.lp-barred .lp-bar { transform: none; opacity: 1; visibility: visible; transition: transform .35s var(--ease), opacity .25s; }
  body.lp-gone .lp-bar { display: none; }
  .lp-bar-in { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 16px; }
  .lpb-ph { flex: none; width: 64px; height: 48px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: #1B1C1E; cursor: pointer; }
  .lpb-ph img { width: 100%; height: 100%; object-fit: cover; }
  .lpb-t { min-width: 0; display: grid; line-height: 1.25; }
  .lpb-t b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
  .lpb-t span { font-size: 13.5px; color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lpb-a { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
  .lpb-a .lt-pill { min-height: 40px; padding: 0 14px; }
  .lpb-sep { width: 1px; height: 26px; background: var(--line2); margin: 0 4px; }

  /* the head: status, then price + address on the left and the big numbers on the right */
  .lp-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; }
  .lp-head > * { grid-column: 1 / -1; }
  .lp-state { display: inline-flex; justify-self: start; align-items: center; gap: 8px; grid-row: 1; margin-bottom: 12px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--field); font-size: 13px; font-weight: 700; }
  .lp-state i { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
  .lp-state.pending i { background: var(--warn); }
  .lp-head .price { grid-column: 1; grid-row: 2; font-size: 44px; }
  .lp-head .lp-addr { grid-column: 1; grid-row: 3; margin-top: 6px; font-size: 18px; }
  .lp-head .lp-specs { grid-column: 2; grid-row: 2 / 4; align-self: center; margin: 0; flex-wrap: nowrap; gap: 30px; }
  .lp-specs span { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; font-size: 15px; color: var(--soft); line-height: 1.2; }
  .lp-specs svg.i { display: none; }
  .lp-specs b { font-size: 28px; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
  .lp-head .lp-meta { margin-top: 14px; }
  .lp-head .pay-strip { justify-self: start; gap: 22px; margin-top: 18px; padding: 11px 18px; background: var(--sea-50); border-color: var(--sea-100); color: var(--text); }
  .lp-head .pay-strip span { font-size: 15px; }
  .lp-head .pay-strip u { font-size: 14.5px; color: var(--sea); text-decoration: none; }
  .lp-head .pay-strip:hover u { text-decoration: underline; text-underline-offset: 4px; }
  .lp-media { display: none; }   /* the stage's toolbar has these */

  .lp-main > .stats { justify-content: flex-start; gap: 0; padding: 0 28px; font-size: 14px; }
  .lp-main > .stats div { flex: none; display: flex; align-items: baseline; gap: 6px; text-align: left; }
  .lp-main > .stats div + div::before { content: ""; align-self: center; width: 1px; height: 16px; margin: 0 16px; background: var(--line2); }
  .lp-main > .stats b { display: inline; font-size: 15px; }
  .lp-main > .stats span { font-size: 14px; }
  .lp-main > .card { padding: 26px 28px; }
  .lp-main > .card .rail-x, .lp-main > .card .days, .lp-main > .card .slots, .lp-main > .card .sim { margin-left: -28px; margin-right: -28px; padding-left: 28px; padding-right: 28px; scroll-padding-inline: 28px; }

  /* the two columns */
  .lp-body { grid-template-columns: minmax(0, 1fr) 360px; gap: 56px; margin-top: 30px; }
  .lp-main { gap: 18px; }
  .rail { top: calc(var(--hs-h) + 20px); transition: top .35s var(--ease); }
  body.lp-barred .rail { top: calc(var(--hs-h) + var(--bar-h) + 18px); }
  .rail .card { padding: 22px; }
  .rl-agent { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .rl-eye { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .rl-agent img { width: 84px; height: 84px; margin-top: 6px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 3px var(--card), 0 0 0 4.5px var(--sea-100); }
  .rl-name { margin-top: 12px; font-size: 18px; font-weight: 800; }
  .rl-firm { font-size: 13.5px; color: var(--soft); }
  .rl-firm span { white-space: nowrap; }   /* the firm name never breaks before LLC */
  .rl-line { margin-top: 8px; font-size: 13.5px; color: var(--soft); line-height: 1.5; }
  .rl-agent .btn { margin-top: 16px; }
  .rl-call { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--text); text-decoration: none; }
  .rl-call svg.i { width: 17px; height: 17px; color: var(--sea); }
  .rl-call:hover { color: var(--sea); }
  .rl-tour .btn { margin-top: 0; min-height: 60px; }
  .rl-note { margin-top: 12px; font-size: 13px; color: var(--muted); line-height: 1.5; }

  /* the overview tiles, Zillow's grey boxes */
  .lp-facts .ff-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .lp-facts .ff { padding: 14px 16px; border-radius: 12px; background: var(--card2); min-height: 72px; }
  .lp-facts .ff svg.i { width: 24px; height: 24px; }

  /* Zillow's order: overview, what's special, map + travel, then the money and the next step */
  .lp-main > * { order: 50; }
  .lp-main > .lp-head { order: 1; }
  .lp-main > .lp-facts { order: 2; }
  .lp-main > .special { order: 3; }
  .lp-main > .stats { order: 4; }
  .lp-main > #similar { order: 5; }   /* Grayson 11-04: more homes to open right away, not at the bottom */
  .lp-main > .story { order: 6; }
  .lp-main > .lp-nbhd { order: 7; }
  .lp-main > #travel { order: 8; }
  .lp-main > .lp-ask { order: 9; }
  .lp-main > #tour { order: 10; }
  .lp-main > #pay { order: 11; }
  .lp-main > #flood-card { order: 12; }
  .lp-main > #rv { order: 13; }
  .lp-main > .lp-lb { order: 14; }
  .lp-main > #form-question { order: 15; }
  .lp-main > .sn { order: 16; }
  .lp-main > .attr { order: 17; }
  /* similar homes: a grid of 6 you can open at a glance, with See all for the rest of the search */
  .lp-main > #similar { margin: 8px 0 6px; }
  .lp-main > #similar .sim-h { margin: 0 0 14px; gap: 20px; }
  .lp-main > #similar .sim-h [data-cx-open] { margin-left: auto; }
  .sim-all { display: inline-flex; }
  .lp-main > #similar .sim { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; overflow: visible; scroll-snap-type: none; padding: 0; margin: 0; }
  .lp-main > #similar .sim .hcard { flex: none; min-width: 0; }
  .lp-main > #similar .sim .hcard:nth-child(n+7) { display: none; }
  .lpb-sim { display: none !important; }
  body.lp-has-sim .lpb-sim { display: inline-flex !important; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  body.pg-listing .top-nav { margin-left: 4px; gap: 0; }
  body.pg-listing .top-nav a { white-space: nowrap; padding: 8px 9px; }
  body.pg-listing .top-call { width: 46px; padding: 0; }
  body.pg-listing .top-call .hide-sm { display: none; }
}
@media (min-width: 901px) and (max-width: 1140px) {
  body.pg-listing .hs-wrap { padding: 20px 24px 40px; }
  .lp-bar-in { padding: 0 24px; }
  .lp-body { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .lp-head .lp-specs { gap: 22px; }
  .lp-specs b { font-size: 26px; }
  .lp-facts .ff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lpb-a .lt-pill.vid ~ .lt-pill[data-lp-map] { display: none; }
  .lp-main > #similar .sim { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-main > #similar .sim .hcard:nth-child(n+5) { display: none; }
}
@media (min-width: 901px) and (prefers-reduced-motion: reduce) { .lp-vid, .lp-bar, .rail { transition: none; } }

/* "How it compares" (11-05, idx/seo/render.mjs compareSection): the edge puts it after #listing; listing.js moves it
   under the days-on-market / price-per-square-foot stats and marks it .placed. Hidden until then for people, so it
   never flashes at the top while the page draws; crawlers and no-JS visitors read it where it is. */
html.js #lp-local:not(.placed) { display: none; }
.lp-local h2 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.lp-local p { line-height: 1.55; }
.lp-local .updated { margin-top: 10px; font-size: 13px; color: var(--soft); }
.lp-local .updated a { color: var(--sea); }

/* Save search, signed in (11-05 redesign, search.js quickSave): the search with its live count and newest homes,
   then frequency cards that say when each one actually sends. */
.ss-quick { padding-top: 6px; }
.ss-hero { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: linear-gradient(135deg, var(--sea-50), rgba(127,183,174,.04)); border: 1px solid var(--sea-100); }
.ss-ico { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--sea); color: var(--on-paper); }
.ss-ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-what { min-width: 0; display: grid; gap: 3px; }
.ss-what b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.ss-what span { font-size: 13.5px; color: var(--soft); line-height: 1.4; }
.ss-peek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.ss-tile { position: relative; aspect-ratio: 1 / 1; border-radius: 14px; overflow: hidden; background: var(--card2); }
.ss-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-tile span { position: absolute; left: 6px; bottom: 6px; padding: 3px 7px; border-radius: 999px; background: rgba(13,13,14,.78); color: var(--text); font-size: 11.5px; font-weight: 800; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.ss-more { aspect-ratio: 1 / 1; border-radius: 14px; border: 1px dashed var(--line2); display: grid; place-content: center; text-align: center; gap: 2px; color: var(--soft); }
.ss-more b { font-size: 16px; color: var(--text); }
.ss-more span { font-size: 12px; }
.ss-lab { display: block; margin: 20px 0 10px; }
.ss-freq { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ss-freq button { position: relative; text-align: left; display: grid; gap: 4px; align-content: start; padding: 14px 12px 13px; min-height: 92px; border-radius: 16px; border: 1.5px solid var(--line2); background: var(--card2); color: var(--text); font-family: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.ss-freq button i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line2); margin-bottom: 6px; transition: border-color .2s, background .2s, box-shadow .2s; }
.ss-freq button b { font-size: 15.5px; font-weight: 800; }
.ss-freq button span { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.ss-freq button[aria-checked="true"] { border-color: var(--sea); background: var(--sea-50); }
.ss-freq button[aria-checked="true"] i { border-color: var(--sea); background: var(--sea); box-shadow: inset 0 0 0 3px var(--card2); }
.ss-freq button[aria-checked="true"] span { color: var(--soft); }
.ss-freq button:active { transform: scale(.98); }
.ss-go { margin-top: 18px; min-height: 54px; font-size: 16.5px; gap: 8px; }
.ss-go svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-note { text-align: center; }
@media (max-width: 380px) { .ss-freq button { padding: 12px 10px; min-height: 86px; } .ss-freq button span { font-size: 11.5px; } }


/* Brent's price check (11-07, listing.js priceCheckCard): the offer card under "How it compares", in the same sea
   gradient as the Sharp Number card, and its sheet (#sheet-price). Desktop: right after the stats, with How it compares
   (both used to fall to order 50, after the attribution). */
.pc { background: linear-gradient(135deg, #17302C 0%, #161718 100%); border: 1px solid var(--sea-100); }
.pc-eye { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sea-500); }
.pc-eye .nw { white-space: nowrap; }
.pc h2 { margin-bottom: 10px; }
.pc p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.82); }
.pc .btn { margin-top: 16px; }
.pc .btn:disabled { opacity: .7; cursor: default; }
.pc-note { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--soft); }
.pc .pc-note { color: var(--soft); }
.pc-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.pc-hint { margin: 8px 2px 0; font-size: 13px; color: var(--muted); }
#form-price .pc-note { margin: 10px 0 2px; text-align: center; }
@media (min-width: 901px) { .lp-main > .lp-local, .lp-main > .pc { order: 4; } .pc .btn-block { display: inline-flex; width: auto; padding: 0 32px; } }
/* 11-07 (Grayson: "make the price check card be glowing or something so it grabs attention"): a slow sea-green glow
   that breathes around the card. Only the glow layer's opacity animates, so it stays smooth on phones; it holds still
   for people who turn motion off. */
.pc { position: relative; border-color: rgba(127,183,174,.75); }
.pc::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(127,183,174,.95), 0 0 26px 6px rgba(127,183,174,.6), 0 0 70px 16px rgba(127,183,174,.28);
  opacity: .35; animation: pc-glow 2.4s ease-in-out infinite; }
@keyframes pc-glow { 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pc::after { animation: none; opacity: .8; } }