/* Neighborhood landing pages — sell-your-home-*.html
   Builds on styles.css (tokens, form controls) and article.css (hero, prose,
   sidebar, FAQ, related cards). Only the pieces unique to these pages live here. */

/* ───────── Hero facts strip ───────── */
.nb-facts {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 28px; padding: 0; list-style: none;
}
.nb-facts li {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  background: var(--ice); color: var(--ink-deep);
  font-size: 14px; line-height: 1.3;
}
.nb-facts li strong {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ps-blue-dark);
}

/* ───────── Hero image ─────────
   Articles show photos full-height; a landing page needs the content above the
   fold, so crop to a banner. This file only loads on neighborhood pages. */
.art-figure img { aspect-ratio: 21 / 8; object-fit: cover; object-position: center 60%; }

/* ───────── Sub-area cards ─────────
   First card spans two columns so the grid reads as an editorial layout rather
   than a uniform tile wall. */
.nb-areas {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
  margin: 28px 0 0 !important;
}
.nb-area {
  background: #fff; border: 1px solid var(--divider); border-radius: 18px;
  padding: 22px 24px; box-shadow: var(--shadow-feather);
  display: flex; flex-direction: column; gap: 8px;
}
.nb-area:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--ice), #fff 70%);
  border-color: transparent;
}
.nb-area h3 {
  margin: 0 !important; font-size: 19px !important; font-weight: 600;
  color: var(--ink);
}
.nb-area .nb-area-tag {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--ps-blue-dark);
}
.nb-area p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-body); }

/* ───────── Pays for / doesn't ───────── */
.nb-split {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: 28px 0 0 !important;
}
.nb-col {
  border-radius: 18px; padding: 24px 26px;
}
.nb-col.pays { background: #f1f8f3; }
.nb-col.skips { background: #f7f7f8; }
.nb-col h3 {
  margin: 0 0 14px !important; font-size: 13px !important; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
}
.nb-col.pays h3 { color: #1a7f37; }
.nb-col.skips h3 { color: var(--ink-mute); }
.nb-col ul { margin: 0; padding: 0; list-style: none; }
.nb-col li {
  position: relative; padding-left: 26px;
  font-size: 16px; line-height: 1.55; color: var(--ink-deep);
}
.nb-col li + li { margin-top: 12px; }
.nb-col.pays li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: #1a7f37; font-weight: 700;
}
.nb-col.skips li::before {
  content: "–"; position: absolute; left: 2px; top: 0;
  color: var(--ink-mute); font-weight: 700;
}

/* ───────── Mid-page CTA ───────── */
.nb-cta-mid {
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  background: var(--ink); color: #fff; border-radius: 20px;
  padding: 28px 32px; margin: 44px 0 !important;
}
.nb-cta-mid h3 {
  margin: 0 !important; color: #fff; font-size: 22px !important; font-weight: 400;
  line-height: 1.3;
}
.nb-cta-mid p { margin: 6px 0 0; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.5; }
.nb-cta-mid .btn { white-space: nowrap; }

/* ───────── Recent activity ───────── */
.nb-activity {
  border: 1px dashed #c9d3e0; border-radius: 18px; padding: 22px 24px;
  background: #fbfcfe;
}
.nb-activity p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-body); }

/* ───────── Form band ───────── */
.nb-form-band { padding: 72px 0; background: #f7f9fc; scroll-margin-top: 80px; }
.nb-form-band .nb-form-head { text-align: center; max-width: 620px; margin: 0 auto 32px; }
.nb-form-band h2 {
  font-size: 36px; font-weight: 300; letter-spacing: -0.2px; line-height: 1.15;
  color: var(--ink);
}
.nb-form-band h2 em {
  font-style: italic; font-family: "Iowan Old Style", Georgia, serif;
  color: var(--ps-blue-dark); font-weight: 400;
}
.nb-form-band .nb-form-head p {
  color: var(--ink-body); font-size: 16px; line-height: 1.55; margin: 14px 0 0;
}
.nb-form-band .form-card { max-width: 820px; margin: 0 auto; }

/* ───────── Responsive ───────── */
@media (max-width: 760px) {
  .art-figure img { aspect-ratio: 16 / 10; }
  .nb-areas, .nb-split { grid-template-columns: 1fr; }
  .nb-cta-mid { grid-template-columns: 1fr; padding: 24px; }
  .nb-cta-mid .btn { width: 100%; justify-content: center; }
  .nb-form-band { padding: 52px 0; }
  .nb-form-band h2 { font-size: 28px; }
}