*, *::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); }
    /* Language switcher. Deliberately quieter than the CTA: it is a way out for
       the reader who cannot read this page, not something to sell. It stays
       visible at phone width — the mobile rule below hides the other nav links,
       and a language switcher hidden on the device most visitors arrive on
       would be a switcher that does not exist. */
    .seo-nav__lang { display: inline-flex; align-items: center; color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 600; padding: .35rem .6rem; border-radius: .5rem; border: 1px solid var(--line); white-space: nowrap; }
    .seo-nav__lang:hover { color: var(--ink); border-color: var(--ink); }
    .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; }
    /* A phone check caught a bare uchwała URL (54 chars, no break opportunity)
       pushing the whole document 79px wide on iPhone and 57px on Pixel. Editorial
       copy will keep acquiring long tokens — URLs, act ids like
       PL.ZIPPZP.10724/306401-POG, TERYT codes — so the guard belongs here rather
       than in each template that happens to emit one. */
    .seo-section__body, .seo-section__body p, .seo-section__body li { overflow-wrap: anywhere; }
    .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):not(.seo-nav__lang) { 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%; }
    }