/* ── Fonts, self-hosted ──────────────────────────────────────────────────
   These were loaded from fonts.googleapis.com, which sends every visitor's
   IP address to Google on every page view. The legal page says "Two
   companies process data on our behalf, and no others" — so publishing that
   sentence beside a Google font request would have made it false on arrival,
   on the one site whose whole argument is that we say what is true.

   IBM Plex is OFL 1.1, so self-hosting is permitted outright. Latin and
   latin-ext only: the copy is English, and latin-ext covers the country
   names that need it (Curaçao, Åland, Côte d'Ivoire). Dropping cyrillic,
   greek and vietnamese saves ~70% of the bytes for glyphs no page renders.

   Also faster than Google Fonts ever was: same-origin, no third-party DNS
   lookup, no second TLS handshake, and cache-partitioning killed the
   shared-cache argument for this years ago. */
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/IBMPlexMono-400-latin-ext.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-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/IBMPlexMono-400-latin.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:'IBM Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/IBMPlexMono-500-latin-ext.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-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/IBMPlexMono-500-latin.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:'IBM Plex Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/IBMPlexSans-400-latin-ext.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 Sans';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/IBMPlexSans-400-latin.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:'IBM Plex Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/IBMPlexSans-500-latin-ext.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 Sans';font-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/IBMPlexSans-500-latin.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:'IBM Plex Sans';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/IBMPlexSans-600-latin-ext.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 Sans';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/IBMPlexSans-600-latin.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}

/* timesys.pro v4 — shared shell.
   One stylesheet for every page, so the Astro port is a mechanical translation
   rather than five separate reconciliations. Design language is v3's, unchanged:
   IBM Carbon greys, Plex Sans/Mono, teal accent. */

:root{
  --g100:#0b0b0b; --g90:#161616; --g80:#262626; --g70:#393939;
  --g60:#525252; --g50:#8d8d8d;
  /* WCAG 1.4.11: the visible boundary of a CONTROL needs 3:1, which --g70
     (1.7:1) fails. --edge is that boundary; --g70 stays for decorative rules. */
  --edge:#6f6f6f; --g40:#a8a8a8; --g30:#c6c6c6; --g10:#f4f4f4;
  --teal40:#08bdba; --teal-d:#009d9a; --blue40:#78a9ff;
  --green40:#42be65; --yellow30:#f1c21b; --red40:#fa4d56; --purple40:#be95ff;
  --sans:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1120px;

  /* THESE THREE WERE USED 16 TIMES AND DEFINED ZERO TIMES.
     var(--line) with no fallback makes the whole declaration invalid at
     computed-value time — the property does not fall back to something
     sensible, it unsets. So `border:1px solid var(--line)` rendered NO
     BORDER, silently, on every .cp-card, .lyr, .uc, .h-box and .cp table,
     and `background:var(--bg)` on the sticky table headers rendered
     TRANSPARENT, which is why rows showed through the region headings.

     Defining them as aliases rather than rewriting 16 call sites: the names
     carry intent (a hairline, dim text, the page ground) that --g80/--g40/
     --g100 do not, and that intent is worth keeping. */
  --bg:var(--g100);      /* page ground — opaque, for anything sticky */
  --line:var(--g80);     /* hairline rule and card border */
  --dim:var(--g40);      /* dim body text, same as .dim */

  /* Measured onto the root by shell.js. The fallback is the height at the
     default font size; anything sticky offsets by it. */
  --nav-h:69px;
}
*{box-sizing:border-box}
/* WCAG 2.4.7 Focus Visible. Links and buttons had no focus style at all, so a
   keyboard user could not tell where they were. One rule covers every control;
   :focus-visible keeps it off for mouse clicks. */
:focus-visible{outline:2px solid var(--teal40);outline-offset:2px;border-radius:2px}
/* the teal ring is invisible ON teal, so the primary button inverts it */
.btn-p:focus-visible{outline-color:var(--g10)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--g100);color:var(--g10);font-family:var(--sans);
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:24px;padding-right:24px}
section[id]{scroll-margin-top:72px}

/* ── type ── */
h1{font-size:clamp(33px,4.4vw,50px);line-height:1.08;letter-spacing:-.02em;
  font-weight:600;margin:0 0 14px}
h2{font-size:clamp(25px,2.8vw,34px);line-height:1.14;letter-spacing:-.015em;
  font-weight:600;margin:0 0 12px}
h3{font-size:19px;font-weight:600;margin:0 0 6px;line-height:1.25}
p{margin:0 0 14px}
.lede{font-size:19.5px;color:var(--g30);max-width:60ch}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--teal40);margin-bottom:14px}
.dim{color:var(--g40)}
.mono{font-family:var(--mono)}
.small{font-size:14.5px}

