/* ============================================================
   continuum.css — Listing page extensions for PropTrace SG
   Extends static/style.css. Only adds patterns specific to a
   real-estate listing page (hero, facts table, comparison table,
   floor/site plan figures, room gallery, contact CTA).
   All colors/fonts/spacing reuse the main style.css variables.
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   LISTING HERO
   Two-column split: main text on the left, asking-price card on
   the right. Stacks vertically under ~820 px.
   ───────────────────────────────────────────────────────────── */
.listing-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:32px;
  padding:36px 0 14px;
  align-items:start;
  position:relative;
}
.listing-hero-tags{
  display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
}
.listing-hero-title{
  font-family:'Playfair Display',serif;
  font-size:32px;font-weight:700;color:var(--text);
  line-height:1.18;letter-spacing:-.5px;
  margin-bottom:12px;
}
.listing-hero-sub{
  font-size:14.5px;color:var(--text2);line-height:1.7;
  max-width:640px;
  margin-bottom:20px;
}
.listing-hero-sub strong{color:var(--text);font-weight:600}

.listing-hero-highlights{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px 14px;
  max-width:640px;
}
.hl-item{
  display:flex;flex-direction:column;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.hl-key{
  font-size:10px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text3);
  margin-bottom:2px;
}
.hl-val{
  font-size:13px;font-weight:600;color:var(--text);
}

/* Right-hand asking-price card */
.listing-hero-price{
  background:linear-gradient(135deg, rgba(99,102,241,.07) 0%, rgba(99,102,241,.03) 100%);
  border:1px solid rgba(99,102,241,.22);
  border-left:3px solid var(--primary);
  border-radius:var(--radius);
  padding:22px 22px 20px;
  box-shadow:0 2px 20px rgba(99,102,241,.07);
  position:sticky;
  top:72px;
}
.lhp-label{
  font-size:11px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text2);
  margin-bottom:6px;
}
.lhp-value{
  font-family:'Playfair Display',serif;
  font-size:38px;font-weight:700;color:var(--text);
  letter-spacing:-.8px;line-height:1;
  margin-bottom:6px;
}
.lhp-tagline{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:700;color:var(--text);
  letter-spacing:-.3px;line-height:1.25;
  margin-bottom:10px;
}
.lhp-sub{
  font-size:12px;color:var(--text3);
  margin-bottom:14px;
}
.lhp-cta{
  width:100%;justify-content:center;
  padding:10px 18px;font-size:13px;
}
.lhp-pdf-link{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:10px;
  padding:8px 10px;
  font-size:12px;font-weight:600;
  color:var(--text2);
  background:transparent;
  border:1px dashed var(--border2);
  border-radius:var(--radius-sm);
  text-decoration:none;
  transition:color .15s, border-color .15s, background .15s;
}
.lhp-pdf-link:hover{
  color:var(--primary);
  border-color:var(--primary);
  background:rgba(79,70,229,.04);
}
.lhp-pdf-link svg{flex-shrink:0}
.lhp-hint{
  font-size:10px;color:var(--text3);
  text-align:center;margin-top:8px;
}

/* ─────────────────────────────────────────────────────────────
   KILLER OVERVIEW — full-width visual summary card
   Sits between the hero and At a Glance. The image itself carries
   shadow + rounded corners; no extra card chrome.
   ───────────────────────────────────────────────────────────── */
.killer-overview{
  margin:0 0 22px;
  padding:0;
}
.killer-overview picture,
.killer-overview img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:var(--radius);
  box-shadow:
    0 1px 3px rgba(17,24,39,.06),
    0 8px 28px rgba(17,24,39,.09);
  background:var(--surface2);
}
@media(max-width:720px){
  .killer-overview{margin-bottom:18px}
  .killer-overview img{
    border-radius:var(--radius-sm);
    box-shadow:
      0 1px 2px rgba(17,24,39,.05),
      0 4px 14px rgba(17,24,39,.07);
  }
}

/* ─────────────────────────────────────────────────────────────
   SOCIAL SHARE BAR
   ───────────────────────────────────────────────────────────── */
.share-bar{
  display:flex;align-items:center;gap:8px;
  margin:6px 0 0;
}
.share-bar-label{
  font-size:10.5px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;color:var(--text3);
  margin-right:4px;white-space:nowrap;
}
.share-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;
  font-size:11.5px;font-weight:600;
  color:var(--text2);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:color .15s, border-color .15s, background .15s;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
