:root{
  --bay:#0E2A33; --shell:#FFFDF8; --sand:#E8E0CE; --marigold:#F2A100; --agave:#2F6B5C;
  --ink-60:rgba(14,42,51,.62); --ink-38:rgba(14,42,51,.38); --r:16px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* W11 (09-26, RN#4): an author rule further down (".topbtn{...display:inline-flex}", the 44px-tap-target rule)
   has the same cascade weight as the UA stylesheet's own "[hidden]{display:none}" and comes later, so it wins —
   #mapbtn stayed visible/clickable (with a blank map behind it) on every 0-listing page despite JS correctly
   setting hidden=true. This rule's higher specificity ([hidden] attribute + !important) always wins instead. */
[hidden]{display:none!important}
html,body{margin:0;background:var(--shell);color:var(--bay);font-family:var(--font);font-size:16px;line-height:1.45}
body{padding-bottom:env(safe-area-inset-bottom)}
button,input,textarea{font:inherit}
button{border:0;cursor:pointer;background:none;color:inherit}
a{color:inherit}
:focus-visible{outline:2.5px solid var(--bay);outline-offset:3px;border-radius:4px}

#top{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;
  padding:10px 18px;background:var(--shell);color:var(--bay);border-bottom:1px solid var(--sand)}
.mark{display:block;text-decoration:none;line-height:0}
.mark img{display:block;height:44px;width:auto}
.topbtn{padding:8px 14px;border:1.5px solid rgba(14,42,51,.35);border-radius:20px;color:var(--bay);font-size:14px;font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* header search (PLAN-20260925 Phase 4 item 1): a third header child, forced to its own row by flex-basis:100%
   so it never crowds the mark/map button on a phone; the suggestion list is position:absolute so it never shifts
   layout and stays hidden until there is a query + a match. */
.hsearch{position:relative;flex:1 1 100%;order:3}
#hsearch-q{display:block;width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--sand);border-radius:12px;
  font-size:15px;background:var(--shell);color:var(--bay)}
#hsearch-q:focus-visible{border-color:var(--bay)}
.hsearch-list{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:25;margin:0;padding:4px;list-style:none;
  background:var(--shell);border:1.5px solid var(--sand);border-radius:12px;box-shadow:0 8px 22px rgba(14,42,51,.18);
  max-height:70vh;overflow-y:auto}
.hsearch-list li{min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:8px;cursor:pointer;font-size:14.5px}
.hsearch-list li:hover,.hsearch-list li.active{background:var(--sand)}
.hsearch-list .hs-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hsearch-list .hs-kind{flex:0 0 auto;font-size:12.5px;color:var(--ink-60);white-space:nowrap}
.hsearch-list li.hs-empty{cursor:default;color:var(--ink-38)}
.hsearch-list li.hs-empty:hover{background:none}

#view{max-width:640px;margin:0 auto;padding:16px 16px 40px}
.hero{margin:-16px -16px 18px;padding:34px 22px 26px;background:var(--bay);background-size:cover;background-position:center;
  color:var(--shell);border-radius:0 0 var(--r) var(--r)}
/* W13 (09-26, MACHINE#8): the home page's CLS measured 0.48 ("poor") because [data-slot="hero"] (server-rendered
   empty; filled by enhanceHome() once JS runs) has no reserved space — the H1/CTA/footer below it all jump down
   the instant it fills. min-height while :empty (measured against the common first-visit case, no stored
   location yet) reserves that space; the rule stops applying itself the moment content is inserted. */
[data-slot="hero"]:empty{min-height:389px}
.hero .kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--marigold);margin:0 0 12px}
.hero h1,.hero .h1{font-size:31px;line-height:1.1;letter-spacing:-.025em;margin:0 0 12px;color:var(--shell)}
/* Option A (PLAN-20260925): the client GPS hero sits in [data-slot=hero] above the server's own <h1> on "/" — its
   headline is a styled <p class="h1"> so the page still carries exactly one real <h1> (the server's). */
