/* incidentmtl.com data pages (address-pages spec §4.5; one-site spec 2026-10-07 §3.3): only what the site's own
   stylesheet does not have. website.css, exported from website/, loads first and supplies everything else: the
   tokens (--cobalt, --navy, --ground, --surface, --ink, --muted, --line, --shadow, --page and their dark values), the
   Avenir Next stack, the header and footer, and the components these pages reuse by class: .page-hero,
   .page-hero-compact, .eyebrow, .primary-button, .text-link, .emergency-note and .app-store-link.
   Everything here sits inside .data-page or is a server class, so nothing reaches the site's header or footer;
   only the print rules at the end touch them, to keep the site's menu and the footer's links off paper.
   The patterns are the site's: numbered sections ruled like its legal pages, white cards with the --line border,
   pills for fields and choices, navy panels like its support and Plus blocks. Figures are inline SVGs with a fixed
   aspect ratio, so nothing moves once the page paints. Crime keeps the app's palette (IncidentMTL/Theme/Expo67.swift);
   the report's red stays in the report. Organised by page part, from the top of a page to its bottom. */

/* Tokens the site has not got: the figures' palette, the maps, and the offer's panel. */
:root {
  color-scheme: light dark;
  /* the app's crime palette, cobalt to violet to magenta */
  --cat-mischief: #0047BB;
  --cat-breakAndEnter: #1B48BD;
  --cat-vehicleTheft: #3649BE;
  --cat-theftFromVehicle: #514AC0;
  --cat-robbery: #6C4BC1;
  --cat-offenceCausingDeath: #E5239D;
  /* 311 and SIM */
  --t311-needle: #8A6A12;
  --t311-homelessness: #6E5F3C;
  --sim-fire: #00707C;
  --sim-medical: #6B70A8;
  --press: #514AC0;
  /* maps: land, outlines, and the five density classes, light to dense */
  --map-land: #EFEAE0;
  --map-outline: #1A1A1E;
  --map-child: #B9B2A5;
  --map-ring: #8C8577;
  /* The address map's streets (owner decision 12), as the app's free map draws them: white streets cased in the
     land's darker tone on a warm ground, names in warm greys with a halo of the ground. */
  --map-water: #C9DBE7;
  --map-street: #FFFFFF;
  --map-casing: #D9D0BF;
  --map-artery-casing: #C8BCA6;
  --map-name: #6B655A;
  --map-name-major: #47423A;
  --map-area-street: #FFFFFF;
  --dens-0: #D4DEF4;
  --dens-1: #A8BDEB;
  --dens-2: #7896DD;
  --dens-3: #3F69CC;
  --dens-4: #0047BB;
  /* the offer's panel: the site's navy, and in dark mode its support block's deeper navy */
  --panel: #0E1B3C;
  --panel-tile: rgba(8, 20, 47, .94);
  /* the shadow on a wide table's scrolling side */
  --table-edge: rgba(14, 27, 60, .22);
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --cat-mischief: #3D6DFF;
    --cat-breakAndEnter: #4C6FE8;
    --cat-vehicleTheft: #5F71E8;
    --cat-theftFromVehicle: #7273E4;
    --cat-robbery: #8A6EE0;
    --cat-offenceCausingDeath: #F23DB0;
    /* brighter than the app's dark 311 tones: its homelessness tone is under 3:1 on navy */
    --t311-needle: #C99A2E;
    --t311-homelessness: #B39C6A;
    --sim-fire: #2FA3B0;
    --sim-medical: #9BA0DB;
    --press: #8A87E6;
    --map-land: #1B2D57;
    --map-outline: #F2EEE6;
    --map-child: #3E5182;
    --map-ring: #7F8BAA;
    --map-water: #0F1C40;
    --map-street: #2E4478;
    --map-casing: #14234A;
    --map-artery-casing: #0E1A3C;
    --map-name: #AEB9D2;
    --map-name-major: #DCE3F1;
    --map-area-street: #C9D5F2;
    --dens-0: #22386B;
    --dens-1: #2D4C94;
    --dens-2: #3D63C2;
    --dens-3: #5B83F0;
    --dens-4: #9DB6FF;
    --panel: #08142F;
    --panel-tile: rgba(14, 27, 60, .9);
    --table-edge: rgba(0, 0, 0, .45);
  }
}

/* The frame. Content aligns with the site's page width, and on phones with its hero and footer (20 px gutters). */
.data-page { --content: var(--page); overflow-wrap: break-word; }

.skip {
  position: absolute; top: -64px; left: 14px; z-index: 40; padding: 12px 18px; border-radius: 999px;
  background: var(--cobalt-fill); color: #fff; font-size: 14px; font-weight: 800;
}

