/* ==========================================================================
   ByteMind Property Intelligence — page styles
   Companion to colors_and_type.css. Uses the existing scholar-business tokens
   (cream paper, forest green, Newsreader / Inter / IBM Plex Mono) and adds
   only the blocks this product page needs: KPI strip, problem grid, method
   flow, interactive map frame, market table, bars and sparkline, offer cards.
   ========================================================================== */

/* ── Hero additions ─────────────────────────────────────────────── */
.pi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-8);
}
.pi-hero-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
  padding: 0;
  list-style: none;
}
.pi-hero-tags li {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-muted-foreground);
  border: 1px solid var(--color-border-light);
  border-radius: 999px;
  padding: 4px 12px;
  background: var(--color-card);
}

/* ── KPI strip (reuses .indicator-strip from the design system) ── */
.pi-kpi {
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
}
.pi-kpi .indicator-figure {
  border-left: 2px solid var(--color-primary-100);
}
.pi-kpi .indicator-figure:hover { border-left-color: var(--color-primary-400); }
.pi-kpi .indicator-strip-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pi-kpi .indicator-value { font-size: 1.85rem; letter-spacing: -0.01em; }
.pi-kpi .indicator-note { font-family: var(--font-mono); font-size: 0.7rem; }
.pi-kpi-status {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-6);
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}
.pi-kpi-status .pi-status-ok { color: var(--color-primary-600); }
.pi-kpi-status .pi-status-warn { color: var(--state-warning); }
.pi-kpi-status[hidden] { display: none; }

/* ── Editorial two-column section ───────────────────────────────── */
.pi-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: start;
}
.pi-split-lead {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
}
.pi-split-lead strong { color: var(--color-text-primary); font-weight: 500; }

/* ── Problem cards ──────────────────────────────────────────────── */
.pi-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-12);
}
.pi-problem-item {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-6);
}
.pi-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--color-primary-500);
  margin-bottom: var(--space-3);
}
.pi-problem-item h3 { font-size: 1.1rem; margin-bottom: var(--space-2); }
.pi-problem-item p { font-size: 0.92rem; margin: 0; color: var(--color-muted-foreground); }

/* ── Differentiator cards ───────────────────────────────────────── */
.pi-cards-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-6);
}
.pi-cards-4 .feature-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border-light);
}

/* The shared .card/.btn-secondary rules reference the broken
   --color-border token, so restate the border locally. */
.pi-related .card { border: 1px solid var(--color-border-light); }
.pi-hero-actions .btn-secondary,
.pi-offer .btn-secondary { border: 1px solid var(--color-border-light); }
.pi-cards-4 h3 { font-size: 1.15rem; margin: var(--space-2) 0 var(--space-3); }
.pi-cards-4 p { font-size: 0.92rem; margin: 0; color: var(--color-muted-foreground); }
.pi-practice {
  display: block;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-light);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.pi-practice b { font-weight: 600; color: var(--color-primary-600); }

/* ── Interactive demo ───────────────────────────────────────────── */
.pi-demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}
.pi-map {
  position: relative;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-muted);
  aspect-ratio: 1440 / 900;
  box-shadow: var(--shadow-float);
}
.pi-map-art,
.pi-map-poster,
.pi-map-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pi-map-art {
  display: block;
  background-color: var(--color-muted);
  /* Fallback illustration if the publisher's poster screenshot is missing. */
  background-image: url("../images/property-intelligence-map.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.pi-map-poster { object-fit: cover; transition: opacity 0.45s ease; }
.pi-map-embed { z-index: 2; }
.pi-map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--color-card);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.pi-map.is-ready .pi-map-embed iframe { opacity: 1; }
.pi-map.is-ready .pi-map-poster { opacity: 0; }
.pi-map-loading {
  position: absolute;
  z-index: 3;
  inset: auto var(--space-5) var(--space-5) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(250, 249, 243, 0.94);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
  transition: opacity 0.3s ease;
}
.pi-map-loading::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary-400);
  animation: pi-pulse 1.4s ease-in-out infinite;
}
@keyframes pi-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.pi-map.is-ready .pi-map-loading { opacity: 0; visibility: hidden; }
.pi-map-actions {
  position: absolute;
  z-index: 3;
  inset: auto var(--space-5) var(--space-5) var(--space-5);
  display: none;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.pi-map-caption {
  margin: var(--space-4) 0 0;
  font-size: 0.78rem;
  color: var(--color-muted-foreground);
}
.pi-map-caption a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.pi-map-fallback {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--state-warning);
  border-radius: var(--radius-md);
  background: var(--state-warning-bg);
  color: var(--color-text-secondary);
  font-size: 0.8rem;
}
.pi-map-fallback[hidden] { display: none; }
.pi-map-fallback a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