/* ── masthead ── */
header.site{position:sticky;top:0;z-index:40;background:rgba(11,11,11,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--g80)}
.mast{display:flex;align-items:center;gap:26px;padding:14px 0}
.brand{font-family:var(--mono);font-size:16px;letter-spacing:-.01em;
  text-decoration:none;font-weight:500}
.brand b{color:var(--teal40);font-weight:500}
nav.site{display:flex;gap:20px;margin-left:auto;font-size:15px}
nav.site a{color:var(--g30);text-decoration:none;padding-bottom:3px}
nav.site a:hover{color:var(--g10)}
nav.site a[aria-current=page]{color:var(--g10);box-shadow:inset 0 -2px 0 var(--teal40)}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:15.5px;font-weight:500;padding:11px 18px;border-radius:2px;
  text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--teal40);color:var(--g100);border-color:var(--teal40)}
.btn-p:hover{background:var(--teal-d);border-color:var(--teal-d)}
.btn-s{background:transparent;color:var(--g10);border-color:var(--edge)}
.btn-s:hover{border-color:var(--g50)}

/* ── surfaces ── */
.card{background:var(--g90);border:1px solid var(--g80);border-radius:3px;padding:22px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

/* ── status + assurance pills ── */
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 8px;border:1px solid currentColor;border-radius:2px}
.p-live{color:var(--green40)}
.p-verified{color:#ffffff}
.p-partial{color:var(--yellow30)}
.p-corroborated{color:#a7b4c2}
.p-soon{color:var(--g50)}
.p-compiled{color:#8b97a5}
.p-estimate{color:var(--purple40)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}

/* ── stat ── */
.stat{border-left:2px solid var(--teal40);padding-left:14px}
.stat .v{font-family:var(--mono);font-size:29px;line-height:1.1;color:var(--g10)}
.stat .k{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--g50);margin-top:5px}

/* ── tables ── */
/* STICKY HEADERS AND HORIZONTAL SCROLL ARE IN TENSION, and the previous fix
   did not resolve it. The reasoning was right — overflow-x:auto makes this a
   scroll container, so a sticky <th> anchors to a box that never scrolls
   vertically and therefore never sticks. The chosen escape, overflow-y:clip,
   does not work: per CSS Overflow 3, `clip` on one axis COMPUTES TO `hidden`
   when the other axis is not visible or clip. Measured: overflow-y resolved
   to hidden, and the header sat at -231px, scrolled away with the page.

   So the container is removed on wide viewports instead of being tricked.
   The table's min-width is 560px inside a 1120px wrap: on desktop it fits
   and needs no horizontal scroll, and with no scroll container between the
   <th> and the viewport, sticky resolves against the viewport and works.

   Below 760px the table genuinely cannot fit, so horizontal scrolling comes
   back and sticky headers are given up — which is the right trade at that
   size, where a six-column header would eat a third of the screen. */
.scroller{-webkit-overflow-scrolling:touch}
@media(max-width:760px){.scroller{overflow-x:auto}}
table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
th{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--g50);font-weight:400;text-align:left;
  padding:10px 12px;border-bottom:1px solid var(--g80)}
td{padding:11px 12px;border-bottom:1px solid var(--g80);vertical-align:middle}
tr:hover td{background:var(--g90)}

/* ── assurance bar ── */
/* ── Assurance bar ───────────────────────────────────────────────────────
   REGION USES HUE, ASSURANCE USES LIGHTNESS. Previously both were categorical
   and all three assurance colours were byte-identical to a region swatch on
   the same page: verified == Americas (#42be65), corroborated == Africa
   (#f1c21b), compiled == Europe (#78a9ff). A reader could reasonably think a
   blue bar meant "Europe".

   The deeper reason for the change: assurance is ORDINAL — compiled sits below
   corroborated sits below verified — and painting an order in unrelated hues
   throws that order away. A lightness ramp encodes it. Region stays
   categorical, and two orthogonal channels cannot collide.

   Adjacent steps land near 2.8:1, short of 3:1, because a three-step
   achromatic ramp on a dark ground cannot do better without losing the
   darkest step against the background. So colour is not asked to carry the
   separation: a 1px gap does that, and the hover tooltip carries the exact
   counts — which is also what keeps this out of "colour alone" territory. */
.abar{display:flex;gap:1px;height:6px;border-radius:2px;overflow:hidden;
  background:var(--g80);min-width:88px;cursor:help}
.abar i{display:block;height:100%}
.abar .v{background:#ffffff} .abar .c{background:#a7b4c2}
.abar .k{background:#5b6470}

.abar-w{position:relative;display:block}
.abar-t{position:absolute;left:0;bottom:calc(100% + 8px);z-index:20;
  background:var(--g90,#12161b);border:1px solid var(--line);border-radius:8px;
  padding:9px 12px;font:12px/1.7 var(--mono);white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transition:opacity .12s ease}
.abar-w:hover .abar-t,.abar-w:focus-within .abar-t{opacity:1;visibility:visible}
.abar-t b{font-weight:500;display:inline-block;min-width:2.6em;text-align:right;
  margin-right:9px;color:var(--g10)}
.abar-t s{text-decoration:none;display:inline-block;width:9px;height:9px;
  border-radius:2px;margin-right:7px;vertical-align:baseline}

/* ── code ── */
code{font-family:var(--mono);font-size:13.5px;background:var(--g80);
  padding:2px 6px;border-radius:2px;color:var(--g30)}
pre{background:#000;border:1px solid var(--g80);border-radius:3px;padding:16px;
  overflow-x:auto;font-family:var(--mono);font-size:13.5px;line-height:1.55;margin:0}
pre .k{color:var(--blue40)} pre .s{color:var(--teal40)} pre .n{color:var(--purple40)}

/* ── notices ── */
.note{border-left:2px solid var(--blue40);background:var(--g90);
  padding:12px 16px;font-size:15px;color:var(--g30);margin:16px 0}
.note b{color:var(--g10)}
.draft{border-left-color:var(--yellow30)}

/* ── footer ── */
footer.site{border-top:1px solid var(--g80);margin-top:72px;padding:38px 0 54px;
  font-size:14.5px;color:var(--g40)}
.foot-g{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:30px}
.foot-g h5{font-family:var(--mono);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--g50);margin:0 0 12px;font-weight:400}
.foot-g a{display:block;color:var(--g30);text-decoration:none;padding:5px 0;font-size:14.5px}
.foot-g a:hover{color:var(--g10)}
.foot-bar{display:flex;gap:20px;flex-wrap:wrap;align-items:baseline;
  border-top:1px solid var(--g80);padding-top:20px;font-family:var(--mono);
  font-size:12px;color:var(--g40)}
.foot-bar a{color:var(--g30);text-decoration:none}
.foot-bar a:hover{color:var(--g30)}
.accuracy{color:var(--g30);font-size:15px;max-width:58ch;margin:0 0 18px}
/* ── newsletter signup ── */
.signup{border-top:1px solid var(--g80);border-bottom:1px solid var(--g80);
  padding:26px 0;margin:0 0 30px;display:grid;grid-template-columns:1fr 1fr;
  gap:20px 40px;align-items:center}
.signup h5{font-size:17px;color:var(--g10);margin:0 0 6px;font-weight:600}
.su-row{display:flex;gap:10px;flex-wrap:wrap}
.su-row input{flex:1 1 220px;min-width:0;background:var(--g100);
  border:1px solid var(--edge);color:var(--g10);font:inherit;font-size:15px;
  padding:11px 13px;border-radius:2px}
.su-row input:focus-visible{outline:2px solid var(--teal40);outline-offset:1px}
.su-row .btn{flex:0 0 auto}
.su-msg{grid-column:1/-1;margin:0;font-size:13.5px;min-height:1.2em}
.su-msg.ok{color:var(--green40)}
.su-msg.err{color:var(--yellow30)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media(max-width:640px){.signup{grid-template-columns:1fr;gap:14px}}
/* The edition line. Small, but never grey-on-grey: it carries the currency
   limitation the liability position depends on, so it holds AA against the
   footer background rather than fading into it. */
.edition-bar{font-family:var(--mono);font-size:12px;line-height:1.75;
  color:var(--g30);margin:18px 0 0;padding-top:16px;
  border-top:1px solid var(--g80);max-width:88ch}
.edition-bar b{color:var(--g10);font-weight:500}
.edition-bar a{color:var(--teal40)}

/* ── data-freshness stamp: every generated page carries one ── */
.stamp{font-family:var(--mono);font-size:12px;color:var(--g40);
  display:inline-flex;align-items:center;gap:8px}
.stamp .dot{background:var(--green40)}

/* ── Mobile menu ─────────────────────────────────────────────────────────
   `nav.site{display:none}` used to be the whole of the mobile navigation:
   below 860px the header kept the wordmark and the CTA and silently dropped
   every link. Coverage, Use cases, Reports and Pricing were reachable only
   from the footer, which nobody scrolls to in order to navigate.

   The panel is driven by [data-open] rather than a class, so the same
   attribute the JS sets for aria state also drives the CSS — one source of
   truth for "is this open", visible and announced together. */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:10px;
  margin-left:6px;width:44px;height:44px;align-items:center;justify-content:center}
/* 44px is the minimum comfortable touch target; the bars are drawn inside it
   rather than being the target themselves. */
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{display:block;width:20px;height:2px;background:var(--g10);
  border-radius:1px;transition:transform .2s ease,opacity .15s ease}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:relative}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:4px}
/* Bars become an X when open — the control shows its own state, so the
   reader never has to guess whether tapping again will close it. */
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-4px) rotate(-45deg)}