.skip:focus { top: 14px; }
main:focus { outline: none; }

/* Running text and links. The site's reset leaves bare elements unstyled; these restore them inside .data-page at a
   bare element's weight (a link's :not([class]) adds one class), and the component rules below, later in the file,
   win. Links in text keep an underline: cobalt alone is too close to the muted text for anyone who does not see
   colour. */
:where(.data-page) strong { color: var(--ink); font-weight: 800; }

:where(.data-page) a:not([class]) {
  color: var(--cobalt-text); font-weight: 750; text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

:where(.data-page) a:not([class]):hover { text-decoration-color: currentColor; }

:where(.data-page) :is(input, button):focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Lists in text: the yellow dots of the site's legal summaries. */
:where(.sections, .page-sources, .article-body) ul:not([class]) {
  display: grid; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none;
}

:where(.sections, .page-sources, .article-body) ul:not([class]) > li {
  position: relative; max-width: 760px; padding-left: 20px;
}

:where(.sections, .page-sources, .article-body) ul:not([class]) > li::before {
  content: ""; position: absolute; top: .66em; left: 2px; width: 7px; height: 7px; border-radius: 99px;
  background: var(--yellow);
}

.note { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* The search band under the site's header, and every search field: the site's pills. */
.search-band {
  width: var(--page); margin: 0 auto; padding: 14px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.search-band .search { display: flex; align-items: center; gap: 22px; }
.search-band .search-row { flex: 1; }

.search-label { display: block; margin: 0 0 10px; color: var(--navy); font-size: 13px; font-weight: 850; }

.search-band .search-label { margin: 0; white-space: nowrap; }
.search-row { display: flex; gap: 10px; }

.search input {
  flex: 1; min-width: 0; height: 52px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 15px; font-weight: 650;
  transition: border-color .2s ease;
}

.search input::placeholder { color: var(--faint); opacity: 1; }
.search input:hover { border-color: color-mix(in srgb, var(--cobalt) 45%, var(--line)); }
.search input:focus { border-color: var(--cobalt); }

/* The site's .primary-button is drawn for links; on a <button> it needs the cursor and no border. */
button.primary-button { flex: none; border: 0; cursor: pointer; font-family: inherit; }

/* The address suggestions (search.js), drawn like the site's menu panel. */
.has-suggestions .search-row { position: relative; }

.suggestions {
  position: absolute; top: calc(100% + 10px); right: 0; left: 0; z-index: 30; margin: 0; padding: 8px;
  list-style: none; border: 1px solid var(--line); border-radius: 24px; background: var(--surface);
  box-shadow: var(--shadow);
}

.suggestions a {
  display: block; text-decoration: none; padding: 12px 16px; border-radius: 16px; color: var(--ink); font-size: 15px;
  font-weight: 700;
}

.suggestions [aria-selected="true"] a,
.suggestions a:hover { background: color-mix(in srgb, var(--cobalt) 9%, var(--surface)); color: var(--cobalt-text); }

/* The crumbs, on the page's left edge above the hero. */
.crumbs { width: var(--content); margin: 22px auto 0; }

.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; padding: 0; list-style: none;
  color: var(--muted); font-size: 13px; font-weight: 700;
}

.crumbs li:not(:last-child)::after { content: "/"; content: "/" / ""; margin-left: 10px; color: var(--faint); }
.crumbs a { color: var(--cobalt-text); font-weight: 750; text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* The hero: the site's .page-hero, closer to the search band, with what a data page adds under its title. Each rule
   is weighed past the site's `.page-hero > p` (its lede), which it refines. */
.data-page .page-hero { padding-top: 72px; }
.data-page .page-hero h1 { text-wrap: balance; }
/* A short hyphenated name stays whole ("Saint-Denis,", "4488-4494"): render.keep_compounds wraps it. */
.nobr { white-space: nowrap; }
/* An eyebrow that wraps keeps its bar beside the first line, at full length. */
.data-page .eyebrow > span:first-child { flex: none; align-self: flex-start; margin-top: .55em; margin-top: calc(.5lh - 2px); }

.data-page .page-hero > .bottom-line {
  max-width: 760px; margin: 28px auto 0; color: var(--muted); font-size: 19px; line-height: 1.6;
}

.data-page .page-hero > .bottom-line p + p { margin-top: 10px; }

.data-page .page-hero > p.as-of {
  margin-top: 22px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.55;
}

.data-page .page-hero > p.hero-note { margin-top: 18px; font-size: 15px; }
.sample .page-hero > p:not([class]) + p:not([class]) { margin-top: 4px; }

.data-page .page-hero > p.lens { margin-top: 30px; color: var(--navy); font-size: 15px; font-weight: 850; }

.data-page .page-hero > p.count-line {
  color: var(--navy); font-size: clamp(20px, 2.2vw, 24px); font-weight: 800; line-height: 1.35;
  letter-spacing: -.02em;
}

.data-page .page-hero > p.order-address { color: var(--navy); font-weight: 800; }

/* The address page's 7, 30 and 90 days: the site's pills, the current one filled. */
.windows ul {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none;
}

.windows :is(a, span) {
  display: inline-grid; min-height: 42px; place-items: center; padding: 0 18px; border: 1px solid var(--line);
  border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); color: var(--navy);
  font-size: 13px; font-weight: 850; text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}

.windows a:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.windows a:focus-visible { border-radius: 999px; }
.windows [aria-current="page"] { border-color: var(--cobalt-fill); background: var(--cobalt-fill); color: #fff; }

/* A notice in the site's yellow: figures still being prepared, a terms version without its seller, an order that
   stopped checking. */
.data-page :is(.pending, .order-stale) {
  max-width: 700px; margin: 26px 0 0; padding: 20px 22px; border-left: 5px solid var(--yellow);
  border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--yellow) 13%, transparent); color: var(--ink);
  font-size: 14px; font-weight: 720; line-height: 1.55; text-align: left;
}

.data-page .page-hero > .pending { margin: 30px auto 0; }

/* Sections: numbered and ruled like the site's legal pages (`.legal-content`), the number counted here. */
.sections { width: var(--content); margin: 0 auto; border-top: 1px solid var(--line); counter-reset: section; }

.sections > :is(.section, .terms-version) {
  position: relative; padding: 36px 0 44px 66px; border-bottom: 1px solid var(--line); counter-increment: section;
}

.sections > :last-child { border-bottom: 0; }

.sections > :is(.section, .terms-version)::before {
  content: counter(section, decimal-leading-zero); content: counter(section, decimal-leading-zero) / "";
  position: absolute; top: 42px; left: 0; color: var(--orange-text); font-size: 11px; font-weight: 850;
  letter-spacing: .1em;
}

.sections h2 {
  margin: 0 0 18px; color: var(--navy); font-size: clamp(25px, 3vw, 32px); line-height: 1.12;
  letter-spacing: -.035em;
}

.sections h3 { margin: 30px 0 0; color: var(--navy); font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }

.sections :is(p, li, dd) { color: var(--muted); font-size: 15px; line-height: 1.68; }
.sections p { max-width: 760px; margin: 12px 0 0; }
.sections h2 + :is(p, h3) { margin-top: 0; }
.sections .note { font-size: 13px; line-height: 1.6; }

/* Tables: a white card with the site's line, and its small capitals for the column heads. They scroll inside the
   card, never the page. */
.table-wrap {
  overflow-x: auto;
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  /* A shadow on the side that has more columns, so a phone sees the table scrolls (covers that travel with the
     content hide each shadow once its side is reached). */
  background:
    linear-gradient(to right, var(--surface) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left, var(--surface) 30%, transparent) right / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--table-edge), transparent) left / 18px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--table-edge), transparent) right / 18px 100% no-repeat scroll,
    var(--surface);
}