.share-btn:hover{
  color:var(--primary);
  border-color:var(--primary);
  background:rgba(79,70,229,.04);
}
.share-btn svg{flex-shrink:0}
.share-flash{
  color:#065f46 !important;
  border-color:#065f46 !important;
  background:rgba(5,150,105,.06) !important;
}
@media(max-width:640px){
  .share-bar{gap:6px;flex-wrap:wrap}
  .share-bar-label{font-size:10px;margin-right:2px}
  .share-btn{padding:7px 10px;font-size:11px;min-height:36px}
}

/* ─────────────────────────────────────────────────────────────
   BREADCRUMB NAVIGATION
   Mirrors the JSON-LD BreadcrumbList. Sits just below the header
   on every content page. Small, unobtrusive, keyboard-accessible.
   ───────────────────────────────────────────────────────────── */
.crumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  padding:14px 0 4px;
  font-size:11.5px;
  color:var(--text3);
  line-height:1.4;
}
.crumbs a{
  color:var(--text2);
  text-decoration:none;
  padding:2px 0;
}
.crumbs a:hover{color:var(--primary);text-decoration:underline}
.crumbs-sep{color:var(--text3);opacity:.6}
.crumbs-current{
  color:var(--text);
  font-weight:600;
}
@media(max-width:640px){
  .crumbs{font-size:11px;padding:10px 0 2px}
}


/* ─────────────────────────────────────────────────────────────
   TRANSACTION HISTORY — collapsible, sits near the bottom of the
   listing page. Uses native <details>/<summary> so it's accessible
   and works without JS. Styled subtly so it reads as a secondary
   reference, not a primary feature of the listing.
   ───────────────────────────────────────────────────────────── */
.tx-history-wrap{
  margin:24px 0 6px;
}
.tx-history-details{
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  overflow:hidden;
}
.tx-history-details[open]{
  background:var(--surface);
  border-color:var(--border2);
}
.tx-history-summary{
  list-style:none;
  cursor:pointer;
  padding:14px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  transition:background .15s;
  user-select:none;
}
.tx-history-summary::-webkit-details-marker{display:none}
.tx-history-summary::marker{content:''}
.tx-history-summary:hover{background:rgba(79,70,229,.03)}
.tx-history-details[open] .tx-history-summary{
  border-bottom:1px solid var(--border);
  background:var(--surface2);
}
.tx-history-summary-q{
  font-size:13px;
  font-weight:600;
  color:var(--text);
}
.tx-history-summary-q::before{
  content:'›';
  display:inline-block;
  width:14px;
  margin-right:6px;
  color:var(--primary);
  font-weight:700;
  transition:transform .15s;
}
.tx-history-details[open] .tx-history-summary-q::before{
  transform:rotate(90deg);
}
.tx-history-summary-hint{
  font-size:11px;
  color:var(--text3);
  font-weight:500;
}
.tx-history-body{
  padding:16px 18px 14px;
}
.tx-history-intro{
  font-size:12.5px;
  color:var(--text2);
  line-height:1.7;
  margin:2px 0 12px;
}
.tx-history-intro strong{color:var(--text);font-weight:600}
.tx-history-table{
  font-size:12px;
  width:100%;
}
.tx-history-table thead th{
  background:var(--surface2);
  color:var(--text2);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.6px;
  text-transform:uppercase;
  padding:8px 11px;
  white-space:nowrap;
}
.tx-history-table td{
  padding:8px 11px;
  color:var(--text2);
  white-space:nowrap;
}
.tx-history-table tbody tr + tr td{
  border-top:1px solid var(--border);
}
.tx-history-table td:nth-child(5){
  color:var(--text);
  font-weight:600;
}
.tx-history-note{
  font-size:10.5px;
  color:var(--text3);
  line-height:1.7;
  margin:10px 0 0;
}
.tx-history-note strong{color:var(--text2);font-weight:600}

@media(max-width:640px){
  .tx-history-summary{padding:12px 14px}
  .tx-history-summary-q{font-size:12.5px}
  .tx-history-summary-hint{font-size:10.5px}
  .tx-history-body{padding:12px 14px}
  .tx-history-intro{font-size:12px}
  .tx-history-table{font-size:11px;min-width:540px}
  .tx-history-table thead th{padding:6px 8px;font-size:9px}
  .tx-history-table td{padding:6px 8px}
  .tx-history-note{font-size:10px}
}

