/* Walkably components. Tokens come from tokens.css (linked before this file); this file declares none.
   Order: base, links, header and language menu, page and headings, facts row, figure plate, tables, buttons,
   the district ranking set, the cities list, footer, the business pages (bz-), phone widths, reduced motion.
   Used by: the city pages (tools/citypages/build.py), /cities/, the district pages (district_page.py), /about,
   the business pages (tools/business), and /design/, which renders every rule below. The map app (index.html)
   links tokens.css only and keeps its own panel styles. */

/* ---- base ---- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--step-0)/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
p,ul,ol,dl,figure,table{margin:0}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- links ---- */
a{color:var(--blue-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:color var(--dur) var(--ease-out-3)}
a:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
@media (hover:hover){a:hover{color:var(--ink)}}

/* ---- header: the sheet's title row. .nav for the pages, .back for a page with one way out (about) ---- */
.top{border-bottom:1px solid var(--ink);background:var(--paper)}
.top .in{max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;min-height:44px;font:600 var(--step-1)/1.15 var(--f-body);color:var(--ink);text-decoration:none}
/* the logo: the Blocks mark (docs/design/logo) before the name, centred on the capitals, as drawn in marks.lockup() */
.logo{white-space:nowrap}
.logo img{display:inline-block;height:.94em;width:auto;vertical-align:-.12em;margin-right:.23em}
.nav{display:flex;gap:4px;margin-right:-12px}
.nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r);color:var(--blue-text);font:600 var(--step--1)/1 var(--f-body);text-decoration:none;transition:background-color var(--dur) var(--ease-out-3)}
@media (hover:hover){.nav a:hover{background:var(--tint)}}
.nav a[aria-current]{color:var(--ink)}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;margin-right:-12px;border-radius:var(--r);color:var(--blue-text);font:600 var(--step--1)/1 var(--f-body);text-decoration:none;transition:background-color var(--dur) var(--ease-out-3),transform var(--dur) var(--ease-out-3)}
.back svg{flex:none}
.back:active{transform:scale(.97)}
.back:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:2px}
@media (hover:hover){.back:hover{background:var(--tint);color:var(--blue-text)}}

/* ---- language menu: a <details> in the header; shell.MENU_JS closes it on a click outside or Escape ---- */
.lmenu{position:relative}
.lmenu summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--r);cursor:pointer;list-style:none;color:var(--blue-text);font:600 var(--step--1)/1 var(--f-body)}
.lmenu summary::-webkit-details-marker{display:none}
.lmenu summary::after{content:'';width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);margin-left:2px}
.lmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.lmenu svg{fill:none;stroke:currentColor;stroke-width:1.3}
.lmenu .lc{display:none}
.lmenu ul{position:absolute;right:0;top:100%;z-index:10;margin:4px 0 0;padding:6px 0;list-style:none;min-width:11rem;background:var(--paper);border:1px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.lmenu li a{display:flex;align-items:center;min-height:44px;padding:0 16px;border-radius:0}
.lmenu li a[aria-current]{color:var(--ink);font-weight:600}
@media (hover:hover){.lmenu summary:hover{background:var(--tint)}}

/* ---- page: one column of 1180 px; the head block, then sections divided by the strong rule ---- */
.page{max-width:var(--wrap);margin:0 auto;padding:56px var(--gutter) 96px}
.head{max-width:46rem}
h1{font:600 var(--step-3)/1.1 var(--f-body);letter-spacing:-.015em;margin:0;text-wrap:balance}
.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);margin-top:16px;text-wrap:pretty;max-width:var(--measure)}
.summary{max-width:40em;margin-top:28px;font-size:var(--step-1);line-height:1.5;text-wrap:pretty}
.grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 64px;margin-top:8px}
section{margin-top:56px;padding-top:24px;border-top:1px solid var(--ink)}
h2{font:600 var(--step-2)/1.15 var(--f-body);letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
section p{max-width:var(--measure);text-wrap:pretty}
section p + p{margin-top:.8em}
.note{font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}

/* ---- facts row: three hero numbers between a strong rule and a light one ---- */
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}
.fact{padding:18px var(--gutter) 18px 0}
.fact + .fact{padding-left:var(--gutter);border-left:1px solid var(--rule)}
.fact .big{display:block;font:400 var(--step-big)/1 var(--f-display);font-variant-numeric:tabular-nums}
.fact .big small{font-size:.45em;color:var(--ink-2);margin-left:2px}
.fact .lab{display:block;margin-top:8px;font-size:var(--step--1);line-height:1.4;color:var(--ink-2);max-width:22em}

