/* Site styles, design B "Signal desk" (Mo, 2026-10-08; prototype prototypes/redesign/direction-b/).
   A deep ink-navy band carries the header, the page heads and the heroes (with a faint network motif); content sits on
   a cool off-white. One teal signal colour marks actions and live data; amber is kept for the single most urgent
   deadline and for paid labels. Headlines in Schibsted Grotesk, text in Public Sans, numbers in IBM Plex Mono (all
   self-hosted, OFL). No inline styles anywhere (strict CSP: style-src 'self').

   Sections: 1 fonts · 2 tokens · 3 base · 4 header and navigation · 5 page band · 6 content · 7 buttons and forms ·
   8 home, hubs and landing · 9 providers and comparisons · 10 lookup and check tools · 11 deadlines · 12 data and
   charts · 13 rules, letters, errors, app · 14 site forms · 15 footer · 16 motion, touch and print */

/* ---------- 1. fonts ---------- */
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 900; font-display: swap;
  src: url(/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap;
  src: url(/fonts/public-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; font-weight: 100 900; font-display: swap;
  src: url(/fonts/public-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

/* ---------- 2. tokens ---------- */
:root {
  /* page, surfaces, ink */
  --bg: #f7f8fa; --surface: #ffffff; --soft: #eef1f5;
  --fg: #0b1626; --muted: #44546a; --faint: #5f6f85; --line: #dde3ea; --line-2: #c7d0db;
  /* the navy band (header, page heads, heroes, trust band, footer) */
  --band: #0b1a2e; --band-2: #12263f; --band-fg: #e8eef6; --band-muted: #a9b8cc; --band-line: #22395a;
  --band-accent: #2dd4bf; --band-accent-ink: #04201c; --band-hot: #fbbf24;
  /* teal signal: links, actions, live data */
  --accent: #0f766e; --accent-strong: #0b5e57; --accent-fg: #ffffff; --accent-soft: #e3f4f1;
  /* amber: the most urgent deadline only (and paid labels below) */
  --signal: #d97706; --signal-text: #b45309; --signal-soft: #fdf3e1;
  /* states */
  --warn-bg: #fff4d6; --warn-line: #d9a93a; --ok-bg: #e5f5ea; --ok-line: #2f8a4f;
  --ad-bg: #fff6e0; --ad-fg: #7a4b00; --ad-line: #e2b766;
  --focus: #0d9488;
  --shadow: 0 1px 0 rgb(11 22 38 / .04), 0 12px 32px -12px rgb(11 22 38 / .18);
  --shadow-s: 0 1px 2px rgb(11 22 38 / .06), 0 4px 12px -4px rgb(11 22 38 / .1);
  /* type */
  --f-display: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* one radius for cards and panels, a smaller one for controls; spacing on an 8px grid */
  --radius: 8px; --radius-s: 6px; --max: 75rem; --measure: 44rem;
  --s1: .5rem; --s2: 1rem; --s3: 1.5rem; --s4: 2rem; --s5: 3rem; --s6: 4rem; --s7: 6rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #070e18; --surface: #0d1826; --soft: #132235;
    --fg: #e8eef6; --muted: #a9b8cc; --faint: #8fa1b8; --line: #1d2e44; --line-2: #2a3f5c;
    --band: #050b14; --band-2: #0c1828; --band-fg: #e8eef6; --band-muted: #a9b8cc; --band-line: #1a2c45;
    --accent: #2dd4bf; --accent-strong: #5eead4; --accent-fg: #04201c; --accent-soft: #0d2b2a;
    --signal: #fbbf24; --signal-text: #fbbf24; --signal-soft: #2a2110;
    --warn-bg: #3a2f10; --warn-line: #8a6d1d; --ok-bg: #11301e; --ok-line: #3fa36a;
    --ad-bg: #2a2110; --ad-fg: #f6c56b; --ad-line: #6b5320;
    --focus: #2dd4bf;
    --shadow: 0 1px 0 rgb(0 0 0 / .4), 0 12px 32px -12px rgb(0 0 0 / .6);
    --shadow-s: 0 1px 2px rgb(0 0 0 / .4), 0 6px 16px -6px rgb(0 0 0 / .5);
  }
}
/* chart palette (sitegen/charts.py, charts.js): series 1 is the teal signal; every chart has a table or CSV next to it */
:root { --viz-1: #0f766e; --viz-2: #d97706; --viz-3: #2563eb; --viz-4: #7c3aed; --viz-free: #2563eb;
  --viz-other: #b4bcc8; --viz-ci: #0b1626; --viz-base: #c7d0db; }
@media (prefers-color-scheme: dark) {
  :root { --viz-1: #2dd4bf; --viz-2: #f59e0b; --viz-3: #60a5fa; --viz-4: #a78bfa; --viz-free: #60a5fa;
    --viz-other: #4a5a70; --viz-ci: #e8eef6; --viz-base: #2a3f5c; }
}

/* ---------- 3. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1rem/1.62 var(--f-body); }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 45rem) { .wrap { padding-inline: 2rem; } }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px;
}
h1, h2, h3, h4 { font-family: var(--f-display); color: var(--fg); text-wrap: balance; letter-spacing: -.02em; hyphens: auto; overflow-wrap: break-word; }
h1 { font-size: clamp(1.85rem, 3.8vw, 2.6rem); line-height: 1.1; margin: 0 0 .8rem; font-weight: 750; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2.5rem 0 .75rem; line-height: 1.2; font-weight: 750; }
h3 { font-size: 1.15rem; margin: 1.5rem 0 .4rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
code, kbd, .mono { font-family: var(--f-mono); font-size: .92em; }
img { max-width: 100%; height: auto; }
.skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--accent-fg); padding: .5rem 1rem; z-index: 50; }
.skip:focus { left: .5rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.12rem; max-width: var(--measure); color: var(--muted); }
.eyebrow { font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
[hidden] { display: none !important; }  /* an element with its own display must still honour [hidden] */

/* ---------- 4. header and navigation ---------- */
.site-header { background: var(--band); color: var(--band-fg); position: sticky; top: 0; z-index: 30;
  border-bottom: 1px solid var(--band-line); --focus: var(--band-accent); }
.topbar { display: flex; align-items: center; gap: .75rem 1.5rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--band-fg); text-decoration: none;
  font: 750 1.12rem/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; }
.brand:hover { color: #fff; }
.logo { color: var(--band-fg); flex: none; }
.logo-pin { fill: var(--band-accent); }
.logo-pin-fold { stroke: var(--band-accent); }
.logo-sheet { fill: var(--band); }
.logo-line { stroke: var(--band-fg); }
.primary-nav { flex: 1; min-width: 0; }
.primary-nav > ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: .25rem; flex-wrap: nowrap; }
.primary-nav a, .nav-menu > summary { display: inline-flex; align-items: center; gap: .3rem; padding: .5rem .7rem;
  border-radius: var(--radius-s); color: var(--band-muted); text-decoration: none; font-weight: 600; font-size: .95rem;
  white-space: nowrap; cursor: pointer; list-style: none; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.primary-nav a:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { color: #fff; background: var(--band-2); }
.primary-nav a[aria-current], .nav-menu > summary.is-current { color: #fff; box-shadow: inset 0 -2px 0 var(--band-accent); }
.nav-menu { position: relative; }
.nav-menu[open] .chev { transform: rotate(180deg); }
.nav-menu-list { position: absolute; top: calc(100% + .6rem); left: -.5rem; width: 23rem; list-style: none; margin: 0;
  padding: .5rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 40; --focus: var(--accent); }
.nav-menu-list a { display: grid; grid-template-columns: 1.9rem 1fr; gap: .1rem .6rem; padding: .6rem .7rem;
  border-radius: var(--radius-s); color: var(--fg); white-space: normal; font-weight: 400; box-shadow: none; }
.nav-menu-list a:hover, .nav-menu-list a[aria-current] { background: var(--soft); color: var(--fg); }
.nav-menu-list .nm-n { grid-row: span 2; font: 500 .75rem/1.6 var(--f-mono); color: var(--accent); padding-top: .1rem; }
.nav-menu-list strong { font-weight: 650; }
.nav-menu-list small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.icon { flex: none; }
.header-tools { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.nav-providers { color: var(--band-fg); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap;
  border: 1px solid var(--band-line); border-radius: var(--radius-s); padding: .4rem .8rem; }
.nav-providers:hover, .nav-providers[aria-current] { color: #fff; border-color: var(--band-muted); }
/* "Log in": only while the plans are on (site_nav.login); filled so it reads as the account entry point. Phones use
   the menu's copy of the link. */
.nav-login { color: var(--band-accent-ink); background: var(--band-accent); text-decoration: none; font-weight: 600;
  font-size: .9rem; white-space: nowrap; border-radius: var(--radius-s); padding: .4rem .8rem; }
.nav-login:hover, .nav-login[aria-current] { filter: brightness(1.08); }
@media (max-width: 40rem) { .nav-login { display: none; } }
.icon-btn, .picker > summary, .menu-toggle > summary { display: inline-flex; align-items: center; gap: .35rem;
  color: var(--band-fg); text-decoration: none; padding: .45rem .55rem; border-radius: var(--radius-s); cursor: pointer;
  font-weight: 600; font-size: .9rem; list-style: none; border: 1px solid var(--band-line); background: transparent; }
.icon-btn:hover, .picker > summary:hover, .menu-toggle > summary:hover { background: var(--band-2); color: #fff; }
.picker > summary::-webkit-details-marker, .menu-toggle > summary::-webkit-details-marker { display: none; }
.picker { position: relative; }
.chev { width: 14px; height: 14px; opacity: .7; }
.picker[open] .chev { transform: rotate(180deg); }
.picker-menu { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 13rem; list-style: none; margin: 0;
  padding: .35rem; background: var(--surface); color: var(--fg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); z-index: 40; --focus: var(--accent); }
.picker-menu a, .picker-menu span[aria-current] { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem .6rem;
  border-radius: var(--radius-s); text-decoration: none; color: var(--fg); }
.picker-menu a:hover { background: var(--soft); }
.picker-menu [aria-current] { font-weight: 700; background: var(--accent-soft); }
.picker-menu small { color: var(--muted); font-weight: 400; }
/* language menu: as wide as its longest entry ("Norsk bokmål  forside" on untranslated pages), never wrapped */
.picker-lang .picker-menu { width: max-content; }
.picker-lang .picker-menu a { white-space: nowrap; }
/* country picker: region groups, a compact grid of data-only countries, a link to the overview. Items stay on one
   line (Mo, 2026-10-07): the menu grows to its content, up to the viewport minus the gutters. */
.picker-countries { width: max-content; min-width: 16rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 5rem);
  max-height: calc(100dvh - 5rem); overflow-y: auto; overscroll-behavior: contain; }
.picker-countries ul { list-style: none; margin: 0 0 .25rem; padding: 0; }
.picker-countries a { white-space: nowrap; align-items: baseline; }
.picker-countries .pk-name { min-width: 0; }
.picker-countries .lang-tag { flex: none; }
.picker-heading { margin: .55rem .6rem .15rem; font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); }
.picker-heading:first-child { margin-top: .25rem; }
.picker-grid { display: grid; grid-template-columns: repeat(2, minmax(max-content, 1fr)); gap: 0 .15rem; }
.picker-grid a { font-size: .9rem; padding: .35rem .6rem; }
.picker-all { margin: .3rem 0 0; padding-top: .3rem; border-top: 1px solid var(--line); }
.picker-countries .picker-all a { color: var(--accent-strong); font-weight: 600; }
.menu-toggle { display: none; }
.menu-word { font-size: .88rem; }
.mobile-menu { position: fixed; left: 0; right: 0; top: 3.75rem; max-height: calc(100vh - 3.75rem); max-height: calc(100dvh - 3.75rem);
  overflow-y: auto; background: var(--band-2); border-top: 1px solid var(--band-line); padding: .5rem 1rem 1.25rem;
  box-shadow: var(--shadow); }
.mobile-menu ul { list-style: none; margin: 0; padding: 0; }
.mobile-menu a { display: block; padding: .75rem .25rem; border-bottom: 1px solid var(--band-line); color: var(--band-fg); text-decoration: none; }
.mobile-menu a:hover, .mobile-menu a[aria-current] { color: #fff; }
.mobile-menu a[aria-current] strong { box-shadow: inset 0 -2px 0 var(--band-accent); }
.mobile-menu strong { font-weight: 650; }
.mobile-menu small { display: block; color: var(--band-muted); font-size: .85rem; }
.mm-heading { margin: 1rem .25rem .25rem; font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--band-accent); }
.mm-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.mm-tools a { padding: .6rem .25rem; font-size: .95rem; }
.mm-providers { margin: 1rem 0 0; }
.mm-providers a { border: 1px solid var(--band-line); border-radius: var(--radius-s); padding: .7rem .8rem; }
@media (max-width: 80rem) { .picker:not(.picker-lang) .picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 70rem) { .nav-providers { display: none; } .primary-nav a, .nav-menu > summary { padding-inline: .55rem; } }
@media (max-width: 62rem) {
  .primary-nav { display: none; }
  .menu-toggle { display: block; }
  .topbar { min-height: 3.75rem; gap: .5rem; }
  .picker-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 48rem) {
  .brand { font-size: 1rem; gap: .45rem; }
  .logo { width: 26px; height: 26px; }
  .search-btn { display: none; }
  .header-tools { gap: .3rem; }
  .picker > summary, .menu-toggle > summary { padding: .45rem; }
  .picker .chev { display: none; }
  .picker-menu { position: fixed; left: 1rem; right: 1rem; top: 3.9rem; min-width: 0; }
  .picker-countries { width: auto; min-width: 0; max-width: none; max-height: calc(100vh - 4.8rem); max-height: calc(100dvh - 4.8rem); }
  .picker-lang .picker-menu { width: auto; }
  .picker-countries a { white-space: normal; }
  .picker-countries .pk-name { flex: 1 1 auto; overflow-wrap: anywhere; }
  .picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 26rem) { .menu-word { display: none; } }
@media (max-width: 22rem) { .brand span { display: none; } }

/* ---------- 5. page band: breadcrumbs and page head on navy ---------- */
/* Interior pages: the breadcrumbs and the page head sit inside .wrap, and paint the band edge to edge with a clipped
   border-image outset (ink overflow only: no 100vw, no horizontal scroll, no seams). */
.crumbs { font-size: .85rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .55rem; }
.crumbs li + li::before { content: "/"; color: var(--line-2); margin-right: .55rem; }
.crumbs-top, .page-head { color: var(--band-fg); border-image: conic-gradient(var(--band) 0 0) fill 0 / 0 / 0 100vmax; }
@media (prefers-color-scheme: dark) {  /* the band is only a shade darker than the page at night: give it an edge */
  .page-head { border-image: linear-gradient(var(--band) calc(100% - 1px), var(--band-line) 0) fill 0 / 0 / 0 100vmax; }
  .band, .trustband { border-bottom: 1px solid var(--band-line); }
  .site-footer { border-top: 1px solid var(--band-line); }
}
.crumbs-top { padding-top: 1.1rem; padding-bottom: .1rem; --focus: var(--band-accent); }
.crumbs-top, .crumbs-top a, .crumbs-band, .crumbs-band a { color: var(--band-muted); }
.crumbs-top a:hover, .crumbs-band a:hover { color: #fff; }
.crumbs-top li + li::before, .crumbs-band li + li::before { color: var(--band-line); }
.crumbs-top [aria-current] { color: var(--band-fg); }
.page-head { display: grid; gap: 1.25rem 2rem; padding: .9rem 0 2.25rem; margin-bottom: 2rem; --focus: var(--band-accent); }
.page-head > * { min-width: 0; }  /* grid items: a long single word in a title wraps instead of widening the page */
.page-head h1 { overflow-wrap: anywhere; }
.crumbs-top + main .page-head, .crumbs-top + main article > .page-head:first-child { padding-top: .6rem; }
main > .page-head:first-child, main > article > .page-head:first-child, main > section > .page-head:first-child { margin-top: 0; }
.page-head h1 { color: #fff; margin: 0; max-width: 32ch; font-size: clamp(1.85rem, 4.4vw, 2.9rem); line-height: 1.08; }
.page-head h1 code { color: var(--band-accent); font-size: .8em; }
.page-head a { color: var(--band-accent); }
.page-head .tag, .page-head .cc { background: var(--band-2); border-color: var(--band-line); color: var(--band-fg); }
.page-head .tag-fatal { color: var(--band-hot); }
.page-head .tag-full { color: var(--band-accent); }
.page-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .6rem; font: 500 .78rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--band-accent); }
@media (min-width: 62rem) { .page-head.has-aside { grid-template-columns: minmax(0, 1fr) 19rem; align-items: end; } }
/* the countdown card in a band (page heads of provider lists and comparisons, country hubs) */
.band-cd { background: var(--band-2); border: 1px solid var(--band-line); border-radius: var(--radius); padding: 1rem 1.25rem 1.1rem; color: var(--band-fg); }
.band-cd p { margin: 0; }
.band-cd-k { font: 500 .72rem/1.3 var(--f-mono); color: var(--band-muted); text-transform: uppercase; letter-spacing: .06em; }
.band-cd .next-count { font: 500 clamp(2rem, 4vw, 2.75rem)/1.1 var(--f-mono); color: var(--band-hot); letter-spacing: -.04em; margin-top: .3rem; }
.band-cd .next-count.is-live { color: var(--band-accent); font-size: 1.6rem; }
.band-cd .next-date { font: 500 .85rem var(--f-mono); color: var(--band-muted); }
.band-cd .next-title { margin-top: .35rem; font-size: .92rem; color: var(--band-fg); }
.band-cd-ids { margin-top: .8rem !important; padding-top: .7rem; border-top: 1px solid var(--band-line); font-size: .85rem; color: var(--band-muted);
  display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.band-cd-ids strong { font: 500 1.05rem var(--f-mono); color: #fff; }
.next-link { display: inline-flex; align-items: center; gap: .3rem; margin-top: .9rem; font-weight: 650; color: var(--band-accent); }
.next-link:hover { color: #fff; }

/* ---------- 6. content ---------- */
main { padding-bottom: 4rem; min-height: 50vh; overflow-wrap: break-word; }  /* long URNs/URLs wrap instead of widening phones */
main.wrap > :first-child:not(.page-head):not(article):not(section) { margin-top: 1.5rem; }
.prose > :where(p, ul, ol, h1, h2, h3, h4, blockquote, dl) { max-width: var(--measure); }
.prose { font-size: 1.02rem; }
.prose li + li { margin-top: .25rem; }
.prose blockquote { margin: 1.2rem 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); }
.prose > table { position: relative; border-collapse: collapse; margin: 1.2rem 0; display: block; overflow-x: auto; max-width: 100%; width: fit-content;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.prose > table th, .prose > table td { border-bottom: 1px solid var(--line); padding: .55rem .8rem; text-align: left; vertical-align: top; }
.prose > table thead th { background: var(--soft); font: 500 .74rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.prose > table tbody tr:last-child > * { border-bottom: 0; }
.ta-left { text-align: left !important; } .ta-right { text-align: right !important; } .ta-center { text-align: center !important; }
sup.ref a { text-decoration: none; font-size: .75em; }
.sources { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.1rem; margin-top: .5rem; }
.sources ol, .sources ul { padding-left: 1.4rem; font-size: .88rem; color: var(--muted); }
.sources li:target { background: var(--warn-bg); }
.updated { font: 400 .8rem var(--f-mono); margin-top: 1.5rem; color: var(--faint); }
.notice { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: .75rem 1rem; border-radius: var(--radius-s); max-width: var(--measure); }
.notice-warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice-ok { background: var(--ok-bg); border-color: var(--ok-line); }
mark.placeholder { background: var(--warn-bg); color: var(--fg); border: 1px dashed var(--warn-line); padding: 0 .2rem; border-radius: 3px; }
/* data tables */
.table-wrap { position: relative; overflow-x: auto;  /* relative: keeps absolutely positioned labels (.visually-hidden) inside the scroller */ margin: 1rem 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap > table { width: 100%; }
table.data { border-collapse: collapse; width: 100%; font-size: .925rem; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: .7rem .85rem; border-bottom: 1px solid var(--line); }
table.data tbody tr:last-child > * { border-bottom: 0; }
table.data thead th { background: var(--soft); font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); vertical-align: bottom; min-width: 5rem; }
table.data tbody th { font-weight: 650; }
table.data tbody th a:not(.correct-link) { color: var(--fg); text-decoration: none; font-family: var(--f-display); font-size: 1.02rem; }
table.data tbody th a:not(.correct-link):hover { color: var(--accent); text-decoration: underline; }
table.data tbody th .small { font-weight: 400; }
table.data td { font-variant-numeric: tabular-nums; }
tr[hidden] { display: none; }
meter { width: 6rem; vertical-align: middle; }
details.table-details > summary { cursor: pointer; color: var(--accent); font-weight: 600; margin: .4rem 0; }
@media (max-width: 40rem) {
  .prose > table, table.data { font-size: .84rem; }
  .prose > table th, .prose > table td, table.data th, table.data td { padding: .45rem .55rem; }
  .prose > table td, .prose > table th { min-width: 7rem; }
}
/* cards and link groups */
.cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; background: var(--surface); }
.card h3 { margin-top: .1rem; }
.card ul { padding-left: 1.1rem; margin: .3rem 0; }
.groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .5rem 2.5rem; }
.link-group h2 { font-size: 1rem; margin: 1rem 0 .4rem; font-family: var(--f-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.link-group ul { padding-left: 0; list-style: none; margin: 0; border-top: 1px solid var(--line-2); }
.link-group li { padding: .45rem 0; border-bottom: 1px solid var(--line); }
.link-group a { text-decoration: none; color: var(--fg); }
.link-group a:hover { color: var(--accent); text-decoration: underline; }
.lang-choice { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; font-size: 1.15rem; }
.lang-tag { font: 500 .68rem var(--f-mono); color: var(--faint); letter-spacing: .04em; }
.tag { font: 500 .72rem/1.4 var(--f-mono); border-radius: 4px; padding: .05rem .4rem; background: var(--soft); border: 1px solid var(--line); color: var(--muted); }
.tag-list_added, .tag-list_returned { background: var(--ok-bg); border-color: var(--ok-line); color: var(--fg); }
.tag-list_removed { background: var(--warn-bg); border-color: var(--warn-line); color: var(--fg); }
.changelog-day ul { padding-left: 1.1rem; }
.pill { display: inline-block; font: 500 .75rem var(--f-mono); padding: .2rem .55rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-strong); border: 1px solid transparent; }
.cc, .cc-mono { display: inline-block; font: 500 .72rem/1 var(--f-mono); letter-spacing: .04em; }
.cc { padding: .25rem .35rem; border-radius: 4px; background: var(--soft); color: var(--muted); border: 1px solid var(--line); vertical-align: .15em; }
.cc-band { background: transparent; color: var(--band-accent); border-color: var(--band-line); font-size: .9rem; vertical-align: .35em; }
.cc-mono { color: var(--accent); }
/* money labels: always visible, never subtle */
.ad-label, .featured-label { display: inline-block; font: 500 .7rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  background: var(--ad-bg); color: var(--ad-fg); border: 1px solid var(--ad-line); border-radius: 4px; padding: .02rem .4rem; vertical-align: middle; }
.featured { border: 1px solid var(--ad-line); border-left: 4px solid var(--ad-fg); border-radius: var(--radius); padding: .2rem 1rem 1rem; margin: 1rem 0; background: var(--ad-bg); }
.claim { margin-top: -.4rem; }
.product-card { margin: 1rem 0; max-width: 34rem; }
.product-card .product-card-name { font-size: 1.15rem; margin: .1rem 0 .4rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }

/* ---------- 7. buttons and forms ---------- */
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1rem 0 1.5rem; box-shadow: var(--shadow-s); }
label { display: block; font-weight: 600; margin-bottom: .3rem; }
label.choice, label.inline, .inline { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; margin-right: 1rem; }
input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=month], select, textarea {
  font: inherit; color: var(--fg); background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-s);
  padding: .65rem .8rem; max-width: 100%; min-height: 2.75rem; }
input[type=text]:focus, input[type=search]:focus, input[type=email]:focus, input[type=url]:focus, input[type=number]:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=number] { width: 7rem; }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
button, .btn { font: 650 .95rem/1.2 var(--f-body); background: var(--accent); color: var(--accent-fg); border: 1px solid transparent; border-radius: var(--radius-s);
  padding: .7rem 1.15rem; min-height: 2.75rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
button:hover, .btn:hover { background: var(--accent-strong); color: var(--accent-fg); }
.btn-ghost, button[type=reset] { background: transparent; color: var(--fg); border: 1px solid var(--line-2); }
.btn-ghost:hover, button[type=reset]:hover { background: var(--soft); color: var(--fg); border-color: var(--accent); }
.btn-band { background: var(--band-accent); color: var(--band-accent-ink); }
.btn-band:hover { background: #5eead4; color: var(--band-accent-ink); }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); margin: 0 0 .8rem; padding: .75rem 1rem; }
fieldset > legend { float: left; width: 100%; padding: 0; margin-bottom: .5rem; font-weight: 650; }  /* long questions wrap */
fieldset > legend + * { clear: both; }
.stack > * + * { margin-top: .6rem; }
.status:empty { display: none; }
.status { margin: .8rem 0; }
.result { margin-top: 1rem; }
.result dl, dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.2rem; margin: 0; }
dl dt { font-weight: 600; } dl dd { margin: 0; overflow-wrap: anywhere; }
.result .error { color: inherit; background: var(--warn-bg); border-left: 4px solid var(--warn-line); padding: .6rem .9rem; border-radius: var(--radius-s); }
@media (max-width: 40rem) { .result dl, dl.facts { grid-template-columns: 1fr; } dl dd { margin-bottom: .4rem; } }
.turnstile-placeholder { border: 1px dashed var(--line-2); padding: .5rem; border-radius: var(--radius-s); width: 100%; }
/* segmented control (persona switch, needs picker, chart toggles): a tray with the chosen option raised */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--soft); border-radius: var(--radius); max-width: 100%; }
.seg button { background: transparent; color: var(--muted); border: 0; border-radius: var(--radius-s); padding: .5rem .9rem; min-height: 2.4rem; font-weight: 650; font-size: .9rem; }
.seg button:hover { background: var(--surface); color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--fg); box-shadow: 0 1px 3px rgb(11 22 38 / .15), inset 0 0 0 1px var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .2rem 0 .6rem; }
.chips-label { font-size: .82rem; color: var(--muted); margin-right: .1rem; }
.chips-label:not(:first-child) { margin-left: .6rem; }
.chip { font: 500 .82rem/1 var(--f-mono); background: var(--surface); color: var(--fg); border: 1px solid var(--line-2); border-radius: 999px; padding: .45rem .75rem; min-height: 0; }
.chip:hover { background: var(--accent-soft); color: var(--fg); border-color: var(--accent); }

/* ---------- 8. home, hubs and landing ---------- */
/* the band with the network motif (home, hubs, root) */
.band { background: var(--band); color: var(--band-fg); position: relative; overflow: hidden; isolation: isolate; --focus: var(--band-accent); }
.band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(56rem 32rem at 85% 10%, rgb(45 212 191 / .1), transparent 60%); }
.motif { position: absolute; right: -7.5rem; top: 1.5rem; width: 47.5rem; height: 35rem; z-index: -1; color: var(--band-line); opacity: .9; pointer-events: none; }
@media (max-width: 45rem) { .motif { right: -22rem; opacity: .5; } }
.band a { color: var(--band-fg); }
.hero-grid { display: grid; gap: 2.5rem 3.5rem; padding-block: 3.5rem 3.5rem; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; padding-block: 5rem 4rem; } }
.hero-copy { min-width: 0; }
.kicker { margin: 0 0 1.25rem; font: 500 .8rem/1.3 var(--f-mono); color: var(--band-accent); letter-spacing: .05em; text-transform: uppercase;
  display: flex; gap: .6rem; align-items: center; }
.kicker::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--band-accent); box-shadow: 0 0 0 4px rgb(45 212 191 / .2); }
.hero-band h1 { color: #fff; font-size: clamp(2.2rem, 5.6vw, 3.75rem); line-height: 1.04; margin: 0; max-width: 18ch; letter-spacing: -.025em; }
.hero-country h1 { max-width: 24ch; font-size: clamp(2rem, 4.8vw, 3.1rem); }
.hero-sub { color: var(--band-muted); font-size: clamp(1.02rem, 1.6vw, 1.2rem); max-width: 36em; margin: 1.25rem 0 0; }
.hero-sub p { margin: 0 0 .6rem; }
.hero-sub a { color: var(--band-fg); }
.hero-lookup { margin-top: 2rem; max-width: 38rem; }
.hero-lookup-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.hero-lookup input[type=text] { flex: 1 1 15rem; min-width: 0; min-height: 3.25rem; font: 500 1.05rem/1.2 var(--f-mono); padding: 0 1rem;
  background: var(--band-2); color: #fff; border: 1px solid var(--band-line); border-radius: var(--radius-s); }
.hero-lookup input[type=text]::placeholder { color: var(--band-muted); }
.hero-lookup input[type=text]:focus { border-color: var(--band-accent); outline: 2px solid var(--band-accent); outline-offset: 0; }
.hero-lookup button { min-height: 3.25rem; padding: 0 1.5rem; font-size: 1.02rem; }
.hero-note { margin: .6rem 0 0; font-size: .85rem; color: var(--band-muted); }
.hero-compare { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.hero-compare p { margin: 0; font-size: .9rem; color: var(--band-muted); }
.hero-compare ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.hero-compare a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .3rem .8rem; border: 1px solid var(--band-line);
  border-radius: var(--radius-s); text-decoration: none; font-weight: 600; font-size: .9rem; }
.hero-compare a:hover { border-color: var(--band-muted); background: var(--band-2); color: #fff; }
.hero-compare .cc-mono { color: var(--band-accent); }
/* number tiles */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--band-line); border: 1px solid var(--band-line);
  border-radius: var(--radius); overflow: hidden; align-self: end; }
.tile { background: var(--band-2); padding: 1rem 1.25rem 1.25rem; display: grid; gap: .25rem; min-width: 0; align-content: start; }
.tile-k { font: 500 .72rem/1.3 var(--f-mono); color: var(--band-muted); text-transform: uppercase; letter-spacing: .05em; }
.tile strong { font: 500 clamp(1.5rem, 3vw, 2.2rem)/1.1 var(--f-mono); color: #fff; letter-spacing: -.03em; overflow-wrap: anywhere; }
.tile-d { font-size: .8rem; color: var(--band-muted); }
.tile-next .next-count { color: var(--band-hot); font-size: clamp(1.35rem, 2.4vw, 1.8rem); }
.tile .live-ago { margin: 0; color: var(--band-muted); font-size: .7rem; }
.tile-next .tile-d { line-height: 1.35; }
.tile-next .next-title { color: var(--band-fg); }
.tiles-foot { grid-column: 1 / -1; background: var(--band-2); margin: 0; padding: .65rem 1.25rem; font-size: .78rem; color: var(--band-muted); }
.tiles-foot a { color: var(--band-accent); }
/* deadline ticker under the band */
.ticker { background: var(--band-2); border-top: 1px solid var(--band-line); color: var(--band-fg); }
.ticker ul { list-style: none; margin: 0 auto; display: flex; gap: 2rem; overflow-x: auto; scrollbar-width: none; padding-block: .75rem; }
.ticker ul::-webkit-scrollbar { display: none; }
.tick { flex: none; display: flex; gap: .6rem; align-items: baseline; font-size: .88rem; color: var(--band-muted); white-space: nowrap; }
.tick b { font: 500 .95rem var(--f-mono); color: #fff; }
.tick.is-next b { color: var(--band-hot); }
.tick .cc-mono, .tick-date { color: var(--band-accent); font: 500 .75rem var(--f-mono); }
/* sections */
.home > .section, .section { padding-block: 4rem; }
@media (min-width: 62rem) { .section { padding-block: 5.5rem; } }
.section-alt { background: var(--surface); border-block: 1px solid var(--line); }
.head2 { display: grid; gap: 1rem; margin-bottom: 2.5rem; }
@media (min-width: 62rem) { .head2 { grid-template-columns: 1fr 1fr; align-items: end; } }
.head2 h2 { margin: 0; font-size: clamp(1.65rem, 3.4vw, 2.4rem); line-height: 1.08; }
.head2 > p { margin: 0; color: var(--muted); font-size: 1.1rem; }
.label { display: block; margin: 0 0 .5rem; font: 500 .8rem/1.3 var(--f-mono); color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.section-title { margin: 0 0 1rem; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-head .section-title { margin: 0; }
.home > section:not(.section):not(.trustband), .hub-sections > section { margin-top: 3rem; }
/* six questions as numbered rows */
.q-rows { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line-2); }
@media (min-width: 52rem) { .q-rows { grid-template-columns: 1fr 1fr; column-gap: 3rem; } }
.q-rows li { border-bottom: 1px solid var(--line-2); }
.q-row { display: grid; grid-template-columns: 2.75rem 1fr auto; gap: .2rem 1rem; align-items: start; padding: 1.5rem 0; text-decoration: none; color: var(--fg); height: 100%; }
.q-n { font: 500 .85rem var(--f-mono); color: var(--faint); padding-top: .3rem; }
.q-title { font: 750 1.3rem/1.25 var(--f-display); letter-spacing: -.015em; }
.q-text { grid-column: 2; color: var(--muted); }
.q-tool { grid-column: 2; font: 500 .8rem var(--f-mono); color: var(--accent); margin-top: .2rem; }
.q-arrow { grid-row: 1; grid-column: 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center;
  color: var(--fg); transition: background .15s, color .15s, border-color .15s; }
.q-arrow .icon { width: 16px; height: 16px; }
.q-row:hover { color: var(--fg); }
.q-row:hover .q-arrow { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.q-row:hover .q-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* countries: a time axis over the country strip */
.tl-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.section-alt .tl-panel { background: var(--bg); }
.axis { display: none; }
@media (min-width: 52rem) {
  /* Labels stack above the line in rows (build.py: axr-0..3, the axis grows with axis-rows-N); dots sit on the line,
     a stem joins a raised label to its dot. "Today" and the years sit below the line. */
  .axis { display: block; position: relative; height: 6rem; margin: 0 2rem; border-bottom: 1px solid var(--line); }
  .axis.axis-rows-2 { height: 7.1rem; } .axis.axis-rows-3 { height: 8.2rem; } .axis.axis-rows-4 { height: 9.3rem; }
  .axis-line { position: absolute; left: 0; right: 0; bottom: 2.75rem; height: 2px; background: var(--line-2); }
  .axis-now { position: absolute; left: 0; bottom: 1.5rem; font: 500 .7rem var(--f-mono); color: var(--accent); }
  .axis-now::before { content: ""; position: absolute; left: 0; top: -.9rem; width: 2px; height: .9rem; background: var(--accent); }
  .axis-m { position: absolute; bottom: calc(2.75rem - 5px); transform: translateX(-50%); font: 500 .7rem/1.2 var(--f-mono); color: var(--muted); white-space: nowrap; text-align: center; }
  .axis-m::after { content: ""; display: block; width: 12px; height: 12px; border-radius: 50%; margin: .55rem auto 0; background: var(--surface); border: 2px solid var(--fg); }
  .axis-m::before { content: ""; position: absolute; left: 50%; bottom: 12px; width: 1px; height: 0; background: var(--line-2); }
  .axis-m.axr-1::after { margin-top: 1.65rem; } .axis-m.axr-1::before { height: 1.1rem; }
  .axis-m.axr-2::after { margin-top: 2.75rem; } .axis-m.axr-2::before { height: 2.2rem; }
  .axis-m.axr-3::after { margin-top: 3.85rem; } .axis-m.axr-3::before { height: 3.3rem; }
  .axis-m.is-start { transform: translateX(-6px); text-align: left; }
  .axis-m.is-start::after { margin-left: 0; } .axis-m.is-start::before { left: 6px; }
  .axis-m.is-end { transform: translateX(calc(-100% + 6px)); text-align: right; }
  .axis-m.is-end::after { margin-right: 0; margin-left: auto; } .axis-m.is-end::before { left: auto; right: 6px; }
  .axis-m.is-hot { color: var(--signal-text); }
  .axis-m.is-hot::after { background: var(--signal); border-color: var(--signal); }
  .axis-yr { position: absolute; bottom: .8rem; transform: translateX(-50%); font: 500 .7rem var(--f-mono); color: var(--faint); }
  .axis-yr::before { content: ""; display: block; width: 1px; height: .55rem; margin: -.8rem auto .25rem; background: var(--line-2); }
}
/* positions on the axis, 2% steps (build.py home_extras) */
.ax-0 { left: 0; } .ax-2 { left: 2%; } .ax-4 { left: 4%; } .ax-6 { left: 6%; } .ax-8 { left: 8%; } .ax-10 { left: 10%; }
.ax-12 { left: 12%; } .ax-14 { left: 14%; } .ax-16 { left: 16%; } .ax-18 { left: 18%; } .ax-20 { left: 20%; } .ax-22 { left: 22%; }
.ax-24 { left: 24%; } .ax-26 { left: 26%; } .ax-28 { left: 28%; } .ax-30 { left: 30%; } .ax-32 { left: 32%; } .ax-34 { left: 34%; }
.ax-36 { left: 36%; } .ax-38 { left: 38%; } .ax-40 { left: 40%; } .ax-42 { left: 42%; } .ax-44 { left: 44%; } .ax-46 { left: 46%; }
.ax-48 { left: 48%; } .ax-50 { left: 50%; } .ax-52 { left: 52%; } .ax-54 { left: 54%; } .ax-56 { left: 56%; } .ax-58 { left: 58%; }
.ax-60 { left: 60%; } .ax-62 { left: 62%; } .ax-64 { left: 64%; } .ax-66 { left: 66%; } .ax-68 { left: 68%; } .ax-70 { left: 70%; }
.ax-72 { left: 72%; } .ax-74 { left: 74%; } .ax-76 { left: 76%; } .ax-78 { left: 78%; } .ax-80 { left: 80%; } .ax-82 { left: 82%; }
.ax-84 { left: 84%; } .ax-86 { left: 86%; } .ax-88 { left: 88%; } .ax-90 { left: 90%; } .ax-92 { left: 92%; } .ax-94 { left: 94%; }
.ax-96 { left: 96%; } .ax-98 { left: 98%; } .ax-100 { left: 100%; }
.clist { list-style: none; margin: 0; padding: 0; display: grid; }
@media (min-width: 52rem) { .clist { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.c-card { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); text-decoration: none; color: var(--fg); height: 100%; }
.clist li:first-child .c-card { border-top: 0; }
@media (min-width: 52rem) {
  .c-card { grid-template-columns: 1fr; border-top: 0; border-left: 1px solid var(--line); padding: 1.5rem 1.25rem; align-content: start; }
  .clist li:first-child .c-card { border-left: 0; }
}
.c-card:hover { background: var(--soft); color: var(--fg); }
.c-name { font: 700 1.1rem/1.25 var(--f-display); }
.c-name small { font: 500 .72rem var(--f-mono); color: var(--faint); margin-left: .3rem; }
.c-days { font: 500 1.75rem/1 var(--f-mono); letter-spacing: -.04em; grid-row: span 2; grid-column: 2; align-self: center; text-align: right; }
@media (min-width: 52rem) { .c-days { grid-row: auto; grid-column: auto; text-align: left; margin: .5rem 0 .25rem; } }
.c-card.is-hot .c-days { color: var(--signal-text); }
.c-card.is-live .c-days { font-size: 1.1rem; color: var(--accent); }
.c-what { font-size: .88rem; color: var(--muted); }
.c-date { white-space: nowrap; }
.tl-foot { margin: 0; padding: .7rem 1.25rem; font-size: .85rem; border-top: 1px solid var(--line); background: var(--soft); }
.tl-foot a { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; }
/* three steps, joined by a dotted line */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; position: relative; }
@media (min-width: 56rem) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; }
  .flow::before { content: ""; position: absolute; left: 1.4rem; right: 1.4rem; top: 1.375rem; height: 2px;
    background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 14px); }
}
.fstep { position: relative; display: grid; gap: .4rem; align-content: start; }
.fstep-dot { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--band); color: var(--band-accent); display: grid; place-items: center;
  font: 500 .95rem var(--f-mono); position: relative; z-index: 1; }
.fstep h3 { font-size: 1.45rem; margin: .5rem 0 0; }
.fstep-time { font: 500 .8rem var(--f-mono); color: var(--accent); }
.fstep p { margin: 0; color: var(--muted); }
/* trust band */
.trustband { background: var(--band); color: var(--band-fg); padding-block: 4rem; --focus: var(--band-accent); }
@media (min-width: 62rem) { .trustband { padding-block: 5.5rem; } }
.trustband h2, .trustband h3 { color: #fff; }
.trustband .label { color: var(--band-accent); }
.trust-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 56rem) { .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-grid h3 { font-size: 1.1rem; margin: 0; }
.trust-grid p, .money-box p { color: var(--band-muted); font-size: .95rem; margin: .4rem 0 0; }
.trustband a { color: var(--band-accent); }
.money-box { margin-top: 3rem; border: 1px solid var(--band-line); border-radius: var(--radius); padding: 1.5rem; display: grid; gap: .5rem 1.5rem; background: var(--band-2); }
@media (min-width: 56rem) { .money-box { grid-template-columns: 15rem 1fr; } }
.money-box h3 { margin: 0; font-size: 1.05rem; }
.money-box p { margin: 0; }
/* FAQ */
.faq { display: grid; gap: .5rem; }
@media (min-width: 56rem) { .faq { grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 1.5rem; font-weight: 650; display: flex; justify-content: space-between; gap: 1rem; min-height: 2.75rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 500 1.25rem/1 var(--f-mono); color: var(--accent); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 1.5rem 1.25rem; color: var(--muted); }
/* tool cards (country hubs, root, 404) */
.tool-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.tool-card { position: relative; display: grid; gap: .35rem; align-content: start; height: 100%; padding: 1.25rem 1.25rem 2.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--fg);
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.tool-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--fg); }
.tool-card strong { font: 700 1.08rem/1.25 var(--f-display); }
.tool-desc { color: var(--muted); font-size: .9rem; }
.tool-icon { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-s);
  background: var(--band); color: var(--band-accent); margin-bottom: .35rem; }
