/* ============================================================
   pages.css — Lux Summit Estates
   Subpage + legal specifics.
   ============================================================ */

.legal { padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 40px) clamp(64px, 10vw, 120px); }
.legal .container { width: var(--maxw-narrow); }
.legal h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin-bottom: 6px; }
.legal .updated { font-size: var(--fs-cap); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.legal .sub-section { padding: clamp(28px, 4vw, 44px) 0; }
.legal .sub-section h2 { font-size: var(--fs-h3); }
.legal .prose { max-width: 68ch; }
.legal .prose a.link, .legal a.link { color: var(--data-ink); }
.legal .prose b { color: var(--ink); }
.legal ul { font-size: var(--fs-body); }
.legal ul li { margin-bottom: 6px; }

/* Subpage spread variants */
.sub-spread {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--gap);
  width: var(--maxw-wide); margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 40px);
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.sub-spread .media { grid-column: span 7; }
.sub-spread .copy { grid-column: span 5; }
.sub-spread.reverse .media { grid-column: 6 / -1; order: 2; }
.sub-spread.reverse .copy { grid-column: 1 / span 5; order: 1; }
.sub-spread.full .media, .sub-spread.full .copy { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .sub-spread .media, .sub-spread.reverse .media,
  .sub-spread .copy, .sub-spread.reverse .copy { grid-column: 1 / -1; order: 0; }
}

/* Comparison cells highlight on hover/focus */
.compare { width: var(--maxw-wide); margin: 0 auto; padding: clamp(36px, 5vw, 64px) clamp(16px, 3vw, 40px); border-bottom: 1px solid var(--rule); }
.compare table { width: 100%; border-collapse: collapse; }
.compare th, .compare td { padding: 18px 14px; border-bottom: 1px solid var(--rule); text-align: left; font-size: var(--fs-sm); }
.compare th { font-size: var(--fs-cap); letter-spacing: var(--track-cap); text-transform: uppercase; color: var(--text-muted); font-weight: 600; }
.compare tbody tr { transition: background var(--dur) var(--ease); }
.compare tbody tr:hover, .compare tbody tr:focus-within { background: var(--surface-sunk); outline: 1px solid var(--accent); }
.compare td .data { color: var(--data-ink); font-variant-numeric: tabular-nums; }
.compare td .yes { color: var(--accent-ink); font-weight: 600; }