.data-table {
  width: 100%; border-collapse: collapse; color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums;
}

.data-table caption {
  padding: 20px 24px 6px; color: var(--muted); font-size: 12px; font-weight: 700; line-height: 1.5;
  text-align: start;
}

.data-table :is(th, td) {
  padding: 13px 24px; border-bottom: 1px solid var(--line); text-align: start; white-space: nowrap;
}

.data-table thead th {
  padding-top: 18px; white-space: normal; padding-bottom: 12px; color: var(--muted); font-size: 11px;
  font-weight: 850; letter-spacing: .1em; text-transform: uppercase;
}

.data-table tbody th { font-weight: 750; }
.data-table td { font-weight: 500; }
.data-table td.num { font-weight: 650; }
.data-table :is(th, td).num { text-align: end; }
.data-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.data-table tbody + tbody tr:first-child :is(th, td) { border-top: 1px solid var(--line); }

.data-table tfoot :is(th, td) {
  border-top: 1px solid var(--line); border-bottom: 0; color: var(--navy); font-weight: 850;
}

/* The sector table's groups: the site's orange small capitals, with the group's own totals. */
.data-table tr.group th {
  padding-top: 20px; color: var(--orange-text); font-size: 11px; font-weight: 850; letter-spacing: .1em;
  text-transform: uppercase;
}

.data-table tr.group td { padding-top: 20px; color: var(--navy); font-weight: 850; }
.data-table a { color: var(--cobalt-text); font-weight: 800; text-decoration: none; }
.data-table a:hover { text-decoration: underline; text-underline-offset: 4px; }