.tool-go { position: absolute; left: 1.25rem; bottom: 1rem; color: var(--accent); }
@media (max-width: 48rem) {
  .tool-cards { gap: .6rem; }
  .tool-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .85rem; row-gap: .1rem; padding: .9rem 2.6rem .9rem .9rem; align-items: center; }
  .tool-card .tool-icon { grid-row: 1 / span 2; margin: 0; }
  .tool-go { left: auto; right: .9rem; bottom: auto; top: 50%; transform: translateY(-50%); }
}
/* panels and data at a glance */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }
.panel-head h3 { margin: 0; }
.glance-grid { display: grid; grid-template-columns: minmax(14rem, 1fr) minmax(0, 3fr); gap: 1rem; }
.glance-grid + .glance-grid { margin-top: 1rem; }
@media (max-width: 48rem) { .glance-grid { grid-template-columns: 1fr; } }
.stat-panel p { margin: 0; }
.hero-number { font: 500 clamp(2rem, 4vw, 2.75rem)/1.05 var(--f-mono); letter-spacing: -.04em; margin: .4rem 0 .3rem !important; }
.stat-gap { margin-top: 1.2rem !important; }
.panel .viz { margin: 0; }
.mini-charts { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 52rem) { .mini-charts { grid-template-columns: 1fr; } }
.mini-charts .viz { margin: .8rem 0 .6rem; }
.mini-charts .viz-caption { font-size: .85rem; color: var(--muted); font-weight: 600; }
.mini-charts .viz-row { grid-template-columns: minmax(5rem, 9.5rem) 1fr 3.6rem; }
.see-all { margin: 1.25rem 0 0; }
.hub-body { margin-top: 3rem; }
.home-about .prose h2 { font-size: 1.25rem; }
/* root page "/": brand hero and one card per language */
.root-hero .wrap { padding-block: 3.5rem 3.75rem; }
.root-brand { display: flex; align-items: center; gap: .8rem; }
.root-brand .logo { width: clamp(2.6rem, 5vw, 3.4rem); height: auto; flex: none; }
.root { padding-block: 2.5rem 3rem; display: grid; gap: 3rem; }
.root .section-title { margin-bottom: .4rem; }
.root .muted { margin: 0 0 1rem; }
.lang-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.lang-card { position: relative; display: grid; gap: .45rem; align-content: start; height: 100%; padding: 1.15rem 1.25rem 2.75rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--fg); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s; }
.lang-card:hover { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-1px); color: var(--fg); }
.lang-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.lang-card-name { font: 700 1.2rem/1.2 var(--f-display); }
.lang-card-code { font: 500 .75rem var(--f-mono); color: var(--faint); letter-spacing: .05em; }
.lang-card-desc { color: var(--muted); font-size: .92rem; }
.lang-card-countries { display: flex; flex-wrap: wrap; gap: .3rem; }
.lang-card-badge { justify-self: start; font: 500 .7rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em;
  background: var(--accent-soft); color: var(--accent-strong); border-radius: 4px; padding: .1rem .45rem; }