.pi-deeplinks { display: grid; gap: var(--space-4); }
.pi-deeplinks-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--space-6);
}
.pi-deeplinks-row .pi-deeplink { display: flex; flex-direction: column; height: 100%; }
.pi-deeplinks-row .pi-deeplink-note { margin-top: var(--space-2); }
.pi-deeplinks-row .pi-deeplink-arrow { align-self: flex-end; }
.pi-deeplinks-row .pi-deeplinks-more {
  grid-column: 1 / -1;
  margin-top: var(--space-2);
}
.pi-deeplink {
  display: block;
  padding: var(--space-5);
  border: 1px solid var(--color-border-light);
  border-left: 2px solid var(--color-primary-300);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-card);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.pi-deeplink:hover {
  border-left-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.pi-deeplink .pi-deeplink-title {
  display: block;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.pi-deeplink .pi-deeplink-note {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
}
.pi-deeplink-arrow {
  float: right;
  font-family: var(--font-mono);
  color: var(--color-primary-400);
}
.pi-demo-note {
  margin-top: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-muted);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}
.pi-demo-note p { margin: 0; font-size: inherit; color: inherit; }

/* ── Method flow diagram ────────────────────────────────────────── */
.pi-flow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-12) 0 var(--space-16);
  padding: 0;
  list-style: none;
  counter-reset: pi-flow;
}
.pi-flow li {
  position: relative;
  padding: var(--space-5) var(--space-4) var(--space-5) 0;
  border-top: 2px solid var(--color-primary-200);
}
.pi-flow li::before {
  content: attr(data-step);
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--color-primary-500);
  margin-bottom: var(--space-2);
}
.pi-flow li::after {
  content: "\2192";
  position: absolute;
  right: 0;
  top: var(--space-5);
  font-family: var(--font-mono);
  color: var(--color-primary-300);
}
.pi-flow li:last-child::after { content: none; }
.pi-flow .pi-flow-label {
  display: block;
  font-family: var(--font-serif);
  font-size: 0.98rem;
  line-height: 1.3;
  color: var(--color-text-primary);
  padding-right: var(--space-4);
}

.pi-method-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-8);
  padding: 0;
  list-style: none;
  margin: 0;
}
.pi-method-item {
  border-top: 1px solid var(--color-border-light);
  padding-top: var(--space-6);
}
.pi-method-item h3 {
  font-size: 1.05rem;
  margin: var(--space-2) 0 var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.pi-method-item h3 .pi-method-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary-500);
}
.pi-method-item p { font-size: 0.9rem; margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.pi-guardrail {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-primary-200);
}
.pi-guardrail b { color: var(--color-primary-600); font-weight: 600; }

.pi-model-card {
  margin-top: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  padding: var(--space-8);
}
.pi-model-card h3 { margin-bottom: var(--space-2); }
.pi-model-card .pi-model-note {
  font-size: 0.82rem;
  color: var(--color-muted-foreground);
  margin-bottom: var(--space-6);
}
.pi-model-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-5) var(--space-8);
  margin: 0;
}
.pi-model-metrics dt {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  margin-bottom: 2px;
}
.pi-model-metrics dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--color-text-primary);
}
.pi-model-metrics dd small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-muted-foreground);
  margin-top: 2px;
}

/* ── Live market: table + side panels ───────────────────────────── */
.pi-market-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}
.pi-market-head h2 { margin: 0; }
.pi-snap-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-primary-700);
  background: var(--color-primary-50);
  border: 1px solid var(--color-primary-100);
  border-radius: 999px;
  padding: 4px 12px;
}
.pi-market-grid { display: block; }
.pi-side-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: var(--space-6);
}
.pi-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}
.pi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 780px;
}
.pi-table caption {
  caption-side: top;
  text-align: left;
  padding: var(--space-4) var(--space-4) var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
}
.pi-table th,
.pi-table td {
  padding: var(--space-3) var(--space-4);
  text-align: right;
  border-bottom: 1px solid var(--color-border-light);
  white-space: nowrap;
}
.pi-table th:first-child,
.pi-table td:first-child { text-align: left; }
.pi-table thead th {
  background: var(--color-muted);
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted-foreground);
  white-space: normal;
  vertical-align: bottom;
}
.pi-table tbody td { font-family: var(--font-mono); color: var(--color-text-secondary); }
.pi-table tbody th {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--color-text-primary);
  text-align: left;
  white-space: nowrap;
}
.pi-table tbody tr:last-child td,
.pi-table tbody tr:last-child th { border-bottom: 0; }
.pi-table tbody tr:hover { background: var(--color-primary-50); }
.pi-table .pi-trend-up { color: var(--color-primary-600); }
.pi-table .pi-trend-down { color: var(--state-error); }
.pi-table .pi-trend-flat { color: var(--color-muted-foreground); }
.pi-table-empty td { text-align: left; font-family: var(--font-sans); color: var(--color-muted-foreground); }
.pi-table-note {
  margin: var(--space-3) 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--color-muted-foreground);
}
.pi-panel-foot {
  margin: var(--space-4) 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--color-muted-foreground);
}

