/* ============================================================================
   Localist — Candidate C stylesheet
   A transcription of docs/design-source/localist-kerub-mock.html ("Yellow
   Ground"): its inline styles moved into classes, values unchanged — radii,
   sizes, colours, spacing, shell width and breakpoint are the mock's.
   Owner decision (localist-database#214): design to the Kerub mock as
   outputted; the Brand Guide is visual direction only where the mock is
   silent. That is limited here to the focus ring and reduced-motion.
   Platform #28 decision C (2026-09-06): the mock's small-text grey #7B929D
   (3.26:1 on white) and its action fill #E52A79 (4.25:1) are replaced by the
   token values #4A6A78 and #C21568, an accepted departure from the mock.
   ========================================================================= */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: #F3AC3A; color: #093F56; font-family: "Be Vietnam Pro", system-ui, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.wrap { width: min(100% - 3rem, 1560px); margin-inline: auto; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
.navlink { font-size: 16px; font-weight: 500; color: #093F56; text-decoration: none; }
.navlink:hover { opacity: .7; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #093F56; opacity: .62; }
h2.sec { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #093F56; }

/* Not in the mock: the guide's focus ring (§10) and a skip link, both invisible until used */
:where(a, button, [tabindex]):focus-visible { outline: 2px solid #0C84B1; outline-offset: 3px; }
.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; }
.skip { position: absolute; left: -9999px; top: 12px; background: #FFFFFF; color: #093F56; padding: 10px 16px; border-radius: 999px; z-index: 200; }
.skip:focus { left: 12px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.header { background: #EFE6D6; border-bottom: 1px solid #E0D4BE; }
.headrow { display: flex; align-items: center; gap: 22px; padding: 18px 0; flex-wrap: wrap; }
.logo { width: 152px; flex: none; }
.nav-links { display: flex; gap: 32px; margin-inline: auto; }
.lang { display: flex; border: 1.5px solid #D6C7AB; border-radius: 999px; overflow: hidden; font-size: 13px; font-weight: 700; flex: none; }
.lang span, .lang a { padding: 7px 14px; text-decoration: none; color: #4A6A78; }
.lang [aria-current="true"] { background: #093F56; color: #FFFFFF; }
.btn-find { background: #C21568; color: #FFFFFF; font-weight: 600; font-size: 15px; padding: 14px 26px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.btn-list { background: transparent; color: #093F56; border: 1.5px solid #093F56; font-weight: 600; font-size: 15px; padding: 12.5px 24px; border-radius: 999px; text-decoration: none; white-space: nowrap; }

/* ── The Index under sprint 2 (Platform #86; design #86 v4.1 with the shipped-control substitution); Sprint 3 (#87)
   adopts the accepted global baseline (header, menu, type roles, cards, footer) on Browse (:is(body.ipage, body.bpage)) ─────────
   Every rule here is scoped to body.ipage, the one page the sprint redesigns; every other route keeps its
   accepted appearance, and the base page (no body class) renders pixel-identically (Check C). Type roles follow
   index-type-0.1, a PROPOSED version pending Owner acceptance (no site-wide rollout): display 'Be Vietnam Pro' 800,
   hero 54px EN / 50px VI centred, section h2 26px, card title 19px 600, price 19px 800 tabular, nav 14.5px 500
   pill, language chip 12.5px 600, body 16px / 1.6, fact pill 12.5px, eyebrow 11px caps, credit 11px, hairline
   1px #EDE4D5, interactive border 1.5px #E0D4BE, radii pill 999 / input 12 / card 16 / panel 24, one shadow on
   the stuck header only, action #C21568, chrome #093F56 at rest and stuck, focus ring #0C84B1 (white on navy). */
/* package 1: navy at rest and stuck, a constant wordmark (the artwork box cropped by CSS, never scaled), sticky at every width */
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .header { position: sticky; top: 0; z-index: 3; background: #093F56; border-bottom: 1px solid #0A4B66; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .header.scrolled { box-shadow: 0 8px 24px -16px rgba(9,63,86,.6); }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .headrow { gap: 18px; padding: 13px 0; flex-wrap: nowrap; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .logo { width: 152px; height: 38px; overflow: hidden; position: relative; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .logo svg { position: absolute; width: 204.8px; height: 137.9px; left: -26.7px; top: -50px; max-width: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .nav-links { gap: 4px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .navlink { color: #EAF2F5; font-size: 14.5px; font-weight: 500; padding: 7px 12px; border-radius: 999px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .navlink:hover, :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .navlink[aria-current="page"] { background: rgba(255,255,255,.12); color: #FFFFFF; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .navlink[aria-current="page"] { font-weight: 600; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .lang { border-color: #7FA3B4; font-size: 12.5px; font-weight: 600; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .lang span, :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .lang a { color: #EAF2F5; padding: 5px 11px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .lang [aria-current="true"] { background: #FFFFFF; color: #093F56; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .btn-find { font-size: 14.5px; padding: 11px 20px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .btn-list { color: #FFFFFF; border-color: #FFFFFF; font-size: 14.5px; padding: 9.5px 18px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .header :where(a, button, summary):focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu { display: none; margin-left: auto; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu > summary { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255,255,255,.35); color: #FFFFFF; cursor: pointer; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu > summary::-webkit-details-marker { display: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu > summary svg { width: 20px; height: 20px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu:not([open]) .ico-close, :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu[open] .ico-menu { display: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu-links { position: absolute; left: 0; right: 0; top: 100%; background: #093F56; border-top: 1px solid #0A4B66; border-bottom: 1px solid #0A4B66; padding: 8px 16px 14px; display: grid; gap: 2px; box-shadow: 0 16px 28px -18px rgba(9,63,86,.7); }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu-links a { display: block; min-height: 44px; padding: 11px 12px; border-radius: 12px; color: #EAF2F5; font-size: 16px; font-weight: 500; text-decoration: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu-links a[aria-current="page"], :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu-links a:hover { background: rgba(255,255,255,.12); color: #FFFFFF; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) :is(#homes, #main, #about-data, #neighbourhoods) { scroll-margin-top: 76px; }
/* package 2: type, colour and rhythm on the index (the packet's page composition: cream page ground, sand explainer band
   with a navy heading, and the proposed editorial face, Lora, for the hero line and the two ledes only; the Owner's
   typography acceptance is pending, so nothing here leaves the index) */
:is(body.ipage, body.bpage) { font-size: 16px; line-height: 1.6; }
:is(body.ipage, body.bpage) h2.sec { font-size: 26px; line-height: 1.12; letter-spacing: -0.025em; font-weight: 700; color: #093F56; }
:is(body.ipage, body.bpage) .eyebrow { font-size: 11px; line-height: 1.4; letter-spacing: .14em; }
body.ipage .hero-p { font-family: Lora, Georgia, serif; font-size: 20px; line-height: 1.5; opacity: 1; }
body.ipage .homes { padding: 48px 0 12px; gap: 22px; }
body.ipage .band { background: #EFE6D6; margin-top: 44px; }
body.ipage .band .wrap { padding: 44px 0; gap: 16px; }
body.ipage .band h2.sec { color: #093F56; }
body.ipage .band .lede, body.ipage .hoods .lede { font-family: Lora, Georgia, serif; font-size: 19px; line-height: 1.5; color: #3F6274; opacity: 1; }
body.ipage .panel { border: 1px solid #EDE4D5; }
body.ipage .hoods { padding: 56px 0 12px; gap: 14px; }
/* package 3 and 6: the hero photograph under the navy scrim, its credit in normal flow, the doors and the primary action */
body.ipage .herowrap { margin-top: 20px; }
body.ipage .hero { border-radius: 24px; min-height: 0; }
body.ipage .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.ipage .hero .ph-label { display: none; }
body.ipage .hero.imgfail .hero-img { display: none; }
body.ipage .hero.imgfail .ph-label { display: flex; }
body.ipage .hero-inner { gap: 16px; padding: 72px 32px 88px; }
body.ipage .hero-h1 { font-size: 54px; line-height: 1.04; letter-spacing: -0.035em; font-weight: 800; }
html[lang="vi"] body.ipage .hero-h1 { font-size: 50px; line-height: 1.14; }
body.ipage .hero-p { font-size: 17px; }
body.ipage .btn-hero { font-size: 16px; padding: 15px 36px; margin-top: 4px; }
:is(body.ipage, body.bpage) .credit { font-size: 11px; line-height: 1.5; color: #4A6A78; }
:is(body.ipage, body.bpage) .credit a { color: inherit; }
:is(body.ipage, body.bpage) .credit .cnote { font-weight: 600; color: #3F6274; }
body.ipage .hero-credit { margin: 10px 12px 0; }
body.ipage .herowrap:has(.hero.imgfail) .hero-credit { display: none; }
body.ipage .btn-hero-m { display: none; }
body.ipage .searchbar { margin-top: -34px; }
body.ipage .sfield span { font-size: 15px; }
/* package 5 and 6: the card, its photograph and credit, the location badge, independent disclosures */
:is(body.ipage, body.bpage) .g3 { align-items: start; }
:is(body.ipage, body.bpage) .card { border-radius: 16px; }
:is(body.ipage, body.bpage) .media .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:is(body.ipage, body.bpage) .media .credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 5px 16px; color: #FFFFFF; background: rgba(9,63,86,0.72); font-size: 11px; line-height: 1.45; }
:is(body.ipage, body.bpage) .media .credit .cnote, :is(body.ipage, body.bpage) .media .credit a { color: #FFFFFF; }
:is(body.ipage, body.bpage) .media .ph-label { display: none; }
:is(body.ipage, body.bpage) .media.imgfail .cimg, :is(body.ipage, body.bpage) .media.imgfail .credit { display: none; }
:is(body.ipage, body.bpage) .media.imgfail .ph-label { display: flex; }
:is(body.ipage, body.bpage) .badge { z-index: 1; max-width: calc(100% - 32px); flex-wrap: wrap; gap: 4px 6px; line-height: 1.3; padding: 6px 11px; font-size: 12px; }
:is(body.ipage, body.bpage) .badge .locq { font-weight: 500; color: #3F6274; }
:is(body.ipage, body.bpage) .cbody { padding: 16px 18px 18px; gap: 8px; }
:is(body.ipage, body.bpage) .title { font-size: 19px; }
:is(body.ipage, body.bpage) .facts .f, :is(body.ipage, body.bpage) .unknown { font-size: 12.5px; }
:is(body.ipage, body.bpage) .price { font-size: 19px; font-variant-numeric: tabular-nums; }
:is(body.ipage, body.bpage) .prow { border-top-color: #EDE4D5; }
body.ipage .homes-tools .pgbtn:disabled { border-style: dashed; border-color: #7B929D; color: #7B929D; }
/* package 8: the explainer's static illustration: three posts, one home, each offer kept separate */
body.ipage .xpanel { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.3fr); gap: 22px; align-items: center; padding: 30px 30px 28px; border-radius: 24px; }
body.ipage .xlabel { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7B929D; margin-bottom: 10px; }
body.ipage .xhome .xlabel { color: #0B84B1; }
body.ipage .xposts { display: flex; flex-direction: column; gap: 10px; }
body.ipage .xpost { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 10px; align-items: center; background: #FFFFFF; border: 1px solid #E4DACA; border-radius: 12px; padding: 12px 14px; transform: rotate(-1.5deg); }
body.ipage .xpost:nth-child(3) { transform: rotate(1.5deg); }
body.ipage .xpost:nth-child(4) { transform: rotate(-.8deg); }
body.ipage .xdot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #0B84B1; flex: 0 0 auto; }
body.ipage .xdot.ag { background: #E52A79; }
body.ipage .xdot.ow { background: #AAC22C; }
body.ipage .xwho { font-size: 13px; font-weight: 600; color: #43616F; }
body.ipage .xline { grid-column: 2; height: 7px; border-radius: 4px; background: #EFE7DA; width: 78%; }
body.ipage .xline.s { width: 52%; }
body.ipage .xflow svg { width: 40px; height: 24px; display: block; }
body.ipage .xhome { border: 2px solid #0B84B1; border-radius: 16px; padding: 20px 22px; }
body.ipage .xprice { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: #093F56; font-variant-numeric: tabular-nums; }
body.ipage .xprice .unit { font-size: 13px; font-weight: 500; color: #4A6A78; }
body.ipage .xprice .xsub { font-size: 12px; font-weight: 500; color: #7B929D; }
body.ipage .xtitle { margin-top: 4px; font-size: 14px; font-weight: 600; color: #093F56; }
body.ipage .xpills { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; }
body.ipage .xpills span { font-size: 12px; padding: 4px 9px; border-radius: 6px; background: #FBF7F0; border: 1px solid #EFE7DA; color: #43616F; }
body.ipage .xpills .unknown { background: #FFFFFF; border: 1px dashed #C9D6DC; color: #7B929D; }
body.ipage .xoffers { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid #EFE7DA; display: flex; flex-direction: column; gap: 9px; }
body.ipage .xoffers li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #43616F; }
body.ipage .xoffers .xwho { font-weight: 500; }
body.ipage .xoffers .xage { margin-left: auto; font-size: 12px; color: #7B929D; white-space: nowrap; }
/* package 7: the index footer, prototype-inspired: brand column, the two link groups, the credits row */
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .foot { margin-top: 64px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .foot .wrap { padding: 48px 0 36px; gap: 28px 60px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footabout .p1 { font-size: 14px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footcols { gap: 48px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup { display: flex; flex-direction: column; gap: 11px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup > summary { list-style: none; cursor: default; pointer-events: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup > summary::-webkit-details-marker { display: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup h3 { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #F3AC3A; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footlinks { display: grid; gap: 9px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footlinks a { font-size: 14px; color: #E2EAED; text-decoration: none; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footlinks a:hover { text-decoration: underline; text-underline-offset: 3px; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footbottom { flex-basis: 100%; margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); display: flex; gap: 8px 24px; justify-content: space-between; flex-wrap: wrap; font-size: 12.5px; line-height: 1.5; color: #A9C4D0; }
:is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footbottom a { color: inherit; }
/* package 4: the three doors reveal subsets of the one sheet (the scoped mode is set by the engine on the index only) */
.fsheet[data-region="beds"] #fs-areas, .fsheet[data-region="beds"] .fmap, .fsheet[data-region="beds"] #fs-budget, .fsheet[data-region="beds"] #notes, .fsheet[data-region="beds"] .areas-form,
.fsheet[data-region="budget"] #fs-areas, .fsheet[data-region="budget"] .fmap, .fsheet[data-region="budget"] #fs-beds, .fsheet[data-region="budget"] #notes, .fsheet[data-region="budget"] .areas-form { display: none; }
.fsheet[data-region="beds"] .fgrid, .fsheet[data-region="budget"] .fgrid { grid-template-columns: minmax(0, 1fr); }
.fsheet[data-region="beds"] .fcards, .fsheet[data-region="budget"] .fcards { max-width: 520px; }
/* the mobile arrangement of packages 1 and 3: the compact bar with the menu, the doors then the action, one column */
@media (max-width: 960px) {
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .headrow { padding: 9px 0; gap: 12px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .logo { width: 120px; height: 30px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .logo svg { width: 161.7px; height: 108.9px; left: -21.1px; top: -39.5px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .btn-find, :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .btn-list { display: none; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .lang { margin-left: auto; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .imenu { display: block; margin-left: 0; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .header { position: sticky; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) :is(#homes, #main, #about-data, #neighbourhoods) { scroll-margin-top: 60px; }
  body.ipage .herowrap { margin-top: 12px; }
  body.ipage .hero { border-radius: 18px; }
  body.ipage .hero-inner { padding: 44px 20px 60px; gap: 12px; }
  body.ipage .hero-h1, html[lang="vi"] body.ipage .hero-h1 { font-size: 34px !important; line-height: 1.1; }
  body.ipage .hero-p { font-size: 15px; }
  body.ipage .hero .btn-hero { display: none; }
  body.ipage .btn-hero-m { display: flex; align-items: center; justify-content: center; margin: 14px 0 0; min-height: 52px; padding: 0 24px; }
  body.ipage .searchbar { margin-top: -30px; padding: 10px 14px !important; gap: 0; border-radius: 18px !important; }
  body.ipage .sfield { padding: 10px 0; }
  body.ipage .sfield:last-of-type { border-bottom: 0; }
  body.ipage .sgo { display: none; }
  body.ipage .homes { padding-top: 36px; }
  :is(body.ipage, body.bpage) h2.sec { font-size: 22px; line-height: 1.14; }
  body.ipage .hero-p { font-size: 14.5px; }
  body.ipage .band .lede, body.ipage .hoods .lede { font-size: 15px; line-height: 1.55; }
  html[lang="vi"] body.ipage .band .lede, html[lang="vi"] body.ipage .hoods .lede { font-size: 14.5px; line-height: 1.65; }
  body.ipage .band .wrap { padding: 22px 0; gap: 14px; }
  body.ipage .xpanel { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px 18px; }
  body.ipage .xflow svg { transform: rotate(90deg); margin: 0 auto; }
  body.ipage .xoffers .xwho { font-size: 12.5px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .foot .wrap { padding: 36px 0 28px; gap: 22px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footcols { flex-direction: column; gap: 6px; width: 100%; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup { gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup > summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid #A9C4D0; border-bottom: 1.5px solid #A9C4D0; transform: rotate(45deg); transition: transform .18s ease; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup[open] > summary::after { transform: rotate(225deg); }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footgroup:not([open]) .footlinks { display: none; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footlinks { padding: 0 0 14px; gap: 2px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footlinks a { display: block; min-height: 44px; padding: 11px 0; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .footbottom { flex-direction: column; gap: 6px; }
}
@media (max-width: 600px) {
  :is(body.ipage, body.bpage) .g3 { gap: 18px; }
  :is(body.ipage, body.bpage) .badge { max-width: calc(100% - 24px); left: 12px; top: 12px; }
}
@media (prefers-reduced-motion: reduce) { body.ipage .footgroup > summary::after { transition: none; } }

/* Sprint 3 (#87): the Browse card geometry. Every collapsed card in a grid row shares the row's height (grid stretch);
   the title row reserves two lines with the title left and the advertiser count right on the same row; the facts and
   the price row reserve their zones so variable content does not stagger the grid; the evidence disclosure opens as a
   popover over the card's foot, so opening one never enlarges a neighbour. The raw query chip is gone. */
body.bpage .bresults .g3 { align-items: stretch; }
body.bpage .card { overflow: visible; }
body.bpage .media { overflow: hidden; border-radius: 16px 16px 0 0; }
body.bpage .cbody { gap: 8px; }
body.bpage .trow { display: grid; grid-template-columns: minmax(58%, 1fr) auto; align-items: baseline; gap: 2px 10px; min-height: 48px; align-content: start; }   /* the count keeps the title's first line, right-aligned; when the row is tight the count wraps to two short lines and the title keeps at least 58% of the card */
body.bpage .title { min-width: 0; }
body.bpage .offers { justify-self: end; text-align: right; white-space: normal; line-height: 1.3; font-size: 12.5px; }
body.bpage .bresults .g3.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1279px) { body.bpage .bresults .g3.g4, body.bpage .bresults .g3.g3-few, body.bpage .bresults .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }   /* four columns only from 1280: below it a four-column card cannot hold a range and its date on one row without the amount running over */
@media (max-width: 860px) { body.bpage .bresults .g3.g4, body.bpage .bresults .g3.g3-few, body.bpage .bresults .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.bpage .facts { min-height: 84px; align-content: flex-start; gap: 8px 12px; }                 /* three rows of facts or marked gaps */
body.bpage .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 4px 12px; min-height: 76px; }   /* a range with its qualifier, or an approximate wording */
body.bpage .price { line-height: 1.25; }
body.bpage .price .unit { display: block; margin-top: 2px; }                                   /* v1.11 package 1: the unit and its qualifier on their own line, so neither bound nor qualifier is pushed out */
body.bpage .rpager .pgbtn:disabled { border-style: dashed; border-color: #7B929D; color: #7B929D; }   /* v1.11 package 6: a disabled pager not by colour alone (the Index treatment) */
/* #87 package 5: the applied choices as readable, removable labels under the bar (v1.11: a 44px chip naming the facet in
   words with its own close control; "Clear the filter" at the end of the row, plainly not a chip) */
body.bpage .flabels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
body.bpage .fleyebrow { flex-basis: 100%; color: #3F6274; font-weight: 700; margin-bottom: -2px; }
body.bpage .flabel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px 0 15px; border-radius: 999px; background: #FFFFFF; border: 1px solid #093F56; color: #093F56; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
body.bpage .flabel .flq { font-size: 12px; font-weight: 500; color: #3F6274; }
body.bpage .flabel .flx { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: #F4F0E8; color: #4A6A78; flex: none; }
body.bpage .flabel .flx svg { width: 12px; height: 12px; }
body.bpage .flabel:hover .flx { background: #E9E2D5; color: #093F56; }
body.bpage .flabel:focus-visible, body.bpage .flclear:focus-visible { outline: 2px solid #0C84B1; outline-offset: 2px; }
body.bpage .flclear { min-height: 44px; padding: 0 6px; margin-left: 6px; border: 0; background: transparent; color: #093F56; font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* #87 package 2 and the price truth table: the approximate wording is the post's own words, quoted, in the editorial face;
   a missing date is the dashed "not stated" chip; every other price state keeps the shared chip */
body.bpage .price .unknown.approx { display: block; border: 0; padding: 0; font-family: Lora, Georgia, serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.45; color: #093F56; overflow-wrap: anywhere; }
body.bpage .price .unknown.approx q { quotes: "\201C" "\201D"; }
body.bpage .posted .unknown { display: inline-block; font-size: 12px; border-radius: 999px; padding: 3px 11px; white-space: normal; }
@media (max-width: 600px) {   /* v1.11 phone frame: the count leads, then the applied labels, then the sort row, then the results */
  body.bpage .bresults { display: flex; flex-direction: column; }
  body.bpage .bresults .rhead { order: 1; margin-top: 0; }
  body.bpage .bresults .flabels { order: 2; }
  body.bpage .bresults .rtop { order: 3; margin-top: 18px; }
  body.bpage .bresults .g3 { order: 4; margin-top: 24px; }
  body.bpage .bresults .rpager { order: 5; }
  body.bpage .bresults .bcard { order: 6; }
}
body.bpage .posted { text-align: right; white-space: nowrap; }
body.bpage .evrow { position: relative; padding-top: 0; }
body.bpage .ev { position: static; }
body.bpage .ev p { position: absolute; left: 0; right: 0; top: 100%; z-index: 3; margin-top: 2px; padding: 10px 12px 10px; background: #FFFFFF; border: 1px solid #DCD2C0; border-radius: 10px; box-shadow: 0 12px 28px -8px rgba(9,63,86,.35); }
body.bpage .card:has(.ev[open]) { z-index: 4; }
body.bpage .urlchip { display: none; }
@media (max-width: 600px) {
  body.bpage .bresults .g3.g4, body.bpage .bresults .g3.g3-few, body.bpage .bresults .g3 { grid-template-columns: 1fr; gap: 16px; }
  body.bpage .title { font-size: 17px; }
  body.bpage .trow { min-height: 44px; }
  body.bpage .facts { min-height: 58px; }
  body.bpage .prow { min-height: 54px; }
}
/* the accepted header between the phone menu and a wide desktop: the row must not wrap */
@media (min-width: 961px) and (max-width: 1140px) {
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .btn-list { display: none; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .nav-links { gap: 2px; }
  :is(body.ipage, body.bpage, body.dpage, body.zero-launch) .navlink { padding: 7px 9px; }
}
/* ── Hero ──────────────────────────────────────────────────────────────── */
.herowrap { margin-top: 30px; }
.hero { position: relative; border-radius: 34px; overflow: hidden; min-height: 560px; display: flex; align-items: center; justify-content: center; }
/* The mock's photograph is not cleared for reuse: the image slot is a placeholder field under the mock's own gradient */
.hero .ph { position: absolute; inset: 0; width: 100%; height: 100%; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(243,172,57,.22) 14px 28px); }
.hero .scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(9,63,86,0.42) 0%, rgba(9,63,86,0.58) 55%, rgba(9,63,86,0.72) 100%); }
.hero-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 88px 32px 104px; }
.hero-h1 { font-size: 78px; line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; text-align: center; color: #FFFFFF; max-width: 16ch; }
.hero-p { font-size: 18px; line-height: 1.5; text-align: center; color: #FFFFFF; opacity: 0.92; max-width: 52ch; }
.btn-hero { background: #C21568; color: #FFFFFF; font-weight: 700; font-size: 17px; padding: 18px 44px; border-radius: 999px; text-decoration: none; margin-top: 6px; }
.ph-label { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; padding: 6px 16px; color: #FFFFFF; background: rgba(9,63,86,0.72); }
.ph-label svg { width: 14px; height: 14px; }

/* ── Search bar ────────────────────────────────────────────────────────── */
.searchbar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr auto; gap: 8px; align-items: center; background: #FFFFFF; border-radius: 999px; box-shadow: 0 22px 50px -26px rgba(9,63,86,0.6); padding: 12px 12px 12px 34px; margin: -46px auto 0; position: relative; z-index: 2; width: min(100%, 1180px); }
.sfield { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-right: 18px; border-right: 1px solid #EFE7DA; }
.sfield span { font-size: 16px; color: #093F56; font-weight: 500; }
.sfield svg { width: 14px; height: 14px; }
.shint { font-size: 16px; color: #4A6A78; padding-left: 6px; }
.sgo { width: 58px; height: 58px; border-radius: 50%; background: #093F56; display: flex; align-items: center; justify-content: center; justify-self: end; }
.sgo svg { width: 21px; height: 21px; }
/* Not in the mock: the truthfulness note for a static candidate */
.note { margin-top: 14px; font-size: 13px; line-height: 1.5; color: #093F56; opacity: .85; width: min(100%, 1180px); margin-inline: auto; }

/* ── Homes ─────────────────────────────────────────────────────────────── */
.homes { padding: 70px 0 20px; display: flex; flex-direction: column; gap: 30px; }
.homes-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 14px; }
.sort { font-size: 15px; color: #093F56; opacity: .7; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.card { display: flex; flex-direction: column; background: #FFFFFF; border-radius: 22px; overflow: hidden; }
.media { position: relative; }
.media .ph { width: 100%; aspect-ratio: 16 / 11; display: block; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 9px, rgba(243,172,57,.22) 9px 18px); }
.media .ph-label { top: auto; bottom: 0; font-size: 11px; padding: 5px 16px; }
.badge { position: absolute; left: 16px; top: 16px; display: inline-flex; align-items: center; gap: 6px; background: #FFFFFF; color: #093F56; font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px; }
.badge svg { width: 13px; height: 13px; }
.cbody { display: flex; flex-direction: column; gap: 9px; padding: 18px 20px 20px; flex: 1; }
.loc { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #43616F; }
.loc svg { width: 15px; height: 15px; }
.trow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.title { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #093F56; }
.offers { font-size: 13px; font-weight: 600; color: #0B84B1; white-space: nowrap; }
.facts { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding-top: 2px; }
.facts .f { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #43616F; }
.facts .f svg { width: 17px; height: 17px; }
.facts .sep { width: 1px; height: 14px; background: #E4DACA; }
.unknown { font-size: 12px; padding: 3px 9px; border: 1px dashed #C9D6DC; border-radius: 4px; color: #4A6A78; }
.prow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 12px; border-top: 1px solid #EFE7DA; }
.price { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: #093F56; }
.price .unit { font-size: 12px; font-weight: 500; color: #4A6A78; }
.posted { font-size: 12px; color: #4A6A78; }

/* ── What Localist does ────────────────────────────────────────────────── */
.band { background: #093F56; margin-top: 88px; }
.band .wrap { padding: 84px 0 88px; display: flex; flex-direction: column; gap: 18px; }
.band h2.sec { max-width: 18ch; color: #FFFFFF; }
.band .lede { font-size: 19px; line-height: 1.6; color: #A9C4D0; max-width: 70ch; }
.panel { background: #FFFFFF; border-radius: 26px; padding: 34px 34px 30px; margin-top: 22px; }
.panel svg { width: 100%; height: auto; display: block; }

/* ── Neighbourhoods ────────────────────────────────────────────────────── */
.hoods { padding: 84px 0 20px; display: flex; flex-direction: column; gap: 20px; }
.hoods h2.sec { max-width: 26ch; }
.hoods .lede { font-size: 19px; line-height: 1.55; color: #093F56; opacity: .85; max-width: 64ch; }
.hoods .hoods-cta { margin-top: 4px; }
.g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 14px; }
.hood { display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; border-radius: 20px; padding: 24px; }
.hood h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.02em; color: #093F56; }
.hood p { font-size: 15px; line-height: 1.55; color: #43616F; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.tag { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: #FBF7F0; border: 1px solid #EFE7DA; color: #43616F; }
.tag.flood { background: #FBEFD8; border-color: #F3AC3A; color: #8A5A12; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.foot { background: #093F56; margin-top: 88px; }
.foot .wrap { padding: 56px 0 52px; display: flex; flex-wrap: wrap; gap: 32px 60px; justify-content: space-between; }
.footabout { display: flex; flex-direction: column; gap: 16px; max-width: 46ch; }
.footabout .logo { width: 150px; }
.footabout .p1 { font-size: 15px; line-height: 1.6; color: #A9C4D0; }
.footabout .p2 { font-size: 14px; color: #7FA3B4; }
.footcols { display: flex; gap: 56px; flex-wrap: wrap; }
.footcol { display: flex; flex-direction: column; gap: 11px; }
.footcol h3 { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #7FA3B4; }
.footcol a { font-size: 15px; color: #EAF2F5; text-decoration: none; }

/* ── The mock's one breakpoint ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .nav-links { display: none !important; }
  .hero-h1 { font-size: 42px !important; }
  .searchbar { grid-template-columns: 1fr !important; border-radius: 24px !important; padding: 16px !important; }
  .sfield { border-right: 0; padding-right: 0; padding: 12px 0; border-bottom: 1px solid #EFE7DA; }
  .sgo { justify-self: start; }
  .g3 { grid-template-columns: 1fr !important; }
  .g4 { grid-template-columns: 1fr 1fr !important; }
  h2.sec { font-size: 30px; }
}

/* ── Stage 1 renderer additions (localist-database#221) ────────────────────
   Additive only. Every rule below targets an element the Kerub page does
   not contain (.evrow, .ev, .price .unknown) or is measured inert on it
   (.title overflow-wrap). Check C (tools/capture.py) proves the base page
   renders pixel-identically with this stylesheet at every capture size;
   flex-wrap rules for .trow and .prow were tried and rejected by that check
   because they re-flow the base cards at 360px. */
.title { overflow-wrap: anywhere; }                 /* V3: an unbreakable label wraps instead of overflowing */
.price .unknown { display: inline-block; font-weight: 500; letter-spacing: 0; }   /* 17.6: unpriced states use the mock's dashed chip */
.evrow { padding-top: 4px; }                        /* 17.8: evidence label beneath freshness */
.ev summary { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 12px; font-weight: 600; color: #43616F; cursor: pointer; }
.ev summary::after { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid #C9D6DC; color: #4A6A78; font-weight: 500; }
.ev[open] summary::after { content: "–"; }
.ev p { font-size: 12px; line-height: 1.5; color: #43616F; padding: 0 0 8px; }

/* ── Card-to-detail links (Platform #13) ───────────────────────────────────
   Additive. The card title is a link whose target area is stretched over the
   whole card (Brand System: one tap target); the evidence disclosure stays
   above it. No rule here touches a base-page pixel: .title a does not exist on
   the base page, and position: relative with no offset moves nothing. */
.card { position: relative; }
.title a { color: inherit; text-decoration: none; }
.title a::after { content: ""; position: absolute; inset: 0; }
.title a:focus-visible { outline: none; }
.title a:focus-visible::after { outline: 2px solid #0C84B1; outline-offset: 3px; border-radius: 22px; }
.evrow { position: relative; z-index: 1; }

/* ── Property detail page (Platform #13) ───────────────────────────────────
   Kerub has no detail page, so the Brand System governs here (Platform #9):
   the #F6F1E7 page ground, white surfaces at 6px, 3px bordered pills, ink
   ladder #093F56 / #3F6274 / #4A6A78, product rhythm, Be Vietnam Pro
   throughout (no prose long enough for Lora). Every rule is scoped to
   body.dpage; the shared shell is unchanged. */
body.dpage { background: #F6F1E7; }
body.dpage .foot { margin-top: 48px; }
.dwrap { width: min(100% - 2rem, 720px); margin-inline: auto; padding: 24px 0 0; display: flex; flex-direction: column; gap: 24px; }
.dnote { margin-top: 0; width: 100%; font-size: 14px; line-height: 1.5; color: #3F6274; opacity: 1; }
.dback a { font-size: 14px; line-height: 1.5; font-weight: 600; color: #0A5C7E; text-decoration: none; display: inline-block; min-height: 44px; padding: 10px 0; }
.dback a:hover { text-decoration: underline; }
.dmedia { position: relative; aspect-ratio: 16 / 11; border-radius: 6px; overflow: hidden; background: #FBE7C6; }
.dmedia .ph { position: absolute; inset: 0; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(168,109,10,.12) 14px 28px); }
.dmedia .ph-label { top: auto; bottom: 0; border-radius: 0; }
/* Platform #86 package 6, the accepted narrow Detail exception: the matching illustrative photograph in the media box,
   cropped to it, its linked credit at the foot; on failure the image and credit hide and the placeholder caption shows.
   Nothing else on Detail changes. */
.dmedia .cimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dmedia .credit { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0; padding: 6px 16px; color: #FFFFFF; background: rgba(9,63,86,0.72); font-size: 11px; line-height: 1.45; }
.dmedia .credit a, .dmedia .credit .cnote { color: #FFFFFF; }
.dmedia .credit .cnote { font-weight: 600; }
.dmedia .cimg ~ .ph-label { display: none; }
.dmedia.imgfail .cimg, .dmedia.imgfail .credit { display: none; }
.dmedia.imgfail .ph-label { display: flex; }
.dhead { display: flex; flex-direction: column; gap: 12px; }
.dhead .loc { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: #3F6274; }
.dhead .loc svg { width: 15px; height: 15px; }
.dtitle { font-size: 32px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: #093F56; overflow-wrap: anywhere; }
/* the R6 fact row (Platform #35): stated facts solid, gaps dashed, icons from the shared sheet */
.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pills li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 1.4; padding: 4px 9px; border-radius: 3px; }
.pills li svg { width: 15px; height: 15px; flex: 0 0 auto; }
.pills .pill { color: #093F56; border: 1px solid #093F56; }
.pills .unknown { color: #4A6A78; border: 1px dashed #6E8894; display: inline-flex; letter-spacing: 0; }
.dpage .unknown { font-size: 13px; line-height: 1.4; color: #4A6A78; border: 1px dashed #6E8894; border-radius: 3px; padding: 2px 8px; display: inline-block; letter-spacing: 0; }
.dhead .gaps { font-size: 13px; line-height: 1.5; color: #4A6A78; }
.dsec { background: #FFFFFF; border-radius: 6px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.dsec h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: #093F56; }
.dsec .lede { font-size: 15px; line-height: 1.6; color: #3F6274; }
/* the price block */
.prow2 { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid #E8E0D2; }
.dprice-block .plabel { font-size: 13px; line-height: 1.4; font-weight: 600; color: #4A6A78; margin-bottom: 4px; letter-spacing: 0; }
.dprice { display: block; font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -0.02em; color: #093F56; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dprice .unit { font-size: 14px; font-weight: 500; letter-spacing: 0; color: #4A6A78; }
.dprice .unknown { font-size: 14px; font-weight: 500; }
.pmeta { text-align: right; }
.pmeta .posts { display: flex; align-items: center; gap: 7px; justify-content: flex-end; font-size: 14px; color: #4A6A78; }
.pmeta .posts svg { width: 15px; height: 15px; }
.pmeta .first { margin-top: 2px; font-size: 14px; font-weight: 600; color: #093F56; }
.dprice-block .lede { margin-top: 2px; }
/* who posted this: one row per post, the link contract (Platform #66) */
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.post { border: 1px solid #E8E0D2; border-radius: 6px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #FFFFFF; }
.post .prow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
.post .pname { font-size: 16px; font-weight: 700; line-height: 1.35; color: #093F56; }
.post .tier { font-size: 12px; font-weight: 600; color: #093F56; border: 1px solid #093F56; border-radius: 3px; padding: 1px 7px; }
.post .pprice { margin-left: auto; font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: #093F56; font-variant-numeric: tabular-nums; }
.post .pwho { font-size: 14px; line-height: 1.5; color: #3F6274; }
.post .pact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.post .pbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 5px; background: #C21568; color: #FFFFFF; font-size: 14px; font-weight: 700; text-decoration: none; }
.post .pbtn:hover { background: #A81158; }
.post .plink { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #0A5C7E; text-decoration: underline; text-underline-offset: 3px; }
.post .pna { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px dashed #B8AA92; border-radius: 5px; font-size: 13px; font-weight: 600; color: #6B5B3E; }
.pfoot { margin-top: 6px; padding-top: 14px; border-top: 1px solid #E8E0D2; font-size: 13px; line-height: 1.6; color: #3F6274; }
/* what is known, and how */
.krows { display: flex; flex-direction: column; gap: 12px; }
.krow { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.kpill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; border: 1px solid #093F56; color: #093F56; font-size: 13px; line-height: 1.4; font-weight: 600; padding: 3px 9px; border-radius: 3px; }
.kpill svg { width: 14px; height: 14px; }
.kpill.dashed { border-style: dashed; border-color: #6E8894; color: #4A6A78; }
.kbody { font-size: 15px; line-height: 1.6; color: #3F6274; }
.closing { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.55; color: #3F6274; }
/* Where this home is (Platform #28, PR 3, panel R6): the area map, no pin */
.dloc .dlede { font-size: 16px; line-height: 1.5; color: #093F56; }
.dloc .dmapwrap { margin-top: 2px; }
.dloc svg.map { width: 100%; height: auto; background: #F4EEE2; border: 1px solid #E4D8C2; border-radius: 8px; }
.dloc p.dbody { font-size: 15px; line-height: 1.6; color: #3F6274; }
.dloc p.dbody strong { color: #093F56; }
.dloc .dattr { font-size: 12px; line-height: 1.5; color: #4A6A78; }
.dloc .dattr a { color: inherit; }
@media (max-width: 600px) {
  .dtitle { font-size: 24px; }
  .dsec { padding: 16px; }
  .dprice { font-size: 22px; }
  .post .pprice { margin-left: 0; flex-basis: 100%; }
  .post .pact > * { flex: 1 1 100%; }
  .pmeta { text-align: left; }
  .pmeta .posts { justify-content: flex-start; }
}

/* ── Supporting pages and not-found documents (Platform #14) ─────────────────
   Prose surfaces on the Brand System ground; Lora carries the reading text
   (the type-role rule: editorial and long-form), Be Vietnam Pro the headings
   and controls. Scoped to body.ppage; the shared shell is unchanged. */
body.ppage { background: #F6F1E7; }
body.ppage .foot { margin-top: 64px; }
.pwrap { width: min(100% - 2rem, 720px); margin-inline: auto; padding: 32px 0 0; display: flex; flex-direction: column; gap: 32px; }
.ptitle { font-size: 32px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: #093F56; overflow-wrap: anywhere; }
.plede { font-family: Lora, Georgia, "Times New Roman", serif; font-size: 19px; line-height: 1.5; color: #3F6274; max-width: 66ch; }
.pnote { font-size: 14px; line-height: 1.5; color: #4A6A78; max-width: 66ch; }
.psec { display: flex; flex-direction: column; gap: 12px; }
.psec h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; color: #093F56; }
.psec p { font-family: Lora, Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; color: #3F6274; max-width: 66ch; }
.psec p.neverlist { color: #093F56; }
.tiers { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.tiers div { display: flex; flex-direction: column; gap: 4px; }
.tiers dt { display: inline-block; align-self: flex-start; font-size: 13px; line-height: 1.4; font-weight: 600; color: #093F56; border: 1px solid #093F56; border-radius: 3px; padding: 2px 8px; }
.tiers dd { margin: 0; font-family: Lora, Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; color: #3F6274; max-width: 66ch; }
.pcta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 8px; }
@media (max-width: 600px) {
  .ptitle { font-size: 24px; }
  .plede { font-size: 17px; }
}

/* ── Neighbourhoods index (Platform #15) ─────────────────────────────────────
   Kerub's neighbourhood card treatment on Kerub's ground, without anchors and
   without editorial: a name and an exact count. Additive; h1.sec and the
   .hoods-index rules match nothing on the base page. */
h1.sec { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; color: #093F56; }
.hoods-index { padding-top: 40px; }
.hoods-index .count-line { font-size: 16px; color: #093F56; opacity: .85; }
/* The #43/#71 MVP (sprint #72): the area list as native disclosures, nested villages, the two absence rows,
   the one overview map under its own class (the sheet's script binds svg.map only), the facet links. */
.hoods-mvp { gap: 26px; }
.hoods-mvp h2 { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; color: #093F56; margin: 0 0 12px; }
.hoods-mvp .note { margin-top: 0; }
.hfind { grid-template-columns: 1fr auto; }
.hmapsec svg.hmap { width: 100%; max-width: 640px; height: auto; display: block; background: #F4EEE2; border: 1px solid #E4D8C2; border-radius: 8px; }
html.js svg.hmap path.ward, html.js svg.hmap .lbl[data-ward] { cursor: pointer; }
svg.hmap path.ward.open { stroke: #093F56; stroke-width: 2.6; }
.hmapsec .hmap-cap, .hmapsec .mapattr { margin-top: 8px; font-size: 13px; line-height: 1.5; color: #4A6A78; max-width: 66ch; }
.hmapsec .mapattr a { color: inherit; }
.hrows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.hrow { background: #FFFFFF; border-radius: 16px; padding: 2px 20px; }
.hd > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; list-style: none; }
.hd > summary::-webkit-details-marker { display: none; }
.hd > summary::after { content: "+"; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #C9D6DC; color: #4A6A78; font-weight: 500; }
.hd[open] > summary::after { content: "–"; }
.hd > summary:focus-visible { outline: 2px solid #0C84B1; outline-offset: 3px; border-radius: 8px; }
.hn { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #093F56; margin: 0; }
.hd > summary .hc { margin-left: auto; }
.hc { font-size: 14px; color: #43616F; white-space: nowrap; }
.hbody { padding: 2px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.hbody h4 { font-size: 14px; font-weight: 700; color: #093F56; margin: 0; }
.hq { margin: 0; padding-left: 1.1em; font-size: 15px; line-height: 1.55; color: #43616F; }
.hq li + li { margin-top: 4px; }
.hbody p, .habs p, .hstart p { font-size: 14px; line-height: 1.55; color: #43616F; margin: 0; max-width: 66ch; }
.hgo { margin-top: 4px; }
.hvill { list-style: none; margin: 0 0 10px; padding: 0 0 0 16px; border-left: 2px solid #EFE7DA; font-size: 15px; color: #43616F; }
.hvill li { min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.hvill a { color: #093F56; font-weight: 600; }
.hvill .locq { color: #4A6A78; }
.habs { background: #FFFFFF; border-radius: 16px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.habs h2 { font-size: 19px; margin: 0; }
.hplaces { margin: 0; padding-left: 1.1em; font-size: 15px; color: #43616F; }
.hchips { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hchips .nohome { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px dashed #C9D6DC; color: #4A6A78; font-size: 14px; }
@media (max-width: 960px) {
  .hfind { grid-template-columns: 1fr; }
  .hd > summary { flex-wrap: wrap; }
}
.hood .hcount { font-size: 15px; line-height: 1.55; color: #43616F; }
@media (max-width: 960px) { h1.sec { font-size: 30px; } }

/* ── Index results header, pager and area line (Platform #28, PR 1, panel P1) ────
   Owner decision B: the index departs from the Kerub composition. The page carries every
   card; the pager script shows three at a time. Without script every card shows and the
   controls stay hidden, so nothing here changes what a reader can reach. */
[hidden] { display: none !important; }
.homes-head.p1 { align-items: center; }
.homes-title { display: flex; flex-direction: column; gap: 6px; }
.range { font-size: 16px; color: #093F56; }
.homes-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pgbtn { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid #093F56; background: #FFFFFF; color: #093F56; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; font: inherit; }
.pgbtn svg { width: 18px; height: 18px; fill: currentColor; }
.pgbtn[data-page="prev"] svg { transform: rotate(180deg); }
.pgbtn:disabled { background: #F4EFE4; cursor: default; }
.btn-browse { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border-radius: 999px; background: #093F56; color: #FFFFFF; font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pager { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dots { display: inline-flex; gap: 6px; }
.dot { display: block; width: 26px; height: 5px; border-radius: 999px; background: #C9D6DC; }
.dot.on { background: #093F56; }
.pline { font-size: 13px; line-height: 1.5; color: #093F56; }
.locq { color: #4A6A78; }

/* ── The filter bar and the filter sheet (Platform #28 P2/R3/A3; Platform #34, Localist 29) ────
   One sheet opens under the filter bar, on the browse page and on the index, over a scrim; its
   footer carries the count and the action. The bar's cells are buttons; the sheet is a plain
   GET form, so without script (html.js absent) its native controls show and nothing here hides
   a home. Values are the package's: the white 22px sheet, the #E7F0E9 / #1C6B4A chip, the
   #093F56 selection outline on the map, the #C21568 action. */
body.bpage .foot { margin-top: 72px; }
.bwrap { padding: 34px 0 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.herowrap { position: relative; }
.filterbar { display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr auto; gap: 8px; align-items: center; background: #FFFFFF; border-radius: 999px; box-shadow: 0 22px 50px -26px rgba(9,63,86,0.6); padding: 12px 12px 12px 34px; width: min(100%, 1400px); margin-inline: auto; }
button.sfield { min-height: 44px; border: 0; border-right: 1px solid #EFE7DA; background: transparent; font: inherit; text-align: left; cursor: pointer; padding: 0 18px 0 0; color: #4A6A78; }
button.sfield span { color: #4A6A78; font-weight: 500; }
button.sfield.set span { color: #093F56; font-weight: 600; }
button.sfield svg { transition: transform .18s ease; }
button.sfield[aria-expanded="true"] svg { transform: rotate(180deg); }
button.sgo { border: 0; cursor: pointer; padding: 0; }
.fcount { font-size: 16px; color: #4A6A78; padding-left: 6px; }
.nsnote, .bwrap .note { width: min(100%, 1400px); margin-top: 0; }
html.sheet-open .searchbar, html.sheet-open .filterbar { position: relative; z-index: 6; }
.fscrim { position: fixed; inset: 0; background: rgba(9,63,86,.34); z-index: 4; }
.fsheet { position: absolute; left: 0; right: 0; top: 100%; margin-top: 12px; z-index: 5; width: min(100%, 1400px); margin-inline: auto; background: #FFFFFF; border-radius: 22px; box-shadow: 0 30px 60px -30px rgba(9,63,86,.7); padding: 24px 26px 0; outline: none; }
.fsheet form { display: flex; flex-direction: column; gap: 18px; }
/* #87 (Owner #86 corrections), on the Index and Browse only — Neighbourhoods keeps the shipped sheet (PR #95 review): the
   panel is bounded to the viewport and scrolls inside; its footer stays in reach; the upper-right cancel; Bedrooms and
   Budget as compact panels under their own door on a desktop (.anchored, placed by script) */
:is(body.ipage, body.bpage) .fsheet { overflow: auto; overscroll-behavior: contain; }
:is(body.ipage, body.bpage) .fsheet .ffoot { position: sticky; bottom: 0; background: #FFFFFF; z-index: 1; margin-bottom: -26px; }
:is(body.ipage, body.bpage) .fclose { position: absolute; top: 12px; right: 12px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #093F56; background: #FFFFFF; color: #093F56; font: inherit; font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
:is(body.ipage, body.bpage) .fclose:focus-visible { outline: 2px solid #0C84B1; outline-offset: 2px; }
:is(body.ipage, body.bpage) .fsheet.anchored { right: auto; }
:is(body.ipage, body.bpage) .fsheet.anchored .fcards { display: contents; }
:is(body.ipage, body.bpage) .fsheet.anchored .fgrid { display: block; }
:is(body.ipage, body.bpage) .fsheet.anchored .fcard { border: 0; padding: 0; }
:is(body.ipage, body.bpage) .fsheet.anchored .ffoot { margin-top: 6px; }
:is(body.ipage, body.bpage) .fsheet.anchored .fhead { padding-right: 52px; }                          /* the summary clears the upper-right cancel */
:is(body.ipage, body.bpage) .fsheet .farea { padding-right: 52px; }                                  /* the field and the chips clear the upper-right cancel */
:is(body.ipage, body.bpage) .bands { height: 124px; }        /* #87 (Owner #86 correction 3): room for the tallest bar, its count and its label under the heading */
.frow { display: flex; gap: 16px 22px; align-items: flex-end; flex-wrap: wrap; }
.farea .afield { flex: 0 1 520px; }
.farea .chips { flex: 1 1 240px; margin-top: 0; padding-bottom: 6px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 22px; align-items: start; }
.fmap svg.map { width: 100%; height: auto; background: #F4EEE2; border: 1px solid #E4D8C2; border-radius: 8px; }
html.js svg.map path.ward, html.js svg.map .lbl[data-ward] { cursor: pointer; }
.fmap .mapattr { margin-top: 8px; font-size: 12px; line-height: 1.5; color: #4A6A78; }
.fmap .mapattr a { color: inherit; }
.fmap .mapabout { margin-top: 2px; font-size: 12px; line-height: 1.5; color: #4A6A78; }
.fmap .mapabout summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 600; color: #093F56; }
.fmap .mapabout summary:focus-visible { outline: 2px solid #0C84B1; outline-offset: 3px; border-radius: 4px; }
.fmap .mapabout p { margin: 0 0 6px; max-width: 66ch; }
.fcards { display: flex; flex-direction: column; gap: 16px; }
.fcard { border: 1px solid #DCD2C0; border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.fhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fhead h2 { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; color: #093F56; }
.fsub { font-size: 13px; color: #4A6A78; }
.bceil { font-size: 15px; font-weight: 700; color: #093F56; }
/* area field, list, chips, notes */
.afield { position: relative; }
.afield label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #093F56; }
.afield input { width: 100%; min-height: 48px; padding: 0 14px; font: inherit; font-size: 16px; color: #093F56; background: #FFFFFF; border: 1px solid #B9A98C; border-radius: 6px; }
.afield input:focus { outline: 2px solid #0C84B1; outline-offset: 2px; }
.alist { position: absolute; left: 0; right: 0; z-index: 5; list-style: none; margin: 6px 0 0; max-height: 250px; overflow: auto; background: #FFFFFF; border: 1px solid #DCD2C0; border-radius: 6px; box-shadow: 0 10px 26px rgba(9,63,86,.14); padding: 6px; }
.arow { display: flex; align-items: baseline; gap: 10px; padding: 9px 11px; border-radius: 5px; cursor: pointer; }
.arow:hover, .arow:focus { background: #F6F1E7; }
.arow .an { flex: 0 0 auto; font-size: 15px; font-weight: 600; color: #093F56; }
.arow .am { flex: 1 1 auto; font-size: 13px; color: #4A6A78; }
.arow .at { flex: 0 0 auto; font-size: 13px; color: #43616F; }
.arow.muted .an { color: #4A6A78; font-weight: 500; }
.arow-none { padding: 12px 11px; font-size: 14px; line-height: 1.5; color: #4A6A78; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 6px 0 12px; border-radius: 999px; background: #E7F0E9; border: 1px solid #1C6B4A; font-size: 14px; color: #093F56; }
.chip .cq { font-size: 12px; color: #3F6274; }
.chip .cx { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 0; border-radius: 999px; background: transparent; color: #1C6B4A; font: inherit; font-size: 15px; cursor: pointer; }
.clearall { min-height: 34px; padding: 0 12px; border: 0; background: transparent; font: inherit; font-size: 14px; color: #0A5C7E; text-decoration: underline; cursor: pointer; }
.anote { background: #FBF3E2; border: 1px solid #E8C98A; border-radius: 6px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.anote p { font-size: 13px; line-height: 1.55; color: #3F6274; }
/* the no-script controls: shown only without script */
html.js .js-off { display: none !important; }
.areas-form { border: 1px solid #DCD2C0; border-radius: 12px; padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: #093F56; }
.areas-form legend { font-weight: 600; padding: 0 6px; }
.areas-form small { color: #4A6A78; }
.fsheet input[type="checkbox"], .fsheet input[type="radio"] { accent-color: #093F56; }
/* bedrooms */
.bedrow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bedopt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 4px; border-radius: 5px; border: 1.5px solid #093F56; color: #093F56; cursor: pointer; text-align: center; position: relative; }
.bedopt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bedbox { font-size: 16px; font-weight: 500; }
.bedn { font-size: 11px; color: #43616F; }
.bedopt.on { background: #093F56; color: #FFFFFF; }
.bedopt.on .bedbox { font-weight: 600; }
.bedopt.on .bedn { color: rgba(255,255,255,.86); }
.bedopt.zero:not(.on) { border-color: #C9D6DC; color: #7B929D; }
.bedopt.zero:not(.on) .bedn { color: #7B929D; }
.bedopt:has(input:focus-visible) { outline: 2px solid #0C84B1; outline-offset: 3px; }
/* budget */
.bands { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.pband { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; cursor: pointer; position: relative; }
.pband input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bandn { font-size: 11px; font-weight: 700; color: #093F56; }
.bandn.empty { color: #7B929D; }
.pband .bar { width: 100%; border-radius: 3px 3px 0 0; background: #093F56; }
.pband .bar.empty { background: #EFE7DA; }
.bandl { font-size: 10px; line-height: 1.3; color: #4A6A78; white-space: nowrap; text-align: center; }
.pband.on .bandl { color: #093F56; font-weight: 700; }
.pband:has(input:focus-visible) { outline: 2px solid #0C84B1; outline-offset: 3px; }
.noceil { font-size: 14px; color: #093F56; }
.keeprow { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; font-weight: 600; color: #093F56; cursor: pointer; }
.keeprow input { width: 18px; height: 18px; margin: 0; }
.keeprow .keepn { font-weight: 400; color: #43616F; }
/* the footer */
.ffoot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 -26px; padding: 16px 26px; border-top: 1px solid #EFE7DA; border-radius: 0 0 22px 22px; }
.fcnt { font-size: 17px; font-weight: 700; color: #093F56; }
.fsum { font-size: 13px; color: #4A6A78; }
.factions { display: flex; align-items: center; gap: 16px; }
.btn-action { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 5px; border: 0; background: #C21568; color: #FFFFFF; font: inherit; font-size: 16px; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-action.small { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; }
.btn-outline { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #093F56; background: transparent; color: #093F56; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
/* results (R3) and the no-results state (A3) */
.bpage .homes { padding-top: 26px; }
.bresults { gap: 0; }
.rtop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sortlbl { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #344B55; }
.sortbtn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; color: #093F56; font-weight: 500; font-size: 14px; text-decoration: none; }
.sortbtn.on { background: #093F56; color: #FFFFFF; font-weight: 600; }
.urlchip { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #FFFFFF; font-size: 13px; color: #43616F; font-family: ui-monospace, Menlo, monospace; overflow-wrap: anywhere; }
.rhead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: 44px; }
.rtitle { display: flex; flex-direction: column; gap: 8px; }
.rcount { font-size: 15px; color: #093F56; }
.bresults .g3 { margin-top: 28px; gap: 22px; }
.bresults .g3.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bresults .g3.g3-few { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bresults .card { position: relative; }
.rpager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.showing { margin-left: 8px; font-size: 14px; color: #093F56; }
.bcard { background: #FFFFFF; border-radius: 22px; padding: 26px 30px; }
.bhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.bhead h2 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: #093F56; }
.bnote { font-size: 15px; line-height: 1.6; color: #43616F; max-width: 78ch; }
.bnotstated { margin-top: 44px; padding: 26px 28px; }
.bnotstated .bhead { margin-bottom: 8px; }
.bnotstated .bhead a { font-size: 15px; font-weight: 600; color: #0A5C7E; text-decoration: none; }
.bnotstated .bhead a:hover { text-decoration: underline; }
.bnotstated .bnote { font-size: 14px; line-height: 1.55; max-width: 76ch; }
.bnone { max-width: 860px; margin-top: 30px; padding: 34px 36px; }
.ohead { margin-bottom: 12px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; color: #093F56; }
.obody { margin-bottom: 26px; font-size: 16px; line-height: 1.6; color: #3F6274; max-width: 70ch; }
.routes { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.route { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border: 1px solid #E4D8C2; border-radius: 12px; padding: 16px 18px; }
.route > div { flex: 1 1 240px; }
.route .rh { margin-bottom: 4px; font-size: 16px; font-weight: 600; color: #093F56; }
.route .rs { font-size: 14px; line-height: 1.5; color: #3F6274; }
@media (max-width: 960px) {
  .filterbar { grid-template-columns: 1fr; border-radius: 24px; padding: 16px; }
  button.sfield { border-right: 0; border-bottom: 1px solid #EFE7DA; padding: 12px 0; }
  .homes-tools { width: 100%; }
  .fsheet { position: fixed; inset: 0; top: 0; margin: 0; width: 100%; border-radius: 0; padding: 20px 16px 0; overflow: auto; z-index: 7; }
  /* #87 (Owner #86 corrections 5 and 6), Index and Browse only: a contained overlay, never the whole screen; the page stays visible around it */
  :is(body.ipage, body.bpage) .fsheet { position: fixed; left: 10px; right: 10px; top: max(96px, 14vh); bottom: max(12px, env(safe-area-inset-bottom)); margin: 0; width: auto; max-height: none !important; border-radius: 16px; padding: 20px 16px 0; overflow: auto; z-index: 7; box-shadow: 0 24px 60px -20px rgba(9,63,86,.7); }
  :is(body.ipage, body.bpage) .fsheet.anchored { left: 10px !important; width: auto !important; }
  :is(body.ipage, body.bpage) .fclose { top: 10px; right: 10px; }
  .fgrid { grid-template-columns: 1fr; }
  .farea .afield { flex-basis: 100%; }
  .ffoot { margin: 0 -16px; padding: 14px 16px; border-radius: 0; }
  .bedrow { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .bands { gap: 3px; }
  .bandl { font-size: 8px; white-space: normal; line-height: 1.2; }
  .bcard { padding: 20px 18px; }
  .bnone { padding: 24px 20px; }
  .ohead { font-size: 24px; }
  .bresults .g3.g4, .bresults .g3.g3-few { grid-template-columns: 1fr !important; }
  .urlchip { margin-left: 0; }
}

/* ── The detail page on desktop: "Facts beside", Platform #65 option 1b (sprint #72) ──────
   Additive. The photograph and the fact column pair above 960px; the pills become a two-column
   grid there and stay one per line below; the rent block routes in-page to the posts; "What is
   known, and how" is a closed disclosure whose summary repeats the evidence state; the location
   section's map and text sit side by side. DOM order is visual order at every width. The four
   fact pills whose icons the shell's sheet lacks stay text-only. */
.dwrap { width: min(100% - 2rem, 1200px); }
.dpair { display: flex; flex-direction: column; gap: 24px; }
.dfacts { display: flex; flex-direction: column; gap: 18px; }
.dfacts .gaps { font-size: 13px; line-height: 1.5; color: #4A6A78; }
.dpills-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.dpills-grid li { display: flex; align-items: center; gap: 9px; font-size: 14px; line-height: 1.4; padding: 7px 10px; border-radius: 3px; }
.dpills-grid li svg { width: 16px; height: 16px; }
.dpage .dpills-grid .unknown { display: flex; font-size: 14px; line-height: 1.4; padding: 7px 10px; }
.dposts-link { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px; padding: 10px 0; font-size: 15px; line-height: 1.4; font-weight: 700; color: #0A5C7E; text-decoration: none; }
.dposts-link:hover { text-decoration: underline; }
.dposts-link svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dknown-q { padding: 4px 24px; gap: 0; }
.dknown-q > summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 52px; cursor: pointer; font-size: 16px; line-height: 1.4; font-weight: 600; color: #0A5C7E; list-style: none; }
.dknown-q > summary::-webkit-details-marker { display: none; }
.dknown-q > summary h2 { font: inherit; color: inherit; letter-spacing: 0; margin: 0; }
.dknown-q > summary .ksum { font-size: 13px; font-weight: 500; color: #4A6A78; }
.dknown-q > summary .ksum::before { content: "·"; margin-right: 10px; color: #9BAEB7; }
.dknown-q > summary:focus-visible { outline: 2px solid #0C84B1; outline-offset: 3px; border-radius: 4px; }
.dknown-q .krows { padding: 4px 0 24px; }
.dloc-map, .dloc-text { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 961px) {
  .dwrap { gap: 26px; }
  .dpair { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 34px; align-items: start; }
  .dpills-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .dtitle { font-size: 38px; }
  .dprice { font-size: 34px; }
  .dprice .unit { font-size: 16px; }
  .posts { gap: 14px; }
  .post { padding: 18px 20px; }
  .dloc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .dloc > h2 { grid-column: 1 / -1; }
}
/* ── Detail v2 (Sprint 4, Platform #88): the accepted design with the Owner's edits and the Sprint 3 reconciliation ─────
   C1/C2 above: the accepted shell rules now include body.dpage. Every rule here is scoped to body.dpage. The ground stays
   the shipped cream (#F6F1E7); Detail keeps its own type. */
body.dpage .dwrap { width: min(100% - 2rem, 1080px); }                                                    /* C3: room for the shipped two-column pair */
body.dpage .dback a { display: inline-flex; align-items: center; gap: 8px; }                              /* Owner edit: an arrow before the label */
body.dpage .dback a svg { width: 16px; height: 16px; transform: rotate(180deg); flex: 0 0 auto; }
body.dpage .dpair { margin-top: -4px; }
body.dpage .dmediacol { display: flex; flex-direction: column; gap: 10px; }
body.dpage .dgallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }         /* Owner edit: one real thumbnail, three empty slots */
body.dpage .gslot { position: relative; aspect-ratio: 16 / 11; border-radius: 4px; border: 1px dashed #B8AA92; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 7px, rgba(168,109,10,.12) 7px 14px); overflow: hidden; }
body.dpage .gslot.gthumb { border: 2px solid #093F56; }
body.dpage .gslot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
body.dpage .gslot.imgfail { border: 1px dashed #B8AA92; }
body.dpage .gslot.imgfail img { display: none; }
body.dpage .dfacts { gap: 16px; }                                                                          /* Owner edit: rent first, then the facts, then the gaps line */
body.dpage .prow2 > div:first-child { flex: 1 1 auto; min-width: 0; }                                     /* the figure keeps its wrapping room; the count and date keep their width and drop under it when tight */
body.dpage .pmeta { flex: 0 0 auto; }
body.dpage .pmeta .posts { white-space: nowrap; }
body.dpage .dpills-grid { display: flex; flex-wrap: wrap; gap: 8px; }                                     /* the accepted frames: inline fact chips at every width */
body.dpage .dpills-grid li, body.dpage .dpills-grid .unknown { display: inline-flex; font-size: 13px; line-height: 1.4; padding: 4px 9px; gap: 7px; }
body.dpage .dpills-grid li svg { width: 15px; height: 15px; }
body.dpage .dfacts .dprice-block { order: 0; }
body.dpage .dprice { font-size: 24px; }
body.dpage .dprice .unit { font-size: 14px; }
/* Owner edit: the R6 poster tile — source state, name, tier on its own line, price with its currency, contact, the page link at the foot */
body.dpage .post { gap: 10px; }
body.dpage .post .pid { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
body.dpage .post .pprice { margin-left: 0; }
body.dpage .post .pprice .unknown { font-size: 14px; font-weight: 500; }
body.dpage .post .pprice.approx { font-family: Lora, Georgia, serif; font-style: italic; font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: 0; overflow-wrap: anywhere; }
body.dpage .post .pprice.approx q { quotes: "\201C" "\201D"; }
body.dpage .post .psrc, body.dpage .post .pact, body.dpage .post .ppage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
body.dpage .post .ppage { margin-top: auto; }                                                              /* C6: pinned to the tile foot */
/* C5: the disclosure reads as a control — the circled +/− marker .hd and .ev already use, the section heading, the evidence pills, a visible label */
body.dpage .dknown-q > summary { color: #093F56; gap: 10px 12px; }
body.dpage .dknown-q > summary h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 700; }
body.dpage .dknown-q > summary .kmark { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #C9D6DC; color: #4A6A78; font-size: 16px; font-weight: 600; line-height: 1; }
body.dpage .dknown-q > summary .kmark::before { content: "+"; }
body.dpage .dknown-q[open] > summary .kmark::before { content: "\2212"; }
body.dpage .dknown-q > summary .ksum::before { content: none; margin: 0; }
body.dpage .dknown-q > summary .kshow { margin-left: auto; font-size: 14px; font-weight: 600; color: #0A5C7E; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 961px) {
  body.dpage ol.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }   /* Owner edit: three slots a row; C6: equal heights per row (ol.posts: the rent card's count line shares the class name) */
  body.dpage .post { height: 100%; }
  body.dpage .dtitle { font-size: 32px; }
  body.dpage .dprice { font-size: 24px; }
  body.dpage .dprice .unit { font-size: 14px; }
}
@media (max-width: 600px) {
  body.dpage .post .pid { order: 1; }                                                                     /* the accepted phone tile: name and tier, price, then the states */
  body.dpage .post .pprice { order: 2; flex-basis: auto; }
  body.dpage .post .pwho { order: 3; }
  body.dpage .post .psrc { order: 4; }
  body.dpage .post .pact { order: 5; }
  body.dpage .post .ppage { order: 6; }
  body.dpage .dknown-q > summary h2 { font-size: 19px; line-height: 1.25; }
  body.dpage .dknown-q > summary .kshow { flex-basis: 100%; margin-left: 0; order: 1; }
  body.dpage .dknown-q > summary .ksum { order: 2; }
}

/* ── Remove a listing, panel 01 (Platform #68 r3 under sprint #72): a list inside a prose section ── */
.psec h3 { font-size: 18px; line-height: 1.3; font-weight: 700; color: #093F56; margin-top: 4px; }
.psec .plist { margin: 0; padding-left: 1.2em; font-family: Lora, Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.6; color: #3F6274; max-width: 66ch; }
.psec .plist li { margin: 6px 0; }

/* ── The public provider page (Platform #39; design #40, Provider v2.1 "Localist 32"; #56 correction) ─────
   Scoped to body.vpage; the shared shell is unchanged. The page reproduces the v2.1 composition (panel 01 desktop,
   02 phone, 03 Vietnamese): the cover with its gradient and the identity aligned over its lower edge, the contact
   card with one row of routes, the homes expanding in place with the thumbnail, inline title and location, pills or
   facts line and price, the four-tile gallery and the action row, the three claims, the sidebar's About, At a
   glance and Something wrong. Every route is the #66 non-action (a span, no destination, no control). */
body.vpage { background: #E9E2D5; }
body.vpage .foot { margin-top: 48px; }
.vwrap { width: min(100% - 2rem, 760px); margin-inline: auto; padding: 24px 0 0; display: flex; flex-direction: column; gap: 24px; }
.vsample { margin-top: 0; width: 100%; font-size: 14px; line-height: 1.55; color: #3F6274; opacity: 1; border-left: 3px solid #C21568; padding-left: 12px; }
.vsample strong { color: #093F56; }
/* the cover (panel 01): the empty slot, its gradient, the avatar and the identity over the lower edge */
.vhead { position: relative; margin-top: 20px; height: 270px; background: #FBE7C6; color: #FFFFFF; }
.vcover { position: absolute; inset: 0; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 14px, rgba(168,109,10,.10) 14px 28px); display: flex; align-items: flex-start; justify-content: center; padding-top: 22px; }
.vcover-l { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.5; color: #7A4E06; padding: 5px 11px; border-radius: 3px; background: rgba(255,255,255,.55); }
.vcover-l svg { width: 14px; height: 14px; }
.vgrad { position: absolute; left: 0; right: 0; bottom: 0; height: 170px; background: linear-gradient(to top, #062B3C 0%, #062B3C 34%, rgba(6,43,60,0.72) 62%, rgba(6,43,60,0) 100%); pointer-events: none; }
.vhead .vid { position: absolute; left: 0; right: 0; bottom: 22px; padding: 0; gap: 18px; flex-direction: row; align-items: flex-end; }
.vavatar { width: 104px; height: 104px; border-radius: 50%; background: #FBE7C6; border: 4px solid #FFFFFF; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vthumb-l { font-size: 12px; color: #4A6A78; }
.vidtext { display: flex; flex-direction: column; gap: 6px; padding-bottom: 5px; min-width: 0; }
.vnamerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vname { font-size: 33px; line-height: 1.15; letter-spacing: -0.5px; font-weight: 800; color: #FFFFFF; overflow-wrap: anywhere; }
.vbadge { display: inline-flex; align-items: center; font-size: 12px; line-height: 1.4; font-weight: 700; color: #093F56; background: #FBE7C6; border: 1px solid #E8C98A; border-radius: 999px; padding: 4px 11px; }
.vcount { font-size: 16px; line-height: 1.5; color: #FFFFFF; }
.vstrip { display: none; }
/* two columns, white cards with the design's border */
.vcols { padding-top: 22px; }
.vmain, .vaside { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.vaside { gap: 16px; }
.vsec { background: #FFFFFF; border: 1px solid #DCD2C0; border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.vsec h2 { font-size: 18px; line-height: 1.3; font-weight: 700; color: #093F56; }
.vaside .vsec { padding: 18px; gap: 9px; }
.vaside .vsec h2 { font-size: 16px; }
/* the contact card: the preferred line, one row of routes, the note, the explanation */
.vpref { font-size: 15px; line-height: 1.5; color: #4A6A78; }
.vpref strong { font-weight: 700; color: #093F56; }
.vroutes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.vor { font-size: 13px; color: #4A6A78; }
.vbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid #B9A98C; border-radius: 5px; background: #FFFFFF; color: #093F56; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; }
.vbtn-p { min-height: 50px; padding: 0 26px; border: 0; background: #C21568; color: #FFFFFF; font-size: 16px; font-weight: 700; }
.vroutes-note { font-size: 13px; line-height: 1.5; color: #7A4E06; }
.vcontact-p { font-size: 13px; line-height: 1.6; color: #4A6A78; }
.vcontact-p strong { color: #093F56; }
/* the homes: the heading row, the cards (one open by default, the hash opens another) */
.vhomes { display: flex; flex-direction: column; gap: 12px; }
.vhomes-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
.vhomes-head h2 { font-size: 21px; line-height: 1.25; font-weight: 700; color: #093F56; }
.vhomes-count { font-size: 14px; color: #4A6A78; }
.vlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.vhome { border: 1px solid #DCD2C0; border-radius: 10px; background: #FFFFFF; overflow: hidden; }
.vhome[open] { border: 1.5px solid #093F56; }
.vhome > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; padding: 16px 18px; }
.vhome[open] > summary { align-items: flex-start; }
.vhome > summary::-webkit-details-marker { display: none; }
.vhome > summary:focus-visible { outline: 2px solid #0C84B1; outline-offset: -2px; border-radius: 10px; }
.vthumb { flex: 0 0 auto; width: 132px; height: 96px; border-radius: 7px; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(168,109,10,.12) 10px 20px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vsum { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.vtitlerow { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vtitle { font-size: 19px; line-height: 1.3; font-weight: 700; color: #093F56; overflow-wrap: anywhere; }
.vloc { font-size: 14px; color: #4A6A78; }
.vloc .locq { color: #4A6A78; }
.vfacts { font-size: 14px; line-height: 1.5; color: #4A6A78; }
.vpills { gap: 7px; }
.vpills li { font-size: 13px; line-height: 1.4; padding: 4px 9px; border-radius: 4px; }
.vpills .pill { border: 0; background: #F4EFE4; color: #093F56; }
.vpills .unknown { border: 1px dashed #B9A98C; color: #4A6A78; }
.vhome:not([open]) .vpills, .vhome[open] .vfacts { display: none; }
.vprice { font-size: 17px; font-weight: 700; color: #093F56; font-variant-numeric: tabular-nums; }
.vprice .unit { font-size: 17px; font-weight: 700; color: #093F56; }
.vprice .unknown { font-size: 13px; font-weight: 500; letter-spacing: 0; color: #4A6A78; }
.vtoggle { flex: 0 0 auto; align-self: center; font-size: 13px; font-weight: 600; color: #0A5C7E; }
.vhome[open] > summary .vo, .vhome:not([open]) > summary .vc { display: none; }
.vbody { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; }
.vgallery { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vtile { display: block; height: 104px; border-radius: 7px; background: #FBE7C6; background-image: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(168,109,10,.10) 10px 20px); }
.vgallery .ph-label { top: auto; bottom: 0; left: 0; right: auto; border-radius: 0 7px 0 7px; font-size: 11px; padding: 4px 10px; }
.vdesc { font-size: 15px; line-height: 1.65; color: #3F6274; }
.vcaution { font-size: 13px; line-height: 1.6; color: #3F6274; background: #FBF3E2; border: 1px solid #E8C98A; padding: 12px; border-radius: 8px; }
.vact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid #EFE7DA; }
.vask { min-height: 46px; padding: 0 20px; font-size: 15px; font-weight: 600; }
.vact .plink { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: #0A5C7E; text-decoration: none; }
.vact .plink:hover { text-decoration: underline; text-underline-offset: 3px; }
.vdates { margin-left: auto; font-size: 13px; line-height: 1.5; color: #4A6A78; text-align: right; }
/* the rented ending: greyed, below the available homes, no contact on the card */
.vhome.rented { display: flex; align-items: center; gap: 16px; padding: 16px 18px; background: #F0EBE0; border-color: #DCD2C0; }
.vhome.rented .vthumb { background: #E4DCCB; background-image: none; }
.vhome.rented .vtitle { color: #4A6A78; }
.vrented { font-size: 14px; line-height: 1.5; font-weight: 700; color: #8A3A3A; }
.vnote { font-size: 14px; line-height: 1.5; color: #4A6A78; }
.vact-r { padding-top: 0; border-top: 0; margin-top: -6px; }
.vact-r .plink { font-size: 13px; }
.vempty { font-size: 16px; line-height: 1.5; color: #093F56; padding: 4px 0; }
/* the three claims, kept apart */
.vclaims { padding: 20px 22px; gap: 12px; }
.vclaims .tiers { gap: 14px; }
.vclaims .tiers div { background: #F6F1E7; border-radius: 8px; padding: 14px; gap: 6px; }
.vclaims .tiers dt { border: 0; padding: 0; font-size: 14px; font-weight: 700; }
.vclaims .tiers dd { font-family: inherit; font-size: 13px; line-height: 1.55; }
.vnobody { font-size: 14px; line-height: 1.65; color: #3F6274; }
.vnobody strong { color: #093F56; }
/* the sidebar */
.vwords { font-size: 14px; line-height: 1.6; color: #3F6274; }
.vtrans { font-size: 13px; line-height: 1.6; color: #4A6A78; }
.vtrans .vlang { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: #4A6A78; border: 1px solid #C9D6DC; border-radius: 3px; padding: 1px 5px; margin-right: 6px; vertical-align: 2px; }
.vabout .vnote { font-size: 12px; }
.vgl { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.vgl div { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; font-size: 14px; color: #3F6274; }
.vgl dt { font-size: 14px; color: #3F6274; }
.vgl dt::after { content: " —"; }
.vgl dd { margin: 0; font-size: 14px; line-height: 1.5; color: #3F6274; }
.vgl .vnote { font-size: 13px; }
.vwrong { background: #F6F1E7; }
.vwrong p { font-size: 13px; line-height: 1.6; color: #3F6274; }
.vreport { display: inline-flex; font-weight: 600; }
.vwithdrawn { padding-top: 48px; gap: 20px; }
.vgone { font-size: 20px; line-height: 1.4; font-weight: 600; color: #093F56; }
/* the pinned contact bar exists only on a phone (panel 02) */
.vpin { display: none; }
@media (min-width: 961px) {
  .vwrap { width: min(100% - 68px, 1372px); }
  .vcols { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
  .vaside { margin-top: 22px; }
  .vclaims .tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .vwrap { width: min(100% - 2rem, 760px); }
  .vhead { height: 186px; margin-top: 16px; }
  .vgrad { height: 120px; background: linear-gradient(to top, #062B3C 0%, #062B3C 36%, rgba(6,43,60,0.7) 64%, rgba(6,43,60,0) 100%); }
  .vhead .vid { bottom: 12px; gap: 12px; }
  .vavatar { width: 66px; height: 66px; border-width: 3px; }
  .vidtext { gap: 3px; padding-bottom: 3px; }
  .vnamerow { gap: 7px; }
  .vname { font-size: 21px; letter-spacing: 0; }
  .vbadge { font-size: 10px; padding: 2px 7px; }
  .vcount { font-size: 13px; }
  .vcols { padding-top: 14px; }
  .vmain, .vaside { gap: 14px; }
  .vcontact { display: none; }   /* panel 02: on a phone the routes live in the pinned bar */
  .vstrip { display: block; background: #F6F1E7; border: 1px solid #E4D8C2; border-radius: 8px; padding: 12px; font-size: 13px; line-height: 1.55; color: #3F6274; }
  .vstrip a { color: #0A5C7E; font-weight: 600; display: inline-block; padding: 13px 4px; margin: -13px -4px; }   /* a 44px target without moving the strip's text */
  .vsec { padding: 14px; }
  .vhome > summary { padding: 12px; gap: 11px; }
  .vhome[open] > summary { flex-direction: column; align-items: stretch; padding: 0 0 12px; gap: 12px; }
  .vhome[open] .vsum { padding: 0 12px; }
  .vhome[open] .vthumb { width: 100%; height: 150px; border-radius: 0; }
  .vhome[open] .vtoggle { position: absolute; }
  .vhome[open] { position: relative; }
  .vhome[open] > summary .vtoggle { top: 162px; right: 12px; font-size: 12px; }
  .vhome[open] .vtitlerow { flex-direction: column; gap: 4px; padding-right: 64px; }
  .vhome[open] .vtitle { font-size: 17px; }
  .vhome:not([open]) .vthumb { width: 74px; height: 58px; border-radius: 6px; }
  .vhome:not([open]) .vtitle { font-size: 15px; }
  .vhome:not([open]) .vloc, .vhome:not([open]) .vfacts { font-size: 12px; }
  .vhome:not([open]) .vprice, .vhome:not([open]) .vprice .unit { font-size: 14px; }
  .vhome:not([open]) .vsum { gap: 2px; }
  .vpills li { font-size: 12px; padding: 3px 8px; }
  .vbody { padding: 0 12px 12px; gap: 10px; }
  .vgallery, .vdesc { display: none; }   /* panel 02: the one media slot above; no second gallery, no description block */
  .vact { padding-top: 0; border-top: 0; }
  .vask { width: 100%; font-size: 14px; }
  .vdates { margin-left: 0; text-align: left; font-size: 12px; }
  .vhome.rented { flex-direction: column; align-items: stretch; padding: 12px; }
  .vclaims { padding: 14px; }
  .vpin { position: sticky; bottom: 0; z-index: 2; display: flex; flex-direction: column; gap: 7px; margin: 14px calc(50% - 50vw) 0; padding: 10px 14px 12px; background: #FFFFFF; border-top: 1px solid #DCD2C0; }
  .vpin .vroutes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .vpin .vroute.primary { grid-column: 1 / -1; }
  .vpin .vbtn { width: 100%; min-height: 42px; padding: 0 8px; font-size: 13px; }
  .vpin .vbtn-p { min-height: 50px; font-size: 16px; }
  .vpin-note { font-size: 11px; line-height: 1.4; color: #7A4E06; text-align: center; }
  .vwithdrawn { padding-top: 32px; }
}
}