/* cma-compare.css — full-width editorial CMA comparison (replaces the flip-book).
 * The deal vs. five recent comps, with price bars that show 8936 sitting at the
 * comp floor. Bold, on-brand, no gimmick. Uses design tokens only. */

.cma-compare {
  position: relative;
  background: var(--ink, #0B1420);
  color: var(--bone, #F2EDE3);
  padding: clamp(48px, 7vw, 104px) 0;
  overflow: hidden;
}
.cma-compare::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 80% 0%, rgba(212, 17, 46, 0.10), transparent 60%);
  pointer-events: none;
}
.cma-compare__inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 44px);
}

.cma-compare__eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--amber, #EC9A29);
}
.cma-compare__title {
  font-family: var(--font-display, "Archivo Expanded", "Archivo", sans-serif);
  font-weight: 800;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.0; letter-spacing: -0.03em;
  margin: 14px 0 16px;
  color: var(--bone, #F2EDE3);
  max-width: 18ch;
}
.cma-compare__title b { color: var(--red, #D4112E); }
.cma-compare__lead {
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55;
  color: var(--bone-dim, rgba(242, 237, 227, 0.72));
  max-width: 58ch; margin: 0;
}

/* cohort stat strip */
.cma-compare__stats {
  display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 56px);
  margin: 32px 0 8px;
  padding: 22px 0;
  border-top: 1px solid var(--line, rgba(242,237,227,0.14));
  border-bottom: 1px solid var(--line, rgba(242,237,227,0.14));
}
.cma-compare__stat { display: flex; flex-direction: column; gap: 4px; }
.cma-compare__stat b {
  font-family: var(--font-display, "Archivo Expanded", sans-serif);
  font-weight: 800; font-size: clamp(24px, 3vw, 38px); letter-spacing: -0.02em;
  color: var(--bone, #F2EDE3);
}
.cma-compare__stat span {
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-dim, rgba(242,237,227,0.6));
}

/* the grid of comp cards */
.cma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 16px;
  margin-top: 36px;
}
.cma-c {
  position: relative;
  background: var(--ink-2, #111D31);
  border: 1px solid var(--line, rgba(242,237,227,0.14));
  border-radius: 14px;
  padding: 24px 22px 22px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform 280ms var(--ease-out, ease), border-color 280ms ease, box-shadow 280ms ease;
}
.cma-c:hover { transform: translateY(-4px); border-color: rgba(242,237,227,0.28); }
.cma-c--subject {
  border-color: var(--red, #D4112E);
  box-shadow: 0 0 0 1px rgba(212,17,46,0.5), 0 24px 60px -34px rgba(212,17,46,0.6);
}

.cma-c__badge {
  align-self: flex-start;
  font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px;
  background: rgba(242,237,227,0.10); color: var(--bone-dim, rgba(242,237,227,0.7));
}
.cma-c--subject .cma-c__badge { background: var(--red, #D4112E); color: var(--bone, #F2EDE3); }
.cma-c__badge--street { background: var(--amber, #EC9A29); color: var(--ink, #0B1420); }

.cma-c__addr {
  font-family: var(--font-head, "Archivo", sans-serif);
  font-weight: 700; font-size: 16px; letter-spacing: -0.01em;
  color: var(--bone, #F2EDE3); margin: 0;
}
.cma-c__price {
  font-family: var(--font-display, "Archivo Expanded", sans-serif);
  font-weight: 800; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em;
  line-height: 1; color: var(--bone, #F2EDE3);
}
.cma-c--subject .cma-c__price { color: var(--red, #D4112E); }
.cma-c__priceLabel {
  font-family: var(--font-mono, monospace);
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-dim, rgba(242,237,227,0.55)); margin-top: -8px;
}

/* relative price bar (width set inline; max = top comp) */
.cma-c__bar {
  height: 6px; border-radius: 4px; overflow: hidden;
  background: rgba(242,237,227,0.10);
}
.cma-c__bar i {
  display: block; height: 100%; border-radius: 4px;
  background: var(--amber, #EC9A29);
  transform-origin: left;
}
.cma-c--subject .cma-c__bar i { background: var(--red, #D4112E); }

.cma-c__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 10px; letter-spacing: 0.06em;
  color: var(--bone-dim, rgba(242,237,227,0.6));
}
.cma-c__meta b { color: var(--bone, #F2EDE3); font-weight: 600; }

.cma-compare__note {
  margin-top: 28px;
  font-family: var(--font-body, "Manrope", sans-serif);
  font-size: 14px; line-height: 1.5;
  color: var(--bone-dim, rgba(242,237,227,0.72));
  max-width: 64ch;
}
.cma-compare__note b { color: var(--bone, #F2EDE3); font-weight: 700; }

@media (max-width: 540px) {
  .cma-grid { grid-template-columns: 1fr; }
}

/* --- Host-page typography guard (property-page.css forces Cormorant serif +
   dark color on h3/h4; these !important rules keep the panel on-system) --- */
.cma-compare .cma-compare__title { font-family: var(--font-display, "Archivo Expanded", "Archivo", sans-serif) !important; color: var(--bone, #F2EDE3) !important; font-style: normal !important; }
.cma-compare .cma-compare__title b { font-family: inherit !important; font-style: normal !important; color: var(--red, #D4112E) !important; }
.cma-compare .cma-c__addr { font-family: var(--font-head, "Archivo", sans-serif) !important; color: var(--bone, #F2EDE3) !important; font-style: normal !important; }
.cma-compare .cma-c__price { font-family: var(--font-display, "Archivo Expanded", sans-serif) !important; }
.cma-compare .cma-c--subject .cma-c__price { color: var(--red, #D4112E) !important; }
.cma-compare .cma-compare__stat b { font-family: var(--font-display, "Archivo Expanded", sans-serif) !important; color: var(--bone, #F2EDE3) !important; }
.cma-compare .cma-compare__lead, .cma-compare .cma-compare__note { font-family: var(--font-body, "Manrope", sans-serif) !important; }