/* ==========================================================
   DeltaVisor · home page (site/index.html)

   Layers on the shared design system (cdn.deltavisor.com/css/v1) and on
   ../styles.css (the marketing vocabulary: .hsec rhythm, .hl-swatch signals,
   .stat-band, .site-foot). This file owns only what the home page alone has:

     · the live instrument, a region's baked static map with a canvas dot
       overlay and a synced activity feed, driven by home.js
     · the filter chips above it
     · the hero's Ask card, driven by ask-demo.js
     · the cards for who it is for and for looking and watching, and the
       coverage strip

   The world-line, the three-surface block, the catalog, the distress band, the
   head-start panel, and the how-it-works steps went on 2026-10-02 when the page
   was cut to the hero and these few sections (MARKETING-SITE.md); git has them.

   The instrument CSS is ported unchanged from the previous stylesheet. home.js
   measures and paints against these exact class names, so a rename here is a
   silent break rather than a visible one.
========================================================== */

/* ==========================================================
   HERO · the live instrument
========================================================== */
.hero-live {
  padding: clamp(2.5rem, 5vw, var(--s-8)) var(--gutter) var(--rhythm-section);
  display: flex; flex-direction: column;
  gap: var(--rhythm-block);
}
/* Each hero block sits in the same --home-max column the sections use, so the
   whole page shares one content left edge. */
.hero-live > * { width: 100%; max-width: var(--home-max); margin-inline: auto; }
.hero-live__head { display: flex; flex-direction: column; gap: var(--s-4); }
/* One sentence in three declared lines: what the reader pays for, its scope,
   and the hook. The breaks are declared rather than coaxed out of a `ch`
   measure, which broke mid-clause the last time the copy changed by three
   characters. */
.hero-live h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.25rem);
  line-height: 1.04; letter-spacing: -0.035em; font-weight: 600;
  text-wrap: balance;
  max-width: 30ch;
  margin-block: var(--s-2) var(--s-1);
}
@media (min-width: 48rem) {
  .hero-live h1 .hero-line { display: block; }
}
.hero-live h1 em { color: var(--accent-deep); font-style: normal; }
.hl-sub {
  font-size: clamp(1.0625rem, 1.4vw, var(--t-lg));
  color: var(--ink-mid); line-height: 1.6; max-width: 46ch;
}

/* ---- the map's key: pills with a colour dot and a count, under the map ---- */
/* THE ROW RESERVES ITS OWN HEIGHT. Every chip ships `hidden` and home.js reveals
   the kinds alive in the sample market, so the row grows from zero AFTER the
   activity API answers and pushes the stat band below it down. A small layout
   shift, invisible on a fast connection, reported from the field on a slow one.

   These are reservations, not constraints. They match what the row renders at
   today (one line wide, two at tablet, three on a phone). If a market ever shows
   enough chips to wrap further the row simply grows and a small shift returns;
   nothing breaks. min-height rather than height for that reason. */
.hl-chips {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  min-height: 1.9375rem;
}
@media (max-width: 48rem) { .hl-chips { min-height: 4.3125rem; } }
@media (max-width: 30rem) { .hl-chips { min-height: 6.75rem; } }
.lp-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 0; background: var(--paper-1);
  border-radius: var(--radius-full); padding: 0.375rem 0.8125rem;
  font-size: var(--t-xs); font-weight: 500; color: var(--ink-soft);
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* `display:inline-flex` above outranks the plain `[hidden]` attribute (UA
   display:none), so a chip hidden by JS would keep rendering. Same trap as
   `.panel[hidden]` in the cdn components sheet. The hero hides chips with no
   activity, and without this it showed "Foreclosures 0". */
.lp-chip[hidden] { display: none; }
.lp-chip:hover { background: var(--paper-2); }
.lp-chip[aria-pressed="false"] { opacity: 0.32; }
.lp-chip-n { color: var(--ink-mid); font-variant-numeric: tabular-nums; }

/* A line under the chips saying what the key is showing, because it is the
   SAMPLE MARKET's mix and a reader would otherwise take it for the catalog. The
   catalog with fleet-wide totals is its own section further down. */
.hl-chips-note { font-size: var(--t-2xs); color: var(--ink-ghost); margin-top: var(--s-3); }
.hl-chips-note a { color: var(--ink-mid); text-decoration: underline; text-underline-offset: 0.18em; }
.hl-chips-note a:hover { color: var(--ink); }

/* ---- the instrument: a live sample of one region, captioned as one of many ---- */
.hl-instrument-wrap { display: flex; flex-direction: column; gap: var(--s-4); }
.hl-instrument-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: 0.35rem 1rem;
  font-size: var(--t-sm); color: var(--ink-mid);
}
.hl-instrument-cap__now { display: inline-flex; align-items: center; gap: 0.45rem; }
.hl-instrument-cap b { color: var(--ink); font-weight: 600; }
.hl-instrument-cap__link { color: var(--ink-mid); }
.hl-instrument-cap__link:hover { color: var(--ink); }