.tag {
  margin-left: 8px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted);
  font-size: 11px; font-weight: 750; white-space: nowrap;
}

/* A two- or three-column table keeps its figures near their names: the text's measure, not the page's width. */
.table-wrap.table-narrow { max-width: 760px; }

/* The address page's counts and records wrap their names, so a phone sees every column. */
.data-table.counts th[scope="row"] { white-space: normal; }
.data-table.records td { white-space: normal; vertical-align: top; }
.data-table.records td:first-child { color: var(--muted); }

/* Figures: the SVG and its caption on a white card. Each SVG carries its aspect ratio inline, matching its viewBox
   (app/web/svg.py); CSS sets the width. */
.figure {
  display: grid; grid-template-columns: minmax(0, 36rem) minmax(0, 21rem); justify-content: start;
  align-items: end; gap: 24px 56px; margin: 24px 0 0; padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid var(--line); border-radius: 28px; background: var(--surface);
}

.figure figcaption { color: var(--muted); font-size: 13px; line-height: 1.6; }
svg.fig { display: block; width: 100%; height: auto; overflow: visible; }
.fig-area, .fig-address { max-width: 30rem; }
/* The address map is a street map, the page's main picture: it takes most of the card (34rem, 544 px, where its names
   set at 10.5 units read at about 16 px), and the caption sits beside it, then under it below 980 px. */
.figure.figure-map { grid-template-columns: minmax(0, 34rem) minmax(14rem, 1fr); align-items: start; }
.figure-map .fig-address { max-width: 34rem; }
/* Beside the map (under it on phones): the caption, then the key to the dots. Its swatches are small SVGs carrying
   the map's own classes (.dot .k-…, .pin), so their colours are the map's in both themes. */
.figure-map figcaption { display: grid; gap: 18px; }
.figure-map figcaption > p { margin: 0; }
.map-key { display: grid; gap: 8px; }
.map-key .key-title { margin: 4px 0 0; color: var(--navy); font-size: 12px; font-weight: 850; line-height: 1.4; }
.key-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 6px 16px; margin: 0;
  padding: 0; list-style: none; }
.key-list.key-reading { grid-template-columns: minmax(0, 1fr); }
.map-key li { display: flex; align-items: center; gap: 8px; line-height: 1.4; }
.map-key svg { flex: none; width: 16px; height: 16px; overflow: visible; }
.map-key svg.wide { width: 26px; }
.fig-bars { max-width: 36rem; }
.fig text { fill: var(--muted); }
.map-land { fill: var(--map-land); }
.map-outline { fill: none; stroke: var(--map-outline); stroke-width: 1.5; stroke-linejoin: round; }
.map-child { fill: none; stroke: var(--map-child); stroke-width: .75; stroke-linejoin: round; }
.figure.map-island .map-outline { stroke-width: .6; }   /* every neighbourhood's border, at island scale */
.hex { stroke: var(--map-land); stroke-width: .5; }
.h0 { fill: var(--dens-0); }
.h1 { fill: var(--dens-1); }
.h2 { fill: var(--dens-2); }
.h3 { fill: var(--dens-3); }
.h4 { fill: var(--dens-4); }
/* The address map's streets and names (svg.address_map): casings under fills, one shared path per class (0 local,
   1 collector, 2 artery); outside the ring a veil of the card's colour, so the ring reads first. Names and the
   scale's labels carry a halo of the ground (paint-order), so they read over the streets. */