/* ─────────────────────────────────────────────────────────────
   EXPLAINER VIDEO CARD
   ───────────────────────────────────────────────────────────── */
.video-card{
  padding:20px 24px 18px;
  margin-bottom:18px;
}
.video-wrap{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#000;
}
.video-wrap video{
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;
  object-fit:contain;
  border-radius:var(--radius-sm);
}
.video-caption{
  font-size:11.5px;
  color:var(--text3);
  line-height:1.6;
  margin-top:10px;
}
@media(max-width:640px){
  .video-card{padding:16px 18px 14px}
  .video-wrap video{max-height:60vh}
  .video-caption{font-size:11px}
}

/* Gold accent divider under the hero */
.listing-divider{
  border:none;
  border-top:1px solid var(--border);
  margin:8px 0 28px;
  position:relative;
}
.listing-divider::after{
  content:'';position:absolute;top:-1px;left:0;
  width:80px;height:2px;
  background:linear-gradient(90deg,var(--primary),transparent);
  border-radius:1px;
}

/* Responsive: stack under 860 px */
@media(max-width:860px){
  .listing-hero{
    grid-template-columns:1fr;
    gap:20px;
  }
  .listing-hero-title{font-size:26px}
  .listing-hero-price{position:static}
}
@media(max-width:540px){
  .listing-hero{padding:20px 0 10px}
  .listing-hero-title{font-size:22px}
  .listing-hero-sub{font-size:13.5px}
  .lhp-value{font-size:32px}
}


/* ─────────────────────────────────────────────────────────────
   "AT A GLANCE" TABLE
   Uses the site's .table-wrap + table baseline but adds a
   two-column key/value layout with shaded labels.
   ───────────────────────────────────────────────────────────── */