/* ---- figure plate: the city mosaic, its caption and key ---- */
figure{margin-top:8px}
.mosaic{display:block;width:100%;height:auto;max-height:78vh}
.mosaic .edge{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.mosaic .mk rect{fill:var(--paper);stroke:var(--ink);stroke-width:1.4}
.mosaic .mk text{font-family:var(--f-display);font-weight:700;fill:var(--ink)}
figcaption{font-size:var(--step--1);line-height:1.5;color:var(--ink-2);margin-top:12px;max-width:40em}
.key{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:var(--step--1);color:var(--ink-2)}
.key span{display:inline-flex;align-items:center;gap:6px}
.key .sw,.fifths .sw{display:inline-block;width:18px;height:14px;border:1px solid var(--hatch);flex:none}

/* ---- tables: light rules between rows, a strong one under the head, numbers right-aligned in the display face ---- */
table{width:100%;border-collapse:collapse;font-size:var(--step--1);line-height:1.4}
caption{text-align:left;color:var(--ink-2);padding-bottom:10px;font-size:var(--step--1)}
th,td{text-align:left;vertical-align:middle;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
thead th{font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--ink)}
tbody th{font-weight:600}
td.n,th.n{text-align:right;padding-right:16px}
td.n{font-family:var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
td.n:last-child,th.n:last-child{padding-right:0}
thead th.n{line-height:1.25}
tbody tr{transition:background-color var(--dur) var(--ease-out-3)}
@media (hover:hover){tbody tr:hover{background:var(--tint)}}
/* the fifths table: a bar per fifth with the 20% mark */
.fifths td.bar{width:46%}
.fifths .track{position:relative;height:18px}
.fifths .track i{position:absolute;left:0;top:2px;bottom:2px;background:var(--ink-2);border-radius:0 2px 2px 0}
.fifths .track b{position:absolute;top:-4px;bottom:-4px;border-left:1.5px dashed var(--ink)}
/* the letter marks (1-5, A-E) in an area name (.an) that tie a list row to the picture */
.an .lt{display:inline-flex;align-items:center;justify-content:center;flex:none;width:1.7em;height:1.7em;margin-right:8px;border:1.4px solid var(--ink);font:700 max(12px,.85em)/1 var(--f-display);vertical-align:middle}
/* area lists and the comparable cities */
.areas{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.areas h3{font:600 var(--step-1)/1.25 var(--f-body);margin:0 0 8px}
.arealist th a,.comp th a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.arealist tbody th,.comp tbody th{padding-top:0;padding-bottom:0}
.an{display:flex;align-items:center}
@media (hover:hover){.arealist th a:hover,.comp th a:hover{color:var(--ink-2)}}
.comp{max-width:46rem}

/* ---- buttons: one dark call to action ---- */
.cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:20px;padding:0 20px;border:1px solid var(--ink);border-radius:var(--r);background:var(--ink);color:var(--paper);font:600 var(--step-0)/1 var(--f-body);text-decoration:none;transition:background-color var(--dur) var(--ease-out-3),transform var(--dur) var(--ease-out-3)}
.cta:active{transform:scale(.98)}
@media (hover:hover){.cta:hover{background:var(--ink-hover);color:var(--paper)}}
.cta:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---- district ranking pages: the district map, its key, the sortable table, the search box, the embed code ---- */
.dmap{width:100%;max-width:820px;height:auto;display:block}
.dmap path{transition:fill .15s}
.dmap path.on{fill:var(--blue)!important}
.dkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:var(--step--1);color:var(--ink-2)}
.dkey span{display:inline-flex;align-items:center;gap:6px}
.dkey i{width:14px;height:14px;border:1px solid var(--rule);display:inline-block}
.tbox{overflow-x:auto;margin-top:16px;border-top:1px solid var(--ink)}
.rank{min-width:640px}
.rank th{position:sticky;top:0;background:var(--paper);text-align:left;font-weight:600;padding:10px 8px;border-bottom:1px solid var(--ink);white-space:nowrap}
.rank th.n,.rank td.n{text-align:right}
.rank td{padding:9px 8px;border-bottom:1px solid var(--rule)}
.rank th button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:4px;min-height:44px;min-width:44px;margin:-8px -8px;padding:0 8px}   /* a 44 px tap area grown into the cell's own padding (10 px above and below, 8 px each side): the text and the row do not move */
.rank th.n button{justify-content:flex-end}   /* a short word ("Wert") in a right-aligned head grows its box to the left, so the word stays on the right */
.rank th button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rank th[aria-sort] button::after{content:'';border:4px solid transparent;border-top-color:currentColor;margin-top:4px}
.rank th[aria-sort=ascending] button::after{border-top-color:transparent;border-bottom-color:currentColor;margin:0 0 4px}
.rank td.nm{font-weight:600}
.rank .sc{display:flex;align-items:center;gap:10px;justify-content:flex-end}
.rank .sc i{display:block;height:6px;background:var(--ink);min-width:2px}
.rank .sc .t{width:80px;background:var(--tint);height:6px}
.rank tr.on td{background:var(--tint)}
.find{display:block;margin-top:16px}
.find input{font:inherit;min-height:44px;padding:0 12px;border:1px solid var(--ink);border-radius:var(--r);width:min(100%,320px);background:var(--paper)}
.code{font-family:ui-monospace,monospace;font-size:.85em;white-space:pre-wrap;word-break:break-all;background:var(--tint);padding:12px;margin-top:8px}
.dl a{display:inline-flex;align-items:center;min-height:44px}