.map-water { fill: var(--map-water); }
.shore { stroke: var(--map-land); stroke-width: 1; stroke-linejoin: round; }   /* closes the seams between rings */
.street, .street-case { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.street { stroke: var(--map-street); }
.street-case { stroke: var(--map-casing); }
.street.s0 { stroke-width: 1.6; }
.street-case.s0 { stroke-width: 2.8; }
.street.s1 { stroke-width: 2.6; }
.street-case.s1 { stroke-width: 3.9; }
.street.s2 { stroke-width: 3.8; }
.street-case.s2 { stroke: var(--map-artery-casing); stroke-width: 5.4; }
.veil { fill: var(--surface); fill-opacity: .42; }
.fig .sn { fill: var(--map-name); font-weight: 500; }
.fig .sn.major { fill: var(--map-name-major); font-weight: 600; }
.fig .sn.own { fill: var(--ink); font-weight: 600; }
.fig :is(.sn, .ml) { stroke: var(--map-land); stroke-width: 3px; stroke-linejoin: round; paint-order: stroke; }
/* The area maps' arteries: one light line over the hexagons, a landmark rather than a street map. */
.street-major { fill: none; stroke: var(--map-area-street); stroke-width: 1; stroke-opacity: .85;
  stroke-linecap: round; stroke-linejoin: round; }
.ring { fill: none; stroke: var(--map-ring); stroke-width: 1.25; }
.ring-inner { fill: none; stroke: var(--map-ring); stroke-width: .75; stroke-dasharray: 3 3; }
.pin-halo { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.pin { fill: var(--ink); }
.north { fill: var(--muted); stroke: var(--map-land); stroke-width: 2px; stroke-linejoin: round; paint-order: stroke; }
.axis { stroke: var(--ink); stroke-width: 1; }
.grid { stroke: var(--line); stroke-width: 1; }

/* Record kinds: one class per kind sets --kind, which the address map's dots use. */
.k-mischief { --kind: var(--cat-mischief); }
.k-breakAndEnter { --kind: var(--cat-breakAndEnter); }
.k-vehicleTheft { --kind: var(--cat-vehicleTheft); }
.k-theftFromVehicle { --kind: var(--cat-theftFromVehicle); }
.k-robbery { --kind: var(--cat-robbery); }
.k-offenceCausingDeath { --kind: var(--cat-offenceCausingDeath); }
.k-needle { --kind: var(--t311-needle); }
.k-homelessness { --kind: var(--t311-homelessness); }
.k-fire { --kind: var(--sim-fire); }
.k-medical { --kind: var(--sim-medical); }
.dot { fill: var(--kind, var(--muted)); fill-opacity: .9; stroke: var(--surface); stroke-width: 1; }
.tone-crime { --bar: var(--cobalt); }
.tone-fire { --bar: var(--sim-fire); }
.tone-medical { --bar: var(--sim-medical); }
.tone-needle { --bar: var(--t311-needle); }
.tone-homelessness { --bar: var(--t311-homelessness); }
.tone-press { --bar: var(--press); }
.bar { fill: var(--bar, var(--cobalt)); }
.bar-partial { stroke: var(--bar, var(--cobalt)); stroke-width: 1.25; }
.hatch { stroke: var(--bar, var(--cobalt)); stroke-width: 2; }

/* Ruled lists, like the site's FAQ and data points: the press's recent coverage, the analyses, search results. */
:is(.articles, .analyses-list, ol.results) {
  max-width: 860px; margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line);
}

:is(.articles, .analyses-list, ol.results) > li { border-bottom: 1px solid var(--line); }

.articles > li { padding: 14px 0; }

.articles a,
.analyses-list a { color: var(--cobalt-text); font-size: 15px; font-weight: 750; line-height: 1.45; text-decoration: none; }
.articles a:hover,
.analyses-list a:hover { text-decoration: underline; text-underline-offset: 4px; }
.articles .meta { display: block; margin-top: 4px; color: var(--muted); font-size: 12px; font-weight: 700; }

.analyses-list > li { padding: 20px 0; color: var(--muted); font-size: 13px; font-weight: 700; }
.analyses-list a { font-size: 19px; font-weight: 800; letter-spacing: -.015em; }
.analyses-list p { margin: 8px 0 0; font-weight: 400; }

ol.results a {
  display: flex; justify-content: space-between; gap: 16px; padding: 18px 4px; color: var(--navy); font-size: 17px;
  font-weight: 800; text-decoration: none;
}

ol.results a::after { content: "→"; content: "→" / ""; color: var(--cobalt-text); transition: transform .2s ease; }
ol.results a:hover { color: var(--cobalt-text); }
ol.results a:hover::after { transform: translateX(3px); }

/* The overview's ranking and an area's lists of child areas and sectors keep the shared table above. Below the
   sections: the address search on a card, the report offer, the links around an address, then the page's sources. */
.search-panel {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 12px 64px;
  width: var(--content); margin: 100px auto 0; padding: clamp(30px, 5vw, 56px); border: 1px solid var(--line);
  border-radius: 34px; background: var(--surface);
}

.search-panel h2 {
  margin: 0; color: var(--navy); font-size: clamp(32px, 4vw, 46px); font-weight: 900; line-height: 1;
  letter-spacing: -.05em;
}

.search-panel > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.search-panel > form { grid-column: 2; grid-row: 1 / span 2; }

/* The report offer: a navy panel like the site's Plus and support blocks, its contents as the motion section's
   tiles, and the App Store badge as the site draws it (on its dark-mode black pill, which this navy carries). */
.offer {
  --focus: var(--yellow);   /* the site's navy blocks keep the yellow ring */
  position: relative; overflow: hidden; width: var(--content); margin: 100px auto 0; padding: clamp(36px, 6vw, 72px);
  border-radius: 40px; background: var(--panel); color: #fff; isolation: isolate;
}

.offer::before {
  content: ""; position: absolute; top: -190px; right: -150px; z-index: -1; width: 460px; height: 460px;
  border: 86px solid rgba(61, 109, 255, .16); border-radius: 50%;
}

.offer h2 {
  max-width: 780px; margin: 0; color: #fff; font-size: clamp(38px, 5vw, 58px); font-weight: 900; line-height: .98;
  letter-spacing: -.055em;
}

.offer .offer-lead {
  max-width: 640px; margin: 22px 0 0; color: rgba(255, 255, 255, .72); font-size: 18px; line-height: 1.6;
}

.offer .contents {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 36px 0 0; padding: 0;
  overflow: hidden; list-style: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px;
  background: rgba(255, 255, 255, .14); counter-reset: part;
}

.offer .contents li {
  display: flex; min-height: 92px; align-items: flex-start; gap: 12px; padding: 18px; background: var(--panel-tile);
  color: #faf7f2; font-size: 14px; font-weight: 700; line-height: 1.45; counter-increment: part;
}

.offer .contents li::before {
  content: counter(part, decimal-leading-zero); content: counter(part, decimal-leading-zero) / ""; flex: none;
  padding-top: 3px; color: var(--orange); font-size: 10px; font-weight: 850; letter-spacing: .08em;
}

.offer-foot {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 56px;
  margin-top: 36px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .14);
}

