/* ============================================================
 * Beyond Realty v4 — app styles (sub-pages, forms, portal, admin)
 * ============================================================ */

/* ---------- v175: metric-override font fallbacks (kills CLS from web-font swap) ----------
   Maps the display/web fonts to local system fonts with matched metrics, so when Google
   Fonts swaps in the heading box does not resize and shift everything below it. */

@font-face{font-family:'Fraunces-fallback';src:local('Georgia'),local('Times New Roman');size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
@font-face{font-family:'Archivo-fallback';src:local('Arial'),local('Helvetica');size-adjust:100%;ascent-override:93%;descent-override:23%;line-gap-override:0%}
@font-face{font-family:'Noto Serif SC-fallback';src:local('Songti SC'),local('SimSun'),local('STSong');size-adjust:100%;ascent-override:88%;descent-override:12%;line-gap-override:0%}
@font-face{font-family:'Noto Sans SC-fallback';src:local('PingFang SC'),local('Microsoft YaHei'),local('Hiragino Sans GB');size-adjust:100%;ascent-override:88%;descent-override:12%;line-gap-override:0%}

/* ---------- sub-page hero ---------- */
.subhero{background:var(--gold-deep);color:#fff;padding:1.1rem 0 1.2rem;position:relative;overflow:hidden}
.subhero::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 62%,rgba(217,179,106,.22) 62%,rgba(217,179,106,.22) 64.5%,transparent 64.5%)} /* v91: was a rgba(200,16,46,.5) red fossil left from the pre-gold palette; the front-end already overrode it to gold, but the base value still leaked on pages that did not */
.subhero .wrap{position:relative;z-index:2}
.subhero h1{font-family:var(--serif);font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:600;line-height:1.1;margin-top:.35rem;max-width:44rem}
.subhero p{color:rgba(255,255,255,.82);max-width:42rem;margin-top:.3rem;line-height:1.45;font-size:1rem}

/* ---------- subpage nav reuse: simplify with wrap rows ---------- */
.page-nav{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;align-items:center;justify-content:center;padding:.6rem 0;background:var(--cream-2);border-bottom:1px solid var(--line)}
.page-nav a{font-size:.9rem;font-weight:600;color:var(--ink-soft)}
.page-nav a:hover{color:var(--accent)}
.page-nav .here{color:var(--navy);border-bottom:2px solid var(--accent)}

/* ---------- pricing table ---------- */
.price-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.8rem}
.price-card{background:var(--surface-card);border:1px solid var(--line);padding:1rem 1.2rem;position:relative}
.price-card.featured{border:2px solid var(--navy);box-shadow:var(--shadow)}
.price-card .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:.4rem 1.1rem;white-space:nowrap}
.price-card h3{font-family:var(--serif);color:var(--navy);font-size:1.5rem;font-weight:600;text-align:center}
.price-card .amount{font-family:var(--serif);font-size:2.6rem;color:var(--navy);text-align:center;line-height:1.05;margin:.35rem 0}
.price-card .amount small{font-size:1rem;color:var(--ink-soft);font-family:var(--sans)}
.price-card .amount .min{display:block;font-size:.8rem;color:var(--ink-soft);font-family:var(--sans);letter-spacing:.05em}
.price-card ul{list-style:none;margin-top:.8rem}
.price-card li{display:flex;gap:.7rem;padding:.28rem 0;border-bottom:1px dashed var(--line);font-size:.92rem;color:var(--ink-soft)}
.price-card li .ck{color:var(--success);font-weight:800} /* v91: was var(--blue)=#B08A2E, identical to the ✗ colour */
.price-card li.no{opacity:.45}
.price-card li.no .ck{color:var(--danger)} /* v91: was var(--accent)=#B08A2E — ✓ and ✗ were the SAME colour */