@media(max-width:860px){
  .foot-g{grid-template-columns:1fr 1fr}
  .nav-toggle{display:inline-flex}
  /* The CTA takes the spacing job the nav had, since the nav leaves the flow. */
  .mast .btn-p{margin-left:auto}
  nav.site{position:absolute;top:100%;left:0;right:0;display:none;
    flex-direction:column;gap:0;margin:0;
    background:var(--g100);border-bottom:1px solid var(--g80);
    box-shadow:0 18px 34px -20px rgba(0,0,0,.9)}
  nav.site[data-open="true"]{display:flex}
  nav.site a{padding:15px 24px;font-size:16px;color:var(--g30);
    border-top:1px solid var(--g90)}
  nav.site a:first-child{border-top:0}
  /* The underline that marks the current page reads as an underline in a
     row, not as a tab, so it moves to a left rule at this width. */
  nav.site a[aria-current=page]{box-shadow:inset 3px 0 0 var(--teal40);
    color:var(--g10);background:var(--g90)}
}
@media(prefers-reduced-motion:reduce){
  .nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{transition:none}
}
@media(max-width:560px){
  .foot-g{grid-template-columns:1fr}
}

/* ── Layer grid (index) ──────────────────────────────────────────────────
   Four families side by side, because the POINT is that they are different
   kinds of claim. Rendering them as one undifferentiated feature list would
   undo the distinction the whole product rests on. */
