/* Relist Plan pages and the off-market report. Built on site.css tokens; loaded only on these pages. */
.plan-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--s7); padding-block: var(--s6) var(--s7); align-items: start; }
.report-hero { padding-top: var(--s4); }
.plan-copy { display: grid; gap: var(--s4); min-width: 0; }
.plan-copy h1 { font-size: clamp(36px, 4.2vw, 58px); max-width: 18ch; overflow-wrap: anywhere; }
.plan-copy .stats { margin-top: var(--s3); }
/* A label that wraps would push its figure below the others; each stat's three rows share the row's heights. */
.plan-copy .stat { grid-row: span 3; grid-template-rows: subgrid; row-gap: 2px; }
/* Sentence case like the site's .asof and .meta lines; no small caps. */
.kicker { font-size: 14px; font-weight: 600; color: var(--patina); }

/* The one bold element: the range, on the map plate's ink. */
/* Right column: the range card, then the property film. Sticky together on desktop. */
.plan-side { position: sticky; top: 88px; display: grid; gap: var(--s4); min-width: 0; }
.film { margin: 0; display: grid; gap: var(--s2); }
.film video { width: 100%; max-height: min(72vh, 640px); aspect-ratio: 9 / 16; object-fit: contain; background: var(--plate); border-radius: var(--radius); margin-inline: auto; }
.film figcaption { font-size: 13px; color: var(--muted); }
/* The range card is a dark object on the light page; its buttons and text take light-on-dark tokens. */
.range-card { --primary: #F8F8F6; --primary-ink: #14181D; --primary-hover: #FFFFFF; --ink: #EEF0EC; --ink-2: #C5CDD5; --muted: #93A0AE; --rule-strong: #3A4757; --panel: transparent; --paper: var(--plate); color-scheme: dark; }
.range-card { position: relative; top: 0; background: var(--plate); color: var(--plate-text); border-radius: var(--radius); padding: var(--s5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); min-width: 0; }
.range-label { font-size: 15px; font-weight: 600; color: var(--plate-hood-hi); }
.range-value { font: 500 clamp(36px, 3.2vw, 46px)/1.04 var(--display); letter-spacing: -0.02em; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.range-value .v { white-space: nowrap; }
.range-value > span:not(.v) { color: #8FA3BC; margin-inline: .08em; }
.range-value.small-value { font-size: clamp(28px, 2.6vw, 34px); white-space: normal; }
.range-note { font-size: 14.5px; color: #A9B6C6; }
.range-note a { color: #E8ECEF; }
.range-actions { display: grid; gap: var(--s2); margin-top: var(--s2); }
.range-actions .button { width: 100%; }
/* The primary button is the site's own (site.css .button.primary); only its hover needs a light edge on the dark plate. */
.range-card .button.primary:hover { border-color: var(--primary-hover); color: var(--primary-ink); }
.button.ghost { background: transparent; border-color: #2E405A; color: #E8ECEF; }
.button.ghost:hover { border-color: #8FA3BC; color: #fff; }
.range-card :focus-visible { box-shadow: 0 0 0 3px var(--plate), 0 0 0 5px var(--plate-hood-hi); }

.timeline td:nth-child(3) { color: var(--muted); }
.dom-bars { display: grid; gap: var(--s3); }
.dom-row { display: grid; grid-template-columns: 9.5em minmax(0, 1fr) 5.5em; gap: var(--s3); align-items: center; font-size: 14.5px; }
.dom-row span { color: var(--ink-2); }
.dom-row b { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.dom-track { height: 10px; background: var(--stone); border-radius: 999px; overflow: hidden; }
.dom-track i { display: block; height: 100%; border-radius: 999px; }
.dom-track .home { background: var(--series-ask); }
.dom-track .median { background: var(--series-sale); }
.comp-sum { margin-bottom: var(--s3); font-size: 15px; color: var(--ink-2); }

.why { list-style: none; counter-reset: why; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--s7); }
.why li { counter-increment: why; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: var(--s3); padding-block: var(--s4); border-top: 1px solid var(--rule); font-size: 17px; }
.why li::before { content: counter(why, decimal-leading-zero); font: 500 20px/1.3 var(--display); color: var(--brass); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); border-top: 1px solid var(--ink); }
.steps li { display: grid; gap: 4px; align-content: start; padding: var(--s4) var(--s4) var(--s4) 0; }
.steps li + li { padding-left: var(--s4); border-left: 1px solid var(--rule); }
.steps b { font: 500 clamp(22px, 2vw, 28px)/1.15 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.steps span { font-size: 14.5px; color: var(--ink-2); }
.steps .result b { color: var(--patina); }

.package { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.package > div { display: grid; gap: var(--s2); align-content: start; padding-top: var(--s4); border-top: 2px solid var(--patina); }
.package p { color: var(--ink-2); font-size: 16px; }

@media (max-width: 1080px) { .why { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .plan-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-top: var(--s4); }
  /* Phone order: whose plan it is, then the range, then the numbers. */
  .plan-copy { display: contents; }
  .plan-copy > * { min-width: 0; }
  .plan-side, .report-hero .range-card { position: static; order: 4; }
  .film video { max-height: 70vh; width: auto; max-width: 100%; }
  .plan-copy .kicker { order: 1; } .plan-copy h1 { order: 2; } .plan-copy .lede { order: 3; } .plan-copy .stats { order: 5; margin-top: 0; }
  .range-actions { grid-template-columns: 1fr 1fr; }
  .range-actions .button { min-width: 0; white-space: normal; text-align: center; line-height: 1.2; }
  .package { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .steps li, .steps li + li { padding: var(--s3) 0; border-left: 0; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(7.5em, auto) minmax(0, 1fr); gap: var(--s3); align-items: baseline; }
  .steps li:first-child { border-top: 0; }
}
@media (max-width: 600px) {
  .range-actions { grid-template-columns: minmax(0, 1fr); }
  .dom-row { grid-template-columns: 7.5em minmax(0, 1fr) 4.8em; font-size: 14px; }
  .range-value { font-size: 38px; }
}
/* "Stop these emails": a quiet one-click opt-out under the disclosure. */
.stop { scroll-margin-top: 96px; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s4); }
.stop .button { min-height: 36px; padding: 0 14px; font-size: 14px; }