/* ---- the map + feed ---- */
.hl-instrument {
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: var(--gap-grid);
  height: clamp(26rem, 58vh, 38rem);
}
.hl-map-wrap {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--paper-1);
}
/* the region's baked Geoapify static map + a canvas dot overlay */
.hl-map-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-map-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hl-freshness {
  position: absolute; left: 0.875rem; bottom: 0.875rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4375rem 0.75rem; border-radius: var(--radius-full);
  background: var(--bar); backdrop-filter: blur(10px);
  font-size: var(--t-xs); color: var(--ink-soft);
}

/* ---- feed ---- */
.hl-feed {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--paper-1); border-radius: var(--radius-lg);
}
.hl-feed__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 1rem 1.125rem 0.5rem;
}
.hl-feed__title { font-size: var(--t-sm); font-weight: 500; color: var(--ink-soft); }
.hl-feed__list {
  list-style: none; margin: 0; padding: 0.375rem;
  overflow-y: auto; flex: 1; min-height: 0;
  display: flex; flex-direction: column; gap: 0.1875rem;
  scrollbar-width: thin;
}
.hl-row {
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-areas: "dot kind time" "dot addr addr" "dot meta meta";
  column-gap: 0.625rem; row-gap: 0.125rem;
  padding: 0.625rem 0.75rem; border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease);
  cursor: default; animation: hl-rowin var(--dur-2) var(--ease) both;
}
.hl-row:hover { background: var(--paper-2); }
@keyframes hl-rowin { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hl-row { animation: none; } }
.hl-row__dot {
  grid-area: dot; align-self: start; margin-top: 0.3125rem;
  width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full);
}
.hl-row__kind {
  grid-area: kind; font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-soft); align-self: baseline;
}
.hl-row__wt { color: var(--ink-mid); font-weight: 400; }
.hl-row__time {
  grid-area: time; font-size: var(--t-xs);
  color: var(--ink-ghost); white-space: nowrap; align-self: baseline;
}
.hl-row__addr {
  grid-area: addr; font-size: var(--t-sm); color: var(--ink);
  line-height: 1.3; letter-spacing: -0.005em;
}
.hl-row__meta {
  grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  font-size: var(--t-xs); color: var(--ink-mid); margin-top: 0.0625rem;
}
.hl-row__val { color: var(--ink-soft); font-variant-numeric: tabular-nums; font-weight: 500; }
.hl-row__who { font-size: var(--t-xs); color: var(--ink-mid); }
.hl-row__contact {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--t-2xs); color: var(--status-success);
  padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm);
  background: var(--status-success-bg);
}
.hl-row__abs {
  font-size: var(--t-2xs); color: var(--status-warning);
  padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm);
  background: var(--status-warning-bg);
}
.hl-feed__foot {
  padding: 0.75rem 1rem 1rem;
  display: flex; flex-direction: column; gap: 0.4375rem;
}
.hl-feed__foot .btn { justify-content: center; }
.hl-feed__disclaimer { font-size: var(--t-2xs); color: var(--ink-ghost); line-height: 1.35; text-align: center; }

@media (max-width: 60rem) {
  .hl-instrument { grid-template-columns: 1fr; height: auto; }
  .hl-map-wrap { height: 22rem; }
  .hl-feed { height: 24rem; }
}

/* ==========================================================
   WHO IT'S FOR, AND LOOK AND WATCH
   All audiences carry equal weight: the product is one record read many ways,
   not a trades-first pitch. Uniform card, no lead or elevated variant. The same
   card carries the three ways to look and watch.
========================================================== */

.who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.who-card {
  padding: var(--pad-card); border-radius: 1.125rem;
  background: var(--paper-1);
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background var(--dur) var(--ease);
}
a.who-card:hover { background: color-mix(in srgb, var(--paper-1), var(--paper-2) 40%); }
.who-card h3 { font-size: var(--t-md); color: var(--ink); }
.who-card p { font-size: var(--t-sm); color: var(--ink-mid); line-height: 1.6; }
.who-card .who-card__q { font-size: var(--t-base); color: var(--ink-soft); line-height: 1.5; }
/* The first card spans the row: the buyer the page speaks to first. */
.who-card--lead { grid-column: 1 / -1; }
.who-card--lead .who-card__q { font-size: var(--t-lg); color: var(--ink); }
/* The worse version this reader pays for today, at the foot of the card. */
.who-card .who-card__was { margin-top: auto; padding-top: var(--s-3); font-size: var(--t-xs); color: var(--ink-ghost); }

@media (max-width: 60rem) { .who-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .who-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   COVERAGE STRIP
   The coverage promise is the thing a visitor most wants answered and it was a
   nav link only. This puts the count, the honesty rule, and the way in on the
   page itself.
========================================================== */

.coverage-strip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-6);
  padding: var(--pad-card) var(--s-6);
  background: var(--paper-1); border-radius: 1.125rem;
}
@media (max-width: 60rem) {
  .coverage-strip { grid-template-columns: 1fr; gap: var(--s-4); text-align: left; }
}
.coverage-strip__n { display: flex; flex-direction: column; gap: 0.125rem; }
.coverage-strip__n b {
  font-size: clamp(1.75rem, 3.4vw, var(--t-3xl)); font-weight: 650; color: var(--ink);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1;
}
.coverage-strip__n span { font-size: var(--t-xs); color: var(--ink-mid); }
.coverage-strip p { color: var(--ink-mid); font-size: var(--t-sm); line-height: 1.6; max-width: 62ch; }
.coverage-strip p a { color: var(--ink-soft); }
.coverage-strip p a:hover { color: var(--ink); }