.lyr-grid{display:grid;gap:14px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.lyr{border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.lyr-h{font-weight:600;font-size:1rem;display:flex;gap:9px;align-items:center;
  margin-bottom:8px}
.lyr-tag{font:500 10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;
  padding:1px 7px;border-radius:9px;border:1px solid currentColor}
.lyr-tag.live{color:var(--g10)}
.lyr-tag.soon{color:var(--dim)}
.lyr-l{list-style:none;margin:12px 0 0;padding:0;font-size:.88rem}
.lyr-l li{padding:4px 0;border-top:1px solid var(--line)}
.lyr-l li.soon{color:var(--dim)}
.lyr-l li.soon::after{content:" · building";font:500 10px var(--mono);
  text-transform:uppercase;letter-spacing:.06em;opacity:.75}

/* ── Country page ────────────────────────────────────────────────────────
   These are the pages strangers arrive on from search, so they must read as
   a document rather than an app: no loading state, no empty frame, nothing
   that depends on JS to make sense. */
.cp{width:100%;border-collapse:collapse;margin-top:14px;font-size:.94rem}
.cp th{text-align:left;font-weight:500;color:var(--dim);white-space:nowrap;
  padding:10px 18px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;width:1%}
.cp td{padding:10px 0;border-bottom:1px solid var(--line)}
.cp-cta{display:grid;gap:14px;margin-top:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cp-card{border:1px solid var(--line);border-radius:10px;padding:20px}
.cp-card h3{margin:0 0 8px;font-size:1.05rem}

/* Crawlable escape hatch from a card that is otherwise a <button>. Visible and
   focusable — hiding it from sight but not from crawlers would be cloaking. */
.rc-permalink{display:block;font-size:.82rem;padding:8px 2px 0;color:var(--dim);
  text-decoration:none}
.rc-permalink:hover,.rc-permalink:focus-visible{color:var(--g10);text-decoration:underline}
.c-link{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.c-link:hover,.c-link:focus-visible{color:var(--teal40);border-bottom-color:currentColor}

/* Sticky column headers per region table. Each table has its own <thead>, so
   each sticks under the site header as you pass through its section — with 240
   rows across five regions, losing the headings is losing the meaning. */
.scroller table thead th{position:sticky;top:var(--nav-h,56px);z-index:2;
  background:var(--bg);box-shadow:inset 0 -1px 0 var(--line)}

.edition-bar{display:flex;gap:22px;flex-wrap:wrap;font-size:12.5px}
.eb-l{color:var(--g50)}
.eb-l b{color:var(--g30);font-weight:500}

/* ── Hero ────────────────────────────────────────────────────────────── */
.h-promise{max-width:19ch}
.h-box{border:1px solid var(--line);border-left:3px solid var(--teal40);
  border-radius:0 8px 8px 0;padding:16px 20px;margin:22px 0 0;max-width:62ch;
  color:var(--g30);font-size:15px;line-height:1.65}
.h-clocks{display:flex;gap:24px;flex-wrap:wrap;margin:18px 0 0;
  font-family:var(--mono);font-size:12px;color:var(--g50)}
.h-clocks b{color:var(--g30);font-weight:500}

/* ── Use-case grid ───────────────────────────────────────────────────── */
.uc-grid{display:grid;gap:12px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.uc{border:1px solid var(--line);border-radius:10px;padding:16px 18px;
  display:flex;flex-direction:column;gap:8px;min-height:0}
.uc-i{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal40)}
.uc h3{margin:0;font-size:1rem;line-height:1.32;font-weight:600}
.uc p{margin:0;font-size:.85rem;color:var(--g50);line-height:1.55}
.uc-q{margin-top:auto;font-family:var(--mono);font-size:11px;color:var(--g30);
  border-top:1px solid var(--line);padding-top:9px}

/* ── Sign-up form ────────────────────────────────────────────────────────
   ONE RHYTHM, NOT TEN. The first version carried ten font sizes, nine
   colours and six weight/decoration treatments across four fields — every
   field wearing a label, a REQUIRED or OPTIONAL chip in uppercase mono, an
   input, and a paragraph of our own reasoning. Stacked four times that
   reads as a document with boxes in it, and the reader cannot tell which
   words are the question.

   A form is a sequence of questions. What earns space is the question, the
   box, and only the help that would change the answer. The rest of the
   reasoning belongs in one note at the foot of the page, where a reader who
   wants it can find it and everyone else can ignore it.

   The scale below is deliberately small: label 15, input 16, help 14.5,
   and a single accent (teal) that means "focus or success" everywhere it
   appears. Yellow appears only when something is wrong. */
.su-form{margin-top:32px;max-width:34rem}
.su-form .f{margin-top:26px}
.su-form label{display:block;margin-bottom:8px;font-weight:500;font-size:15px}
/* "optional" as plain words at the same size — a chip in a second family and
   a third colour is a lot of design for one bit of information. */
.su-form label .o{font-weight:400;color:var(--g50)}
.su-form input,.su-form textarea{width:100%;font:inherit;padding:11px 13px;
  background:var(--g90);border:1px solid var(--g70);border-radius:6px;
  color:var(--g10);transition:border-color .12s}
.su-form input:hover,.su-form textarea:hover{border-color:var(--g60)}
.su-form input::placeholder,.su-form textarea::placeholder{color:var(--g50)}
.su-form textarea{resize:vertical;line-height:1.55;min-height:96px}
.su-form .fh{margin:8px 0 0;font-size:14.5px;color:var(--g50);line-height:1.5}
/* Errors sit under the field they belong to, not in one status line at the
   bottom — by the time you have scrolled to a global error you have lost
   which question it was about. Driven by aria-invalid so the visual state
   and the state announced to a screen reader cannot drift apart. */
.su-form .fe{display:none;margin:8px 0 0;font-size:14.5px;color:var(--yellow30)}
.su-form [aria-invalid="true"]{border-color:var(--yellow30)}
.su-form [aria-invalid="true"] ~ .fe{display:block}
.su-form button{margin-top:30px}
.su-out{margin-top:16px;font-size:14.5px;color:var(--teal40)}

/* ── Dossier: cover, manifest, pills ──────────────────────────────────────
   Shared by the Reports grid (inside a dialog) and by every country page
   (as page content). It lived in reports.html, where the .toc/.mi/.pills
   block was also pasted in TWICE — two identical copies drifting one edit
   apart from each other. One copy, one file, both pages import it. */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:34px 24px;margin-top:26px}
.rcard{display:flex;flex-direction:column;gap:15px;align-items:center;
  text-align:center;text-decoration:none;background:none;border:0;
  font:inherit;color:inherit;cursor:pointer;padding:0}
.rc-cover{--cover-bg:linear-gradient(155deg,#1f1f1f,#0a0a0a);
  position:relative;width:100%;max-width:192px;aspect-ratio:188/250;
  border-radius:7px;overflow:hidden;background:var(--cover-bg);
  box-shadow:0 18px 36px -18px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.16);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease}
.rc-cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;
  background:var(--accent,var(--teal40));z-index:3}
.rc-cover::after{content:"";position:absolute;right:0;bottom:0;width:22px;height:22px;
  background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.55) 50%);z-index:3}
