*, *::before, *::after { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      --ink: #111827;
      --muted: #4b5563;
      --soft: #f8fafc;
      --line: #e5e7eb;
      --green: #16a34a;
      --green-dark: #059669;
      --green-soft: #dcfce7;
      --green-hist: #86efac;
      --green-pale: #ecfdf5;
      --green-line: #bbf7d0;
      --blue: #2563eb;
      margin: 0;
      min-width: 320px;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background: #ffffff;
      line-height: 1.65;
    }
    a { color: inherit; }
    .seo-shell {
      min-height: 100vh;
      background:
        linear-gradient(135deg, rgba(16, 185, 129, .12) 0%, rgba(16, 185, 129, 0) 34rem),
        linear-gradient(rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 23, 42, .035) 1px, transparent 1px),
        linear-gradient(180deg, #f1f5f9 0%, #ffffff 28rem, #ffffff 100%);
      background-size: auto, 48px 48px, 48px 48px, auto;
      background-position: center top;
    }
    .seo-container { width: min(1140px, calc(100% - 2.2rem)); margin: 0 auto; }
    .seo-nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(14px); }
    .seo-nav__inner { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: .7rem 0; }
    .seo-nav__brand { height: 34px; width: auto; display: block; }
    .seo-nav__links { display: flex; align-items: center; gap: 1.3rem; color: var(--muted); font-size: .9rem; font-weight: 600; }
    .seo-nav__actions { margin-left: auto; }
    .seo-nav__links a { text-decoration: none; }
    .seo-nav__links a:hover { color: var(--green-dark); }
    .seo-nav__cta { display: inline-flex; align-items: center; justify-content: center; border-radius: .55rem; background: var(--green); color: #fff; padding: .5rem 1.1rem; text-decoration: none; font-size: .9rem; font-weight: 600; white-space: nowrap; box-shadow: 0 8px 20px -8px rgba(22, 163, 74, .5); }
    .seo-nav__menu { position: relative; display: none; }
    .seo-nav__burger { list-style: none; -webkit-tap-highlight-color: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .5rem; border: 1px solid var(--line); background: #fff; color: var(--ink); }
    .seo-nav__burger::-webkit-details-marker { display: none; }
    .seo-nav__menu[open] .seo-nav__burger { background: var(--soft); border-color: var(--muted); }
    .seo-nav__panel { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 14rem; display: flex; flex-direction: column; gap: .1rem; padding: .4rem; background: #fff; border: 1px solid var(--line); border-radius: .85rem; box-shadow: 0 18px 44px -14px rgba(15, 23, 42, .28); z-index: 20; }
    .seo-nav__panel a { display: flex; align-items: center; padding: .72rem .8rem; border-radius: .55rem; font-size: .95rem; font-weight: 650; color: var(--ink); text-decoration: none; white-space: nowrap; }
    .seo-nav__panel a:hover { background: var(--soft); color: var(--ink); }
    .seo-hero { position: relative; overflow: hidden; padding: clamp(2.1rem, 4.5vw, 4rem) 0 clamp(3.5rem, 6vw, 5.5rem); background: linear-gradient(180deg, rgba(236, 253, 245, .78) 0%, rgba(248, 250, 252, .94) 38%, rgba(255, 255, 255, .94) 78%, #fff 100%); }
    .seo-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: .25rem; background: linear-gradient(90deg, var(--green), rgba(16, 185, 129, 0)); }
    .seo-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 9rem; pointer-events: none; background: linear-gradient(180deg, transparent, #fff); }
    .seo-hero > .seo-container { position: relative; z-index: 1; }
    .seo-breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; color: #64748b; font-size: .9rem; }
    .seo-breadcrumbs a { text-decoration: none; }
    .seo-breadcrumbs a:hover { color: var(--green-dark); }
    .seo-breadcrumbs span::before { content: "/"; margin-right: .4rem; color: #94a3b8; }
    .seo-hero__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(400px, 1.18fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: center; }
    .seo-hero__single { max-width: 1040px; margin: 0 auto; }
    .seo-hero h1 { margin: 0; max-width: 850px; font-size: clamp(2.35rem, 5.4vw, 5rem); line-height: .98; letter-spacing: 0; color: var(--ink); }
    /* Desktop keeps the stamp inline and in the headline's own type, exactly as
       it read when it was part of the h1 string — the span is only a handle. */
    @media (max-width: 700px) {
      .seo-h1__note { display: block; margin-top: .45rem; font-size: max(.58em, .95rem); font-weight: 600; line-height: 1.25; color: var(--muted); }
    }
    .seo-hero__grid h1 { font-size: clamp(2.05rem, 4vw, 3.85rem); }
    .seo-kicker { display: inline-flex; align-items: center; gap: .65rem; margin: 0 0 1rem; color: var(--green); font-size: .9rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
    .seo-kicker span { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--green); border-radius: 999px; background: #fff; }
    .seo-kicker span::before { content: ""; width: .4rem; height: .6rem; margin-bottom: .07rem; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(45deg); }
    .seo-lead { max-width: 740px; margin: 1.25rem 0 0; font-size: clamp(1.05rem, 2vw, 1.28rem); color: #334155; }
    .seo-tldr { display: grid; gap: .7rem; max-width: 760px; margin: 1.6rem 0 0; padding: 0; list-style: none; color: #334155; }
    /* Street pages defer the summary bullets until after the map and the table
       (see streetFirst), so they need their own spacing outside the hero. */
    .seo-street-tldr { margin: 0 auto 2.2rem; }
    .seo-street-tldr .seo-tldr { margin-top: 0; }
    .seo-tldr li { position: relative; padding-left: 1.25rem; }
    .seo-tldr li::before { content: ""; position: absolute; left: 0; top: .55rem; width: .95rem; height: .95rem; border-radius: 999px; background: var(--green-soft); }
    .seo-tldr li::after { content: ""; position: absolute; left: .31rem; top: .75rem; width: .32rem; height: .5rem; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(40deg); }
    .seo-cta { margin-top: 1.7rem; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem; }
    .seo-cta .seo-cta__assure { flex: 0 0 100%; max-width: 660px; margin: 0; color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.4; }
    .seo-cta a { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border-radius: .55rem; background: var(--ink); color: #fff; padding: .75rem 1.1rem; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px rgba(22, 163, 74, .16); }
    .seo-cta a:hover, .seo-nav__cta:hover { background: var(--green-dark); }
    .seo-cta p { flex: 1 1 260px; max-width: 500px; margin: 0; color: var(--muted); font-size: .95rem; }
    /* "You are viewing X prices, switch to Y" banner under the H1 on price pages.
       Deliberately blue to stand out against the page's green accent. */
    .seo-price-switch { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0 0 1.25rem; padding: .75rem 1rem; border: 1px solid #bfdbfe; border-left: 4px solid #2563eb; border-radius: .55rem; background: linear-gradient(180deg, rgba(219, 234, 254, .9), rgba(219, 234, 254, .55)); font-size: .96rem; line-height: 1.45; }
    .seo-price-switch__now { color: #1e293b; }
    .seo-price-switch__now strong { font-weight: 800; color: #1e3a8a; }
    .seo-price-switch__to { color: #1d4ed8; font-weight: 700; text-decoration: none; }
    .seo-price-switch__to:hover { text-decoration: underline; }
    /* Data-first city price hero: compact title so the median + chart sit above the fold. */
    .seo-hero--data { padding-top: clamp(1.4rem, 3vw, 2.4rem); }
    .seo-hero--data h1 { font-size: clamp(1.55rem, 3.4vw, 2.5rem); line-height: 1.08; margin-bottom: 1rem; }
    .seo-stats__lede { margin: 0 0 1.1rem; }
    .seo-hero--data .seo-stats { margin: 0 0 1.1rem; }
    .seo-hero--data .seo-cta { margin-top: 0; }
    .seo-hero--data .seo-lead { margin-top: 1.6rem; font-size: clamp(1rem, 1.7vw, 1.12rem); }
    /* Phones: lead with the chart, then the CTA, then the explanatory text; drop the
       breadcrumb so the title starts higher (it stays in the JSON-LD for SEO). */
    @media (max-width: 700px) {
      .seo-hero--data .seo-breadcrumbs { display: none; }
      .seo-hero--data .seo-hero__single { display: flex; flex-direction: column; }
      .seo-hero--data .seo-kicker { order: 1; }
      .seo-hero--data h1 { order: 2; }
      .seo-hero--data .seo-price-switch { order: 2; margin-bottom: 1rem; }
      .seo-hero--data .seo-stats { order: 3; margin: 0 0 1rem; }
      /* Same order as the median panel it follows: equal orders fall back to DOM
         order, and the slot is inserted directly after it. */
      .seo-hero--data .seo-mobile-map-slot { order: 3; margin: 0 0 1.1rem; }
      .seo-hero--data .seo-cta { order: 4; margin: 0 0 1.6rem; }
      .seo-hero--data .seo-stats__lede { order: 5; }
      .seo-hero--data .seo-lead { order: 6; margin-top: 0; }
      .seo-hero--data .seo-tldr { order: 7; }
      /* The map, hoisted out of its band into the hero, is no longer a card in a
         card: the panel it now sits in already draws the border. */
      .seo-mobile-map-slot > .seo-an__card { margin: 0; border: 0; padding: 0; background: none; box-shadow: none; }
      .seo-mobile-map-slot .seo-an__livemap[data-live-map-active] { height: 58vh; }
    }
    .seo-mobile-map-slot { display: contents; }
    @media (max-width: 700px) { .seo-mobile-map-slot { display: block; } }
    .seo-visual { margin: 0; }
    .seo-hero-media { position: relative; z-index: 2; margin-top: clamp(-3.25rem, -5vw, -2rem); padding: 0 0 clamp(2.25rem, 4.5vw, 3.5rem); background: #fff; border-bottom: 1px solid var(--line); }
    /* When the analysis dashboard sits between the hero and the screenshot, the
       hero stops at the median panel and the screenshot no longer overlaps it. */
    .seo-hero--analysis { padding-bottom: clamp(1.1rem, 2.5vw, 1.8rem); }
    .seo-hero--analysis::after { display: none; }
    /* Match the median panel width to the analysis band below it (drop the 1040 cap). */
    .seo-hero--analysis .seo-hero__single { max-width: none; }
    .seo-an-band { background: #fff; padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(1rem, 2vw, 1.6rem); }
    .seo-hero-media--flat { margin-top: 0; padding-top: clamp(1rem, 2vw, 1.6rem); border-top: 1px solid var(--line); }
    .seo-hero-media .seo-visual { max-width: 1060px; margin: 0 auto; }
    .seo-hero-media .seo-visual__frame { box-shadow: 0 22px 60px rgba(15, 23, 42, .16); }
    .seo-visual__link { display: block; text-decoration: none; transition: transform .2s ease; }
    .seo-visual__link:hover { transform: translateY(-3px); }
    .seo-visual__frame { overflow: hidden; border: 1px solid #dbe3ee; border-radius: .7rem; background: #e2e8f0; box-shadow: 0 12px 34px rgba(15, 23, 42, .13); transition: box-shadow .2s ease; }
    .seo-visual__link:hover .seo-visual__frame { box-shadow: 0 18px 46px rgba(15, 23, 42, .2); }
    .seo-visual__frame img { width: 100%; height: auto; display: block; }
    .seo-visual--duo { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1.1rem; align-items: start; }
    @media (max-width: 720px) { .seo-visual--duo { grid-template-columns: 1fr; } }
    .seo-visual__col { margin: 0; display: flex; flex-direction: column; gap: .6rem; }
    .seo-visual__cap { margin: 0; color: var(--muted); font-size: .92rem; line-height: 1.45; }
    .seo-shot[data-full-src] { cursor: zoom-in; }
    #img-lightbox { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; padding: 0; border: none; background: transparent; cursor: zoom-out; }
    #img-lightbox[open] { display: grid; place-items: center; }
    #img-lightbox::backdrop { background: rgba(0, 0, 0, .82); backdrop-filter: blur(4px); cursor: zoom-out; }
    #img-lightbox .lb-media { display: grid; place-items: center; max-width: 92vw; max-height: 92vh; border-radius: .75rem; overflow: hidden; box-shadow: 0 32px 80px rgba(0, 0, 0, .6); cursor: default; }
    #img-lightbox img { display: block; max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: default; }
    #img-lightbox .lb-close { position: fixed; top: 1.25rem; right: 1.25rem; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: rgba(255, 255, 255, .15); border: none; color: #fff; font-size: 1.25rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
    .seo-visual--compare .seo-visual__frame { position: relative; height: clamp(21rem, 34vw, 30rem); aspect-ratio: auto; }
    .seo-visual--compare .seo-visual__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; animation: hero-camera-pan 16s cubic-bezier(.65, 0, .35, 1) infinite; }
    .seo-report-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .75rem; }
    .seo-report-tabs span { display: inline-flex; align-items: center; min-height: 1.85rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); padding: .35rem .7rem; font-size: .78rem; font-weight: 700; line-height: 1; animation: seo-report-tab-cycle 36s infinite; animation-delay: calc(var(--i) * -3.6s); }
    .seo-report-tabs span.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
    .seo-report-frame { position: relative; aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid #dbe3ee; border-radius: .65rem; background: #f8fafc; box-shadow: 0 8px 24px rgba(15, 23, 42, .1); }
    .seo-report-frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; object-position: top center; padding: .45rem; opacity: 0; animation: seo-report-cycle 36s infinite; animation-delay: calc(var(--i) * -3.6s); }
    .seo-report-frame img.is-active { opacity: 1; }
    @keyframes seo-report-cycle {
      0%, 8% { opacity: 1; transform: translateY(0); }
      10%, 98% { opacity: 0; transform: translateY(.45rem); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes seo-report-tab-cycle {
      0%, 8% { background: var(--ink); border-color: var(--ink); color: #fff; }
      10%, 98% { background: #fff; border-color: var(--line); color: var(--muted); }
      100% { background: var(--ink); border-color: var(--ink); color: #fff; }
    }
    @keyframes hero-camera-pan {
      0%, 14.286% { object-position: 50% 0%; }
      28.571%, 50% { object-position: 50% 50%; }
      64.286%, 85.714% { object-position: 50% 100%; }
      100% { object-position: 50% 0%; }
    }
    .seo-stats { margin: 0 0 2.5rem; padding: 1.4rem 1.5rem 1.2rem; border: 1px solid var(--green-line); border-radius: .9rem; background: linear-gradient(180deg, var(--green-pale), #fff 72%); box-shadow: 0 10px 30px rgba(22, 163, 74, .08); }
    .seo-stats__kicker { margin: 0 0 .5rem; color: var(--green-dark); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
    .seo-stats__title { margin: 0 0 .45rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.2; letter-spacing: 0; color: var(--ink); }
    .seo-stats__intro { margin: 0 0 1.3rem; max-width: 760px; color: #334155; font-size: 1rem; }
    .seo-stats__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: 1.25rem 2rem; align-items: end; }
    .seo-stats__grid--solo { grid-template-columns: 1fr; }
    .seo-stats__label { margin: 0 0 .4rem; color: var(--muted); font-size: .92rem; }
    .seo-stats__value { margin: 0; font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 850; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
    /* Stands in for the median on an area under the publication floor. Much
       smaller than a price, because it is a sentence, not a number, and at the
       price size it wraps to three lines in a phone-width column. */
    .seo-stats__value--none { font-size: clamp(1.3rem, 3.2vw, 1.7rem); font-weight: 800; color: var(--muted); letter-spacing: 0; line-height: 1.2; }
    .seo-stats__value small { margin-left: .45rem; font-size: .95rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
    .seo-stats__deltas { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .95rem; }
    .seo-delta { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .32rem .65rem; font-size: .82rem; font-weight: 800; }
    .seo-delta__label { font-weight: 600; opacity: .82; }
    .seo-delta--up { background: var(--green-soft); color: var(--green-dark); }
    .seo-delta--down { background: #fee2e2; color: #b91c1c; }
    .seo-delta--flat { background: #e5e7eb; color: #4b5563; }
    .seo-stats__chart { display: grid; gap: .45rem; }
    .seo-chart { position: relative; height: 64px; cursor: crosshair; touch-action: pan-y; }
    .seo-spark { width: 100%; height: 64px; display: block; overflow: visible; }
    .seo-chart__line { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(22, 163, 74, .5); pointer-events: none; }
    .seo-chart__dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 999px; background: #fff; border: 2px solid var(--green-dark); pointer-events: none; }
    .seo-chart__tip { position: absolute; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 700; padding: .3rem .5rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); }
    .seo-stats__axis { display: flex; justify-content: space-between; color: #94a3b8; font-size: .74rem; }
    .seo-stats__caption { margin: .15rem 0 0; color: #94a3b8; font-size: .76rem; line-height: 1.45; }
    .seo-hist { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 64px; cursor: crosshair; touch-action: pan-y; }
    .seo-hist__bar { flex: 1 1 0; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--green-hist); transition: background .15s ease; }
    .seo-hist__bar.is-median { background: var(--green); }
    .seo-hist__bar.is-active, .seo-hist__bar:hover { background: var(--green-dark); }
    .seo-hist__tip { position: absolute; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .76rem; font-weight: 700; padding: .3rem .5rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); }
    .seo-stats__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .55rem 1.25rem; margin: 1.2rem 0 0; padding-top: .9rem; border-top: 1px solid var(--green-line); }
    .seo-stats__meta { margin: 0; color: var(--muted); font-size: .85rem; }
    .seo-stats__cta { display: inline-flex; align-items: center; gap: .3rem; color: var(--green-dark); font-weight: 800; font-size: .9rem; text-decoration: none; white-space: nowrap; }
    .seo-stats__cta:hover { color: #047857; text-decoration: underline; }
    .seo-stats__note { margin: .75rem 0 0; color: #94a3b8; font-size: .78rem; line-height: 1.5; }
    .seo-main { padding: 4rem 0 4.5rem; background: #fff; }
    .seo-content { max-width: 1040px; margin: 0 auto; }
    .seo-rank { margin: 0 0 2.5rem; padding: 1.5rem 1.6rem 1.3rem; border: 1px solid var(--green-line); border-radius: .9rem; background: linear-gradient(180deg, var(--green-pale), #fff 72%); }
    .seo-rank__title { margin: 0 0 .5rem; font-size: clamp(1.3rem, 2.2vw, 1.75rem); line-height: 1.2; color: var(--ink); }
    .seo-rank__intro { margin: 0 0 1.1rem; max-width: 820px; color: #334155; font-size: .98rem; }
    .seo-rank__scroll { overflow-x: auto; }
    .seo-rank__table { width: 100%; border-collapse: collapse; font-size: .96rem; }
    .seo-rank__table th { text-align: left; padding: .55rem .6rem; color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--green-line); }
    .seo-rank__table td { padding: .6rem .6rem; border-bottom: 1px solid var(--line); }
    .seo-rank__table tr:last-child td { border-bottom: none; }
    .seo-rank__city a { color: var(--ink); font-weight: 800; text-decoration: none; }
    .seo-rank__city a:hover { color: var(--green-dark); }
    .seo-rank__price { font-weight: 800; white-space: nowrap; }
    .seo-rank__nodelta { color: #94a3b8; }
    .seo-hoods { margin: 0 0 2.75rem; }
    .seo-hoods__title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 1.95rem); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
    .seo-hoods__intro { margin: 0 0 1.4rem; max-width: 820px; color: #334155; font-size: 1.02rem; }
    .seo-hoods__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: .9rem; }
    .seo-hoods__item { border: 1px solid var(--line); border-radius: .8rem; padding: 1rem 1.1rem 1.05rem; background: #fff; }
    .seo-hoods__name { margin: 0 0 .5rem; font-size: 1.08rem; font-weight: 850; color: var(--ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
    .seo-hoods__area { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--green-dark); background: var(--green-soft); padding: .15rem .5rem; border-radius: 999px; }
    .seo-hoods__char { margin: 0; color: #334155; font-size: .95rem; line-height: 1.55; }
    .seo-hoods__suits { margin: .65rem 0 0; color: #475569; font-size: .9rem; }
    .seo-hoods__suits span { display: inline-block; margin-right: .4rem; font-weight: 800; color: var(--green-dark); }
    .seo-hoods__note { margin: 1.3rem 0 0; color: var(--muted); font-size: .92rem; }
    .seo-hoods__note a { color: var(--green-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
    .seo-section { position: relative; display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: .75rem clamp(1.75rem, 4vw, 3rem); padding: 2rem 0; border-bottom: 1px solid var(--line); }
    .seo-section:first-child { padding-top: 0; }
    .seo-section:nth-child(even) { margin: .35rem 0; border: 1px solid var(--green-line); border-radius: .75rem; background: linear-gradient(180deg, rgba(236, 253, 245, .9), rgba(255, 255, 255, .96)); padding: 1.55rem 1.55rem 1.55rem 0; }
    .seo-section::before { content: ""; position: absolute; left: 0; top: 2rem; width: .22rem; height: 2.6rem; border-radius: 999px; background: var(--green); opacity: .75; }
    .seo-section:first-child::before { top: .2rem; }
    .seo-section:nth-child(even)::before { display: none; }
    .seo-section__heading { display: grid; align-content: start; padding-left: 1rem; }
    .seo-section h2, .seo-related h2, .seo-faq h2 { margin: 0; color: var(--ink); font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: 0; }
    .seo-section__body { grid-column: 2; }
    .seo-section p, .seo-section li { color: #334155; }
    .seo-section p { margin: 0 0 .85rem; }
    .seo-section p:last-child { margin-bottom: 0; }
    .seo-section ul { display: grid; gap: .55rem; margin: .25rem 0 0; padding: 0; list-style: none; }
    .seo-section li { position: relative; padding-left: 1.75rem; }
    .seo-section li::before { content: ""; position: absolute; left: 0; top: .28rem; width: 1.05rem; height: 1.05rem; border-radius: 999px; background: var(--green-soft); }
    .seo-section li::after { content: ""; position: absolute; left: .36rem; top: .49rem; width: .32rem; height: .5rem; border-right: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(40deg); }
    .seo-final { margin-top: 3.25rem; padding: clamp(1.9rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 2.5rem); border: 1px solid var(--green-line); border-radius: 1rem; background: linear-gradient(180deg, var(--green-pale), #fff 82%); box-shadow: 0 12px 32px rgba(22, 163, 74, .1); text-align: center; }
    .seo-final__inner { max-width: 640px; margin: 0 auto; }
    .seo-final__title { margin: 0 0 .55rem; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; color: var(--ink); }
    .seo-final__lead { margin: 0 0 1.4rem; color: #334155; font-size: 1.02rem; }
    .seo-final__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
    .seo-final__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.45rem; border-radius: .55rem; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 10px 22px rgba(22, 163, 74, .22); }
    .seo-final__cta:hover { background: var(--green-dark); }
    .seo-final__alt { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.2rem; border-radius: .55rem; background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 750; text-decoration: none; }
    .seo-final__alt:hover { border-color: var(--green); color: var(--green-dark); }
    .seo-related { margin-top: 3rem; padding-top: 2.6rem; border-top: 1px solid var(--line); }
    .seo-related h2 { margin-bottom: 1rem; }
    .seo-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .9rem; padding: 0; list-style: none; }
    .seo-related li { border: 1px solid var(--line); border-radius: .55rem; background: #fff; padding: 1rem; box-shadow: inset 0 .2rem 0 rgba(22, 163, 74, .1); }
    .seo-related li:hover { border-color: rgba(22, 163, 74, .45); box-shadow: inset 0 .2rem 0 rgba(22, 163, 74, .45); }
    .seo-related a { color: var(--ink); font-weight: 800; text-decoration: none; }
    .seo-related a:hover { color: var(--green-dark); }
    .seo-related p { margin: .45rem 0 0; color: var(--muted); font-size: .95rem; }
    .seo-faq { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
    .seo-faq h2 { margin-bottom: .8rem; }
    .seo-faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
    .seo-faq details[open] { border-color: var(--green-line); }
    .seo-faq summary { cursor: pointer; color: var(--ink); font-weight: 800; }
    .seo-faq summary::marker { color: var(--green); }
    .seo-faq p { color: #334155; margin: .65rem 0 0; }
    .seo-footer { border-top: 1px solid var(--line); background: var(--soft); padding: 2rem 0; color: #64748b; font-size: .92rem; }
    .seo-footer__inner { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: space-between; }
    .seo-footer a { color: #334155; text-decoration: none; }
    @media (max-width: 900px) {
      .seo-nav__links a:not(.seo-nav__cta) { display: none; }
      .seo-nav__menu { display: inline-flex; }
      .seo-hero__grid { grid-template-columns: 1fr; }
      .seo-hero { padding-top: 2rem; }
      .seo-stats__grid { grid-template-columns: 1fr; align-items: start; }
      .seo-section { grid-template-columns: 1fr; padding-left: 1rem; }
      .seo-section__heading { padding-left: 0; margin-bottom: .4rem; }
      .seo-section__body { grid-column: auto; }
      .seo-section::before { top: 1.65rem; height: 1.7rem; }
      .seo-section:first-child::before { top: .15rem; }
      .seo-section:nth-child(even) { padding: 1.4rem 1.25rem; }
      .seo-report-frame { aspect-ratio: 4 / 3; }
    }
    @media (max-width: 560px) {
      .seo-nav__inner { gap: .45rem; }
      .seo-nav__brand { height: 28px; }
      .seo-nav__cta { padding: .5rem .8rem; font-size: .82rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .seo-visual__frame img { animation: none; transform: none; width: 100%; height: 100%; }
      .seo-report-frame img { animation: none; }
      .seo-report-frame img:not(.is-active) { display: none; }
      .seo-report-tabs span { animation: none; }
    }
    /* --- Transactional pricing-analysis dashboard (city price pages) --- */
    .seo-an { margin: 0 0 2.75rem; }
    .seo-an__top { margin: 0 0 1.25rem; }
    .seo-an__kicker { margin: 0 0 .35rem; color: var(--green-dark); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
    .seo-an__title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; color: var(--ink); }
    .seo-an__lede { margin: 0; max-width: 820px; color: #334155; font-size: 1rem; line-height: 1.6; }
    .seo-an__seg-toggle { display: inline-flex; flex-wrap: wrap; gap: .25rem; margin: 0 0 1.1rem; padding: .25rem; border-radius: .75rem; background: #f1f5f9; }
    .seo-an__seg-btn { border: 0; cursor: pointer; border-radius: .55rem; padding: .45rem .85rem; font-size: .82rem; font-weight: 800; color: #475569; background: transparent; transition: background .15s, color .15s; }
    .seo-an__seg-btn:hover { color: var(--ink); }
    .seo-an__seg-btn[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
    .seo-an__seg[hidden] { display: none; }
    .seo-an__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: stretch; }
    .seo-an__card { border: 1px solid var(--line); border-radius: .9rem; background: #fff; padding: 1.15rem 1.25rem 1.25rem; box-shadow: 0 6px 20px rgba(15, 23, 42, .05); }
    .seo-an__card--wide { grid-column: 1 / -1; }
    .seo-an__card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .35rem 1rem; }
    .seo-an__card-title { margin: 0 0 .35rem; font-size: 1.1rem; font-weight: 850; color: var(--ink); }
    .seo-an__card-sub { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.5; }
    .seo-an__card-sub strong { color: var(--ink); }
    .seo-an__pill { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; color: var(--green-dark); font-weight: 800; font-size: .85rem; text-decoration: none; padding: .28rem .6rem; border: 1px solid var(--green-line); border-radius: 999px; background: var(--green-pale); }
    .seo-an__pill:hover { background: var(--green-soft); color: #047857; }
    .seo-an__chartwrap { display: flex; gap: .5rem; }
    .seo-an__yaxis { display: flex; flex-direction: column; justify-content: space-between; padding: .1rem 0 1.4rem; color: #94a3b8; font-size: .7rem; font-weight: 700; text-align: right; min-width: 2.7rem; }
    .seo-an__chart { position: relative; flex: 1 1 auto; height: clamp(170px, 30vw, 230px); cursor: crosshair; touch-action: pan-y; }
    .seo-an__chart svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .seo-an__cross { position: absolute; top: 0; bottom: 0; width: 1px; margin-left: -.5px; background: rgba(5, 150, 105, .5); pointer-events: none; }
    .seo-an__dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px; background: #fff; border: 2px solid var(--green-dark); pointer-events: none; }
    .seo-an__enddot { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--green-dark); transform: translate(-50%, -50%); pointer-events: none; z-index: 1; }
    .seo-an__enddot--hollow { background: #fff; border: 2px solid var(--green-dark); }
    .seo-an__tip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .75rem; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); z-index: 2; }
    .seo-an__axis { display: flex; justify-content: space-between; margin-top: .35rem; color: #94a3b8; font-size: .74rem; }
    .seo-an__legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .7rem; color: var(--muted); font-size: .8rem; }
    .seo-an__lg { display: inline-flex; align-items: center; gap: .4rem; }
    .seo-an__lg::before { content: ""; width: 1.05rem; height: 0; border-top-width: 3px; border-top-style: solid; border-top-color: transparent; }
    .seo-an__lg--med::before { border-top-color: var(--green-dark); }
    .seo-an__lg--avg::before { border-top-style: dashed; border-top-color: #0ea5e9; }
    .seo-an__lg--band::before { height: .72rem; border-top: none; background: rgba(22, 163, 74, .16); border-radius: 2px; }
    .seo-an__data { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .6rem; }
    .seo-an__data summary { cursor: pointer; color: var(--green-dark); font-weight: 700; font-size: .85rem; }
    .seo-an__data summary::marker { color: var(--green); }
    .seo-an__scroll { overflow-x: auto; margin-top: .6rem; }
    .seo-an__table { width: 100%; border-collapse: collapse; font-size: .82rem; }
    .seo-an__table th { text-align: right; padding: .35rem .5rem; color: var(--muted); font-weight: 800; border-bottom: 2px solid var(--green-line); white-space: nowrap; }
    .seo-an__table th:first-child, .seo-an__table td:first-child { text-align: left; }
    .seo-an__table td { padding: .3rem .5rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
    .seo-an__table tr:last-child td { border-bottom: none; }
    .seo-an__bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: clamp(150px, 26vw, 190px); cursor: crosshair; touch-action: pan-y; }
    .seo-an__bar { flex: 1 1 0; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--green-hist); transition: background .15s ease; }
    .seo-an__bar.is-active, .seo-an__bar:hover { background: var(--green-dark); }
    /* Make the distribution histogram match the volume bars (it reuses the small
       hero-stats histogram by default), and drop its caption — redundant with the
       card sub — so the two cards in the row are the same size. */
    .seo-an__card .seo-hist { height: clamp(150px, 26vw, 190px); }
    .seo-an__card .seo-stats__caption { display: none; }
    .seo-an__btip { position: absolute; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .2); z-index: 2; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
    .seo-an__rank { position: relative; }
    /* District-row tooltip follows the cursor (JS sets top + right), so it shows by
       the hovered row rather than pinned to the top of the list. */
    .seo-an__rtip { position: absolute; transform: translateY(-130%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 8px 20px rgba(15, 23, 42, .28); z-index: 5; }
    .seo-an__bar.is-partial { background: repeating-linear-gradient(135deg, rgba(134, 239, 172, .55), rgba(134, 239, 172, .55) 4px, rgba(134, 239, 172, .25) 4px, rgba(134, 239, 172, .25) 8px); }
    .seo-an__bar.is-partial.is-active, .seo-an__bar.is-partial:hover { background: var(--green); }
    .seo-an__note { margin: .65rem 0 0; color: #64748b; font-size: .8rem; line-height: 1.45; }
    .seo-an__table tr.is-partial td { color: #94a3b8; }
    .seo-an__map-cta { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; margin-top: .35rem; min-height: 2.6rem; padding: .55rem 1rem; border-radius: .55rem; background: var(--green); color: #fff; font-weight: 800; font-size: .92rem; text-decoration: none; box-shadow: 0 8px 18px rgba(22, 163, 74, .2); }
    .seo-an__map-cta:hover { background: var(--green-dark); }
    .seo-an__rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
    .seo-an__rank-item { list-style: none; }
    .seo-an__rank-row { position: relative; display: grid; grid-template-columns: minmax(5rem, 8.5rem) 1fr auto; align-items: center; gap: .6rem; padding: .22rem 1.25rem .22rem .35rem; border-radius: .45rem; cursor: default; }
    .seo-an__rank-row.is-active, .seo-an__rank-row:hover { background: var(--green-pale); }
    .seo-an__rank-item--dd > summary { cursor: pointer; list-style: none; }
    .seo-an__rank-item--dd > summary::-webkit-details-marker { display: none; }
    .seo-an__dd-caret { position: absolute; right: .45rem; top: 50%; width: .5rem; height: .5rem; margin-top: -.35rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; }
    .seo-an__rank-item--dd[open] > summary .seo-an__dd-caret { transform: rotate(-135deg); margin-top: -.12rem; }
    .seo-an__rank-item--dd[open] > summary { background: var(--green-pale); }
    .seo-an__dd { padding: .35rem .35rem .55rem 1rem; margin: .1rem 0 .25rem .35rem; border-left: 2px solid var(--green-line); }
    .seo-an__dd-h { margin: 0 0 .4rem; color: var(--muted); font-size: .8rem; font-weight: 700; }
    .seo-an__dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
    .seo-an__dd-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .12rem .15rem; border-bottom: 1px dotted var(--line); font-size: .86rem; }
    .seo-an__dd-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .seo-an__dd-val { color: var(--ink); font-weight: 800; white-space: nowrap; }
    .seo-an__dd-val small { margin-left: .12rem; font-size: .66rem; font-weight: 700; color: var(--muted); }
    .seo-an__dd-more { padding: .3rem .15rem 0; font-size: .82rem; }
    .seo-an__dd-more a { color: var(--green-dark); font-weight: 800; text-decoration: none; }
    .seo-an__dd-more a:hover { text-decoration: underline; }
    .seo-an__hint { color: var(--green-dark); font-weight: 700; }
    .seo-an__rank-name { font-weight: 700; color: var(--ink); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .seo-an__rank-track { height: .85rem; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
    .seo-an__rank-bar { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
    .seo-an__rank-val { font-weight: 800; color: var(--ink); font-size: .9rem; white-space: nowrap; }
    .seo-an__rank-val small { margin-left: .15rem; font-size: .68rem; font-weight: 700; color: var(--muted); }
    .seo-an__districts { display: grid; grid-template-columns: minmax(220px, .92fr) minmax(0, 1.08fr); gap: 1.1rem 1.5rem; align-items: start; }
    /* Live-map pilot: map-first WITHIN the page's own column — deliberately not
       full-bleed. The card keeps the .seo-container width every other section
       uses, and the map simply takes the bigger share of it (~2/3), with the
       district ranking (the bar charts) beside it so the data reads without
       scrolling. The CTA into the full app map stays under the map: this surface
       is the teaser, not a replacement. Scoped to the live variant so every other
       city keeps the original proportions. */
    /* Desktop only. This selector is more specific than the single-class mobile
       rule below, so leaving it unscoped kept the two-column grid alive at 412 px
       and squeezed the map to a 68 px sliver — caught by the mobile pass. */
    @media (min-width: 721px) {
      .seo-an__card--livemap .seo-an__districts, .seo-an__districts.seo-an__card--livemap { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
      .seo-an__card--livemap .seo-an__livemap[data-live-map-active] { height: min(70vh, 620px); }
    }
    @media (max-width: 720px) {
      .seo-an__card--livemap .seo-an__districts, .seo-an__districts.seo-an__card--livemap { grid-template-columns: 1fr; }
      .seo-an__card--livemap .seo-an__livemap[data-live-map-active] { height: 62vh; }
    }
    .seo-an__map { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: .55rem; }
    /* Live-map host (pilot). Sized to roughly the SVG choropleth it replaces so the
       swap does not shift the page. Zero height until mounted, so an unmounted host
       (no JS, fetch failed) leaves the SSR choropleth looking untouched. */
    .seo-an__livemap { width: 100%; border-radius: .75rem; overflow: hidden; }
    /* Trigger for a live-map card that ships hidden — it needs a layout box of its
       own, because IntersectionObserver never fires for a hidden element. */
    .seo-an__livemap-sentinel { height: 1px; }
    .seo-an__livemap[data-live-map-active] { height: 460px; }
    @media (max-width: 720px) { .seo-an__livemap[data-live-map-active] { height: 58vh; } }
    .seo-an__mapbox { position: relative; width: 100%; }
    .seo-an__mapbox svg { width: 100%; height: auto; max-height: 460px; display: block; overflow: visible; }
    .seo-an__moutline { fill: #eef2f7; stroke: #cbd5e1; stroke-width: 1.5; stroke-linejoin: round; cursor: default; }
    .seo-an__moutline:hover { fill: #e3e8ef; }
    .seo-an__mpoly { stroke: #fff; stroke-width: 1; stroke-linejoin: round; cursor: pointer; }
    /* One transaction = one dot, on the small-area scatter. White ring so dots
       stay countable where several deeds sit on the same street. */
    .seo-an__mdot { stroke: #fff; stroke-width: 1.5; cursor: pointer; }
    .seo-an__mdot:hover { stroke: #111827; stroke-width: 2.5; }
    .seo-an__mpoly:hover, .seo-an__mpoly.is-active { stroke: var(--ink); stroke-width: 2.4; }
    /* No data behind it, so nowhere to click through to — the cursor must not
       promise otherwise. The hover tooltip still names it and says why. */
    .seo-an__mpoly--empty { fill: #e2e8f0; cursor: default; }
    .seo-an__mpoly--empty:hover, .seo-an__mpoly--empty.is-active { fill: #cbd5e1; }
    .seo-an__maplegend-empty { display: inline-flex; align-items: center; gap: .3rem; }
    .seo-an__mapswatch { width: .8rem; height: .8rem; border-radius: 2px; background: #e2e8f0; border: 1px solid #cbd5e1; }
    .seo-an__mtip { position: absolute; transform: translate(-50%, -130%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .74rem; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); z-index: 3; max-width: 95%; overflow: hidden; text-overflow: ellipsis; }
    .seo-an__maplegend { display: flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .74rem; font-weight: 700; }
    .seo-an__mapramp { flex: 1 1 auto; height: .5rem; border-radius: 999px; background: linear-gradient(90deg, rgb(22, 163, 74), rgb(245, 158, 11), rgb(220, 38, 38)); }
    .seo-an__promo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.25rem; padding: 1.25rem 1.4rem; border: 1px solid var(--green-line); border-radius: .9rem; background: linear-gradient(180deg, var(--green-pale), #fff 88%); }
    .seo-an__promo-text { flex: 1 1 22rem; }
    .seo-an__promo-h { margin: 0 0 .25rem; color: var(--ink); font-size: 1.02rem; }
    .seo-an__promo-p { margin: 0; color: #334155; font-size: .95rem; line-height: 1.5; }
    .seo-an__promo-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.3rem; border-radius: .55rem; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; white-space: nowrap; box-shadow: 0 10px 22px rgba(22, 163, 74, .22); }
    .seo-an__promo-btn:hover { background: var(--green-dark); }
    @media (max-width: 760px) {
      .seo-an__grid { grid-template-columns: 1fr; gap: .85rem; }
      .seo-an__card { padding: 1rem 1rem 1.1rem; }
      .seo-an__card--wide { grid-column: auto; }
      .seo-an__districts { grid-template-columns: 1fr; gap: .9rem; }
      .seo-an__map { position: static; }
      .seo-an__mapbox svg { max-height: 58vh; }
      .seo-an__rank-row { grid-template-columns: minmax(4.5rem, 7rem) 1fr auto; }
      .seo-an__promo-btn { width: 100%; }
    }
    /* Per-district price deep dive */
    .seo-dz-band { background: #f8fafc; border-top: 1px solid var(--line); padding: clamp(1.6rem, 3vw, 2.6rem) 0 clamp(1.4rem, 2.6vw, 2.2rem); }
    .seo-drank__title { margin: 0 0 .4rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--ink); }
    .seo-drank__lede { margin: 0 0 1rem; color: #475569; font-size: .95rem; }
    .seo-drank__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .28rem; }
    .seo-drank__row { display: grid; grid-template-columns: 1.6rem minmax(7rem, 13rem) 1fr auto; align-items: center; gap: .55rem; padding: .3rem .5rem; border-radius: .5rem; }
    .seo-drank__row--active { background: var(--green-pale); outline: 2px solid var(--green-line); }
    .seo-drank__row.is-active { background: #eef2f7; }
    .seo-drank__row--active.is-active { background: var(--green-pale); }
    .seo-drank__rank { color: #94a3b8; font-size: .78rem; font-weight: 700; text-align: right; }
    .seo-drank__name { font-size: .9rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .seo-drank__row--active .seo-drank__name { color: var(--green-dark); }
    .seo-drank__you { display: inline-block; margin-left: .4rem; padding: .06rem .38rem; border-radius: 999px; background: var(--green-dark); color: #fff; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; vertical-align: middle; }
    .seo-drank__track { height: .62rem; border-radius: 999px; background: #eef2f7; overflow: hidden; }
    .seo-drank__bar { display: block; height: 100%; border-radius: 999px; }
    .seo-drank__val { font-size: .85rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
    .seo-drank__val small { font-weight: 600; color: #94a3b8; font-size: .7rem; margin-left: .12rem; }
    .seo-drank__wrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 1.25rem; align-items: start; }
    .seo-drank__map { min-width: 0; }
    .seo-drank__item { padding: 0; }
    .seo-drank__sum { list-style: none; cursor: pointer; }
    .seo-drank__sum::-webkit-details-marker { display: none; }
    .seo-drank__sum:hover { background: #f8fafc; }
    .seo-drank__chev { margin-left: .35rem; color: #94a3b8; font-size: .68rem; display: inline-block; transition: transform .15s ease; }
    .seo-drank__det[open] > .seo-drank__sum .seo-drank__chev { transform: rotate(180deg); }
    .seo-drank__oslist { list-style: none; margin: .1rem 0 .4rem 2.15rem; padding: .1rem 0 .1rem .6rem; display: flex; flex-direction: column; gap: .22rem; border-left: 2px solid var(--green-line); }
    .seo-drank__os { display: grid; grid-template-columns: minmax(5rem, 11rem) 1fr auto; align-items: center; gap: .5rem; }
    .seo-drank__os-name { font-size: .8rem; color: #475569; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .seo-drank__os-track { height: .45rem; border-radius: 999px; background: #eef2f7; overflow: hidden; }
    .seo-drank__os-bar { display: block; height: 100%; border-radius: 999px; }
    .seo-drank__os-val { font-size: .78rem; font-weight: 700; color: var(--ink); white-space: nowrap; }
    .seo-drank__os-val small { font-weight: 600; color: #94a3b8; font-size: .64rem; margin-left: .1rem; }
    .seo-an__mpoly--current { stroke: #0f172a; stroke-width: 3.2; paint-order: stroke; }
    .seo-dlinks__title { margin: 0 0 .3rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); line-height: 1.2; color: var(--ink); }
    .seo-dlinks__lede { margin: 0 0 1rem; color: #475569; font-size: .95rem; }
    .seo-dlinks__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .5rem; }
    .seo-dlinks__item { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; text-decoration: none; transition: border-color .15s, background .15s; }
    .seo-dlinks__item:hover { border-color: var(--green-line); background: var(--green-pale); }
    .seo-dlinks__name { font-weight: 700; color: var(--ink); font-size: .9rem; }
    .seo-dlinks__val { font-weight: 800; color: var(--green-dark); font-size: .85rem; white-space: nowrap; }
    .seo-dlinks__val small { color: #94a3b8; font-weight: 600; font-size: .68rem; margin-left: .1rem; }
    @media (max-width: 820px) { .seo-drank__wrap { grid-template-columns: 1fr; } }
    @media (max-width: 620px) { .seo-drank__row { grid-template-columns: 1.3rem minmax(4.5rem, 8rem) 1fr auto; gap: .4rem; } .seo-drank__name { font-size: .82rem; } .seo-drank__os { grid-template-columns: minmax(4rem, 8rem) 1fr auto; } }
    .seo-dz { margin: 0; }
    .seo-dz__head { margin: 0 0 1.1rem; }
    .seo-dz__kicker { margin: 0 0 .35rem; color: var(--green-dark); font-size: .78rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
    .seo-dz__title { margin: 0 0 .5rem; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; color: var(--ink); }
    .seo-dz__lede { margin: 0; max-width: 860px; color: #334155; font-size: 1rem; line-height: 1.6; }
    .seo-dz__toc { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
    .seo-dz__toc-chip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .3rem .6rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; text-decoration: none; font-size: .82rem; transition: border-color .15s ease, background .15s ease; }
    .seo-dz__toc-chip:hover { border-color: var(--green-line); background: var(--green-pale); }
    .seo-dz__toc-name { font-weight: 700; color: var(--ink); }
    .seo-dz__toc-val { font-weight: 800; color: var(--green-dark); font-size: .78rem; }
    .seo-dz__toc-val::after { content: " zł/m²"; font-weight: 600; color: var(--muted); font-size: .68rem; }
    .seo-dz__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    .seo-dz__card { scroll-margin-top: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fff; padding: 1.1rem 1.2rem 1.15rem; box-shadow: 0 6px 20px rgba(15, 23, 42, .05); display: flex; flex-direction: column; }
    .seo-dz__card:target { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-pale), 0 6px 20px rgba(15, 23, 42, .08); }
    .seo-dz__card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
    .seo-dz__name { margin: 0; font-size: 1.08rem; font-weight: 850; color: var(--ink); line-height: 1.2; }
    .seo-dz__rank { flex: none; color: var(--muted); font-size: .76rem; font-weight: 800; white-space: nowrap; }
    .seo-dz__stat { display: flex; align-items: baseline; gap: .7rem; margin: .55rem 0 .15rem; flex-wrap: wrap; }
    .seo-dz__num { font-size: 1.7rem; font-weight: 900; color: var(--ink); line-height: 1; letter-spacing: -.01em; }
    .seo-dz__num small { margin-left: .2rem; font-size: .78rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }
    .seo-dz__delta { display: inline-flex; align-items: baseline; gap: .25rem; font-size: .82rem; font-weight: 800; padding: .12rem .45rem; border-radius: 999px; }
    .seo-dz__delta-lbl { font-weight: 600; font-size: .72rem; opacity: .85; }
    .seo-dz__delta--up { color: #b91c1c; background: #fef2f2; }
    .seo-dz__delta--down { color: #047857; background: var(--green-pale); }
    .seo-dz__delta--flat { color: var(--muted); background: #f1f5f9; }
    .seo-dz__band { position: relative; height: 1.5rem; margin: .7rem 0 .25rem; cursor: crosshair; touch-action: pan-y; }
    .seo-dz__track { position: absolute; left: 0; right: 0; top: 50%; height: .72rem; transform: translateY(-50%); border-radius: 999px; background: linear-gradient(90deg, rgba(22, 163, 74, .9), rgba(245, 158, 11, .9), rgba(220, 38, 38, .9)); }
    .seo-dz__iqr { position: absolute; top: 50%; height: .72rem; transform: translateY(-50%); background: rgba(17, 24, 39, .32); border-radius: 999px; }
    .seo-dz__city { position: absolute; top: 50%; height: 1.2rem; width: 0; transform: translate(-1px, -50%); border-left: 2px dashed var(--ink); }
    .seo-dz__med { position: absolute; top: 50%; width: 1rem; height: 1rem; margin-left: -.5rem; transform: translateY(-50%); border-radius: 999px; background: #fff; border: 3px solid var(--ink); box-shadow: 0 1px 4px rgba(15, 23, 42, .3); transition: transform .12s ease; }
    .seo-dz__band:hover .seo-dz__med { transform: translateY(-50%) scale(1.14); }
    .seo-dz__tip { position: absolute; top: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .73rem; font-weight: 700; padding: .3rem .55rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); z-index: 4; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
    .seo-dz__band-axis { display: flex; justify-content: space-between; color: #94a3b8; font-size: .68rem; font-weight: 700; }
    .seo-dz__band-mid { color: var(--muted); }
    .seo-dz__prose { margin: .6rem 0 .2rem; color: #334155; font-size: .9rem; line-height: 1.55; }
    .seo-dz__os { margin: .5rem 0 .2rem; border-top: 1px solid var(--line); padding-top: .55rem; }
    .seo-dz__os-h { margin: 0 0 .15rem; color: var(--ink); font-weight: 800; font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
    .seo-dz__os-count { display: inline-flex; min-width: 1.2rem; height: 1.2rem; padding: 0 .35rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--green-pale); color: var(--green-dark); font-size: .72rem; font-weight: 800; }
    .seo-dz__os-rest { margin-top: .1rem; }
    .seo-dz__os-rest > summary { cursor: pointer; color: var(--green-dark); font-weight: 800; font-size: .82rem; list-style: none; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .15rem 0; }
    .seo-dz__os-rest > summary::-webkit-details-marker { display: none; }
    .seo-dz__os-rest > summary::before { content: "▸"; color: var(--green); font-size: .78rem; transition: transform .15s ease; }
    .seo-dz__os-rest[open] > summary::before { transform: rotate(90deg); }
    .seo-dz__os-hide { display: none; }
    .seo-dz__os-rest[open] .seo-dz__os-show { display: none; }
    .seo-dz__os-rest[open] .seo-dz__os-hide { display: inline; }
    .seo-dz__os-rest .seo-dz__os-list { margin-top: .3rem; }
    .seo-dz__os-list { position: relative; list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .1rem; }
    .seo-dz__os-row { display: grid; grid-template-columns: minmax(6rem, 9.5rem) 1fr auto; align-items: center; gap: .55rem; padding: .16rem .25rem; border-bottom: 1px dotted var(--line); font-size: .84rem; border-radius: .35rem; cursor: default; scroll-margin-top: 5rem; }
    .seo-dz__os-row:hover { background: var(--green-pale); }
    .seo-dz__os-row:target { background: var(--green-pale); box-shadow: inset 0 0 0 1px var(--green-line); }
    .seo-dz__os-track { height: .5rem; background: #eef2f7; border-radius: 999px; overflow: hidden; }
    .seo-dz__os-bar { display: block; height: 100%; border-radius: 999px; min-width: 3px; }
    .seo-dz__os-name { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .seo-dz__os-val { color: var(--ink); font-weight: 800; white-space: nowrap; }
    .seo-dz__os-val small { margin-left: .12rem; font-size: .64rem; font-weight: 700; color: var(--muted); }
    .seo-dz__os-tip { position: absolute; transform: translate(-50%, -130%); white-space: nowrap; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 700; padding: .28rem .5rem; border-radius: .4rem; pointer-events: none; box-shadow: 0 6px 18px rgba(15, 23, 42, .25); z-index: 5; max-width: 96%; overflow: hidden; text-overflow: ellipsis; }
    .seo-dz__os-more { padding: .35rem .25rem 0; font-size: .82rem; }
    .seo-dz__os-more a { color: var(--green-dark); font-weight: 800; text-decoration: none; }
    .seo-dz__os-more a:hover { text-decoration: underline; }
    .seo-dz__maplink { margin-top: auto; padding-top: .6rem; color: var(--green-dark); font-weight: 800; font-size: .86rem; text-decoration: none; align-self: flex-start; }
    .seo-dz__maplink:hover { text-decoration: underline; }
    .seo-dz__foot { margin: 1.4rem 0 0; color: #334155; font-size: .92rem; line-height: 1.55; }
    .seo-dz__foot a { color: var(--green-dark); font-weight: 800; text-decoration: none; white-space: nowrap; }
    .seo-dz__foot a:hover { text-decoration: underline; }
    @media (max-width: 760px) {
      .seo-dz__grid { grid-template-columns: 1fr; gap: .85rem; }
      .seo-dz__card { padding: 1rem 1rem 1.05rem; }
      .seo-dz__num { font-size: 1.5rem; }
    }
    /* Topical silo band — on every PL page that belongs to a silo (renderSiloBand) */
    .seo-silo { max-width: 1060px; margin: 0 auto; padding: 0 1rem; }
    .seo-silo h2 { font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: 0 0 .35rem; }
    .seo-silo__lede { color: var(--muted); margin: 0 0 1rem; font-size: .95rem; line-height: 1.55; }
    .seo-silo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
    .seo-silo__grid a { display: block; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: .6rem; background: #fff; text-decoration: none; color: var(--ink); font-weight: 600; line-height: 1.35; }
    .seo-silo__grid a:hover { border-color: var(--green); background: #f6fdf9; }
    .seo-silo__kind { display: block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #94a3b8; font-weight: 700; margin-bottom: .2rem; }
    /* Satellite town a hub comparison band */
    .seo-hub-band { background: #fff; border-top: 1px solid var(--line); padding: clamp(1.5rem, 3vw, 2.4rem) 0 clamp(1.2rem, 2.4vw, 2rem); }
    .seo-hub { max-width: 760px; }
    .seo-hub__head { margin: 0 0 1.1rem; }
    .seo-hub__kicker { margin: 0 0 .35rem; color: var(--green-dark); font-size: .78rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
    .seo-hub__title { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.85rem); line-height: 1.18; color: var(--ink); }
    .seo-hub__cmp { display: grid; gap: .55rem; margin: 0 0 .9rem; }
    .seo-hub__row { display: grid; grid-template-columns: minmax(5.5rem, 8rem) 1fr auto; align-items: center; gap: .7rem; }
    .seo-hub__name { font-weight: 800; color: var(--ink); font-size: .95rem; }
    .seo-hub__track { height: 1.4rem; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
    .seo-hub__bar { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--green), var(--green-dark)); min-width: 4px; }
    .seo-hub__row--hub .seo-hub__bar { background: linear-gradient(90deg, #94a3b8, #64748b); }
    .seo-hub__val { font-weight: 900; color: var(--ink); font-size: 1.05rem; white-space: nowrap; }
    .seo-hub__val small { margin-left: .15rem; font-size: .68rem; font-weight: 700; color: var(--muted); }
    .seo-hub__delta { margin: 0 0 .5rem; color: #334155; font-size: 1rem; line-height: 1.55; }
    .seo-hub__delta strong { color: var(--ink); }
    .seo-hub__commute { margin: 0 0 1rem; color: var(--muted); font-size: .92rem; line-height: 1.5; }
    .seo-hub__cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.8rem; padding: .6rem 1.2rem; border-radius: .55rem; background: var(--green); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 8px 18px rgba(22, 163, 74, .2); }
    .seo-hub__cta:hover { background: var(--green-dark); }
    @media (max-width: 760px) {
      .seo-hub__row { grid-template-columns: minmax(4.5rem, 6.5rem) 1fr auto; gap: .5rem; }
      .seo-hub__cta { width: 100%; }
    }