*, *::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; }
    /* The shell used to carry a 48 px graph-paper grid under everything. It was
       invisible under every opaque band and showed only in the gaps - the hero
       and the TL;DR - so it read as a texture that appeared at random rather
       than as a design. Removed everywhere; the glow and the fade to white stay. */
    .seo-shell {
      min-height: 100vh;
      background:
        linear-gradient(135deg, rgba(16, 185, 129, .12) 0%, rgba(16, 185, 129, 0) 34rem),
        linear-gradient(180deg, #f1f5f9 0%, #ffffff 28rem, #ffffff 100%);
    }
    .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-nav__panel .seo-nav__lang { border: 0; font-size: .95rem; font-weight: 650; padding: .72rem .8rem; }
    .seo-nav__panelrule { display: block; height: 1px; margin: .25rem .3rem; background: var(--line); }
    .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; }
    /* The whole line was 700, which swallowed the bold markers its own copy
       carries - an emphasis nested in bold is no emphasis. The sentence carries
       the weight, the numbers inside it carry the accent. */
    .seo-cta .seo-cta__assure { flex: 0 0 100%; max-width: 660px; margin: 0; color: var(--ink); font-weight: 500; font-size: 1rem; line-height: 1.45; }
    .seo-cta .seo-cta__assure strong { font-weight: 800; }
    .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; }
    /* The address field that replaced the plain CTA button. The suggestions
       dropdown styles itself inline (hero-search.js), so nothing here needs to
       describe it — but it positions against the FORM, which therefore has to
       establish a containing block and must not be clipped by an ancestor. */
    .seo-cta__search { position: relative; flex: 1 1 420px; min-width: 0; max-width: 560px; display: flex; align-items: stretch; gap: .5rem; }
    .seo-cta__input { flex: 1 1 auto; min-width: 0; min-height: 3rem; border: 1px solid var(--line); border-radius: .55rem; padding: .7rem .9rem; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; }
    .seo-cta__input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .16); }
    .seo-cta__input::placeholder { color: var(--muted); }
    .seo-cta .seo-cta__go { flex: 0 0 auto; white-space: nowrap; }
    /* Phones: the field first, the argument and the note under it. Both are worth
       reading, neither is worth scrolling past to reach the box — and the ~100 px
       they take is exactly what decides whether the field lands above the fold on
       a page that also leads with a median panel. Desktop keeps the argument on
       top, where it has the width to sit above a single row. */
    @media (max-width: 700px) {
      .seo-cta__search { order: 1; }
      .seo-cta .seo-cta__assure { order: 2; }
      .seo-cta > p { order: 3; }
    }
    /* A phone has no room for a field and a button side by side without
       squeezing the field to uselessness, so they stack and both go full width.
       Nothing is truncated, which is what the narrow-column rule asks for. */
    @media (max-width: 560px) {
      .seo-cta__search { flex-direction: column; flex-basis: 100%; max-width: none; }
      .seo-cta .seo-cta__go { width: 100%; }
    }
    /* "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: 0 0 1.4rem; }
    .seo-hero--data .seo-lead { margin-top: 1.6rem; font-size: clamp(1rem, 1.7vw, 1.12rem); }
    /* Phones: title, then the median panel — the number the reader came for keeps
       the first screen — then the address field, then the map and the explanatory
       text. The field is second by a hair, not by a screen, and the page repeats
       it under the dashboard below. 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-stats { order: 3; margin: 0 0 1rem; }
      .seo-hero--data .seo-cta { order: 4; margin: 0 0 1.3rem; }
      /* The market switch is a link to the OTHER market, not this page's answer,
         and at 142 px between the title and the median it was the difference
         between the field landing at 0,83 of a phone screen and at 1,06 — below
         the fold on every one of the ~1 070 transactional city pages, measured
         on an iPhone 13 after the 2026-09-03 release. Navigation goes under the
         field; the median and the field keep the first screen. */
      .seo-hero--data .seo-price-switch { order: 5; margin: 0 0 1.1rem; }
      /* The map is hoisted in after the median panel, so it needs an order of its
         own to stay below the field the panel now shares its screen with. */
      .seo-hero--data .seo-mobile-map-slot { order: 6; margin: 0 0 1.1rem; }
      .seo-hero--data .seo-stats__lede { order: 7; }
      .seo-hero--data .seo-lead { order: 8; margin-top: 0; }
      .seo-hero--data .seo-tldr { order: 9; }
      /* 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; }
      /* Logo + language + CTA + burger do not fit on a 390 px phone: the row ran
         to 415 px and the whole page scrolled sideways, which AGENTS.md forbids
         and which shifted every block under it. The switcher moves into the
         burger, where the rest of the navigation already lives, rather than
         disappearing - these pages have Ukrainian and English twins. */
      .seo-nav__actions .seo-nav__lang { display: none; }
      .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); }
    /* Parcel map on /geoportal. The host keeps its height before the map mounts,
       so the band does not jump when it does; the shadow root inside carries the
       map's own styling. */
    .seo-parcelmap { margin: 0; }
    .seo-parcelmap__head { margin: 0 0 .9rem; }
    .seo-parcelmap__title { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--ink); }
    .seo-parcelmap__sub { margin: 0; color: #475569; font-size: .95rem; max-width: 62ch; }
    /* The report's own map ladder (h-[460px] sm:h-[560px] lg:h-[660px]), because
       "wielkość taka jak mapek w raporcie" is the brief. 280px on a 1100px
       container is a 4:1 letterbox: at z17 it holds barely two rows of parcels,
       which is not enough of a neighbourhood to find your own in. */
    .seo-parcelmap__host { height: 560px; border-radius: 12px; border: 1px solid #e5e7eb; background: #eef2f6; }
    @media (min-width: 1024px) { .seo-parcelmap__host { height: 660px; } }
    /* Property-tax calculator. Two columns where there is room, the result
       first on a phone: the reader came for the amount, and a result below three
       inputs sits under the fold on a 390 px screen. Nothing here is positioned
       by measurement - the picker's list is a normal flow element inside a
       relatively positioned field - so the iOS keyboard cannot push it off. */
    /* "Ile trzeba zarabiać" - a wide table on a narrow screen, so it scrolls
       inside its own box rather than pushing the page sideways. */
    /* "Planujesz tu kupić" - a quiet band, not a card: it is a hand-off to the
       price cluster, not a section of this page. */
    /* Land-register court. Same quiet band as the price hand-off, different
       accent, because it answers a different question on the same page. */
    .seo-afford__head { margin: 0 0 .9rem; }
    .seo-afford__title { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--ink); }
    .seo-afford__sub { margin: 0; color: #475569; font-size: .95rem; max-width: 64ch; }
    .seo-afford { margin: 0; min-width: 0; max-width: 100%; }
    .seo-afford__tw { overflow-x: auto; min-width: 0; max-width: 100%; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; }
    .seo-afford__table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 640px; }
    .seo-afford__table th, .seo-afford__table td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid #eef2f6; }
    .seo-afford__table thead th { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #64748b; font-weight: 600; background: #f8fafc; }
    .seo-afford__table tbody tr:last-child th, .seo-afford__table tbody tr:last-child td { border-bottom: 0; }
    .seo-afford__table tbody th { font-weight: 500; color: var(--ink); }
    .seo-afford__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .seo-afford__soft { color: #64748b; }
    .seo-afford__unit { display: block; font-size: .68rem; letter-spacing: 0; text-transform: none; font-weight: 400; color: #94a3b8; margin-top: .12rem; }
    /* The scenario caption is a row, not a second header: it has to sit INSIDE
       the same column grid so the figures under it stay aligned with the ones
       above. */
    .seo-afford__caption th { background: #f1f5f9; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: #334155; font-weight: 700; }
    .seo-afford__group + .seo-afford__group .seo-afford__caption th { border-top: 2px solid #e2e8f0; }
    /* The answer the reader came for. */
    .seo-afford__key { color: #0f766e; font-size: 1.02rem; }
    /* The row the reader edits. It has to read as an input without turning the
       table into a form: the field is the size of the figure it replaces. */
    .seo-afford__own th, .seo-afford__own td { background: #f0fdf9; }
    .seo-afford__ownfield { display: inline-flex; align-items: baseline; gap: .3rem; color: #475569; font-size: .88rem; }
    .seo-afford__ownfield input { width: 4.2rem; min-height: 2.1rem; border: 1px solid #cbd5e1; border-radius: .4rem; padding: .25rem .45rem; font: inherit; font-size: .93rem; font-weight: 600; color: var(--ink); background: #fff; text-align: right; }
    .seo-afford__ownfield input:focus { outline: none; border-color: #0f766e; box-shadow: 0 0 0 3px rgba(15, 118, 110, .15); }
    .seo-afford__ownfixed { font-weight: 500; color: var(--ink); }
    .seo-afford__ownsub { display: block; margin-top: .18rem; font-size: .8rem; color: #64748b; }
    .seo-afford__note { margin: .8rem 0 0; color: #64748b; font-size: .86rem; max-width: 78ch; }
    /* On a phone the five columns do not fit and never will: 650 px of table
       inside a 353 px box hid the down payment and the instalment behind a
       sideways scroll that nothing announced - and the instalment is half of
       what the reader came for. So below 640 px the row stops being a row and
       becomes a card: the property is its title, and each figure sits on its own
       line next to the column heading, carried down in data-label. Nothing is
       positioned by measurement, so nothing can drift when iOS raises the
       keyboard under the two fields in the last row. */
    @media (max-width: 640px) {
      .seo-afford__tw { overflow-x: visible; }
      .seo-afford__table { min-width: 0; display: block; }
      .seo-afford__table thead { display: none; }
      .seo-afford__table tbody { display: block; }
      .seo-afford__table tbody tr { display: block; padding: .55rem .85rem .7rem; border-bottom: 1px solid #eef2f6; }
      .seo-afford__table tbody tr:last-child { border-bottom: 0; }
      .seo-afford__table tbody th, .seo-afford__table tbody td { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .16rem 0; border-bottom: 0; text-align: right; white-space: normal; }
      .seo-afford__table tbody tr > th:first-child { display: block; font-weight: 700; text-align: left; padding-bottom: .3rem; }
      .seo-afford__table tbody td[data-label]::before { content: attr(data-label); color: #64748b; font-size: .84rem; font-weight: 500; text-align: left; white-space: nowrap; }
      .seo-afford__caption { display: block; padding: 0; }
      .seo-afford__caption th { display: block; text-align: left; padding: .5rem .85rem; }
      .seo-afford__own td[data-label="Wkład własny"] { flex-wrap: wrap; }
      .seo-afford__ownsub { display: inline; margin: 0; }
    }
    /* Shared anatomy for the supplementary panels (ceny, księga wieczysta,
       koszt na ulicy, CPK). Same shape as the affordability card above: a
       heading in the page's own register, the facts in a white bordered box,
       the sourcing underneath. They used to be left-rule strips sitting on
       whatever background the page had at that point, which read as an
       accident rather than a section. */
    .seo-panel { margin: 0; min-width: 0; max-width: 100%; }
    .seo-panel__head { margin: 0 0 .9rem; }
    .seo-panel__title { margin: 0 0 .35rem; font-size: clamp(1.2rem, 2.2vw, 1.55rem); line-height: 1.2; color: var(--ink); }
    .seo-panel__sub { margin: 0; color: #475569; font-size: .95rem; max-width: 64ch; }
    .seo-panel__body { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; padding: .2rem 1rem; }
    .seo-panel__body--text { padding: 1rem; display: grid; gap: .7rem; }
    .seo-panel__p { margin: 0; font-size: .96rem; color: var(--ink); max-width: 74ch; }
    .seo-panel__list { margin: 0; padding: 0; list-style: none; }
    .seo-panel__row { display: flex; align-items: baseline; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid #eef2f6; font-size: 1rem; }
    .seo-panel__row:last-child { border-bottom: 0; }
    .seo-panel__rowlabel { color: var(--ink); flex: 1 1 auto; }
    .seo-panel__rowvalue { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .seo-panel__note { margin: .8rem 0 0; color: #64748b; font-size: .86rem; max-width: 78ch; }
    .seo-panel__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; padding: 0 .3rem; border-radius: 4px; }
    /* Three sentences before the law. A panel that opens on „art. 29 ust. 1 pkt
       3-8" loses the reader it was written for. */
    .seo-panel__gist { margin: 0; padding: 0 0 .2rem; list-style: none; display: grid; gap: .55rem; border-bottom: 1px solid #eef2f6; }
    .seo-panel__gist li { margin: 0; font-size: .96rem; color: var(--ink); max-width: 74ch; padding-left: 1.05rem; position: relative; }
    .seo-panel__gist li::before { content: ''; position: absolute; left: 0; top: .55em; width: .38rem; height: .38rem; border-radius: 50%; background: #0f766e; }
    /* The cost breakdown, borrowed from the purchase-cost calculator so the two
       surfaces read as one product: the same colour per cost type, the same
       stacked bar, the same tinted rows. A reader who lands here from the
       calculator (or leaves for it) meets the same object twice. */
    .seo-panel__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; margin: 0 0 .55rem; }
    .seo-panel__totallabel { flex: 0 0 100%; margin: 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #64748b; font-weight: 700; }
    .seo-panel__totalvalue { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
    .seo-panel__totalof { color: #64748b; font-size: .9rem; }
    .seo-panel__bar { display: flex; height: .62rem; border-radius: 999px; overflow: hidden; background: #eef2f6; margin: 0 0 .85rem; }
    .seo-panel__barseg { display: block; height: 100%; }
    .seo-panel__cost { display: flex; align-items: center; gap: .7rem; padding: .62rem .8rem; border-radius: .6rem; margin: 0 0 .35rem; font-size: .97rem; }
    .seo-panel__dot { flex: none; width: .6rem; height: .6rem; border-radius: 50%; }
    .seo-panel__costlabel { flex: 1 1 auto; color: var(--ink); }
    .seo-panel__costvalue { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
    .seo-panel__carry { display: flex; align-items: baseline; gap: .7rem; padding: .55rem .8rem 0; font-size: .97rem; border-top: 1px solid #eef2f6; margin-top: .7rem; }
    .seo-panel__carry + .seo-panel__carry { border-top: 0; margin-top: 0; padding-top: .2rem; }
    .seo-panel__carrylabel { flex: 1 1 auto; color: #475569; }
    .seo-panel__carryvalue { font-weight: 700; color: #0f766e; font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* The point of these panels is that somebody carries on. A link inside a
       grey paragraph is not that. */
    .seo-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .8rem; margin: 1rem 0 0; }
    .seo-panel__btn { display: inline-flex; min-height: 2.9rem; align-items: center; justify-content: center; gap: .45rem; border-radius: .55rem; background: var(--green); color: #fff; padding: .7rem 1.15rem; font-weight: 800; font-size: .97rem; text-decoration: none; box-shadow: 0 10px 22px rgba(22, 163, 74, .18); }
    .seo-panel__btn:hover { background: var(--green-dark); color: #fff; }
    .seo-panel__btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
    .seo-panel__btn--ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 700; }
    .seo-panel__btn--ghost:hover { background: #f8fafc; color: var(--ink); }
    @media (max-width: 560px) { .seo-panel__actions { flex-direction: column; align-items: stretch; } .seo-panel__btn { width: 100%; } }
    .seo-podcalc { margin: 0; }
    .seo-podcalc__head { margin: 0 0 1rem; }
    .seo-podcalc__title { margin: 0 0 .35rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.2; color: var(--ink); }
    .seo-podcalc__sub { margin: 0; color: #475569; font-size: .95rem; max-width: 62ch; }
    .seo-podcalc__grid { display: grid; gap: 1.1rem; align-items: start; }
    @media (min-width: 760px) { .seo-podcalc__grid { grid-template-columns: 1.1fr .9fr; gap: 1.6rem; } }
    .seo-podcalc__fields { display: grid; gap: .75rem; }
    .seo-podcalc__form { display: grid; gap: .75rem; margin: 0; }
    /* The valuation card's call to action is the last thing in its form, under
       both fields, so it never stands between the address and the metraż. */
    .seo-podcalc__form .seo-podcalc__ctaGo { justify-self: start; }
    @media (max-width: 560px) { .seo-podcalc__form .seo-podcalc__ctaGo { justify-self: stretch; text-align: center; } }
    .seo-podcalc__field { margin: 0; position: relative; display: grid; gap: .3rem; }
    .seo-podcalc__label { font-size: .88rem; color: #475569; }
    .seo-podcalc__input { width: 100%; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: 10px; font-size: 1rem; background: #fff; color: var(--ink); }
    .seo-podcalc__input:focus { outline: 2px solid #0f766e; outline-offset: 1px; }
    .seo-podcalc__results { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; display: grid; background: #fff; border: 1px solid #cbd5e1; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(15,23,42,.12); }
    .seo-podcalc__hit { display: block; width: 100%; text-align: left; padding: .55rem .7rem; border: 0; background: none; font: inherit; font-size: .92rem; color: var(--ink); cursor: pointer; }
    .seo-podcalc__hit:hover, .seo-podcalc__hit:focus { background: #f1f5f9; }
    .seo-podcalc__result { background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 14px; padding: 1rem 1.1rem; }
    .seo-podcalc__resultLabel { margin: 0; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #047857; font-weight: 600; }
    .seo-podcalc__total { margin: .2rem 0 .4rem; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 700; line-height: 1.1; color: #064e3b; font-variant-numeric: tabular-nums; }
    /* The breakdown. Three columns, because the middle one - "10 m² × 7,60 zł"
       - is the whole reason the table replaced a sentence: a garage costing more
       than a flat reads as a bug until the two rates sit under each other. */
    .seo-podcalc__table { width: 100%; border-collapse: collapse; margin: .1rem 0 .7rem; }
    .seo-podcalc__caption { text-align: left; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: #047857; font-weight: 600; padding-bottom: .35rem; }
    .seo-podcalc__row th { text-align: left; font-weight: 500; font-size: .9rem; color: #065f46; padding: .35rem .5rem .35rem 0; border-top: 1px solid #a7f3d0; }
    .seo-podcalc__row td { border-top: 1px solid #a7f3d0; padding: .35rem 0; vertical-align: baseline; }
    .seo-podcalc__math { font-size: .84rem; color: #047857; white-space: nowrap; padding-right: .5rem !important; font-variant-numeric: tabular-nums; }
    .seo-podcalc__amount { text-align: right; font-weight: 600; font-size: .95rem; color: #064e3b; white-space: nowrap; font-variant-numeric: tabular-nums; }
    .seo-podcalc__detail { margin: 0 0 .5rem; font-size: .93rem; color: #065f46; }
    .seo-podcalc__rates { margin: 0; font-size: .86rem; color: #047857; }
    .seo-podcalc__hint { font-size: .82rem; color: #64748b; line-height: 1.45; }
    /* The step after the number. Sits inside the card, below the note, because
       the reader who just learned what the tax costs is exactly the one asking
       what else comes with the address. Same gated field as the CTA band, so the
       rules about what may start a preview come with it. */
    .seo-podcalc__cta { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }
    .seo-podcalc__ctaLead { margin: 0 0 .6rem; font-size: .95rem; color: var(--ink); font-weight: 500; }
    .seo-podcalc__ctaForm { display: flex; flex-wrap: wrap; gap: .5rem; }
    .seo-podcalc__ctaForm .seo-podcalc__input { flex: 1 1 15rem; }
    .seo-podcalc__ctaGo { display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1.1rem; border-radius: 10px; background: #0f172a; color: #fff; font-weight: 600; text-decoration: none; white-space: nowrap; }
    .seo-podcalc__ctaGo:hover { background: #1e293b; }
    /* The city table under the valuation tool. Its own scroll container, because
       three columns of tabular numbers must never widen the page on a phone. */
    .seo-wyc__scroll { overflow-x: auto; }
    .seo-wyc__table { width: 100%; border-collapse: collapse; margin: .8rem 0 0; font-size: .95rem; }
    .seo-wyc__table th, .seo-wyc__table td { padding: .45rem .6rem .45rem 0; border-top: 1px solid var(--line); text-align: left; }
    .seo-wyc__table thead th { border-top: 0; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; color: #64748b; font-weight: 700; }
    .seo-wyc__table tbody th { font-weight: 600; color: var(--ink); }
    .seo-wyc__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
    /* The card opens on a national example and only turns green once it holds an
       answer for the reader's own address. On a phone the result sits ABOVE the
       fields (the rule at the bottom of this block), so without the neutral
       state a big green figure would greet somebody who has typed nothing —
       which is exactly how a national median gets read as "your flat". */
    .seo-podcalc__result[data-wycena-state="example"],
    .seo-podcalc__result[data-wycena-state="empty"] { background: #f8fafc; border-color: var(--line); }
    .seo-podcalc__result[data-wycena-state="example"] .seo-podcalc__resultLabel,
    .seo-podcalc__result[data-wycena-state="empty"] .seo-podcalc__resultLabel { color: #64748b; }
    .seo-podcalc__result[data-wycena-state="example"] .seo-podcalc__total,
    .seo-podcalc__result[data-wycena-state="empty"] .seo-podcalc__total { color: var(--ink); }
    .seo-podcalc__result[data-wycena-state="example"] .seo-podcalc__detail,
    .seo-podcalc__result[data-wycena-state="example"] .seo-podcalc__rates,
    .seo-podcalc__result[data-wycena-state="empty"] .seo-podcalc__detail { color: #475569; }
    .seo-podcalc__result[data-wycena-state="live"] { border-color: #34d399; }
    .seo-podcalc__ctaNote { margin: .6rem 0 0; font-size: .84rem; color: #64748b; max-width: 78ch; }
    .seo-podcalc__hint em { font-style: normal; font-weight: 600; }
    .seo-podcalc__note { margin: 1rem 0 0; color: #64748b; font-size: .86rem; max-width: 78ch; }
    @media (max-width: 759px) {
      .seo-podcalc__grid { display: flex; flex-direction: column; }
      .seo-podcalc__result { order: -1; }
    }
    .seo-parcelmap__fallback { margin: .8rem 0 0; color: #475569; font-size: .93rem; max-width: 70ch; }
    .seo-parcelmap__note { margin: .8rem 0 0; color: #64748b; font-size: .86rem; max-width: 78ch; }
    /* On a phone the map leads and its heading follows it. The hoist already
       lifts this card under the H1, but the card's own title and lede pushed the
       map to 0.7 of the first screen — on a page whose promise is "kliknij
       działkę", the thing to click has to be on that screen. The H2 keeps its
       place in the document; only the paint order moves. */
    @media (max-width: 700px) {
      .seo-parcelmap { display: flex; flex-direction: column; }
      .seo-parcelmap__host { order: -1; margin-bottom: .9rem; height: 460px; }
      .seo-parcelmap__head { margin-bottom: .5rem; }
      .seo-parcelmap__title { font-size: 1.15rem; }
      .seo-parcelmap__sub { font-size: .9rem; }
    }
    .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%; }
    }