/* ---- the cities list (/cities/): countries as sections, cities in columns ---- */
.list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:0 24px}
.list li{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--rule)}
.list a{display:flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:none}
.list a.alt{min-width:44px;justify-content:center;color:var(--blue-text);font:600 var(--step--1)/1 var(--f-body)}
h2 .loc{font-weight:400;color:var(--ink-2);margin-left:.35em}
@media (hover:hover){.list a:hover{color:var(--blue-text)}}

/* ---- footer: credits and contact under the last strong rule ---- */
.end{margin-top:72px;padding-top:20px;border-top:1px solid var(--ink);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:var(--step--1);color:var(--ink-2)}
.end p{max-width:48em}
.end a{overflow-wrap:anywhere}

/* ---- business pages (/business/ and its six buyer pages, built by tools/business/build.py): led by the map ----
   The map fills the first screen and the words sit on a paper sheet beside it, as the map's own side panel does;
   every section carries a real product screen. Sheets have a 1 px ink edge and square corners, as the product's
   panels do. Classes start with bz- so nothing here touches the city, district or about pages.
   Motion state list (written before the rules below):
   S0 rest     what a screenshot, no script and reduced motion see: every section complete, the hero map still.
   S1 armed    html.bz-mo, set on the reader's FIRST scroll: .bz-rv blocks below the fold wait at opacity 0, 14 px
               low; blocks already on screen are marked .on first, so nothing visible ever hides.
   S2 on       a block reaches 12% of the window: it rises over 300 ms (--ease-out-4), siblings 60 ms apart (--d);
               the check bars grow from their zero line over 420 ms; the hero map drifts down at 0.3 of the
               scroll across the hero (CSS scroll timeline only; browsers without it keep the map still).
   S3 reduced  no movement: the same blocks fade in 120 ms, the bars and the map stay still.
   The title row turns sticky on wide screens and gains a hairline shadow once the hero has scrolled away. */
.bz-page{scroll-padding-top:calc(var(--nav-h) + 12px)}
/* phones: the business pages' secondary text (cards, notes, FAQ answers, tables) at 16 px, not 13.5 (SEO review 15 Oct,
   seo-business-review-findings medium 1); scoped to main so the header keeps the shared size */
@media (max-width:599px){.bz-page main{--step--1:1rem}}
.bz-page .top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;transition:box-shadow var(--dur) var(--ease-out-3)}
.bz-page .top .in{max-width:var(--wrap-wide);min-height:var(--nav-h);padding-block:0;padding-left:max(var(--gutter-wide),env(safe-area-inset-left,0px));padding-right:max(var(--gutter-wide),env(safe-area-inset-right,0px))}
.bz-page.scrolled .top{box-shadow:0 1px 0 var(--ink),0 8px 20px rgba(33,31,38,.06)}
.bz-in{max-width:var(--wrap-wide);margin:0 auto;padding-left:max(var(--gutter-wide),env(safe-area-inset-left,0px));padding-right:max(var(--gutter-wide),env(safe-area-inset-right,0px))}
:where(.bz) section{margin:0;padding:0;border:0}   /* zero weight: every bz- section rule below wins */
:where(.bz) section p{max-width:none}
.bz h2{font:600 var(--step-3)/1.1 var(--f-body);letter-spacing:-.012em;margin:0;max-width:22em;text-wrap:balance}
.bz h3{font:600 var(--step-1)/1.25 var(--f-body);margin:0;text-wrap:balance}
.bz img{display:block;max-width:100%;height:auto}
.bz-sub{font-size:var(--step-1);line-height:1.45;color:var(--ink-2);margin-top:12px;max-width:36em;text-wrap:pretty}
.bz .bz-s{padding-top:96px}
.bz-hd{margin-bottom:40px}
.bz-gap-t{margin-top:40px}
.bz-code + .bz-shot{margin-top:20px}
.bz-lead h3{font-size:var(--step-2);line-height:1.2}
.bz-lead h3 a{color:var(--ink)}
.bz-lead p{margin-top:12px;color:var(--ink-2);text-wrap:pretty}
.bz-lead p.bz-res{color:var(--ink);font-weight:600}

/* buttons: the dark one is .cta (shared); .bz-btn is its paper twin, side by side in .bz-actions */
.bz-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bz-actions .cta{margin-top:0}
.bz-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:var(--r);background:var(--paper);color:var(--ink);font:600 var(--step-0)/1 var(--f-body);text-decoration:none;transition:background-color var(--dur) var(--ease-out-3),transform var(--dur) var(--ease-out-3)}
.bz-btn:active{transform:scale(.97)}
.bz-btn:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){.bz-btn:hover{background:var(--tint);color:var(--ink)}}

