/* ==========================================================================
   Neighborhood landing pages — /neighborhoods/{slug}
   Generated by scripts/generate-neighborhood-pages.mjs. One layout for all 25.

   Scoped under .nb-page. Sections reuse biz-section + the glow classes
   (DESIGN-RULES §1/§2) — no cream, no flat gray. Cards follow §3 exactly:
   white, curved, hairline grey border, shadow at rest.

   Mobile first: this traffic arrives from an HOA email opened on a phone.
   ========================================================================== */

.nb-page {
  --nb-ink: #0a1023;
  --nb-slate: #475569;
  --nb-muted: #64748b;
  --nb-line: rgba(16, 24, 39, 0.08);
  --nb-card: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 14px rgba(0, 0, 0, 0.04);
}

.nb-page main { overflow-x: clip; }
.nb-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px; }
.nb-page h1, .nb-page h2, .nb-page h3 { font-family: 'Outfit', system-ui, sans-serif; margin: 0; }

/* ── hero ────────────────────────────────────────────────────────────────── */
.nb-hero { padding: 34px 0 28px; background: linear-gradient(180deg, #eef4ff, var(--wk-cream, #faf8f4)); }
.nb-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--wk-blue-600, #1d4ed8); }
.nb-hero h1 { font-size: 30px; line-height: 1.14; margin: 9px 0 10px; text-wrap: balance; color: var(--nb-ink); }
.nb-sub { font-size: 16.5px; line-height: 1.55; color: var(--nb-slate); margin: 0 0 16px; max-width: 58ch; }

/* chips under the H1 — ZIP is editable, because an address can sit in another ZIP */
.nb-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nb-factchip { display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid var(--nb-line); border-radius: 999px; padding: 7px 14px;
  font-size: 13px; color: var(--nb-slate); box-shadow: var(--nb-card); }
.nb-factchip b { color: var(--nb-ink); font-weight: 700; }
.nb-zipedit { border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
  color: var(--wk-blue-600, #1d4ed8); font-weight: 600; text-decoration: underline;
  text-underline-offset: 2px; }
.nb-zipbox { display: none; gap: 6px; align-items: center; }
.nb-zipbox.is-open { display: inline-flex; }
.nb-zipbox input { width: 88px; padding: 6px 10px; border: 1px solid var(--nb-line);
  border-radius: 8px; font: inherit; font-size: 13px; }

/* ── sections ────────────────────────────────────────────────────────────── */
.nb-sec { padding: 30px 0; border-top: 1px solid var(--nb-line); }
.nb-sec:first-of-type { border-top: 0; }
.nb-sec h2 { font-size: 24px; margin: 0 0 10px; }
.nb-lede { font-size: 15px; line-height: 1.6; color: var(--nb-slate); margin: 0 0 18px; max-width: 62ch; }

/* ── usage control (under Electricity in Living) ─────────────────────────── */
.nb-usage-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  width: 100%;
}
.nb-usage-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-ink);
}
.nb-seg { display: inline-flex; background: #f1f5f9; border-radius: 999px; padding: 3px; gap: 2px; }
.nb-seg button { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 700;
  color: var(--nb-muted); padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.nb-seg button[aria-selected='true'] {
  background: var(--wk-blue-600, #1d4ed8);
  color: #fff;
  box-shadow: none;
}
.nb-page .nb-guide-facts > .nb-guide-elec dd { display: block; }
.nb-page .nb-guide-facts > .nb-guide-elec { padding-top: 16px; padding-bottom: 4px; }
.nb-page .nb-living {
  padding-bottom: 12px;
}
.nb-page .nb-living + .nb-plans {
  border-top: 0;
  padding-top: 0;
  padding-bottom: 42px;
}
.nb-page .nb-plans-panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--nb-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--nb-card);
  box-sizing: border-box;
}

/* ── plan-type tabs ──────────────────────────────────────────────────────── */
.nb-type-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0 0 22px;
}
.nb-type-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-ink);
  flex: 0 0 auto;
}
.nb-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
  flex: 1 1 auto;
}
.nb-tabs button { border: 1px solid var(--nb-line); background: #fff; border-radius: 999px;
  padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600;
  color: var(--nb-slate); cursor: pointer; }