.lang-card.is-suggested { border: 2px solid var(--accent); }
@media (max-width: 40rem) {
  .lang-cards { gap: .6rem; }
  .lang-card { padding: .95rem 2.6rem .95rem 1rem; }
  .lang-card .tool-go { left: auto; right: .9rem; bottom: auto; top: 50%; transform: translateY(-50%); }
}

/* ---------- 9. providers and comparisons ---------- */
/* "How we earn money" line above every list (hard rule 6) */
.list-disclosure { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--muted); margin: 0 0 1rem; max-width: 60rem; }
.list-disclosure::before { content: "i"; flex: 0 0 1.25rem; height: 1.25rem; margin-top: .1rem; border-radius: 50%; border: 1.5px solid var(--faint);
  display: grid; place-items: center; font: 600 .72rem/1 var(--f-mono); color: var(--faint); }
.list-disclosure a { white-space: nowrap; }
.checked-on { font: 400 .76rem var(--f-mono); color: var(--faint); }
.checked-on a, .cmp-checked a { color: inherit; }
.correct-link { font-size: .8rem; color: var(--faint); text-decoration: underline dotted; text-underline-offset: 3px; }
.correct-link:hover, .correct-link:focus-visible { color: var(--accent); }
/* filters */
.filters fieldset { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; background: var(--surface); min-width: 0; max-width: 100%; }
.filters .inline { flex-wrap: wrap; max-width: 100%; }
.list-filter input { max-width: 20rem; }
/* provider tables: the price column carries a teal tint; on phones each row becomes a card */
table[data-stack] .col-price { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); font-family: var(--f-mono); font-size: .9rem; min-width: 9.5rem; }
table[data-stack] .col-price .checked-on { display: inline-block; margin-top: .2rem; }
@media (max-width: 56rem) {
  .table-wrap:has(> table[data-stack]) { background: transparent; border: 0; overflow: visible; }
  table[data-stack] thead { position: absolute; left: -9999px; }
  table[data-stack], table[data-stack] tbody, table[data-stack] tr, table[data-stack] th, table[data-stack] td { display: block; width: 100%; }
  table[data-stack] tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; overflow: hidden; }
  table[data-stack] tr[hidden] { display: none; }
  table[data-stack] tbody th { padding: 1rem 1rem .5rem; border: 0; }
  /* label on the left, any mix of text and inline elements on the right. The label floats into the left padding
     (net width 0, so the value's lines aren't shortened) and flow-root makes the row as tall as the taller of the
     two: a label that wraps to 3 lines next to a 1-line value no longer runs into the next row (Mo, Oman, 10 Oct). */
  table[data-stack] td { display: flow-root; position: relative; border: 0; padding: .45rem 1rem .45rem calc(1rem + 9.5rem); min-height: 2.2rem; overflow-wrap: anywhere; }
  table[data-stack] td::before { content: attr(data-label); float: left; margin: .1rem .75rem 0 -9.5rem; width: 8.75rem;
    font: 500 .68rem/1.45 var(--f-mono); text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
  table[data-stack] td.is-empty { display: none; }
  table[data-stack] td:last-child { padding-bottom: 1rem; }
  table[data-stack] .col-price { background: var(--accent-soft); }
}
/* Featured slot (_macros.html featured_slot; lookup.js featuredSlot). Paid: amber edge and the paid label. No buyer:
   our own "advertise here" filler, a quiet dashed box with a neutral label. Never inside a list. */