/* ---------- guarantee cards ---------- */
.g-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
.g-card{background:var(--surface-card);border:1px solid var(--line);padding:1rem 1.05rem;transition:.3s}
.g-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* v91: alternation DROPPED here on purpose. This badge carries white text,
   which needs 4.5:1; the only two AA-compliant golds (#7F641C 5.61:1 and
   #8A6D1F 4.90:1) are 1.15:1 apart — visually identical, so the alternation
   bought nothing. --gold-brand #B08A2E would restore contrast between odd and
   even but drops white text to 3.22:1 FAIL at this .95rem size. Numbered
   badges 1-6 gain nothing from alternating anyway. */
.g-card .no{font-family:var(--serif);font-size:.95rem;color:#fff;background:var(--gold-deep);width:40px;height:40px;display:grid;place-items:center;font-weight:600;margin-bottom:.6rem}
.g-card:nth-child(even) .no{background:var(--gold-deep)}
.g-card h3{font-family:var(--serif);color:var(--navy);font-size:1.3rem;font-weight:600;margin-bottom:.35rem}
.g-card p{font-size:.92rem;color:var(--ink-soft);line-height:1.42}
.g-card .zh{margin-top:.4rem;font-size:.85rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:.4rem}

/* ---------- blog ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.6rem}
.post{background:var(--surface-card);border:1px solid var(--line);transition:.3s;display:flex;flex-direction:column}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.post .cover{height:140px;overflow:hidden;background:var(--cream-2)}
.post .cover img{width:100%;height:100%;object-fit:cover;transition:.5s}
.post:hover .cover img{transform:scale(1.05)}
.post .body{padding:.75rem .9rem .85rem;flex:1;display:flex;flex-direction:column}
.post .cat{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);font-weight:700}
.post h3{font-family:var(--serif);color:var(--navy);font-size:1.22rem;font-weight:600;line-height:1.25;margin:.25rem 0 .3rem}
.post p{font-size:.9rem;color:var(--ink-soft);flex:1;line-height:1.42}
.post .meta{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-soft);margin-top:.55rem;padding-top:.5rem;border-top:1px dashed var(--line)}
/* v84: 「阅读全文 / read more」可点击链接 */
.post .meta a.more{color:var(--accent);font-weight:700;text-decoration:none}
.post .meta a.more:hover,.post .meta a.more:focus{text-decoration:underline}
article.post-full{background:var(--surface-card);border:1px solid var(--line);padding:1.2rem;max-width:50rem;margin:.8rem auto 0}
article.post-full .cover{height:240px;overflow:hidden;margin-bottom:1rem}
article.post-full .cover img{width:100%;height:100%;object-fit:cover}
article.post-full h1{font-family:var(--serif);color:#0A2A6B;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;line-height:1.25}
article.post-full .cat{color:#0A2A6B}
article.post-full .meta{color:#0A2A6B}
article.post-full .content{margin-top:.8rem}
article.post-full .content h3{font-family:var(--serif);color:#0A2A6B;font-size:1.25rem;margin:1rem 0 .3rem}
article.post-full .content p{color:#0A2A6B;margin:.3rem 0;line-height:1.45}
article.post-full .content li{color:#0A2A6B}

/* ---------- listings ---------- */
.filters{display:grid;grid-template-columns:repeat(5,1fr) auto;gap:.8rem;background:var(--surface-card);border:1px solid var(--line);padding:1rem;margin-bottom:1.4rem;align-items:end}
.filters .f label{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:.3rem}
.filters select,.filters input{width:100%;padding:.55rem .6rem;border:1.5px solid var(--line-strong);background:var(--cream);font-size:.9rem;font-family:var(--sans)} /* v91: --line -> --line-strong */
.list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.listing{background:var(--surface-card);border:1px solid var(--line);transition:.3s;display:flex;flex-direction:column}
.listing:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.listing .cover{height:160px;overflow:hidden;position:relative;background:var(--cream-2)}
.listing .cover img{width:100%;height:100%;object-fit:cover}
.listing .price{position:absolute;bottom:0;left:0;background:var(--gold-deep);color:#fff;padding:.45rem .9rem;font-weight:700;font-size:1.05rem}
.listing .pet{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);font-size:.72rem;font-weight:700;padding:.25rem .6rem;color:var(--navy)}
.listing .bd{padding:.85rem 1rem .95rem;flex:1;display:flex;flex-direction:column}
.listing h3{font-family:var(--serif);color:var(--navy);font-size:1.18rem;font-weight:600}
.listing .addr{font-size:.85rem;color:var(--ink-soft);margin:.2rem 0 .6rem}
.listing .specs{display:flex;gap:1rem;font-size:.85rem;color:var(--ink-soft);border-top:1px dashed var(--line);padding-top:.45rem;margin-top:auto}
.listing .btn{margin-top:.55rem;justify-content:center;padding:.6rem 1rem;font-size:.85rem}

/* listing detail */
.detail{display:grid;grid-template-columns:1.4fr .9fr;gap:1.4rem;margin-top:.8rem;align-items:start}
.detail .gallery img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}
.detail .side{background:var(--surface-card);border:1px solid var(--line);padding:1.2rem;position:sticky;top:90px}
.detail .side .rent{font-family:var(--serif);font-size:2.6rem;color:var(--navy);line-height:1}
.detail .side ul{list-style:none;margin:.7rem 0}
.detail .side li{padding:.26rem 0;border-bottom:1px dashed var(--line);font-size:.93rem;color:var(--ink-soft);display:flex;justify-content:space-between}
.detail .side li b{color:var(--navy)}
.chips-line{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}

/* ---------- calculator ---------- */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.6rem;background:var(--surface-card);border:1px solid var(--line);padding:1.1rem}
.calc .field label{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);font-weight:700}
.calc .field input,.calc .field select{width:100%;padding:.6rem .7rem;border:1.5px solid var(--line-strong);background:var(--cream);font-size:.95rem;font-family:var(--sans)} /* v91: --line -> --line-strong */
.calc .field{margin-bottom:.55rem}
.calc .out{background:var(--gold-deep);color:#fff;padding:1.1rem;margin-top:.4rem}
.calc .out h3{font-family:var(--serif);font-size:1.2rem;margin-bottom:.55rem;color:#fff}
.calc .out table{width:100%;border-collapse:collapse;font-size:.9rem}
.calc .out td{padding:.45rem 0;border-bottom:1px solid rgba(255,255,255,.15)}
.calc .out td:last-child{text-align:right;font-weight:700}
.calc .out .big{color:var(--gold)}
.calc .out .note{font-size:.78rem;color:rgba(255,255,255,.95);margin-top:.9rem} /* v91: was .6 = 3.13:1 on gold-deep, the small-print disclaimer was effectively unreadable; .95 = 5.42:1 AA */

/* ---------- FAQ ---------- */
.faq-tabs{display:flex;gap:.6rem;margin-bottom:1rem}
.faq-tabs button{background:var(--surface-card);border:1px solid var(--line);padding:.5rem 1.2rem;font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink-soft);font-family:var(--sans)}
.faq-tabs button.on{background:var(--gold-deep);color:#fff;border-color:var(--navy)}
details.faq{background:var(--surface-card);border:1px solid var(--line);margin-bottom:.5rem}
details.faq summary{cursor:pointer;padding:.7rem 1rem;font-weight:600;color:var(--navy);list-style:none;position:relative;padding-right:3rem}
details.faq summary::after{content:"+";position:absolute;right:1.3rem;top:50%;transform:translateY(-50%);font-size:1.3rem;color:var(--accent)}
details.faq[open] summary::after{content:"–"}
details.faq .a{padding:0 1rem .7rem;color:var(--ink-soft);font-size:.94rem;line-height:1.45}

/* ---------- testimonials on home ---------- */
.t-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-top:.6rem}
.t-card{background:var(--surface-card);border:1px solid var(--line);padding:.9rem 1rem;position:relative}
.t-card .stars{color:var(--gold-deep);font-size:1rem;letter-spacing:.15em;margin-bottom:.4rem} /* v91: was #E8A020 = 2.07:1 FAIL on the card */
.t-card p{font-size:.98rem;color:var(--ink-soft);font-style:italic;line-height:1.45}
.t-card .who{margin-top:.55rem;font-size:.85rem}
.t-card .who b{color:var(--navy);display:block}

/* ---------- market data band ---------- */
.market{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-top:.6rem}
.m-card{background:var(--surface-card);border:1px solid var(--line);border-top:4px solid var(--gold-deep);padding:.8rem .8rem;text-align:center}
.m-card:nth-child(even){border-top-color:var(--accent)}
.m-card b{font-family:var(--serif);font-size:1.8rem;color:var(--navy);display:block;line-height:1.1}
.m-card span{font-size:.8rem;color:var(--ink-soft);letter-spacing:.06em}

/* ---------- estimate form (home) ---------- */
.estimate{display:grid;grid-template-columns:1fr 1.1fr;gap:1.6rem;align-items:center}
form.lead{background:var(--surface-card);border:1px solid var(--line);padding:1rem}
form.lead h3{font-family:var(--serif);color:var(--navy);font-size:1.5rem;margin-bottom:.3rem}
form.lead>p{font-size:.9rem;color:var(--ink-soft);margin-bottom:.8rem}

/* ============================================================
   v112 — editable fields must always be dark-ink on a light box
   The espresso sheet flips --ink to #F3EDE3 (near white) on <body>, which is
   correct for text sitting directly on brown. But every input/select/textarea
   rests on --cream #F7F4EC, so any field NOT inside one of the ink-reset
   containers (.card, .value, form.lead, form.inq … see the v92 list) renders
   near-white text on a near-white box — completely invisible.
   Pinning the ink at the field level fixes every form at once, including ones
   wrapped in a plain <div> instead of <form class="lead">.
   ============================================================ */
.field input,.field select,.field textarea,
.filters input,.filters select,
.calc .field input,.calc .field select,
input.inp,select.inp,textarea.inp{
  --ink:#1A1A1A;            /* re-resolve inside the field: 16.28:1 on white */
  color:#1A1A1A;
  background:#FFFFFF;       /* v112: pure white box, black text — maximum legibility */
  -webkit-text-fill-color:#1A1A1A; /* defeats the WebKit/Chrome autofill + forced-dark override */
  color-scheme:light;       /* v112: body sets `light dark`, which made Chrome paint the
                               native <select> popup dark with dark text. Force the light
                               UA palette so options stay readable. */
}
.field input::placeholder,.field textarea::placeholder,
input.inp::placeholder,textarea.inp::placeholder{color:#5A5A55;opacity:1}
/* v112: keep the "you are editing this" cue, but on white instead of warm cream */
.field input:focus,.field select:focus,.field textarea:focus{background:#FFFFFF;border-color:var(--gold-lt)}

/* ============================================================
   v95 — Loan pre-qualification workbench (financial.html)
   The pre-qual request grew from 7 fields into a full underwriting
   intake, so it moves out of the 50/50 marketing split into its own
   two-column grid: request form on the left, live borrowing-power
   panel on the right. <details> collapses the field groups, so a long
   form stays scannable with no extra JS.
   ============================================================ */
.pq-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:1.3rem;margin-top:1.4rem;align-items:start}

/* collapsible field groups */
.pq-set{border:1px solid var(--line);background:rgba(10,42,107,.03);margin:0 0 .7rem}
.pq-set>summary{
  cursor:pointer;list-style:none;padding:.7rem .85rem;
  font-family:var(--serif);font-size:1.03rem;font-weight:600;color:var(--navy);
  display:flex;align-items:center;gap:.55rem;
}
.pq-set>summary::-webkit-details-marker{display:none}
/* deep-gold caret — 5.61:1 on the warm card (form.lead's variable reset) */
.pq-set>summary::before{content:"\203A";color:var(--accent);font-size:1.3rem;line-height:1;transition:transform .2s}
.pq-set[open]>summary::before{transform:rotate(90deg)}
.pq-set[open]>summary{border-bottom:1px solid var(--line)}
.pq-set>summary .cnt{margin-left:auto;font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.pq-body{padding:.85rem .85rem .3rem}
.pq-hint{font-size:.75rem;color:var(--ink-soft);margin:-.3rem 0 .55rem;line-height:1.45}
/* inline validation / guidance under a group of fields; --danger = 7.15:1 AAA */
.pq-flag{font-size:.78rem;color:var(--danger);font-weight:600;margin:.15rem 0 .55rem;display:none}
.pq-flag.on{display:block}

/* live estimate panel — surface-0 so the money figures get 14:1 white and
   8.75:1 AAA gold on brown (the .calc .out gold-deep panel reaches ~5.6:1) */
.pq-out{background:var(--surface-0);color:#fff;padding:1.15rem 1.2rem;border-top:4px solid var(--gold);position:sticky;top:6.2rem;
  /* the panel is often taller than a laptop viewport; without this its tail
     (assumptions + disclaimer) would be unreachable while it stays stuck */
  max-height:calc(100vh - 8.6rem);overflow-y:auto;overscroll-behavior:contain}
.pq-out h3{font-family:var(--serif);font-size:1.24rem;margin-bottom:.25rem;color:#fff}
.pq-out>p.pq-sub{font-size:.79rem;color:rgba(255,255,255,.82);margin-bottom:1rem;line-height:1.5}
.pq-out table{width:100%;border-collapse:collapse;font-size:.87rem}
.pq-out td{padding:.44rem 0;border-bottom:1px solid rgba(217,179,106,.16);vertical-align:top}
.pq-out td:first-child{color:rgba(255,255,255,.86);padding-right:.9rem;line-height:1.4}
.pq-out td:last-child{text-align:right;font-weight:700;color:#fff;white-space:nowrap}
.pq-out .pq-hero td{border-top:1px solid rgba(217,179,106,.35);border-bottom:1px solid rgba(217,179,106,.35);padding:.75rem 0}
.pq-out .pq-hero td:last-child{font-size:1.42rem;color:var(--gold);font-family:var(--serif)}
/* second-line qualifier inside a result row (e.g. "after employment discount") */
.pq-out td .sub2{display:block;font-size:.7rem;font-weight:400;color:rgba(255,255,255,.72);margin-top:.12rem;line-height:1.35}
/* the cap that is actually binding, highlighted in AAA gold so the reader can
   see which of the three tests produced the headline number */
.pq-out tr.pq-tight td:first-child{color:#F3C88B;font-weight:700}
.pq-out ul.pq-warn{margin:1rem 0 0;padding-left:1.1rem;font-size:.79rem;line-height:1.55;color:#F3C88B}
.pq-out ul.pq-warn li{margin-bottom:.4rem}
.pq-out .pq-note{font-size:.74rem;color:rgba(255,255,255,.75);margin-top:1rem;line-height:1.6}
@media (max-width:980px){
  .pq-grid{grid-template-columns:1fr}
  .pq-out{position:static;max-height:none;overflow:visible}
}

/* ---------- portal & admin ---------- */
body.app{background:var(--cream)}
.app-shell{max-width:1100px;margin:1rem auto;padding:0 1rem}
.app-card{background:var(--surface-card);border:1px solid var(--line);padding:1.1rem;margin-bottom:.8rem}
.app-card h2{font-family:var(--serif);color:var(--navy);font-size:1.5rem;margin-bottom:.2rem}
.app-card .sub{font-size:.85rem;color:var(--ink-soft);margin-bottom:.8rem}
.app-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.9rem}
.app-tabs button{background:var(--surface-card);border:1px solid var(--line);padding:.6rem 1.2rem;font-weight:700;font-size:.85rem;cursor:pointer;color:var(--ink-soft);font-family:var(--sans)}
.app-tabs button.on{background:var(--gold-deep);color:#fff;border-color:var(--navy)}
table.data{width:100%;border-collapse:collapse;font-size:.88rem;background:var(--surface-card)}
table.data th{background:var(--gold-deep);color:#fff;text-align:left;padding:.6rem .8rem;font-weight:500;font-size:.8rem;letter-spacing:.04em}
table.data td{padding:.4rem .7rem;border-bottom:1px solid #e8e5dc;vertical-align:top}
table.data tr:hover td{background:#f6f3ec}
.pill{display:inline-block;padding:.15rem .6rem;border-radius:99px;font-size:.72rem;font-weight:700}
.pill.new{background:var(--danger-bg);color:var(--danger)} /* v91: was pink+gold 2.74:1 FAIL and semantically wrong */
.pill.contacted{background:#FFF4D9;color:#7A5400} /* v92: #9A6B00 was 4.29:1, just under AA for .72rem text; #7A5400 = 6.20:1 */
.pill.converted{background:#E2F3E4;color:#1B7A35}
.pill.lost{background:#ECECEC;color:#666}
.pill.done{background:#E2F3E4;color:#1B7A35}
.pill.scheduled{background:#E4EDFB;color:var(--navy)}
.pill.assigned{background:#FFF4D9;color:#7A5400} /* v92: #9A6B00 was 4.29:1, just under AA for .72rem text; #7A5400 = 6.20:1 */
.pill.active{background:#E2F3E4;color:#1B7A35}
.pill.leased{background:#ECECEC;color:#666}
.pill.pending{background:#E4EDFB;color:var(--navy)}
.pill.emergency{background:var(--danger-bg);color:var(--danger)} /* v91: EMERGENCY must not read as brand gold — was 2.74:1 FAIL */
.pill.high{background:#FFF4D9;color:#7A5400} /* v92: #9A6B00 was 4.29:1, just under AA for .72rem text; #7A5400 = 6.20:1 */
.pill.low{background:#ECECEC;color:#666}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin-bottom:1.6rem}
.stat-cards .card{background:var(--surface-card);border:1px solid var(--line);border-top:4px solid var(--gold-deep);padding:1.2rem 1rem;text-align:center}
.stat-cards .card:nth-child(even){border-top-color:var(--accent)}
.stat-cards b{font-size:1.7rem;color:var(--navy);display:block;font-family:var(--serif)}
.stat-cards span{font-size:.75rem;color:var(--ink-soft);letter-spacing:.08em}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.6rem}
.kv div{padding:.5rem 0;border-bottom:1px dashed var(--line);font-size:.92rem;color:var(--ink-soft)}
.kv b{color:var(--navy)}
.auth-box{max-width:430px;margin:4rem auto;padding:0 1rem}
.auth-box .app-card{padding:2.6rem}
input.inp,select.inp,textarea.inp{width:100%;padding:.65rem .8rem;border:1.5px solid var(--line-strong);background:var(--cream);font-size:.95rem;font-family:var(--sans);color:var(--ink);margin-bottom:.9rem} /* v91: --line -> --line-strong */
input.inp:focus,select.inp:focus,textarea.inp:focus{outline:none;border-color:var(--navy);background:var(--surface-input)} /* v91: pure white = "editing" cue */
.muted{font-size:.82rem;color:var(--ink-soft)}
.msg-ok{background:#E2F3E4;color:#1B7A35;padding:.8rem 1rem;font-size:.9rem;margin-bottom:1rem}
.msg-err{background:var(--danger-bg);color:var(--danger);padding:.8rem 1rem;font-size:.9rem;margin-bottom:1rem} /* v91: 2.74:1 FAIL -> 5.49:1 AA */
.wo-timeline{border-left:3px solid var(--line);margin-left:.5rem;padding-left:1.2rem}
.wo-timeline .step{margin-bottom:.5rem;font-size:.85rem;color:var(--ink-soft)}
.wo-timeline .step b{color:var(--navy)}
footer.site{margin-top:1.5rem}

/* responsive */
@media (max-width:980px){
  .price-wrap,.g-grid,.blog-grid,.list-grid,.detail,.calc,.estimate,.t-grid,.market{grid-template-columns:1fr}
  .filters{grid-template-columns:1fr 1fr}
  .detail .side{position:static}
  .kv{grid-template-columns:1fr}
}
@media (max-width:560px){.filters{grid-template-columns:1fr}}

/* ============ v5 additions ============ */

/* ---------- team members (v5: photo cards) ---------- */
.team-grid.v5{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:.8rem}
.member.v5{background:var(--surface-card);border:1px solid var(--line);padding:0;transition:.3s;display:flex;flex-direction:column;overflow:hidden}
.member.v5:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.member.v5 .photo{height:210px;overflow:hidden;background:var(--gold-deep);position:relative}
.member.v5 .photo img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:.5s}
.member.v5:hover .photo img{transform:scale(1.04)}
.member.v5 .photo .ph{width:100%;height:100%;display:grid;place-items:center;font-family:var(--serif);font-size:3.4rem;color:rgba(255,255,255,.92)}
.member.v5 .bd{padding:.9rem 1rem 1rem}
.member.v5 h3{font-family:var(--serif);color:var(--navy);font-size:1.28rem;font-weight:600;line-height:1.25}
.member.v5 .role{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:.2rem 0 .5rem}
.member.v5 .meta{font-size:.8rem;color:var(--ink-soft);margin-bottom:.35rem}
.member.v5 .meta b{color:var(--navy)}
.member.v5 p{font-size:.88rem;color:var(--ink-soft)}

/* ---------- footer badges (EHO / REALTOR) ---------- */
.foot-badges{display:flex;gap:2rem;align-items:center;justify-content:center;padding:1rem 0 .3rem;border-top:1px solid rgba(255,255,255,.15);margin-top:.9rem;flex-wrap:wrap}
/* v91: EHO / REALTOR® badge artwork must sit on PURE white — these are
   third-party marks with their own reproduction rules, and a warm tint can
   read as an altered logo. */
.foot-badges img{height:78px;width:auto;background:var(--surface-input);padding:8px;border-radius:3px}
.foot-badges .fb-note{font-size:.75rem;color:rgba(255,255,255,.6);max-width:22rem;line-height:1.55}

/* ---------- referral partner quotes ---------- */
.partner{display:flex;gap:1.2rem;background:var(--surface-card);border:1px solid var(--line);padding:1rem;align-items:flex-start}
.partner .pimg{flex:0 0 auto;width:64px;height:64px;background:var(--gold-deep);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-size:1.3rem}
.partner p{font-size:.92rem;color:var(--ink-soft);font-style:italic}
.partner .who{margin-top:.5rem;font-size:.82rem;font-style:normal}
.partner .who b{color:var(--navy);display:block}

/* ---------- v6: listing detail gallery ---------- */
.gallery .big{width:100%;height:300px;object-fit:cover;background:var(--cream-2)}
.gallery .thumbs{display:flex;gap:.45rem;margin-top:.5rem;flex-wrap:wrap}
.gallery .thumbs img{width:72px;height:54px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:.7;transition:.2s}
.gallery .thumbs img:hover{opacity:1}
.gallery .thumbs img.on{border-color:var(--accent);opacity:1}

/* ============================================================
 * v79 — About promise 2x2 grid + footer quick links two columns
 * ============================================================ */
.values.c4{grid-template-columns:repeat(2,1fr)}
/* v114: 页脚现在是 5 个等宽栏目排在一行（原先第一列是品牌 logo，独占整行）。
   logo 列在 v113 已删除，这里把「第 2 列两栏排」改为全部单栏排，避免重排后
   某一列突然变成双列。 */
.foot-grid>div ul{display:block}

@media (max-width:980px){
  .values.c4{grid-template-columns:1fr}
}

/* ============================================================
 * v80 — espresso brown theme, matched to the new BR logo
 * (logo background #3B2A1E) + centered sheet layout
 * ============================================================ */
:root{--brown:#3B2A1E;--gold-lt:#D9B36A}

/* ---- v91 background areas ----------------------------------------------
   v80 flattened EVERY surface to the same --brown #3B2A1E, including .alt and
   .alt-2, which had carried the vertical rhythm of the page (cream / white /
   cream-2 in the legacy theme). The homepage has 13 sections, and with one
   flat brown behind all of them a reader loses any sense of "where am I in
   the page".

   Three-tone brown scale, same hue, ~8% lightness steps:
     --surface-0 #2A1D14  chrome + emphasis bands (topbar, header, hero, footer,
                          stats, mission, quote, fee-box, rental-cta, subhero)
     --surface-1 #3B2A1E  body / plain sections
     --surface-2 #4A3628  .alt sections
   and .alt-2 drops back to --surface-0, so the home page now reads
     0,2,1,2,0,0,2,2,2,2,0,1,1
   instead of a single flat tone.
   Text contrast on all three stays AAA: ink 14.04 / 11.74 / 9.75:1. */
html{background:#E8E2D8} /* v91: was #F1EFE9 — a cool grey that clashed with the warm brown sheet; #E8E2D8 carries a little brown so the margins read as part of the same palette */
body{
  max-width:1240px;margin:0 auto;
  background:var(--surface-1);
  --ink:#F3EDE3;--ink-soft:#DACDB6;--navy:#F3E9D8;--line:rgba(217,179,106,.25);
  /* v91 — CRITICAL. No gold reaches AA on brown except the light ones:
       --gold-deep #7F641C on #3B2A1E = 2.44:1 FAIL (invisible)
       --gold-lt   #D9B36A on #3B2A1E = 6.91:1 AA
     So the surface-aware --accent must flip to gold-lt here. Without this
     override every brown-surface accent (.kicker rule, nav hover underline,
     .broker .role, .member .role, .ref .big, .post .cat, .map-note a …)
     renders at 2.4:1 and effectively disappears. */
  --accent:#D9B36A;
  color:var(--ink);
  box-shadow:0 0 46px rgba(26,14,5,.35);
  color-scheme:light dark; /* v91: dark sheet, so native scrollbars / select popovers should render dark instead of the system default light */
}
body.app{background:var(--surface-1)}

/* ---- chrome + emphasis bands -> deepest brown ---- */
.topbar{background:var(--surface-0);border-bottom:1px solid rgba(217,179,106,.28)}
/* v95: portal sign-in entry added to the topbar, right next to the contact
   email. --gold #F3C88B on --surface-0 #2A1D14 = 8.75:1 (AAA), and the
   separator reuses the same hairline gold already used for border accents. */
.topbar .tb-right{display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.topbar .tb-sep{color:rgba(217,179,106,.6)}
.topbar a.tb-login{color:#F3C88B;font-weight:700}
.topbar a.tb-login:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* v112: header used --surface-0 #2A1D14, which reads as near-black. Switch to
   the espresso/coffee tone #3B2A1E already used by the dropdown submenus, so
   the whole menu bar matches the panels it opens. Gold hairline stays. */
header.site{background:#3B2A1E;border-bottom:1px solid rgba(217,179,106,.28)}
.subhero{background:var(--surface-0);border-bottom:1px solid rgba(217,179,106,.18)}
.subhero::before{background:linear-gradient(115deg,transparent 62%,rgba(217,179,106,.22) 62%,rgba(217,179,106,.22) 64.5%,transparent 64.5%)}

/* ---- alternating section rhythm (restored) ---- */
.alt{background:var(--surface-2)}
.alt-2{background:var(--surface-0)}

.page-nav{background:var(--surface-2);border-bottom:1px solid rgba(217,179,106,.18)}
.stats{background:var(--surface-0);border-top:1px solid rgba(217,179,106,.18);border-bottom:1px solid rgba(217,179,106,.18)}
.stats::before{background:linear-gradient(115deg,transparent 78%,rgba(217,179,106,.18) 78%,rgba(217,179,106,.18) 80%,transparent 80%)}
/* v168: trust stats wall — eXp-style numeric data bar on homepage */
.trust-stats{background:#2A1D14;color:#F3EFE6;border-top:1px solid rgba(217,179,106,.28);border-bottom:1px solid rgba(217,179,106,.28)}
.trust-stats .wrap{padding:2.4rem 1rem}
.trust-stats .ts-head{text-align:center;margin-bottom:1.6rem}
.trust-stats .ts-head .kicker{color:#F3C88B;letter-spacing:.18em;font-size:.78rem;text-transform:uppercase}
.trust-stats .ts-head h2{font-family:var(--serif);color:#F3EFE6;font-size:1.5rem;margin:.4rem 0 0}
.ts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem;text-align:center}
.ts-item{border-left:1px solid rgba(217,179,106,.2);padding:0 .4rem}
.ts-item:first-child{border-left:none}
.ts-num{font-family:var(--serif);font-size:2.3rem;font-weight:600;color:#F3C88B;line-height:1;display:block}
.ts-lab{font-size:.82rem;color:rgba(243,239,230,.78);margin-top:.55rem;letter-spacing:.01em;display:block;line-height:1.35}
@media(max-width:640px){.trust-stats .wrap{padding:1.8rem .6rem}.ts-num{font-size:1.85rem}.ts-grid{gap:1rem}}
.mission{background:var(--surface-0);border-top:1px solid rgba(217,179,106,.18);border-bottom:1px solid rgba(217,179,106,.18)}
.mission::before{background:linear-gradient(115deg,transparent 80%,rgba(217,179,106,.18) 80%,rgba(217,179,106,.18) 82%,transparent 82%)}
/* v91: the 6px left rule sat at --gold-deep #7F641C on brown = 2.44:1, so this
   quote's defining accent was effectively invisible. --gold #F3C88B gives
   8.75:1 AAA on brown and still clears 3:1 on the gold gradient that
   admin.html (which does not load app.css) still renders behind it. */
.quote{background:var(--surface-0);color:rgba(255,255,255,.95);border-left:6px solid var(--gold)}
.fee-box{background:var(--surface-0)}
.fee-box::after{display:none}
.fee-box .txt span{color:rgba(255,255,255,.92)} /* v91: was .8 = 3.75:1 on the light end; .92 = 5.01:1 AA */
.rental-cta{background:var(--surface-0)}
.rental-cta::after{display:none}
.rental-cta p{color:rgba(255,255,255,.92)} /* v91: same alpha fix */
footer.site{background:var(--surface-0)}
footer.site::before{display:none}

/* ---- v92: footer quick links = blue + underlined ----
   Requested explicitly. Two things had to be undone from the global rules:
     style.css:109  a{color:inherit;text-decoration:none}
     style.css:331  footer.site a:hover{color:#F3C88B}
   so the links were plain cream with no underline — they read as static text
   rather than as links. #8FB4D9 (already in the palette as --info) on the
   #2A1D14 footer is 7.55:1 AAA.

   Underline stays at full opacity but is offset 2px so it clears the CJK
   descenders in the Chinese footer labels.

   Deliberately NOT applied to footer.site h4 (group headings, not links).
   v97: .foot-base used to hold no anchors, and now carries the Privacy Policy /
   Terms of Service links required on a US commercial site that collects form
   data — they get the same treatment in the rule below. */
footer.site .foot-col a{
  color:#8FB4D9;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
footer.site .foot-col a:hover{color:#FFFFFF;text-decoration-thickness:2px}
/* 1.57:1 mutual — below the 3:1 non-text guidance, so hover also thickens the
   underline. Colour alone is not the only cue. */
footer.site .foot-col a:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

/* hero: brown-tinted veil over photo */
.hero{background:var(--surface-0) url("../assets/img/brand-hero.webp") center 35%/cover no-repeat}
.hero::before{
  background:
    linear-gradient(115deg,transparent 62%,rgba(217,179,106,.4) 62%,rgba(217,179,106,.4) 64.5%,transparent 64.5%),
    linear-gradient(90deg,rgba(42,26,16,.94) 0%,rgba(42,26,16,.8) 46%,rgba(42,26,16,.4) 100%),
    radial-gradient(1200px 600px at 85% -10%,rgba(217,179,106,.28),transparent 60%);
}
/* v91: the hero veil is a horizontal 90deg gradient because the desktop hero
   is a two-column grid — text left, image right. Below 980px .hero .wrap
   collapses to a single column and the image stacks UNDER the text, so a
   horizontal veil no longer protects the copy. Switch to vertical. */
@media (max-width:980px){
  .hero::before{
    background:
      linear-gradient(115deg,transparent 62%,rgba(217,179,106,.4) 62%,rgba(217,179,106,.4) 64.5%,transparent 64.5%),
      linear-gradient(180deg,rgba(42,26,16,.95) 0%,rgba(42,26,16,.88) 55%,rgba(42,26,16,.5) 100%),
      radial-gradient(1200px 600px at 85% -10%,rgba(217,179,106,.28),transparent 60%);
  }
}

/* ---- v92: full-width breakout REVERTED (was v91) ----
   v91 pushed .topbar and header.site to span the whole viewport with
   negative margins, on the theory that a floating 1240px bar above light
   margins looked broken. The site owner has since confirmed the opposite:
   the menu should match the page sheet width and simply leave whitespace on
   both sides. So the breakout is removed and the chrome sits inside the same
   1240px column as everything else, with html's #E8E2D8 showing at the edges.
   Note this only affects viewports wider than 1240px — below that, body is
   already 100% wide so the header always spanned the screen.
   Kept as a comment rather than deleted so the rationale isn't lost. */

/* ---- light-on-brown accents ---- */
.kicker{color:var(--gold-lt)}
.kicker::before{background:var(--gold-lt)}
nav.main a:hover{color:#fff}
.lang-switch{border-color:var(--gold-lt);color:var(--gold-lt)}
/* v92: was a hard #fff, which was correct on the brown sheet but made the
   portal's "Export Yearly Tax Records" button white-on-white inside its
   .app-card. --ink is already surface-aware (cream on brown, near-black on
   the white card), so this one change fixes both contexts:
     brown sheet -> #F3EDE3 = 16.35:1 AAA   (was #fff 16.35:1, no regression)
     white card  -> #1A1A1A = 16.28:1 AAA   (was #fff = 1.06:1, invisible)
   The hero CTA on en/zh index.html:78 sets its own inline colour:#fff and is
   unaffected, which is what we want there since it sits on a photo. */
.btn.ghost{color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--gold-deep);color:#fff} /* white on #7F641C = 5.61:1 AA on either surface */
.topbar .emergency{color:#F3C88B}

/* ---- white content containers keep dark text
       (reset the theme vars inside them) ----
   v91: added .flow .step, table.data, article.post-full, .btn.light.
   All four have a white/surface-input background but were missing from this
   list, so they inherited the brown-surface values:
     - .btn.light        -> --navy resolved to cream #F3E9D8 ON WHITE = invisible
     - .flow .step       -> --accent resolved to gold-lt #D9B36A on white = 1.98:1
     - table.data        -> same
     - article.post-full -> class is "post-full", so the .post entry never matched
   !! If you add a new white-surface component, add it here.

   v92 CRITICAL — redeclaring the custom properties alone is NOT enough.
   `body{color:var(--ink)}` is already COMPUTED to the brown-surface value
   (#F3EDE3) at the body level, and CSS inheritance passes that computed
   colour down, it does not re-resolve var(). So any descendant that has no
   explicit `color` of its own kept the pale cream text on the warm-white
   card — measured at 1.09:1, i.e. effectively invisible. That is the
   "content is unreadable" report on the portal Pay Rent / Statements /
   My Properties tables. Declaring `color:var(--ink)` HERE forces the
   container itself to re-resolve, so everything inside inherits #1A1A1A
   (16.28:1 AAA on #FAF7F1) instead.
   Elements that set their own colour (h2, th, .muted, .sub …) are unaffected
   because they already re-resolve against this container's variable values. */
.card,.value,.tech,.member,.aff,.ref,.price-card,.g-card,.post,.listing,.t-card,.m-card,
.calc,.detail .side,.map-frame,.corridor,.partner,.app-card,form.inq,form.lead,
.proj-grid figure,.proj-video,.filters,details.faq,.chip,.editor,.doc-editor,.bars,
.app-tabs button,.faq-tabs button,.auth-box .app-card,
.flow .step,table.data,article.post-full,.btn.light{
  --ink:#1A1A1A;--ink-soft:#4A4A46;--navy:#0A2A6B;--line:rgba(10,42,107,.18);
  --accent:#7F641C;
  color:var(--ink); /* v92: see the note above — this line is the actual fix */
}
/* v92: .btn.light joined the list above, which would have flattened its own
   navy label to --ink. Restore it explicitly (12.62:1 AAA on the card). */
.btn.light{color:var(--navy)}

/* ---- app pages (portal / admin) ---- */
body.app .ahead,body.app .phead{background:var(--brown);border-bottom:1px solid rgba(217,179,106,.28)}
.ahead img,.phead img{background:transparent;padding:0}

/* ---- footer: bottom-align the three columns + lower the EHO note ---- */
.foot-grid{align-items:end}
.foot-badges{padding:1.9rem 0 .8rem}
.foot-base{border-top:1px solid rgba(217,179,106,.2)}

/* v80.1 — footer fine-tuning */
.foot-base{color:rgba(245,238,226,.68)}
.foot-badges .fb-note{color:rgba(245,238,226,.78)}

/* v114 — 页脚 5 个栏目等宽一行
   v90 曾让 first-child（当时的品牌 logo 列）跨满整行。v113 删除 logo 列后，
   「业主服务 / For Owners」成了第一个子元素，于是被 grid-column:1/-1 撑成
   单独一行 —— 这就是"业主服务独占一行"的原因。去掉该规则，5 列自然一行。 */
.foot-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2rem 1.1rem;align-items:start}
.foot-grid .foot-col h4{margin-bottom:.5rem}
.foot-grid .foot-col ul li{margin-bottom:.32rem}
.foot-grid .foot-col a{overflow-wrap:anywhere}
@media (max-width:980px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 手机上页脚链接原只有 ~21px 高（纯文字行高），手指容易点错；
     加上下内边距把可点区域撑到 ~35px，又不至于让整个页脚翻倍变长。 */
  .foot-grid .foot-col ul li{margin-bottom:.1rem}
  .foot-grid .foot-col a{display:inline-block;padding:.45rem 0}
}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr}
}

/* ============================================================
   v97 — 手机版团队照片完整显示
   team-*.jpg 原图是正方形 600×600，而 .member.v5 .photo 固定 210px 高 +
   object-fit:cover，在手机上（卡片约 343px 宽）等于把方图裁成 343×210 的
   横窗，只露出一个头。单列布局下让相框改用图片自身的 1:1 比例：整张照片
   完整显示，卡片变高（客户确认"旁边留白也没事"，优先完整）。
   必须放在文件末尾：v5 团队卡片的规则在上方，同权重下后来的才生效。
   桌面端（>980px）保持原来的 210px 封面裁切不变。
   ============================================================ */
@media (max-width:980px){
  .member.v5 .photo{height:auto;aspect-ratio:1/1}
  .member.v5 .photo img{object-position:center}
  .member.v5:hover .photo img{transform:none}   /* 手机上没有 hover，去掉位移避免截图时错位 */
}

/* ============================================================
   v97 — legal pages (privacy.html / terms.html)
   Long-form prose on the brown sheet. Headings take the serif face plus the
   gold hairline the rest of the site already uses; body copy stays at --ink
   (14.04:1 AAA on --surface-1) instead of --ink-soft because these pages are
   read closely, not skimmed. Tables scroll horizontally on phones rather than
   collapsing, so the collect/share matrices stay legible without extra markup.
   ============================================================ */
.legal{max-width:64rem}
.legal-meta{font-size:.82rem;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:1.1rem}
.legal h3{
  font-family:var(--serif);font-size:1.16rem;font-weight:600;color:var(--navy);
  margin:1.6rem 0 .5rem;padding-top:.95rem;border-top:1px solid rgba(217,179,106,.22);
}
.legal h3:first-of-type{margin-top:.6rem;border-top:none;padding-top:0}
.legal p{color:var(--ink);font-size:.95rem;line-height:1.7;margin-bottom:.6rem}
.legal ul{margin:.15rem 0 .75rem;padding-left:1.3rem}
.legal li{color:var(--ink);font-size:.93rem;line-height:1.62;margin-bottom:.34rem}
.legal li::marker{color:var(--gold-lt)}
.legal b,.legal strong{color:#fff}
.legal a{color:var(--info);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:#fff}
.legal .callout{background:var(--surface-0);border-left:4px solid var(--gold);padding:.95rem 1.05rem;margin:1.1rem 0}
.legal .callout p{color:rgba(255,255,255,.9);font-size:.9rem;line-height:1.6;margin-bottom:.3rem}
.legal .callout p:last-child{margin-bottom:0}
.legal .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:.4rem 0 1rem}
.legal table{border-collapse:collapse;min-width:36rem;width:100%;font-size:.9rem}
.legal th{
  text-align:left;color:var(--gold-lt);font-weight:700;font-size:.74rem;letter-spacing:.11em;
  text-transform:uppercase;padding:.45rem .6rem .45rem 0;border-bottom:1px solid rgba(217,179,106,.4);
}
.legal td{padding:.5rem .6rem .5rem 0;border-bottom:1px solid rgba(217,179,106,.16);color:var(--ink);vertical-align:top;line-height:1.5}
/* v97: the legal links in the footer bar. Same --info blue + underline as the
   footer columns (7.55:1 AAA on the footer's --surface-0), and the separator
   dot sits at the muted .foot-base colour so it does not compete. */
.foot-base .legal-links{display:inline-flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.foot-base a{color:#8FB4D9;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
.foot-base a:hover{color:#fff;text-decoration-thickness:2px}
.foot-base a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* v102 — city guide index + city intelligence modules
 * (market report / local rental rules / case studies)
 * Two scopes:
 *   · LIGHT CARDS (.city-index, .city-rules li, .case, .city-callout) sit on the
 *     dark section bands, so they re-resolve to #1A1A1A ink on #FAF7F1 — same
 *     token group as .card / .m-card / .chip.
 *   · .city-table and .city-note are TRANSPARENT on the dark band, so they must
 *     stay on the section's own (dark-theme) tokens: light ink, gold rules.
 * Never mix the two groups — that is what produces dark-on-dark text.
 * ============================================================ */
.city-index,.city-rules li,.case,.city-callout{
  --ink:#1A1A1A;--ink-soft:#4A4A46;--navy:#0A2A6B;--line:rgba(10,42,107,.18);
  --accent:#7F641C;
  color:var(--ink);
}

/* --- city guide index: sits under the I-10 route block in Service Areas --- */
.city-index{
  margin-top:.9rem;background:var(--surface-card);border:1px solid var(--line);
  border-left:4px solid var(--gold-deep);padding:1rem 1.1rem;
}
.city-index h3{font-family:var(--serif);color:var(--navy);font-size:1.16rem;font-weight:600;margin-bottom:.2rem}
.city-index .hint{font-size:.85rem;color:var(--ink-soft);margin-bottom:.75rem;line-height:1.45}
.city-index ul{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem .6rem;padding:0;margin:0}
.city-index li{margin:0;padding:0}
.city-index a{
  display:flex;align-items:center;gap:.5rem;font-size:.87rem;font-weight:600;color:var(--navy);
  padding:.45rem .55rem;border:1px solid var(--line);text-decoration:none;line-height:1.25;
  transition:border-color .15s,color .15s,background .15s;
}
.city-index a:hover{border-color:var(--accent);color:var(--accent);background:rgba(127,100,28,.07)}
.city-index a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.city-index .st{
  flex:none;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);
  border:1px solid var(--line);padding:.08rem .32rem;
}

/* --- the I-10 corridor SVG: city nodes are real links --- */
.corridor svg a{cursor:pointer}
.corridor svg a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.corridor svg a:hover text{fill:var(--accent);text-decoration:underline}
.corridor svg a:hover circle{stroke:var(--accent);stroke-width:2}

/* --- monthly market report table (transparent on the dark section band) --- */
.city-table{width:100%;border-collapse:collapse;margin:.3rem 0 .2rem;font-size:.92rem}
.city-table caption{
  caption-side:top;text-align:left;font-family:var(--serif);color:var(--gold-lt);
  font-size:1.02rem;font-weight:600;padding-bottom:.4rem;
}
.city-table th{
  text-align:left;font-size:.71rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-lt);font-weight:700;padding:.45rem .55rem .45rem 0;
  border-bottom:1px solid rgba(217,179,106,.4);white-space:nowrap;
}
.city-table td{padding:.5rem .55rem .5rem 0;border-bottom:1px solid rgba(217,179,106,.16);color:var(--ink);line-height:1.45;vertical-align:top}
.city-table td:first-child{font-weight:600;color:var(--ink)}
.city-table td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--gold-lt)}
.city-table tbody tr:last-child td{border-bottom:none}
.city-note{font-size:.78rem;color:var(--ink-soft);margin-top:.55rem;line-height:1.55}
.city-note a{color:var(--gold-lt);text-decoration:underline;text-underline-offset:2px}

/* --- local rental rules --- */
.city-rules{list-style:none;padding:0;margin:.3rem 0 0;display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.city-rules li{
  background:var(--surface-card);border:1px solid var(--line);border-top:3px solid var(--gold-deep);
  padding:.8rem .9rem;font-size:.9rem;color:var(--ink-soft);line-height:1.5;margin:0;
}
.city-rules li b{color:var(--navy);font-weight:700}
.city-rules li > b:first-of-type{
  display:block;font-family:var(--serif);color:var(--navy);
  font-size:1.02rem;font-weight:600;margin-bottom:.22rem;
}
.city-rules li .cite{display:block;margin-top:.4rem;font-size:.73rem;color:var(--ink-soft);opacity:.9}
.city-callout{
  margin-top:.9rem;background:var(--surface-card);border:1px solid var(--line);
  border-left:4px solid var(--gold-deep);padding:.9rem 1.05rem;
}
.city-callout p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.55}
.city-callout p+p{margin-top:.4rem}
.city-callout b{color:var(--navy)}

/* --- case studies --- */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:.5rem}
.case{background:var(--surface-card);border:1px solid var(--line);padding:1rem;display:flex;flex-direction:column}
.case-tag{font-size:.69rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:.32rem}
.case h3{font-family:var(--serif);color:var(--navy);font-size:1.06rem;font-weight:600;margin-bottom:.45rem}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:.22rem .6rem;margin:0 0 .55rem;font-size:.85rem}
.case dt{color:var(--ink-soft)}
.case dd{margin:0;color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.case p{font-size:.88rem;color:var(--ink-soft);line-height:1.5;margin:0}

@media (max-width:900px){
  .city-index ul{grid-template-columns:repeat(2,1fr)}
  .city-rules{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr}
}
@media (max-width:560px){
  .city-index ul{grid-template-columns:1fr}
}

/* ============ v1: 导航「免费估价」入口 ============ */
.nav-estimate{
  display:inline-flex;align-items:center;gap:.32rem;
  margin-left:.45rem;padding:.42rem .85rem;border-radius:999px;
  background:var(--gold-deep);color:#fff;font-weight:700;font-size:.84rem;
  text-decoration:none;line-height:1;white-space:nowrap;
  box-shadow:0 2px 8px rgba(10,42,107,.18);transition:.2s;
}
.nav-estimate::before{content:"\1F4CD";font-size:.95rem;margin-right:.1rem}
.nav-estimate:hover{background:var(--navy);color:#fff;transform:translateY(-1px)}

/* ============ v1: 留邮箱下载 / 估价 弹窗 ============ */
.lm-lock{overflow:hidden}
.lm-overlay{
  position:fixed;inset:0;z-index:1000;display:none;
  align-items:center;justify-content:center;padding:1.2rem;
  background:rgba(10,20,40,.55);
}
.lm-overlay.on{display:flex;animation:lmFade .2s ease}
@keyframes lmFade{from{opacity:0}to{opacity:1}}
.lm-modal{
  position:relative;width:100%;max-width:440px;max-height:92vh;overflow:auto;
  background:#FFFDF9;border:1px solid var(--line);
  border-top:5px solid var(--gold-deep);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);padding:1.6rem 1.5rem 1.4rem;
  animation:lmPop .22s ease;
  color:#1A1A1A;font-family:var(--sans);
  /* v152-fix: body 作用域里 --navy/--ink-soft 等被翻成浅色(浅字配棕底)，
     弹窗必须自包含配色，强制浅底深字，否则浅字套浅底整片看不清 */
  --navy:#0A2A6B;--ink:#1A1A1A;--ink-soft:#4A4A46;--line-strong:#C9C2B4;--cream:#FFFFFF;
}
@keyframes lmPop{from{transform:translateY(14px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
.lm-close{
  position:absolute;top:.45rem;right:.55rem;width:34px;height:34px;
  border:none;background:transparent;color:var(--ink-soft);
  font-size:1.7rem;line-height:1;cursor:pointer;border-radius:8px;
}
.lm-close:hover{background:var(--cream-2);color:var(--navy)}
.lm-head{margin-bottom:1rem}
.lm-tag{
  display:inline-block;background:var(--gold-deep);color:#fff;
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:.28rem .7rem;border-radius:999px;margin-bottom:.6rem;
}
.lm-head h3{font-family:var(--serif);color:var(--navy);font-size:1.4rem;font-weight:600;line-height:1.25;margin:0}
.lm-sub{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:.5rem 0 0}
.lm-form{display:flex;flex-direction:column;gap:.7rem}
.lm-form label{display:flex;flex-direction:column;gap:.28rem;font-size:.84rem;font-weight:600;color:var(--navy)}
.lm-form .req{color:#c0392b}
.lm-form input,.lm-form textarea{
  width:100%;padding:.6rem .7rem;border:1.5px solid var(--line-strong);
  background:var(--cream);border-radius:8px;font-size:.95rem;font-family:var(--sans);
  color:var(--ink,#1A1A1A);font-weight:400;
}
.lm-form textarea{resize:vertical}
.lm-form input:focus,.lm-form textarea:focus{outline:none;border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(217,179,106,.25)}
.lm-submit{
  margin-top:.3rem;padding:.78rem 1rem;border:none;border-radius:9px;
  background:var(--gold-deep);color:#fff;font-weight:700;font-size:1rem;
  font-family:var(--sans);cursor:pointer;transition:.2s;
}
.lm-submit:hover{background:var(--navy)}
.lm-submit:disabled{opacity:.6;cursor:default}
.lm-privacy{font-size:.76rem;color:var(--ink-soft);line-height:1.45;margin:.1rem 0 0}
.lm-err{font-size:.84rem;color:#c0392b;margin:.1rem 0 0;font-weight:600}
.lm-success{text-align:center;padding:.4rem 0}
.lm-check{
  width:56px;height:56px;margin:0 auto .8rem;border-radius:50%;
  background:var(--success,#2e8b57);color:#fff;font-size:1.8rem;display:grid;place-items:center;
}
.lm-success h3{font-family:var(--serif);color:var(--navy);font-size:1.3rem;margin:0 0 .4rem}
.lm-success p{color:var(--ink-soft);font-size:.92rem;line-height:1.5;margin:.3rem 0}
.lm-success .lm-tel a{color:var(--gold-deep);font-weight:700}
.lm-dl{
  display:inline-block;margin-top:.9rem;padding:.7rem 1.2rem;border-radius:9px;
  background:var(--navy);color:#fff;font-weight:700;text-decoration:none;font-size:.95rem;
}
.lm-dl:hover{background:var(--gold-deep)}

/* ============ v1: 首页 Lead Magnet 资源卡片 ============ */
.leadmagnets{background:var(--cream-2);padding:2.4rem 0 2.8rem;border-top:1px solid var(--line)}
.leadmagnets .lm-sec-head{text-align:center;max-width:46rem;margin:0 auto 1.6rem}
.leadmagnets .lm-sec-head .kicker{color:var(--gold-deep);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem}
.leadmagnets .lm-sec-head h2{font-family:var(--serif);color:var(--navy);font-size:clamp(1.5rem,3vw,2.1rem);margin:.4rem 0 .5rem;font-weight:600}
.leadmagnets .lm-sec-head p{color:var(--ink-soft);font-size:1rem;line-height:1.5}
.lm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.1rem;max-width:1100px;margin:0 auto}
.lm-card{display:flex;flex-direction:column;background:var(--surface-card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:.25s}
.lm-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.lm-card .cv{height:118px;display:flex;align-items:center;justify-content:center;gap:.5rem;background:linear-gradient(135deg,var(--navy),#16335f);color:#fff;font-size:2.4rem}
.lm-card.alt .cv{background:linear-gradient(135deg,var(--gold-deep),#9a7a2a)}
.lm-card .ct{padding:1rem 1.05rem 1.1rem;display:flex;flex-direction:column;flex:1}
.lm-card .ft{align-self:flex-start;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .55rem;border-radius:999px;background:rgba(217,179,106,.18);color:var(--gold-deep);margin-bottom:.5rem}
.lm-card h3{font-family:var(--serif);color:var(--navy);font-size:1.12rem;font-weight:600;line-height:1.3;margin:0 0 .4rem}
.lm-card p{color:var(--ink-soft);font-size:.86rem;line-height:1.45;flex:1;margin:0 0 .9rem}
.lm-card .dl-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.62rem .8rem;border:none;border-radius:8px;cursor:pointer;background:var(--gold-deep);color:#fff;font-weight:700;font-size:.9rem;font-family:var(--sans);transition:.2s}
.lm-card .dl-btn:hover{background:var(--navy)}
.lm-card .dl-btn .lock{font-size:.95rem}
@media (max-width:640px){.lm-grid{grid-template-columns:1fr 1fr;gap:.8rem}.leadmagnets{padding:1.8rem 0 2.2rem}}
@media (max-width:440px){.lm-grid{grid-template-columns:1fr}}

/* ============ v2: hero 免费估价入口 ============ */
.hero-estimate{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;
  padding:.66rem 1.25rem;border-radius:999px;
  background:var(--gold-deep);color:#fff;font-weight:700;font-size:.95rem;
  text-decoration:none;line-height:1.1;white-space:nowrap;
  box-shadow:0 4px 14px rgba(10,42,107,.22);transition:.2s;
}
.hero-estimate:hover{background:var(--navy);transform:translateY(-2px)}
.hero-estimate::before{content:"\1F4CD";font-size:1.05rem}

/* ============ v2: 资源中心 单一入口 + 多选弹窗 ============ */
.lm-single{max-width:760px;margin:0 auto}
.lm-entry{
  display:flex;align-items:center;gap:1rem;width:100%;text-align:left;
  padding:1.1rem 1.3rem;border:1.5px solid rgba(255,255,255,.18);border-radius:14px;
  background:#6F4E37;cursor:pointer;transition:.2s;
}
.lm-entry:hover{border-color:#EAC56A;box-shadow:0 10px 26px rgba(95,58,33,.32);transform:translateY(-2px)}
.lm-entry-ic{font-size:2rem;flex:0 0 auto;line-height:1;filter:brightness(1.15)}
.lm-entry-tx{display:flex;flex-direction:column;gap:.25rem;flex:1;min-width:0}
.lm-entry-tx strong{font-family:var(--serif);color:#FBF3E9;font-size:1.1rem;font-weight:600}
.lm-entry-tx span{color:rgba(255,255,255,.82);font-size:.9rem;line-height:1.5}
.lm-entry-ar{font-size:1.4rem;color:#EAC56A;flex:0 0 auto;font-weight:700}
.lm-flist{list-style:none;margin:0 0 .2rem;padding:0;display:flex;flex-direction:column;gap:.4rem}
.lm-fi label{display:flex;align-items:flex-start;gap:.6rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:10px;cursor:pointer;transition:.15s}
.lm-fi label:hover{background:var(--cream-2);border-color:var(--gold-deep)}
.lm-fi input[type=checkbox]{margin-top:.2rem;width:18px;height:18px;accent-color:var(--gold-deep);flex:0 0 auto}
.lm-fi-ic{font-size:1.4rem;flex:0 0 auto;line-height:1.2}
.lm-fi-meta{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.lm-fi-ft{font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.lm-fi-t{font-size:.92rem;font-weight:600;color:var(--navy);line-height:1.3}
.lm-dl-list{list-style:none;margin:.6rem 0 0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.lm-dl-item .lm-dl{display:block;text-align:center}

/* v154: 业主服务页「华人指南」入口（咖啡色，与下载主题一致），点击触发资源中心弹窗 */
.guide-cta{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  margin-top:1.6rem;padding:1.3rem 1.5rem;border-radius:14px;
  background:#6F4E37;border:1px solid #8A6A4F;
  box-shadow:0 12px 30px rgba(111,78,55,.18);
}
.guide-cta .gc-tx{flex:1;min-width:240px}
.guide-cta .gc-tx .kicker{color:#EAC56A}
.guide-cta .gc-tx h3{font-family:var(--serif);color:#FBF3E9;font-size:1.25rem;margin:.2rem 0 .35rem;font-weight:600;line-height:1.25}
.guide-cta .gc-tx p{color:#EADFD2;font-size:.92rem;line-height:1.55;margin:0}
.guide-cta .btn{
  background:#EAC56A;border-color:#EAC56A;color:#3A2A1C;flex:0 0 auto;
  font-weight:700;white-space:nowrap;
}
.guide-cta .btn:hover{background:#F3D27E;border-color:#F3D27E}
@media (max-width:560px){
  .guide-cta{flex-direction:column;align-items:stretch}
  .guide-cta .btn{width:100%;justify-content:center}
}

/* ============ 博客正文样式（市场动态文章 / Lead Magnet 网页版） ============ */
.post-full .content .blog-prose{color:#2a2018;line-height:1.78;font-size:1.02rem}
.post-full .content .blog-prose h2{font-family:var(--serif);color:#0A2A6B;font-size:1.5rem;margin:1.9rem 0 .9rem;padding-bottom:.45rem;border-bottom:2px solid #F3C88B;display:flex;align-items:center;gap:.6rem;line-height:1.3}
.post-full .content .blog-prose h2 .no{display:inline-flex;align-items:center;justify-content:center;min-width:1.9rem;height:1.9rem;background:#0A2A6B;color:#F3C88B;border-radius:8px;font-size:1rem;font-weight:700;flex:0 0 auto}
.post-full .content .blog-prose h3{font-family:var(--serif);color:#0A2A6B;font-size:1.2rem;margin:1.4rem 0 .5rem}
.post-full .content .blog-prose p{margin:.65rem 0;color:#2a2018;line-height:1.78}
.post-full .content .blog-prose ul,.post-full .content .blog-prose ol{margin:.7rem 0;padding-left:1.5rem;color:#2a2018}
.post-full .content .blog-prose li{margin:.35rem 0}
.post-full .content .blog-prose strong{color:#0A2A6B}
.post-full .content .blog-prose table{width:100%;border-collapse:collapse;margin:1.1rem 0;font-size:.92rem;background:#fff}
.post-full .content .blog-prose th,.post-full .content .blog-prose td{border:1px solid #e0d6c4;padding:.55rem .75rem;text-align:left;vertical-align:top}
.post-full .content .blog-prose thead th{background:#0A2A6B;color:#fff;font-weight:600}
.post-full .content .blog-prose tbody tr:nth-child(even){background:#faf6ec}
.post-full .content .blog-prose .callout{background:#f5efe2;border-left:4px solid #0A2A6B;border-radius:8px;padding:.85rem 1.05rem;margin:1.1rem 0;color:#2a2018}
.post-full .content .blog-prose .callout .t{font-weight:700;color:#0A2A6B}
.post-full .content .blog-prose .warn.callout{background:#fbeee6;border-left-color:#b3261e}
.post-full .content .blog-prose .warn.callout .t{color:#b3261e}
.post-full .content .blog-prose .pfoot{font-size:.8rem;color:#9a8f7e;text-align:right;margin:.7rem 0 0}
.post-full .content .blog-prose .en{color:#9a8f7e;font-size:.82em;font-style:italic}
.post-full .content .blog-prose .bp-cta{background:#f3f0e6;border:1px solid #e0d6c4;border-radius:10px;padding:.95rem 1.15rem;margin:1.5rem 0;line-height:1.7}
.post-full .content .blog-prose .bp-cta a{color:#0A2A6B;font-weight:600}
.post-full .content .blog-prose .bp-btn{display:inline-block;background:#0A2A6B;color:#fff!important;padding:.6rem 1.15rem;border-radius:9px;text-decoration:none;margin:.2rem .6rem .2rem 0;font-weight:600}
.post-full .content .blog-prose .bp-disc{font-size:.78rem;color:#9a8f7e;border-top:1px dashed #d8cdb8;padding-top:.85rem;margin-top:1.1rem;line-height:1.5}
.post-full .content .blog-prose .bp-note{font-size:.82rem;color:#9a8f7e;margin:.3rem 0}