.hero .lede{color:rgba(255,253,248,.88);font-size:16px;line-height:1.5;margin:0 0 18px;max-width:34ch}
.hero .lede b{color:var(--shell)}
.cta.big{font-size:18px;padding:18px 16px;box-shadow:0 6px 18px rgba(0,0,0,.28)}
.hero .trust{font-size:12.5px;color:rgba(255,253,248,.7);margin:10px 0 0;line-height:1.45}
.how h2,.contact h2{margin:6px 0 8px}
.how ol{margin:0 0 6px;padding-left:22px}
.how li{margin:0 0 8px;font-size:15px;line-height:1.45}
.contact{margin-top:18px;padding:16px;border:1.5px solid var(--sand);border-radius:var(--r)}
.contact .cta.ghost{margin-bottom:9px}
.fallback{text-align:center;margin:18px 0 0}
.loading{color:var(--ink-60)}
h1{font-size:24px;letter-spacing:-.02em;line-height:1.15;margin:6px 0 4px}
h2{font-size:19px;letter-spacing:-.02em;margin:22px 0 8px}
p.lede{font-size:15px;color:var(--ink-60);margin:0 0 16px;max-width:46ch}
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.langs .chip{min-height:44px;min-width:44px;text-decoration:none}
.hint{font-size:13.5px;color:var(--ink-38);margin:0 0 12px}
.err{font-size:14px;color:#9A3412;background:#FDF0E4;padding:11px 13px;border-radius:9px;margin:0 0 14px;line-height:1.45}
.ok{font-size:14px;color:#14532D;background:#E7F5EC;padding:11px 13px;border-radius:9px;margin:0 0 14px}

.actions{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.chip{padding:9px 14px;border:1.5px solid var(--sand);border-radius:20px;font-size:14px;font-weight:500;background:var(--shell)}
.chip:hover{border-color:var(--bay)}
.chip.on{background:var(--bay);color:var(--shell);border-color:var(--bay)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 16px}

.cta{display:block;width:100%;padding:15px;background:var(--marigold);color:var(--bay);font-weight:600;
  font-size:16.5px;border-radius:12px;text-align:center;text-decoration:none;margin:0 0 9px}
.cta.ghost{background:transparent;border:1.5px solid var(--sand);font-size:15px;padding:13px}
.cta.ghost:hover{border-color:var(--bay)}
.link{display:inline-block;padding:6px 0;color:var(--ink-60);font-size:14px;text-decoration:underline;text-underline-offset:3px}

.list{list-style:none;margin:0;padding:0}
.card{display:grid;grid-template-columns:128px 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--sand);
  text-decoration:none;color:inherit}
.card .ph{width:128px;aspect-ratio:4/3;border-radius:10px;object-fit:cover;background:var(--sand);display:block}
.card .p{font-weight:800;font-size:18px;letter-spacing:-.02em;margin:0}
.card .pm{font-size:12.5px;color:var(--ink-60);margin:0 0 3px}
.card .sp{font-size:14px;margin:0;font-weight:500}
.card .wh{font-size:13px;color:var(--ink-60);margin:0}
.card .wk{font-size:13px;color:var(--agave);font-weight:600;margin:3px 0 0}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:6px;margin:2px 0 4px}
.badge.pre{background:var(--marigold);color:var(--bay)}
.badge.built{background:var(--agave);color:var(--shell)}
.badge.mixed{background:var(--sand);color:var(--bay)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.filters .n{opacity:.55;font-weight:400;margin-left:3px}
.frame{border-bottom:1px solid var(--sand)}
.frame .fhead{display:grid;grid-template-columns:128px 1fr 22px;gap:12px;align-items:start;width:100%;
  padding:10px 0;text-align:left;color:inherit}
.frame .fhead .ph{width:128px;aspect-ratio:4/3;border-radius:10px;object-fit:cover;background:var(--sand);display:block}
.frame .fhead .p{font-weight:800;font-size:18px;letter-spacing:-.02em;margin:0}
.frame .fname{font-size:15px;font-weight:700;margin:1px 0 2px}
.frame .sp{font-size:14px;margin:0;font-weight:500}
.frame .wh{font-size:13px;color:var(--ink-60);margin:0}
.frame .wk{font-size:13px;color:var(--agave);font-weight:600;margin:3px 0 0}
.frame .chev{font-size:26px;line-height:1;color:var(--ink-38);transition:transform .15s ease;margin-top:4px}
.frame.open .chev{transform:rotate(90deg)}
.frame .inner{margin:0 0 6px 14px;padding-left:12px;border-left:3px solid var(--sand)}
.frame .inner .card{border-bottom:1px solid var(--sand)}
.frame .inner li:last-child .card{border-bottom:0}
.pin.multi{background:var(--marigold);color:var(--bay)}
.divider{font-size:13px;color:var(--ink-38);text-transform:uppercase;letter-spacing:.08em;margin:18px 0 4px}
.showmore{display:block;width:100%;padding:14px;margin:14px 0;border:1.5px solid var(--sand);border-radius:12px;font-weight:600}

.back{display:inline-block;padding:6px 0 10px;color:var(--ink-60);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.gal{position:relative;margin:0 -16px 14px;background:var(--bay);aspect-ratio:4/3;overflow:hidden}
.gal img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .22s ease}
.gal img.on{opacity:1}
.gal img.blur{filter:blur(14px);transform:scale(1.06)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;
  background:rgba(255,253,248,.9);color:var(--bay);font-size:22px;line-height:1;display:grid;place-items:center;
  box-shadow:0 2px 8px rgba(14,42,51,.3)}
.arrow.prev{left:10px}.arrow.next{right:10px}
.arrow[disabled]{opacity:.32}
.tally{position:absolute;right:10px;bottom:10px;background:rgba(14,42,51,.78);color:var(--shell);font-size:12px;
  font-weight:500;padding:4px 9px;border-radius:11px}
.price{font-weight:800;font-size:28px;letter-spacing:-.03em;margin:0 0 2px}
.price-mxn{font-size:14px;color:var(--ink-60);margin:0 0 9px}
.specs{font-size:15px;margin:0 0 2px;font-weight:500}
.where{font-size:14px;color:var(--ink-60);margin:0 0 3px}
.dist{font-size:13.5px;color:var(--agave);font-weight:600;margin:0 0 14px}
.desc{font-size:14.5px;line-height:1.58;margin:0 0 6px;white-space:pre-line}
.desc.clip{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.more{color:var(--agave);font-weight:500;font-size:14px;padding:4px 0;margin-bottom:12px;text-decoration:underline;text-underline-offset:3px}
.office{font-size:13px;color:var(--ink-38);margin:0 0 16px}
.legal{font-size:12px;line-height:1.5;color:var(--ink-60);margin:0 0 16px;white-space:pre-line}
.fee{font-size:13.5px;color:var(--ink-60);margin:0 0 10px}

form.lead{margin:18px 0 0;padding:16px;border:1.5px solid var(--sand);border-radius:var(--r)}
form.lead h2{margin:0 0 4px;font-size:17px}
form.lead p{margin:0 0 12px;font-size:14px;color:var(--ink-60)}
form.lead label{display:block;font-size:13px;font-weight:600;margin:10px 0 4px}
form.lead input,form.lead textarea{width:100%;padding:11px 12px;border:1.5px solid var(--sand);border-radius:10px;background:#fff}
form.lead textarea{min-height:70px;resize:vertical}
form.lead .hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
form.lead button.cta{margin-top:14px}
form.lead small{display:block;color:var(--ink-38);font-size:12px;margin-top:8px}

#foot{max-width:640px;margin:0 auto;padding:18px 16px 30px;font-size:12px;color:var(--ink-38);line-height:1.5}

#mapwrap{position:fixed;inset:0;z-index:40;background:var(--bay)}
#map{position:absolute;inset:0}
.mapclose{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:41;padding:10px 16px;
  border-radius:20px;background:var(--shell);color:var(--bay);font-weight:600;box-shadow:0 2px 8px rgba(14,42,51,.3)}
/* QA-B#6 (09-26): 44 px minimum touch target — min-width/min-height are a floor CSS applies even under an
   explicit smaller width/height (here: none), so the pin only ever grows, never shrinks below this. */
.pin{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--shell);background:var(--agave);padding:5px 9px;
  border-radius:13px 13px 13px 3px;border:1.5px solid var(--shell);box-shadow:0 2px 6px rgba(14,42,51,.34);cursor:pointer;white-space:nowrap;
  min-width:44px;min-height:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.pin.land{background:var(--bay)}
/* QA-B#1/#2 (09-26): a cluster bubble (a screen-space group of pins collapsed into a count) — round, distinct
   from a price pin so a tap's meaning ("zoom in") is visually obvious before it's pressed. */
.pin.bubble{border-radius:50%;background:var(--bay);color:var(--shell);font-weight:700;font-size:15px;padding:0}
.badge.pending{background:#C8321E;color:#fff}
/* Off-market badge (point 6): distinct from .badge.pending (under-contract) — ink bg, shell text, bolder + bigger. */
.badge.offmarket{background:var(--bay);color:var(--shell);font-weight:800;font-size:13px}
.lead.watch .chk{display:flex;gap:10px;align-items:flex-start;margin:8px 0;font-size:15px}.lead.watch .chk input{margin-top:3px;width:18px;height:18px}
.pin.here,.pin.multi.here{background:#C8321E;color:#fff;border-color:#fff;z-index:2;box-shadow:0 0 0 2px rgba(200,50,30,.35),0 2px 8px rgba(14,42,51,.45)}
.me{width:20px;height:20px;border-radius:50%;background:var(--marigold);border:3px solid var(--shell);
  box-shadow:0 0 0 1px rgba(14,42,51,.3),0 2px 8px rgba(14,42,51,.4)}
.maplibregl-ctrl-attrib{font-size:9px;background:rgba(255,253,248,.72)!important}
/* QA-B#6 (09-26): MapLibre's own zoom +/- buttons default to 29x29 — below the site's 44 px rule. min-width/
   min-height are a floor over the vendor CSS's explicit width/height, regardless of stylesheet load order. */
#mapwrap .maplibregl-ctrl-group button{min-width:44px;min-height:44px}
@media(prefers-reduced-motion:reduce){*,*::after{animation:none!important;transition:none!important}}

/* ---- Phase 5 app (SPEC-003) additions ---- */
.gallery{position:relative;margin:0 -16px 14px;background:var(--bay);aspect-ratio:4/3;overflow:hidden}
.gallery .track{display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.gallery .track::-webkit-scrollbar{display:none}
.gallery .track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start;display:block}
.gallery .count{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;padding:2px 9px;border-radius:12px;font-size:13px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 16px}
/* "Communities in <area>" / "Developments in <area>" (review finding 9, 09-25): one link per line, count
   right-aligned, no bullets — a flex-wrap pill row (like .chips above) is the wrong shape for this list and
   overlapped the count onto the next row's name. */
ul.places-row{list-style:none;padding:0;margin:0 0 16px}
ul.places-row li{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 0;border-bottom:1px solid var(--sand)}
ul.places-row li a{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.places-row li small{flex:0 0 auto;color:var(--ink-60);font-size:13px;white-space:nowrap}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 16px;font-size:16px}
.chip.warn{background:#fff3cd;border-color:#e0a800;color:#5b4600}
.filters.price label{display:flex;align-items:center;gap:6px;font-size:15px}
.filters.price input{width:38%;min-width:0;font-size:16px;padding:8px 10px;border:1px solid var(--line, #cfd4d8);border-radius:10px}
.list .sub{list-style:none;font-weight:700;font-size:15px;color:var(--ink-2, #4a5560);margin:14px 0 4px}
#banner p.err{margin:0;border-radius:0;text-align:center}
.fn{font-size:14px;color:var(--ink-2, #4a5560)}
.fn small[data-tripwire]{display:block;margin-top:2px}
.desc p{white-space:pre-line}
.facts .big{font-size:28px;margin:4px 0}
.back{margin:8px 0 6px}
#foot .owned{font-weight:700;margin:14px 0 6px}
#foot .links{font-size:14px;line-height:1.7}
#foot .lang{display:flex;gap:8px;margin:8px 0 10px}
#foot .attr,#foot .fn{font-size:12px;color:var(--ink-2, #4a5560)}
.talk{margin:22px 0}
.talk .cta{display:block;text-align:center;margin:10px 0}
/* R5.8.c tap targets ≥ 44 px (mobile QA 09-21) */
.chip,.topbtn,.arrow,.fhead,.more,#foot .lang .chip,.maptool,p.pinback button{min-height:44px;min-width:44px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center}
.filters .chip{padding:10px 16px}

.hdg{display:inline-block;width:1em;margin-right:4px;transition:transform .3s;font-weight:700}

/* sticky WhatsApp/Call bar (PLAN-20260925 Phase 4 item 2, listing pages only): fixed to the bottom, respects the
   notch/home-indicator safe area, hides while the in-page contact section is itself on screen so the phone never
   shows both at once. body.has-sticky-bar's padding keeps the bar from covering the last line of page content. */
.sticky-contact{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:var(--shell);border-top:1px solid var(--sand);
  box-shadow:0 -4px 14px rgba(14,42,51,.14);transition:transform .18s ease}
.sticky-contact.hide{transform:translateY(110%)}
.stick-btn{flex:1 1 0;min-height:48px;display:flex;align-items:center;justify-content:center;border-radius:12px;
  font-weight:700;font-size:15px;text-decoration:none}
.stick-btn.wa{background:var(--marigold);color:var(--bay)}
.stick-btn.call{background:transparent;border:1.5px solid var(--sand);color:var(--bay)}
#view.has-sticky-bar{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
@media(prefers-reduced-motion:reduce){.sticky-contact{transition:none}}

/* listing breadcrumb (review finding 1, 09-25): one quiet, muted, non-underlined line; horizontally scrollable
   when it's longer than the phone; the final step is plain text ("MLS <n>"), never a link. */
nav.wh.top{margin:0 0 10px;font-size:13px;color:var(--ink-60);line-height:1.4}
nav.wh.top .crumb-scroll{white-space:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1px}
nav.wh.top .crumb-scroll::-webkit-scrollbar{display:none}
nav.wh.top a{color:var(--ink-60);text-decoration:none}
nav.wh.top a:hover,nav.wh.top a:focus-visible{text-decoration:underline;text-underline-offset:2px}
.fn.legal{font-size:12px;line-height:1.45;color:var(--ink-60);margin:14px 0 0}

dl.facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0 12px}dl.facts dt{color:var(--ink-60)}dl.facts dd{margin:0;font-weight:600}
[data-ssr] img{max-width:100%;height:auto;display:block;margin:6px 0}

.place{margin:0 0 12px}.place .facts{font-size:14px;color:var(--ink-60);margin:0 0 8px}.place .about p{margin:0 0 8px;font-size:15px;line-height:1.5}

a.pl{color:var(--bay);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}

/* place pages (09-23): lede first, the long guide below the homes */
.place .zone{margin:0 0 4px;font-size:13px;font-weight:600}
.place .zone a{color:var(--ink-60);text-decoration:none}
.place .lede,article>.lede{font-size:16.5px;line-height:1.5;margin:4px 0 12px;max-width:52ch}
a.pl{color:inherit;text-decoration:underline;text-decoration-color:var(--marigold);text-decoration-thickness:2px;text-underline-offset:2px}
details.guide{margin:22px 0 8px;padding:12px 14px;border:1.5px solid var(--sand);border-radius:var(--r)}
details.guide summary{cursor:pointer;font-weight:700;font-size:16px}
details.guide p{font-size:15px;line-height:1.55}
ul.places{list-style:none;padding:0;margin:0 0 12px}
ul.places li{padding:10px 0;border-bottom:1px solid var(--sand)}
ul.places li span{display:block;font-size:14.5px;color:var(--ink-60);margin-top:3px;line-height:1.45}
section.qa dt{font-weight:700;margin:12px 0 2px}
section.qa dd{margin:0;color:var(--ink-60);line-height:1.5}
section.about{margin-top:26px}

/* /places — the "All areas" directory (A1, John 09-24; polish 09-24) */
#places-q{display:block;width:100%;padding:13px 15px;border:1.5px solid var(--sand);border-radius:12px;
  font-size:15px;background:var(--shell);color:var(--bay);margin:0 0 18px}
#places-q:focus-visible{border-color:var(--bay)}
#places-tree{margin:0}
#places-tree>details{border-bottom:1px solid var(--sand)}
#places-tree>details:last-child{border-bottom:0}
#places-tree>details>summary{display:flex;align-items:center;gap:10px;min-height:44px;padding:12px 2px;
  cursor:pointer;font-weight:700;font-size:16.5px;list-style:none}
#places-tree>details>summary::-webkit-details-marker{display:none}
#places-tree>details>summary::marker{content:""}
#places-tree>details>summary .zn{flex:1 1 auto}
#places-tree>details>summary .zc{color:var(--ink-60);font-weight:500;font-size:14px}
#places-tree>details>summary .chev{font-size:20px;line-height:1;color:var(--ink-38);transition:transform .15s ease}
#places-tree>details[open]>summary .chev{transform:rotate(90deg)}
#places-tree .ablock{margin:0 0 14px}
#places-tree .ablock h3{margin:16px 0 4px;font-size:16px}
#places-tree .ablock .divider{margin:10px 0 2px}
#places-tree ul.places{margin:0 0 4px}
#places-tree ul.places li{padding:7px 0}

/* PLAN-20260925 Phase 4 item 1/4: place-page slim layout — 4 visible blocks, everything else a closed, labelled
   <details> quiet row (same chevron pattern as details.guide/#places-tree above), ≥44px tap targets, no overflow. */
p.facts-line{font-size:14.5px;color:var(--ink-60);margin:2px 0 10px;font-weight:500}
p.cmp{font-size:15px;line-height:1.45;margin:0 0 14px;max-width:52ch}
section.inside{margin:6px 0 18px}
section.inside h2{margin:0 0 8px}
p.theme-links{font-size:14.5px;margin:4px 0 12px}
p.buying-line,p.compare-links{font-size:14.5px;margin:14px 0 0}
p.buying-line a,p.compare-links a{color:var(--agave);font-weight:600;text-decoration:none}
p.buying-line a:hover,p.compare-links a:hover{text-decoration:underline}
p.compare-links a{margin-right:4px}

details.full-facts,details.history-wrap,details.about-wrap,details.sections-wrap,details.qa-more{
  margin:14px 0;padding:0;border-top:1px solid var(--sand)}
details.full-facts summary,details.history-wrap summary,details.about-wrap summary,
details.sections-wrap summary,details.qa-more summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:44px;padding:12px 2px;font-weight:700;font-size:15.5px}
details.full-facts summary::-webkit-details-marker,details.history-wrap summary::-webkit-details-marker,
details.about-wrap summary::-webkit-details-marker,details.sections-wrap summary::-webkit-details-marker,
details.qa-more summary::-webkit-details-marker{display:none}
details.full-facts summary::after,details.history-wrap summary::after,details.about-wrap summary::after,
details.sections-wrap summary::after,details.qa-more summary::after{
  content:"›";font-size:20px;line-height:1;color:var(--ink-38);transition:transform .15s ease;transform:rotate(90deg)}
details.full-facts[open] summary::after,details.history-wrap[open] summary::after,details.about-wrap[open] summary::after,
details.sections-wrap[open] summary::after,details.qa-more[open] summary::after{transform:rotate(-90deg)}
details.full-facts>*:not(summary),details.history-wrap>*:not(summary),details.about-wrap>*:not(summary),
details.sections-wrap>*:not(summary),details.qa-more>*:not(summary){margin-top:0}

/* John 09-28: "Inside <place>", "Communities in …", "Developments in …" start collapsed (content stays in the HTML). */
details.fold{margin:14px 0;border-top:1px solid var(--sand)}
details.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:12px 2px}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary::after{content:"›";font-size:20px;line-height:1;color:var(--ink-38);transition:transform .15s ease;transform:rotate(90deg)}
details.fold[open]>summary::after{transform:rotate(-90deg)}
details.fold>summary>h2{margin:0;font-size:17px;line-height:1.3}
details.fold details.fold{margin:4px 0 4px 10px;border-top:0}
details.fold details.fold>summary>h2{font-size:15.5px}
details.fold>*:not(summary){margin-top:0}

/* no horizontal overflow at phone widths (320/375/430px): tables and long word-runs never widen the page. */
details table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Wave 1 badges (09-28, docs/qa/BADGES-20260928/BRIEF.md): NEW / BACK ON MARKET pills — existing palette tokens,
   neither green nor red (red = Pending already) — and the ▼/▲ 30-day price-change span (green down, red up),
   ≥4.5:1 on the card background --shell. The site has no dark theme today (body always renders on --shell); the
   dark-scheme override below holds the same ratio against --bay if one is ever added. Card price line stays a
   normal inline flow so it wraps cleanly on a 375px phone when the price + arrow don't both fit one line. */
.badge.new{background:var(--bay);color:var(--shell)}
.badge.bom{background:var(--sand);color:var(--bay)}
.pchg{display:inline-block;margin-left:6px;font-size:13px;font-weight:700;white-space:nowrap;vertical-align:middle}
.pchg.down{color:var(--agave)}
.pchg.up{color:#C8321E}
@media(prefers-color-scheme:dark){.pchg.down{color:#22C55E}.pchg.up{color:#F87171}}
.chg-line .arr{font-weight:700}.chg-line.down .arr{color:var(--agave)}.chg-line.up .arr{color:#C8321E}
@media(prefers-color-scheme:dark){.chg-line.down .arr{color:#22C55E}.chg-line.up .arr{color:#F87171}}

/* map: "Search around here" (drop-a-pin) control + "You're viewing <place>" pill (backlog QA-B, 09-28). */
.maptool{position:absolute;top:calc(12px + env(safe-area-inset-top));right:12px;z-index:41;padding:10px 16px;
  border-radius:20px;background:var(--marigold);color:var(--bay);font-weight:600;box-shadow:0 2px 8px rgba(14,42,51,.3)}
.viewpill{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:41;
  margin:0;padding:7px 14px;border-radius:20px;background:rgba(14,42,51,.82);color:var(--shell);font-size:13px;font-weight:600;
  max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}
p.pinback{margin:0 0 10px}
p.pinback button{padding:8px 14px;border:1.5px solid var(--sand);border-radius:20px;font-size:13.5px;font-weight:600;color:var(--agave)}