/* ==========================================================
   HERO · the Ask card: real questions and answers, then the visitor's own
   (ask-demo.js). It mirrors the app's Ask: a question sits on a tinted band,
   the answer on the plain card, the box at the bottom.
========================================================== */
.hl-split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 64rem) {
  .hl-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-8); }
}
.hl-split__text { display: flex; flex-direction: column; gap: var(--s-4); }
.hl-aside { font-size: var(--t-sm); color: var(--ink-mid); text-wrap: pretty; }

/* The upgrades: what the reader pays for today, stepped back, and what it becomes. */
.hl-upgrades {
  list-style: none; margin: var(--s-2) 0 0; padding: 0.375rem var(--s-4);
  background: var(--paper-1); border-radius: var(--radius-lg);
}
.hl-upgrades li {
  display: grid; grid-template-columns: minmax(0, 11rem) auto minmax(0, 1fr); align-items: baseline; gap: var(--s-3);
  padding-block: 0.8125rem; font-size: var(--t-base); line-height: 1.4;
}
.hl-upgrades li + li { border-top: var(--rule-w) solid var(--rule); }
@media (max-width: 30rem) { .hl-upgrades li { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } }
.hl-upgrades__was { color: var(--ink-mid); }
.hl-upgrades__to { color: var(--accent-deep); }
.hl-upgrades b { color: var(--ink); font-weight: 600; }
.hero-live .sr-only {
  position: absolute; width: 0.0625rem; height: 0.0625rem; padding: 0; margin: -0.0625rem; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.hl-aside a { color: var(--ink-soft); }

.ask-demo {
  background: var(--paper-1); border-radius: 1.25rem;
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5);
}
/* Every pair occupies the same grid cell, so the card is as tall as its longest answer and never
   jumps as the cycle moves on. Only the active one is visible. */
.ask-demo__items { list-style: none; margin: 0; padding: 0; display: grid; }
.ask-demo__item { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--s-3); visibility: hidden; }
.ask-demo__item:first-child,
.js .ask-demo__item:first-child { visibility: visible; }
.js .ask-demo.is-cycling .ask-demo__item { visibility: hidden; }
.js .ask-demo.is-cycling .ask-demo__item.is-active { visibility: visible; }
.ask-demo__q {
  margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-md);
  background: var(--paper-2); color: var(--ink); font-size: var(--t-base); line-height: 1.45;
}
.ask-demo__a { padding: 0 var(--s-1); display: flex; flex-direction: column; gap: var(--s-2); }
.ask-demo__a p { margin: 0; color: var(--ink-soft); font-size: var(--t-base); line-height: 1.6; }
.ask-demo__a b { color: var(--ink); font-weight: 600; }
.ask-demo__a .ask-demo__meta { font-size: var(--t-xs); color: var(--ink-ghost); }
.js .ask-demo.is-cycling .ask-demo__q,
.js .ask-demo.is-cycling .ask-demo__a { opacity: 0; transition: opacity 0.35s ease; }
.js .ask-demo.is-cycling .is-asked .ask-demo__q,
.js .ask-demo.is-cycling .is-answered .ask-demo__a { opacity: 1; }
.ask-demo__thinking { display: inline-flex; gap: 0.3rem; padding: 0 var(--s-1); }
.ask-demo__thinking i { width: 0.4rem; height: 0.4rem; border-radius: var(--radius-full); background: var(--ink-mid); animation: ask-demo-dot 1s infinite ease-in-out; }
.ask-demo__thinking i:nth-child(2) { animation-delay: 0.15s; }
.ask-demo__thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ask-demo-dot { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

.ask-demo__box { display: flex; align-items: stretch; gap: var(--s-2); }
.ask-demo__input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--t-base); color: var(--ink);
  background: var(--paper-2); border: var(--rule-w) solid transparent; border-radius: var(--radius-md);
  padding: 0.6875rem var(--s-3);
}
.ask-demo__input::placeholder { color: var(--ink-mid); }
.ask-demo__input:focus { outline: none; border-color: var(--accent); }
/* The arrival: the cycle is done and the box is the visitor's. */
.ask-demo.is-ready .ask-demo__input { border-color: var(--accent); }
.ask-demo__pause[hidden] { display: none; }
.ask-demo__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--t-xs); color: var(--ink-mid); }
@media (prefers-reduced-motion: reduce) {
  .ask-demo__thinking i { animation: none; opacity: 0.6; }
  .js .ask-demo.is-cycling .ask-demo__q,
  .js .ask-demo.is-cycling .ask-demo__a { transition: none; }
}