.fslot { margin: 1.5rem 0; padding: 1rem 1.25rem; border-radius: var(--radius); background: var(--surface); }
.fslot-paid { border: 1px solid var(--ad-line); border-left: 4px solid var(--ad-fg); background: var(--ad-bg); }
.fslot-head { margin: 0 0 .6rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .6rem; }
.fslot-note { color: var(--muted); font-size: .85rem; }
.fslot-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fslot-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.fslot-main { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fslot-name { font: 700 1.05rem var(--f-display); overflow-wrap: anywhere; }
.fslot-meta { color: var(--muted); font-size: .85rem; }
.fslot-go { text-decoration: none; }
.fslot-house { border: 1px dashed var(--line-2); background: transparent; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .4rem 1rem; }
.house-label { display: inline-block; font: 500 .7rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); border: 1px solid var(--line-2); background: var(--surface); border-radius: 4px; padding: .02rem .4rem; }
.fslot-pitch { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.fslot-pitch strong { display: block; margin-bottom: .1rem; }
.fslot-cta { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; font-weight: 650; white-space: nowrap; }
.fslot-cta .icon { width: 1rem; height: 1rem; }
@media (max-width: 40rem) { .fslot-house { grid-template-columns: 1fr; justify-items: start; gap: .35rem; } }
/* comparison helper (compare.js): needs picker, cards, price ladder, side by side, tray */
.compare { margin: 1.25rem 0 2rem; }
.cmp-picker { display: grid; gap: .9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem 1.4rem; }
.cmp-q { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.cmp-q-label { font: 500 .74rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); min-width: 9rem; }
@media (max-width: 40rem) { .cmp-q-label { min-width: 0; width: 100%; } }
.cmp-who-note { margin: -.2rem 0 .6rem; }
.cmp-count { font-weight: 650; margin: 1.25rem 0 .6rem; }
.cmp-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.cmp-others { grid-column: 1 / -1; margin: 1rem 0 0; color: var(--muted); font-size: 1rem; }
.cmp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: .5rem; align-content: start; }
.cmp-card.is-match { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.cmp-card:not(.is-match) { opacity: .8; }
.cmp-card-head { display: flex; justify-content: space-between; gap: .6rem; align-items: start; }
.cmp-card h3 { margin: 0; font-size: 1.08rem; }
.cmp-card h3 a { color: var(--fg); text-decoration: none; }
.cmp-card h3 a:hover { color: var(--accent); }
.cmp-pick { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0; white-space: nowrap; }
.cmp-price { margin: 0; font-size: .9rem; }
.cmp-price strong { font: 500 1.4rem/1.1 var(--f-mono); letter-spacing: -.03em; }
.cmp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; }
.cmp-tag { font: 500 .72rem/1.4 var(--f-mono); padding: .12rem .45rem; border-radius: 4px; background: var(--soft); color: var(--muted); }
.cmp-tag.is-free { background: var(--accent-soft); color: var(--accent-strong); }
.cmp-tag.is-free::before { content: "\2713\00a0"; }
.cmp-tag.is-none { color: var(--faint); }
.cmp-tag.is-suits { background: var(--accent-soft); color: var(--accent-strong); box-shadow: inset 0 0 0 1px var(--accent); }
.cmp-meta, .cmp-net { margin: 0; font-size: .84rem; color: var(--muted); }
.cmp-links { margin: .2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; font-size: .9rem; }
.cmp-links .correct-link { margin-left: auto; }
.cmp-checked { font: 400 .76rem var(--f-mono); color: var(--faint); margin: .35rem 0 0; }
.cmp-limits { margin: 0; font-size: .82rem; color: var(--muted); border-left: 3px solid var(--accent); padding-left: .55rem; }
.cmp-ladder { margin: 0 0 1rem; }
.cmp-ladder h3 { margin: 0 0 .6rem; font-size: 1rem; }
.cmp-side { margin: 0 0 1rem; }
.cmp-side h3 { margin: 0 0 .4rem; font-size: 1rem; }
.cmp-table td.is-best { background: var(--accent-soft); font-weight: 650; }
.cmp-table-btn { margin-top: 1rem; }
.cmp-tray { position: sticky; bottom: .8rem; z-index: 15; display: flex; gap: .5rem; justify-content: center; padding: .6rem;
  margin-top: 1rem; background: var(--band); border-radius: var(--radius); box-shadow: var(--shadow); }