.at-glance{
  table-layout:fixed;
}
.at-glance th{
  width:180px;
  background:var(--surface2);
  color:var(--text2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.8px;
  text-transform:uppercase;
  text-align:left;
  padding:12px 14px;
  border-right:1px solid var(--border);
  vertical-align:middle;
  white-space:nowrap;
}
.at-glance td{
  padding:12px 16px;
  font-size:13.5px;
  color:var(--text);
  vertical-align:middle;
}
.at-glance tr + tr th,
.at-glance tr + tr td{
  border-top:1px solid var(--border);
}
.at-glance tr:hover td,
.at-glance tr:hover th{
  background:var(--surface2);
}
.emph-fh{color:#065f46;letter-spacing:.5px}
.emph-price{color:var(--primary);font-weight:700}
.emph-soldout{color:#991b1b;font-weight:700}

/* "Sold out from developer" tag in the hero — urgent red-tinted style */
.tag-soldout{
  background:rgba(153,27,27,.08);
  color:#991b1b;
  border:1px solid rgba(153,27,27,.25);
  font-weight:700;
  letter-spacing:.4px;
}


/* ─────────────────────────────────────────────────────────────
   WHY THIS UNIT
   Numbered cards, each with a big indigo numeral on the left
   and copy + optional comparison table on the right.
   ───────────────────────────────────────────────────────────── */
.section-heading{
  font-family:'Playfair Display',serif;
  font-size:26px;font-weight:700;color:var(--text);
  letter-spacing:-.4px;
  margin:40px 0 6px;
  padding-bottom:8px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.section-heading::after{
  content:'';position:absolute;bottom:-1px;left:0;
  width:80px;height:2px;
  background:linear-gradient(90deg,var(--primary),transparent);
  border-radius:1px;
}
.section-sub{
  font-size:13.5px;color:var(--text2);line-height:1.7;
  max-width:720px;
  margin-bottom:20px;
}

.why-card{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:20px;
  padding:22px 24px;
}
/* CSS grid quirk: by default a grid item's min-width is auto (= min-content),
   so a wide <table> inside .why-body would grow the column past its container
   and break the card's horizontal boundary. minmax(0,1fr) + explicit min-width:0
   on the child lets the column shrink and forces the overflow down to
   .table-wrap, where overflow-x:auto is already handling horizontal scroll. */
.why-body{
  min-width:0;
}
.why-body .table-wrap{
  max-width:100%;
}
.why-num{
  font-family:'Playfair Display',serif;
  font-size:44px;font-weight:700;
  color:var(--primary);
  line-height:1;
  padding-top:6px;
  text-align:center;
  border-right:1px solid var(--border);
  padding-right:14px;
}
.why-body h3{
  font-family:'Playfair Display',serif;
  font-size:19px;font-weight:700;color:var(--text);
  letter-spacing:-.2px;line-height:1.3;
  margin-bottom:10px;
}
.why-body p{
  font-size:13.5px;color:var(--text2);line-height:1.75;
  margin-bottom:10px;
}
.why-body p:last-child{margin-bottom:0}
.why-body strong{color:var(--text);font-weight:600}
.why-body em{color:var(--text);font-style:normal;font-weight:600}
.why-table-intro{margin-top:14px !important;margin-bottom:8px !important}
.subpoint{margin-top:8px !important;font-weight:600;color:var(--text) !important}

.why-list{
  margin:6px 0 10px 20px;
  padding:0;
  list-style:disc;
}
.why-list li{
  font-size:13.5px;color:var(--text2);line-height:1.8;
  padding-left:2px;
}
.why-list li strong{color:var(--text);font-weight:600}

@media(max-width:720px){
  .why-card{
    grid-template-columns:minmax(0,1fr);
    gap:10px;
    padding:18px 20px;
  }
  .why-num{
    border-right:none;border-bottom:1px solid var(--border);
    padding-right:0;padding-bottom:6px;
    text-align:left;
    font-size:36px;
  }
}


/* ─────────────────────────────────────────────────────────────
   COMPARISON TABLE
   Highlights the "this listing" row in gold.
   ───────────────────────────────────────────────────────────── */
.compare-table{
  font-size:13px;
}
.compare-table thead th{
  background:var(--surface2);
  color:var(--text2);
  font-size:10.5px;
  letter-spacing:.6px;
  padding:10px 12px;
}
.compare-table td{
  padding:12px;
  font-size:13px;
  color:var(--text2);
}
.compare-table tr.compare-ours{
  background:rgba(217,119,6,.06);
}
.compare-table tr.compare-ours td{
  color:var(--text);
  font-weight:600;
  border-top:2px solid var(--gold);
  border-bottom:2px solid var(--gold);
}
.compare-table tr.compare-ours td:first-child{
  border-left:3px solid var(--gold);
}
.compare-yes{color:#065f46;font-weight:600}
.compare-no{color:#991b1b}


/* ─────────────────────────────────────────────────────────────
   PLAN CARDS (floor plan + site plan)
   ───────────────────────────────────────────────────────────── */
.plan-card .card-header{
  margin-bottom:8px;
}
.plan-card .card-title{
  margin-bottom:0;
}
.card-tag{
  font-size:11px;font-weight:700;letter-spacing:.5px;
  color:var(--primary);
  background:rgba(79,70,229,.07);
  border:1px solid rgba(79,70,229,.2);
  border-radius:4px;
  padding:2px 10px;
}
.plan-caption{
  font-size:13px;color:var(--text2);line-height:1.7;
  margin-bottom:14px;
}
.plan-caption strong{color:var(--text);font-weight:600}
.plan-figure{
  margin:0;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;
  text-align:center;
}
.plan-figure img{
  display:block;
  max-width:100%;
  height:auto;
  margin:0 auto;
  border-radius:var(--radius-sm);
}
.plan-legend{
  margin-top:14px;
  font-size:11.5px;
  color:var(--text3);
  line-height:1.7;
}
.plan-legend strong{color:var(--text2)}
.plan-legend em{color:var(--text3)}


/* ─────────────────────────────────────────────────────────────
   ROOM-BY-ROOM GALLERY
   ───────────────────────────────────────────────────────────── */
.rooms-section{
  margin-top:32px;
}
.rooms-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:6px;
}
@media(max-width:720px){
  .rooms-grid{grid-template-columns:1fr}
}
.room-card{
  margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.05),0 4px 14px rgba(0,0,0,.04);
  transition:transform .15s, box-shadow .2s;
}
.room-card:hover{
  transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(0,0,0,.06),0 8px 22px rgba(0,0,0,.07);
}
.room-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.291/1;   /* matches the 1200x930 captioned images exactly */
  object-fit:cover;
}
.room-card figcaption{
  padding:14px 18px 16px;
}
.room-card figcaption h4{
  font-family:'Playfair Display',serif;
  font-size:15.5px;font-weight:700;color:var(--text);
  letter-spacing:-.2px;
  margin-bottom:6px;
}
.room-card figcaption p{
  font-size:12.5px;color:var(--text2);line-height:1.65;
}


/* ─────────────────────────────────────────────────────────────
   CONTACT CTA CARD
   ───────────────────────────────────────────────────────────── */
.contact-card{
  background:linear-gradient(135deg, rgba(99,102,241,.05) 0%, rgba(99,102,241,.02) 100%);
  border:1px solid rgba(99,102,241,.2);
  border-left:3px solid var(--primary);
  padding:26px 28px;
  margin-top:18px;
}
.contact-inner{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:28px;
  align-items:center;
}
.contact-text h2{
  font-family:'Playfair Display',serif;
  font-size:22px;font-weight:700;color:var(--text);
  letter-spacing:-.3px;
  margin-bottom:8px;
}
.contact-text p{
  font-size:13.5px;color:var(--text2);line-height:1.75;
  margin-bottom:10px;
}
.contact-meta{
  font-size:13px !important;color:var(--text) !important;
  margin-top:4px !important;
}
.contact-actions{
  display:flex;flex-direction:column;gap:10px;
}
.contact-btn{
  width:100%;justify-content:center;
  padding:11px 20px;font-size:13.5px;
}
@media(max-width:720px){
  .contact-card{padding:22px 20px}
  .contact-inner{grid-template-columns:1fr;gap:18px}
}


/* ─────────────────────────────────────────────────────────────
   DISCLOSURES CARD
   ───────────────────────────────────────────────────────────── */
.disclosures-card{
  background:var(--surface2);
  border:1px solid var(--border);
}
.disclosures-list{
  list-style:decimal;
  padding-left:22px;
  margin:4px 0 0;
}
.disclosures-list li{
  font-size:12px;
  color:var(--text3);
  line-height:1.75;
  margin-bottom:10px;
}
.disclosures-list li:last-child{margin-bottom:0}
.disclosures-list li strong{color:var(--text2);font-weight:600}


/* ─────────────────────────────────────────────────────────────
   NEIGHBOURHOOD CARD — long factual paragraph
   ───────────────────────────────────────────────────────────── */
.neighbourhood-card{
  padding:22px 26px;
  margin-top:22px;
}
.neighbourhood-text{
  font-size:13.5px;
  color:var(--text2);
  line-height:1.85;
  margin:4px 0 0;
}
.neighbourhood-text strong{color:var(--text);font-weight:600}


/* ─────────────────────────────────────────────────────────────
   FAQ SECTION
   Reuses the site's .card; each question becomes a faq-item row
   with a subtle divider on top. Pairs with FAQPage JSON-LD in head.
   ───────────────────────────────────────────────────────────── */
.faq-section{
  margin-top:32px;
}
.faq-card{
  padding:6px 26px 6px;
}
.faq-item{
  padding:20px 0 18px;
  border-top:1px solid var(--border);
}
.faq-item:first-child{
  border-top:none;
}
.faq-item h3{
  font-family:'Playfair Display',serif;
  font-size:17px;
  font-weight:700;
  color:var(--text);
  letter-spacing:-.2px;
  line-height:1.35;
  margin:0 0 8px;
}
.faq-item p{
  font-size:13.5px;
  color:var(--text2);
  line-height:1.8;
  margin:0;
}
.faq-item p strong{color:var(--text);font-weight:600}

@media(max-width:640px){
  .faq-card{padding:4px 18px}
  .faq-item{padding:16px 0 14px}
  .faq-item h3{font-size:15.5px}
  .faq-item p{font-size:13px;line-height:1.75}
  .neighbourhood-card{padding:18px 20px}
  .neighbourhood-text{font-size:13px;line-height:1.8}
}


/* ─────────────────────────────────────────────────────────────
   Small refinements for .card-header in this page context
   ───────────────────────────────────────────────────────────── */
.plan-card,
.contact-card{
  padding:24px 26px;
}
@media(max-width:640px){
  .plan-card,
  .contact-card{padding:20px}
}


/* ═════════════════════════════════════════════════════════════
   MOBILE REFINEMENTS — unified pass for narrow screens
   All listing-page rules that need tightening on phones live
   here so they override earlier per-section media queries.
   ═════════════════════════════════════════════════════════════ */

/* Tablets / large phones — general scaling */
@media(max-width:860px){
  .section-heading{
    font-size:23px;
    margin:32px 0 6px;
  }
  .listing-hero-highlights{
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  }
  /* Price card on tablet: tighter padding, less visual weight */
  .listing-hero-price{padding:18px 20px 16px}
  .lhp-tagline{font-size:20px}
  .lhp-cta{padding:11px 18px}
}

/* Phones portrait — the main mobile target */
@media(max-width:640px){
  /* Section chrome */
  .section-heading{
    font-size:20px;
    margin:28px 0 4px;
    padding-bottom:6px;
  }
  .section-heading::after{width:60px}
  .section-sub{font-size:13px;line-height:1.65;margin-bottom:14px}

  /* Listing hero */
  .listing-hero{padding:18px 0 8px;gap:16px}
  .listing-hero-tags{gap:5px;margin-bottom:10px}
  .listing-hero-sub{font-size:13px;line-height:1.6;margin-bottom:14px}
  .listing-hero-highlights{
    grid-template-columns:repeat(2,1fr);
    gap:8px 10px;
  }
  .hl-item{padding:7px 10px}
  .hl-key{font-size:9.5px;letter-spacing:.6px}
  .hl-val{font-size:12.5px}
  .listing-hero-price{
    padding:16px 18px 14px;
    border-radius:var(--radius-sm);
  }
  .lhp-label{font-size:10px;letter-spacing:1px}
  .lhp-tagline{font-size:18px;margin-bottom:8px}
  .lhp-sub{font-size:11.5px;margin-bottom:12px}
  .lhp-cta{padding:12px 16px;font-size:13.5px;min-height:44px}
  .lhp-pdf-link{
    padding:10px 12px;
    font-size:11.5px;
    min-height:40px;
  }

  /* Killer overview image — tighter vertical rhythm */
  .killer-overview{margin:6px 0 14px}

  /* At a Glance table — cramped labels on narrow screens.
     Reduce label column, tighten padding, smaller fonts. */
  .at-glance th{
    width:128px;
    font-size:10px;
    padding:10px 10px;
    letter-spacing:.5px;
  }
  .at-glance td{
    font-size:12.5px;
    padding:10px 12px;
  }

  /* Why cards — bigger numeral breathing room on narrow phones */
  .why-card{padding:16px 18px}
  .why-body h3{font-size:16.5px;line-height:1.3;margin-bottom:8px}
  .why-body p{font-size:13px;line-height:1.7;margin-bottom:8px}
  .why-list li{font-size:13px;line-height:1.7}

  /* Compare table — force horizontal scroll rather than squish.
     The surrounding .why-body has min-width:0 so the .table-wrap can
     actually get smaller than the table, triggering overflow-x: auto. */
  .compare-table{min-width:500px;font-size:12px}
  .compare-table thead th{font-size:10px;padding:9px 10px}
  .compare-table td{padding:10px;font-size:12px}

  /* Plan card headers and captions */
  .plan-card .card-title{font-size:16px}
  .card-tag{font-size:10px;padding:2px 8px}
  .plan-caption{font-size:12.5px;line-height:1.6;margin-bottom:12px}
  .plan-figure{padding:10px}
  .plan-legend{font-size:11px;line-height:1.6}

  /* Neighbourhood card — already handled in its own rule, reinforce */
  .neighbourhood-card{padding:18px 20px;margin-top:18px}
  .neighbourhood-text{font-size:13px;line-height:1.8}

  /* Room cards — slightly tighter figcaption padding */
  .room-card figcaption{padding:12px 14px 14px}
  .room-card figcaption h4{font-size:15px}

  /* Contact — ensure all buttons are thumb-friendly 44px */
  .contact-text h2{font-size:19px}
  .contact-text p{font-size:13px;line-height:1.7}
  .contact-btn{
    padding:12px 16px;
    font-size:13px;
    min-height:44px;
  }

  /* FAQ — already set, reinforce heading scale */
  .faq-item h3{font-size:15px;margin-bottom:6px}
  .faq-item p{font-size:12.5px;line-height:1.7}

  /* Disclosures */
  .disclosures-list li{font-size:11.5px;line-height:1.7}
}

/* Very narrow phones (iPhone SE and below) */
@media(max-width:380px){
  .section-heading{font-size:18.5px}
  .listing-hero-title{font-size:20px}
  .listing-hero-highlights{grid-template-columns:1fr 1fr}
  .hl-item{padding:6px 9px}
  .lhp-tagline{font-size:17px}
  .at-glance th{
    width:108px;
    font-size:9.5px;
    padding:9px 8px;
  }
  .at-glance td{font-size:12px;padding:9px 10px}
  .why-card{padding:14px 16px}
  .why-body h3{font-size:15.5px}
}