.rc-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(135deg,transparent 42%,rgba(255,255,255,.18) 50%,transparent 58%);
  opacity:0;transform:translateX(-28%);
  transition:opacity .35s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.rc-eyebrow{position:absolute;top:16px;left:20px;z-index:3;font-family:var(--mono);
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent,var(--teal40))}
.rc-title{position:absolute;left:20px;right:16px;top:42px;z-index:3;margin:0;
  font-size:20px;line-height:1.15;font-weight:600;letter-spacing:-.01em;
  color:var(--g10);text-align:left}
.rc-title::after{content:"";display:block;width:30px;height:2px;margin-top:11px;
  border-radius:2px;background:var(--accent,var(--teal40))}
.rc-meta{position:absolute;left:20px;bottom:16px;z-index:3;font-family:var(--mono);
  font-size:10px;letter-spacing:.08em;color:var(--yellow30)}
.rcard:hover .rc-cover,.rcard:focus-visible .rc-cover{transform:translateY(-6px);
  box-shadow:0 26px 48px -18px rgba(0,0,0,.85)}
.rcard:hover .rc-sheen,.rcard:focus-visible .rc-sheen{opacity:1;transform:translateX(28%)}
/* Spine colour is a GEOGRAPHIC FACT, taken from the UN M49 region in the
   feed — not a per-card design choice. Same region, same colour, always. */