/* hero: the live map fills the screen, the sheet sits on the right as the product's panel does */
.bz-hero{position:relative;overflow:hidden;overflow:clip;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(440px,38%);min-height:min(calc(100svh - var(--nav-h)),720px);border-bottom:1px solid var(--ink)}
.bz-hero .bz-map{position:relative;grid-column:1;grid-row:1;overflow:hidden;overflow:clip}
.bz-hero .bz-plane{position:absolute;inset:-24% 0 0 0;--depth:.3}   /* taller than its frame by the most it drifts */
.bz-hero .bz-plane picture{display:block;height:100%}
.bz-hero .bz-plane img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.bz-sheet{position:relative;z-index:1;grid-column:2;grid-row:1;background:var(--paper);border-left:1px solid var(--ink);padding:56px max(var(--gutter-wide),env(safe-area-inset-right,0px)) 48px 40px;display:flex;flex-direction:column;justify-content:center}
.bz-sheet h1{font:600 var(--step-4)/1.06 var(--f-body);letter-spacing:-.018em;text-wrap:balance}
.bz-sheet .bz-lede{font-size:var(--step-0);line-height:1.55;color:var(--ink-2);margin-top:20px;text-wrap:pretty}

/* facts strip under the hero: one cell per fact; a fact that opens on a number shows it in the display face */
.bz-facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));border-bottom:1px solid var(--rule)}
.bz-facts li{padding:22px 20px 24px 0;min-width:0;font-size:var(--step--1);line-height:1.45;color:var(--ink-2)}
.bz-facts li + li{padding-left:20px;border-left:1px solid var(--rule)}
.bz-facts .big{display:block;font:700 clamp(1.8rem,1.4rem + 1.2vw,2.4rem)/1 var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink);margin-bottom:10px}
.bz-facts .st{display:block;font:600 var(--step-0)/1.35 var(--f-body);color:var(--ink);text-wrap:pretty}

/* the buyer cards (hub): one product view on top, the words under it; the whole card is the link */
.bz-cards{list-style:none;padding:0;display:grid;grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:20px}
.bz-card{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--paper);border:1px solid var(--ink);transition:transform var(--dur) var(--ease-out-3),box-shadow var(--dur) var(--ease-out-3)}
.bz-card .bz-view{height:260px;overflow:hidden;border-bottom:1px solid var(--ink);background:var(--tint)}
.bz-card .bz-view img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 0)}
.bz-card .bz-view .bz-code{margin:0;border:0;height:100%;background:var(--paper)}
.bz-card .bz-body{display:flex;flex-direction:column;gap:8px;padding:16px 18px 20px;flex:1}
.bz-card h3{font-size:var(--step-0);line-height:1.3}
.bz-card h3 a{color:var(--ink);text-decoration:none}
.bz-card h3 a::after{content:"";position:absolute;inset:0}
.bz-card h3 a:focus-visible{outline:0}
.bz-card:focus-within{outline:2px solid var(--blue);outline-offset:3px}
.bz-card p{font-size:var(--step--1);line-height:1.5;color:var(--ink-2)}
.bz-card .bz-res{margin-top:auto;padding-top:8px;color:var(--ink);font-weight:600}
.bz-card:active{transform:scale(.99)}
@media (hover:hover){.bz-card:hover{box-shadow:0 10px 24px rgba(33,31,38,.10)}.bz-card:hover h3 a{color:var(--blue-text)}}

/* text lists: a ruled list of title + text (+ the outcome line in ink) */
.bz-items{list-style:none;padding:0;margin:0;border-top:1px solid var(--ink)}
.bz-items > li{padding:16px 0 18px;border-bottom:1px solid var(--rule)}
.bz-items h3{font-size:var(--step-0);line-height:1.3}
.bz-items h3 a{color:var(--ink);text-decoration-color:var(--hatch)}
.bz h3 a,.bz-res a,.bz-links a{display:inline-block;padding-block:8px;margin-block:-8px}   /* 44 px to tap, same line box */
@media (hover:hover){.bz-items h3 a:hover{color:var(--blue-text)}}
.bz-items p{margin-top:6px;color:var(--ink-2);font-size:var(--step--1);line-height:1.55;text-wrap:pretty}
.bz-items p.bz-res,.bz-col p.bz-res{color:var(--ink);font-weight:600}
.bz-items.bz-2col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
.bz-items.bz-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:40px}