.pi-side { display: grid; gap: var(--space-6); }
.pi-panel {
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  padding: var(--space-6);
}
.pi-panel h3 { font-size: 1rem; margin-bottom: var(--space-2); }
.pi-panel .pi-panel-note {
  font-size: 0.76rem;
  color: var(--color-muted-foreground);
  margin: 0 0 var(--space-5);
}
.pi-bars { display: grid; gap: var(--space-3); margin: 0; }
.pi-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--space-3);
  align-items: center;
}
.pi-bar-label { font-size: 0.82rem; color: var(--color-text-secondary); }
.pi-bar-share { font-family: var(--font-mono); font-size: 0.78rem; color: var(--color-text-primary); }
.pi-bar-track {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 999px;
  background: var(--color-muted);
  overflow: hidden;
}
.pi-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--color-primary-400);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.pi-stat-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 0.82rem;
  color: var(--color-muted-foreground);
}
.pi-stat-line:last-child { border-bottom: 0; padding-bottom: 0; }
.pi-stat-line strong {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--color-text-primary);
}
.pi-spark-host { min-height: 0; }
.pi-spark { width: 100%; height: auto; display: block; margin-top: var(--space-3); }
.pi-spark-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-muted-foreground);
}
.pi-spark-empty {
  font-size: 0.8rem;
  color: var(--color-muted-foreground);
  margin: var(--space-4) 0 0;
}

/* ── Engagements ────────────────────────────────────────────────── */
.pi-offers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.pi-offer {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  padding: var(--space-8);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pi-offer:hover { border-color: var(--color-primary-200); box-shadow: var(--shadow-card); }
.pi-offer h3 { font-size: 1.2rem; margin: var(--space-2) 0 var(--space-3); }
.pi-offer p { font-size: 0.9rem; color: var(--color-muted-foreground); }
.pi-offer-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex: 1;
}
.pi-offer-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: var(--space-2);
  font-size: 0.86rem;
  color: var(--color-text-secondary);
}
.pi-offer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary-400);
}
.pi-offer .btn { align-self: flex-start; }

/* ── Compliance note ────────────────────────────────────────────── */
.pi-compliance {
  margin-top: var(--space-12);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-primary-400);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--color-primary-50);
  padding: var(--space-8);
}
.pi-compliance h3 { font-size: 1.05rem; margin-bottom: var(--space-4); }
.pi-compliance ul { margin: 0; padding-left: var(--space-5); }
.pi-compliance li {
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.pi-compliance li:last-child { margin-bottom: 0; }

/* ── Related content ────────────────────────────────────────────── */
.pi-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
}
.pi-related .card { padding: var(--space-6); }
.pi-related h3 { font-size: 1.05rem; margin-bottom: var(--space-2); }
.pi-related p { font-size: 0.88rem; color: var(--color-muted-foreground); margin-bottom: var(--space-4); }

/* ── Snapshot unavailable state ─────────────────────────────────── */
.snapshot-unavailable .pi-kpi-status .pi-status-ok { display: none; }
.snapshot-unavailable .pi-status-warn { display: inline; }
.pi-status-warn { display: none; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .pi-deeplinks-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-side-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .pi-market-grid,
  .pi-split { grid-template-columns: minmax(0, 1fr); }
  .pi-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-method-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-split { gap: var(--space-8); }
  .pi-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-flow li::after { content: none; }
  .pi-kpi .indicator-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 899px) {
  .pi-map { aspect-ratio: 4 / 3; }
  .pi-map-actions { display: flex; }
  .pi-map-loading { display: none; }
  .pi-map-caption { margin-top: var(--space-3); }
}

@media (max-width: 700px) {
  .pi-deeplinks-row,
  .pi-side-row,
  .pi-offers { grid-template-columns: minmax(0, 1fr); }
  .pi-method-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .pi-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .pi-kpi .indicator-strip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pi-flow li { padding-bottom: var(--space-3); }
  .pi-model-card,
  .pi-compliance,
  .pi-offer { padding: var(--space-6); }
  .pi-hero-actions .btn { width: 100%; }
  .pi-hero-tags { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .pi-map-loading::before { animation: none; }
  .pi-bar-fill { transition: none; }
}

/* ── Story section ──────────────────────────────────────────────── */
.pi-story {
  max-width: 720px;
  margin: 0 auto;
}
.pi-story p {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.2vw, 1.13rem);
  line-height: 1.72;
  color: var(--color-text-secondary);
}
.pi-story p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .pi-story p { font-size: 1rem; }
}