.cmp-tray .btn-ghost { color: var(--band-fg); border-color: var(--band-line); }
.cmp-tray .btn-ghost:hover { background: var(--band-2); }
.cmp-tray button[disabled] { opacity: .55; cursor: not-allowed; }
@media (max-width: 40rem) { .cmp-links .correct-link { margin-left: 0; flex-basis: 100%; } .list-disclosure a { white-space: normal; } }
/* product pages: back to the comparison */
.back-link { margin: 0 0 .6rem; }
.back-link a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-weight: 600; text-decoration: none; }
.back-link a:hover span { text-decoration: underline; }
.icon-flip { transform: scaleX(-1); }

/* ---------- 10. lookup and check tools ---------- */
.lookup-form { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-start; }
.lookup-form .field > input, .lookup-form .field > select, .lookup-form .field > button { height: 2.9rem; }
.label-spacer { display: block; font-weight: 600; margin-bottom: .3rem; }
@media (max-width: 40rem) { .label-spacer { display: none; } }
.lookup-form .grow { flex: 1 1 18rem; position: relative; }
.lookup-form .grow input { width: 100%; font-family: var(--f-mono); }
.assist-hint { margin: .35rem 0 0; font-size: .86rem; color: var(--muted); min-height: 1.2em; }
.assist-hint.is-ok { color: var(--ok-line); }
.assist-hint.is-warn { color: var(--ad-fg); }
.assist-try { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% - 1.4rem); z-index: 20; list-style: none; margin: 0; padding: .3rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); box-shadow: var(--shadow); max-height: 22rem; overflow-y: auto; }
.suggest-item { display: grid; gap: .1rem; padding: .5rem .6rem; border-radius: var(--radius-s); cursor: pointer; }
.suggest-item:hover, .suggest-item[aria-selected="true"] { background: var(--accent-soft); }
.suggest-name { font-weight: 600; }
.suggest-meta { font: .82rem/1.3 var(--f-mono); color: var(--muted); }
.suggest-empty, .suggest-source { padding: .5rem .6rem; font-size: .82rem; color: var(--muted); }
.suggest-source { border-top: 1px solid var(--line); margin-top: .2rem; }
.lookup-error { margin: .5rem 0 0; padding: .55rem .8rem; border: 1px solid var(--line); border-left: 4px solid var(--warn-line);
  border-radius: var(--radius-s); background: var(--surface); }
.lookup-error p { margin: 0; color: var(--ad-fg); font-weight: 600; }
#lookup-id[aria-invalid="true"] { border-color: var(--warn-line); }
#lookup-result { scroll-margin-top: 5rem; }
.lookup-answer { border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius);
  background: var(--surface); padding: 1.1rem 1.25rem; display: grid; gap: .6rem; box-shadow: var(--shadow-s); }
.lookup-answer.is-ok { border-left-color: var(--ok-line); }
.lookup-answer.is-warn, .lookup-answer.is-bad { border-left-color: var(--warn-line); }
.lookup-answer p { margin: 0; }
.lookup-verdict { font: 700 1.2rem/1.35 var(--f-display); }
.lookup-answer.is-bad .lookup-verdict { color: var(--ad-fg); }
.lookup-rank { color: var(--muted); }
.lookup-warn { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius-s); padding: .5rem .7rem; }
.lookup-next { color: var(--fg); }
.lookup-sub { font-size: .95rem; margin: .3rem 0 0; }
.lookup-docs { margin: 0; padding-left: 1.2rem; display: grid; gap: .15rem; }
.lookup-tech summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.lookup-tech dl { margin: .3rem 0 0; }
.lookup-tech dd { overflow-wrap: anywhere; }
.lookup-provider { color: var(--muted); }
.lookup-provider strong { color: var(--fg); }
.lookup-featured { border-top: 1px solid var(--line); padding-top: .6rem; }
.lookup-featured-q { font-weight: 650; margin: 0 0 .45rem; }
.lookup-featured .fslot { margin: 0; }
.lookup-share { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; margin: .9rem 0 .2rem; }
.lookup-share .small { flex: 1 1 14rem; }
@media (max-width: 40rem) {
  .lookup-form > .field { flex: 1 1 100%; }
  .lookup-form > .field > select, .lookup-form > .field > button { width: 100%; }
  .lookup-share .share-btn { width: 100%; }
}
/* "Will my invoice arrive?" (lookup.js) */
.arrival-controls { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; margin: .8rem 0; }
.arrival-controls.is-primary { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.seg-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.seg-field > legend { font: 500 .74rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: .4rem; }
.arrival-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.chk { position: relative; padding-left: 1.7rem; }
.chk::before { position: absolute; left: 0; top: .05rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; display: grid;
  place-items: center; font: 700 .75rem/1 var(--f-body); }
.chk-ok::before { content: "\2713"; background: var(--ok-bg); color: var(--ok-line); border: 1px solid var(--ok-line); }
.chk-warn::before { content: "!"; background: var(--warn-bg); color: var(--ad-fg); border: 1px solid var(--warn-line); }
.chk-fail::before { content: "\2715"; background: var(--warn-bg); color: var(--ad-fg); border: 1px solid var(--ad-fg); }
.chk-info::before { content: "i"; background: var(--accent-soft); color: var(--accent-strong); border: 1px solid var(--accent); }
.arrival-address { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .6rem .75rem;
  background: var(--soft); border-radius: var(--radius-s); }
.arrival-address code { font: 600 .95rem var(--f-mono); overflow-wrap: anywhere; }
.copy-btn { min-height: 2.25rem; padding: .25rem .7rem; }
.arrival-fallback { border-top: 1px solid var(--line); padding-top: .6rem; }
.arrival-fallback h4 { margin: 0 0 .3rem; font-size: .95rem; }
.arrival-fallback p { margin: 0 0 .3rem; }
.outcomes { margin-top: 1rem; }
.outcomes li { margin-bottom: .8rem; }
.outcomes p { margin: .2rem 0; }
.viewer-root { min-height: 12rem; }
/* bulk check, UAE TRN helper, ID schemes */
.check-links { margin: .25rem 0 0; }
.bulk-form { display: grid; gap: .8rem; }
.bulk-form textarea { width: 100%; min-height: 9rem; font-family: var(--f-mono); font-size: .9rem; }
.bulk-row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.bulk-row input[type=file] { max-width: 100%; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.bulk-table { border-collapse: collapse; font-size: .9rem; }
.bulk-table th, .bulk-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bulk-table thead th { font: 500 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: var(--soft); }
.bulk-table td:first-child { font-family: var(--f-mono); white-space: nowrap; }
.bulk-table td:nth-child(2) { font-weight: 600; }
.bulk-yes td:nth-child(2) { color: var(--ok-line); }
.bulk-warn td:nth-child(2) { color: var(--signal-text); }
.bulk-no td:nth-child(2), .bulk-muted td { color: var(--muted); }
.bulk-table code, .scheme-table code { font-size: .82rem; word-break: break-all; }
.trn-helper { margin: 2rem 0 1rem; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 5rem; }
.trn-helper h2 { margin-top: 0; font-size: 1.15rem; }
.trn-form { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; }
.trn-form .grow { flex: 1 1 14rem; }
.trn-out:empty { display: none; }
.trn-out { margin-top: .8rem; }
.trn-result code { font-size: 1.05rem; font-weight: 600; margin-left: .3rem; color: var(--accent-strong); }
.trn-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.trn-error, .trn-warn { padding: .5rem .75rem; background: var(--warn-bg); border-left: 4px solid var(--warn-line); border-radius: var(--radius-s); }
.scheme-table { border-collapse: collapse; font-size: .88rem; }
.scheme-table th, .scheme-table td { padding: .5rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.scheme-table thead th { white-space: nowrap; font: 500 .72rem var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); background: var(--soft); }
.scheme-table tbody th { white-space: nowrap; font-weight: 600; background: var(--soft); }
.scheme-table tbody + tbody { border-top: 2px solid var(--line-2); }
.scheme-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scheme-table .is-removed td { color: var(--muted); }
.scheme-format code { white-space: nowrap; }
@media (max-width: 40rem) {
  .bulk-table th:nth-child(5), .bulk-table td:nth-child(5) { display: none; }
  .scheme-table tbody th { white-space: normal; }
}

/* ---------- 11. deadlines: timeline, countdowns, checker, embeds ---------- */
.timeline-block { margin: 2rem 0; }
.timeline { list-style: none; margin: .75rem 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line-2); max-width: 54rem; }
.tl-item { position: relative; display: grid; grid-template-columns: 7.5rem 9rem 1fr; gap: .1rem 1rem; padding: .55rem .7rem; border-radius: var(--radius-s); }
.tl-item::before { content: ""; position: absolute; left: calc(-1.1rem - 7px); top: .95rem; width: 12px; height: 12px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--fg); }
.tl-past::before { border-color: var(--line-2); background: var(--line-2); }
.tl-past .tl-date, .tl-past .tl-countdown, .tl-past .tl-what { color: var(--muted); }
.tl-next { background: var(--signal-soft); }
.tl-next::before { background: var(--signal); border-color: var(--signal); }
.tl-date { font: 500 .85rem/1.6 var(--f-mono); white-space: nowrap; }
.tl-countdown { font: 500 .9rem/1.6 var(--f-mono); }
.tl-next .tl-countdown { font-weight: 500; color: var(--signal-text); }
.tl-sources a { text-decoration: none; }
.tag-planned { background: var(--warn-bg); border-color: var(--warn-line); }
.tl-ics a { white-space: nowrap; }
.embed-code { margin-top: .6rem; }
.embed-code pre { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem;
  overflow-x: auto; font-size: .8rem; max-width: 54rem; }