/* two columns: words on one side, the product screen on the other */
.bz-two{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 64px;align-items:start}
.bz-two.bz-wide-l{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.bz-two.bz-wide-r{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.bz-shot{margin:0;max-width:var(--max,none)}   /* --max: half the file's width, so a 2x screen stays sharp */
.bz-shot .bz-frame{border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.bz-shot.bz-tall{max-width:460px}   /* the panel screens are 918 px: 2x at 459 px */
.bz-shot.bz-tall .bz-frame{max-height:880px}
.bz-shot.bz-tall .bz-frame img{width:100%}
.bz-shot figcaption{margin-top:12px}
.bz-sticky{position:sticky;top:calc(var(--nav-h) + 24px)}

/* three visible columns (the "tabs" kind): a screen on top of each discipline */
.bz-cols{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bz-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.bz-col .bz-frame{height:300px;border:1px solid var(--ink);overflow:hidden;background:var(--tint)}
.bz-col .bz-frame img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 0)}
.bz-col h3{margin-top:8px}
.bz-col p{font-size:var(--step--1);line-height:1.55;color:var(--ink-2);text-wrap:pretty}

/* the product edge to edge, a sheet in its corner */
.bz-bleed{position:relative;margin:36px 0 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;overflow:clip}
.bz-bleed > img{width:100%;max-height:860px;object-fit:cover;object-position:50% 0}
.bz-note{position:absolute;left:max(var(--gutter-wide),calc((100% - var(--wrap-wide)) / 2 + var(--gutter-wide)));bottom:40px;max-width:430px;background:var(--paper);border:1px solid var(--ink);padding:20px 22px 22px}
.bz-note h3{font-size:var(--step-1)}
.bz-note p{margin-top:6px;font-size:var(--step--1);line-height:1.55;color:var(--ink-2)}
.bz-note p.bz-res{color:var(--ink);font-weight:600}

/* the tint band: the result sheet on one side, the fields on the other */
.bz-band{margin-top:88px;padding:72px 0;background:var(--tint);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bz .bz-band + .bz-s{padding-top:88px}
.bz-band th,.bz-band td,.bz-band .bz-items > li{border-bottom-color:var(--hatch)}
.bz-band a{color:var(--ink)}   /* blue text on the tint is under 4.5:1 */
.bz-cmp td.us,.bz-cmp th.us,.bz-cmp tr.us > *{border-bottom-color:var(--hatch)}

/* tables: the field table (.bz-tbl) and the comparison (.bz-cmp); both inherit the shared table rules */
.bz-tbl{font-size:var(--step--1);border-top:1px solid var(--ink)}
.bz-tbl thead th{border-bottom:1px solid var(--ink)}
.bz-tbl th,.bz-tbl td{vertical-align:baseline;padding:11px 16px 11px 0}
.bz-tbl tbody th{width:38%}
.bz-tbl td.n{font-size:var(--step-0);color:var(--ink)}
.bz-src{margin-top:10px;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);overflow-wrap:break-word}   /* the comparison sources: one small line under the table */
.bz-srclink{margin-top:12px;font-size:var(--step--1);font-weight:600}
.bz-srclink a{display:inline-flex;align-items:center;min-height:44px}
.bz-plainhead{padding-block:72px 8px}
.bz-plainhead h1{font:600 var(--step-4)/1.06 var(--f-body);letter-spacing:-.018em;max-width:20em;text-wrap:balance}
.bz-plainhead .bz-lede{font-size:var(--step-1);line-height:1.5;color:var(--ink-2);margin-top:16px;max-width:36em;text-wrap:pretty}
.bz-sources > li{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:4px 32px;align-items:baseline}
.bz-sources p{margin-top:0;overflow-wrap:anywhere}
.bz-tnote{margin-top:12px;font-size:var(--step--1);line-height:1.5;color:var(--ink-2);max-width:52em;text-wrap:pretty}
.bz-scroll{overflow-x:auto;margin-top:28px}
.bz-cmp{table-layout:fixed;min-width:960px;font-size:var(--step--1);line-height:1.45}
.bz-cmp th,.bz-cmp td{vertical-align:top;padding:12px 16px 12px 0;color:var(--ink-2)}
.bz-cmp thead th{color:var(--ink);font-weight:600;vertical-align:bottom;border-bottom:1px solid var(--ink)}
.bz-cmp tbody th{color:var(--ink);font-weight:600}
.bz-cmp .us,.bz-cmp tr.us th,.bz-cmp tr.us td{color:var(--ink);font-weight:600}
.bz-cmp tr.us td,.bz-cmp tr.us th,.bz-cmp td.us,.bz-cmp th.us{background:var(--tint)}
.bz-cmp td:last-child,.bz-cmp th:last-child{padding-right:12px}
.bz-cmp td.us,.bz-cmp th.us,.bz-cmp tr.us > *{padding-left:12px}
.bz-cmp td{overflow-wrap:break-word}
.bz-cmp col.lab{width:15%}

/* the checks: one row per check, the agreement as a bar from the zero line, the row's own pass mark dashed */
.bz-checks{border-top:1px solid var(--ink);font-size:var(--step--1)}
.bz-checks th,.bz-checks td{vertical-align:middle;padding:12px 16px 12px 0}
.bz-checks tbody th{font-weight:600;width:34%}
.bz-checks tbody th small{display:block;font-size:max(12px,.9em);font-weight:400;color:var(--ink-2);margin-top:2px}
.bz-checks td.bar{width:30%}
.bz-checks thead th{line-height:1.25;vertical-align:bottom}
.bz-checks td.res{white-space:nowrap;color:var(--ink-2)}
.bz-checks td.res.fail{color:var(--vermilion)}
.bz-checks td.res.pass{color:var(--good)}
.bz-track{position:relative;height:28px}
.bz-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--rule)}
.bz-track .z{position:absolute;top:0;bottom:0;left:var(--z);border-left:1px solid var(--ink)}
.bz-track .b{position:absolute;top:7px;bottom:7px;transform-origin:left center;transition:transform 420ms var(--ease-out-4)}
.bz-track .b.pos{left:var(--z);width:var(--w);background:var(--good)}
.bz-track .b.neg{right:calc(100% - var(--z));width:var(--w);background:var(--vermilion);transform-origin:right center}
.bz-track .pm{position:absolute;top:0;bottom:0;left:var(--p);border-left:1.5px dashed var(--ink)}
.bz-checks td.t{color:var(--ink-2)}
.bz-checks td.v{width:7em;text-align:right;font-family:var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:break-word}
.bz-checks thead th{font-weight:600;color:var(--ink-2);border-bottom:1px solid var(--ink)}
html.bz-mo .bz-rv:not(.on) .bz-track .b{transform:scaleX(0)}