.rc-cover.r-europe  {--accent:#78a9ff} .rc-cover.r-africa {--accent:#f1c21b}
.rc-cover.r-asia    {--accent:#be95ff} .rc-cover.r-americas{--accent:#42be65}
.rc-cover.r-oceania {--accent:#08bdba}
/* Transcontinental countries get BOTH colours rather than the generator
   silently picking a side — Russia, Turkey, Egypt, Indonesia and friends. */
.rc-cover.split::before{background:linear-gradient(180deg,
   var(--accent) 0 50%, var(--accent2) 50% 100%)}
.rc-info{display:flex;flex-direction:column;gap:5px;align-items:center}
.rc-info .who{font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--g50)}
.rc-info .nm{font-size:16px;font-weight:600}
.rc-info .pr{font-family:var(--mono);font-size:13.5px;color:var(--teal40)}
@media(prefers-reduced-motion:reduce){
  .rc-cover,.rc-sheen{transition-duration:.01ms!important}}

.caret{width:9px;height:9px;border-right:2px solid var(--g50);
  border-bottom:2px solid var(--g50);transform:rotate(-45deg);transition:transform .18s;
  flex:0 0 auto;margin-right:2px}
details[open] > summary .caret{transform:rotate(45deg)}

.toc{list-style:none;margin:0;padding:0}
.toc li{border-bottom:1px solid var(--g80)}
/* One row shape whether the item expands or not, so the numbered column
   stays a straight line down the manifest. */
.mi > summary, .mi-flat{display:grid;grid-template-columns:26px 1fr auto 14px;
  gap:12px;padding:10px 0;align-items:baseline}
.mi > summary{cursor:pointer;list-style:none}
.mi > summary::-webkit-details-marker{display:none}
.mi > summary:focus-visible{outline:2px solid var(--teal40);outline-offset:2px}
.mi > summary:hover .t{color:var(--g10)}
.mi > summary .caret{margin:0;align-self:center}
.toc .n{font-family:var(--mono);font-size:12px;color:var(--g50)}
.toc .t{font-size:15.5px}
.toc .t small{display:block;color:var(--g40);font-size:13.5px;margin-top:3px}
.toc .c{font-family:var(--mono);font-size:12.5px;color:var(--g50);white-space:nowrap}
/* Pills, not a table: the US has 54 subdivisions and India 41. They wrap,
   they stay scannable, and they never trap a scroll inside a dialog. */
.pills{display:flex;flex-wrap:wrap;gap:6px;padding:2px 0 14px 38px}
.pl{font-family:var(--mono);font-size:12px;color:var(--g30);
  border:1px solid var(--edge);border-radius:2px;padding:4px 8px;
  display:inline-flex;align-items:baseline;gap:6px}
.pl b{color:var(--teal40);font-weight:400}
@media(max-width:520px){.pills{padding-left:0}}

/* ── Country page: dossier block ─────────────────────────────────────────
   The Reports dialog, unwrapped onto the page. Same manifest markup, but no
   cover button and no dialog — on a country page the contents ARE the page,
   so a cover that opens a copy of what you are reading is a dead control. */
.cd-wrap{display:grid;grid-template-columns:192px 1fr;gap:34px;align-items:start;
  margin-top:24px}
.cd-buy{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.cd-buy .btn{flex:1;justify-content:center;min-width:210px}
@media(max-width:680px){.cd-wrap{grid-template-columns:1fr}
  .cd-wrap .rc-cover{margin:0 auto}}

/* The free-account offer at the foot of a country page. Bordered rather than
   filled: a solid teal panel would outrank the dossier contents above it, and
   the contents are what the reader came for. */
.cp-free{margin:44px 0 0;padding:28px;border:1px solid var(--edge);
  border-left:3px solid var(--teal40);border-radius:4px;background:var(--g90)}
.cp-free .lede{max-width:52ch}

/* Country-page header: facts left, cover right. The cover is a link to the
   dossier section, so it is sized down and given a real hover/focus state —
   an image that scrolls the page on click must look clickable. */
.cp-head{display:grid;grid-template-columns:1fr 168px;gap:36px;align-items:start}
.cp-thumb{display:block;text-decoration:none;border-radius:8px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cp-thumb .rc-cover{max-width:168px}
.cp-thumb:hover{transform:translateY(-4px)}
.cp-thumb:hover .rc-sheen{opacity:1;transform:translateX(28%)}
.cp-thumb:focus-visible{outline:2px solid var(--teal40);outline-offset:6px}
@media(max-width:740px){
  /* Below this the cover competes with the h1 for the first screen, and the
     h1 is what tells you where you are. It drops out; the dossier section
     still carries one. */
  .cp-head{grid-template-columns:1fr}
  .cp-thumb{display:none}
}
@media(prefers-reduced-motion:reduce){.cp-thumb{transition-duration:.01ms}}

/* ── The provenance diagram ──────────────────────────────────────────────
   THE ONE SECTION THAT BREAKS THE PATTERN. Every other block on the
   homepage is headline → paragraph → cards → button, so by the fourth one
   the rhythm is predictable and everything reads as equally important.
   This is full-bleed, has no cards and no button, and states the whole
   argument in one picture: authorities in, one engine, every date labelled
   by how well it is evidenced, four ways out.

   Built from type and rules rather than an image: it stays sharp at any
   size, reflows on a phone, is readable by a screen reader, costs no
   request, and cannot go stale the way an exported PNG does. */
.flow{background:var(--g90);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:64px 0}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:26px;
  align-items:center;margin-top:34px}
.flow-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g50);font-weight:400;margin:0 0 14px}
.flow-item{border-left:2px solid var(--g70);padding:7px 0 7px 13px;
  margin-bottom:9px;font-size:14.5px;color:var(--g30);line-height:1.4}
.flow-item:last-child{margin-bottom:0}
.flow-item b{display:block;color:var(--g10);font-weight:500}
.flow-item small{color:var(--g50);font-size:12.5px}
/* The engine is the only filled box: it is the thing being sold. */
.flow-engine{background:var(--g100);border:1px solid var(--teal40);
  border-radius:4px;padding:20px 18px;text-align:center}
.flow-engine b{display:block;font-size:16px;color:var(--g10);margin-bottom:6px}
.flow-engine span{font-family:var(--mono);font-size:11.5px;color:var(--teal40);
  letter-spacing:.09em}
.flow-arrow{font-family:var(--mono);color:var(--g60);font-size:19px;
  text-align:center;user-select:none}
/* Assurance keeps the achromatic ramp it uses everywhere else, so the
   diagram teaches the same vocabulary the rest of the site uses. */
.flow-a{display:flex;align-items:center;gap:9px;margin-bottom:9px;font-size:14px}
.flow-a i{width:9px;height:9px;border-radius:2px;flex:0 0 auto}
.flow-a .v{background:#ffffff} .flow-a .c{background:#a7b4c2}
.flow-a .k{background:#5b6470}
.flow-a small{color:var(--g50);font-size:12.5px;margin-left:auto;
  font-family:var(--mono)}
@media(max-width:900px){
  .flow-grid{grid-template-columns:1fr;gap:8px}
  .flow-arrow{transform:rotate(90deg);padding:6px 0}
}

/* ── Filter controls: search box + chips ─────────────────────────────────
   THESE WERE COLLATERAL DAMAGE. Extracting the cover/manifest CSS out of
   reports.html cut from `.toc` to the end of that <style> block, and
   `.chip`, `.chips`, `.controls` and `.ctl-lb` happened to sit after it.
   They were never moved anywhere, so the band and bloc filters on Reports
   have been rendering as unstyled <button> elements ever since — no border,
   no monospace, no pressed state, and the count running straight into the
   price: "Standard · €49129".

   The filtering logic was never broken; only the evidence that it existed.
   Living in shell.css now because Coverage carries an identical local copy —
   two files, one control, which is how they drift. */
.controls{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:6px}
.controls input{flex:0 0 auto;width:min(320px,100%);background:var(--g90);
  border:1px solid var(--edge);color:var(--g10);font:inherit;font-size:15px;
  padding:10px 12px;border-radius:2px}
.controls input:focus-visible{outline:2px solid var(--teal40);outline-offset:1px}
.ctl-lb{font-family:var(--mono);font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--g40)}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.04em;
  background:transparent;color:var(--g30);border:1px solid var(--edge);
  border-radius:2px;padding:6px 11px;cursor:pointer}
.chip:hover{border-color:var(--g50);color:var(--g10)}
.chip[aria-pressed=true]{background:var(--teal40);color:#00302f;border-color:var(--teal40)}
/* The separator that was missing: the count is a distinct fact from the
   price beside it, and without spacing they read as one number. */
.chip .n{opacity:.7;margin-left:6px}

/* One grid cell per dossier: the cover button and its permalink are a pair,
   not two neighbours. Without this wrapper each dossier took two cells of
   .rgrid and the link rendered beside its own cover. */
.rc-wrap{display:flex;flex-direction:column;align-items:center}
.rc-wrap .rcard{width:100%}
.rc-permalink{display:block;text-align:center;font-size:13px;padding:9px 2px 0;
  color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.rc-permalink:hover{color:var(--teal40);border-bottom-color:currentColor}

/* Pricing header: title left, currency switch right, on one line. The switch
   was previously two blocks above the first price, which is far enough that
   changing it appeared to do nothing. */
.price-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin:22px 0 12px}
.price-head .curnote{margin:0}

/* The community-access note. Quiet on purpose: a reader comparing prices
   should not meet it, and a reader looking for it should find it. */
.foot-give{border-top:1px solid var(--g80);margin:26px 0 0;padding-top:18px;
  font-size:14.5px;color:var(--g50);max-width:78ch;line-height:1.6}
.foot-give b{color:var(--g30);font-weight:500}
.foot-give a{color:var(--teal40);text-decoration:none;
  border-bottom:1px solid transparent;margin-left:4px}
.foot-give a:hover{border-bottom-color:currentColor}

/* ── Signup: two paths ───────────────────────────────────────────────────
   Free access is an application we read; a paid plan is a purchase that
   starts immediately. One button served both badly — it asked a
   purchase-ready buyer to write an essay. */
.path-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
.path-pick [role=tab]{text-align:left;background:var(--g90);border:1px solid var(--g70);
  border-radius:5px;padding:15px 17px;cursor:pointer;font:inherit;color:var(--g30);
  display:flex;flex-direction:column;gap:5px}
.path-pick [role=tab] b{color:var(--g10);font-weight:500;font-size:16px}
.path-pick [role=tab] span{font-size:13.5px;color:var(--g50);line-height:1.45}
.path-pick [role=tab]:hover{border-color:var(--g50)}
/* The selected path is marked by a teal edge and a lift in contrast, not by
   colour alone — the same reason the assurance bar uses a lightness ramp. */
.path-pick [role=tab][aria-selected=true]{border-color:var(--teal40);
  background:var(--g100);box-shadow:inset 3px 0 0 var(--teal40)}
.path-pick [role=tab][aria-selected=true] span{color:var(--g40)}
@media(max-width:560px){.path-pick{grid-template-columns:1fr}}

.plan-pick{display:grid;gap:10px;margin-top:24px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.plan-opt{text-align:left;background:var(--g90);border:1px solid var(--g70);
  border-radius:5px;padding:15px 16px;cursor:pointer;font:inherit;
  display:flex;flex-direction:column;gap:5px}
.plan-opt .pn{color:var(--g10);font-size:16px;font-weight:500}
.plan-opt .pp{font-family:var(--mono);font-size:15px;color:var(--teal40)}
.plan-opt .ps{font-size:13px;color:var(--g50);line-height:1.4}
.plan-opt:hover{border-color:var(--g50)}
.plan-opt[aria-pressed=true]{border-color:var(--teal40);background:var(--g100);
  box-shadow:inset 3px 0 0 var(--teal40)}