.embed-code pre code { white-space: pre-wrap; overflow-wrap: anywhere; }
.feed-links { margin-top: -.4rem; }
@media (max-width: 40rem) { .tl-item { grid-template-columns: 1fr; } .tl-countdown { font-size: .875rem; } }
.checker-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.checker-links p { margin: 0; font-weight: 600; }
.checker-links ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.checker-links a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .3rem .85rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-s); background: var(--surface); text-decoration: none; font-weight: 600; }
.checker-links a:hover { border-color: var(--accent); }
.deadline-notes { margin-top: .8rem; }
/* legacy dashboard date cards (still used by content blocks) */
.date-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.date-card { display: grid; gap: .25rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.date-card.is-next { border-color: var(--signal); box-shadow: inset 0 3px 0 var(--signal); }
.date-count { font: 500 1.3rem/1.1 var(--f-mono); }
.date-card.is-next .date-count { color: var(--signal-text); }
.date-day { font: 500 .8rem var(--f-mono); color: var(--faint); }
.date-what { font-size: .92rem; }

/* ---------- 12. data and charts ---------- */
.viz { position: relative; margin: 1rem 0 1.25rem; }
.viz-caption { font-weight: 650; margin-bottom: .5rem; }
.viz-rows { list-style: none; margin: 0; padding: 0; }
.viz-row { display: grid; grid-template-columns: minmax(6rem, 13rem) 1fr 4.2rem; gap: .6rem; align-items: center; min-height: 1.6rem; }
.viz-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.viz-value { font: 400 .85rem var(--f-mono); text-align: right; color: var(--fg); }
.viz-track { width: 100%; height: 1.1rem; overflow: visible; }
.viz-mark { fill: var(--viz-1); }
.viz-mark.viz-other { fill: var(--viz-other); }
.viz-mark.viz-free { fill: var(--viz-free); }
.viz-s1 { fill: var(--viz-1); background: var(--viz-1); }
.viz-s2 { fill: var(--viz-2); background: var(--viz-2); }
.viz-s3 { fill: var(--viz-3); background: var(--viz-3); }
.viz-s4 { fill: var(--viz-4); background: var(--viz-4); }
.viz-ci { stroke: var(--viz-ci); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: .7; }
.viz-base { stroke: var(--viz-base); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.viz-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 .5rem; padding: 0; font-size: .85rem; color: var(--muted); }
.viz-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .35rem; vertical-align: -.05rem; }
.viz-colwrap { position: relative; padding-top: 1.1rem; }
.viz-max { position: absolute; top: 0; left: 0; font: 400 .75rem var(--f-mono); color: var(--faint); }
.viz-plot { width: 100%; height: 8rem; display: block; }
.viz-xaxis { display: flex; justify-content: space-between; font: 400 .75rem var(--f-mono); color: var(--faint); }
.viz-note { font-size: .85rem; color: var(--muted); }
@media (max-width: 40rem) { .viz-row { grid-template-columns: minmax(5rem, 8rem) 1fr 3.6rem; gap: .4rem; } }
/* long provider names wrap to two lines instead of being cut (full name stays in the title attribute) */
.viz-bars .viz-label { white-space: normal; overflow-wrap: anywhere; line-height: 1.2; display: -webkit-box;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.viz-bars .viz-row + .viz-row { margin-top: .2rem; }
/* chart tooltips (charts.js): one tip per chart; rows and the column plot take keyboard focus */
.viz-tip { position: absolute; z-index: 5; max-width: min(22rem, 100%); padding: .4rem .65rem; border-radius: var(--radius-s);
  background: var(--band); color: var(--band-fg); border: 1px solid var(--band-line); box-shadow: var(--shadow);
  font-size: .85rem; line-height: 1.35; pointer-events: none; font-variant-numeric: tabular-nums; }
.viz-tip[hidden] { display: none; }
.viz-row[tabindex] { cursor: pointer; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.viz-row[tabindex]:focus-visible, .viz-colwrap[tabindex]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.viz-row.is-active { background: var(--soft); }
.viz-bars .viz-row.is-active .viz-mark:not(.viz-other) { fill: var(--accent-strong); }
.viz-colwrap[tabindex] { cursor: crosshair; touch-action: pan-y; border-radius: 4px; -webkit-tap-highlight-color: transparent; }
.viz-cols .viz-mark.is-active { fill: var(--viz-2); }
/* statistics page: country and period toggles above the daily chart */
.viz-controls { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; margin: 1rem 0 .3rem; }
.viz-controls[hidden] { display: none; }
.viz-control { display: grid; gap: .35rem; min-width: 0; }
.viz-control-label { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
@media (max-width: 40rem) {
  .viz-controls { gap: .7rem; }
  .viz-control .seg { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .viz-control .seg button { flex: none; }
}
/* number tiles on data pages */
/* hairlines drawn by each tile (not by the grid background), so a part-filled last row leaves blank space, not a grey block */
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0; margin: 1rem 0; padding: 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat-tile { background: transparent; padding: .9rem 1.1rem 1rem; min-width: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.stat-tile-total { grid-column: 1 / -1; }  /* the growth block's "All countries" sum: its own row above the countries */
.stat-tile .stat-label { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.stat-tile .stat-value { font: 500 1.65rem/1.2 var(--f-mono); letter-spacing: -.03em; margin: .2rem 0; }
.stat-tile .stat-note { font-size: .8rem; color: var(--muted); overflow-wrap: anywhere; }
.press-figures .stat-note:empty { display: none; }
.live-ago { margin: .3rem 0 0; color: var(--faint); font: 400 .78rem var(--f-mono); }
.stat-tiles + .live-ago { margin: -.4rem 0 .8rem; }
/* market-share report jump bar */
.report-jump { margin: .4rem 0 1.2rem; }
.report-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.report-jump a { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line-2); border-radius: var(--radius-s);
  background: var(--surface); font-size: .9rem; font-weight: 600; text-decoration: none; }
.report-jump a:hover, .report-jump a:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.report h3[id] { scroll-margin-top: 5rem; }
.data-links { margin-top: .2rem; }
/* countries overview table (_blocks.html countries_overview; sortable by table-sort.js) */
.overview-table caption { caption-side: top; text-align: left; font-weight: 650; padding: .75rem .85rem .5rem; }
.overview-table .region-row th { background: var(--soft); font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); padding: .55rem .85rem .4rem; }
.overview-table .num { text-align: right; white-space: nowrap; font-family: var(--f-mono); font-size: .88rem; }
.overview-table tbody th[scope="row"] { min-width: 8.5rem; }
.overview-table .ov-name { display: block; font-weight: 650; }
.overview-table .tag { display: inline-block; margin-top: .25rem; white-space: nowrap; }
.overview-table td .ov-top { display: block; overflow-wrap: anywhere; }
.overview-table td .ov-share { color: var(--muted); font-variant-numeric: tabular-nums; }
.tag-full { background: var(--ok-bg); border-color: var(--ok-line); color: var(--fg); }
.tag-data { background: var(--accent-soft); border-color: var(--line); color: var(--accent-strong); }
.tag-low { background: var(--warn-bg); border-color: var(--warn-line); color: var(--fg); }
.overview-table th .sort-btn { background: none; color: inherit; border: 0; border-radius: 4px; padding: 0; margin: 0; min-height: 0;
  font: inherit; white-space: nowrap; display: inline-flex; align-items: center; gap: .3rem; cursor: pointer; text-align: inherit; }
.overview-table th .sort-btn { text-transform: inherit; letter-spacing: inherit; }
.overview-table thead .num { font: inherit; }
.overview-table th .sort-btn:hover { background: none; color: var(--accent-strong); }
.overview-table th .sort-btn::after { content: "\2195"; opacity: .45; font-size: .9em; }
.overview-table th[aria-sort="ascending"] .sort-btn::after { content: "\2191"; opacity: 1; }
.overview-table th[aria-sort="descending"] .sort-btn::after { content: "\2193"; opacity: 1; }
.overview p.small { max-width: var(--measure); }
@media (max-width: 40rem) {
  .overview-table .col-month { display: none; }
  .overview-table tbody th[scope="row"] { min-width: 6.5rem; }
  .overview-table thead th, .overview-table th .sort-btn { white-space: normal; }
  .overview-table thead th { font-size: .66rem; vertical-align: bottom; hyphens: auto; -webkit-hyphens: auto; }
  .overview-table .num { white-space: normal; }
  .overview-table td .ov-top { font-size: .82rem; line-height: 1.25; }
  .overview-table .tag { font-size: .66rem; white-space: normal; }
  .overview-table th, .overview-table td { padding-left: .35rem; padding-right: .35rem; }
  .overview-table th .sort-btn { gap: .15rem; }
}
/* per-country data pages and the totals page */
.data-eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 .2rem; }
.data-eyebrow .tag { text-transform: none; letter-spacing: 0; font-size: .78rem; }
.data-page > section { margin-top: 2.5rem; }
.data-method { padding-left: 1.2rem; max-width: var(--measure); }
.data-method li + li { margin-top: .3rem; }
.data-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.data-tools { max-width: 28rem; margin-bottom: 1rem; }
.licence-note { margin-top: .5rem; }
.totals-table caption { text-align: left; font-weight: 650; padding: .75rem .85rem .4rem; }
.totals-table th[scope=row] { font-weight: 650; }
.totals-table td.num, .totals-table th.num { text-align: right; font-family: var(--f-mono); font-size: .88rem; white-space: nowrap; }

/* ---------- 13. rules, letters, errors, app ---------- */
.rule-list { list-style: none; padding: 0; margin: .5rem 0 1.5rem; display: grid; gap: .4rem; }
.rule-list a { display: flex; gap: .8rem; align-items: baseline; padding: .65rem .85rem; min-height: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; }
.rule-list a:hover { border-color: var(--accent); }
.rule-list code { font: 500 .88em var(--f-mono); color: var(--accent-strong); white-space: nowrap; }
.rule-list span { color: var(--fg); }
.rule-page h1 { overflow-wrap: anywhere; }
.rule-page .eyebrow .tag { text-transform: none; letter-spacing: 0; font-size: .78rem; white-space: nowrap; }
.tag-fatal { background: var(--warn-bg); color: var(--ad-fg); border-color: var(--warn-line); }
.rule-terms code { font: 500 .85rem var(--f-mono); background: var(--soft); padding: .1rem .35rem; border-radius: 4px; }
.rule-next { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
@media (max-width: 40rem) { .rule-list a { flex-direction: column; gap: .15rem; } }
/* letter kit (tool-letters.html, letters.js) */
.letters-form { display: grid; gap: .9rem; }
.letters-grid { display: grid; gap: .7rem 1rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.letters-grid .field input, .letters-grid .field select { width: 100%; }
.letter-pick { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.letter-choice { justify-content: flex-start; text-align: left; background: var(--surface); color: var(--fg); border: 1px solid var(--line-2);
  border-radius: var(--radius-s); padding: .65rem .85rem; min-height: 2.75rem; font-weight: 600; font-size: .9rem; }
.letter-choice:hover { border-color: var(--accent); background: var(--surface); color: var(--fg); }
.letter-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); box-shadow: inset 3px 0 0 var(--accent); }
.letter-out { display: grid; gap: .6rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.letter-out input, .letter-out textarea { width: 100%; font: .95rem/1.5 var(--f-body); background: var(--soft); }
.letter-out textarea { min-height: 16rem; resize: vertical; }
.letter-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
/* error pages: the same message in the other site languages */
.error-langs { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .5rem; color: var(--muted); font-size: .92rem; }
.error-langs strong { color: var(--fg); }
/* installable app: install box, offline and /open/ pages */
.app-install { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
  margin: 1rem 0; padding: .9rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); background: var(--surface); }
.app-install[hidden] { display: none; }
.app-install p { margin: 0; }
.app-install-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.app-offline, .app-open { margin: 0 0 2rem; }
.app-offline > p, .app-open > p, .app-open-list { max-width: 40rem; }
.app-offline-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.app-open-list { padding-left: 1.2rem; }
.app-open-list li { margin: .35rem 0; }
@media (display-mode: standalone) { .app-install { display: none; } }
/* Pagefind UI picks up the site colours (light and dark) */
.search-ui { --pagefind-ui-primary: var(--accent); --pagefind-ui-text: var(--fg); --pagefind-ui-background: var(--surface);
  --pagefind-ui-border: var(--line-2); --pagefind-ui-tag: var(--soft); --pagefind-ui-font: inherit; --pagefind-ui-border-radius: 8px; }

/* ---------- 14. site forms: privacy request, report a problem ---------- */
form.js-form input[type=text], form.js-form input[type=email], form.js-form input[type=url], form.js-form textarea { display: block; width: 100%; }
form.js-form textarea { resize: vertical; min-height: 7rem; }
form.js-form fieldset label.choice { display: flex; margin: .35rem 0; }
form.js-form button[type=submit] { margin-top: 1rem; }
form.js-form button[disabled] { opacity: .6; cursor: progress; }
/* Status line under the form (form.js sets data-state). Sending: a small spinner. Sent: a green card whose check mark
   pops in. Failed or refused: an amber card. Motion is off for reduced-motion visitors (section 16). */
.status[data-state] { display: flex; align-items: flex-start; gap: .7rem; margin: 1rem 0 .2rem; padding: .85rem 1rem;
  border-radius: var(--radius); line-height: 1.5; }
.status[data-state]::before { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  font-weight: 700; line-height: 1; }
.status[data-state=sending] { padding-inline: 0; color: var(--muted); align-items: center; }
.status[data-state=sending]::before { content: ""; width: 1.1rem; height: 1.1rem; border: 2px solid var(--line-2);
  border-top-color: var(--accent); animation: form-spin .7s linear infinite; }
.status[data-state=ok] { background: var(--ok-bg); border: 1px solid var(--ok-line); border-left-width: 4px; animation: form-in .35s ease-out both; }
.status[data-state=ok]::before { content: "\2713"; background: var(--ok-line); color: #fff; animation: form-pop .45s .1s ease-out both; }
.status[data-state=error], .status[data-state=warn] { background: var(--warn-bg); border: 1px solid var(--warn-line); border-left-width: 4px; animation: form-in .3s ease-out both; }
.status[data-state=error]::before, .status[data-state=warn]::before { content: "!"; background: var(--warn-line); color: var(--fg); }
@keyframes form-spin { to { transform: rotate(360deg); } }
@keyframes form-in { from { opacity: 0; transform: translateY(.5rem); } to { opacity: 1; transform: none; } }
@keyframes form-pop { 0% { transform: scale(0); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } }
/* Tool feedback (account page, lookup, bulk check, viewer): a submit button that is waiting (aria-busy, set by the
   page's script together with disabled) is dimmed and, for visitors who have not asked for less motion, shows a spinner.
   A status line that says what is happening gets data-state="sending" (spinner, above) and, once the wait passes ~3 s,
   a second line (.status-slow). A fresh answer fades in (opacity only, 200 ms). Nothing here moves the layout. */
button[aria-busy=true] { opacity: .6; cursor: progress; }
.status-line, .status-slow { display: block; }
.status-slow { color: var(--muted); font-size: .92em; }
.btn-retry { display: block; margin-top: .5rem; min-height: 2.25rem; padding: .25rem .9rem; }
@keyframes acct-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  button[aria-busy=true]::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .55em; vertical-align: -.1em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: form-spin .7s linear infinite; }
  .result > .lookup-answer, .lookup-error:not([hidden]), #bulk-out:not([hidden]) { animation: acct-fade .2s ease-out both; }
  .status-slow { animation: acct-fade .3s ease-out both; }
}

/* ---------- 15. footer ---------- */
.site-footer { background: var(--band); color: var(--band-muted); padding: 3.5rem 0 2.5rem; font-size: .9rem; --focus: var(--band-accent); }
.site-footer a { color: var(--band-muted); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 2rem; border-bottom: 1px solid var(--band-line); }
.foot-grid > :first-child { grid-column: 1 / -1; }
@media (min-width: 56rem) { .foot-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } .foot-grid > :first-child { grid-column: auto; } }
/* with the plans' column (only while plans are on) the footer has 5 columns instead of 4 */
@media (min-width: 56rem) { .foot-grid:has(#ft-account) { grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; } }
.foot-about p { margin: .6rem 0 0; max-width: 24rem; }
.footer-brand { margin: 0 !important; }
.brand-footer { font-size: 1.05rem; color: #fff !important; }
.brand-footer .logo { width: 26px; height: 26px; }
.footer-report a { color: var(--band-accent); font-weight: 650; }
.foot-h { margin: 0 0 .75rem; font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .07em; color: #fff; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.site-footer .disclosure { max-width: 56rem; margin: 1.5rem 0 .5rem; }
.site-footer .disclosure a, .legal-row a { color: var(--band-fg); text-decoration: underline; }
.legal-row { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--band-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 2rem; }
.legal-row p { margin: 0; }
.site-footer mark.placeholder { background: rgb(246 197 107 / .16); color: #f6c56b; border: 0; }

/* ---------- 16. motion, touch and print ---------- */
/* --- live data + transitions (A1) --- */
/* Cross-document view transitions: pages cross-fade, the sticky header stays put. Opt-in only when the visitor has
   not asked for reduced motion (the global reduced-motion rule does not reach the ::view-transition pseudo-elements). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-group(site-header), ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
  .tool-card:hover, .lang-card:hover { transform: none; }
}
/* 44px tap targets on touch screens */
@media (pointer: coarse) {
  .picker > summary, .menu-toggle > summary, .icon-btn { min-width: 2.75rem; min-height: 2.75rem; justify-content: center; }
  .chip, .seg button { min-height: 2.75rem; padding-inline: .9rem; }
  .cmp-pick, label.choice { min-height: 2.75rem; }
  .cmp-pick input, label.choice input { width: 1.25rem; height: 1.25rem; }
  .next-link, .section-head .btn { min-height: 2.75rem; display: inline-flex; align-items: center; }
  sup a, a.fn-ref { display: inline-block; padding: .25rem .2rem; }
  .overview-table th .sort-btn { min-height: 2.75rem; }
  .foot-grid ul a { display: inline-block; padding-block: .3rem; }
}
@media print {
  .site-header, .site-footer, .crumbs, .filters, .ticker, .motif, .hero-lookup, .hero-compare, .app-install { display: none !important; }
  body { background: #fff; color: #000; }
  .crumbs-top, .page-head, .band, .trustband { background: none !important; color: #000 !important; border-image: none !important; }
  .page-head h1, .hero-band h1, .trustband h2, .trustband h3 { color: #000 !important; }
  .prose a::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
  /* Ctrl+P on a viewer page: the rendered invoice only (the viewer's "Print / save as PDF" button prints it paginated) */
  body:has([data-einv-viewer][data-state="done"]) :is(.site-header, .site-footer, .crumbs, .skip, .app-install, .page-head,
    .tool > .notice, .sources) { display: none !important; }
  body:has([data-einv-viewer][data-state="done"]) { background: #fff; }
}

/* country-neutral compare page: one card per country */
.country-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem; list-style: none; margin: 1rem 0; padding: 0; }
.country-card { border: 1px solid var(--line); border-radius: 10px; padding: .9rem 1rem; background: var(--surface, transparent); }
.country-card .cc-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem; text-decoration: none; min-height: 2.75rem; }
.country-card .cc-main strong { font-size: 1.1rem; }
.country-card .cc-title { flex-basis: 100%; font-size: .92rem; color: var(--muted); }
.country-card .cc-main:hover strong { text-decoration: underline; }
.country-card .cc-more { list-style: none; margin: .5rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--line); font-size: .92rem; }
.country-card .cc-more li { margin: .25rem 0; }
/* country memory (country.js): the remembered country in the country menu, and its row in country tables */
.cc-ctx { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: 0 0 .6rem;
  padding: 0 0 .6rem; border-bottom: 1px solid var(--line); font-size: .85rem; color: var(--muted); }
.cc-ctx[hidden] { display: none; }
.cc-clear { font: inherit; color: var(--accent); background: none; border: 0; padding: .35rem 0; min-height: 24px; cursor: pointer;
  text-decoration: underline; }
tr.is-ctx > * { background: var(--accent-soft, rgba(45, 212, 191, .12)); }

/* Subscription plans + account (templates/pricing.html, account.html) */
.period-switch { border: 0; padding: 0; margin: 1rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.pricing[data-show="monthly"] .plan-price[data-period="yearly"], .pricing[data-show="yearly"] .plan-price[data-period="monthly"] { display: none; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1rem 0 1.5rem; }
.plan-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; display: flex; flex-direction: column; }
.plan-card.is-highlight { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.plan-card h2 { margin: 0 0 .25rem; font-size: 1.2rem; }
.plan-card > p:last-child { margin-top: auto; }
.plan-badge { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--accent); margin: 0 0 .25rem; font-weight: 650; }
.plan-price { margin: .25rem 0; } .plan-price strong { font-size: 1.6rem; }
.plan-points { padding-left: 1.1rem; margin: .5rem 0 1rem; font-size: .92rem; }
/* Comparison table: a line under every row, section headings (plans.yml groups), a short name with a muted
   one-line explanation, the highlighted plan's column tinted. On phones each feature becomes a block with the
   four plans side by side (labels from data-plan), so nothing is squeezed or cut off. */
.plan-table { border-collapse: collapse; width: 100%; font-size: .93rem; }
.plan-table th, .plan-table td { padding: .7rem .85rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.plan-table thead th { background: var(--soft); font: 600 .8rem/1.3 var(--f-mono); text-transform: uppercase;
  letter-spacing: .05em; text-align: center; }
.plan-table thead th:first-child { text-align: left; }
.plan-table td { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan-table th[scope=row] { font-weight: 400; text-align: left; max-width: 30rem; }
.plan-table .pf-name { display: block; font-weight: 650; }
.plan-table .pf-desc { display: block; color: var(--muted); font-size: .85rem; line-height: 1.4; margin-top: .15rem; }
.plan-table tr.plan-group th { background: var(--soft); text-align: left; font: 650 .78rem/1.3 var(--f-mono);
  text-transform: uppercase; letter-spacing: .06em; color: var(--accent-strong, var(--accent)); padding-top: 1.1rem; }
.plan-table tbody tr:not(.plan-group):hover > * { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }
.plan-table .is-highlight { background: color-mix(in srgb, var(--accent-soft) 45%, transparent); }
.plan-table .yes { color: var(--accent-strong, var(--accent)); font-weight: 700; }
@media (max-width: 40rem) {
  .table-wrap:has(> .plan-table) { overflow: visible; border: 0; background: transparent; }
  .plan-table thead { position: absolute; left: -9999px; }
  .plan-table, .plan-table tbody, .plan-table tr, .plan-table th { display: block; width: 100%; }
  .plan-table tr.plan-group th { border-bottom: 0; padding: 1.2rem 0 .4rem; background: transparent; }
  .plan-table tr:not(.plan-group) { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .6rem; overflow: hidden; }
  .plan-table tr:not(.plan-group) > th { grid-column: 1 / -1; border-bottom: 1px solid var(--line); max-width: none; }
  .plan-table tr:not(.plan-group) > td { border-bottom: 0; padding: .5rem .25rem .6rem; white-space: normal; font-size: .85rem; }
  .plan-table tr:not(.plan-group) > td::before { content: attr(data-plan); display: block; font: 600 .66rem/1.3 var(--f-mono);
    text-transform: uppercase; letter-spacing: .04em; color: var(--faint); margin-bottom: .2rem; }
}
.acct-panel form { max-width: 32rem; }
/* Log in / Create a free account tabs (account.html, account.js) */
.acct-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 1rem 0 1.25rem; max-width: 32rem; scroll-margin-top: 5rem; }
.acct-tabs a { padding: .6rem 1rem; text-decoration: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent;
  margin-bottom: -1px; min-height: 2.75rem; display: inline-flex; align-items: center; }
.acct-tabs a:hover { color: var(--fg); }
.acct-tabs a[aria-current] { color: var(--fg); border-bottom-color: var(--accent); }
.check { display: flex; gap: .5rem; align-items: flex-start; margin: .5rem 0; }
.watch-list { margin: 2rem 0; }
.watch-table td { vertical-align: top; } .watch-table .nowrap { white-space: nowrap; }
.badge { display: inline-block; font-size: .8rem; padding: .05rem .45rem; border-radius: 999px; border: 1px solid var(--line-2); white-space: nowrap; }
.badge.yes { background: var(--ok-bg); border-color: var(--ok-line); } .badge.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.badge.no { border-color: var(--line-2); } .badge.muted { opacity: .75; }
.btn-small { padding: .2rem .5rem; font-size: .85rem; }
.event-list { padding-left: 1.1rem; } .event-list li { margin: .25rem 0; }
/* Account page: the "check your inbox" panel that replaces the form (account.js showSent) and its spam-folder hint. */
.sent-panel { scroll-margin-top: 5rem; max-width: 32rem; }
.sent-panel:focus { outline: none; }
.sent-panel .status[data-state] { margin-top: 0; }
.acct-panel .status[data-state] { max-width: 32rem; }
/* Small motion (150-300 ms), only when the visitor has not asked for less: the panel just shown (tab switch, dashboard
   after login) fades in, rows added to a watch list fade in. Opacity only, so nothing shifts the layout.
   (The busy button and its spinner are in "tool feedback", next to the status styles.) */
@media (prefers-reduced-motion: no-preference) {
  .acct-panel:not([hidden]):not(.sent-panel) { animation: acct-fade .2s ease-out both; }
  .watch-table tr.row-new { animation: acct-fade .3s ease-out both; }
}
.acct-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 2rem; }
.watch-cta { margin-top: 1rem; display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.ws-bar { margin: 1.5rem 0; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.ws-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; margin: .5rem 0; }
.ws-inline { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.dl-countries { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.api-secret { user-select: all; word-break: break-all; white-space: pre-wrap; background: var(--warn-bg); border: 1px solid var(--warn-line); padding: .5rem .75rem; border-radius: var(--radius-s); }

/* ---------- world map country picker (sitegen/worldmap.py, _worldmap.html, worldmap.js; decision 2026-10-10) ----------
   Ocean = soft surface, land = quiet line colour; the layer decides which countries carry colour. Full guides are the
   teal signal, market data a pale teal; mandates: in force teal, coming amber, planned pale amber, none slate. */
.wm { margin: 0 0 var(--s4); --wm-land: var(--line); --wm-full: var(--accent); --wm-data: color-mix(in srgb, var(--accent) 38%, var(--surface));
  --wm-in: var(--accent); --wm-coming: var(--signal); --wm-planned: color-mix(in srgb, var(--signal) 40%, var(--surface));
  --wm-none: color-mix(in srgb, var(--faint) 55%, var(--surface)); }
@media (prefers-color-scheme: dark) { .wm { --wm-land: var(--line-2); --wm-planned: color-mix(in srgb, var(--signal) 55%, var(--surface)); } }
.wm-line { color: var(--muted); font: 500 .85rem/1.5 var(--f-mono); margin: 0 0 var(--s2); }
.wm-tools { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.wm-tools[hidden] { display: none; }
.wm-layers { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-s); overflow: hidden; }
.wm-layer, .wm-view { font: 600 .9rem/1.2 var(--f-body); padding: .55rem .85rem; min-height: 2.75rem; border: 0; cursor: pointer;
  background: var(--surface); color: var(--fg); }
.wm-layer + .wm-layer { border-left: 1px solid var(--line-2); }
.wm-layer[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); }
.wm-view { border: 1px solid var(--line-2); border-radius: var(--radius-s); }
.wm-stage { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1rem; align-items: start; }
.wm-stage[hidden] { display: none; }
.wm-map { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; line-height: 0; }
.wm-svg { display: block; width: 100%; height: auto; }
.wm-sphere { fill: var(--soft); }
.wm-land path { fill: var(--wm-land); stroke: var(--surface); stroke-width: .7; vector-effect: non-scaling-stroke; stroke-linejoin: round;
  transition: fill .15s; }
.wm-land path[tabindex] { cursor: pointer; }
.wm-land path:focus { outline: none; }
.wm-land path:focus-visible, .wm-land path.is-sel { stroke: var(--fg); stroke-width: 2; }
.wm[data-layer="coverage"] .wm-land path[data-cov="full"] { fill: var(--wm-full); }
.wm[data-layer="coverage"] .wm-land path[data-cov="data"] { fill: var(--wm-data); }
.wm[data-layer="mandates"] .wm-land path[data-man="in_force"] { fill: var(--wm-in); }
.wm[data-layer="mandates"] .wm-land path[data-man="coming"] { fill: var(--wm-coming); }
.wm[data-layer="mandates"] .wm-land path[data-man="planned"] { fill: var(--wm-planned); }
.wm[data-layer="mandates"] .wm-land path[data-man="none"] { fill: var(--wm-none); }
@media (hover: hover) { .wm-land path[tabindex]:hover { filter: brightness(1.12); } }
/* pins: our full-guide countries (the brand's map pin) and small countries; a larger invisible circle is the tap target */
.wm-pin { cursor: pointer; }
.wm-hit { fill: transparent; }
.wm-dot { fill: var(--surface); stroke: var(--fg); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wm[data-layer="coverage"] .wm-pin[data-cov="full"] .wm-dot { fill: var(--wm-full); stroke: var(--surface); }
.wm[data-layer="coverage"] .wm-pin[data-cov="data"] .wm-dot { fill: var(--wm-data); }
.wm[data-layer="coverage"] .wm-pin[data-cov="none"] { display: none; }
.wm[data-layer="mandates"] .wm-pin[data-man="in_force"] .wm-dot { fill: var(--wm-in); }
.wm[data-layer="mandates"] .wm-pin[data-man="coming"] .wm-dot { fill: var(--wm-coming); }
.wm[data-layer="mandates"] .wm-pin[data-man="planned"] .wm-dot { fill: var(--wm-planned); }
.wm[data-layer="mandates"] .wm-pin[data-man="none"] .wm-dot { fill: var(--wm-none); }
.wm[data-layer="mandates"] .wm-pin:not(.is-small) { display: none; }
.wm.is-world .wm-pin { display: none; }
.wm-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; min-height: 9rem; }
.wm-card p { margin: 0 0 .5rem; }
.wm-card-k { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.wm-card-h { margin: 0 0 .5rem; font: 700 1.25rem/1.2 var(--f-display); }
.wm-card-tier { display: inline-block; font-weight: 600; padding: .1rem .5rem; border-radius: var(--radius-s); background: var(--soft); }
.wm-card-tier.t-full, .wm-card-tier.m-in_force { background: var(--accent-soft); color: var(--accent-strong); }
.wm-card-tier.m-coming, .wm-card-tier.m-planned { background: var(--signal-soft); color: var(--signal-text); }
.wm-card-text { color: var(--muted); font-size: .95rem; }
.wm-card-next { font-size: .95rem; }
.wm-cd { color: var(--accent-strong); }
.wm-go { display: inline-block; margin-top: .25rem; font-weight: 600; }
.wm-hint { color: var(--muted); }
.wm-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; padding: 0; margin: .75rem 0 0; font-size: .9rem; color: var(--muted); }
.wm-legend[hidden] { display: none; }
.wm-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.wm-key { width: .9rem; height: .9rem; border-radius: 3px; border: 1px solid var(--line-2); background: var(--wm-land); flex: none; }
.wm-key.k-full, .wm-key.k-in_force { background: var(--wm-full); border-color: transparent; }
.wm-key.k-data { background: var(--wm-data); }
.wm-key.k-coming { background: var(--wm-coming); border-color: transparent; }
.wm-key.k-planned { background: var(--wm-planned); }
.wm-key.k-none_m { background: var(--wm-none); }
.wm-lists { margin-top: var(--s3); }
.wm-list-h { font-size: 1rem; margin: var(--s2) 0 .5rem; }
.wm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.wm-list a { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .35rem .75rem; border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); text-decoration: none; color: var(--fg); }
.wm-list a:hover { border-color: var(--accent); }
.wm-list-data a { color: var(--muted); }
.wm-mandates { margin-top: var(--s3); }
.wm-mandates summary { cursor: pointer; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
@media (max-width: 56rem) {
  .wm-stage { grid-template-columns: 1fr; }
  .wm-card { min-height: 0; }
  .wm-hit { r: 26; }  /* bigger tap targets on phones (CSS geometry property; user units) */
  .wm-dot { r: 8; }
}

/* "Continue on another device" (_share.html, share.js): a quiet closed box at the end of list, profile and comparison
   pages; the QR image is fetched only when it's opened. */
.share { margin: 2rem 0 1rem; max-width: 40rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.share > summary { cursor: pointer; padding: .7rem 1rem; font-weight: 600; min-height: 2.75rem; display: flex; align-items: center; }
.share-body { padding: 0 1rem 1rem; }
.share-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-qr { display: block; width: 132px; height: 132px; margin: .5rem 0; border-radius: var(--radius-s); background: #fff; }
.share-email { max-width: 28rem; margin-top: .75rem; }
.go-page { padding: 3rem 1rem; }

/* "Claim your profile" (claim.html, claim.js) and what an approved claim adds to a profile (_claimed.html). */
.claim-page .field > input[type=text], .claim-page .field > input[type=email], .claim-page .field > input[type=url],
.claim-page .field > select, .claim-page .field > textarea { width: 100%; max-width: 32rem; }
.claim-page .field > input[type=file] { max-width: 100%; }
.claim-page code { overflow-wrap: anywhere; user-select: all; }
.cl-price-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem 1rem; align-items: end;
  padding: .75rem 0; border-top: 1px solid var(--line); }
.cl-price-row .cl-price-inc { grid-column: 1 / -1; }
.cl-price-row input[type=number] { width: 100%; }
.claimed { margin: 1rem 0; max-width: 40rem; }
.claimed-logo { display: block; max-width: 8rem; max-height: 4rem; width: auto; height: auto; margin: .25rem 0 .5rem; }
.claimed-text { margin: .25rem 0; }

/* account page: Featured listing booking (featured.js; built only while site.yml featured_booking is on) */
.fb-list { list-style: none; padding: 0; margin: .5rem 0; }
.fb-list li { padding: .5rem 0; border-top: 1px solid var(--line); }
.fb-list li:first-child { border-top: 0; }
.fb-state { font-weight: 600; }
#fb-form { max-width: 32rem; }

/* DSA notice fields of the Report a problem form (kind "illegal", site/templates/_form_feedback.html, form.js) */
.illegal-extra { margin: 0 0 .8rem; padding: .1rem 0 .1rem .9rem; border-left: 3px solid var(--accent); }
.illegal-extra p { margin: .2rem 0 .6rem; }

/* Starts on a click only (lookup-assist.js name search, app.js "Use offline"; legal self-review 2026-10-20) */
.assist-search { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.assist-note { font-size: .82rem; color: var(--muted); }
.app-offline [data-app-offline-status]:empty { display: none; }