/* the two parts of one score as a stacked bar (Plaça d'Espanya, from /about#how) */
.bz-parts{margin-top:20px}
.bz-parts .bar{display:flex;gap:2px;height:30px;border:1px solid var(--hatch);background:var(--paper)}
.bz-parts .bar i{display:block;height:100%}
.bz-parts .bar .r{background:var(--ink-2)}
.bz-parts .bar .q{background:var(--hatch)}
.bz-parts .axis{position:relative;height:22px;margin-top:6px;font:400 12px/1 var(--f-display);color:var(--ink-2)}
.bz-parts .axis span{position:absolute;top:4px;transform:translateX(-50%)}
.bz-parts .axis span:first-child{transform:none}
.bz-parts .axis span:last-child{transform:translateX(-100%)}
.bz-parts .axis span.at{color:var(--ink);font-weight:700}

/* code: the API sample, the CSV lines, the credit and citation lines, the email subject */
.bz-code{margin:20px 0 0;padding:16px 18px;border:1px solid var(--ink);background:var(--paper);font:400 13px/1.55 var(--f-display);color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:auto}
.bz-code.bz-pre{white-space:pre;overflow-wrap:normal}

/* steps: a real order, so they are numbered by their own words and joined by one rule */
.bz-steps{list-style:none;padding:0;margin:0}
.bz-steps > li{position:relative;padding:0 0 22px 28px}
.bz-steps > li::before{content:"";position:absolute;left:5px;top:10px;bottom:-4px;border-left:1px solid var(--ink)}
.bz-steps > li:last-child::before{display:none}
.bz-steps > li::after{content:"";position:absolute;left:0;top:6px;width:11px;height:11px;background:var(--paper);border:1.5px solid var(--ink)}
.bz-steps h3{font-size:var(--step-0)}
.bz-steps p{margin-top:4px;font-size:var(--step--1);line-height:1.55;color:var(--ink-2)}

/* the 31 countries, under any text that names them */
.bz-countries{list-style:none;padding:0;margin:14px 0 4px;display:grid;grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:0 20px;border-top:1px solid var(--rule)}
.bz-countries li{padding:6px 0;border-bottom:1px solid var(--rule);font-size:var(--step--1);color:var(--ink)}

/* questions: an accordion with a square plus that turns into a cross */
.bz-faq{margin-top:28px;border-top:1px solid var(--ink);max-width:52em}
.bz-faq details{border-bottom:1px solid var(--rule)}
.bz-faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:16px;align-items:center;min-height:56px;padding:12px 0;font:600 var(--step-0)/1.35 var(--f-body)}
.bz-faq summary::-webkit-details-marker{display:none}
.bz-faq summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.bz-faq .pm{position:relative;width:28px;height:28px;border:1px solid var(--ink);transition:transform 200ms var(--ease-out-3),background-color var(--dur) var(--ease-out-3)}
.bz-faq .pm::before,.bz-faq .pm::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform:translate(-50%,-50%);transition:background-color var(--dur) var(--ease-out-3)}
.bz-faq .pm::before{width:12px;height:1.4px}
.bz-faq .pm::after{width:1.4px;height:12px}
.bz-faq details[open] .pm{transform:rotate(45deg)}
@media (hover:hover){.bz-faq summary:hover .pm{background:var(--ink)}.bz-faq summary:hover .pm::before,.bz-faq summary:hover .pm::after{background:var(--paper)}}
.bz-faq .a{padding:0 44px 20px 0;color:var(--ink-2);font-size:var(--step-0);line-height:1.6;text-wrap:pretty}