.nb-tabs button[aria-selected='true'] { background: var(--wk-blue-600, #1d4ed8);
  border-color: var(--wk-blue-600, #1d4ed8); color: #fff; }

/* ── plan list ─────────────────────────────────────────────────────────────
   The cards themselves are the wk.com cards, built by cards.js and styled by
   cards.css. What used to live here — a hand-rolled .nb-card with its own
   price row, bill figure, chips and CTA — is gone; only the list spacing and
   the empty state belong to this page now. */
.nb-list { display: grid; gap: 16px; }
.nb-empty { font-size: 14.5px; color: var(--nb-muted); padding: 22px 0; }

.nb-foot-row { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 14px 4px 0; }
.nb-foot-row span, .nb-cite { font-size: 12.5px; color: var(--nb-muted); }
.nb-cite { margin: 0; padding: 0 0 36px; line-height: 1.6; }

@media (min-width: 640px) {
  .nb-hero { padding: 42px 0 34px; }
  .nb-hero h1 { font-size: 38px; }
  .nb-sec h2 { font-size: 27px; }
}

/* ── shared product card ───────────────────────────────────────────────────
   The card is the wk.com card. It is rendered by cards.js and styled by
   cards.css, and this page adds nothing to it — no retinted metric tiles, no
   recoloured price, no second description block, no bill estimate in the
   action column. Everything this page used to append below the card (the
   three-tier row, the bill-credit warning, the steady badge) now lives in the
   plan-details modal, which is the same modal /product-results opens.

   Only the wrapper spacing belongs here. */
.nb-page .nb-card-wrap { margin: 0 0 12px; position: relative; }
.nb-page .nb-card-wrap .fv-card { width: 100%; max-width: 100%; margin: 0; }
/* The stacked card offers a call-to-enrol phone number this page does not staff. */
.nb-page .nb-card-wrap .fv-card .fv-phone { display: none; }


/* ── weather hero ────────────────────────────────────────────────────────────
   Sky + decorative scene + headline/form. Sunny by day; JS swaps night after
   7pm local. No live forecast card. */
.nb-page .nb-wx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  --nb-sky-a: #7ec8ff;
  --nb-sky-b: #ffe9a8;
  --nb-fg: #0f3d5c;
}
.nb-page .nb-wx-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(
    165deg,
    var(--nb-sky-a) 0%,
    var(--nb-sky-b) 55%,
    color-mix(in srgb, var(--nb-sky-b) 72%, white) 100%
  );
  background-size: 100% 160%;
  animation: nb-sky-shift 22s ease-in-out infinite;
}
.nb-page .nb-wx-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.nb-page .nb-wx-fade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.22), transparent 42%);
}
.nb-page .weather-scene {
  width: 100%;
  height: 100%;
  display: block;
  animation: nb-wx-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* xMaxYMin slice (set in wk-weather.js) keeps the sun/moon on the right.
   Drop the copy below the orb so headline and face don't overlap. */
@media (max-width: 720px) {
  .nb-page .nb-wx-hero-inner {
    padding-top: 7.5rem;
    min-height: 520px;
  }
}
.nb-page .weather-pop,
.nb-page .weather-sun,
.nb-page .weather-sun-glow,
.nb-page .weather-sun-rays,
.nb-page .weather-moon,
.nb-page .weather-moon-glow,
.nb-page .weather-star,
.nb-page .weather-wing,
.nb-page .weather-flake,
.nb-page .weather-bird-flight { transform-box: fill-box; transform-origin: center; }
.nb-page .weather-pop { animation: nb-wx-pop 1.15s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nb-page .weather-fade { animation: nb-wx-in 0.9s ease both; }
.nb-page .weather-sun-glow,
.nb-page .weather-moon-glow { animation: nb-wx-glow 5.5s ease-in-out infinite; }
.nb-page .weather-sun-halo { fill: #fff4c4; opacity: 0.45; }
.nb-page .weather-sun-core { fill: #ffd34d; }
.nb-page .weather-sun-highlight { fill: rgba(255, 255, 255, 0.55); }
.nb-page .weather-sun-rays line { stroke: #ffc107; }
.nb-page .weather-sun { animation: nb-wx-bob 5.6s ease-in-out 0.35s infinite; }
.nb-page .weather-sun-hot { animation: nb-wx-bob 3.2s ease-in-out 0.2s infinite; }
.nb-page .weather-sun-hot .weather-sun-core { fill: #ff9f1a; }
.nb-page .weather-sun-hot .weather-sun-rays line { stroke: #ff7a00; }
.nb-page .weather-sun-rays { animation: nb-wx-spin 36s linear infinite; }
.nb-page .weather-face-eye { fill: #3d2a12; }
.nb-page .weather-face-smile { stroke: #3d2a12; }
.nb-page .weather-face-eye-night { fill: #1a2740; }
.nb-page .weather-face-smile-night { stroke: #1a2740; }
.nb-page .weather-sweat ellipse { fill: #7ec8ff; opacity: 0.85; animation: nb-wx-drip 1.4s ease-in infinite; }
.nb-page .weather-moon { animation: nb-wx-bob 6.5s ease-in-out 0.35s infinite; }
.nb-page .weather-moon-body { fill: #f5f0c8; }
.nb-page .weather-moon-crater { fill: #e4dba0; opacity: 0.7; }
.nb-page .weather-cloud-shadow { fill: rgba(40, 60, 90, 0.16); filter: blur(2px); }
.nb-page .weather-cloud-shine { fill: rgba(255, 255, 255, 0.7); }
.nb-page .weather-cloud ellipse:not(.weather-cloud-shadow):not(.weather-cloud-shine) { fill: #fff; }
.nb-page .weather-cloud-soft ellipse:not(.weather-cloud-shadow):not(.weather-cloud-shine) { fill: rgba(255, 255, 255, 0.75); }
.nb-page .weather-cloud-rain ellipse:not(.weather-cloud-shadow):not(.weather-cloud-shine) { fill: #d5dde6; }
.nb-page .weather-cloud-storm ellipse:not(.weather-cloud-shadow):not(.weather-cloud-shine) { fill: #8b97a8; }
.nb-page .weather-cloud-storm .weather-cloud-shine { fill: rgba(255, 255, 255, 0.28); }
.nb-page .weather-cloud-night ellipse:not(.weather-cloud-shadow):not(.weather-cloud-shine) { fill: rgba(200, 210, 230, 0.35); }
.nb-page .weather-cloud-eye { fill: #4a5564; }
.nb-page .weather-cloud-smile { stroke: #4a5564; }
.nb-page .weather-cloud-drift { animation: nb-wx-drift 14s ease-in-out infinite; }
.nb-page .weather-cloud-drift-slow { animation: nb-wx-drift 22s ease-in-out infinite reverse; }
.nb-page .weather-cloud-bob { animation: nb-wx-bob 3.8s ease-in-out infinite; }
.nb-page .weather-rain line {
  stroke: #d7ecff;
  stroke-width: 2.5;
}
.nb-page .weather-rain-heavy line {
  stroke: #c5dff6;
  stroke-width: 3;
}
.nb-page .weather-drop {
  transform-box: fill-box;
  transform-origin: center;
  animation: nb-wx-fall 0.9s linear infinite;
}
.nb-page .weather-sky-flash {
  fill: #f7f4ff;
  opacity: 0;
  animation: nb-wx-flash 4.4s ease-in-out infinite;
}
.nb-page .weather-lightning path {
  fill: #ffe566;
  opacity: 0;
  filter: drop-shadow(0 0 6px #ffe9a0);
  animation: nb-wx-bolt 4.4s ease-in-out infinite;
  animation-delay: var(--bolt-delay, 0s);
}
.nb-page .weather-wing { fill: none; stroke: #3d4a5c; stroke-width: 2.5; stroke-linecap: round; }
.nb-page .weather-wing-l { transform-origin: 100% center; animation: nb-wx-wing-l 0.95s ease-in-out infinite; }
.nb-page .weather-wing-r { transform-origin: 0 center; animation: nb-wx-wing-r 0.95s ease-in-out infinite; }
.nb-page .weather-bird-flight { animation: nb-wx-glide 12s ease-in-out infinite; }
.nb-page .weather-heat-wave {
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 3;
  stroke-linecap: round;
  fill: none;
  animation: nb-wx-shimmer 2s ease-in-out infinite;
}
.nb-page .weather-star { animation: nb-wx-twinkle 3.4s ease-in-out infinite; }
.nb-page .weather-star-glow { fill: #fff6c8; opacity: 0.35; }
.nb-page .weather-star-dot,
.nb-page .weather-star path { fill: #fff8dc; }
@keyframes nb-sky-shift {
  0%, 100% { background-position: 50% 0; }
  50% { background-position: 50% 100%; }
}
@keyframes nb-wx-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-wx-pop {
  from { opacity: 0; transform: scale(0.78) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes nb-wx-glow {
  0%, 100% { opacity: 0.72; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
@keyframes nb-wx-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes nb-wx-spin { to { transform: rotate(360deg); } }
@keyframes nb-wx-drift {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(28px); }
}
@keyframes nb-wx-fall {
  0% { opacity: 0; transform: translateY(-16px); }
  12% { opacity: 0.95; }
  80% { opacity: 0.85; }
  100% { opacity: 0; transform: translateY(380px); }
}
@keyframes nb-wx-flash {
  0%, 8%, 18%, 100% { opacity: 0; }
  10%, 14% { opacity: 0.22; }
  12% { opacity: 0.06; }
}
@keyframes nb-wx-bolt {
  0%, 8%, 18%, 100% { opacity: 0; }
  10%, 15% { opacity: 0.9; }
  12% { opacity: 0.15; }
}
@keyframes nb-wx-drip {
  from { opacity: 0.85; transform: translateY(0); }
  to { opacity: 0; transform: translateY(18px); }
}
@keyframes nb-wx-shimmer {
  0%, 100% { opacity: 0.35; transform: translateY(0) scaleX(1); }
  50% { opacity: 0.8; transform: translateY(-8px) scaleX(1.05); }
}
@keyframes nb-wx-twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes nb-wx-glide {
  0%, 100% { transform: translate(0); }
  50% { transform: translate(26px, -7px); }
}
@keyframes nb-wx-wing-l {
  0%, 100% { transform: rotate(16deg); }
  50% { transform: rotate(-34deg); }
}
@keyframes nb-wx-wing-r {
  0%, 100% { transform: rotate(-16deg); }
  50% { transform: rotate(34deg); }
}
@media (prefers-reduced-motion: reduce) {
  .nb-page .nb-wx-sky,
  .nb-page .weather-scene,
  .nb-page .weather-scene * { animation: none !important; }
  .nb-page .weather-lightning path { opacity: 0.85; filter: none; }
  .nb-page .weather-sky-flash { opacity: 0.08; }
  /* Frozen mid-fall dashes look broken. Keep a light static drizzle instead. */
  .nb-page .weather-drop { opacity: 0; }
  .nb-page .weather-drop:nth-child(3n) { opacity: 0.55; }
}
.nb-page .nb-wx-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 28px 20px 36px;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 18px;
  box-sizing: border-box;
}
.nb-page .nb-wx-copy {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 36rem;
  color: var(--nb-fg);
  box-sizing: border-box;
  text-shadow: 0 1px 2px rgba(15, 31, 61, 0.28);
}
.nb-page .nb-wx-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.75;
}
.nb-page .nb-wx-copy h1 {
  color: inherit;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}
.nb-page .nb-wx-sub {
  color: inherit;
  font-size: 17px;
  line-height: 1.45;
  margin: 14px 0 0;
  max-width: 38ch;
  opacity: 0.92;
}
.nb-page .nb-wx-copy .zip-form--hero {
  margin: 22px auto 0;
  max-width: 300px;
  text-shadow: none;
  opacity: 1;
  animation: none;
}
.nb-page .nb-alt-zip {
  margin: 12px 0 0;
  max-width: 34ch;
  font-size: 15px;
  line-height: 1.4;
}
.nb-page .nb-glance-about {
  margin: 10px 0 0;
  max-width: 72ch;
  color: var(--nb-ink);
  font-size: 15px;
  line-height: 1.55;
}
.nb-page .nb-glance-about a { color: #1d4ed8; font-weight: 700; }
.nb-page .nb-zip-page { margin: 0 0 14px; }
.nb-page .nb-zip-page a {
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nb-page .nb-qf-card a {
  color: #1d4ed8;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nb-page .nb-jumpbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 14px 20px;
  border-bottom: 1px solid var(--nb-line);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}
.nb-page .nb-jumpbar a {
  color: var(--wk-blue-600, #1d4ed8);
  font-weight: 600;
  text-decoration: none;
}
.nb-page .nb-jumpbar a:hover { text-decoration: underline; }
.nb-page .nb-sec-intro {
  margin: 8px 0 16px;
  max-width: 72ch;
  color: var(--nb-slate);
  font-size: 15px;
  line-height: 1.55;
}
.nb-page .nb-sec-intro a { color: var(--wk-blue-600, #1d4ed8); font-weight: 700; }
.nb-page .nb-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}
.nb-page .nb-contact-card {
  padding: 18px;
  border: 1px solid var(--nb-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--nb-card);
}
.nb-page .nb-contact-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--nb-ink);
}
.nb-page .nb-contact-phone,
.nb-page .nb-contact-phone-wrap a {
  display: inline-block;
  font-family: Outfit, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--wk-blue-700, #1e40af);
  text-decoration: none;
  margin-bottom: 6px;
}
.nb-page .nb-contact-note {
  margin: 8px 0 0;
  color: var(--nb-slate);
  font-size: 13px;
  line-height: 1.45;
}
@media (min-width: 800px) {
  .nb-page .nb-contact-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 800px) {
  .nb-page .nb-wx-hero-inner {
    position: relative;
    padding: 32px 34px 48px;
    min-height: 68vh;
  }
  .nb-page .nb-wx-copy {
    padding-top: 1.25rem;
  }
  .nb-page .nb-wx-sub {
    font-size: 20px;
  }
  .nb-page .nb-jumpbar { padding-left: 34px; padding-right: 34px; }
}

/* ── live weather in the resident resources ────────────────────────────────── */
.nb-page .nb-wx-card {
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 16px;
  box-shadow: var(--nb-card); padding: 16px 18px;
  /* display and min-width are explicit: the card sits in a grid track, and
     without them the alert was laid out beside the temperature and spilled
     past the card's right edge instead of stacking under it. */
  display: block; min-width: 0; box-sizing: border-box;
}
.nb-page .nb-wx-card > * { min-width: 0; max-width: 100%; }
.nb-page .nb-wx-card[hidden] { display: none; }
.nb-page .nb-wx-head { display: flex; align-items: center; gap: 14px; min-width: 0; }
.nb-page .nb-wx-head .nb-wx-icon { width: 52px; height: 52px; flex: none; }
.nb-page .nb-wx-head .nb-wx-icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.nb-page .nb-wx-read { min-width: 0; }
/* Temperature leads the card, as it does on the /zip/ pages. */
.nb-page .nb-wx-card p.nb-wx-temp {
  font-family: 'Outfit', system-ui, sans-serif; font-size: 40px; font-weight: 700;
  color: var(--nb-ink); margin: 0; line-height: 1; letter-spacing: -.02em;
}
.nb-page .nb-wx-card p.nb-wx-temp span { font-size: .55em; font-weight: 600; vertical-align: .5em; margin-left: 1px; }
.nb-page .nb-wx-card p.nb-wx-cond { font-size: 13.5px; font-weight: 600; color: var(--nb-ink); margin: 5px 0 0; line-height: 1.35; }
.nb-page .nb-wx-card p.nb-wx-place { font-size: 12.5px; color: var(--nb-slate); margin: 2px 0 0; }
.nb-page .nb-wx-alert {
  display: block; width: 100%; margin: 12px 0 0; padding: 9px 11px; border-radius: 10px;
  background: #fffbeb; border: 1px solid #fde68a;
}
.nb-page .nb-wx-alert b { display: block; font-size: 12.5px; color: #92400e; }
.nb-page .nb-wx-alert span { display: block; font-size: 11.5px; line-height: 1.45; color: var(--nb-slate); margin-top: 2px; }
/* ── resident guide ──────────────────────────────────────────────────────── */
.nb-page .nb-guide-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 18px; align-items: stretch; }
.nb-page .nb-guide-card {
  min-width: 0; min-height: 100%; padding: 22px; border: 1px solid var(--nb-line);
  border-radius: 16px; background: #fff; box-shadow: var(--nb-card);
  box-sizing: border-box;
}
.nb-page .nb-guide-card h3 { color: var(--nb-ink); font-size: 19px; line-height: 1.25; margin: 0 0 12px; }
.nb-page .nb-guide-card p { color: var(--nb-slate); font-size: 13.5px; line-height: 1.5; margin: 0 0 12px; }
.nb-page .nb-guide-card a { color: var(--wk-blue-700, #1d4ed8); font-weight: 700; text-decoration: none; }
.nb-page .nb-guide-card a:hover { text-decoration: underline; }
.nb-page .nb-guide-facts { margin: 0; }
.nb-page .nb-guide-facts > div { padding: 10px 0; border-top: 1px solid var(--nb-line); }
.nb-page .nb-guide-facts > div:first-child { border-top: 0; padding-top: 0; }
.nb-page .nb-guide-facts dt { color: var(--nb-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nb-page .nb-guide-facts dd { display: flex; flex-wrap: wrap; gap: 4px 10px; color: var(--nb-ink); font-size: 14px; line-height: 1.45; margin: 4px 0 0; }
/* Hauler on one line, pickup day on the next, rather than both run together. */
.nb-page .nb-guide-line { flex: 0 0 100%; }
.nb-page .nb-guide-sub { color: var(--nb-slate); font-size: 13px; }
.nb-page .nb-amenity-list {
  margin: 0; padding: 0 0 0 1.15em; color: var(--nb-ink); font-size: 14px; line-height: 1.5;
}
.nb-page .nb-amenity-list li { margin: 0 0 6px; }
.nb-page .nb-amenity-list li:last-child { margin-bottom: 0; }
.nb-page .nb-guide-card--outage {
  background: #0f1f3d;
  border-color: #0f1f3d;
  display: flex;
  flex-direction: column;
}
.nb-page .nb-guide-card--outage h3, .nb-page .nb-guide-card--outage .nb-outage-phone { color: #fff; }
.nb-page .nb-guide-card--outage p, .nb-page .nb-guide-card--outage .nb-guide-caption { color: #d3deef; }
.nb-page .nb-outage-phone { display: block; font-family: Outfit, system-ui, sans-serif; font-size: 31px; line-height: 1.1; }
.nb-page .nb-guide-caption { display: block; font-size: 12px; margin: 3px 0 18px; }
.nb-page .nb-guide-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.nb-page .nb-guide-card--outage .nb-guide-actions a {
  color: #fff; border: 1px solid #748db5; border-radius: 9px; padding: 9px 12px; font-size: 12.5px;
}
.nb-page .nb-guide-card--outage .nb-guide-source { font-size: 11px; margin: 14px 0 0; }
.nb-page .nb-guide-card--outage .nb-guide-source a { color: #d3deef; text-decoration: underline; }
.nb-page .nb-guide-link { margin: 12px 0 0 !important; }
.nb-page .nb-faq details { border-top: 1px solid var(--nb-line); padding: 15px 0; }
.nb-page .nb-faq summary { color: var(--nb-ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.nb-page .nb-faq details p { color: var(--nb-slate); font-size: 13.5px; line-height: 1.6; margin: 9px 0 0; }
.nb-page .nb-faq details a { color: var(--wk-blue-700, #1d4ed8); }
.nb-page .nb-more {
  border: 1px solid var(--wk-blue-600, #1d4ed8); border-radius: 9px;
  background: #fff; color: var(--wk-blue-700, #1d4ed8);
  padding: 10px 16px; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.nb-page .nb-more:hover { background: #eff6ff; }
.nb-page .nb-more[hidden] { display: none; }
@media (min-width: 720px) {
  .nb-page .nb-guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── breathing room under the hero; plans sit tight under Living ──────────── */
.nb-page .nb-wx-hero { margin-bottom: 8px; }
.nb-page .nb-living + #nb-plans-sec {
  padding-top: 0;
  padding-bottom: 42px;
}
@media (min-width: 768px) {
  .nb-page .nb-living + #nb-plans-sec { padding-bottom: 54px; }
}

/* ── quick facts + map ───────────────────────────────────────────────────────
   Two-column on desktop, stacked on mobile. Rows are emitted only when they
   have a value, so a panel with nothing to say does not render at all. */
/* ── at a glance: map + one quick-facts card ───────────────────────────────
   Every selector here is scoped to its own class. The previous version leaned
   on a bare ".nb-about div" descendant selector, which also matched the map
   wrapper and the map itself, turned both into flex containers and shrank the
   map to the width of its (absolutely positioned) contents — 2px. Leaflet and
   the tiles were loading correctly the whole time; there was nothing to see. */
.nb-page .nb-glance-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin: 18px 0 0; align-items: start; }
.nb-page .nb-glance-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.nb-page .nb-glance-contacts { margin: 0; }
.nb-page .nb-qf-card {
  min-width: 0; box-sizing: border-box; padding: 22px;
  background: #fff; border: 1px solid var(--nb-line); border-radius: 16px; box-shadow: var(--nb-card);
}
.nb-page .nb-qf-card dl { display: block; margin: 0; }
.nb-page .nb-qf-card > dl > div {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; padding: 11px 0; border-top: 1px solid var(--nb-line);
}
.nb-page .nb-qf-card > dl > div:first-child { border-top: 0; padding-top: 0; }
.nb-page .nb-qf-card > dl > div:last-child { padding-bottom: 0; }
.nb-page .nb-qf-card dt { flex: 0 1 auto; font-size: 13.5px; color: var(--nb-muted); margin: 0; }
.nb-page .nb-qf-card dd { flex: 0 1 auto; font-size: 14px; font-weight: 600; color: var(--nb-ink); margin: 0; text-align: right; }
.nb-page .nb-qf-tag {
  display: inline-block; background: #f1f5f9; color: var(--nb-slate); border-radius: 999px;
  padding: 2px 8px; margin-left: 6px; font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
}
/* The map is a block in its own right. Width is pinned so no ancestor's
   display can shrink it again, and min-height guarantees a box for Leaflet to
   measure when L.map() runs. */
.nb-page .nb-map-wrap { display: block; min-width: 0; margin: 0; }
.nb-page .nb-map {
  display: block; width: 100%; height: 300px; min-height: 300px;
  border-radius: 16px; overflow: hidden;
  border: 1px solid var(--nb-line); box-shadow: var(--nb-card); background: #eef2f7;
}
.nb-page .nb-map-note { font-size: 12px; color: var(--nb-muted); margin: 8px 0 0; }
.nb-page .nb-glance-grid--solo { grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .nb-page .nb-glance-grid { grid-template-columns: 1.15fr 1fr; gap: 20px; }
  .nb-page .nb-map { height: 100%; min-height: 340px; }
  .nb-page .nb-glance-grid--solo { grid-template-columns: 1fr; }
}

/* ── which card layout shows, and when ─────────────────────────────────────
   Both cards are rendered for every plan and CSS picks one, the same shape
   /product-results uses — but at 900px, not cards.css's 470px. The horizontal
   card is built for a wide column: measured on this page, 64 elements overflow
   the viewport at 500px and none at 768px, so the narrow band keeps the
   stacked card, which is self-contained at any width.

   This replaces a JS breakpoint that chose a layout at render time and had to
   rebuild the whole list on every resize across the line. Plan details are now
   the site's own modal (modal.js binds inside #plan-list), so this page no
   longer carries a details panel of its own. */
@media (max-width: 899px) {
  .nb-page .nb-card-wrap .plan-card-horizontal,
  .nb-page .nb-card-wrap .plan-card-horizontal-wrapper { display: none !important; }
  .nb-page .nb-card-wrap .business-card { display: flex !important; }
}
@media (min-width: 900px) {
  .nb-page .nb-card-wrap .business-card { display: none !important; }
  .nb-page .nb-card-wrap .plan-card-horizontal-wrapper { display: block !important; }
  .nb-page .nb-card-wrap .plan-card-horizontal { display: flex !important; }
}

/* .plan-list carries width/margin/padding resets from cards.css; the gap
   between cards stays on .nb-list, so the inner container adds nothing. */
.nb-page .nb-list #plan-list { display: contents; }