/* ============================================================
   State pages — the SEO inventory directory. Cities, counts and
   prices only; the single named thing is an OGC listing.
   ============================================================ */

.sp-intro{max-width:70ch}
.sp-intro p{font-size:16.5px;line-height:1.7}
.sp-intro p + p{margin-top:14px}

/* ---- featured: the only named developments on the page ---- */
.sp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sp-feat{position:relative;display:flex;flex-direction:column;gap:3px;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px 20px;
  transition:border-color .15s,box-shadow .15s}
.sp-feat:hover{border-color:var(--orange);box-shadow:var(--shadow)}
.sp-tag{align-self:flex-start;background:var(--orange);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;padding:4px 9px;border-radius:5px;margin-bottom:10px}
.sp-feat-city{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gray)}
.sp-feat-name{font-size:19px;font-weight:800;letter-spacing:-.02em;color:var(--black)}
.sp-feat-price{font-size:15px;font-weight:700;color:var(--charcoal);margin-top:2px}
.sp-feat-go{margin-top:14px;font-size:13.5px;font-weight:800;color:var(--orange-d)}

/* ---- regions (large states only) ---- */
.sp-region + .sp-region{margin-top:38px}
.sp-region-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 16px;
  padding-bottom:12px;margin-bottom:2px;border-bottom:2px solid var(--black)}
.sp-region-head h2{font-size:23px}
.sp-region-head p{font-size:13.5px;color:var(--gray);font-weight:600}

/* ---- one row per city: a link into the marketplace, not a dead end ---- */
.sp-city{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;
  padding:17px 14px;margin:0 -14px;border-bottom:1px solid var(--line);border-radius:10px;
  text-decoration:none;transition:background .13s}
.sp-city:hover{background:#fff}
.sp-city:hover .sp-go{color:var(--orange)}
.sp-city:hover .sp-h3{text-decoration:underline;text-underline-offset:3px}
.sp-city-main{min-width:0}
.sp-h3{display:block;font-size:16.5px;font-weight:700;color:var(--black);letter-spacing:-.01em;
  line-height:1.3}
.sp-meta{display:block;font-size:13.5px;color:var(--gray);margin-top:4px}
.sp-city-price{text-align:right;white-space:nowrap}
.sp-price{display:block;font-size:16px;font-weight:800;color:var(--black);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.sp-basis{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--silver);margin-top:2px}
.sp-noprice{font-size:13.5px;color:var(--silver);font-style:italic}
.sp-go{font-size:13px;font-weight:800;color:var(--silver);white-space:nowrap;
  transition:color .13s}

.sp-more{margin-top:26px;font-size:14.5px;color:var(--charcoal);max-width:70ch}
.sp-more a{color:var(--orange-d);font-weight:800}
.sp-more a:hover{text-decoration:underline}

/* ---- evergreen buyer section ---- */
.sp-faq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.sp-faq > div{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px}
.sp-faq h3{font-size:16.5px;color:var(--black);margin-bottom:8px}
.sp-faq p{font-size:14px;line-height:1.6;color:var(--charcoal)}

.cta-band .acts{display:flex;flex-wrap:wrap;gap:10px}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}

@media(max-width:1000px){
  .sp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-faq{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .sp-feats,.sp-faq{grid-template-columns:1fr}
  .sp-city{grid-template-columns:1fr;gap:8px}
  .sp-city-price{text-align:left}
  .sp-go{color:var(--orange-d)}
}

/* ---- v1: the plain city index (no prices; those live in the market block) ---- */
/* Cell borders rather than a gap-coloured background: a trailing part-row would
   otherwise show the grid colour as an empty grey block. */
/* City names only. They wrap as chips rather than filling a rigid grid, so a state
   with 53 cities and one with 3 both read well. */
.sp-cities{display:flex;flex-wrap:wrap;gap:10px}
.sp-ct{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:border-color .13s,color .13s,box-shadow .13s}
.sp-ct:hover{border-color:var(--orange);color:var(--orange-d);box-shadow:var(--shadow)}

/* ---- Data-driven Q&A (one block per state, answers built from that state's numbers) ---- */
.sp-qa{display:grid;gap:0;border-top:1px solid var(--line)}
.sp-qa-i{border-bottom:1px solid var(--line);padding:20px 0}
.sp-qa-i h3{font-size:18px;color:var(--black);margin:0 0 8px;letter-spacing:-.01em}
.sp-qa-i p{font-size:15.5px;line-height:1.65;color:var(--charcoal);margin:0;max-width:78ch}
@media(max-width:700px){
  .sp-qa-i{padding:16px 0}
  .sp-qa-i h3{font-size:16.5px}
  .sp-qa-i p{font-size:14.5px}
}

/* ---- /states hub ---- */
.sh-list{display:grid;border-top:1px solid var(--line)}
.sh-row{display:grid;grid-template-columns:1fr auto auto auto auto;gap:18px;align-items:center;
  padding:15px 4px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none;
  transition:background .12s}
.sh-row:hover{background:#F6F7F8}
.sh-name{font-weight:700;font-size:16.5px;color:var(--black)}
.sh-n,.sh-u,.sh-c{font-size:14px;color:var(--charcoal);white-space:nowrap;
  font-variant-numeric:tabular-nums;min-width:96px;text-align:right}
.sh-go{font-size:13.5px;font-weight:800;color:var(--orange);white-space:nowrap}
@media(max-width:820px){
  .sh-row{grid-template-columns:1fr auto;gap:6px 14px;padding:14px 4px}
  .sh-name{grid-column:1 / -1}
  .sh-n,.sh-u,.sh-c{min-width:0;text-align:left;font-size:13px}
  .sh-u{display:none}
  .sh-go{grid-column:2;grid-row:2;text-align:right}
}

/* ---- breadcrumb + regional links ---- */
.crumbs{font-size:13px;color:#9AA1A6;margin-bottom:14px;display:flex;flex-wrap:wrap;gap:7px}
.crumbs a{color:#C3C9CD;text-decoration:none}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs span[aria-current]{color:#fff;font-weight:600}
.sp-near{display:flex;flex-wrap:wrap;gap:10px}
.sp-ct-all{font-weight:800;color:var(--orange)}

/* status block (W4, Sep 16 2026): shown only for states at 100% Status Code */
.sp-stat{cursor:default}
.sp-stat b{color:var(--orange-d);margin-right:4px}
.sp-stat:hover{border-color:var(--line);color:inherit;box-shadow:none}