/* the closing band: the map of Europe behind two sheets, what is coming and how to start */
.bz-end{position:relative;margin-top:96px;padding:72px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);overflow:hidden;overflow:clip}
.bz-end .bz-map{position:absolute;inset:0;z-index:0}
.bz-end .bz-map img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.bz-end > .bz-in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px;align-items:start}
.bz-panel{background:var(--paper);border:1px solid var(--ink);padding:30px 32px 32px}
.bz-panel h2{font-size:var(--step-3)}
.bz-panel .bz-sub{font-size:var(--step-0)}
.bz-soon{list-style:none;padding:0;margin:20px 0 0;border-top:1px solid var(--ink)}
.bz-soon li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--rule)}
.bz-soon li::before{content:"";width:14px;height:14px;border:1.4px solid var(--ink);background:var(--hatchfill);transform:translateY(2px)}
.bz-soon b{font-weight:600}
.bz-soon span{display:block;color:var(--ink-2);font-size:var(--step--1);line-height:1.5}
.bz-mail{display:inline-block;margin-top:16px;font:400 var(--step-1)/1.3 var(--f-display);overflow-wrap:anywhere}
.bz-panel .bz-items,.bz-panel .bz-steps{margin-top:24px}
.bz-links{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:20px;font-size:var(--step--1)}
.bz-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}

/* the other business pages, above the footer */
.bz-more{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 24px;border-top:1px solid var(--ink)}
.bz-more li{border-bottom:1px solid var(--rule)}
.bz-more a{display:flex;align-items:center;min-height:52px;color:var(--ink);font-weight:600;text-decoration:none;font-size:var(--step--1)}
.bz-more a[aria-current]{color:var(--ink-2)}
@media (hover:hover){.bz-more a:hover{color:var(--blue-text)}}
.bz .end{margin-top:40px;padding-bottom:48px}

/* a hand-drawn figure: the walk on real streets beside the straight line */
.bz-diagram{border:1px solid var(--ink);background:var(--paper);padding:20px}
.bz-diagram svg{display:block;width:100%;height:auto;color:var(--ink)}

/* motion (state list at the top of this block) */
.bz-rv{transition:opacity 300ms var(--ease-out-4) var(--d,0ms),transform 300ms var(--ease-out-4) var(--d,0ms)}
html.bz-mo .bz-rv:not(.on){opacity:0;transform:translateY(14px)}
@supports (animation-timeline: scroll()){
  .bz-hero .bz-plane{animation:bz-drift auto linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes bz-drift{to{transform:translateY(calc(var(--depth) * 100vh))}}
}

@media (max-width:1199px){
  .bz-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bz-hero{grid-template-columns:minmax(0,1fr) minmax(400px,46%)}
  .bz-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bz-facts li:nth-child(odd){padding-left:0;border-left:0}
  .bz-facts li:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:899px){
  .bz-page .top{position:static}
  .bz-page .top .in{min-height:0;padding-block:6px;padding-left:max(var(--gutter-m),env(safe-area-inset-left,0px));padding-right:max(var(--gutter-m),env(safe-area-inset-right,0px))}
  .bz-in{padding-left:max(var(--gutter-m),env(safe-area-inset-left,0px));padding-right:max(var(--gutter-m),env(safe-area-inset-right,0px))}
  .bz-hero,.bz-s{margin-top:0}   /* the shared phone rule gives every section a top margin */
  .bz-hero{display:block;min-height:0}
  .bz-hero .bz-map{height:280px}
  .bz-hero .bz-plane{inset:0;animation:none!important;transform:none!important}
  .bz-sheet{border-left:0;border-top:1px solid var(--ink);padding:28px max(var(--gutter-m),env(safe-area-inset-right,0px)) 32px max(var(--gutter-m),env(safe-area-inset-left,0px))}
  .bz-facts{grid-template-columns:minmax(0,1fr)}
  .bz-facts li,.bz-facts li + li,.bz-facts li:nth-child(odd){padding:14px 0;border-left:0}
  .bz-facts li + li{border-top:1px solid var(--rule)}
  .bz-facts li:has(.big){display:grid;grid-template-columns:3.6em minmax(0,1fr);gap:8px;align-items:baseline}
  .bz-facts .big{margin:0}
  .bz .bz-s{padding-top:64px}
  .bz-hd{margin-bottom:28px}
  .bz-cards,.bz-cols,.bz-two,.bz-two.bz-wide-l,.bz-two.bz-wide-r,.bz-end > .bz-in{grid-template-columns:minmax(0,1fr)}
  .bz-cards{gap:16px}
  .bz-card .bz-view,.bz-col .bz-frame{height:220px}
  .bz-items.bz-2col,.bz-items.bz-3col{grid-template-columns:minmax(0,1fr)}
  .bz-bleed > img{height:320px;max-height:none;object-position:var(--op-m,30% 45%)}
  .bz-note{position:static;max-width:none;border-left:0;border-right:0;border-bottom:0;padding:20px max(var(--gutter-m),env(safe-area-inset-left,0px))}
  .bz-band{margin-top:56px;padding:44px 0}
  .bz .bz-band + .bz-s{padding-top:56px}
  .bz-sticky{position:static}
  .bz-shot.bz-tall .bz-frame{max-height:620px}
  .bz-tbl tbody th{width:auto}
  /* the comparison: one block per row, each cell under its own column name */
  .bz-scroll{overflow:visible}
  .bz-cmp{min-width:0;table-layout:auto}
  .bz-cmp colgroup,.bz-cmp thead{display:none}
  .bz-cmp,.bz-cmp tbody,.bz-cmp tr,.bz-cmp th,.bz-cmp td{display:block;width:auto;border:0;padding:0}
  .bz-cmp tr{padding:14px 0;border-bottom:1px solid var(--rule)}
  .bz-cmp tr.us{padding:14px 12px}
  .bz-cmp tbody th{font-size:var(--step-0);padding-bottom:6px}
  .bz-cmp td{padding:5px 0}
  .bz-cmp td.us,.bz-cmp th.us,.bz-cmp tr.us > *{padding-left:8px;padding-right:8px}
  .bz-cmp td::before{content:attr(data-l);display:block;font-weight:600;color:var(--ink);font-size:.92em}
  .bz-checks thead{display:none}
  .bz-checks,.bz-checks tbody{display:block}
  .bz-checks tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--rule)}
  .bz-checks th,.bz-checks td{border:0;padding:0;width:auto!important}
  .bz-checks tbody th{grid-column:1/-1}
  .bz-checks td.bar{grid-column:1/-1}
  .bz-checks td.v,.bz-checks td.t{text-align:left}
  .bz-checks td.v::before,.bz-checks td.t::before{content:attr(data-l) ": ";font-family:var(--f-body);color:var(--ink-2)}
  .bz-end{margin-top:56px;padding:0 0 32px;border-bottom:0}
  .bz-end .bz-map{position:relative;height:220px;border-bottom:1px solid var(--ink)}
  .bz-end > .bz-in{margin-top:24px}
  .bz-panel{padding:22px 18px 24px}
  .bz-faq .a{padding-right:0}
  .bz-plainhead{padding-block:40px 0}
  .bz-sources > li{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .bz-hero .bz-plane{animation:none!important;transform:none!important}
  .bz-rv{transition-duration:120ms!important}
  html.bz-mo .bz-rv:not(.on){transform:none}
  .bz-track .b{transition:none}
  html.bz-mo .bz-rv:not(.on) .bz-track .b{transform:none}
  .bz-btn:active,.bz-card:active{transform:none}
  .bz-card,.bz-btn,.bz-faq .pm,.bz-page .top{transition:none}
}