.offer .terms { margin: 0; color: rgba(255, 255, 255, .78); font-size: 16px; line-height: 1.55; }
.offer .terms strong { color: #fff; font-weight: 850; }
.offer .text-link { margin-top: 14px; color: #8eb0ff; }
.offer .app { max-width: 360px; margin: 0 0 12px; color: rgba(255, 255, 255, .66); font-size: 13px; line-height: 1.55; }
.offer-product .app { max-width: 640px; margin: 22px 0 18px; color: rgba(255, 255, 255, .72); font-size: 18px; line-height: 1.6; }
.offer .actions { margin: 0; }
.offer .primary-button { background: var(--cobalt-bright); color: #fff; }
.offer .primary-button:hover { background: #fff; color: #0e1b3c; }

/* Buy, inside the offer: the first language, then the button. */
.buy { margin-top: 24px; }
.buy fieldset { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 18px; padding: 0; border: 0; }
.buy legend { margin-bottom: 10px; padding: 0; color: rgba(255, 255, 255, .78); font-size: 13px; font-weight: 800; }
.buy label { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 14px; font-weight: 700; }
.buy input[type="radio"] { width: 18px; height: 18px; margin: 0; accent-color: var(--cobalt-bright); }

/* The product page's search for Buy, on the navy. */
.offer .search { max-width: 640px; margin-top: 26px; }
.offer .search-label { color: rgba(255, 255, 255, .78); }
.offer .search input { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.offer .search input::placeholder { color: rgba(255, 255, 255, .5); }
.offer .search input:focus { border-color: #8eb0ff; }

/* Around an address: its neighbourhood, borough and sector as the site's pills. */
.around { width: var(--content); margin: 80px auto 0; }

.around h2 {
  margin: 0; color: var(--navy); font-size: clamp(25px, 3vw, 32px); line-height: 1.12; letter-spacing: -.035em;
}

.place-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }

.place-list a {
  display: inline-flex; min-height: 46px; align-items: center; padding: 11px 20px; border: 1px solid var(--line);
  border-radius: 23px; background: var(--surface); color: var(--navy); font-size: 14px; font-weight: 800;
  line-height: 1.4; text-decoration: none; transition: border-color .2s ease, transform .2s ease;
}

.place-list a:hover { border-color: var(--cobalt); transform: translateY(-2px); }
.place-list a:focus-visible { border-radius: 23px; }

/* A page's own sources, under the site's orange label. */
.page-sources { width: var(--content); margin: 80px auto 0; padding-top: 34px; border-top: 1px solid var(--line); }

:is(.page-sources, .credits) h2 {
  margin: 0 0 18px; color: var(--orange-text); font-size: 11px; font-weight: 850; letter-spacing: .12em;
  text-transform: uppercase;
}

.page-sources ul { margin: 0; }
.page-sources li { color: var(--muted); font-size: 13px; line-height: 1.6; }
.page-sources p { margin: 18px 0 0; }

/* The product page: the report's parts, ruled in two columns like the site's data points. */
.report-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 22px 0 0; }

.report-parts > div { padding: 22px 0; border-top: 1px solid var(--line); }
.report-parts dt { color: var(--navy); font-size: 19px; line-height: 1.3; letter-spacing: -.015em; }
.report-parts dd { margin: 8px 0 0; }

/* The sample: its takeaways as white cards with the figure in the site's display type, then its PDFs. */
.stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px;
  margin: 24px 0 0; padding: 0; list-style: none;
}

.stat {
  display: flex; flex-direction: column; gap: 8px; padding: 28px; border: 1px solid var(--line); border-radius: 28px;
  background: var(--surface);
}

.stat-value {
  margin-bottom: 6px; color: var(--navy); font-size: clamp(40px, 4.4vw, 54px); font-weight: 900; line-height: .95;
  letter-spacing: -.05em; font-variant-numeric: tabular-nums;
}

.stat strong { color: var(--navy); font-size: 16px; }
.sections .stat-label { color: var(--muted); font-size: 14px; line-height: 1.55; }
.pdf-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; padding: 0; list-style: none; }
.sections .pdf-links + p { margin-top: 22px; }
.report-error .mail { margin-top: 26px; }

/* Search, an order: one column under the hero. */
.lookup-body,
.order-body { width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.lookup-body .note { margin: 14px 0 0; }
.lookup-message { margin: 34px 0 0; color: var(--navy); font-size: 15px; font-weight: 800; line-height: 1.5; }

/* The order page (address pages plan Task 17): one card per state, the ready one ringed in cobalt, the downloads as
   the site's buttons, the yellow notice the script shows when it stops checking, and the support line. */
.order-states { display: grid; gap: 16px; }

.state {
  padding: clamp(26px, 4vw, 40px); border: 1px solid var(--line); border-radius: 28px; background: var(--surface);
}

.state[data-state="ready"],
.state[data-state="first-ready"] { border: 2px solid var(--cobalt); }

.state h2 {
  margin: 0; color: var(--navy); font-size: clamp(25px, 3vw, 32px); line-height: 1.12; letter-spacing: -.035em;
}

.state p { max-width: 640px; margin: 12px 0 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
.order .order-address { text-wrap: balance; }
.order-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.order-links .primary-button { padding-block: 10px; line-height: 1.3; }   /* a long label may wrap on a phone */
.order .order-stale { max-width: none; margin: 0; }
.order-support { margin: 30px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; text-align: center; }

/* An analysis: a column of text under the hero, the site's type at reading size. */
.article-body {
  width: min(760px, calc(100% - 40px)); margin: 0 auto; padding-top: 8px; border-top: 1px solid var(--line);
}

.article-body h2 {
  margin: 48px 0 0; color: var(--navy); font-size: clamp(25px, 3vw, 32px); line-height: 1.12;
  letter-spacing: -.035em;
}

.article-body h3 { margin: 32px 0 0; color: var(--navy); font-size: 19px; line-height: 1.3; }
.article-body :is(p, li) { color: var(--muted); font-size: 17px; line-height: 1.75; }
.article-body p { margin: 18px 0 0; }
.article-body ol { margin: 18px 0 0; padding-left: 22px; list-style: decimal; }
.article-body table { width: 100%; margin: 24px 0 0; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.article-body :is(th, td) { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: start; }
.article-body th { color: var(--muted); font-size: 11px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.article-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.article-body .article-foot p { margin: 0; font-size: 13px; line-height: 1.6; }

/* The band above the site's footer, laid out like its data section: the 911 note and the pages' links on the left,
   every source and its licence on the right. */
.page-notes {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start;
  gap: 48px clamp(56px, 9vw, 120px); width: var(--content); margin: 120px auto 0; padding: 64px 0 110px;
  border-top: 1px solid var(--line);
}

.page-notes .emergency-note { margin: 0; }
.page-links { display: grid; justify-items: start; gap: 16px; margin-top: 32px; }
.sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; margin: 0; padding: 0; list-style: none; }
.sources a { color: var(--navy); font-size: 13px; font-weight: 750; line-height: 1.45; text-decoration: none; }
.sources a:hover { color: var(--cobalt-text); }
.credits p { margin: 14px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.credits .sources + p { margin-top: 28px; }

/* The site's breakpoints: 980 px (its menu), 720 px (its phone layout) and 359 px. */
@media (max-width: 980px) {
  :is(.figure, .figure.figure-map) { grid-template-columns: minmax(0, 1fr); }
  .search-panel { grid-template-columns: minmax(0, 1fr); }
  .search-panel > form { grid-column: auto; grid-row: auto; margin-top: 16px; }
  .offer .contents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .data-page { --content: min(100% - 40px, 1180px); }
  .search-band { padding: 12px 0 14px; }
  .search-band .search { display: block; }
  .search-band .search-label { margin-bottom: 8px; }
  .search input { height: 48px; padding: 0 18px; }
  .search .primary-button { min-height: 48px; padding: 0 18px; }
  .data-page .page-hero { padding: 48px 0 60px; }
  /* A place's own name as the title: smaller than the site's phone title, so a bound compound always fits. */
  .data-page :is(.address, .area, .sample, .order) .page-hero h1 { font-size: clamp(36px, 11vw, 68px); }
  .data-page .page-hero > .bottom-line { margin-left: 0; font-size: 17px; }
  .windows ul { justify-content: flex-start; }
  .sections > :is(.section, .terms-version) { padding: 30px 0 36px; }
  .sections > :is(.section, .terms-version)::before { position: static; display: block; margin-bottom: 12px; }
  .table-wrap { border-radius: 20px; }
  .data-table { font-size: 14px; }
  .data-table :is(th, td) { padding: 12px 16px; }
  /* Row names wrap, so the first figures show beside them and the next column peeks in under the shadow. */
  .data-table :is(tbody, tfoot) th { min-width: 9em; white-space: normal; }
  /* The caption (each table's window) stays in view while a wide table scrolls under it. */
  .table-wrap { container-type: inline-size; }
  .data-table caption {
    position: sticky; left: 0; max-width: calc(100vw - 42px); max-width: 100cqi; padding: 16px 16px 4px;
  }
  .figure { border-radius: 22px; }
  /* On phones the map runs nearly to the card's edge (about 324 px of a 390 px screen), its caption inset. */
  .figure.figure-map { padding: 12px; gap: 16px; }
  .figure-map figcaption { padding: 0 8px 8px; }
  .search-panel { margin-top: 70px; border-radius: 26px; }
  .offer { margin-top: 70px; border-radius: 30px; }
  .offer .contents { grid-template-columns: minmax(0, 1fr); }
  .offer .contents li { min-height: 0; }
  .offer-foot { align-items: flex-start; flex-direction: column; }
  .report-parts { grid-template-columns: minmax(0, 1fr); }
  .sources { grid-template-columns: minmax(0, 1fr); }
  .page-notes { margin-top: 80px; padding: 48px 0 80px; }
}

@media (max-width: 359px) {
  .search .primary-button { padding: 0 14px; }
  .windows :is(a, span) { padding: 0 14px; }
}

/* Print: the page's content in ink on paper. The site's menu, the search, the offer's buttons and the footer's links
   stay off the page; the footer keeps its brand and its credits. Backgrounds do not print, so panels turn to ink on
   white, and the tokens are the light ones whatever the screen's scheme. */
@media print {
  :root {
    --ground: #fff;
    --surface: #fff;
    --surface-soft: #fff;
    --ink: #1a1a1e;
    --muted: #4a4950;
    --faint: #6b6a70;
    --line: #cfcac2;
    --cobalt: #0047bb;
    --cobalt-text: #0047bb;
    --cobalt-fill: #0047bb;
    --orange-text: #c8401c;
    --navy: #0e1b3c;
    --panel: #fff;
    --panel-tile: #fff;
  }

  body { background: #fff; }
  .skip,
  .site-header .header-actions,
  .search-band,
  .search-panel,
  .windows,
  .offer-app,
  .offer .actions,
  .buy,
  .offer .search,
  .page-links,
  .site-footer .footer-main nav { display: none; }
  .site-header { height: 64px; }
  .data-page .page-hero { padding: 24px 0 32px; }
  .offer { padding: 24px 0 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink); }
  .offer::before { display: none; }
  .offer h2 { color: var(--navy); font-size: 28px; }
  .offer :is(.offer-lead, .terms, .app) { color: var(--muted); }
  .offer .terms strong { color: var(--ink); }
  .offer .contents { border-color: var(--line); background: var(--line); }
  .offer .contents li { color: var(--ink); }
  .offer .text-link { color: var(--cobalt-text); }
  .data-page .primary-button { border: 1px solid currentColor; background: none; color: var(--cobalt-text); }
  .sections > :is(.section, .terms-version) { padding-left: 0; }
  .sections > :is(.section, .terms-version)::before { position: static; display: block; margin-bottom: 10px; }
  .table-wrap { overflow: visible; }
  .data-table { font-size: 12px; }
  .data-table :is(th, td) { padding: 8px 12px; }
  :is(.figure, .stat, .state, .report-parts > div) { break-inside: avoid; }
  .data-table tr { break-inside: avoid; }
  .sections h2 { break-after: avoid; }
  .page-notes { margin-top: 32px; padding: 24px 0 0; }
  .site-footer { padding: 24px 0 0; background: none; color: var(--ink); }
  .site-footer .footer-main { padding-bottom: 12px; border-color: var(--line); }
  .site-footer .footer-legal p { color: var(--muted); }
}