/* ---- phone and narrow windows ---- */
@media (max-width:899px){
  .page{padding:28px var(--gutter-m) 72px}
  .top .in{padding:6px var(--gutter-m)}
  .facts{grid-template-columns:1fr}
  .fact,.fact + .fact{padding:14px 0;border-left:0}
  .fact + .fact{border-top:1px solid var(--rule)}
  .grid,.areas{grid-template-columns:minmax(0,1fr)}
  .areas > div + div{margin-top:32px}
  section{margin-top:44px}
  .fifths td.bar{width:34%}
  .mosaic{max-height:none}
  .needs thead{display:none}
  .needs tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--rule)}
  .needs th,.needs td{border:0;padding:0}
  .needs td.n{padding:0;text-align:right}
  .needs td.w{grid-column:1/-1}
  .needs td.h{grid-column:1/-1;text-align:left;font-family:var(--f-body);color:var(--ink-2);white-space:normal}
  .needs td.h::before{content:attr(data-l) " "}
}
@media (max-width:599px){
  .lmenu .ln{display:none}
  .lmenu .lc{display:inline}
  .lmenu summary{padding:0 8px}
  .nav a{padding:0 7px;white-space:nowrap;min-width:44px;justify-content:center}   /* 'Villes' was 43 px wide (16 Oct) */
  .nav{margin-right:-8px}
  .nav .nmap{display:none}
  /* when brand and links do not fit on one row (most languages once 'For business' joined the menu, 16 Oct), the links
     take a second row under the logo instead of pushing the page sideways */
  .top .in{flex-wrap:wrap;row-gap:0}
  .nav{flex-wrap:wrap;margin-left:-7px}
  .rank td.nm,.rank th:nth-child(2){position:sticky;left:0;background:var(--paper)}
}
@media (max-width:379px){.nav a{padding:0 5px;min-width:44px;justify-content:center}.lmenu summary{padding:0 5px}}   /* "About" is 42 px wide at 5 px padding; 44 is the tap floor */

/* ---- reduced motion: no transitions, no press scale ---- */
@media (prefers-reduced-motion:reduce){
  a,.cta,.back,tbody tr,.nav a,.dmap path{transition:none}
  .cta:active,.back:active{transform:none}
}