/* ════════════════════════════════════════════════
   Checked.be — Veritas Intelligence design system
   Clean · Light · Inter + JetBrains Mono · "The Truth in the Data"
   ────────────────────────────────────────────────
   NOTE (Phase 1, 2026-05-29): the legacy :root block that previously lived
   here (defining --bg / --ink / --fg-mid / --line / --risk-* / --shadow-*
   etc. with hardcoded Veritas hex values) was DELETED. Those tokens are
   now defined exclusively in wwwroot/Tokens.css's legacy-aliases block,
   which maps them onto the new --ds-* M scale. See Tokens.css for details.
   ════════════════════════════════════════════════ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); color-scheme: light; }
/* Clip stray horizontal overflow (off-canvas AI/compare drawers sit at
   right:0 + translateX(100%); on mobile that widened the layout and pushed the
   fixed "Vraag AI" FAB off the right edge). `clip` (not `hidden`) clips without
   creating a scroll container, so the sticky dossier tabs keep working. */
html, body { overflow-x: clip; }
body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11" 1, "ss01" 1;
  /* Crisp warm-white surface — NO tinted gradients (light doctrine 2026-06). */
  background: var(--bg);
}

/* Serif voice for the "editorial intelligence" headlines */
.serif { font-family: var(--serif); }
.serif-italic { font-family: var(--serif); font-style: italic; font-variation-settings: "SOFT" 80; }

/* Premium hero numeric — Fraunces variable axes for soft optical weight */
.mega-num {
  font-family: var(--serif);
  font-weight: 350;
  font-variation-settings: "SOFT" 100, "opsz" 144;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* Subtle dotted-grid backdrop you can drop on any section */
.grid-dots {
  background-image: radial-gradient(rgba(19, 27, 46, 0.10) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: -1px -1px;
}
.grid-dots-soft {
  background-image: radial-gradient(rgba(19, 27, 46, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }

/* ───── typography helpers ───── */
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "zero" 1;
  letter-spacing: -0.005em;
}
.tnum { font-variant-numeric: tabular-nums; }

.h-display {
  font-family: var(--serif);
  font-size: var(--ds-fs-48);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h1 {
  font-family: var(--serif);
  font-size: var(--ds-fs-31);
  line-height: 1.12;
  letter-spacing: -0.018em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h2 {
  font-family: var(--serif);
  font-size: var(--ds-fs-25);
  line-height: 1.18;
  letter-spacing: -0.014em;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
}
.h3 {
  font-size: var(--ds-fs-18);
  line-height: 24px;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 0;
  color: var(--ink-soft);
}
.body-lg { font-size: var(--ds-fs-16); line-height: 24px; }
.body-md { font-size: 14px; line-height: 20px; }
.body-sm { font-size: 12px; line-height: 16px; }
.label-caps {
  font-size: 11px; font-weight: 600; line-height: 16px;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fg-mute);
}
.data-mono {
  font-family: var(--mono);
  font-size: 13px; font-weight: 500; line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.muted { color: var(--fg-mute); }
.mid { color: var(--fg-mid); }

/* ───── app shell ───── */
.app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

/* ───── chrome (top nav) ───── */
.chrome {
  position: sticky; top: 0; z-index: 40;
  background: rgba(247, 249, 251, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.chrome .brand {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.chrome-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.chrome .brand {
  font-family: var(--sans);
  font-size: var(--ds-fs-18);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.chrome nav { display: flex; gap: 24px; align-items: center; flex-shrink: 0; }
.chrome nav button {
  font-size: 14px;
  color: var(--fg-mid);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out);
  font-weight: 500;
  white-space: nowrap;
}
.chrome nav button:hover { color: var(--ink); }
.chrome nav button.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }

.chrome .spacer { flex: 1; }

.chrome-search {
  position: relative;
  width: 240px;
  flex-shrink: 1;
  min-width: 0;
}
.chrome-search input {
  width: 100%;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 8px 12px 8px 34px;
  font-size: 13px;
  outline: none;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out);
}
.chrome-search input:focus { border-color: var(--ink); background: var(--bg-lowest); }
.chrome-search input::placeholder { color: var(--fg-mute); }
.chrome-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--fg-mute); display: inline-flex; }

.lang-switch {
  display: inline-flex;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
}
.lang-switch button {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border-radius: 3px;
  color: var(--fg-mute);
  font-weight: 500;
}
.lang-switch button.active { background: var(--bg-lowest); color: var(--ink); box-shadow: var(--shadow-1); }

/* ───── container ───── */
.page {
  max-width: var(--ds-content-max, 1440px);
  margin: 0 auto;
  padding: 32px;
  width: 100%;
  /* border-box, or the padding is ADDED to the 100 per cent. Measured 2026-09-03
     on /live at a 360px viewport: .page rendered 380px wide (padding 10px each
     side, content-box) with a -20px right margin from `margin: 0 auto`, so every
     page's content sat 10px into the zone html/body clip away, and the last
     filter chip ("Einde") ended at x=366 where nobody could reach it. The same
     arithmetic overflows at every viewport narrower than max-width plus padding;
     the clip just hid it, and it blinded the scrollWidth probe as well. */
  box-sizing: border-box;
}
.page.narrow { max-width: 920px; }
.page.wide { max-width: 1600px; }

/* ───── cards ───── */
.card {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.card-h {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.card-h .title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.card-h .meta {
  font-size: 12px;
  color: var(--fg-mute);
  font-family: var(--mono);
}
.card-b { padding: 20px; }

/* ───── chips ───── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 1px solid var(--line);
  background: var(--bg-lowest);
  color: var(--fg-mid);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--fg-mute); }
/* Outline doctrine: coloured text + border + dot on white — no tinted fills. */
.chip.low, .chip.ok { color: #047857; background: var(--bg-lowest); border-color: var(--risk-low-border); }
.chip.low .dot, .chip.ok .dot { background: var(--risk-low); }
.chip.med, .chip.warn { color: #b45309; background: var(--bg-lowest); border-color: var(--risk-med-border); }
.chip.med .dot, .chip.warn .dot { background: var(--risk-med); }
.chip.high, .chip.bad { color: #b91c1c; background: var(--bg-lowest); border-color: var(--risk-high-border); }
.chip.high .dot, .chip.bad .dot { background: var(--risk-high); }
.chip.info { color: #1d4ed8; background: var(--bg-lowest); border-color: #bfdbfe; }
.chip.info .dot { background: var(--data-blue); }
.chip.solid { background: var(--bg-lowest); color: var(--ink); border-color: var(--ink); font-weight: 600; }
.chip.solid .dot { background: var(--ds-accent); }
.chip.mono { font-family: var(--mono); font-size: 11px; }

/* ───── buttons ─────
   Doctrine: primary = solid emerald with white text; secondary = white
   with an ink border; ghost = quiet text button. No black/navy fills. */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--ink);
  background: var(--bg-lowest);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-low); }
.btn:active { transform: translateY(0.5px); }
.btn.primary {
  background: var(--ds-accent); color: var(--fg-inv); border-color: var(--ds-accent);
}
.btn.primary:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }
.btn.alert {
  background: var(--ds-accent); color: var(--fg-inv); border-color: var(--ds-accent);
}
.btn.alert:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--fg-mid); }
.btn.ghost:hover { background: var(--bg-low); color: var(--ink); }
.btn.sm { padding: 6px 11px; font-size: 13px; }
.btn.lg { padding: 11px 18px; font-size: 14px; }

.btn .ico { width: 16px; height: 16px; display: inline-flex; }

/* ───── KPI ───── */
.kpi { display: flex; flex-direction: column; gap: 6px; }
.kpi .label {
  font-size: 12px; font-weight: 500; color: var(--fg-mute);
  letter-spacing: -0.005em;
}
.kpi .value {
  font-family: var(--mono);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.kpi .value.lg { font-size: var(--ds-fs-39); }
.kpi .sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
}
.kpi .delta {
  font-family: var(--mono);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi .delta.up { color: var(--risk-low); }
.kpi .delta.down { color: var(--risk-high); }
.kpi .delta.flat { color: var(--fg-mute); }

/* ───── table ───── */
table.t {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.t thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  background: var(--bg-lowest);
  border-bottom: 2px solid var(--ink);
}
table.t th.num, table.t td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
table.t tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  color: var(--fg);
}
table.t tbody tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: var(--bg); }

/* ───── divider ───── */
.hr { height: 1px; background: var(--line-soft); margin: 16px 0; }

/* ───── grid helpers ───── */
.row { display: flex; gap: 16px; }
.col { display: flex; flex-direction: column; gap: 16px; }
.g-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.g-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.g-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

/* ───── metric chart wall (financials sparklines) ───── */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}
.metric-tile {
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 12px 14px 11px;
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.metric-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.metric-tile .m-label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
.metric-tile .m-value {
  font-family: var(--mono); font-size: var(--ds-fs-20); font-weight: 600;
  color: var(--ink-soft); margin-top: 3px; line-height: 1.1;
}
.metric-tile .sparkline { display: block; width: 100%; height: 34px; margin-top: 8px; }
.metric-tile .m-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 6px;
}
.metric-tile .m-yoy { font-family: var(--mono); font-size: 11px; font-weight: 600; white-space: nowrap; }
.metric-tile .m-range { font-family: var(--mono); font-size: 10px; color: var(--fg-dim); white-space: nowrap; }
.m-up   { color: var(--risk-low); }
.m-down { color: var(--risk-high); }
.m-flat { color: var(--fg-dim); }

/* ───── health barometer ───── */
.barometer {
  position: relative;
  height: 12px;
  margin-top: 16px;
  border-radius: var(--r-full);
  /* red → amber → green: position on the track reads as health */
  background: linear-gradient(90deg,
    var(--risk-high) 0%,
    var(--risk-med) 50%,
    var(--risk-low) 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.06);
}
.barometer-marker {
  position: absolute;
  top: 50%;
  width: 14px; height: 14px;
  margin-left: -7px;
  transform: translateY(-50%);
  border-radius: var(--r-full);
  background: var(--bg-lowest);
  border: 2.5px solid var(--ink-soft);
  box-shadow: var(--shadow-1);
}
.barometer-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px; color: var(--fg-dim);
  margin-top: 5px;
}
.health-components {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px 18px;
}
.health-comp {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 3px 0;
  border-bottom: 1px solid var(--line-soft);
  /* A grid item defaults to min-width:auto, so a row of nowrap spans pushed
     this 16px past a 360px viewport and the +10/-60 deltas fell off the right
     edge (measured at a true 360 via CDP device metrics, 2026-08-11). Both this
     and the min-width:0 on .hc-detail below are needed: the grid item has to be
     allowed to shrink before the flex child inside it can. */
  min-width: 0;
}
/* An insolvency row is what a credit reader opened this card for, and it carries
   the longest detail in the breakdown ("Open faillissement in de
   KBO-rechtstoestand", "3 WER Boek XX-event(s)"). One third of a grid row plus
   an ellipsis is the wrong place to economise, so it spans the full width. */
.health-comp.hc-insolvency { grid-column: 1 / -1; }
.health-comp .hc-label { color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
.health-comp .hc-detail { color: var(--fg-mute); font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-comp .hc-delta { font-family: var(--mono); font-size: 12px; font-weight: 600; white-space: nowrap; }

/* ───── ownership structure ───── */
.own-list { display: flex; flex-direction: column; gap: 8px; }
.own-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.own-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.own-name { font-weight: 500; color: var(--ink-soft); font-size: 14px; text-decoration: none; }
a.own-name:hover { color: var(--ds-accent-deep); }
.own-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-size: 11px; color: var(--fg-mute); margin-top: 3px; }
.own-meta .mono { font-size: 11px; }
.own-arrow { color: var(--fg-mute); font-size: 14px; }

/* ───── establishment units (vestigingseenheden) ───── */
.estab-list { display: flex; flex-direction: column; gap: 8px; }
.estab-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.estab-row:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.estab-name { font-weight: 500; color: var(--ink-soft); font-size: 14px; }
.estab-meta { display: flex; align-items: center; flex-wrap: wrap; row-gap: 4px; font-size: 11px; color: var(--fg-mute); margin-top: 3px; }
/* A NACE label is a sentence, not a status chip. .ds-pill is nowrap by design,
   so 47990 ("zoeken, selecteren, verwijzen en plaatsen van personeel...") left
   its card by 1.260px at a 360px viewport on 2026-08-15 while
   documentElement.scrollWidth stayed equal to clientWidth, because the panel
   clipped it. Same fix the home hero verdict chip already carries. */
.estab-nace { min-width: 0; max-width: 100%; margin-left: 6px; }
.estab-nace .ds-pill {
  white-space: normal;
  max-width: 100%;
  text-align: left;
  line-height: 1.35;
  /* And once it wraps, drop the chip typography with it. A NACE label runs to
     three lines here ("KRUIDENTEELT : KAPPERS, VENKELZAAD, PETERSELIE, KERVEL,
     DRAGON, MARJOLEIN, ENZ"), and three lines of letter-spaced capitals is a
     shout, not a label. Uppercase earns its place on a two-word status chip. */
  text-transform: none;
  letter-spacing: 0;
  padding: 3px 9px;
}
.estab-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; white-space: nowrap; }
.estab-since { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.estab-num { font-size: 11px; color: var(--fg-mute); }
@media (max-width: 560px) {
  .estab-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .estab-side { flex-direction: row; align-items: baseline; justify-content: space-between; text-align: left; }
}

/* ───── KBO registry card (activities / names / office / history) ───── */
.reg-section { margin-bottom: 18px; }
.reg-section:last-of-type { margin-bottom: 8px; }
.reg-section .label-caps { margin-bottom: 8px; }
.reg-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.reg-acts .chip { gap: 5px; }
.reg-nace-code { font-family: var(--mono); font-size: 10px; color: var(--fg-mute); margin-left: 6px; }
.reg-acts .chip.info .reg-nace-code { color: #1d4ed8; opacity: .7; }
.reg-legend { font-size: 11px; color: var(--fg-mute); margin-top: 7px; }
.reg-office { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.reg-timeline { list-style: none; margin: 0; padding: 0; }
.reg-event {
  display: flex; align-items: baseline; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line-soft);
}
.reg-event:last-child { border-bottom: 0; }
.reg-event-dot {
  flex: 0 0 auto; width: 6px; height: 6px; border-radius: var(--r-full);
  background: var(--fg-mute); transform: translateY(-1px);
}
.reg-event-date { flex: 0 0 auto; font-size: 12px; color: var(--fg-mute); min-width: 84px; }
.reg-event-kind { font-size: 13px; color: var(--ink-soft); }

/* ───── financieel profiel (5-axis radar) ───── */
.finprofile-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.finprofile-fig { flex: 0 0 auto; max-width: 100%; }
/* The SVG ships fixed width/height attrs + a viewBox; let it scale down with
   its container on narrow screens while preserving aspect ratio. */
.radar-chart { max-width: 100%; height: auto; }
.radar-chart .radar-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.radar-chart .radar-score { font-family: var(--mono); font-size: 10px; }
.finprofile-side { flex: 1; min-width: 220px; }
/* Compact: stacked under the Checked score in the hero aside. Radar centred,
   legend full width beneath it, no verdict prose. */
.finprofile-wrap.compact { flex-direction: column; align-items: stretch; gap: 12px; }
.finprofile-wrap.compact .finprofile-fig { align-self: center; }
.finprofile-wrap.compact .finprofile-side { min-width: 0; }
/* Compact: the radar already prints every axis label and score at its vertices,
   so the legend beneath it was the same five numbers a second time (seen on the
   r230 render: "Gezondheid 94 ... Stabiliteit 100" twice within 200px). */
.finprofile-wrap.compact .finprofile-legend { display: none; }
.finprofile-avg { display: flex; align-items: baseline; gap: 6px; }
.finprofile-avg .fp-avg-num { font-family: var(--mono); font-size: var(--ds-fs-39); font-weight: 600; line-height: 1; }
.finprofile-avg .fp-avg-den { font-family: var(--mono); color: var(--fg-mute); }
.finprofile-verdict { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink-soft); margin: 10px 0 16px; }
.finprofile-legend { display: flex; flex-direction: column; gap: 7px; }
.fp-legend-row { display: flex; align-items: center; gap: 10px; }
.fp-legend-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--bg-mid); overflow: hidden; }
.fp-legend-bar > span { display: block; height: 100%; border-radius: var(--r-full); }
.fp-legend-label { font-size: 12px; color: var(--fg-mid); width: 96px; flex-shrink: 0; }
.fp-legend-score { font-size: 12px; color: var(--ink-soft); width: 26px; text-align: right; }
@media (max-width: 560px) {
  /* Stack the radar over its read-out panel and keep both centered. */
  .finprofile-wrap { gap: 18px; justify-content: center; flex-direction: column; align-items: stretch; }
  .finprofile-fig { align-self: center; }
  .finprofile-side { min-width: 0; width: 100%; }
  .finprofile-avg { justify-content: center; }
  .finprofile-avg .fp-avg-num { font-size: var(--ds-fs-31); }
  .finprofile-verdict { font-size: 15.5px; line-height: 1.4; text-align: center; margin: 8px 0 14px; }
  /* Let the axis label flex instead of a fixed width so long FR labels wrap. */
  .fp-legend-label { width: auto; flex: 1; }
}

/* ───── Belgium province grid-cartogram ───── */
.cartogram { display: flex; flex-direction: column; gap: 16px; }
.cartogram-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cartogram-title { font-family: var(--serif); font-size: 17px; color: var(--ink-soft); }
.cartogram-total { font-size: 13px; color: var(--fg-mute); }
.cartogram-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(72px, 1fr));
  grid-template-rows: repeat(5, auto);
  gap: 8px;
  max-width: 560px;
  margin-inline: auto;
}
.cartogram-tile {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 64px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  transition: box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.cartogram-tile:hover { box-shadow: var(--shadow-1); }
.cartogram-tile.is-empty { opacity: 0.55; }
.cartogram-tile .ct-name { font-size: 11px; font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; }
.cartogram-tile .ct-abbr { display: none; font-size: 11px; font-weight: 600; }
.cartogram-tile .ct-value { font-size: var(--ds-fs-16); font-weight: 600; line-height: 1; margin-top: 2px; }
.cartogram-legend { display: flex; align-items: center; gap: 8px; }
.cartogram-legend .cl-label { font-size: 11px; color: var(--fg-mute); }
.cartogram-legend .cl-ramp { display: inline-flex; gap: 0; border-radius: var(--r-sm); overflow: hidden; }
.cartogram-legend .cl-ramp i { display: block; width: 22px; height: 10px; }
.cartogram-legend .cl-max { margin-left: auto; font-size: 11px; color: var(--fg-mute); }
@media (max-width: 560px) {
  /* minmax(0,1fr) lets the 5-col grid shrink to fit the card instead of
     overflowing on the narrowest phones; abbreviations keep tiles legible. */
  .cartogram-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; max-width: 100%; }
  .cartogram-tile { min-height: 52px; padding: 6px 4px; align-items: center; text-align: center; }
  .cartogram-tile .ct-name { display: none; }
  .cartogram-tile .ct-abbr { display: block; }
  .cartogram-tile .ct-value { font-size: 13px; }
  /* Legend can crowd at this width — let the max-count label drop to a new row. */
  .cartogram-legend { flex-wrap: wrap; row-gap: 4px; }
}

/* ───── tabs ───── */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;       /* snap each tab to the start edge on scroll */
  scrollbar-width: none;               /* Firefox: hide the horizontal scrollbar */
  -webkit-overflow-scrolling: touch;   /* momentum scroll on iOS */
}
.tabs::-webkit-scrollbar { display: none; }   /* WebKit/Blink: hide the scrollbar */
.tabs button, .tabs a {
  font-size: 14px;
  color: var(--fg-mute);
  padding: 12px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-settle);
  white-space: nowrap;
  font-weight: 500;
  /* anchor resets so routed <a> tabs match the original button look exactly */
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  background: none;
  cursor: pointer;
  scroll-snap-align: start;
}
.tabs button:hover, .tabs a:hover { color: var(--ink-soft); }
.tabs button.active, .tabs a.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.tabs button .count, .tabs a .count {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  margin-left: 6px; background: var(--bg-low); padding: 1px 6px; border-radius: var(--r-full);
}

/* ───── segmented ───── */
.seg {
  display: inline-flex;
  background: var(--bg-low);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 2px;
}
.seg button {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 3px;
  color: var(--fg-mute);
  font-weight: 500;
}
.seg button.active { background: var(--bg-lowest); color: var(--ink); box-shadow: var(--shadow-1); }

/* ───── distress signal row ─────
   White rows; the risk colour rides on a 3px left accent + the icon —
   never on the row fill (light doctrine). */
.signal {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  font-size: 13px;
}
.signal .ico {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm);
}
.signal.low { border-left-color: var(--risk-low); }
.signal.med { border-left-color: var(--risk-med); }
.signal.high { border-left-color: var(--risk-high); }
.signal.low .ico { color: #047857; }
.signal.med .ico { color: #b45309; }
.signal.high .ico { color: #b91c1c; }
.signal .src { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); margin-left: auto; }

/* ───── timeline ───── */
.timeline { position: relative; padding-left: 22px; }
.timeline::before {
  content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1px; background: var(--line);
}
.tl-row {
  position: relative;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 16px;
  align-items: center;
}
.tl-row:last-child { border-bottom: 0; }
.tl-row::before {
  content: ""; position: absolute; left: -19px; top: 22px;
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--bg-lowest); border: 2px solid var(--fg-mute);
}
.tl-row.low::before { border-color: var(--risk-low); }
.tl-row.med::before { border-color: var(--risk-med); }
.tl-row.high::before { border-color: var(--risk-high); background: var(--risk-high); }
.tl-date { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.tl-body { font-size: 13px; }
.tl-body .name { font-weight: 500; color: var(--ink-soft); }
.tl-body .meta { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); margin-top: 3px; }

/* ───── benchmark bar ───── */
.bench { display: grid; grid-template-columns: 160px 1fr 70px; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.bench:last-child { border-bottom: 0; }
.bench .label { font-size: 13px; color: var(--fg); }
.bench .num { font-family: var(--mono); font-size: 12px; text-align: right; color: var(--ink-soft); }
.bench .track { position: relative; height: 8px; background: var(--bg-mid); border-radius: var(--r-full); overflow: visible; }
.bench .track .median { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--ink); }
.bench .track .you { position: absolute; top: -2px; width: 12px; height: 12px; border-radius: var(--r-full); background: var(--ink); transform: translateX(-6px); border: 2px solid var(--bg-lowest); box-shadow: 0 0 0 1px var(--ink); }
.bench .track .range { position: absolute; top: 1px; bottom: 1px; background: var(--data-blue-bg); border-radius: var(--r-full); border: 1px solid #bfdbfe; }

/* ───── donut gauge ───── */
.gauge { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.gauge .ring { transform: rotate(-90deg); }
.gauge .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.gauge .num {
  font-family: var(--mono);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1;
}
.gauge .of { font-size: 10px; color: var(--fg-mute); font-family: var(--mono); margin-top: 2px; }

/* ───── ribbon (small horizontal stats) ───── */
.ribbon {
  display: flex; gap: 0;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 22px;
}
.ribbon .seg-r {
  padding: 0 22px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: 4px;
  flex: 1; min-width: 0;
}
.ribbon .seg-r:first-child { padding-left: 0; }
.ribbon .seg-r:last-child { border-right: 0; padding-right: 0; }
.ribbon .seg-r .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--fg-mute); }
.ribbon .seg-r .value { font-size: var(--ds-fs-20); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ribbon .seg-r .sub { font-family: var(--mono); font-size: 11px; color: var(--fg-mute); }

/* ───── hero search ───── */
.hero-search {
  width: 100%;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 8px 8px 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out);
}
.hero-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(16, 24, 40, 0.06);
}
.hero-search .ico { color: var(--fg-mute); display: inline-flex; }
.hero-search input {
  flex: 1; min-width: 0;
  padding: 14px 4px;
  font-size: var(--ds-fs-16);
  background: transparent;
  border: 0; outline: none;
  letter-spacing: -0.005em;
}
.hero-search input::placeholder { color: var(--fg-mute); }
.hero-search .btn { padding: 12px 20px; font-size: 14px; }

/* ───── value-prop tile ───── */
.tile {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  text-align: left;
  cursor: pointer;
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
  display: flex; flex-direction: column;
  gap: 14px;
}
.tile:hover { background: var(--bg); border-color: var(--line-strong); transform: translateY(-1px); }
.tile .ico-wrap {
  width: 40px; height: 40px;
  border-radius: var(--r-full);
  background: var(--bg-low);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.tile .head { font-size: var(--ds-fs-18); font-weight: 600; color: var(--ink-soft); letter-spacing: -0.005em; }
.tile .body { font-size: 14px; color: var(--fg-mid); line-height: 1.5; }
.tile .footer-row {
  margin-top: auto;
  padding: 12px 14px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: space-between;
}

/* ───── landing-page value props (.lp-*) ───── */
.lp-value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.lp-vcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle), box-shadow var(--ds-dur-2) var(--ds-ease-settle);
}
.lp-vcard:hover {
  background: var(--bg);
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--ds-elev-3);
}
.lp-vcard .ico-wrap {
  width: 38px; height: 38px;
  border-radius: var(--r-full);
  background: var(--bg-low);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-soft);
}
.lp-vhead {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}
.lp-vbody {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-mid);
  flex: 1;
}
.lp-vlink {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.lp-vcard:hover .lp-vlink { color: var(--ds-accent-deep); }

@media (max-width: 1024px) {
  .lp-value-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .lp-value-grid { grid-template-columns: 1fr; gap: 12px; }
  .lp-vcard { padding: 18px; }
}

/* ════════════════════════════════════════════════════════════════════
   Pricing page — 2026-07 editorial redesign (.pricing-v2)
   ────────────────────────────────────────────────────────────────────
   Replaces the rejected 3-column tier grid with a narrative page built
   around a philosophy: a full-bleed FREE band (the wedge), a warm
   first-person philosophy note, a "support us + unlock" PLUS section and
   a bespoke consultation block. LIGHT doctrine throughout — white/warm
   surfaces, hairlines, ONE emerald accent, generous air, no dark fills.
   All transform/entrance motion is gated behind prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

/* Section rhythm — generous whitespace between movements. */
.pricing-v2 .pr-head { max-width: 720px; padding: 12px 0 0; }
.pricing-v2 .pr-head-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-39);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ds-ink);
  margin: 12px 0 0;
}
.pricing-v2 .pr-head-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 60ch;
}

/* ── FREE — full-bleed band. The negative-margin bleed reaches the viewport
   edges; html/body { overflow-x: clip } (top of this file) absorbs the
   scrollbar-width overflow so the page never scrolls sideways. ── */
.pricing-v2 .pr-free {
  width: 100vw;
  margin: 40px 0 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 52px 0;
  background: var(--ds-accent-soft);
  border-top: 1px solid var(--ds-good-border);
  border-bottom: 1px solid var(--ds-good-border);
}
.pricing-v2 .pr-free-inner {
  max-width: var(--ds-content-max);
  margin: 0 auto;
  padding: 0 32px;
}
.pricing-v2 .pr-free-top {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-free-price {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-48);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ds-accent-deep);
  line-height: 1;
}
.pricing-v2 .pr-free-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ds-ink);
  margin: 12px 0 0;
  max-width: 24ch;
}
.pricing-v2 .pr-free-lead {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 10px 0 0;
  max-width: 58ch;
}

/* Feature grid — airy, scannable, light (shared by Free + Plus). */
.pricing-v2 .pr-feat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px 28px;
  margin: 32px 0 28px;
}
.pricing-v2 .pr-plus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
  margin: 24px 0;
}
.pricing-v2 .pr-feat { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.pricing-v2 .pr-feat-ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  border: 1px solid var(--ds-good-border);
  color: var(--ds-accent);
  box-shadow: var(--ds-elev-1);
}
.pricing-v2 .pr-feat-ico-plus { border-color: var(--ds-line); }
.pricing-v2 .pr-feat-txt { min-width: 0; }
.pricing-v2 .pr-feat-label {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.3;
}
.pricing-v2 .pr-feat-desc {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.45;
  margin-top: 3px;
}

/* CTA rows — button + honest microcopy inline. */
.pricing-v2 .pr-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-cta-note {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  max-width: 44ch;
}

/* ── Philosophy — centred, warm, first-person. ── */
.pricing-v2 .pr-philo {
  max-width: 760px;
  margin: 64px auto 0;
  text-align: center;
}
.pricing-v2 .pr-philo-quote {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 14px 0 0;
}
.pricing-v2 .pr-philo-quote em { font-style: italic; color: var(--ds-accent-deep); font-weight: 600; }
.pricing-v2 .pr-philo-sign {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  margin-top: 18px;
}

/* ── PLUS — support + unlock. A single warm panel (NOT a compare column):
   emerald left accent, soft elevation. ── */
.pricing-v2 .pr-plus {
  margin: 56px 0 0;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-accent);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-2);
  padding: 32px;
  transition: box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
.pricing-v2 .pr-plus-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px 24px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-plus-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ds-ink);
  margin: 0;
  max-width: 30ch;
}
.pricing-v2 .pr-plus-price {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
  white-space: nowrap;
}
.pricing-v2 .pr-plus-price span { font-size: var(--ds-fs-13); color: var(--ds-fg-mute); font-weight: 500; }
.pricing-v2 .pr-plus-lead {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 14px 0 0;
  max-width: 66ch;
}
/* The billing terms under the Plus CTA: what recurs, which VAT, where to
   cancel. Quiet by design (it is reassurance, not a sales claim) but never
   hidden, and set on a readable measure rather than squeezed next to the
   button like the short CTA note. */
.pricing-v2 .pr-plus-terms {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.6;
  margin: 18px 0 0;
  max-width: 78ch;
}
.pricing-v2 .pr-plus-terms a {
  color: var(--ds-ink);
  font-weight: 500;
  text-decoration: underline;
}

/* ── THE OFFICE LADDER: three plans sized on monitored companies, plus the
   yearly/monthly switch. Still LIGHT doctrine: white surfaces, hairlines, one
   emerald accent on the anchor card only. The anchor is emphasised by a
   thicker accent border and a badge, never by a dark fill. ── */
.pricing-v2 .pr-office { margin: 56px 0 0; }
.pricing-v2 .pr-office-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 24px;
  flex-wrap: wrap;
}

/* Billing-period switch. Two links, not a control: the page is static SSR. */
.pricing-v2 .pr-interval {
  display: inline-flex;
  background: var(--ds-line-soft);
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.pricing-v2 .pr-interval-opt {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-fg-mid);
  text-decoration: none;
  padding: 7px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.pricing-v2 .pr-interval-on {
  background: var(--ds-surface);
  color: var(--ds-ink);
  box-shadow: var(--ds-elev-1);
}

.pricing-v2 .pr-plan-grid {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
}
.pricing-v2 .pr-plan {
  position: relative;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.pricing-v2 .pr-plan-anchor {
  border-color: var(--ds-accent);
  border-top: 3px solid var(--ds-accent);
  box-shadow: var(--ds-elev-2);
}
.pricing-v2 .pr-plan-badge {
  position: absolute;
  top: -11px;
  left: 24px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.pricing-v2 .pr-plan-name {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-24);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
}
.pricing-v2 .pr-plan-monitor {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  margin-top: 4px;
}
.pricing-v2 .pr-plan-price {
  margin-top: 16px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.pricing-v2 .pr-plan-amount {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ds-ink);
}
.pricing-v2 .pr-plan-per {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  font-weight: 500;
}
.pricing-v2 .pr-plan-vat {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin-top: 2px;
}
/* Bounce-back notice from /billing/checkout when no Session could be created.
   States plainly that nothing was charged, which is the buyer's first question. */
.pricing-v2 .pr-notice {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-ink);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 10px;
  line-height: 1.6;
  padding: 12px 14px;
  margin: 0 0 18px;
}
/* Shown instead of a pay button when the plan has no Stripe Price configured.
   Muted, not alarming: the plan is real, only the self-serve till is not open. */
.pricing-v2 .pr-plan-unavailable {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  margin: 8px 0 0;
}
.pricing-v2 .pr-plan-save {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-accent-deep);
  margin-top: 8px;
}
.pricing-v2 .pr-plan-list {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.pricing-v2 .pr-plan-list li {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}
.pricing-v2 .pr-plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--ds-accent-soft, var(--ds-line));
  border: 1px solid var(--ds-accent);
}
.pricing-v2 .pr-plan-cta { margin-top: 22px; }
.pricing-v2 .pr-plan-cta .btn { width: 100%; justify-content: center; }

/* ── What "per office" means: the three sentences that carry the whole
   packaging decision. ── */
.pricing-v2 .pr-seats {
  margin: 44px 0 0;
  padding-top: 26px;
  border-top: 1px solid var(--ds-line);
}
.pricing-v2 .pr-seats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.pricing-v2 .pr-seat-item strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 4px;
}
.pricing-v2 .pr-seat-item span {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .pricing-v2 .pr-plan-grid,
  .pricing-v2 .pr-seats-grid { grid-template-columns: 1fr; }
}

/* ── CUSTOM — bespoke consultation block (a conversation, not a price). ── */
.pricing-v2 .pr-custom {
  margin: 40px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  padding: 28px 32px;
}
.pricing-v2 .pr-custom-txt { max-width: 640px; }
.pricing-v2 .pr-custom-title {
  font-family: var(--ds-serif);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-ink);
  margin: 0 0 8px;
}
.pricing-v2 .pr-custom-body {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.6;
  margin: 0;
}

/* ── Closing reassurance strip. ── */
.pricing-v2 .pr-trust {
  margin: 40px 0 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid var(--ds-line);
}
.pricing-v2 .pr-trust-item { display: flex; gap: 11px; align-items: flex-start; }
.pricing-v2 .pr-trust-ico { flex: 0 0 auto; color: var(--ds-fg-mid); margin-top: 1px; }
.pricing-v2 .pr-trust-item strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  margin-bottom: 3px;
}
.pricing-v2 .pr-trust-item span {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}

/* Entrance — staggered fade+rise, reuses the shared ck-card-in keyframe.
   STRICTLY gated: under reduced motion every block is simply present. */
@media (prefers-reduced-motion: no-preference) {
  .pricing-v2 .pr-head,
  .pricing-v2 .pr-free,
  .pricing-v2 .pr-philo,
  .pricing-v2 .pr-plus,
  .pricing-v2 .pr-office,
  .pricing-v2 .pr-seats,
  .pricing-v2 .pr-custom,
  .pricing-v2 .pr-trust {
    animation: ck-card-in var(--ds-dur-3) var(--ds-ease-out) both;
  }
  .pricing-v2 .pr-free { animation-delay: 60ms; }
  .pricing-v2 .pr-philo { animation-delay: 120ms; }
  .pricing-v2 .pr-plus { animation-delay: 160ms; }
  .pricing-v2 .pr-office { animation-delay: 160ms; }
  .pricing-v2 .pr-seats { animation-delay: 200ms; }
  .pricing-v2 .pr-custom { animation-delay: 240ms; }
  .pricing-v2 .pr-trust { animation-delay: 280ms; }
  .pricing-v2 .pr-plan:hover { box-shadow: var(--ds-elev-3); transform: translateY(-2px); }
  .pricing-v2 .pr-plan { transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle); }
  .pricing-v2 .pr-plus:hover { box-shadow: var(--ds-elev-3); transform: translateY(-2px); }
  .pricing-v2 .pr-plus { transition: box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle); }
}

/* Responsive — the full-bleed band and every grid stack cleanly. */
@media (max-width: 960px) {
  .pricing-v2 .pr-feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-v2 .pr-plus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing-v2 .pr-trust { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 560px) {
  .pricing-v2 .pr-feat-grid { grid-template-columns: 1fr; }
  .pricing-v2 .pr-plus-grid { grid-template-columns: 1fr; }
  .pricing-v2 .pr-free { padding: 36px 0; }
  .pricing-v2 .pr-free-inner { padding: 0 20px; }
  .pricing-v2 .pr-plus { padding: 24px 20px; }
  .pricing-v2 .pr-custom { padding: 22px 20px; }
  .pricing-v2 .pr-head-title { font-size: var(--ds-fs-31); }
}

/* ───── sparkline ───── */
.spark { display: block; width: 100%; height: 32px; }

/* ───── progress (thin sector benchmark) ───── */
.bar-track {
  width: 100%; height: 6px; background: var(--bg-mid);
  border-radius: var(--r-full); overflow: hidden;
  position: relative;
}
.bar-track .fill { height: 100%; border-radius: var(--r-full); }

/* ───── analyzer (live demo) ───── */
.analyzer {
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.analyzer-h {
  background: var(--bg-lowest);
  color: var(--fg-mid);
  border-bottom: 1px solid var(--line);
  padding: 10px 18px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.analyzer-h .dots { display: flex; gap: 5px; }
.analyzer-h .dots span { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line); }
.analyzer-body { padding: 26px; }
.analyzer-q {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mid);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.analyzer-q .p { color: var(--data-blue); margin-right: 8px; }
.analyzer-q .v { color: var(--ink); }
.cursor { display: inline-block; width: 7px; height: 13px; background: var(--ink); margin-left: 2px; vertical-align: middle; animation: blink 1s ease-in-out infinite; }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ───── ticker ───── */
.ticker-wrap {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  padding: 10px 0;
  overflow: hidden;
  position: relative;
}
.ticker {
  display: flex; gap: 36px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mid);
  white-space: nowrap;
  animation: ticker 48s linear infinite;
  width: max-content;
}
.ticker .item { display: inline-flex; gap: 8px; align-items: center; }
.ticker .item .dot { width: 6px; height: 6px; border-radius: var(--r-full); }
.ticker .item .label { color: var(--ink-soft); font-weight: 500; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ───── small ui ───── */
.kbo { font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.dot-sep { color: var(--fg-dim); margin: 0 8px; }

/* Company monogram avatar — deterministic colour/initials are set inline by
   CompanyAvatar.razor (background + color + size + font-size). This rule only
   owns the static, design-token presentation. */
.company-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  box-shadow: var(--shadow-1);
  font-family: var(--serif, Fraunces, Georgia, serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  user-select: none;
}

/* KBO number + copy button live together so the icon hugs the number. */
.kbo-wrap { display: inline-flex; align-items: center; gap: 4px; }
.kbo-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg-mute);
  cursor: pointer;
  transition: color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out);
}
.kbo-copy:hover { color: var(--ink-soft); background: var(--bg-low); border-color: var(--line-soft); }
.kbo-copy:active { transform: scale(0.92); }
.kbo-copy svg { display: block; }
/* Confirmation state — the JS swaps the icon for a localized "Copied!" label
   and toggles .copied for ~1.5s. Render it as a compact emerald pill. */
.kbo-copy.copied {
  width: auto;
  padding: 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--data-emerald);
  background: var(--bg-low);
  border-color: var(--line-soft);
}
.kbd {
  display: inline-flex; font-family: var(--mono); font-size: 11px;
  background: var(--bg-lowest); border: 1px solid var(--line);
  padding: 1px 6px; border-radius: 3px; color: var(--fg-mid);
  box-shadow: 0 1px 0 var(--line);
}

/* ───── focus ───── */
:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; }

/* ───── animations ───── */
@keyframes aiPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* range inputs */
input[type="range"] {
  height: 22px;
  cursor: pointer;
}

/* ───── scrollbars ─────
   Owner pref (2026-06-12): hidden site-wide. Content still scrolls via
   wheel / trackpad / keyboard — we just never paint a bar. Paired with
   `color-scheme: light` on the root so browser dark-mode can't render a
   dark/black OS bar on the light surface. */
* { scrollbar-width: none; -ms-overflow-style: none; }   /* Firefox + legacy Edge */
::-webkit-scrollbar { width: 0; height: 0; display: none; }   /* WebKit / Blink */

/* ───── density (compact tweak) ───── */
.density-compact .card-b { padding: 14px; }
.density-compact table.t tbody td { padding: 8px 12px; }
.density-compact table.t thead th { padding: 8px 12px; }

/* ───── footer ───── */
footer.app-footer {
  margin-top: 56px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
footer.app-footer .inner {
  max-width: 1440px; margin: 0 auto; padding: 0 32px;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 24px; flex-wrap: wrap;
}
footer.app-footer .brand { font-weight: 700; font-size: var(--ds-fs-16); letter-spacing: -0.015em; color: var(--ink); }
footer.app-footer .links {
  display: flex; gap: 22px; flex-wrap: wrap;
}
footer.app-footer .links a {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--fg-mute);
}
footer.app-footer .links a:hover { color: var(--ds-accent-deep); }
footer.app-footer .copy { font-size: 12px; color: var(--fg-mid); margin-top: 4px; }
/* Footer column headers — a short accent dash so each group reads as a column.
   Markup-free: targets the existing .label-caps directly inside footer columns. */
footer.app-footer .label-caps {
  display: flex;
  align-items: center;
  gap: 7px;
}
footer.app-footer .label-caps::before {
  content: "";
  width: 12px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
  opacity: 0.65;
}

/* ───── locked skeleton (paywall reveal) ──────────────────────────────────── */
.locked-skeleton {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(90deg, var(--bg-mid) 0%, var(--bg-high) 50%, var(--bg-mid) 100%);
  background-size: 200% 100%;
  border-radius: 3px;
  cursor: not-allowed;
  padding: 0 6px;
  position: relative;
  border: 1px dashed var(--line-strong);
  user-select: none;
  animation: skel-shimmer 4s ease-in-out infinite;
  filter: blur(0.4px);
}
.locked-skeleton:hover {
  background: linear-gradient(90deg, var(--bg-high), var(--bg-highest), var(--bg-high));
  filter: none;
}
/* Neutral lock affordance — a small dot marker, no emoji (owner doctrine:
   NO emoji as UI icons). The dashed border + shimmer already read as "locked";
   this is just a subtle corner tick. */
.locked-skeleton::after {
  content: "";
  position: absolute;
  right: -3px; top: -3px;
  width: 6px; height: 6px;
  background: var(--fg-mute);
  border: 1px solid var(--bg-lowest);
  border-radius: var(--r-full);
}

@keyframes skel-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ───── streaming dossier skeleton (perf-life wave) ───────────────────────
   Shown by CompanyDetail during [StreamRendering] while the heavy panels
   stream in. The hero is REAL (name + KBO from the synchronously-resolved
   spine); the panels are neutral placeholder blocks — NO emoji, no lock —
   swapped for content when the stream completes. Shimmer is reduced-motion
   gated; under reduced motion the blocks are simply a static light surface. */
.ck-skel-hero { padding: 4px 0 2px; }
.ck-skel-hero-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0;
}
.ck-skel-hero-meta { margin-top: 8px; font-size: 13px; color: var(--fg-mute); }
.ck-skel-dot { margin: 0 6px; color: var(--fg-dim); }
.ck-skel-kbo { font-family: var(--mono); font-size: 11px; }
.ck-skel-stack { display: flex; flex-direction: column; gap: 22px; margin-top: 22px; }
.ck-skel-panel {
  height: 150px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg-high);
}
.ck-skel-panel-tall { height: 240px; }
.ck-skel-note { margin-top: 16px; font-size: 12px; color: var(--fg-mute); text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .ck-skel-panel {
    background: linear-gradient(90deg, var(--bg-mid) 0%, var(--bg-high) 50%, var(--bg-mid) 100%);
    background-size: 200% 100%;
    animation: skel-shimmer 4s ease-in-out infinite;
  }
}

/* ════════════════════════════════════════════════
   Responsive — three breakpoints
   ──────────────────────────────────────────────────
   ≤ 1024px  tablet  — collapse 4-col grids to 2, 3-col to 2
   ≤  768px  mobile  — collapse all grids to 1, scroll the nav,
                       wrap stat ribbons, shrink hero typography
   ≤  480px  phone   — tighten paddings, drop secondary chrome bits
   ════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  /* Page chrome — give back horizontal breathing room */
  .page { padding: 24px 20px; }
  .chrome-inner { padding: 0 20px; gap: 16px; }

  /* Wider grids collapse to 2 cols */
  .g-4 { grid-template-columns: 1fr 1fr; }
  .g-3 { grid-template-columns: 1fr 1fr; }

  /* Hero stat ribbon (5 segments inline) — wrap to 3+2 */
  .ribbon { flex-wrap: wrap; }
  .ribbon .seg-r { min-width: 140px; padding: 10px 16px; }
}

@media (max-width: 768px) {
  body { font-size: 13.5px; }

  .page { padding: 16px 14px; }
  .page.narrow { padding: 16px 14px; }

  /* Chrome — let it scroll horizontally instead of wrapping
     awkwardly. Logo + lang switch + auth button stay sticky-left. */
  .chrome-inner {
    padding: 0 14px;
    height: 56px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .chrome-inner::-webkit-scrollbar { display: none; }
  .chrome nav {
    gap: 14px;
    flex-shrink: 0;
  }
  .chrome nav a {
    font-size: 13px;
    white-space: nowrap;
  }
  .chrome .spacer { display: none; }
  /* Hide the in-chrome search on mobile — header is already crowded
     and ⌘K palette + the /companies search input cover this. */
  .chrome-search { display: none; }
  /* Brand stays visible but tighter */
  .chrome > a:first-child {
    font-size: var(--ds-fs-18) !important;
  }

  /* Display headings — Fraunces at 64px breaks on small screens */
  .h-display { font-size: var(--ds-fs-31); line-height: 1.1; }
  .h1        { font-size: var(--ds-fs-25); line-height: 1.15; }
  .h2        { font-size: var(--ds-fs-20); line-height: 1.2; }

  /* All multi-col grid helpers collapse */
  .g-2, .g-3, .g-4 { grid-template-columns: 1fr; gap: 12px; }
  .row { flex-direction: column; }

  /* Stat ribbon — wrap segments to 2 per row */
  .ribbon {
    padding: 14px 16px;
    gap: 12px;
  }
  .ribbon .seg-r {
    flex: 0 0 calc(50% - 6px);
    padding: 8px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ribbon .seg-r:nth-last-child(-n+2) { border-bottom: 0; }
  .ribbon .seg-r .value { font-size: var(--ds-fs-18); }

  /* Tables — horizontal scroll instead of wrapping cells.
     Wrap call sites with .table-scroll if you want this without
     full-width container assumptions. */
  table.t {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  table.t thead th,
  table.t tbody td { padding: 8px 10px; font-size: 12.5px; }

  /* Cards — reduce padding */
  .card-h { padding: 12px 14px; }
  .card-b { padding: 14px; }

  /* Financial sparkline wall — guarantee a clean 2-up at tablet/large-phone
     instead of auto-fill cramming 3 narrow tiles. */
  .metric-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .metric-tile { padding: 11px 12px 10px; }

  /* Health component breakdown → single column so labels never truncate. */
  .health-components { grid-template-columns: 1fr; gap: 0 14px; }

  /* Hero search — full width, smaller padding */
  .hero-search { padding: 6px 6px 6px 12px; }
  .hero-search input { font-size: 15px; padding: 12px 4px; }
  .hero-search .btn { padding: 10px 14px; font-size: 13px; }

  /* Tile padding */
  .tile { padding: 18px; }

  /* KPI value font shrinks */
  .kpi .value { font-size: var(--ds-fs-20); }
  .kpi .value.lg { font-size: var(--ds-fs-25); }

  /* Tabs — already horizontal-scroll, just shrink */
  .tabs button, .tabs a { padding: 10px 12px; font-size: 13px; }

  /* Timeline grid (110px date col) is too wide */
  .tl-row {
    grid-template-columns: 80px 1fr;
    gap: 10px;
  }
  .tl-row > :nth-child(3) { display: none; }

  /* Footer — stack columns, smaller links */
  footer.app-footer .inner { padding: 0 14px; gap: 16px; }
  footer.app-footer .links { gap: 12px; }
  footer.app-footer .links a { font-size: 10.5px; }

  /* Force inline 2-col hero layouts (Home, etc.) to stack on mobile.
     The Home hero uses inline grid-template-columns; this overrides. */
  section[style*="grid-template-columns: 1.05fr 0.95fr"],
  section[style*="grid-template-columns:1.05fr 0.95fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Inline section grids inside the hero need the same treatment */
  section > div[style*="grid-template-columns: 1.05fr 0.95fr"],
  section > div[style*="grid-template-columns:1.05fr 0.95fr"],
  section > div[style*="grid-template-columns: repeat(5"],
  section > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
  }
  /* Hero serif headline — inline 64px override */
  .serif[style*="font-size:64px"] { font-size: var(--ds-fs-39) !important; line-height: 1.05 !important; }

  /* Analyzer card (live preview in Home hero) — give it breathing room */
  .analyzer-body { padding: 18px; }

  /* Lang switch is 3 chips — let it stay but on phones drop it */
  .lang-switch { flex-shrink: 0; }

  /* Company monogram avatar shrinks so the dossier header name block keeps
     its breathing room on narrow screens. The inline width/height/font-size
     are overridden here. */
  .company-avatar {
    width: 44px !important;
    height: 44px !important;
    font-size: var(--ds-fs-18) !important;
  }
}

@media (max-width: 480px) {
  .page { padding: 12px 10px; }
  .chrome-inner { padding: 0 10px; height: 52px; }
  .chrome nav { gap: 10px; }

  /* Lang switch + sign-in button cumulatively crowd; drop the lang
     switch in favor of URL-prefix navigation */
  .lang-switch { display: none; }

  /* Editorial heading further down */
  .h-display { font-size: var(--ds-fs-25); }
  .h1        { font-size: var(--ds-fs-20); }

  /* Hero stats: single column on phones */
  section > div[style*="grid-template-columns: repeat(5"],
  section > div[style*="grid-template-columns:repeat(5"] {
    grid-template-columns: 1fr !important;
  }

  /* Card padding */
  .card-h { padding: 10px 12px; }
  .card-b { padding: 12px; }

  /* Chips smaller on phone */
  .chip { font-size: 11px; padding: 2px 7px; }

  /* Sparkline tiles go 1-up on phones — two tiles would leave the 20px mono
     value cramped at ~150px wide. */
  .metric-grid { grid-template-columns: 1fr; }
}

/* ───── gated / paywall block (GatedSection) ─────
   Light + inviting: white card, dashed hairline, readable slate hint,
   the CTA (an emerald .btn.primary passed by the caller) carries the
   colour. Never a gray box. */
.gated-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 28px 24px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.gated-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-mid);
  max-width: 52ch;
}

/* CTA strip under a locked card body */
.locked-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--fg-mid);
}
.locked-cta .text { display: inline-flex; gap: 6px; align-items: center; }

/* ───── LockedInsight: the paid gate on a dossier section ─────
   Left-aligned and prose-shaped rather than a centred CTA box, because this
   panel has to READ: it names the section, the question it answers and the
   measured size of what sits behind it. A centred one-liner cannot carry that.

   No status colour anywhere on purpose. A lock is not a finding: painting it
   amber would manufacture worry to drive a signup, and painting it green would
   make a gate look like a clean result, which is the exact defect the absence
   sweep removed. Neutral slate, dashed hairline, accent only on the button. */
.locked-insight {
  padding: 18px 20px;
  background: var(--bg-lowest);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
}
.locked-insight .li-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.locked-insight .li-ico { display: inline-flex; color: var(--fg-mute); line-height: 0; }
.locked-insight .li-title {
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.locked-insight .li-answers {
  margin: 0 0 6px; font-size: 13px; line-height: 1.55;
  color: var(--fg-mid); max-width: 62ch;
}
.locked-insight .li-facts {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--fg-mute); max-width: 62ch;
}
.locked-insight .li-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
  margin-top: 14px;
}
.locked-insight .li-plan { font-size: 13px; color: var(--fg-mid); }

/* At 360px the plan line and the button cannot share a row without the button
   losing its label, so the footer stacks and the button goes full width. */
@media (max-width: 480px) {
  .locked-insight { padding: 16px 14px; }
  .locked-insight .li-foot { flex-direction: column; align-items: stretch; }
  .locked-insight .li-foot .btn { justify-content: center; }
}

/* Hard-red top banner (Beroepsverbod and similar) — white surface,
   red carried by the left accent + icon + title (indicator doctrine). */
.alert-banner {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--risk-high-border);
  border-left: 4px solid var(--risk-high);
  background: var(--bg-lowest);
  color: #7f1d1d;
  border-radius: var(--r-lg);
  margin-bottom: 20px;
}
.alert-banner .ico {
  width: 24px; height: 24px;
  flex-shrink: 0;
  color: var(--risk-high);
}
.alert-banner .title { font-weight: 600; font-size: 14px; color: var(--risk-high); margin-bottom: 4px; }
.alert-banner .body { font-size: 13px; line-height: 1.5; }

/* Reading coverage: how much of a company's gazette we have actually read.

   Replaces the green accent-washed ".exn" strip that used to sit under the hero.
   That strip was a bordered, shadowed, icon-led banner and it rendered on every
   dossier that was not fully processed, which on 2026-08-15 was 1.248.195 of
   1.257.190 companies. A banner on 99,3% of pages is furniture; this is a caption.

   Two forms, one voice. The LINE is the count only, under the hero, linked to
   Publicaties. The NOTE carries the full statement and the action, and it borrows
   the mig-211 truncation note's exact skin (hairline box, 3px neutral left rule,
   --ds-line-soft) because both say the same kind of thing: here is a limit on our
   evidence. Neutral tokens throughout, never --risk-*: an unread act is a fact
   about us, not a finding about the company. */
.ds-actcov-line {
  /* The margin lives here, not on a wrapper in the page, so a fully read dossier
     renders no element AND no gap where one would have been. */
  margin-top: 14px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ds-fg-mute);
}
.ds-actcov-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--ds-line);
  padding-bottom: 1px;
}
.ds-actcov-line a:hover,
.ds-actcov-line a:focus-visible { color: var(--ds-ink); border-bottom-color: var(--ds-fg-dim); }
.ds-actcov-label { font-weight: 500; }
.ds-actcov-count { font-variant-numeric: tabular-nums; color: var(--ds-fg-mid); }
.ds-actcov-line a:hover .ds-actcov-count { color: var(--ds-ink); }

.ds-actcov-note {
  margin: 0 0 14px;
  padding: 9px 12px;
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-fg-dim);
  border-radius: var(--ds-r-md);
  background: var(--ds-line-soft);
}
.ds-actcov-note-text {
  margin: 0;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
  max-width: 78ch;
}
.ds-actcov-note-action {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 0;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
}
.ds-actcov-note-action form { display: inline; margin: 0; }
.ds-actcov-hint { color: var(--ds-fg-mute); }
.ds-actcov-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}

/* ════════════════════════════════════════════════
   Accessibility
   ════════════════════════════════════════════════ */

/* ───── screen-reader-only ───── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Make skip-link visible on focus so keyboard users can activate it */
.sr-only:focus-visible {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  width: auto;
  height: auto;
  padding: 8px 16px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  background: var(--bg-lowest);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-pop);
}

/* ───── focus-visible outlines ───── */
/* Remove the global rule already present and replace with explicit interactive targets */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ───── reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
  /* Disable decorative keyframe animations that can trigger vestibular issues */
  @keyframes aiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
  }
  @keyframes skel-shimmer {
    0%, 100% { background-position: 0% 50%; }
  }
  /* Also freeze the ticker and cursor blink */
  .ticker { animation: none; }
  .cursor { animation: none; opacity: 1; }
}

/* ───── AI due-diligence brief (Analyse tab) ───── */
.dd-results {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.dd-block {
  padding: 14px 16px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  border-left: 3px solid var(--line-strong);
}
.dd-block.dd-flag {
  border-color: var(--risk-high-border);
  border-left-color: var(--risk-high);
}
.dd-block-h {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dd-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.dd-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.dd-list li {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.dd-flag .dd-list li::marker {
  color: var(--risk-high);
}

/* ───── /radar — sector-contagion radar ───── */
.radar-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.radar-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--bg-lowest);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
}
.radar-stat .rs-num {
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
}
.radar-stat .rs-lbl {
  font-size: 12px;
  color: var(--fg-mute);
}
.radar-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* heating-sector ranked list */
.heat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.heat-row {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--line-soft);
}
.heat-row:last-child { border-bottom: 0; }
.heat-rank {
  font-size: 12px;
  color: var(--fg-mute);
  text-align: right;
}
.heat-sector {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.heat-name {
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heat-name:hover { color: var(--ds-accent-deep); }
.heat-code {
  font-size: 11px;
  color: var(--fg-mute);
}
.heat-count {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-align: right;
}
.heat-delta {
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  min-width: 64px;
  padding: 2px 8px;
  border-radius: var(--r-full);
}
.heat-delta {
  border: 1px solid var(--line);
  background: var(--bg-lowest);
}
.heat-delta.delta-up,
.rs-num.delta-up {
  color: var(--risk-high);
  border-color: var(--risk-high-border);
}
.heat-delta.delta-down,
.rs-num.delta-down {
  color: #047857;
  border-color: var(--risk-low-border);
}
.heat-delta.delta-flat,
.heat-delta.delta-new {
  color: var(--fg-mute);
}
.rs-num.delta-flat,
.rs-num.delta-new { color: var(--fg-mid); background: transparent; }

@media (max-width: 820px) {
  .radar-grid { grid-template-columns: 1fr; }
  .radar-stats { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* Tighten the ranked heating-sector row so the name keeps room next to the
     rank, count and delta pill on phones. */
  .heat-row { gap: 8px; }
  .heat-delta { min-width: 52px; padding: 2px 6px; }
}

/* ───── portfolio risk console (/portfolio) ───── */
.port-stat {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-lowest);
  padding: 16px 18px;
}
.port-stat .m-label {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 500;
}
.port-stat .m-value {
  font-family: var(--mono); font-size: var(--ds-fs-31); font-weight: 600;
  color: var(--ink); margin-top: 4px; line-height: 1.05;
}
.port-stat .m-sub { font-size: 12px; color: var(--fg-mute); margin-top: 3px; }
.port-stat.warn { border-color: var(--risk-med-border); border-left: 3px solid var(--risk-med); }
.port-stat.warn .m-value { color: #b45309; }
.port-stat.bad { border-color: var(--risk-high-border); border-left: 3px solid var(--risk-high); }
.port-stat.bad .m-value { color: #b91c1c; }

.port-band { display: flex; align-items: center; gap: 12px; }
.port-band-label {
  flex: 0 0 auto; min-width: 110px; max-width: 150px;
  font-size: 13px; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.port-band-n {
  flex: 0 0 auto; min-width: 28px; text-align: right;
  font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--ink-soft);
}

@media (max-width: 720px) {
  .port-band-label { min-width: 88px; }
  .port-stat .m-value { font-size: var(--ds-fs-25); }
}

/* ───── printable / PDF dossier (/c/{slug}/print) ─────
 * The page is readable on screen (people preview before printing) AND
 * optimised for the browser's own print-to-PDF. The @media print block
 * strips site chrome, forces a single column, and keeps cards from
 * splitting across page boundaries. No JS, no libraries — CSP-safe.
 */
.print-doc {
  max-width: 880px;
  margin: 0 auto;
}
.print-doc .print-section { margin-bottom: 20px; }
.print-doc .print-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 2px solid var(--ink);
}
.print-doc .print-brand {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.024em;
  font-size: var(--ds-fs-25);
  color: var(--ink);
}
.print-doc .print-brand .dot { color: var(--risk-low); }
.print-doc .print-brand .be { color: var(--fg-mute); font-weight: 400; font-size: var(--ds-fs-20); }
.print-doc .print-meta { text-align: right; }
.print-doc .print-doctype {
  font-family: var(--serif);
  font-size: var(--ds-fs-16);
  color: var(--ink-soft);
}
.print-doc .print-date { font-size: 12px; color: var(--fg-mute); margin-top: 2px; }
.print-doc .print-id { margin-bottom: 20px; }
.print-doc .print-foot {
  margin-top: 24px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--fg-mute);
  text-align: center;
}

@media print {
  /* Drop the live site shell — header nav, search, footer, floating UI.
     M-shell ("ds-*") hooks first, then the legacy selectors kept as a
     harmless safety net for any non-M page. */
  .ds-shell-nav, .ds-shell-footer, .ds-shell-skip,
  .ds-ai-fab, #ai-drawer-toggle, #ai-drawer, #ai-drawer-backdrop, .ds-ai-drawer, .ds-ai-backdrop,
  .ds-cmp-fab, .ds-cmp-tray, .ds-cmp-backdrop, #cmp-tray-toggle,
  .chrome, footer.app-footer, .cmd-palette, .cmdk-trigger,
  .sr-only { display: none !important; }

  /* Neutralise screen layout: white background, no card shadows/tints,
     full-bleed page so the PDF uses the printer's own margins. The M body
     is .ds-shell / #ds-shell-body; .app / main kept for legacy pages. */
  html, body { background: #fff !important; }
  .ds-shell, .ds-shell-body, #ds-shell-body,
  .app, main { display: block !important; padding: 0 !important; }
  .page { max-width: none; padding: 0; margin: 0; }
  .print-doc { max-width: none; margin: 0; }

  /* Force the whole report into a single column regardless of the
     screen-layout grids the reused cards normally use. */
  .print-doc .row,
  .print-doc .g-2,
  .print-doc .g-3 { display: block !important; }
  .print-doc .row > *,
  .print-doc .g-2 > *,
  .print-doc .g-3 > * { width: auto !important; flex: none !important; margin-bottom: 12px; }

  /* Black-on-white friendly: flatten the warm-white surface + borders so
     cards read cleanly on paper and don't waste ink on background fills. */
  .print-doc .card {
    background: #fff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    box-shadow: none !important;
  }

  /* Avoid splitting a card (or a report section) across a page break. */
  .print-doc .print-section,
  .print-doc .card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Sensible page margins for the printed sheet. */
  @page { margin: 16mm 14mm; }
}

/* ───── director track record (/p/{slug}) ───── */
.dtr-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.dtr-stat {
  flex: 1 1 140px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  padding: 12px 14px;
  background: var(--bg-lowest);
}
.dtr-stat.bad {
  border-color: var(--risk-high-border);
  border-left: 3px solid var(--risk-high);
}
.dtr-stat .value {
  display: block;
  font-size: var(--ds-fs-25);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-soft);
}
.dtr-stat.bad .value { color: var(--risk-high); }
.dtr-stat .label {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--fg-mute);
}
.dtr-seq {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: var(--bg-lowest);
}
.dtr-seq-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.dtr-seq-row a { color: var(--ink-soft); font-weight: 500; }
.dtr-seq-icon {
  flex: 0 0 auto;
  color: var(--fg-mute);
  font-size: 14px;
  line-height: 1.4;
}
.dtr-disclaimer {
  margin: 6px 0 0;
  font-size: 11px;
  font-style: italic;
  color: var(--fg-mute);
  line-height: 1.45;
}

/* ════════════════════════════════════════════════
   Data-viz: entrance animations, hover, tooltip
   Every rule is scoped to a specific chart class —
   never a bare svg/circle/polygon/polyline selector.
   ════════════════════════════════════════════════ */

/* ───── floating tooltip (created + positioned by sibling JS) ─────
   Contract for the JS:
     • One <div class="chart-tooltip"> appended to <body>.
     • Position with inline `left`/`top` (px); it is position:fixed.
     • Toggle visibility by adding/removing the `.hidden` class.
       Default (no .hidden) = visible & fully opaque.
     • Set the pill text via textContent / innerHTML.            */
.chart-tooltip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  max-width: 240px;
  padding: 6px 8px;
  border-radius: var(--r-md);
  background: var(--bg-lowest);
  color: var(--ink);
  border: 1px solid var(--line);
  font: 11px/1.4 var(--mono);
  letter-spacing: 0.01em;
  box-shadow: var(--shadow-pop);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--ds-dur-1) var(--ds-ease-out);
}
.chart-tooltip.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ───── hover affordances (always on; no motion preference needed) ───── */
.sparkline,
.metric-tile .sparkline { cursor: default; }
/* lift already on .metric-tile:hover; add a touch more under reduced-motion-safe */
.radar-chart { cursor: default; }
/* cartogram province tiles read as data points — brighten + outline on hover */
.cartogram-tile:not(.is-empty) { cursor: default; transition: box-shadow var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-1) var(--ds-ease-out), filter var(--ds-dur-1) var(--ds-ease-out); }
.cartogram-tile:not(.is-empty):hover {
  border-color: var(--line-strong);
  filter: brightness(1.04);
}
/* legend / band bars become inspectable */
.fp-legend-row:hover .fp-legend-label,
.fp-legend-row:hover .fp-legend-score { color: var(--ink-soft); }

/* ── Stress-network: nodes read as inspectable entities ──
   `.sn-node` is on each <g>/<a> (company, mandate, cross-mandate). Hover lifts
   the whole node so the rect inside reads as the active one. transform-box keeps
   the scale origin at the node's own center inside the SVG.                  */
.stress-network .sn-node {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ds-dur-2) var(--ds-ease-out), filter var(--ds-dur-2) var(--ds-ease-out);
}
.stress-network .sn-node:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 2px 6px rgba(19, 27, 46, 0.18));
}
.stress-network .sn-node-center { cursor: default; }

/* ── Time-machine: event dots enlarge + brighten on hover ── */
.time-machine .tm-event {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--ds-dur-2) var(--ds-ease-out), opacity var(--ds-dur-2) var(--ds-ease-out);
}
.time-machine .tm-event:hover {
  transform: scale(1.5);
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {

  /* ── Sparkline: "draw" the polyline, fade the area fill, pop the dot ──
     The dash length (1000) just needs to exceed any realistic path length;
     it animates to 0 offset to reveal the stroke left-to-right.            */
  .sparkline polyline {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: ck-spark-draw .6s ease-out forwards;
  }
  .sparkline path {
    opacity: 0;
    animation: ck-fade-in .5s ease-out .15s forwards;
  }
  .sparkline circle {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-dot-pop .3s ease-out .5s forwards;
  }
  /* dashed reference line, if present, eases in last */
  .sparkline line {
    opacity: 0;
    animation: ck-fade-in .4s ease-out .3s forwards;
  }

  /* P2-T9: scroll-triggered draw-in (progressive enhancement).
     animate.js tags each sparkline with .js-spark-defer, which PAUSES the
     draw/fade/pop animations above so they hold at their first keyframe
     (dashoffset 1000 / opacity 0 / scale 0) instead of playing on load. When
     the chart scrolls into view the script adds .ck-in-view, which resumes them.
     If animate.js never runs, .js-spark-defer is absent and the on-load
     animation plays as before — so this is strictly additive. */
  .sparkline.js-spark-defer polyline,
  .sparkline.js-spark-defer path,
  .sparkline.js-spark-defer circle,
  .sparkline.js-spark-defer line {
    animation-play-state: paused;
  }
  .sparkline.js-spark-defer.ck-in-view polyline,
  .sparkline.js-spark-defer.ck-in-view path,
  .sparkline.js-spark-defer.ck-in-view circle,
  .sparkline.js-spark-defer.ck-in-view line {
    animation-play-state: running;
  }

  /* ── FinancialProfile radar: data polygon grows from center + fades; dots stagger ── */
  .radar-chart polygon:last-of-type {
    opacity: 0;
    transform: scale(.4);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-radar-in .5s var(--ds-ease-settle) .1s forwards;
  }
  .radar-chart circle {
    opacity: 0;
    animation: ck-fade-in .35s ease-out forwards;
  }
  .radar-chart circle:nth-of-type(1) { animation-delay: .42s; }
  .radar-chart circle:nth-of-type(2) { animation-delay: .50s; }
  .radar-chart circle:nth-of-type(3) { animation-delay: .58s; }
  .radar-chart circle:nth-of-type(4) { animation-delay: .66s; }
  .radar-chart circle:nth-of-type(5) { animation-delay: .74s; }

  /* ── Risk donut gauge: sweep the arc in from 0 ──
     .gauge .ring is the rotated <svg>; the value arc is its 2nd <circle>.   */
  .gauge .ring circle:nth-of-type(2) {
    animation: ck-gauge-sweep .7s ease-out forwards;
  }

  /* ── Health barometer: slide the marker from the left edge to its spot ── */
  .barometer-marker {
    animation: ck-marker-slide .6s var(--ds-ease-settle) both;
  }

  /* ── Bars: grow width from 0 (legend band bars + thin benchmark fill) ── */
  .fp-legend-bar > span,
  .bar-track .fill {
    animation: ck-bar-grow .5s ease-out both;
    transform-origin: left center;
  }

  /* ── Metric + cartogram tiles: subtle fade / translate-up ── */
  .metric-tile {
    animation: ck-tile-in .3s ease-out both;
  }
  .cartogram-tile {
    animation: ck-tile-in .3s ease-out both;
  }

  /* ── Stress-network: nodes scale-fade in from their own center, staggered
     so the graph "assembles" left-to-right; edge lines ease in underneath. ── */
  .stress-network .sn-node {
    opacity: 0;
    transform: scale(.6);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-node-in .4s var(--ds-ease-settle) both;
  }
  .stress-network .sn-node-center { animation-delay: .05s; }
  .stress-network .sn-node-mandate:nth-of-type(1) { animation-delay: .14s; }
  .stress-network .sn-node-mandate:nth-of-type(2) { animation-delay: .20s; }
  .stress-network .sn-node-mandate:nth-of-type(3) { animation-delay: .26s; }
  .stress-network .sn-node-mandate:nth-of-type(4) { animation-delay: .32s; }
  .stress-network .sn-node-mandate:nth-of-type(5) { animation-delay: .38s; }
  .stress-network .sn-node-mandate:nth-of-type(6) { animation-delay: .44s; }
  .stress-network .sn-node-cross { animation-delay: .5s; }
  .stress-network line {
    opacity: 0;
    animation: ck-fade-in .5s ease-out .1s forwards;
  }

  /* ── Time-machine: event dots pop in after the baseline settles ── */
  .time-machine .tm-event {
    opacity: 0;
    transform: scale(0);
    transform-box: fill-box;
    transform-origin: center;
    animation: ck-dot-pop .35s ease-out .25s forwards;
  }
}

@keyframes ck-spark-draw   { to { stroke-dashoffset: 0; } }
@keyframes ck-fade-in      { to { opacity: 1; } }
@keyframes ck-dot-pop      { to { opacity: 1; transform: scale(1); } }
@keyframes ck-radar-in     { to { opacity: 1; transform: scale(1); } }
@keyframes ck-gauge-sweep  { from { stroke-dashoffset: 999; } }
@keyframes ck-marker-slide { from { left: 0; } }
@keyframes ck-bar-grow     { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ck-tile-in      { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ck-node-in      { to { opacity: 1; transform: scale(1); } }

/* ───────────────────────────────────────────────────────────────
   Pricing page (/pricing) — marketing cards built from PlanCatalog.
   4-up on desktop, 2-up on tablet, stacked on mobile. The featured
   tier lifts with a ring + ribbon; the user's current tier gets a
   soft data-blue ring.
   ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-top: 8px;
}

.pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 26px 22px 22px;
  box-shadow: var(--shadow-1);
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.pricing-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

/* Featured (recommended) tier — emerald ring + ribbon. */
.pricing-card.featured {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 1px var(--ds-accent) inset, var(--shadow-pop);
}
.pricing-card.featured:hover { transform: translateY(-3px); }

/* Current plan ring — quiet hairline emphasis under the featured ring. */
.pricing-card.current {
  border-color: var(--line-strong);
  box-shadow: 0 0 0 1px var(--line-strong) inset, var(--shadow-1);
}

.pricing-ribbon {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ds-accent);
  color: var(--fg-inv);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 4px 12px;
  border-radius: var(--r-full);
  white-space: nowrap;
}

.pricing-card-top { padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); }

.pricing-plan-name {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.1;
}

.pricing-positioning {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--fg-mute);
  margin-top: 6px;
  min-height: 36px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 16px;
}
.pricing-price-amount {
  font-family: var(--mono);
  font-size: var(--ds-fs-39);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  line-height: 1;
}
.pricing-price-custom {
  font-size: var(--ds-fs-25);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink-soft);
  line-height: 1;
}
.pricing-price-period { font-size: 13px; color: var(--fg-mute); }

.pricing-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}
.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.pricing-features li.off { color: var(--fg-dim); }
.pricing-features li > span { padding-top: 0.5px; }

.pricing-check { color: var(--risk-low); flex-shrink: 0; margin-top: 1px; }
.pricing-x     { color: var(--fg-dim);  flex-shrink: 0; margin-top: 1px; }

.pricing-cta { margin-top: 22px; }
.pricing-current-badge {
  background: var(--bg-lowest);
  border-color: var(--line-strong);
  color: var(--fg-mid);
  font-weight: 600;
  cursor: default;
}
.pricing-current-badge:hover { background: var(--bg-lowest); border-color: var(--line-strong); }

/* ── Reassurance / trust row (legacy, unreferenced — kept for reference) ── */
.pricing-trust-legacy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.pricing-trust-item { display: flex; flex-direction: column; gap: 4px; }
.pricing-trust-item strong { font-size: 14px; color: var(--ink); }
.pricing-trust-item span { font-size: 13px; line-height: 1.5; color: var(--fg-mid); }

@media (max-width: 1024px) {
  .pricing-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; gap: 14px; }
  .pricing-trust-legacy { grid-template-columns: 1fr; gap: 18px; }
  .pricing-positioning { min-height: 0; }
}

/* ════════════════════════════════════════════════
   Interaction polish — micro-interactions + motion
   ──────────────────────────────────────────────────
   A cohesive, *tasteful* pass on top of the existing
   component rules. Principles:
     • Subtle, fast (.12–.18s), editorial — never bouncy.
     • Named properties only; never `transition: all`.
     • All TRANSFORM/lift motion is gated behind
       prefers-reduced-motion: no-preference (color /
       background / border / shadow changes stay on for
       everyone — they're affordances, not motion).
     • Additive: tightens existing rules, breaks nothing.
   ════════════════════════════════════════════════ */

/* ───── crisp, consistent focus ring (accessibility) ─────
   A single keyboard-focus treatment for every interactive target.
   Mirrors the existing data-blue token; 2px ring, 2px offset. */
.btn:focus-visible,
.chip[role="button"]:focus-visible,
.tabs button:focus-visible,
.tabs a:focus-visible,
.seg button:focus-visible,
.lang-switch button:focus-visible,
.chrome nav button:focus-visible,
.kbo-copy:focus-visible,
.hero-search input:focus-visible,
.chrome-search input:focus-visible {
  outline: 2px solid var(--ds-accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
/* Inputs read better with a soft halo than a hard outline — keep the
   accessible ring but pair it with a tinted glow + border shift. */
.chrome-search input:focus-visible {
  outline-offset: 1px;
  border-color: var(--ds-accent);
  background: var(--bg-lowest);
  box-shadow: 0 0 0 3px rgba(11, 138, 93, 0.12);
}
/* Home "Antwoordmachine" search (AnswerHome .hc2-search pill).
   The borderless input would otherwise inherit the global
   `input:focus-visible { outline: 2px solid var(--ink) }` (dark) rule and
   show a hard dark border the moment it is clicked/focused (owner feedback
   2026-06-11). The visible focus indicator is the pill's own
   `.hc2-search:focus-within` accent ring + accent border, so the inner input
   carries NO outline of its own — a second ring inside the pill reads as a
   double border. Focus is still clearly indicated (the whole pill lights
   up), so keyboard navigation stays accessible. */
.hc2-search-input:focus-visible {
  outline: none;
}

/* ───── links ─────
   Inline text links pick up a gentle colour ease so hovers don't snap. */
a:not(.btn):not(.chip):not(.tabs a):not(.own-name):not(.heat-name) {
  transition: color var(--ds-dur-2) var(--ds-ease-out);
}

/* ───── chips ─────
   Status chips are often clickable filters/links — give a soft warm shift. */
.chip {
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out),
              color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
a.chip:hover,
button.chip:hover,
.chip[role="button"]:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-1);
}

/* ───── buttons ─────
   Refine the existing hover; add a crisp press + (motion-gated) press-scale. */
.btn { transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out),
                   color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out); }
.btn:hover { box-shadow: var(--shadow-1); }
.btn.ghost:hover { box-shadow: none; }
.btn:active { transform: none; }   /* reset; motion variant re-adds below */
.kbo-copy { transition: color var(--ds-dur-1) var(--ds-ease-out), background var(--ds-dur-1) var(--ds-ease-out),
                        border-color var(--ds-dur-1) var(--ds-ease-out), transform var(--ds-dur-1) var(--ds-ease-out); }

/* ───── tabs — smooth active underline slide + hover tint ─────
   The 2px bottom-border is the indicator; easing border-color + color
   makes the active state glide rather than jump as you switch tabs. */
.tabs button, .tabs a {
  transition: color var(--ds-dur-1) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-settle);
}
.tabs button .count, .tabs a .count {
  transition: background var(--ds-dur-2) var(--ds-ease-out), color var(--ds-dur-2) var(--ds-ease-out);
}
.tabs button:hover .count, .tabs a:hover .count {
  background: var(--bg-mid);
  color: var(--fg-mid);
}

/* ───── table rows ─────
   Hover background already exists; ease it so scanning rows feels fluid. */
table.t tbody tr td { transition: background var(--ds-dur-1) var(--ds-ease-out); }
/* Result/clickable rows (rows that wrap an <a> or carry an onclick) get a
   pointer + a faint left-edge accent so they read as navigable. */
table.t tbody tr.is-link,
table.t tbody tr[onclick] { cursor: pointer; }

/* ───── list / data rows — gentle hover affordance ─────
   These already transition border + shadow; add the missing ones and a
   warm background lift so the whole row responds, not just its frame. */
.own-row, .estab-row {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out),
              background var(--ds-dur-2) var(--ds-ease-out);
}
.own-row:hover, .estab-row:hover { background: var(--bg-low); }

/* Ranked / stat rows that didn't have any transition before. */
.heat-row, .fp-legend-row, .health-comp, .bench, .signal, .tl-row {
  transition: background var(--ds-dur-2) var(--ds-ease-out), border-color var(--ds-dur-2) var(--ds-ease-out);
}
.heat-row:hover { background: var(--bg-low); }
.fp-legend-row { border-radius: var(--r-sm); }
.fp-legend-row:hover { background: var(--bg-low); }

/* Snapshot stat tiles — subtle warm border + shadow on hover, no bounce
   (these are content, not links, so keep it understated). */
.radar-stat, .dtr-stat, .port-stat {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out);
}
.radar-stat:hover, .dtr-stat:hover, .port-stat:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* ───── cards ─────
   Static content cards stay calm: only a warm border + soft shadow on hover
   (no lift) so pages don't bounce. Cards that are genuinely clickable opt in
   via `.card.is-link` / an anchor wrapper and get the premium lift below. */
.card {
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.card:hover { border-color: var(--line); }   /* baseline: no jump */
a > .card, a.card, .card.is-link {
  cursor: pointer;
}
a > .card:hover, a.card:hover, .card.is-link:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-2);
}

/* ───── count-up numerics (sibling agent animates the value) ─────
   Tabular figures + JetBrains-Mono feature so a number ticking 0→1.234
   never reflows width mid-animation. Pure styling; no JS here. */
.countup {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  font-variation-settings: normal;
}

/* ════════════════════════════════════════════════
   Motion layer — TRANSFORM-based lift/press only.
   Everything below is suppressed when the user asks
   for reduced motion (the colour/shadow affordances
   above remain, so the UI is still clearly responsive).
   ════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
  /* Button press — barely-there tactile feedback. */
  .btn:active { transform: translateY(0.5px) scale(.99); }
  .kbo-copy:active { transform: scale(0.92); }

  /* Linked cards lift on hover — the one "premium" gesture, kept to -2px
     and a single tuned pop shadow so it feels expensive, not springy. */
  a > .card:hover, a.card:hover, .card.is-link:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pop);
  }

  /* Clearly-clickable data rows nudge up a hair on hover. */
  .own-row:hover, .estab-row:hover {
    transform: translateY(-1px);
  }
}

/* ════════════════════════════════════════════════
   Page polish — the shared "premium editorial" layer
   ──────────────────────────────────────────────────
   Used by every secondary page through PageHeader + the
   .section-head / .empty-state / .feature-tile helpers.
   Warm-white surface, Fraunces headlines, accent dashes;
   all motion is gated behind prefers-reduced-motion.
   ════════════════════════════════════════════════ */

/* ───── page hero (PageHeader) ───── */
.page-hero {
  position: relative;
  margin-bottom: 24px;
  padding: 34px 0 22px;
  border-bottom: 1px solid var(--line);
  /* Clean white hero — no dotted texture, no tinted gradients. */
}
.page-hero::after {
  /* thin accent hairline riding on top of the bottom border */
  content: "";
  position: absolute;
  left: 0; bottom: -1px;
  width: 56px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}
.page-hero-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.page-hero-text { flex: 1 1 420px; min-width: 0; max-width: 760px; }
.page-hero-kicker {
  font-size: 11px;
  color: var(--fg-mute);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.page-hero-title {
  font-size: var(--ds-fs-39);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  font-weight: 600;
  color: var(--ink);
}
.page-hero-title .serif-italic { font-weight: 500; color: var(--ink); }
.page-hero-sub {
  color: var(--fg-mid);
  margin: 8px 0 0;
  line-height: 1.55;
  max-width: 70ch;
}
.page-hero-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
  /* nudge the CTA row to baseline with the title */
  padding-top: 4px;
}

/* ───── eyebrow (accent label) ───── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-accent-deep);
  margin-bottom: 8px;
}
.eyebrow::before {
  content: "";
  width: 18px; height: 2px;
  border-radius: var(--r-full);
  background: currentColor;
  opacity: 0.8;
}
.eyebrow.alert { color: var(--alert-deep); }

/* ───── icon badge ───── */
.icon-badge {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-lg);
  color: var(--ds-accent-deep);
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.icon-badge.lg {
  width: 56px; height: 56px;
  border-radius: var(--r-xl);
}
.icon-badge.lg svg { width: 28px; height: 28px; }
/* tonal variants so different page families can self-colour their anchor —
   white ground, the colour rides on the glyph + border (indicator doctrine) */
.icon-badge.violet { color: var(--data-violet); background: var(--bg-lowest); border-color: #b6ebe8; }
.icon-badge.alert  { color: var(--alert-deep); background: var(--bg-lowest); border-color: var(--risk-med-border); }
.icon-badge.danger { color: var(--risk-high); background: var(--bg-lowest); border-color: var(--risk-high-border); }
.icon-badge.ok     { color: #047857; background: var(--bg-lowest); border-color: var(--risk-low-border); }
.icon-badge.ink    { color: var(--ink-soft); background: var(--bg-lowest); border-color: var(--line); }
/* a small variant for inline section heads */
.icon-badge.sm { width: 32px; height: 32px; border-radius: var(--r-md); }
.icon-badge.sm svg { width: 18px; height: 18px; }

/* ───── section head (in-page anchors) ───── */
.section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.section-head .section-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  line-height: 1.2;
  letter-spacing: -0.012em;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}
.section-head .section-sub {
  font-size: 12.5px;
  color: var(--fg-mute);
  margin: 2px 0 0;
  line-height: 1.4;
}
.section-head .section-meta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-mute);
  white-space: nowrap;
}

/* ───── empty state (replaces bare "geen resultaten") ───── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  background: var(--bg-lowest);
}
.empty-state .icon-badge { margin-bottom: 8px; }
.empty-state .empty-title {
  font-family: var(--serif);
  font-size: var(--ds-fs-20);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink-soft);
  margin: 0;
}
.empty-state .empty-sub {
  font-size: 13.5px;
  color: var(--fg-mute);
  line-height: 1.5;
  max-width: 46ch;
  margin: 0;
}
.empty-state .empty-cta { margin-top: 10px; }

/* ───── accent rule (decorative divider) ───── */
.accent-rule {
  height: 1px;
  border: 0;
  margin: 24px 0;
  background: linear-gradient(90deg,
    transparent,
    var(--line-strong) 12%,
    var(--line-strong) 88%,
    transparent);
  position: relative;
}
.accent-rule::before {
  content: "";
  position: absolute;
  left: 0; top: -0.5px;
  width: 48px; height: 2px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}

/* ───── feature tile (value-prop grids) ───── */
.feature-tile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  background: var(--bg-lowest);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  text-decoration: none;
  transition: border-color var(--ds-dur-2) var(--ds-ease-out), box-shadow var(--ds-dur-2) var(--ds-ease-out), transform var(--ds-dur-2) var(--ds-ease-settle);
}
.feature-tile .feature-title {
  font-size: var(--ds-fs-16);
  font-weight: 600;
  letter-spacing: -0.008em;
  color: var(--ink-soft);
}
.feature-tile .feature-body {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-mid);
  flex: 1;
}
a.feature-tile:hover { border-color: var(--line-strong); }

/* ───── card-header refinement — optional accent on a card-h title ───── */
.card-h .title.with-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.card-h .title.with-accent::before {
  content: "";
  width: 3px; height: 14px;
  border-radius: var(--r-full);
  background: var(--ds-accent);
}

/* ───── page-polish responsive ───── */
@media (max-width: 768px) {
  .page-hero { padding: 22px 0 18px; }
  .page-hero-title { font-size: var(--ds-fs-25); }
  .page-hero-actions { margin-left: 0; width: 100%; }
  .section-head .section-title { font-size: var(--ds-fs-18); }
  .empty-state { padding: 36px 18px; }
}

/* ───── page-polish motion (gated) ───── */
@media (prefers-reduced-motion: no-preference) {
  a.feature-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--ds-elev-3);
  }
}

/* ───── dark mode placeholder ───── */
/*
 * Dark mode is planned for a later release.
 * When implemented, override the :root custom properties here inside:
 *   @media (prefers-color-scheme: dark) { :root { ... } }
 * All component rules use CSS variables and will adapt automatically.
 */

/* === vastgoed tab === */
/* Vastgoedvoetafdruk dossier tab: honesty lead, regional split bar, parcel
   table accents and the methodology block. Region colours are the neutral
   categorical ramp (semantic g/a/r stays reserved for risk). */
.vg-lead {
  margin: 0 0 16px;
  font-size: var(--ds-fs-13);
  line-height: 1.55;
  color: var(--ds-fg-mid);
}
.vg-regionbar {
  display: flex;
  height: 14px;
  border-radius: var(--ds-r-full, 999px);
  overflow: hidden;
  background: var(--ds-line-soft);
}
.vg-regionbar-seg { display: block; height: 100%; }
.vg-regionbar-seg + .vg-regionbar-seg { border-left: 2px solid var(--ds-surface); }
.vg-region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 10px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.vg-region-item { display: inline-flex; align-items: center; gap: 6px; }
.vg-region-swatch {
  width: 10px; height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}
.vg-region-count { font-weight: 600; color: var(--ds-ink); }
.vg-region-pct { color: var(--ds-fg-mute); }
.vg-dim { color: var(--ds-fg-mute); font-size: var(--ds-fs-12); }
.vg-note { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
/* Heritage badge on a parcel row (mig 199 overlay): neutral, informational,
   never a risk colour. Sits under the capakey, no layout jump when absent. */
.vg-heritage {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin-top: 5px;
  font-size: var(--ds-fs-12);
  line-height: 1.4;
}
.vg-heritage-kind { color: var(--ds-fg-mid); }
.vg-heritage-name { color: var(--ds-fg-mute); font-style: italic; }
.vg-heritage-src { color: var(--ds-accent, #2563eb); text-decoration: none; white-space: nowrap; }
.vg-heritage-src:hover { text-decoration: underline; }
.vg-method {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.vg-method-title {
  display: block;
  font-size: var(--ds-fs-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ds-fg-mute);
  margin-bottom: 6px;
}
.vg-method-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--ds-fs-12);
  line-height: 1.5;
  color: var(--ds-fg-mid);
}
/* Linked KPI tile value (KpiRail.KpiItem.Href) — e.g. the hero vastgoed fact. */
.ds-kpirail-link {
  color: var(--ds-ink);
  text-decoration: none;
}
.ds-kpirail-link:hover { text-decoration: underline; }
/* === landing wave === */
/* Freshness proof strip (home) — live "laatste Staatsblad-verwerking" stamp */
.fs-strip {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 0 auto 8px; padding: 6px 14px; width: fit-content;
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: 99px; box-shadow: var(--shadow-1);
  font-family: var(--ds-sans); font-size: var(--ds-fs-12);
}
.fs-strip-dot {
  width: 7px; height: 7px; border-radius: 99px; background: var(--ds-good);
  animation: fsPulse 2s ease-out infinite;
}
@keyframes fsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.45); }
  100% { box-shadow: 0 0 0 7px rgba(16,185,129,0); }
}
.fs-strip-label { color: var(--ds-fg-mid); }
.fs-strip-label::after { content: ":"; }
.fs-strip-value { color: var(--ds-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Why-Checked differentiator rail (home) */
.why-rail { margin: 36px 0 44px; }
.why-title {
  font-family: var(--ds-serif); font-size: var(--ds-fs-25); font-weight: 600;
  letter-spacing: -0.015em; color: var(--ds-ink); margin: 0 0 18px;
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ds-sp-16);
  align-items: stretch;
}
.why-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--ds-surface); border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg); padding: var(--ds-sp-18);
}
.why-card-title {
  font-family: var(--ds-sans); font-size: var(--ds-fs-14); font-weight: 600;
  letter-spacing: -0.01em; color: var(--ds-ink); margin: 0; line-height: 1.35;
}
.why-card-body {
  font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mid);
  line-height: 1.55; margin: 0; flex: 1;
}
.why-example {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 2px;
  padding: 10px 12px; background: var(--ds-page-bg);
  border: 1px solid var(--ds-line-soft); border-radius: var(--ds-r-md);
  font-family: var(--ds-sans); font-size: var(--ds-fs-12); line-height: 1.45;
  color: var(--ds-fg-mid); text-align: left;
}
.why-example-ico { flex: 0 0 auto; line-height: 1.45; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .why-grid { grid-template-columns: 1fr; } }

/* Pricing comparison table — "Checked vs. typische alternatieven" */
.cmp-wrap { border: 1px solid var(--ds-line); border-radius: var(--ds-r-lg); overflow-x: auto; background: var(--ds-surface); }
.cmp-table .cmp-col-checked { background: var(--ds-page-bg); }
.cmp-table th.cmp-col-checked { color: var(--ds-ink); }
.cmp-yes  { color: var(--ds-good); font-weight: 600; white-space: nowrap; }
.cmp-no   { color: var(--ds-fg-dim); white-space: nowrap; }
.cmp-part { color: var(--ds-fg-mid); }
@media (prefers-reduced-motion: reduce) { .fs-strip-dot { animation: none; } }
/* === end landing wave === */
/* === alerts wave === */
/* /alerts filter chips (kind + severity) and pagination links — SSR <a> chips,
   no JS. .alert-chip-on marks the active filter. */
.alert-chip-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.alert-chip-label {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11, 11px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-right: 4px;
}
.alert-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
  text-decoration: none;
  padding: 4px 11px;
  border: 1px solid var(--ds-line);
  border-radius: 999px;
  background: var(--ds-surface);
  white-space: nowrap;
}
.alert-chip:hover { color: var(--ds-ink); border-color: var(--ds-fg-mute); }
.alert-chip-on {
  background: var(--ds-accent);
  border-color: var(--ds-accent);
  color: var(--ds-inv);
}
.alert-chip-on:hover { color: var(--ds-inv); }

/* /alerts/rules — filter-rule kind checkbox grid */
.alert-kind-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}
.alert-kind-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
  cursor: pointer;
}
.alert-kind-opt:hover { border-color: var(--ds-fg-mute); }
.alert-kind-opt input { accent-color: var(--ds-accent); }

/* FilteredEventsPanel — what a watcher's own filter rules are holding back.
   Deliberately colourless: a filtered event is a thing the reader asked not to
   see, not a warning, so no --ds-warn / --ds-bad anywhere in this block. The
   row is a wrapping flex line rather than a table because it carries four short
   facts and has to survive a 360px viewport without a horizontal scroller. */
.fep { margin-bottom: var(--ds-sp-18, 18px); }
.fep-list {
  list-style: none;
  margin: var(--ds-sp-14, 14px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ds-line);
}
.fep-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ds-line);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  line-height: 1.45;
  min-width: 0;
}
.fep-row:last-child { border-bottom: 0; }
.fep-date {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  white-space: nowrap;
}
.fep-what { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; min-width: 0; }
.fep-kind { font-weight: 600; color: var(--ds-ink); }
.fep-sev { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.fep-who { color: var(--ds-fg-mid); min-width: 0; overflow-wrap: anywhere; }
.fep-who a { color: var(--ds-fg-mid); text-decoration: none; font-weight: 600; }
.fep-who a:hover { color: var(--ds-ink); text-decoration: underline; }
.fep-rule {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  flex-basis: 100%;
  overflow-wrap: anywhere;
}
/* Compact form, inside the filter-rule panel on /alerts/rules. */
.fep-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: var(--ds-sp-14, 14px);
  padding-top: var(--ds-sp-14, 14px);
  border-top: 1px solid var(--ds-line);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.fep-note a { color: var(--ds-fg-mid); font-weight: 600; text-decoration: none; white-space: nowrap; }
.fep-note a:hover { color: var(--ds-ink); text-decoration: underline; }
/* === end alerts wave === */
/* === semantic events === */
/* Narrated BS-act feed (ActsCard) + freshness stamps (FreshnessBadge).
   Severity language: info = grey (routine), notable = amber (money/structure
   moved), warning = red (company in trouble / winding down). */

.sem-feed { display: flex; flex-direction: column; gap: 6px; }

.sem-year {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mute);
  letter-spacing: 0.06em;
  padding: 4px 0 2px;
  margin-top: 8px;
  border-bottom: 1px solid var(--ds-line);
}
.sem-feed .sem-year:first-child { margin-top: 0; }

.sem-act {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
}
.sem-act-summary {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 10px;
  list-style: none;
}
.sem-act-summary::-webkit-details-marker { display: none; }

.sem-dot {
  flex: none;
  align-self: center;
  width: 9px; height: 9px;
  border-radius: 99px;
  background: var(--ds-fg-dim);
}
.sem-dot--info    { background: var(--ds-fg-dim); }
.sem-dot--notable { background: var(--ds-warn); }
.sem-dot--warning { background: var(--ds-bad); }

.sem-act-date {
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-12);
  min-width: 84px;
  white-space: nowrap;
}
.sem-act-icon { flex: none; display: inline-flex; align-items: center; color: var(--ds-fg-dim); }

.sem-act-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sem-act-sentence {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  line-height: 1.35;
}
.sem-act-meta {
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.sem-sep { margin: 0 5px; color: var(--ds-fg-dim); }
.sem-numac { color: var(--ds-accent-deep); text-decoration: none; }
.sem-numac:hover { text-decoration: underline; }

.sem-act-body {
  padding: 14px;
  border-top: 1px solid var(--ds-line);
  font-size: var(--ds-fs-13);
}
.sem-detail-list {
  margin: 0 0 12px;
  padding-left: 18px;
  color: var(--ds-ink-soft);
  font-size: var(--ds-fs-12);
  line-height: 1.6;
}

.freshness-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 500;
  color: var(--ds-fg-mute);
  background: var(--ds-line-soft);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 2px 8px;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
}

@media (max-width: 640px) {
  .sem-act-date { min-width: 0; }
  .sem-act-summary { flex-wrap: wrap; }
}
/* === network graph === */
/* NetworkGraph.razor — SSR radial network graph on the dossier structuur tab.
   Pure SVG, no JS: hover affordances are CSS-only on the SVG anchor groups. */
.ds-netgraph { margin: 0 0 16px; }
.ds-netgraph-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
}
.ds-ng-node { cursor: default; }
a.ds-ng-node { cursor: pointer; text-decoration: none; outline: none; }
.ds-ng-bubble { transition: stroke-width var(--ds-dur-1) var(--ds-ease-out); }
a.ds-ng-node:hover .ds-ng-bubble,
a.ds-ng-node:focus-visible .ds-ng-bubble { stroke-width: 2.6; }
a.ds-ng-node:hover .ds-ng-label,
a.ds-ng-node:focus-visible .ds-ng-label { fill: var(--ds-ink); }
.ds-netgraph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  justify-content: center;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--ds-line-soft);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.ds-netgraph-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.ds-netgraph-key svg { flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ds-ng-bubble { transition: none; }
}
/* === financials wave ===
   Financial-dossier excellence layer: provenance line, CSS-only metric
   tooltips (fin-tip), the ?y= value-mode toggle, direction-aware delta
   chips, the grouped bar chart + balance-composition strips, the gated
   Gezondheidsbarometer score-history, and the free hero health badge. */

/* ── filing provenance line ("Jaarrekening neergelegd op … bij NBB") ── */
.fin-provenance {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ds-line-soft);
  font-variant-numeric: tabular-nums;
}

/* ── fin-tip — CSS-only hover/focus tooltip on metric labels ──
   No JS, CSP-safe, keyboard-reachable (tabindex=0). The bubble opens BELOW
   the label: the tables live inside overflow-x:auto wrappers, and an
   upward bubble would clip against the scroll container on the top rows.
   display (not opacity) toggling keeps the hidden bubble out of the
   scrollable-overflow area. white-space:pre-line renders the optional
   second line (sector median P50). */
.fin-tip {
  position: relative;
  cursor: help;
  border-bottom: 1px dotted var(--ds-fg-dim);
}
.fin-tip::after {
  content: attr(data-tip);
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% + 7px);
  z-index: 45;
  width: max-content;
  max-width: 320px;
  padding: 9px 11px;
  background: var(--ds-surface);
  color: var(--ds-fg);
  border: 1px solid var(--ds-line);
  font-size: var(--ds-fs-12);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  border-radius: var(--ds-r-md);
  box-shadow: var(--shadow-pop);
}
.fin-tip::before {
  /* caret */
  content: "";
  display: none;
  position: absolute;
  left: 14px;
  top: calc(100% + 2px);
  border: 5px solid transparent;
  border-bottom-color: var(--ds-line);
  z-index: 46;
}
.fin-tip:hover::after, .fin-tip:focus-visible::after,
.fin-tip:hover::before, .fin-tip:focus-visible::before { display: block; }
@media print { .fin-tip { border-bottom: 0; } .fin-tip::after, .fin-tip::before { display: none !important; } }

/* ── value-mode toggle (?y=abs|delta) — plain SSR links ── */
.fin-mode {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
}
.fin-mode a {
  padding: 4px 11px;
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mute);
  text-decoration: none;
  background: var(--ds-surface);
  border-right: 1px solid var(--ds-line);
  transition: background var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.fin-mode a:last-child { border-right: 0; }
.fin-mode a:hover { color: var(--ds-ink); background: var(--ds-line-soft); }
.fin-mode a.on {
  color: var(--ds-inv);
  background: var(--ds-accent);
  font-weight: 600;
}
@media print { .fin-mode { display: none; } }

/* ── direction-neutral "notable move" delta chip (amber) ──
   Complements ds-delta-up/-dn for polarity-0 metrics (e.g. DPO): a big
   move is worth an eye, but neither green nor red would be honest. */
.ds-delta-note { color: var(--ds-warn); }

/* ── BarChart (DesignSystem/Charts/BarChart.razor) ── */
.ds-barchart { margin: 0 0 4px; }
.ds-barchart svg { width: 100%; height: auto; }
.ds-barchart-legend {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-16);
  flex-wrap: wrap;
  margin-top: 6px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.ds-barchart-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.ds-barchart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex: 0 0 auto;
}

/* ── Horizontal scroller for a table that cannot shrink further ───────
   A .ds-table with fixed-percentage columns and unshrinkable content (a NACE
   description, an IBR number, a dd-mm-yyyy range) is wider than the 328px a
   panel leaves at a 360px viewport. Without this the table simply LEAVES its
   card: measured 2026-08-15, the auditor table by 105px and the legal-structure
   table by 36px, both with documentElement.scrollWidth == clientWidth because
   the panel clipped the overflow. Named rather than re-inlined, because
   `style="overflow-x:auto"` was already copied into FinancialsCard four times. */
.ds-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* A scroller is the safety net, not the goal: prefer the table to FIT. Its
   header row is nowrap by design (year columns must not break), which is what
   pushed the three-column auditor table past the viewport in the first place.
   On a phone let those headers wrap, so the swipe is only needed when the data
   itself genuinely cannot fit. Scoped to wrapped tables so no other table's
   header geometry changes. */
@media (max-width: 560px) {
  .ds-tablewrap .ds-table thead th { white-space: normal; }
}

/* ── Trend wall (FinancialsCard) ──────────────────────────────────────
   The multi-year sparkline tiles. Was an inline style on one grid; it is a
   class now because the wall renders TWICE, the open head and the disclosed
   tail, and two copies of a grid definition is how the two drift apart. */
.fin-wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--ds-sp-12);
}

/* ── StackedBar composition strip (DesignSystem/Charts/StackedBar.razor) ── */
.fin-comp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ds-sp-22);
}
@media (max-width: 720px) { .fin-comp-grid { grid-template-columns: 1fr; } }
.ds-stackbar { min-width: 0; }
.ds-stackbar-title {
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  margin-bottom: 7px;
}
.ds-stackbar-track {
  display: flex;
  height: 22px;
  border-radius: var(--ds-r-md);
  overflow: hidden;
  border: 1px solid var(--ds-line);
  background: var(--ds-line-soft);
}
.ds-stackbar-seg { height: 100%; min-width: 1px; }
.ds-stackbar-seg + .ds-stackbar-seg { border-left: 1px solid rgba(255, 255, 255, 0.65); }
.ds-stackbar-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 8px;
}
.ds-stackbar-key {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
}
.ds-stackbar-swatch {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  flex: 0 0 auto;
  align-self: center;
}
.ds-stackbar-lbl { min-width: 0; }
.ds-stackbar-val {
  margin-left: auto;
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  white-space: nowrap;
}

/* ── Gezondheidsbarometer score history (gated depth) ── */
.health-history {
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-12);
}
.health-history-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.hh-score {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-12);
  font-weight: 600;
  line-height: 1;
}
.hh-bar {
  display: block;
  width: 14px;
  height: 44px;
  background: var(--ds-line-soft);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.hh-fill {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  border-radius: 3px 3px 0 0;
}
.hh-year {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-10);
  color: var(--ds-fg-mute);
  line-height: 1;
}

/* ── free hero health badge (the wedge, visible to everyone) ── */
.ds-health-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  background: var(--ds-surface);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.ds-health-badge:hover { border-color: var(--line-strong); box-shadow: var(--shadow-1); }
.ds-health-badge .hb-dot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  align-self: center;
  flex: 0 0 auto;
}
.ds-health-badge strong {
  font-family: var(--ds-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--ds-fs-13);
  font-weight: 700;
  color: var(--ds-ink);
}
.ds-health-badge .hb-denom {
  font-size: var(--ds-fs-10);
  font-weight: 500;
  color: var(--ds-fg-mute);
}
.ds-health-badge .hb-band { font-weight: 600; }

/* === trajectory === */
/* Trajectorie (indicatief) — the 3-year projection on the financieel tab.
   Light analyst register: white surface, hairline borders, ink text. */
.tj-section {
  border-bottom: 1px solid var(--ds-line);
  padding-bottom: 16px;
  margin-bottom: 14px;
}
.tj-sub {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin: 2px 0 10px;
}
.tj-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  margin: 0 0 10px;
}
.tj-tabs a {
  padding: 4px 11px;
  border-radius: calc(var(--ds-r-md) - 3px);
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mute);
  text-decoration: none;
  white-space: nowrap;
}
.tj-tabs a:hover { color: var(--ds-ink); }
.tj-tabs a.on {
  color: var(--ds-ink);
  font-weight: 600;
  border: 1px solid var(--ds-line);
  background: var(--ds-line-soft);
}
.tj-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}
.tj-pill {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: var(--ds-surface);
}
.tj-pill-up   { color: var(--ds-good); }
.tj-pill-dn   { color: var(--ds-bad); }
.tj-pill-flat { color: var(--ds-fg-mid); }
.tj-pill-vol  { color: var(--ds-warn); }
.tj-insight {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
}
.tj-chart { margin: 0; }
.tj-legend {
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-dim);
  margin-top: 6px;
}
.tj-method { margin-top: 10px; }
.tj-method summary {
  cursor: pointer;
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.tj-method summary:hover { color: var(--ds-ink); }
.tj-method p {
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.55;
  margin: 8px 0 0;
  max-width: 70ch;
}

/* === decision tools ===
   Krediet-advies (/tools/kredietcheck + dossier card) and Portefeuille-scan
   (/tools/portefeuille). LIGHT doctrine: white surfaces, hairline --ds-line
   borders, ink text, no panel fills; the only colour is the semantic verdict
   band + the emerald action accents already defined by the token scale. */

/* ── krediet-advies verdict panel ── */
.cv-panel { font-family: var(--ds-sans); }
.cv-verdict {
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-18) var(--ds-sp-18);
}
.cv-verdict-head {
  font-size: var(--ds-fs-16);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.cv-verdict-sub {
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 560px;
}
.cv-lowconf {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ds-line);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.cv-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: var(--ds-sp-12) var(--ds-sp-14);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
}
.cv-headline-text {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink-soft);
  line-height: 1.5;
}
.cv-suggested { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.cv-suggested-num {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-25);
  font-weight: 600;
  color: var(--ds-ink-soft);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cv-suggested-note { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.cv-advice ul, .cv-reasons ul {
  margin: 6px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-advice li { font-size: var(--ds-fs-13); color: var(--ds-fg); line-height: 1.5; }
.cv-reasons { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-line-soft); }
.cv-reasons li { font-size: var(--ds-fs-12); color: var(--ds-fg-mid); line-height: 1.5; }
.cv-disclaimer {
  margin-top: 14px;
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
}
/* Emerald action accent (light doctrine: ink is never a fill). */
.cv-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  border-radius: var(--ds-r-md);
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  color: var(--fg-inv);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.cv-cta:hover { background: var(--ds-accent-deep); border-color: var(--ds-accent-deep); }

/* ── krediet-advies form ── */
.cv-form-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--ds-sp-14);
}
@media (max-width: 640px) { .cv-form-grid { grid-template-columns: 1fr; } }
.cv-company-fixed {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
}
.cv-how {
  margin-top: var(--ds-sp-26);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
}
.cv-how summary {
  cursor: pointer;
  padding: var(--ds-sp-14) var(--ds-sp-18);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  list-style: none;
}
.cv-how summary::before { content: "▸ "; color: var(--ds-fg-mute); }
.cv-how[open] summary::before { content: "▾ "; }
.cv-how-body {
  padding: 0 var(--ds-sp-18) var(--ds-sp-18);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  line-height: 1.6;
}
.cv-how-body ol { margin: 8px 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* ── portefeuille-scan table ── */
.pf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
}
.pf-table thead th {
  text-align: left;
  padding: 10px var(--ds-sp-14);
  border-bottom: 1px solid var(--ds-line);
  background: var(--ds-surface);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  white-space: nowrap;
}
.pf-table tbody td {
  padding: var(--ds-sp-12) var(--ds-sp-14);
  border-bottom: 1px solid var(--ds-line-soft);
  vertical-align: top;
}
.pf-table tbody tr:last-child td { border-bottom: 0; }
.pf-table tbody tr:hover td { background: var(--ds-line-soft); }
.pf-table th.num, .pf-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.pf-sort {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.pf-sort:hover { color: var(--ds-ink); text-decoration: underline; }
.pf-sort-on { color: var(--ds-ink); }
.pf-sort-on::after { content: " ↓"; }

/* ── /tools index cards ── */
.tool-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ds-sp-16);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-18) var(--ds-sp-22);
  text-decoration: none;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out);
}
.tool-card:hover { border-color: var(--ds-fg-dim); }
.tool-card-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  font-weight: 600;
  color: var(--ds-ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tool-card-q {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-ink-soft);
  font-style: italic;
  margin-top: 4px;
}
.tool-card-body {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mute);
  line-height: 1.5;
  margin-top: 6px;
  max-width: 560px;
}
.tool-card-arrow { color: var(--ds-fg-dim); font-size: var(--ds-fs-18); flex-shrink: 0; }
/* === ux wave === */
/* 2026-06 usability pass. Light doctrine: white surfaces, hairline #e6e8ec
   borders, ink text, emerald accent — no dark fills anywhere below. */

/* ── Fully-clickable rows ──
   [data-row-href] rows (search results, browse tables, /live feed, prospects)
   are convenience click targets via js/row-link.js; the inner name <a> stays
   the canonical link. Pointer + a calm emerald-tint hover, and the same tint
   on :focus-within so keyboard users see where they are. */
[data-row-href] { cursor: pointer; }
tr[data-row-href]:hover td,
tr[data-row-href]:focus-within td { background: rgba(11, 138, 93, 0.05); }
li[data-row-href]:hover,
li[data-row-href]:focus-within { background: rgba(11, 138, 93, 0.04); }
tr[data-row-href] a:focus-visible,
li[data-row-href] a:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; }

/* ── Map panel chrome — used by the /kaart national density map
   (DensityMap.razor). (Was shared with the /companies seat map until that
   sparse, useless dot map was removed 2026-07.) ── */
.cmap-panel {
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: var(--ds-sp-16) var(--ds-sp-18);
  margin-bottom: var(--ds-sp-18);
}
.cmap-head {
  display: flex;
  align-items: baseline;
  gap: var(--ds-sp-12);
  margin-bottom: var(--ds-sp-8);
  flex-wrap: wrap;
}
.cmap-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}

/* ── BelgiumMap (DesignSystem/Charts/BelgiumMap.razor) ──
   Pure-SSR SVG pin map. The country shape is a MAP surface, so it may carry
   the light #f7f8f9 fill (doctrine exception for maps); everything else stays
   hairline + accent. */
.bm-wrap { margin: 0; }
.bm-svg { display: block; width: 100%; height: auto; max-height: 340px; }
.bm-outline {
  fill: #f7f8f9;
  stroke: var(--ds-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
.bm-pin {
  fill: var(--ds-accent);
  stroke: #ffffff;
  stroke-width: 1.2;
  transition: r var(--ds-dur-1) var(--ds-ease-out);
}
.bm-pin-approx { fill: var(--ds-warn); }
.bm-pin-link:hover .bm-pin,
.bm-pin-link:focus-visible .bm-pin { r: 7; stroke-width: 1.6; }
.bm-pin-link:focus-visible { outline: none; }
.bm-foot {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-16);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.bm-key { display: inline-flex; align-items: center; gap: 6px; }
.bm-key-dot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: var(--ds-accent);
  flex: 0 0 auto;
}
.bm-key-dot-approx { background: var(--ds-warn); }
.bm-more { font-family: var(--ds-mono); font-size: var(--ds-fs-11); }

/* ══ Real maps (Components/Shared/LocationMap.razor + js/map-engine.js) ══
   Leaflet over OSM tiles, self-hosted, lazily loaded.

   THE FIRST SECOND is the whole design here. The frame reserves its box with
   aspect-ratio so nothing can ever jump, and an opaque placeholder sits ON TOP
   of the map until real tiles have painted. That placeholder is what a reader
   sees while Leaflet downloads, what they keep if JavaScript never runs, and
   what stays put (with an honest note) if tiles fail. Leaflet's own #ddd
   never becomes visible. */
.ckmap-wrap { margin: 0; }

.ckmap-frame {
  position: relative;
  width: 100%;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  overflow: hidden;
  background: var(--ds-page-bg);
}

/* Leaflet takes this element over; z-index makes it its own stacking context
   so every Leaflet pane and control stays underneath the placeholder. */
.ckmap { position: absolute; inset: 0; z-index: 1; }

.ckmap-ph {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-12);
  pointer-events: none;
  /* An abstract grid: legible as "a map is coming" without drawing a shape
     that claims to be anywhere. */
  background-color: var(--ds-page-bg);
  background-image:
    linear-gradient(to right, var(--ds-line-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ds-line-soft) 1px, transparent 1px);
  background-size: 34px 34px;
  transition: opacity var(--ds-dur-2) var(--ds-ease-out), visibility var(--ds-dur-2);
}
.ckmap[data-ck-map-state="ready"] + .ckmap-ph { opacity: 0; visibility: hidden; }

.ckmap-ph-pin { display: inline-flex; flex: 0 0 auto; }
.ckmap-ph-pin.is-exact { color: var(--ds-good); }
.ckmap-ph-pin.is-approx { color: var(--ds-warn); }
.ckmap-ph-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ckmap-ph-txt strong {
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ckmap-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.ckmap-precision { display: inline-flex; align-items: center; gap: 6px; }
.ckmap-dot { width: 9px; height: 9px; border-radius: 99px; flex: 0 0 auto; }
.ckmap-dot.is-exact { background: var(--ds-good); }
.ckmap-dot.is-approx { background: var(--ds-warn); }
.ckmap-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ds-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--ds-line);
}
.ckmap-out:hover { color: var(--ds-ink); border-bottom-color: var(--ds-ink); }

/* ── Leaflet chrome, restyled to the design system ── */
.ckmap .leaflet-container {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  background: var(--ds-page-bg);
}
.ckmap .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86);
  color: var(--ds-fg-mute);
  font-size: var(--ds-fs-10);
  padding: 1px 6px;
}
.ckmap .leaflet-control-attribution a { color: var(--ds-fg-mid); }
.ckmap .leaflet-bar,
.ckmap .leaflet-control-zoom {
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-sm);
  box-shadow: var(--ds-elev-1);
}
.ckmap .leaflet-bar a {
  color: var(--ds-ink);
  background: var(--ds-surface);
  border-bottom-color: var(--ds-line);
}
.ckmap .leaflet-bar a:hover { background: var(--ds-page-bg); color: var(--ds-ink); }

/* Street/satellite toggle (map-engine createBasemapController) */
.ck-basemap { display: flex; overflow: hidden; background: var(--ds-surface); }
.ck-basemap__btn {
  appearance: none;
  border: 0;
  border-left: 1px solid var(--ds-line);
  background: var(--ds-surface);
  color: var(--ds-ink-soft);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.4;
}
.ck-basemap__btn:first-child { border-left: 0; }
/* Accent, not ink: ink is a text/hairline colour and never a surface. */
.ck-basemap__btn.is-active { background: var(--ds-accent); color: var(--ds-inv); }
.ck-basemap__btn:hover:not(.is-active) { background: var(--ds-page-bg); }

/* Marker + accuracy ring (divIcon / L.circle from map-engine) */
.ck-pin-wrap { background: none; border: 0; }
.ck-pin {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.45);
}
.ck-pin--exact { background: var(--ds-good); }
.ck-pin--approx { background: var(--ds-warn); }
.ck-accuracy {
  stroke: var(--ds-warn);
  stroke-opacity: 0.55;
  stroke-width: 1.5;
  fill: var(--ds-warn);
  fill-opacity: 0.12;
}

/* ── Seat without coordinates (SeatLocatorCard.razor) ──
   Says why there is no map. An absent panel used to read as "nothing to
   report", which is the one thing a missing geocode never means. */
.seatmap { display: flex; flex-direction: column; gap: var(--ds-sp-8); }
.seatmap-none {
  display: flex;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-14);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-page-bg);
}
.seatmap-none-icon { flex: 0 0 auto; color: var(--ds-fg-mute); margin-top: 1px; }
.seatmap-none-body { min-width: 0; }
.seatmap-none-body strong {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
}
.seatmap-none-body p {
  margin: var(--ds-sp-4) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  line-height: 1.5;
}
.seatmap-none-addr {
  display: flex;
  flex-direction: column;
  margin-top: var(--ds-sp-8);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-style: normal;
  color: var(--ds-ink-soft);
}

/* ── /kaart: the density choropleth on a real basemap ──
   Here the placeholder is the SSR choropleth itself, so the reader gets the
   real picture immediately and the basemap arrives underneath it. No abstract
   grid, and no white flash between the two states. */
/* Belgium's bounding box is roughly 1.2:1 (only a little wider than tall), so
   a 16:10 frame leaves the country floating in a sea of France and Germany.
   These ratios track the country's own shape; the max-height stops it from
   eating a whole 2560px screen. */
.ckmap-frame--density { aspect-ratio: 4 / 3; }
@media (min-width: 720px) {
  .ckmap-frame--density { aspect-ratio: 3 / 2; max-height: 720px; }
}
.ckmap-ph--chart {
  background-image: none;
  align-items: center;
  justify-content: center;
  padding: var(--ds-sp-8);
}
.ckmap-ph--chart .bdm-svg { width: auto; max-width: 100%; max-height: 100%; }

@media (max-width: 480px) {
  .ck-basemap__btn { font-size: var(--ds-fs-10); padding: 4px 8px; }
  .ckmap-foot { font-size: var(--ds-fs-11); }
}

/* ── BelgiumDensityMap (DesignSystem/Charts/BelgiumDensityMap.razor) ──
   Pure-SSR national choropleth. Cell fills are computed server-side from the
   light emerald ramp (BelgiumDensityGrid.Ramp, white → --ds-accent-deep) and
   land as inline SVG fill attributes; only the chrome lives here. The base
   country shape keeps the light MAP surface (#f7f8f9 doctrine exception). */
.bdm-wrap { margin: 0; }
.bdm-svg { display: block; width: 100%; height: auto; max-height: 560px; }
.bdm-base {
  fill: #f7f8f9;
  stroke: none;
}
.bdm-outline {
  fill: none;
  stroke: var(--ds-line);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.bdm-cell { shape-rendering: crispEdges; }
.bdm-cell:hover { stroke: var(--ds-accent-deep); stroke-width: 0.8; }
.bdm-foot {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12);
  flex-wrap: wrap;
  margin-top: var(--ds-sp-12);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
}
.bdm-legend { display: inline-flex; border: 1px solid var(--ds-line); border-radius: 3px; overflow: hidden; }
.bdm-swatch { display: block; width: 22px; height: 12px; }
.bdm-legend-bounds {
  display: inline-flex;
  gap: 6px;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
}

/* ══ /companies — search-first redesign (2026-07) ══════════════════════
   The page reads top-to-bottom as SEARCH → EXPLORE. A prominent hero search is
   the centrepiece; below it two calm discovery streams sit side by side. (The
   seat map that used to close the page was removed 2026-07 — sparse and
   useless.) Light doctrine throughout — white surfaces, hairlines, a single
   emerald accent — and every motion is gated on prefers-reduced-motion. Design
   tokens only, no hardcoded scales. */

/* ── Hero search (the star) ── */
.cs-hero {
  position: relative;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  background:
    radial-gradient(115% 130% at 50% -30%, var(--ds-accent-soft) 0%, rgba(233, 245, 240, 0) 60%),
    var(--ds-surface);
  box-shadow: var(--ds-elev-2);
  padding: 44px var(--ds-sp-32) var(--ds-sp-32);
  margin: var(--ds-sp-12) 0 var(--ds-sp-26);
  text-align: center;
  overflow: hidden;
}
.cs-hero-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-31);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ds-ink);
  margin: var(--ds-sp-8) 0 0;
}
.cs-hero-sub {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  color: var(--ds-fg-mid);
  line-height: 1.5;
  margin: var(--ds-sp-8) auto 0;
  max-width: 500px;
}
.cs-search {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  max-width: 640px;
  margin: var(--ds-sp-22) auto 0;
  background: var(--ds-surface);
  border: 1.5px solid var(--ds-line);
  border-radius: var(--ds-r-lg);
  padding: 7px 7px 7px var(--ds-sp-16);
  box-shadow: var(--ds-elev-1);
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), box-shadow var(--ds-dur-1) var(--ds-ease-out);
}
.cs-search:focus-within {
  border-color: var(--ds-accent);
  box-shadow: 0 0 0 4px rgba(11, 138, 93, 0.12);
}
.cs-search-ico { color: var(--ds-fg-mute); flex: 0 0 auto; display: inline-flex; }
.cs-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-16);
  color: var(--ds-ink);
  padding: 12px 4px;
}
.cs-search input::placeholder { color: var(--ds-fg-dim); }
.cs-search-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ds-accent);
  color: var(--ds-inv);
  border: 0;
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.cs-search-btn:hover { background: var(--ds-accent-deep); }
.cs-search-btn:focus-visible { outline: 2px solid var(--ds-accent-deep); outline-offset: 2px; }
/* Quick-start row: famous names as one-tap shortcuts into a dossier. */
.cs-quick {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ds-sp-8);
  margin: var(--ds-sp-16) auto 0;
  max-width: 660px;
}
.cs-quick-label { font-family: var(--ds-sans); font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }
.cs-quick-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 500;
  color: var(--ds-fg-mid);
  text-decoration: none;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 4px 12px;
  transition: border-color var(--ds-dur-1) var(--ds-ease-out), color var(--ds-dur-1) var(--ds-ease-out);
}
.cs-quick-chip:hover { border-color: var(--ds-accent); color: var(--ds-ink); }
.cs-quick-chip:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .cs-hero { padding: var(--ds-sp-26) var(--ds-sp-18) var(--ds-sp-22); }
  .cs-search-btn { padding: 11px 14px; }
}

/* ── Results head (query view): compact prefilled bar + refine filters ── */
.cs-resulthead { margin: var(--ds-sp-8) 0 var(--ds-sp-22); }
.cs-result-form { display: flex; flex-direction: column; gap: var(--ds-sp-12); }
.cs-result-form .cs-search { margin: 0; max-width: 560px; box-shadow: none; }
.cs-filters { display: flex; align-items: center; gap: var(--ds-sp-8); flex-wrap: wrap; }
.cs-filter {
  padding: 8px 10px;
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  background: var(--ds-surface);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg);
}
.cs-filter-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  color: var(--ds-fg-mid);
  cursor: pointer;
}
.cs-filter-check input { accent-color: var(--ds-accent); }
.cs-result-query { font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mute); margin: 0; }
.cs-result-query .q { font-family: var(--ds-mono); color: var(--ds-fg-mid); }

/* ── Discovery streams (two calm scannable lists under the hero) ── */
.cb-band { margin: 0 0 var(--ds-sp-26); }
.cb-band-head { margin-bottom: var(--ds-sp-14); }
.cb-band-sub { font-family: var(--ds-sans); font-size: var(--ds-fs-13); color: var(--ds-fg-mute); margin: var(--ds-sp-4) 0 0; }
.cb-streams {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ds-sp-18);
  align-items: start;
}
@media (max-width: 860px) { .cb-streams { grid-template-columns: 1fr; } }
.cb-panel {
  display: flex;
  flex-direction: column;
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-xl);
  box-shadow: var(--ds-elev-1);
  overflow: hidden;
}
.cb-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-sp-12);
  padding: var(--ds-sp-14) var(--ds-sp-18);
  border-bottom: 1px solid var(--ds-line-soft);
  background: color-mix(in srgb, var(--ds-ink) 2%, #ffffff);
}
.cb-panel-headmain { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cb-panel-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-panel-eyebrow-dot { width: 8px; height: 8px; border-radius: 99px; flex: 0 0 auto; }
.cb-panel-title {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ds-ink);
  margin: 0;
}
.cb-panel-count {
  flex: 0 0 auto;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: 99px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}
.cb-list { display: flex; flex-direction: column; }
.cb-row {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-12);
  padding: 10px var(--ds-sp-18);
  border-top: 1px solid var(--ds-line-soft);
  text-decoration: none;
  color: var(--ds-fg);
  transition: background var(--ds-dur-1) var(--ds-ease-out);
}
.cb-row:first-child { border-top: 0; }
.cb-row:hover { background: var(--ds-accent-soft); }
.cb-row:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: -2px; }
.cb-row-main { flex: 1 1 auto; min-width: 0; }
.cb-row-name {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-row-meta {
  display: block;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-row-meta .kbo { font-family: var(--ds-mono); font-size: var(--ds-fs-11); }
.cb-row-meta .cb-dot { margin: 0 5px; color: var(--ds-fg-dim); }
.cb-row-aside {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  text-align: right;
}
.cb-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  color: var(--ds-fg-mid);
  white-space: nowrap;
}
.cb-tag-dot { width: 7px; height: 7px; border-radius: 99px; flex: 0 0 auto; background: var(--ds-fg-dim); }
.cb-tag-dot.high { background: var(--ds-bad); }
.cb-tag-dot.med { background: var(--ds-warn); }
.cb-row-datelabel {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-10);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-dim);
}
.cb-row-date {
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.cb-panel-foot {
  margin-top: auto;
  padding: var(--ds-sp-12) var(--ds-sp-18);
  border-top: 1px solid var(--ds-line-soft);
}
.cb-panel-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-accent);
  text-decoration: none;
}
.cb-panel-more:hover { color: var(--ds-accent-deep); }
.cb-panel-more .arw { transition: transform var(--ds-dur-2) var(--ds-ease-settle); }
.cb-panel-more:hover .arw { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .cb-panel-more .arw { transition: none; }
  .cb-panel-more:hover .arw { transform: none; }
}

/* ── Ownership & control structure (Components/Shared/ControlStructureCard.razor)
   Layered, NOT radial. Every edge in this data runs between the subject and one
   counterparty; there is not a single counterparty-to-counterparty edge. Per-node
   spokes would therefore spend all their ink encoding nothing, and pay for it
   twice: they cannot survive 30 nodes, and a fixed-viewBox SVG scaled to a 360px
   screen renders its labels at about a third size. The panel this replaced used a
   1000x480 viewBox at width:100%, so its 14px names came out near 5px on a phone.
   One labelled arrow per LAYER carries the same information and keeps carrying it.

   Ordinary DOM on a responsive grid, so type stays type: selectable, translatable,
   and it reflows instead of shrinking. ── */
.cstruct { display: flex; flex-direction: column; }

/* The band header carries the label, the shared BASIS phrase, and the count. The
   basis lives here rather than on every card: when a band's nodes all rest on the
   same evidence, repeating it twelve times is twelve lines that say nothing. */
.cstruct-band-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px var(--ds-sp-8);
  margin-bottom: var(--ds-sp-8);
}
.cstruct-band-h .basis {
  flex: 1 1 auto;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.cstruct-band-h .n {
  margin-left: auto;
  font-family: var(--ds-mono);
  font-size: var(--ds-fs-12);
  color: var(--ds-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* auto-fill + minmax is the whole responsive story: one column at 360px, as many
   as fit at 2560px, never a horizontal scrollbar, never a squeezed label. The
   cards are two lines now, so a partial last row reads as a row that happens to
   end, not as an orphan under a wall of taller cards. */
.cstruct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--ds-sp-8);
}

.cstruct-node {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--ds-sp-8) var(--ds-sp-12);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-line);
  border-radius: var(--ds-r-md);
  min-width: 0;
}
.cstruct-node .hd { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cstruct-node .nm {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cstruct-node a.nm:hover { color: var(--ds-accent-deep); }
.cstruct-node .nm.plain { color: var(--ds-fg-mid); }
.cstruct-node .rel {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-node .ev,
.cstruct-node .reach {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  color: var(--ds-fg-mute);
}
.cstruct-node .dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: var(--ds-r-sm);
  background: var(--ds-bad);
}
.cstruct-node.is-distressed { border-left-color: var(--ds-bad); }

/* The subject is the anchor of the whole panel, so it has to win the eye against
   two bands of cards. It does that on WEIGHT, not on a dark fill: a heavier border,
   a solid left rule and the largest type in the panel. The light doctrine is
   test-enforced (DesignDoctrineTests.No_dark_panel_fills) and ink is a text and
   hairline colour here, never a surface. */
.cstruct-subject {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-14) var(--ds-sp-16);
  background: var(--ds-surface);
  border: 1px solid var(--ds-ink);
  border-left: 5px solid var(--ds-ink);
  border-radius: var(--ds-r-md);
  box-shadow: var(--ds-elev-1);
}
.cstruct-subject .nm {
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-18);
  font-weight: 700;
  color: var(--ds-ink);
  overflow-wrap: anywhere;
}
.cstruct-subject .kbo { font-size: var(--ds-fs-12); color: var(--ds-fg-mute); }

/* One connector per LAYER, carrying the direction and the verb. */
.cstruct-flow {
  display: flex;
  align-items: center;
  gap: var(--ds-sp-8);
  padding: var(--ds-sp-12) 0;
  color: var(--ds-fg-dim);
}
.cstruct-flow .line { flex: 1 1 auto; height: 1px; background: var(--ds-line); }
.cstruct-flow .lbl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-fg-mute);
}
.cstruct-flow .arrow { font-size: var(--ds-fs-10); line-height: 1; }

.cstruct-more {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--ds-sp-12);
  border: 1px dashed var(--ds-line);
  border-radius: var(--ds-r-md);
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-more .sub { font-size: var(--ds-fs-11); font-weight: 400; color: var(--ds-fg-mute); }

.cstruct-foot {
  margin: var(--ds-sp-16) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-11);
  line-height: 1.5;
  color: var(--ds-fg-mute);
}

.cstruct-empty { padding: var(--ds-sp-8) 0; }
.cstruct-empty .lead {
  margin: 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-14);
  font-weight: 600;
  color: var(--ds-fg-mid);
}
.cstruct-empty .sub {
  margin: var(--ds-sp-8) 0 0;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-12);
  line-height: 1.55;
  color: var(--ds-fg-mute);
  max-width: 68ch;
}
.cstruct-empty .note {
  padding: var(--ds-sp-12);
  border: 1px solid var(--ds-line);
  border-left: 3px solid var(--ds-warn-border);
  border-radius: var(--ds-r-md);
  background: var(--ds-warn-bg);
  color: var(--ds-fg-mid);
}


/* ── "In elk kantoorplan": the features every office tier shares ──────
   Printed once under the three cards rather than repeated in each, see
   PlanCatalog.OfficeSharedFeatures. Two columns where there is room, one
   on a phone, so nine short lines do not become a nine-screen list. */
.pr-shared {
  margin-top: var(--ds-sp-24, 24px);
  padding: var(--ds-sp-20, 20px);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-r-lg, 14px);
  background: var(--ds-surface);
}
.pr-shared-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
}
@media (min-width: 700px) {
  .pr-shared-list { grid-template-columns: 1fr 1fr; }
}
.pr-shared-list li {
  position: relative;
  padding-left: 22px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13, 13px);
  color: var(--ds-fg-mid);
  line-height: 1.5;
}
.pr-shared-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 99px;
  border: 1.5px solid var(--ds-accent);
}

/* The one forward-looking line on the timeline: the next statutory filing
   deadline. Caption weight, sits above the source filters so "what is coming"
   reads before "what happened". */
.tlx-next {
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  margin:0 0 14px; padding:9px 12px;
  border:1px solid var(--ds-line); border-left:3px solid var(--ds-accent);
  border-radius:var(--ds-r-md); background:var(--ds-good-bg);
  font-size:var(--ds-fs-13); color:var(--ds-ink-soft); line-height:1.45;
}
.tlx-next-k { font-weight:600; color:var(--ds-ink); }

/* The Checked score in the hero aside, where the kerncijfers tiles used to be.
   The barometer card brings its own layout; the wrapper only supplies the
   eyebrow spacing the aside expects. */
.ds-kern-score .ds-kern-eyebrow { margin-bottom:6px; }
.ds-kern-score .card-b { padding:0; }
/* Radar directly under the score, then one sector sentence. Compact by design:
   the owner wants score and shape together at the top, and nothing else. */
.ds-kern-radar { flex:0 0 auto; margin:0; padding:0; border:0; }
.ds-kern-sector { font-size:var(--ds-fs-12); color:var(--ds-fg-mid); line-height:1.5; margin:12px 0 0; }
/* Hero Checked score, ONE row (2026-09-03): number + band + thin gauge left, radar right.
   The stacked version was 570px tall with a red-to-green rainbow under a 94. */
.ds-score-row { display:flex; align-items:center; gap:18px; }
.ds-score-main { flex:1 1 200px; min-width:0; }
.hb-compact-top { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.hb-compact-num { font-family:var(--ds-mono); font-size:38px; font-weight:600; line-height:1; letter-spacing:-0.02em; }
.hb-compact-den { font-family:var(--ds-mono); font-size:var(--ds-fs-13); color:var(--ds-fg-mute); }
.hb-gauge { position:relative; height:6px; margin-top:10px; border-radius:999px; background:var(--ds-line-soft); overflow:hidden; }
.hb-gauge-fill { display:block; height:100%; border-radius:inherit; }
@media (max-width: 720px) {
  .ds-score-row { flex-direction:column; align-items:stretch; }
  /* flex-basis 200px is a WIDTH in the row and a HEIGHT once the row turns into a
     column: the 360 render had 200px of white between the gauge and the radar. */
  .ds-score-main { flex:0 0 auto; }
  .ds-kern-radar { align-self:center; }
}
/* Hero conclusie: the paragraph and its tone dot, flat under the identity block. */
.ds-hero-conclusie { display:flex; align-items:flex-start; gap:10px; margin-top:14px; max-width:62ch; }
.ds-hero-conclusie-dot { flex:0 0 auto; width:8px; height:8px; border-radius:50%; margin-top:7px; }
.ds-hero-conclusie-text { margin:0; font-size:var(--ds-fs-14); line-height:1.6; color:var(--ds-ink-soft); }
/* Faillissementskans footer: the methodology link alone, the caveat lives behind it. */
.pd-foot { margin:14px 0 0; font-size:var(--ds-fs-12); text-align:right; }
.pd-foot a { color:var(--ds-fg-mid); text-decoration:underline; text-underline-offset:2px; }
.pd-foot a:hover { color:var(--ds-ink); }
/* Radar with HTML labels: each axis is a button that explains itself on hover and focus. */
.radar-wrap { position:relative; display:inline-block; line-height:0; }
.radar-lab { position:absolute; line-height:1.2; white-space:nowrap; }
.radar-lab.radar-start { transform:translate(0,-50%); }
.radar-lab.radar-end { transform:translate(-100%,-50%); }
.radar-lab.radar-middle { transform:translate(-50%,-50%); }
.radar-lab-btn { all:unset; display:flex; flex-direction:column; gap:1px; cursor:help; color:var(--ds-fg-mid); }
.radar-start .radar-lab-btn { align-items:flex-start; }
.radar-end .radar-lab-btn { align-items:flex-end; }
.radar-middle .radar-lab-btn { align-items:center; }
.radar-lab-name { font-size:11px; font-weight:600; border-bottom:1px dotted var(--ds-fg-dim); }
.radar-lab-score { font-family:var(--ds-mono); font-size:11px; color:var(--ds-fg-mute); }
.radar-lab-btn:hover .radar-lab-name, .radar-lab-btn:focus-visible .radar-lab-name { color:var(--ds-ink); border-bottom-color:var(--ds-ink); }
.radar-tip { position:absolute; z-index:5; top:calc(100% + 6px); width:240px; padding:8px 10px; border-radius:8px; background:var(--bg-lowest); color:var(--ds-ink); border:1px solid var(--ds-line); font-size:12px; font-weight:400; line-height:1.45; white-space:normal; text-align:left; opacity:0; visibility:hidden; transform:translateY(-2px); transition:opacity .12s ease, transform .12s ease; pointer-events:none; box-shadow:0 6px 20px rgba(16,24,40,.18); }
.radar-start .radar-tip { left:0; }
.radar-end .radar-tip { right:0; }
.radar-middle .radar-tip { left:50%; margin-left:-120px; }
.radar-bottom .radar-tip { top:auto; bottom:calc(100% + 6px); transform:translateY(2px); }
.radar-lab-btn:hover .radar-tip, .radar-lab-btn:focus-visible .radar-tip, .radar-lab-btn:focus .radar-tip { opacity:1; visibility:visible; transform:none; }
/* ───── address page (omgevingsanalyse) ───────────────────────────────
   The page is about a PLACE and had no map, and a bare "124 companies"
   that the reader had no scale for. Tiles carry the numbers, the note
   carries the reading, and the map carries the place. */
.addr-tiles {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
  gap:10px; margin-bottom:16px;
}
.addr-tile {
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-radius:var(--ds-r-md); padding:13px 14px;
}
.addr-tile-n {
  font-family:var(--ds-sans); font-size:20px; font-weight:640;
  letter-spacing:-0.02em; color:var(--ds-ink); line-height:1.15;
}
.addr-tile-l {
  font-size:11.5px; color:var(--ds-fg-mute); margin-top:3px; line-height:1.35;
}
.addr-note {
  display:flex; flex-direction:column; gap:5px;
  background:var(--ds-surface); border:1px solid var(--ds-line);
  border-left:3px solid var(--ds-fg-mute);
  border-radius:var(--ds-r-md); padding:12px 14px; margin-bottom:18px;
}
.addr-note strong { color:var(--ds-ink); font-size:var(--ds-fs-13); }
.addr-note span   { color:var(--ds-fg-mid); font-size:var(--ds-fs-13); line-height:1.55; }
.addr-note.elevated { border-left-color:var(--ds-warn); }
.addr-note.high     { border-left-color:var(--ds-accent); }
.addr-h2 {
  font-family:var(--ds-sans); font-size:var(--ds-fs-16); font-weight:600;
  color:var(--ds-ink); margin:0 0 10px;
}

/* ── Person dossier (PersonDossierView, .pd-*) and curator page (PersonPage, .pp-*)
   ribbons, 2026-09-03. Tiles auto-fit at desktop; under 480 px ONE column,
   because at 360 the caps label INSOLVENTIEPROCEDURES was wider than half the
   viewport minus padding and ran past its tile edge (seen on r238). Labels may
   wrap, and as a backstop break inside a word rather than overflow. */
.pd-kpis, .pp-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin: 20px 0;
}
.pd-kpis .ds-caps, .pp-kpis .ds-caps { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .pd-kpis, .pp-kpis { grid-template-columns: 1fr; gap: 12px; }
}
/* The mandates table has percentage columns, so inside ds-table-scroll it
   squeezed to the viewport and wrapped every role word by word, with the
   Periode header cut (r238 at 360). A floor on the table width makes the
   wrapper scroll instead, and a period never breaks across lines. */
.pd-mandates .ds-table { min-width: 620px; }
.pd-mandates .pd-period { white-space: nowrap; }

/* ───── listing pages: the filter disclosure (2026-09-03, r239 follow-up) ─────
   Under 640px the seven selects of /faillissementen and its nine siblings sit
   behind one "Filters" summary, so the count and the first rows stay in the
   first screen at 360. From 640px the same <details> is forced open and its
   summary hidden, so the desktop form is unchanged. ::details-content is the
   CSS-only way to show a closed details' content (Chrome 131, Safari 18.4,
   Firefox 138); a browser without it keeps the summary and toggles normally,
   which is a usable fallback, never a hidden form. The nested "Eigen periode"
   details inside the body is untouched by this rule (direct child only). */
.live-filters > summary { margin-bottom: 0; }
.live-filters[open] > summary { margin-bottom: var(--ds-sp-12); }
@media (min-width: 640px) {
  @supports selector(::details-content) {
    .live-filters > summary { display: none; }
    .live-filters::details-content { content-visibility: visible; display: block; }
  }
}

/* ───── dossier: a stage that did not answer (2026-09-03) ─────
   One line where a section or panel used to be (UnreadStageLine): the
   section's name in ink, the sentence in mid tone, a warn dot the way every
   status on the dossier is an 8px dot. Same scroll margin as .dossier-section
   (Tokens.css) because a deep link to the retired section lands here. */
.dossier-unread-line {
  position: relative;
  margin: 0;
  padding-left: 16px;
  font-family: var(--ds-sans);
  font-size: var(--ds-fs-13);
  line-height: 1.5;
  color: var(--ds-fg-mid);
  scroll-margin-top: 64px;
}
.dossier-unread-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-warn);
}
.dossier-unread-k { font-weight: 600; color: var(--ds-ink); }
@media (min-width: 1100px) {
  .dossier-unread-line { scroll-margin-top: 80px; }
}
/* ───── The alive layer (2026-09-03): a fact where the cursor is, without JavaScript ─────
   Owner, comparing us to jaarrekening.be: "they use a lot of interactive elements
   which makes the page come alive". One tooltip primitive, three hosts (the
   timeline's year columns, the KPI rail's sparkline points, the Faillissementskans
   driver chips), the same idea as the radar labels above: a focusable host, the tip
   inside it or right after it, CSS shows it on :hover and on keyboard focus. The tip
   is a light card (white surface, ink text, hairline, shadow), never a dark fill, and
   it is positioned against its host's CONTAINER rather than the host itself, left-
   anchored on the left half and right-anchored on the right half, so it cannot leave
   the viewport at 360 px. pointer-events:none so a tip never steals the hover that
   opened it. */
.ck-tip {
  position:absolute; z-index:6; box-sizing:border-box;
  width:max-content; max-width:min(280px, 100%);
  padding:7px 10px; border-radius:8px;
  background:var(--bg-lowest); color:var(--ds-ink); border:1px solid var(--ds-line);
  box-shadow:0 6px 20px rgba(16,24,40,.18);
  font-family:var(--ds-sans); font-size:12px; font-weight:400; line-height:1.45;
  letter-spacing:normal; text-transform:none; text-align:left; white-space:normal;
  opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none;
}
.ck-tip-host:hover > .ck-tip, .ck-tip-host:focus-visible > .ck-tip,
.ck-tip-host:hover + .ck-tip, .ck-tip-host:focus-visible + .ck-tip { opacity:1; visibility:visible; }

/* Sparkline points (Sparkline.razor, PointTips): a 16 px hit area centred on
   each point except the newest, which is the tile's headline. The tip is the hit
   area's next sibling, anchored to the sparkline's own box, above the line; a
   7 px dot in the line colour marks the point while its tip is up. */
.spark-wrap { position:relative; display:block; line-height:0; }
.ds-kpirail-spark .spark-wrap { width:100%; }
.spark-pt {
  all:unset; position:absolute; box-sizing:border-box;
  width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%;
  cursor:help;
}
.spark-pt::after {
  content:""; position:absolute; left:50%; top:50%; width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%;
  background:var(--spark-c, var(--data-blue)); box-shadow:0 0 0 2px var(--bg-lowest);
  opacity:0; transition:opacity .12s ease;
}
.spark-pt:hover::after, .spark-pt:focus-visible::after { opacity:1; }
.spark-tip { bottom:calc(100% + 4px); font-family:var(--ds-mono); font-size:11px; }

/* Faillissementskans drivers (PdScoreCard): the chip is a button, the tip its
   child, positioned against the chip row (position:relative on the row), under
   the row, at the row's left edge: a chip's place in a wrapping row is not known
   when the page is rendered, and the row's left edge is always in the viewport.
   The button resets to the chip's look; the chip classes do the rest. */
.pd-drv { font-family:inherit; line-height:inherit; margin:0; cursor:help; appearance:none; -webkit-appearance:none; }
.pd-drv:focus-visible { outline:2px solid var(--ds-accent); outline-offset:2px; }
.pd-drv-tip { left:0; top:calc(100% + 6px); max-width:min(400px, 100%); }

/* ═══════════════════════════════════════════════════════════════════════════
   redesign 2026-09-04
   The company dossier in the owner's Claude Design system: the artboard at
   docs/design/dossier-redesign-2026-09-04/report.dc.html is the spec, not an
   inspiration. Everything below is rooted at .rd-page, the dossier's one
   column; the rest of the site keeps Inter and the --ds-* system until the
   owner extends the redesign. The --rd-* tokens live in Tokens.css.

   THE CLASS NAMES ARE A CONTRACT. Four lanes built the sections in parallel
   against these names (each with a literal fallback in its own markup):
   rename nothing here without renaming it in every section.

   Order of business: the column, type utilities, section heading, card,
   grids, buttons, pill, then the frame this lane owns (breadcrumb, hero,
   streaming skeleton, sections column, the Checked score frame, the register
   card), and last the harmonisation of the July frame classes a section
   component may still carry (.dossier-section-*, .ds-panel-*).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The one column: 1180 wide, 32px sides, Archivo at 15px ──────────────── */
.page.rd-page {
  max-width: 1180px;
  padding: 0 32px 96px;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rd-ink);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
@media (max-width: 768px) { .page.rd-page { padding: 0 20px 64px; } }
@media (max-width: 480px) { .page.rd-page { padding: 0 16px 56px; } }

/* The home needs no width of its own: --ds-content-max is 1180 now, so the
   shell's header and footer stand in the same column as this page. See
   Tokens.css. */

/* Text links are green and go ink on hover (the artboard's own rule).
   Controls that happen to be anchors keep their own colour; :where() keeps
   this at (0,1,1) so any more specific rule wins without a fight. */
.rd-page a:where(:not(.btn, .rd-btn, .rd-pill, .ds-risk-chip, .rd-crumbs-brand)) { color: var(--rd-green); text-decoration: none; }
.rd-page a:where(:not(.btn, .rd-btn, .rd-pill, .ds-risk-chip, .rd-crumbs-brand)):hover { color: var(--rd-ink); text-decoration: underline; }

/* ── Type utilities ──────────────────────────────────────────────────────── */
.rd-mono { font-family: var(--rd-mono); }
.rd-num { font-family: var(--rd-mono); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.rd-eyebrow {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
.rd-note { font-size: 12px; line-height: 1.5; color: var(--rd-grey-light); }
.rd-up { color: var(--rd-green); }
.rd-down { color: var(--rd-red); }
.rd-flat { color: var(--rd-grey-light); }

/* ── Section: a mono eyebrow over a hairline; 60px between sections ─────── */
.rd-section { min-width: 0; scroll-margin-top: 72px; }
.rd-h2 {
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-line);
  font-family: var(--rd-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
/* The Signalen form: a bare eyebrow, and the row under it (a lead sentence
   left, a legend right) carries the rule. */
.rd-h2-bare { margin-bottom: 6px; padding-bottom: 0; border-bottom: 0; }
.rd-h2-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-line);
  font-size: 14px;
  color: var(--rd-grey);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.rd-card {
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  padding: 24px 28px;
  min-width: 0;
}
.rd-card-flat { background: transparent; border: 0; border-radius: 0; padding: 0; }
.rd-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 18px;
}
.rd-card-title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--rd-ink);
}
.rd-card-sub { margin-top: 2px; font-size: 13px; color: var(--rd-grey); }
.rd-card-head-right { font-size: 12px; color: var(--rd-grey); }
@media (max-width: 480px) { .rd-card { padding: 18px; } }

/* ── Grids, and how they stack on a phone ───────────────────────────────── */
.rd-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.rd-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.rd-grid-2 > *, .rd-grid-4 > * { min-width: 0; }
@media (max-width: 900px) { .rd-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .rd-grid-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .rd-grid-4 { grid-template-columns: minmax(0, 1fr); gap: 12px; } }

/* ── Buttons: outline by default, the one ink fill is Volgen ────────────── */
.rd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--rd-ink);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease), background var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.rd-btn:hover { border-color: var(--rd-ink); color: var(--rd-ink); text-decoration: none; }
.rd-btn:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }
/* Ink by the owner's own design (the 2026-06 no-dark-buttons doctrine is
   superseded on this surface; DesignDoctrineTests names this selector). */
.rd-btn-primary { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFFFFF; }
.rd-btn-primary:hover { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }

/* ── Pill: outline, coloured text and border, a 7px dot in the same colour ─ */
.rd-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border: 1px solid var(--rd-grey);
  border-radius: 999px;
  font-family: var(--rd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--rd-grey);
  white-space: nowrap;
  text-decoration: none;
}
.rd-pill-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.rd-pill-g { color: var(--rd-green); border-color: var(--rd-green); }
.rd-pill-a { color: var(--rd-orange); border-color: var(--rd-orange); }
.rd-pill-r { color: var(--rd-red); border-color: var(--rd-red); }

/* ── Breadcrumb: the mark, CHECKED, the sector, the company ─────────────── */
.rd-crumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 20px 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rd-crumbs > * { min-width: 0; overflow-wrap: anywhere; }
.rd-crumbs-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--rd-ink); font-weight: 700; text-decoration: none; }
.rd-crumbs-brand:hover { color: var(--rd-green); text-decoration: none; }
.rd-crumbs-mark { display: block; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 6px; }
.rd-page .rd-crumbs a:not(.rd-crumbs-brand) { color: var(--rd-grey); text-decoration: none; }
.rd-page .rd-crumbs a:not(.rd-crumbs-brand):hover { color: var(--rd-ink); text-decoration: underline; }
.rd-crumbs-sep { color: var(--rd-grey-light); }

/* ── Hero: 2px ink rule, the 54px name with its pill, the identity line,
      the conclusion beside the actions ─────────────────────────────────── */
.rd-hero { border-top: 2px solid var(--rd-ink); padding-top: 26px; }
.rd-hero-titlerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 16px; }
.rd-hero-title {
  margin: 0;
  min-width: 0;
  font-family: var(--rd-sans);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
  /* Named so the @view-transition morphs the name across dossier navigations,
     as the July hero's title did. */
  view-transition-name: dossier-hero-title;
}
.rd-hero-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--rd-grey); }
.rd-hero-meta > * { min-width: 0; overflow-wrap: anywhere; }
.rd-hero-meta strong { color: var(--rd-ink); font-weight: 600; }
.rd-hero-id { display: inline-flex; align-items: center; gap: 4px; font-family: var(--rd-mono); }
.rd-hero-foot { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 40px; align-items: end; }
.rd-hero-lead { max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rd-hero-lead p { margin: 0; }
/* The conclusion (ConclusionCard, compact) inside the lead slot: the
   paragraph at 17px, its tone dot kept, the hero-aside spacing dropped. */
.rd-hero-lead .ds-hero-conclusie { margin-top: 0; max-width: none; gap: 10px; }
.rd-hero-lead .ds-hero-conclusie-dot { margin-top: 10px; }
.rd-hero-lead .ds-hero-conclusie-text { font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rd-hero-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; }
.rd-hero-actions > * { min-width: 0; }
/* The action buttons are the site's .btn (WatchButton, CompareCta, the print
   link) in the artboard's clothes; the first one, Volgen, is the ink fill and
   the watched state keeps its green. */
.rd-hero-actions .btn {
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--rd-ink);
  box-shadow: none;
}
.rd-hero-actions .btn:hover { border-color: var(--rd-ink); background: #FFFFFF; box-shadow: none; }
.rd-hero-actions > :first-child .btn, .rd-hero-actions > .btn:first-child { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFFFFF; }
.rd-hero-actions > :first-child .btn:hover, .rd-hero-actions > .btn:first-child:hover { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }
.rd-hero-actions .btn.primary { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }
/* The neutral risk chip (no Checked score to show) sits in the title row as
   an outline pill like its neighbours; its dot colour stays inline. */
.rd-hero-titlerow .ds-risk-chip {
  padding: 5px 11px;
  border-color: var(--rd-grey);
  font-family: var(--rd-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rd-hero-titlerow .ds-risk-chip:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.rd-hero-titlerow .ds-risk-chip-dot { width: 7px; height: 7px; }
.rd-hero-meta .kbo-copy { width: 20px; height: 20px; margin-left: 2px; color: var(--rd-grey-light); }
@media (max-width: 768px) {
  .rd-hero-title { font-size: 38px; }
  .rd-hero-foot { grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
}
@media (max-width: 480px) {
  .rd-hero { padding-top: 20px; }
  .rd-hero-title { font-size: 32px; }
}

/* ── Streaming skeleton, in the same clothes so the swap moves nothing ───── */
.rd-page .ck-skel-hero { border-top: 2px solid var(--rd-ink); padding: 26px 0 0; }
.rd-page .ck-skel-hero-title {
  font-family: var(--rd-sans);
  font-size: 54px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
}
.rd-page .ck-skel-hero-meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--rd-grey); }
.rd-page .ck-skel-hero-meta strong { color: var(--rd-ink); font-weight: 600; }
.rd-page .ck-skel-kbo { font-family: var(--rd-mono); font-size: 14px; }
.rd-page .ck-skel-stack { margin-top: 44px; gap: 20px; }
.rd-page .ck-skel-panel { border-radius: 8px; border-color: var(--rd-line); }
@media (max-width: 768px) { .rd-page .ck-skel-hero-title { font-size: 38px; } }
@media (max-width: 480px) { .rd-page .ck-skel-hero-title { font-size: 32px; } }

/* ── The sections column ─────────────────────────────────────────────────── */
.rd-page .dossier-sections { gap: 60px; margin-top: 44px; }
.rd-page .dossier-section { min-width: 0; scroll-margin-top: 72px; }
.rd-page .dossier-unread-line { font-family: var(--rd-sans); font-size: 14px; color: var(--rd-grey); scroll-margin-top: 72px; }
.rd-stack { display: flex; flex-direction: column; gap: 20px; }

/* ── The Checked score section: the frame; lane S styles the cards inside ── */
.rd-score-card { padding: 28px 32px; }
.rd-score-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.rd-score-grid-2 { grid-template-columns: 220px minmax(0, 1fr); }
.rd-score-grid-solo { grid-template-columns: minmax(0, 1fr); }
.rd-score-col { min-width: 0; }
.rd-score-col > .rd-eyebrow + * { margin-top: 8px; }
.rd-score-risk { border-left: 1px solid var(--rd-line-soft); padding-left: 34px; }
.rd-score-grid-solo .rd-score-risk { border-left: 0; padding-left: 0; }
.rd-score-main .hb-compact-num { font-size: 76px; font-weight: 700; line-height: 0.86; letter-spacing: -0.04em; }
.rd-score-main .hb-compact-den { font-size: 15px; color: var(--rd-grey-light); }
.rd-score-sector { margin: 18px 0 0; font-size: 13px; line-height: 1.45; color: var(--rd-grey); }
.rd-score-teaser { margin-top: 20px; }
.rd-score-credit { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--rd-line-soft); }
.rd-score-credit .rd-card-head { margin-bottom: 12px; }
@media (max-width: 900px) {
  .rd-score-card { padding: 24px; }
  .rd-score-grid, .rd-score-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
  .rd-score-risk { grid-column: 1 / -1; border-left: 0; padding-left: 0; border-top: 1px solid var(--rd-line-soft); padding-top: 24px; }
  .rd-score-grid-solo .rd-score-risk { border-top: 0; padding-top: 0; }
}
@media (max-width: 600px) {
  .rd-score-card { padding: 18px; }
  .rd-score-grid, .rd-score-grid-2, .rd-score-grid-solo { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rd-score-main .hb-compact-num { font-size: 60px; }
}

/* ── Ondernemingsgegevens · Kruispuntbank: three columns in one card ─────── */
.rd-reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.rd-reg-col { min-width: 0; }
.rd-reg-rows { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; }
.rd-kv { display: flex; justify-content: space-between; gap: 12px; }
.rd-kv-k { flex: 0 0 auto; color: var(--rd-grey); }
.rd-kv-v { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.rd-reg-act { display: flex; align-items: baseline; gap: 10px; }
.rd-reg-act-code { flex: 0 0 auto; font-family: var(--rd-mono); color: var(--rd-grey); }
.rd-reg-act-main { font-weight: 500; color: var(--rd-ink); }
.rd-reg-src { margin-top: 10px; display: grid; gap: 6px; font-size: 14px; color: var(--rd-grey); }
.rd-reg-foot { margin: 14px 0 0; }

/* ── Harmonisation: sections and panels that still carry the July frame ───
   A lane's component that has not switched to .rd-h2 / .rd-card yet renders
   in the same system: the eyebrow heading, the flat white card, no tinted
   head strip. Remove this block once every section writes the new classes. */
.rd-page .dossier-section-head { margin: 0 0 20px; padding-bottom: 10px; border-bottom: 1px solid var(--rd-line); }
.rd-page .dossier-section-title, .rd-page .dossier-section-h {
  display: block;
  margin: 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
.rd-page .dossier-section-title::before { display: none; }
.rd-page .dossier-section-rule { display: none; }
.rd-page .dossier-stack { gap: 20px; }
.rd-page .ds-panel { border: 1px solid var(--rd-line); border-radius: 8px; box-shadow: none; }
.rd-page .ds-panel-head { padding: 24px 28px 0; border-bottom: 0; background: transparent; align-items: baseline; }
.rd-page .ds-panel-title { font-family: var(--rd-sans); font-size: 17px; font-weight: 600; letter-spacing: normal; color: var(--rd-ink); }
.rd-page .ds-panel-sub { font-size: 13px; color: var(--rd-grey); }
.rd-page .ds-panel-body { padding: 24px 28px; }
.rd-page .ds-panel-head + .ds-panel-body { padding-top: 14px; }
.rd-page .btn { font-family: var(--rd-sans); border-radius: 4px; }
@media (max-width: 480px) {
  .rd-page .ds-panel-head { padding: 18px 18px 0; }
  .rd-page .ds-panel-body { padding: 18px; }
  .rd-page .ds-panel-head + .ds-panel-body { padding-top: 12px; }
}
/* A section nested inside a redesign section (the Bestuur · vestiging ·
   vastgoed grid holds two) prints its own heading as a card title, never as a
   second section eyebrow. */
.rd-section .dossier-section > .dossier-section-head { margin: 0 0 12px; padding: 0; border-bottom: 0; }
.rd-section .dossier-section > .dossier-section-head > .dossier-section-title,
.rd-section .rd-section > .rd-h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
  color: var(--rd-ink);
}
/* ═══════════════════════════════════════════════════════════════════
   redesign F: the Financieel section of the dossier redesign (2026-09-04)

   The owner's design, built in Claude Design, is the specification
   (docs/design/dossier-redesign-2026-09-04/report.dc.html, section
   #financieel). Everything here is prefixed .rdf- and scoped under
   section.rdf, so no other section can be moved by a rule in this block.

   The palette comes from the redesign tokens (lane V) with the design's
   own literal as the fallback, so this block renders correctly on its own
   and takes the tokens the moment they land. Ink is never a surface fill
   (DesignDoctrineTests): where the design filled a bar with ink, the deep
   green carries the same contrast in the house palette.

   Responsive, measured at 1440 / 1024 / 768 / 560 / 360:
     - the four KPI cards go 4 -> 2 -> 1;
     - the multi-year grid scrolls inside its own container, never the page;
     - the result chart and the balance strips stack;
     - the ratio grid goes 7 -> 4 -> 3 -> 2;
     - the two filed-statement tables stack.
   ═══════════════════════════════════════════════════════════════════ */

/* The multi-year grid's track widths live here, on the section, and the grid
   itself only says HOW MANY year columns it has (--rdf-cols, set inline by
   MultiYearOverview because repeat()'s count cannot be a variable). Custom
   properties substitute lazily, so a media query that redefines --rdf-post
   here reshapes a template the component already wrote. */
.rdf {
  --rdf-gap: 20px;
  --rdf-post: 200px;
  --rdf-ymin: 90px;
  --rdf-trend: 84px;
}

/* the heading tail: "Financieel · boekjaar 2025, microschema". The year, the
   schema and the basis are what a reader needs to interpret every figure
   under it, so they belong in the heading, quieter than the section name. */
.rdf-h-sub {
  font-weight: 400;
  color: var(--rd-grey, #6E7671);
  letter-spacing: 0;
}

.rdf-stack { display: grid; gap: var(--rdf-gap); }

/* every block of the section is a card; .rd-card (lane V) carries the
   surface, the hairline and the radius, .rdf-card only the design's padding */
.rdf-card { padding: 24px 28px; }
.rdf-result { padding-bottom: 20px; }

.rdf-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}
.rdf-card-title {
  font-family: var(--rd-sans, Archivo, Inter, sans-serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--rd-ink, #101413);
  line-height: 1.25;
}
.rdf-card-sub {
  margin-top: 2px;
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}
.rdf-card-meta {
  font-size: 11px;
  color: var(--rd-grey, #6E7671);
}

/* Every figure in this section is set in the mono face: a column of amounts
   only lines up when the digits are one width, and the design leans on that
   alignment in five of its six blocks. Declared here rather than borrowed
   from .rd-mono so the section renders correctly on its own. */
.rdf-mono,
.rdf-my-head,
.rdf-fs-head { font-family: var(--rd-mono, 'JetBrains Mono', monospace); }

/* the per-block marker classes: the design gives each card its own rhythm,
   and these are where a card-specific rule goes without reaching for a
   descendant selector on a shared class */
.rdf-my-card .rdf-scroll { margin-bottom: 2px; }
.rdf-ratios-card .rdf-card-head { align-items: baseline; }
.rdf-fs-card .rdf-card-sub { margin-bottom: 2px; }

.rdf-note,
.rdf-foot {
  font-size: 12px;
  line-height: 1.5;
  color: var(--rd-grey-light, #9AA29E);
}
.rdf-foot { margin-top: 12px; }
.rdf-note { margin: 0; }

/* the delta glyphs. The glyph carries the DIRECTION, the colour carries the
   FAVOUR, which is why a falling debt is a green ▼ (the ratio grid says so
   in one line under it). "flat" is grey: no move to judge. */
.rdf-tone-up   { color: var(--rd-green, #0C7A52); }
.rdf-tone-dn   { color: var(--rd-red, #B23A1F); }
.rdf-tone-flat { color: var(--rd-grey-light, #9AA29E); }

.rdf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--rd-grey, #6E7671);
}
.rdf-legend-key { display: inline-flex; align-items: center; gap: 6px; }
.rdf-swatch { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 1px; }
.rdf-swatch-a { background: var(--rd-green, #0C7A52); }
.rdf-swatch-b { background: var(--rd-green-mid, #9CCBB4); }

/* ── 1. the four KPI cards ─────────────────────────────────────────── */

.rdf-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rdf-gap);
}
.rdf-kpi { padding: 18px 20px 16px; }
.rdf-kpi-label {
  font-size: 13px;
  line-height: 1.3;
  color: var(--rd-grey, #6E7671);
}
.rdf-kpi-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.rdf-kpi-value {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--rd-ink, #101413);
}
.rdf-kpi-delta { font-size: 13px; font-weight: 700; }
.rdf-kpi-prev {
  margin-top: 3px;
  font-size: 11px;
  color: var(--rd-grey, #6E7671);
}
/* the honest note a tile prints instead of a figure this filing does not
   hold: small, quiet, and without the delta or the sparkline it has no data
   for. A tile is never empty and never a bare dash. */
.rdf-kpi-value-note {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--rd-grey, #6E7671);
}
.rdf-kpi-spark { margin-top: 14px; }
.rdf-kpi-range {
  margin-top: 5px;
  font-size: 10px;
  color: var(--rd-grey-light, #9AA29E);
}

/* ── 2. Meerjarenoverzicht ─────────────────────────────────────────── */

/* the grid scrolls in its own container so the PAGE never scrolls sideways.
   width:max-content with min-width:100% is what lets the tracks keep their
   minimum and the box still fill a wide card. */
.rdf-scroll {
  margin-top: 18px;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
.rdf-my {
  width: max-content;
  min-width: 100%;
  /* the fallback is the design's five-year shape; the component writes the
     real one inline, with the year count it actually has */
  --rdf-cols: var(--rdf-post) repeat(5, minmax(var(--rdf-ymin), 1fr)) var(--rdf-trend);
}
.rdf-my-head,
.rdf-my-row {
  display: grid;
  grid-template-columns: var(--rdf-cols);
  gap: 0 10px;
}
.rdf-my-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-ink, #101413);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-my-row {
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rd-line-soft, #F0F2F1);
}
.rdf-my-row:last-child { border-bottom: 0; }
.rdf-my-post { font-size: 14px; font-weight: 500; color: var(--rd-ink, #101413); }
.rdf-my-head .rdf-my-post { font-size: 11px; font-weight: 400; color: var(--rd-grey, #6E7671); }
.rdf-my-year, .rdf-my-cell { text-align: right; }
.rdf-my-year-last { color: var(--rd-ink, #101413); }
.rdf-my-trend { text-align: right; }
.rdf-my-cell {
  font-size: 14px;
  font-weight: 400;
  color: var(--rd-text, #46504C);
}
.rdf-my-cell-last { font-weight: 700; color: var(--rd-ink, #101413); }
.rdf-my-delta {
  display: block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}
.rdf-my-spark { justify-self: end; }

/* ── 3. Resultaat per boekjaar ─────────────────────────────────────── */

.rdf-chart { margin-top: 20px; max-width: 100%; }
.rdf-gcols { display: block; }
.rdf-result-sentence {
  margin-top: 14px;
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}

/* the chart and the balance strips sit side by side, the chart wider */
.rdf-row2 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: var(--rdf-gap);
}
.rdf-row2-single { grid-template-columns: minmax(0, 1fr); }

/* ── 4. Balanssamenstelling ────────────────────────────────────────── */

.rdf-bc-label {
  margin-top: 22px;
  font-family: var(--rd-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-bc-bar {
  display: flex;
  height: 30px;
  margin-top: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.rdf-bc-seg {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 10px;
  font-family: var(--rd-mono, 'JetBrains Mono', monospace);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
}
/* activa: the fixed part carries the accent, the current part the tint */
.rdf-bc-seg-fixed   { background: var(--rd-green, #0C7A52); color: #FFFFFF; }
.rdf-bc-seg-current { background: var(--rd-green-line, #CFE3D8); color: var(--rd-ink, #101413); }
/* passiva: the design filled eigen vermogen with ink. Ink is a text colour
   on this site (design doctrine, test-enforced), so the deep green takes it
   and the line grey takes schulden: the same contrast, the house palette. */
.rdf-bc-seg-equity     { background: var(--rd-green-deep, #0A6444); color: #FFFFFF; }
.rdf-bc-seg-provisions { background: var(--rd-green-mid, #9CCBB4); color: var(--rd-ink, #101413); }
.rdf-bc-seg-debt       { background: var(--rd-line, #E4E7E6); color: var(--rd-ink, #101413); }
/* the prior year under it: the same split, one shade of grey quieter, so the
   eye reads the shift without a second set of numbers */
.rdf-bc-prior {
  display: flex;
  height: 12px;
  margin-top: 3px;
  border-radius: 3px;
  overflow: hidden;
}
.rdf-bc-pseg-fixed, .rdf-bc-pseg-equity { background: #B6BEBA; }
.rdf-bc-pseg-provisions { background: #D3D9D6; }
.rdf-bc-pseg-current, .rdf-bc-pseg-debt { background: var(--rd-line, #E4E7E6); }
.rdf-bc-lines {
  margin-top: 9px;
  display: grid;
  gap: 5px;
  font-size: 13px;
  color: var(--rd-text, #46504C);
}
.rdf-bc-line { display: flex; justify-content: space-between; gap: 12px; }
.rdf-bc-delta { font-weight: 500; }
.rdf-bc-sentence {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line, #E4E7E6);
  font-size: 13px;
  line-height: 1.5;
  color: var(--rd-grey, #6E7671);
}

/* ── 5. Kerncijfers en ratio's ─────────────────────────────────────── */

/* the 1px gap IS the grid line: the background shows through between the
   tiles, so fourteen tiles read as one table without fourteen borders */
.rdf-ratios {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--rd-line, #E4E7E6);
  border: 1px solid var(--rd-line, #E4E7E6);
  border-radius: 6px;
  overflow: hidden;
}
.rdf-ratio {
  background: var(--ds-surface, #FFFFFF);
  padding: 14px;
  min-width: 0;
}
.rdf-ratio-label {
  font-size: 12px;
  line-height: 1.3;
  color: var(--rd-grey, #6E7671);
}
.rdf-ratio-row {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}
.rdf-ratio-value {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rd-ink, #101413);
}
.rdf-ratio-arrow { font-size: 12px; font-weight: 700; }
.rdf-ratio-prev {
  margin-top: 2px;
  font-size: 11px;
  color: var(--rd-grey-light, #9AA29E);
}

/* ── 6. Neergelegde jaarrekening ───────────────────────────────────── */

.rdf-fs {
  margin-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 40px;
}
.rdf-fs-block { min-width: 0; }
.rdf-fs-head,
.rdf-fs-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50px 66px 84px;
  gap: 8px;
}
.rdf-fs-single .rdf-fs-head,
.rdf-fs-single .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 50px 84px; }
.rdf-fs-head {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-ink, #101413);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rdf-fs-row {
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--rd-line-soft, #F0F2F1);
  font-size: 14px;
  color: var(--rd-ink, #101413);
}
.rdf-fs-row:last-child { border-bottom: 0; }
.rdf-fs-post { min-width: 0; overflow-wrap: anywhere; }
.rdf-fs-strong .rdf-fs-post { font-weight: 600; }
.rdf-fs-code { font-size: 11px; color: var(--rd-grey-light, #9AA29E); }
.rdf-fs-num, .rdf-fs-prev, .rdf-fs-val { text-align: right; }
.rdf-fs-prev { color: var(--rd-grey-light, #9AA29E); }
.rdf-fs-val { font-weight: 600; white-space: nowrap; }
.rdf-fs-arrow { font-weight: 700; }
.rdf-fs-year-last { color: var(--rd-ink, #101413); }

/* the paid depth, at the foot of the tables it is about: never between the
   reader and the figures (owner, 2026-09-03) */
.rdf-gate {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rd-line, #E4E7E6);
  font-size: 13px;
  color: var(--rd-grey, #6E7671);
}
.rdf-gate-text { display: inline-flex; align-items: baseline; gap: 6px; }
.rdf-gate-link {
  font-weight: 600;
  color: var(--rd-green, #0C7A52);
  text-decoration: none;
  white-space: nowrap;
}
.rdf-gate-link:hover { text-decoration: underline; }

.rdf-export { margin: 0; font-size: 13px; }
.rdf-export a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--rd-green, #0C7A52);
  text-decoration: none;
}
.rdf-export a:hover { text-decoration: underline; }

/* ── responsive ────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .rdf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdf-ratios { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rdf-row2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .rdf-ratios { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rdf-fs { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rdf-fs-block + .rdf-fs-block { margin-top: 22px; }
}

@media (max-width: 560px) {
  /* a narrower post column and narrower years: the grid still scrolls, but
     over less distance */
  .rdf {
    --rdf-gap: 14px;
    --rdf-post: 132px;
    --rdf-ymin: 76px;
    --rdf-trend: 78px;
  }
  .rdf-card { padding: 18px 16px; }
  .rdf-kpi { padding: 14px 16px 14px; }
  .rdf-kpis { grid-template-columns: minmax(0, 1fr); }
  .rdf-ratios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdf-kpi-value { font-size: 26px; }
  .rdf-my-post { font-size: 13px; }
  /* the same treatment for the chart: its own width, and the container scrolls,
     rather than a 10px axis label scaled down to six */
  .rdf-chart { overflow-x: auto; overscroll-behavior-x: contain; }
  .rdf-gcols { min-width: 460px; }
  .rdf-fs-head, .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 38px 60px 76px; gap: 6px; }
  .rdf-fs-single .rdf-fs-head,
  .rdf-fs-single .rdf-fs-row { grid-template-columns: minmax(0, 1fr) 38px 76px; }
  .rdf-fs-row { font-size: 13px; }
  .rdf-fs-code { font-size: 10px; }
}
/* ───── redesign T ──────────────────────────────────────────────────────
   The owner's dossier redesign of 2026-09-04
   (docs/design/dossier-redesign-2026-09-04/report.dc.html), lane T: the
   Tijdlijn, the Bestuur · vestiging · vastgoed pair and the Vergelijkbare
   bedrijven cards.

   Every value here is read off that file. The design's palette arrives as
   the --rd-* tokens (lane V); each var() carries the literal from the same
   design as its fallback, so a card is never unstyled while the token layer
   lands, and the two can never disagree about what the colour IS.

   NO JAVASCRIPT. The dossier is server-rendered, so the timeline's source
   filter is radio inputs plus :has(): the radios are direct children of the
   card, before the head and the body, and `#tlxf-x:checked ~` reaches both
   the labels (the active state) and the rows (hide the rest). It keeps
   working with scripting off.

   ONE NOTE ON THE DARK FILL. DesignDoctrineTests.No_dark_panel_fills forbids
   near-black SURFACES, and it is right to. The ink in this block is not a
   surface: it is a 13px timeline dot (the design's mark for a Staatsblad
   act) and the selected state of a 30px filter control, both drawn that way
   in the owner's file. The rule that pins them is
   TimelineAxisSharesTheChipColoursTests, which reads this stylesheet.  */

.rdt-card {
  background:#FFFFFF;
  border:1px solid var(--rd-line, #E4E7E6);
  border-radius:8px;
  padding:24px 28px;
}
.rdt-empty { margin:0; }

/* ── Tijdlijn ─────────────────────────────────────────────────────────── */

.rdt-tl { position:relative; }
/* The radios carry the filter state. Off-screen rather than display:none so
   they stay focusable and the labels stay operable by keyboard. */
.rdt-r { position:absolute; opacity:0; pointer-events:none; width:0; height:0; }

.rdt-tl-head {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px;
}
.rdt-filters { display:flex; gap:6px; flex-wrap:wrap; }
.rdt-filter {
  padding:7px 13px; border-radius:4px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:12px; line-height:1.2; cursor:pointer; user-select:none;
  border:1px solid #D5DAD7; background:#FFFFFF; color:var(--rd-ink, #101413);
  display:inline-flex; align-items:center; gap:7px;
  transition:background .12s, border-color .12s, color .12s;
}
.rdt-filter:hover { border-color:var(--rd-grey-light, #9AA29E); }
.rdt-filter .n { color:var(--rd-grey, #6E7671); }
/* The selected filter, exactly as the design draws it: an ink fill with the
   count reading through in white. One rule per family id, because the
   sibling combinator cannot be parameterised. */
#tlxf-all:checked ~ .rdt-tl-head [for="tlxf-all"],
#tlxf-fin:checked ~ .rdt-tl-head [for="tlxf-fin"],
#tlxf-act:checked ~ .rdt-tl-head [for="tlxf-act"],
#tlxf-filing:checked ~ .rdt-tl-head [for="tlxf-filing"],
#tlxf-kbo:checked ~ .rdt-tl-head [for="tlxf-kbo"],
#tlxf-signal:checked ~ .rdt-tl-head [for="tlxf-signal"] {
  border-color:var(--rd-ink, #101413);
  background:var(--rd-ink, #101413);
  color:#FFFFFF;
}
#tlxf-all:checked ~ .rdt-tl-head [for="tlxf-all"] .n,
#tlxf-fin:checked ~ .rdt-tl-head [for="tlxf-fin"] .n,
#tlxf-act:checked ~ .rdt-tl-head [for="tlxf-act"] .n,
#tlxf-filing:checked ~ .rdt-tl-head [for="tlxf-filing"] .n,
#tlxf-kbo:checked ~ .rdt-tl-head [for="tlxf-kbo"] .n,
#tlxf-signal:checked ~ .rdt-tl-head [for="tlxf-signal"] .n { color:#B6BEBA; }
/* KEYBOARD FOCUS. The radios are off-screen, so the ring has to be drawn on the
   label the focused radio belongs to, and the sibling combinator cannot be
   parameterised: one rule per family again. A single `.rdt-r:focus-visible +
   .rdt-tl-head` would have ringed EVERY label at once, and only when the last
   radio happened to be the focused one. */
#tlxf-all:focus-visible ~ .rdt-tl-head [for="tlxf-all"],
#tlxf-fin:focus-visible ~ .rdt-tl-head [for="tlxf-fin"],
#tlxf-act:focus-visible ~ .rdt-tl-head [for="tlxf-act"],
#tlxf-filing:focus-visible ~ .rdt-tl-head [for="tlxf-filing"],
#tlxf-kbo:focus-visible ~ .rdt-tl-head [for="tlxf-kbo"],
#tlxf-signal:focus-visible ~ .rdt-tl-head [for="tlxf-signal"] {
  outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px;
}

.rdt-next { font-size:13px; color:var(--rd-grey, #6E7671); }
.rdt-next-date {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}

/* One dot per event family. Content-box on purpose: a 9px core inside a 2px
   ring is the design's 13px mark, filled or hollow.
     financial milestone → green, filled
     Staatsblad act      → ink, filled
     NBB filing          → green-mid ring, hollow
     KBO administration  → grey ring, hollow
     court/register signal → red, filled  (not in the design's example
       company, which has none; red is the palette's only alarm colour and
       the legend names it) */
.rdt-dot {
  width:9px; height:9px; box-sizing:content-box; border-radius:50%;
  border:2px solid var(--rd-grey-light, #9AA29E);
  background:var(--rd-grey-light, #9AA29E);
  flex:none; display:inline-block;
}
.rdt-dot.fin    { border-color:var(--rd-green, #0C7A52);     background:var(--rd-green, #0C7A52); }
.rdt-dot.act    { border-color:var(--rd-ink, #101413);       background:var(--rd-ink, #101413); }
.rdt-dot.filing { border-color:var(--rd-green-mid, #9CCBB4); background:#FFFFFF; }
.rdt-dot.kbo    { border-color:var(--rd-grey-light, #9AA29E); background:#FFFFFF; }
.rdt-dot.signal { border-color:var(--rd-red, #B23A1F);       background:var(--rd-red, #B23A1F); }

.rdt-tl-body { margin-top:24px; }
.rdt-year { display:grid; grid-template-columns:62px 24px minmax(0, 1fr); gap:0 14px; scroll-margin-top:90px; }
.rdt-yr {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:20px; font-weight:700; letter-spacing:-0.02em;
  color:var(--rd-ink, #101413); padding-top:14px; text-align:right;
}
.rdt-spine { position:relative; display:flex; justify-content:center; }
.rdt-spine::before {
  content:""; position:absolute; top:0; bottom:0; width:1px;
  background:var(--rd-line, #E4E7E6);
}
.rdt-rows { min-width:0; }

.rdt-ev { display:block; }
.rdt-ev-sum {
  display:grid; grid-template-columns:52px minmax(0, 1fr); gap:14px;
  align-items:start; padding:13px 0;
  border-bottom:1px solid var(--rd-line-soft, #F0F2F1);
}
/* The rows that expand are <details>; strip the native marker and let the
   whole summary be the hit area. */
details.rdt-ev > .rdt-ev-sum { cursor:pointer; list-style:none; }
details.rdt-ev > .rdt-ev-sum::-webkit-details-marker { display:none; }
details.rdt-ev > .rdt-ev-sum:hover .rdt-ev-title { color:var(--rd-green-deep, #0A6444); }
details.rdt-ev > .rdt-ev-sum:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:-2px; }
.rdt-ev-when { display:flex; align-items:center; gap:8px; padding-top:2px; }
.rdt-ev-when .rdt-dot { margin-left:-33px; }
.rdt-ev-date {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:12px; color:var(--rd-grey, #6E7671); white-space:nowrap;
}
.rdt-ev-main { min-width:0; }
.rdt-ev-line { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.rdt-ev-kind {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:10px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--rd-grey-light, #9AA29E); white-space:nowrap;
}
.rdt-ev-title { font-weight:500; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
.rdt-ev-title.strong { font-weight:600; }
.rdt-chip {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-green-deep, #0A6444);
  background:var(--rd-green-soft, #F1F7F3); border-radius:3px; padding:2px 7px;
  white-space:nowrap;
}
.rdt-ev-detail {
  margin-top:3px; font-size:14px; line-height:1.45;
  color:var(--rd-grey, #6E7671); overflow-wrap:anywhere;
}
.rdt-ev-more {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-green-deep, #0A6444); white-space:nowrap;
  margin-left:6px;
}
details.rdt-ev[open] .rdt-ev-more { color:var(--rd-grey, #6E7671); }

/* An expanded act: its facts, and the truncation note when we read a prefix. */
.rdt-facts {
  list-style:none; margin:0 0 13px 66px; padding:0;
  display:flex; flex-direction:column; gap:5px;
  font-size:13px; line-height:1.5; color:var(--rd-text, #46504C);
}
.rdt-facts li { position:relative; padding-left:14px; overflow-wrap:anywhere; }
.rdt-facts li::before { content:"\2022"; position:absolute; left:0; top:0; color:var(--rd-grey-light, #9AA29E); }
.rdt-facts li.rdt-facts-more { color:var(--rd-grey, #6E7671); font-style:italic; }
.rdt-facts li.rdt-facts-more::before { content:""; }
.rdt-truncated {
  margin:0 0 13px 66px; font-size:12px; line-height:1.5;
  color:var(--rd-grey, #6E7671);
}
/* The way out of the caveat: green, because it is the one link on the row and
   it goes to the source we could not finish reading. */
.rdt-truncated-src {
  display:inline-block; margin-left:4px;
  color:var(--rd-green, #0C7A52); text-decoration:none;
  border-bottom:1px solid var(--rd-green-line, #CFE3D8);
}
.rdt-truncated-src:hover { border-bottom-color:var(--rd-green, #0C7A52); }

.rdt-legend {
  margin-top:18px; display:flex; gap:18px; flex-wrap:wrap;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-grey, #6E7671);
}
.rdt-legend-item { display:inline-flex; align-items:center; gap:7px; }
.rdt-legend-note { margin-left:auto; color:var(--rd-grey-light, #9AA29E); }
.rdt-cov {
  margin-top:10px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:11px; color:var(--rd-grey-light, #9AA29E);
}

/* The filter itself. A year group whose every row is filtered out hides with
   them, so the spine never runs beside an empty year. */
#tlxf-fin:checked    ~ .rdt-tl-body .rdt-ev:not(.fin),
#tlxf-act:checked    ~ .rdt-tl-body .rdt-ev:not(.act),
#tlxf-filing:checked ~ .rdt-tl-body .rdt-ev:not(.filing),
#tlxf-kbo:checked    ~ .rdt-tl-body .rdt-ev:not(.kbo),
#tlxf-signal:checked ~ .rdt-tl-body .rdt-ev:not(.signal) { display:none; }
#tlxf-fin:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.fin)),
#tlxf-act:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.act)),
#tlxf-filing:checked ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.filing)),
#tlxf-kbo:checked    ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.kbo)),
#tlxf-signal:checked ~ .rdt-tl-body .rdt-year:not(:has(.rdt-ev.signal)) { display:none; }

/* ── Bestuur · vestiging · vastgoed ───────────────────────────────────── */

.rdt-two { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:20px; align-items:start; }
.rdt-card-t { font-size:17px; font-weight:600; color:var(--rd-ink, #101413); }
.rdt-card-s { margin-top:2px; font-size:13px; color:var(--rd-grey, #6E7671); }

.rdt-person { margin-top:20px; display:flex; align-items:center; gap:14px; }
.rdt-person + .rdt-person { margin-top:14px; }
.rdt-avatar {
  width:44px; height:44px; border-radius:50%; flex:none;
  background:var(--rd-green-soft, #F1F7F3); color:var(--rd-green-deep, #0A6444);
  display:flex; align-items:center; justify-content:center;
  font-weight:600; font-size:15px; letter-spacing:.02em;
}
.rdt-person-b { min-width:0; }
.rdt-person-n { font-weight:600; font-size:16px; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
a.rdt-person-n:hover { color:var(--rd-green-deep, #0A6444); }
.rdt-person-r { font-size:13px; color:var(--rd-grey, #6E7671); overflow-wrap:anywhere; }
.rdt-pill-on {
  margin-left:auto; flex:none; padding:4px 10px; border-radius:999px;
  border:1px solid var(--rd-green, #0C7A52); color:var(--rd-green, #0C7A52);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  white-space:nowrap;
}
.rdt-pill-off {
  margin-left:auto; flex:none; padding:4px 10px; border-radius:999px;
  border:1px solid var(--rd-line, #E4E7E6); color:var(--rd-grey, #6E7671);
  font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em;
  white-space:nowrap;
}
.rdt-hist {
  margin-top:20px; padding-top:16px; border-top:1px solid var(--rd-line, #E4E7E6);
  display:grid; gap:8px; font-size:13px;
}
.rdt-hist-row { display:flex; gap:12px; }
.rdt-hist-row .d {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-grey, #6E7671); width:88px; flex:none;
}
.rdt-hist-row .e { min-width:0; color:var(--rd-ink, #101413); overflow-wrap:anywhere; }
.rdt-hist-row.past .e { color:var(--rd-grey, #6E7671); }

.rdt-map {
  margin-top:18px; border-radius:6px; overflow:hidden;
  border:1px solid var(--rd-line, #E4E7E6);
}
.rdt-map .seatmap { margin:0; }
.rdt-tiles {
  margin-top:16px; display:grid; grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
  gap:1px; background:var(--rd-line, #E4E7E6);
  border:1px solid var(--rd-line, #E4E7E6); border-radius:6px; overflow:hidden;
}
.rdt-tile { background:#FFFFFF; padding:12px 14px; min-width:0; }
.rdt-tile-k { font-size:12px; color:var(--rd-grey, #6E7671); }
.rdt-tile-v {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size:18px; font-weight:700; color:var(--rd-ink, #101413);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* The card's own footnote (the parcel, the region, the honesty contract) at
   12px, and a SENTENCE the card has to say about itself (a read that did not
   answer, an overflow it did not show) one step up, because a reader has to be
   able to read it rather than merely notice it. */
.rdt-foot { margin-top:14px; font-size:12px; line-height:1.5; color:var(--rd-grey-light, #9AA29E); }
.rdt-note { margin-top:14px; font-size:13px; line-height:1.55; color:var(--rd-grey, #6E7671); max-width:60ch; }

/* A disclosure that keeps a longer list (the establishment units, the parcel
   table) available without putting it in the reading path. */
.rdt-more { margin-top:14px; }
.rdt-more > summary {
  cursor:pointer; list-style:none; font-size:12px;
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-grey, #6E7671);
}
.rdt-more > summary::-webkit-details-marker { display:none; }
.rdt-more > summary::before { content:"+ "; }
.rdt-more[open] > summary::before { content:"\2212 "; }
.rdt-more > summary:hover { color:var(--rd-green-deep, #0A6444); }
.rdt-more > summary:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rdt-more-b { margin-top:12px; }

/* ── Vergelijkbare bedrijven ──────────────────────────────────────────── */

.rdt-peers { display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:12px; }
.rdt-peer {
  background:#FFFFFF; border:1px solid var(--rd-line, #E4E7E6); border-radius:8px;
  padding:18px 20px; color:var(--rd-ink, #101413); display:block; text-decoration:none;
  transition:border-color .12s;
}
.rdt-peer:hover { border-color:var(--rd-ink, #101413); text-decoration:none; }
.rdt-peer:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rdt-peer-n { font-weight:600; overflow-wrap:anywhere; }
.rdt-peer-v {
  margin-top:4px; font-size:12px; color:var(--rd-grey, #6E7671);
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
}
.rdt-peer-c { margin-top:10px; font-size:13px; color:var(--rd-grey, #6E7671); overflow-wrap:anywhere; }
.rdt-peer-c .v {
  font-family:var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rdt-peers-note { margin-top:12px; font-size:12px; line-height:1.5; color:var(--rd-grey-light, #9AA29E); }

/* ── Narrow ───────────────────────────────────────────────────────────────
   At 360 the year column shrinks, the row stacks (the date line above the
   title instead of beside it) and the two cards of the Bestuur section sit
   one under the other. Nothing may reach past the viewport: every column is
   minmax(0,1fr) and the long strings wrap on any character. */
@media (max-width: 900px) {
  .rdt-two { grid-template-columns:minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rdt-card { padding:18px 16px; }
  .rdt-year { grid-template-columns:38px 12px minmax(0, 1fr); gap:0 8px; }
  .rdt-yr { font-size:15px; padding-top:12px; }
  .rdt-ev-sum { grid-template-columns:minmax(0, 1fr); gap:4px; padding:11px 0; }
  .rdt-ev-when { padding-top:0; }
  .rdt-ev-when .rdt-dot { margin-left:-21px; }
  .rdt-ev-line { gap:8px; }
  .rdt-ev-detail { font-size:13px; }
  .rdt-facts, .rdt-truncated { margin-left:0; }
  .rdt-legend { gap:10px; }
  .rdt-legend-note { margin-left:0; }
  .rdt-hist-row .d { width:76px; }
  .rdt-peers { grid-template-columns:minmax(0, 1fr); }
}
/* ═══════════════════════════════════════════════════════════════════════════
   redesign S: the Checked score card and the Signalen list
   (owner's dossier redesign, 2026-09-04)

   Every colour is a var(--rd-*) with the design's own literal as the fallback,
   so this branch renders correctly on its own while lane V lands the token
   block. Layout is grid + flex only: no new JS, and every interactive state is
   a CSS one.

   RESPONSIVE. The score card is three columns at desktop, one at 360; a signal
   row is text + evidence side by side, stacked below 720 with the evidence
   under the text it stands beside. Nothing is positioned in a way that can
   leave its container: percentage marks live inside position:relative tracks
   whose parents never exceed 100% width.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── the score card shell ─────────────────────────────────────────────────── */

/* The score column is a fixed 220px track (a 76px figure needs no more and
   reads badly with more) and everything else is fluid. has-score says whether
   that first track belongs to the score at all: on a company with no filed
   accounts the card opens on the axes, and 220px is the wrong width for them. */
.rds-score-card {
  display:grid; gap:40px; align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}
.rds-score-card.has-score { grid-template-columns:220px minmax(0, 1fr) minmax(0, 1fr); }
.rds-score-card.is-cols-2 { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.rds-score-card.is-cols-2.has-score { grid-template-columns:220px minmax(0, 1fr); }
.rds-score-card.is-cols-1, .rds-score-card.is-cols-1.has-score { grid-template-columns:minmax(0, 1fr); }
.rds-col { min-width:0; }
.rds-col-pd, .rds-col-axes {
  border-left:1px solid var(--rd-line-soft, #F0F2F1); padding-left:34px;
}
.rds-score-card.is-cols-1 .rds-col-pd,
.rds-score-card.is-cols-1 .rds-col-axes { border-left:0; padding-left:0; }

/* .rd-card and .rd-eyebrow belong to the shared visual system. These are
   FALLBACKS so this branch renders a finished card on its own, and they are
   written inside :where(), which has zero specificity: the moment the real
   .rd-card / .rd-eyebrow rules exist, they win outright, whatever the source
   order. Values are the design's own, so the two agree either way. */
:where(.rds-score-card) {
  background:#FFFFFF; border:1px solid var(--rd-line, #E4E7E6);
  border-radius:8px; padding:28px 32px;
}
:where(.rds-score-card .rd-eyebrow) {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--rd-grey, #6E7671); margin-bottom:8px;
}

/* ── column 1: the score ──────────────────────────────────────────────────── */

.rds-score-figure { display:flex; align-items:flex-end; gap:8px; }
.rds-score-num {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:76px; font-weight:700; line-height:0.86; letter-spacing:-0.04em;
}
.rds-score-num.is-good { color:var(--rd-green, #0C7A52); }
.rds-score-num.is-fair { color:var(--rd-amber, #D6B54A); }
.rds-score-num.is-bad  { color:var(--rd-red, #B23A1F); }
.rds-score-den { color:var(--rd-grey-light, #9AA29E); font-size:15px; padding-bottom:9px; }

.rds-score-band { margin-top:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rds-score-chip {
  padding:4px 10px; border-radius:3px; font-size:12px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
}
.rds-score-chip.is-good {
  background:var(--rd-green-soft, #F1F7F3); color:var(--rd-green-deep, #0A6444);
  border:1px solid var(--rd-green-line, #CFE3D8);
}
.rds-score-chip.is-fair { background:#FBF6E6; color:#7A5F12; border:1px solid #EBDCA8; }
.rds-score-chip.is-bad  { background:#FBEDE9; color:var(--rd-red, #B23A1F); border:1px solid #EFCFC5; }

.rds-score-delta {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:12px; font-weight:700; white-space:nowrap;
}
.rds-score-delta.is-up   { color:var(--rd-green, #0C7A52); }
.rds-score-delta.is-down { color:var(--rd-red, #B23A1F); }
.rds-score-delta.is-flat { color:var(--rd-grey, #6E7671); }

.rds-score-note {
  margin-top:18px; font-size:13px; line-height:1.45; color:var(--rd-grey, #6E7671);
}
.rds-score-link { margin-top:14px; font-size:13px; }
.rds-score-link a { color:var(--rd-green, #0C7A52); text-decoration:none; }
.rds-score-link a:hover { color:var(--rd-ink, #101413); text-decoration:underline; }
.rds-score-link a:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }

/* ── column 2: the axes as bars ───────────────────────────────────────────── */

.rds-axes { display:grid; gap:14px; }
.rds-axis-head {
  display:flex; justify-content:space-between; gap:10px;
  font-size:13px; margin-bottom:6px; color:var(--rd-ink, #101413);
}
.rds-axis-val {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-grey, #6E7671); white-space:nowrap;
}
.rds-axis-val.is-unmeasured { color:var(--rd-grey-light, #9AA29E); }
.rds-axis-delta { margin-left:6px; }
.rds-axis-delta.is-up   { color:var(--rd-green, #0C7A52); }
.rds-axis-delta.is-down { color:var(--rd-red, #B23A1F); }
.rds-axis-delta.is-flat { color:var(--rd-grey-light, #9AA29E); }

.rds-axis-track {
  position:relative; height:6px; border-radius:3px;
  background:var(--rd-fill, #EDF0EE);
}
/* An unmeasured axis is a dashed empty track, never a zero-width fill with a 0
   beside it: absence rendered as the worst score is the error this product has
   been repaired for more than once. */
.rds-axis-track.is-unmeasured {
  background:transparent; border:1px dashed var(--rd-line, #E4E7E6);
}
.rds-axis-fill {
  position:absolute; inset:0 auto 0 0; height:6px; border-radius:3px;
  background:var(--rd-green, #0C7A52);
}
.rds-axis-tick {
  position:absolute; top:-3px; width:2px; height:12px;
  background:var(--rd-ink, #101413); opacity:0.4;
}

/* ── column 3: the probability ────────────────────────────────────────────── */

.rds-pd-head { display:flex; align-items:flex-end; gap:10px; flex-wrap:wrap; }
.rds-pd-num {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:40px; font-weight:700; line-height:1; letter-spacing:-0.02em;
  color:var(--rd-ink, #101413);
}
.rds-pd-band { padding-bottom:6px; font-weight:600; font-size:14px; }
.rds-pd-band.is-b1 { color:var(--rd-green, #0C7A52); }
.rds-pd-band.is-b2 { color:var(--rd-olive, #7FA36B); }
.rds-pd-band.is-b3 { color:#8A7420; }
.rds-pd-band.is-b4 { color:#A3661F; }
.rds-pd-band.is-b5 { color:var(--rd-red, #B23A1F); }
.rds-pd-band.is-neutral { color:var(--rd-grey, #6E7671); }

.rds-pd-scale { margin-top:22px; position:relative; }
.rds-pd-bands { display:flex; height:9px; border-radius:5px; overflow:hidden; }
.rds-pd-bands > span { flex:1; }
.rds-pd-bands > .is-b1 { background:var(--rd-green, #0C7A52); }
.rds-pd-bands > .is-b2 { background:var(--rd-olive, #7FA36B); }
.rds-pd-bands > .is-b3 { background:var(--rd-amber, #D6B54A); }
.rds-pd-bands > .is-b4 { background:var(--rd-orange, #D08A3E); }
.rds-pd-bands > .is-b5 { background:var(--rd-red, #B23A1F); }
.rds-pd-mark {
  position:absolute; top:-8px; width:2px; height:25px;
  background:var(--rd-ink, #101413); transform:translateX(-1px);
}
.rds-pd-ticks {
  display:flex; justify-content:space-between; margin-top:9px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── the credit verdict box ───────────────────────────────────────────────── */

.rds-verdict { margin-top:20px; padding:14px 16px; border-radius:4px; border-left:3px solid; }
.rds-verdict.is-green {
  background:var(--rd-green-soft, #F1F7F3); border-left-color:var(--rd-green, #0C7A52);
}
.rds-verdict.is-green .rds-verdict-head { color:var(--rd-green-deep, #0A6444); }
.rds-verdict.is-amber { background:#FBF6E6; border-left-color:var(--rd-orange, #D08A3E); }
.rds-verdict.is-amber .rds-verdict-head { color:#7A5F12; }
.rds-verdict.is-red { background:#FBEDE9; border-left-color:var(--rd-red, #B23A1F); }
.rds-verdict.is-red .rds-verdict-head { color:var(--rd-red, #B23A1F); }
.rds-verdict.is-neutral { background:var(--rd-line-soft, #F0F2F1); border-left-color:var(--rd-grey, #6E7671); }
.rds-verdict-head { font-weight:600; font-size:14px; }
.rds-verdict-why { margin-top:4px; font-size:13px; color:var(--rd-text, #46504C); line-height:1.45; }

/* ── the Signalen list ────────────────────────────────────────────────────── */

.rds-sig-head {
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap; margin-bottom:14px;
}
.rds-sig-caption { font-size:14px; color:var(--rd-grey, #6E7671); }
.rds-sig-legend {
  display:flex; gap:16px; flex-wrap:wrap;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace); font-size:11px;
}
.rds-sig-legend > span { white-space:nowrap; }
.rds-sig-key { margin-right:5px; font-weight:700; }
.rds-sig-stale { font-size:13px; color:var(--rd-grey, #6E7671); line-height:1.5; margin:0; }

.rds-sig-legend .is-lowers,  .rds-sig-sign.is-lowers  { color:var(--rd-green, #0C7A52); }
.rds-sig-legend .is-raises,  .rds-sig-sign.is-raises  { color:var(--rd-red, #B23A1F); }
.rds-sig-legend .is-neutral, .rds-sig-sign.is-neutral { color:var(--rd-grey, #6E7671); }

.rds-sig-list {
  border:1px solid var(--rd-line, #E4E7E6); border-radius:8px; overflow:hidden;
  display:grid; gap:1px; background:var(--rd-line, #E4E7E6);
}
.rds-sig-row {
  background:#FFFFFF; display:grid; gap:32px; padding:22px 26px; align-items:start;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1.2fr);
}
.rds-sig-row.is-bare { grid-template-columns:minmax(0, 1fr); }
.rds-sig-main { display:grid; grid-template-columns:26px minmax(0, 1fr); gap:12px; align-items:start; }
.rds-sig-sign {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:20px; font-weight:700; line-height:1.1;
}
.rds-sig-body { min-width:0; }
.rds-sig-title { font-size:16px; font-weight:600; color:var(--rd-ink, #101413); }
.rds-sig-detail { margin-top:5px; font-size:14px; line-height:1.5; color:var(--rd-grey, #6E7671); }
.rds-sig-source {
  margin-top:8px; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--rd-grey-light, #9AA29E); display:inline-block;
}
a.rds-sig-source.is-link { text-decoration:none; }
a.rds-sig-source.is-link:hover { color:var(--rd-ink, #101413); text-decoration:underline; }
a.rds-sig-source.is-link:focus-visible { outline:2px solid var(--rd-green, #0C7A52); outline-offset:2px; }
.rds-sig-side { border-left:1px solid var(--rd-line-soft, #F0F2F1); padding-left:32px; min-width:0; }

.rds-evidence-title {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--rd-grey, #6E7671);
}
.rds-evidence-body { margin-top:12px; }

/* ── evidence: the marker scale ───────────────────────────────────────────── */

.rds-scale { display:grid; gap:12px; }
.rds-scale-row {
  display:grid; grid-template-columns:104px minmax(0, 1fr) 64px;
  gap:10px; align-items:center; font-size:12px;
}
.rds-scale-label { color:var(--rd-grey, #6E7671); min-width:0; overflow-wrap:anywhere; }
.rds-scale-track { position:relative; height:14px; border-radius:3px; background:#F5F7F6; }
.rds-scale-band { position:absolute; top:0; bottom:0; border-radius:3px; background:#E3EEE8; }
.rds-scale-mark {
  position:absolute; top:-2px; width:10px; height:18px; border-radius:2px;
  background:var(--rd-ink, #101413);
}
.rds-scale-mark.is-lowers  { background:var(--rd-green, #0C7A52); }
.rds-scale-mark.is-raises  { background:var(--rd-red, #B23A1F); }
.rds-scale-mark.is-muted   { background:var(--rd-grey-light, #9AA29E); }
.rds-scale-mark.is-neutral { background:var(--rd-ink, #101413); }
.rds-scale-value {
  text-align:right; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rds-scale-ticks, .rds-filing-ticks {
  margin-top:10px; display:flex; justify-content:space-between; gap:10px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── evidence: the age axis ───────────────────────────────────────────────── */

.rds-age { width:100%; max-width:320px; height:auto; display:block; overflow:visible; }
.rds-age-zone { fill:#F6E3DC; }
.rds-age-track { fill:var(--rd-line, #E4E7E6); }
.rds-age-zone-label {
  fill:var(--rd-red, #B23A1F); font-size:9px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-age-mark { fill:var(--rd-ink, #101413); }
.rds-age-mark.is-raises { fill:var(--rd-red, #B23A1F); }
.rds-age-value {
  fill:var(--rd-ink, #101413); font-size:11px; font-weight:700;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-age-tick {
  fill:var(--rd-grey-light, #9AA29E); font-size:10px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* ── evidence: the filing deviations ──────────────────────────────────────── */

.rds-filing { display:grid; gap:7px; }
.rds-filing-row {
  display:grid; grid-template-columns:42px minmax(0, 1fr) 92px;
  gap:10px; align-items:center; font-size:12px;
}
.rds-filing-year {
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  color:var(--rd-ink, #101413);
}
.rds-filing-track { position:relative; height:14px; border-radius:3px; background:#F5F7F6; }
.rds-filing-zero { position:absolute; top:0; bottom:0; left:50%; width:1px; background:#C6CDC9; }
.rds-filing-bar { position:absolute; top:2px; height:10px; border-radius:2px; }
.rds-filing-bar.is-early, .rds-filing-bar.is-ontime { background:var(--rd-green, #0C7A52); }
.rds-filing-bar.is-late { background:var(--rd-red, #B23A1F); }
.rds-filing-label {
  text-align:right; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
}
.rds-filing-label.is-early { color:var(--rd-green, #0C7A52); }
.rds-filing-label.is-late { color:var(--rd-red, #B23A1F); }
.rds-filing-label.is-muted { color:var(--rd-grey-light, #9AA29E); }

/* ── evidence: our coverage per year ──────────────────────────────────────── */

.rds-cov { display:flex; gap:3px; }
.rds-cov-col { flex:1; text-align:center; min-width:0; }
.rds-cov-bar { display:block; height:26px; border-radius:2px; }
.rds-cov-bar.is-full { background:var(--rd-green, #0C7A52); }
.rds-cov-bar.is-partial {
  background:repeating-linear-gradient(135deg,
    var(--rd-green, #0C7A52) 0 4px, var(--rd-green-line, #CFE3D8) 4px 8px);
}
.rds-cov-bar.is-none { background:#EFF1F0; }
.rds-cov-year {
  display:block; margin-top:5px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}
.rds-cov-legend {
  margin-top:10px; display:flex; gap:14px; flex-wrap:wrap;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey, #6E7671);
}
.rds-cov-legend > span { display:inline-flex; align-items:center; gap:5px; }
.rds-cov-key { width:9px; height:9px; border-radius:2px; display:inline-block; flex:none; }
.rds-cov-key.is-full { background:var(--rd-green, #0C7A52); }
.rds-cov-key.is-partial {
  background:repeating-linear-gradient(135deg,
    var(--rd-green, #0C7A52) 0 3px, var(--rd-green-line, #CFE3D8) 3px 6px);
}
.rds-cov-key.is-none { background:#EFF1F0; border:1px solid var(--rd-line, #E4E7E6); }

/* ── evidence: the filing window ──────────────────────────────────────────── */

.rds-deadline { position:relative; height:16px; border-radius:3px; background:#F5F7F6; }
.rds-deadline-fill {
  position:absolute; top:0; bottom:0; left:0;
  background:var(--rd-green-line, #CFE3D8); border-radius:3px 0 0 3px;
}
.rds-deadline-over { position:absolute; top:0; bottom:0; background:#F0CFC5; }
.rds-deadline-tick { position:absolute; top:0; bottom:0; width:1px; background:#C6CDC9; }
.rds-deadline-now {
  position:absolute; top:-4px; width:2px; height:24px;
  background:var(--rd-ink, #101413); transform:translateX(-1px);
}
.rds-deadline-now.is-late { background:var(--rd-red, #B23A1F); }
.rds-deadline-labels {
  margin-top:8px; display:flex; justify-content:space-between; gap:8px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey, #6E7671);
}
.rds-deadline-labels .is-now { color:var(--rd-ink, #101413); }

/* ── evidence: one figure per year ────────────────────────────────────────── */

.rds-cols { min-width:0; }
/* Plot and year strip share one grid template (set inline, from the number of
   years), so a column and the year under it line up to the pixel. The bar is
   absolute inside its own CELL, never against the plot: against the plot it
   would have to reproduce the gaps in its own left/width. */
.rds-cols-plot { position:relative; height:64px; display:grid; gap:3px; }
.rds-cols-cell { position:relative; min-width:0; }
.rds-cols-bar { position:absolute; left:0; right:0; border-radius:1px; }
.rds-cols-bar.is-latest   { background:var(--rd-green, #0C7A52); }
.rds-cols-bar.is-past     { background:#C9D4CE; }
.rds-cols-bar.is-negative { background:var(--rd-red, #B23A1F); }
.rds-cols-zero { position:absolute; left:0; right:0; height:1px; background:#C6CDC9; z-index:1; }
.rds-cols-ref {
  position:absolute; left:0; right:0; height:0;
  border-top:1px dashed var(--rd-ink, #101413); opacity:0.45; z-index:1;
}
.rds-cols-years {
  display:grid; gap:3px; margin-top:5px;
  font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}
.rds-cols-years > span { text-align:center; min-width:0; }
.rds-cols-foot {
  margin-top:8px; font-family:var(--rd-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size:10px; color:var(--rd-grey-light, #9AA29E);
}

/* ── responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  .rds-score-card, .rds-score-card.has-score,
  .rds-score-card.is-cols-2, .rds-score-card.is-cols-2.has-score {
    grid-template-columns:minmax(0, 1fr); gap:28px;
  }
  .rds-col-pd, .rds-col-axes {
    border-left:0; border-top:1px solid var(--rd-line-soft, #F0F2F1);
    padding-left:0; padding-top:24px;
  }
}

@media (max-width: 720px) {
  .rds-sig-row, .rds-sig-row.is-bare { grid-template-columns:minmax(0, 1fr); gap:16px; padding:18px 16px; }
  .rds-sig-side { border-left:0; padding-left:38px; }
  .rds-scale-row { grid-template-columns:88px minmax(0, 1fr) 58px; }
  .rds-filing-row { grid-template-columns:36px minmax(0, 1fr) 80px; }
}

@media (max-width: 400px) {
  .rds-score-num { font-size:60px; }
  .rds-pd-num { font-size:34px; }
  .rds-sig-side { padding-left:0; }
  .rds-sig-main { grid-template-columns:20px minmax(0, 1fr); gap:10px; }
  .rds-sig-title { font-size:15px; }
  /* The three-column scale rows fold: the reading's name over its track, the
     value beside the name, so nothing is squeezed to an ellipsis at 360. */
  .rds-scale-row {
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"label value" "track track";
    gap:4px 10px;
  }
  .rds-scale-label { grid-area:label; }
  .rds-scale-value { grid-area:value; }
  .rds-scale-track { grid-area:track; }
  .rds-pd-ticks { font-size:9px; }
}

/* ───── redesign home ──────────────────────────────────────────────────────
   2026-09-04. The banner above is in the LANE form on purpose: the guard in
   TimelineAxisSharesTheChipColoursTests slices app.css from one lane banner
   to the next so each lane is judged on its own rules, and without this line
   lane T's slice would run to the end of the file and judge these. Tokens
   here are bare, like the .rd-page frame block this one extends, not
   fallback-doubled the way lane T writes its own.

   The home page (HomeConcepts/AnswerHome) and the /live index in the owner's
   Claude Design language, the one the dossier has spoken since r254. Neither
   page changed: same headline, same search box, same weekly facts under the
   same window rule, same ticker, same three columns, same ten family cards.
   What changed is the clothes.

   Both pages now sit in the dossier's frame: .page.rd-page, one column of
   1180 with 32px sides, Archivo for text and JetBrains Mono for every number,
   date and eyebrow, white cards on 1px #E4E7E6 hairlines at radius 8. The
   tokens are the --rd-* set in Tokens.css.

   Two families of names live below.
     .hc2-*   the home's own hooks, and a CONTRACT: home-live.js binds to them
              by name and HomeWeeklyFactsTests pins the chip markup character
              for character. Restyled here, never renamed.
     .rdh-*   what this pass adds (the /live masthead and grid).
   The /live card keeps .live-index-card / -headline / -foot, which
   EveryFactOnceTests reads; its accent travels as --rdh-accent so one inline
   custom property colours the rule, the bars and the hover.

   These rules were the AnswerHome component's own <style> block until this
   pass. They moved here so both pages are styled in one place, cached with
   the rest of the sheet, and so the @media queries stop needing Razor's @@.
   ─────────────────────────────────────────────────────────────────────── */

/* ── The home stage: the hero over the ambient field, then the columns ───── */
.hc2-stage { position: relative; }

/* The living network field, full-bleed behind hero and columns. Retinted with
   the canvas itself (js/ambient-network.js) to the redesign inks and green;
   the veil is the page ground, so the headline keeps its contrast. */
.hc2-ambient { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; z-index: 0; pointer-events: none; overflow: hidden; }
.hc2-ambient canvas { display: block; width: 100%; height: 100%; }

/* The hero is LEFT-aligned now, like every other line in this language: one
   column, the headline at the top of it, the search box under it. Above the
   columns so the suggest panel overlays them. */
.hc2-hero { position: relative; z-index: 3; display: block; text-align: left; padding: 72px 0 0; }
.hc2-hero::before {
  content: "";
  position: absolute;
  inset: -6% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 72% at 34% 42%, rgba(253, 253, 252, .72) 0%, rgba(253, 253, 252, .46) 52%, transparent 82%);
}

/* The headline in the artboard's own display setting: Archivo 600, -0.02em,
   ink. It was Fraunces at 44px, the last serif on the page. */
.hc2-title {
  margin: 0 0 30px;
  /* Two lines in all three languages at 1180, and balanced so the second is
     not one orphan word. */
  max-width: 22ch;
  text-wrap: balance;
  font-family: var(--rd-sans);
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
}

/* ── The search box: a field, not a pill. One hairline, radius 8, no lift ── */
.hc2-searchwrap { position: relative; width: min(720px, 100%); }
.hc2-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid var(--rd-line-strong);
  border-radius: 8px;
  padding: 0 18px;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
/* The field is the focus indicator (the inner input carries no outline of its
   own, app.css above): the hairline goes green and a soft ring appears, the
   same shape as before the redesign, in the redesign's colour. */
.hc2-search:focus-within { border-color: var(--rd-green); box-shadow: 0 0 0 3px rgba(12, 122, 82, .12); }
.hc2-search-ico { flex: 0 0 auto; color: var(--rd-grey-light); }
.hc2-search-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 17px 0;
  font-family: var(--rd-sans);
  font-size: 17px;
  color: var(--rd-ink);
}
.hc2-search-input::placeholder { color: var(--rd-grey-light); }

/* The suggest panel hangs off the field in the same clothes. It floats over
   copy, so it carries the one soft shadow on either page: without a lift the
   rows read as part of the column underneath. */
.hc2-live {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px -22px rgba(16, 20, 19, .34);
  text-align: left;
}
.hc2-live-caps {
  padding: 12px 16px 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-grey-light);
}
.hc2-live-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; text-decoration: none; cursor: pointer; }
.rd-page .hc2-live-row { color: var(--rd-ink); }
.hc2-live-row.is-active { background: var(--rd-green-soft); }
.hc2-live-ico { display: inline-flex; flex: 0 0 auto; color: var(--rd-grey-light); }
.hc2-live-main { flex: 1; min-width: 0; }
.hc2-live-name {
  display: block;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc2-live-name b { font-weight: 700; color: var(--rd-green-deep); }
.hc2-live-sub {
  display: block;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hc2-live-empty { padding: 14px 16px; font-family: var(--rd-sans); font-size: 13px; color: var(--rd-grey); }
.hc2-live-all {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--rd-line-soft);
  font-family: var(--rd-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.rd-page .hc2-live-all { color: var(--rd-green); }
.hc2-live-all.is-active, .hc2-live-all:hover { background: var(--rd-green-soft); }

/* ── The weekly fact strip: a mono number, a lowercase noun, one caption ──
   The owner's two facts and the four the pulse can vouch for, in the shape a
   number takes everywhere else in this language: mono 700 in ink, its word in
   grey beside it. No pill, no border; the numbers carry the line. */
.hc2-chips { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 20px; margin-top: 26px; }
.hc2-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  font-family: var(--rd-sans);
  font-size: 14px;
  text-decoration: none;
}
.rd-page .hc2-chip { color: var(--rd-grey); }
.rd-page .hc2-chip:hover { color: var(--rd-ink); text-decoration: none; }
.hc2-chip:hover .hc2-chip-n { color: var(--rd-green); }
.hc2-chip-n {
  font-family: var(--rd-mono);
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  transition: color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
/* The window, said once, in the eyebrow's own setting. */
.hc2-chips-cap {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-grey-light);
}

/* ── The one line of life ────────────────────────────────────────────────── */
.hc2-ticker { display: flex; align-items: baseline; gap: 14px; margin-top: 34px; max-width: min(860px, 100%); min-height: 22px; }
.hc2-ticker-caps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rd-grey);
  white-space: nowrap;
}
.hc2-ticker-pulse { width: 7px; height: 7px; border-radius: 99px; background: var(--rd-green); animation: hc2pulse 2.4s ease-out infinite; }
@keyframes hc2pulse {
  0%   { box-shadow: 0 0 0 0 rgba(12, 122, 82, .34); }
  70%  { box-shadow: 0 0 0 6px rgba(12, 122, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 122, 82, 0); }
}
.hc2-ticker-list { position: relative; flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0; text-align: left; }
.hc2-ticker-item {
  display: none;
  align-items: baseline;
  gap: 9px;
  font-family: var(--rd-sans);
  font-size: 14px;
  color: var(--rd-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity .35s;
}
.hc2-ticker-item.is-on { display: flex; }
.hc2-ticker-item.is-fading { opacity: 0; }
.hc2-ticker-sev { flex: 0 0 auto; align-self: center; width: 6px; height: 6px; border-radius: 99px; }
.hc2-ticker-text { overflow: hidden; text-overflow: ellipsis; }
.hc2-ticker-name { font-weight: 600; color: var(--rd-ink); text-decoration: none; white-space: nowrap; }
a.hc2-ticker-name { color: var(--rd-green); }
a.hc2-ticker-name:hover { color: var(--rd-ink); text-decoration: underline; }

/* ── The three columns, as three cards ───────────────────────────────────── */
.hc2-cols {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 60px 0 0;
}
.hc2-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  padding: 24px 28px;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.hc2-col:hover { border-color: var(--rd-line-strong); }
.hc2-col:hover .hc2-col-caps { color: var(--rd-green); }
/* The card title of the language: Archivo 17px 600, sentence case. It was a
   small uppercase label, which in this system is what an eyebrow looks like,
   and these are titles. */
.hc2-col-caps {
  margin: 0 0 10px;
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  line-height: 1.3;
  text-transform: none;
  color: var(--rd-ink);
  transition: color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.hc2-col-body { margin: 0 0 16px; font-family: var(--rd-sans); font-size: 14px; line-height: 1.6; color: var(--rd-text); }
.hc2-col-link { margin-top: auto; font-family: var(--rd-sans); font-size: 14px; font-weight: 500; text-decoration: none; }
.rd-page .hc2-col-link { color: var(--rd-green); }
.rd-page .hc2-col-link:hover { color: var(--rd-ink); text-decoration: underline; }

@media (max-width: 900px) {
  .hc2-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 768px) {
  .hc2-hero { padding-top: 48px; }
  .hc2-title { margin-bottom: 24px; }
  .hc2-ticker { flex-direction: column; align-items: flex-start; gap: 8px; }
  .hc2-ticker-item { white-space: normal; }
}
/* On a phone the caption takes its own line, or it is stranded mid-row
   between two chips and stops reading as the window over the four that
   follow. Same rule as before the redesign, same width. */
@media (max-width: 640px) {
  .hc2-chips-cap { flex-basis: 100%; margin-top: 4px; }
}
@media (max-width: 480px) {
  .hc2-col { padding: 18px; }
  .hc2-search { padding: 0 14px; }
  .hc2-search-input { font-size: 16px; padding: 15px 0; }
  .hc2-chips { gap: 4px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .hc2-ticker-pulse { animation: none; }
  .hc2-chip-n, .hc2-col, .hc2-col-caps, .hc2-search { transition: none; }
}

/* ── /live: the masthead ─────────────────────────────────────────────────
   The dossier's own header shape, with the source line where the breadcrumb
   sits: an eyebrow row, a 2px ink rule, then the title. */
.rdh-crumbs { padding: 20px 0; }
.rdh-masthead { border-top: 2px solid var(--rd-ink); padding-top: 26px; }
.rdh-title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: clamp(34px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
}
.rdh-lead { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }

/* ── /live: one card per family ──────────────────────────────────────────
   The three shapes are unchanged (a busy week leads with seven days, a quiet
   week with thirty, a quiet month says only when the source last published).
   The card is the language's: white, one hairline, radius 8, the count in
   mono, the date in mono. The family's colour stays a 3px left rule and
   travels as --rdh-accent so the bars pick it up without a second attribute. */
.rdh-live-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  grid-auto-rows: 1fr;
  gap: 16px;
  margin-top: 44px;
}
.live-index-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-left: 3px solid var(--rdh-accent, var(--rd-green));
  border-radius: 8px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.rd-page .live-index-card { color: var(--rd-ink); }
.rd-page .live-index-card:hover { text-decoration: none; }
.live-index-card:hover { border-top-color: var(--rd-line-strong); border-right-color: var(--rd-line-strong); border-bottom-color: var(--rd-line-strong); }
.live-index-card:hover .rdh-live-name { color: var(--rd-green); }
.live-index-card:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }
.rdh-live-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rdh-live-name {
  margin: 0;
  min-width: 0;
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rd-ink);
  transition: color var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.rdh-live-date { flex: 0 0 auto; font-family: var(--rd-mono); font-size: 11px; color: var(--rd-grey-light); white-space: nowrap; }
.rdh-live-count { display: flex; align-items: baseline; gap: 9px; }
.live-index-headline {
  font-family: var(--rd-mono);
  font-size: 30px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--rd-ink);
}
.rdh-live-unit { font-family: var(--rd-sans); font-size: 12px; color: var(--rd-grey); }
.rdh-live-bars { display: block; width: 100%; height: auto; max-width: 140px; }
.live-index-foot { margin-top: auto; font-family: var(--rd-sans); font-size: 12px; color: var(--rd-grey); }
.rdh-live-foot-n { font-family: var(--rd-mono); color: var(--rd-ink); }
@media (max-width: 480px) {
  .rdh-live-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .live-index-card { padding: 16px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .live-index-card, .rdh-live-name { transition: none; }
}

/* ───── redesign listings ────────────────────────────────────────────────
   (2026-09-04)

   The owner drew the company dossier himself in Claude Design and, asked what
   to do with the rest of the site, chose to carry that language across. This
   block dresses the ten event listings (Shared/Live/LiveListing.razor:
   /faillissementen ... /jaarrekeningen) and the two sector pages in it.

   THE BANNER ABOVE IS LOAD-BEARING: TimelineAxisSharesTheChipColoursTests
   reads lane T's slice of this file as "its banner to the NEXT lane's", so
   this block's own banner is what ends lane T. Lane T and lane S write every
   token with the design's literal behind it because they were built in
   parallel with the token layer, before Tokens.css had shipped it; the
   --rd-* tokens are on main now, so this block reads them plainly, the way
   the base /* redesign 2026-09-04 */ block does.

   NOTHING HERE CHANGES WHAT THOSE PAGES DO. Every filter is the same GET
   control it was, every URL still means what it meant, the copy is untouched.
   Only the clothes are new.

   SCOPE. Every rule sits under .rdl-page, a marker those pages carry BESIDE
   .rd-page. The dossier is .rd-page too and is another lane's surface, so
   scoping this way means a harmonisation written here for a shared --ds-*
   component (.ds-more, .ds-kpirail, .ds-table) can never reach it.

   The vocabulary is the dossier's, not a second one: .rd-card, .rd-btn,
   .rd-pill, .rd-eyebrow, .rd-h2 and the --rd-* tokens do the work wherever
   they fit. The listing row below is the dossier timeline's row (.rdt-ev-sum)
   with a listing's fields in it: a mono date on a hairline spine, a small
   uppercase mono kind, the title, a grey detail line.

   ANCHORS. .rd-page paints text links green at (0,1,1); every rule here that
   dresses an anchor therefore leads with .rdl-page so it wins on specificity
   rather than on luck.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The frame: the eyebrow, the 2px ink rule, the name, the lead ────────── */
.rdl-page .rdl-kicker {
  padding: 20px 0 14px;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}
.rdl-page .rdl-head {
  border-top: 2px solid var(--rd-ink);
  padding-top: 26px;
  margin-bottom: 30px;
}
.rdl-page .rdl-title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 46px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
}
.rdl-page .rdl-lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rd-ink-soft);
}
@media (max-width: 768px) {
  .rdl-page .rdl-title { font-size: 34px; }
  .rdl-page .rdl-lead { font-size: 16px; }
}
@media (max-width: 480px) {
  .rdl-page .rdl-title { font-size: 28px; }
  .rdl-page .rdl-head { padding-top: 20px; margin-bottom: 24px; }
}

/* ── The count line: the figure is mono, everything around it is grey ────── */
.rdl-page .rdl-count {
  margin: 0 0 12px;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--rd-grey);
}
.rdl-page .rdl-count-n {
  font-family: var(--rd-mono);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rd-ink);
  margin-right: 4px;
}
.rdl-page .rdl-sep { color: var(--rd-grey-light); }
@media (max-width: 480px) { .rdl-page .rdl-count-n { font-size: 26px; } }

/* ── The window bars. Ink, because every bar counts a published act: the
      dossier timeline draws a Staatsblad act as an ink mark and an empty
      stretch as the grey track. ───────────────────────────────────────────── */
/* The figure is as wide as its chart, never as wide as the column. */
.rdl-page .rdl-bars { margin: 0 0 26px; width: fit-content; max-width: 760px; }
/* The svg carries its own pixel width so the bars keep their shape; a long
   window that outgrows the column scales down uniformly rather than stretching
   (the 87px-slab bug, 2026-09-04). */
.rdl-page .rdl-bars svg { display: block; max-width: 100%; height: auto; }

/* ── Period presets. The dossier's timeline filter, exactly: mono 12, radius
      4, outlined, and the chosen one an ink fill. ───────────────────────── */
.rdl-page .rdl-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 22px;
}
.rdl-page .rdl-period {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-mono);
  font-size: 12px;
  line-height: 1.2;
  color: var(--rd-ink);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--ds-dur-1, .12s) var(--ds-ease-out, ease),
              background var(--ds-dur-1, .12s) var(--ds-ease-out, ease);
}
.rdl-page a.rdl-period:hover { border-color: var(--rd-grey-light); color: var(--rd-ink); text-decoration: none; }
.rdl-page a.rdl-period:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }
.rdl-page .rdl-period-on {
  border-color: var(--rd-ink);
  background: var(--rd-ink);
  color: #FFFFFF;
}
.rdl-page a.rdl-period-on:hover { border-color: var(--rd-ink); color: #FFFFFF; }

/* ── The filter form: one white card, mono eyebrows over native controls ─── */
.rdl-page .rdl-filters {
  margin: 0 0 26px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  padding: 18px 20px;
}
.rdl-page .rdl-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}
.rdl-page .rdl-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1 1 170px;
  min-width: 0;
}
.rdl-page .rdl-input {
  padding: 8px 10px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  line-height: 1.3;
  color: var(--rd-ink);
  max-width: 100%;
  min-width: 0;
}
.rdl-page .rdl-input:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 1px; }
.rdl-page .rdl-dates { flex: 1 1 100%; order: 10; min-width: 0; }
.rdl-page .rdl-dates > summary {
  cursor: pointer;
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-grey);
  list-style: none;
}
.rdl-page .rdl-dates > summary::-webkit-details-marker { display: none; }
.rdl-page .rdl-dates > summary:hover { color: var(--rd-ink); }
.rdl-page .rdl-dates-body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
  margin-top: 10px;
}
/* The two form controls: the ink fill submits, the outline clears. Both are
   the dossier's .rd-btn; only the height is matched to the selects. */
.rdl-page .rdl-filters .rd-btn { padding: 9px 16px; }
@media (max-width: 480px) { .rdl-page .rdl-filters { padding: 14px; } }

/* ── The stall notice: a white card with the design's 3px accent rule, in
      the ramp's orange because it is a warning about us, not about a firm. ── */
.rdl-page .rdl-stall {
  margin: 0 0 22px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-left: 3px solid var(--rd-orange);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--rd-text);
}
.rdl-page .rdl-stall strong { color: var(--rd-ink); font-weight: 600; }

/* ── The rows: the dossier timeline's row, with a listing's fields ───────── */
.rdl-page .rdl-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 26px;
  border-left: 1px solid var(--rd-line);
  position: relative;
}
.rdl-page .rdl-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--rd-line-soft);
}
.rdl-page .rdl-row:last-child { border-bottom: 0; }
.rdl-page .rdl-when { display: flex; align-items: center; gap: 8px; padding-top: 2px; }
/* 9px core inside a 2px ring is the design's 13px mark; the negative margin
   hangs it on the spine (26px of list padding plus half the mark). */
.rdl-page .rdl-dot {
  width: 9px;
  height: 9px;
  box-sizing: content-box;
  border-radius: 50%;
  border: 2px solid var(--rd-ink);
  background: var(--rd-ink);
  flex: none;
  margin-left: -33px;
}
.rdl-page .rdl-dot-warn { border-color: var(--rd-orange); background: var(--rd-orange); }
.rdl-page .rdl-dot-bad { border-color: var(--rd-red); background: var(--rd-red); }
.rdl-page .rdl-dot-filing { border-color: var(--rd-green-mid); background: #FFFFFF; }
.rdl-page .rdl-date {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-grey);
  white-space: nowrap;
}
.rdl-page .rdl-main { min-width: 0; }
.rdl-page .rdl-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; }
.rdl-page .rdl-kind {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey-light);
  white-space: nowrap;
}
.rdl-page .rdl-kind .rdl-kind-d { color: var(--rd-grey); }
.rdl-page .rdl-title-row {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
}
.rdl-page .rdl-sub {
  margin-top: 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--rd-grey);
}
/* A company name is ink and goes green on hover, the way the dossier's
   bestuurder names do; it is never one more green link in a grey line. */
.rdl-page a.rdl-name {
  font-weight: 600;
  color: var(--rd-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.rdl-page a.rdl-name:hover { color: var(--rd-green-deep); text-decoration: underline; }
.rdl-page .rdl-name-plain { font-weight: 600; color: var(--rd-ink); overflow-wrap: anywhere; }
.rdl-page .rdl-kbo { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-grey-light); white-space: nowrap; }
.rdl-page .rdl-detail {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--rd-grey);
  overflow-wrap: anywhere;
}
/* The band chip: the dossier's outline pill, one step smaller so it sits on
   the meta line instead of dominating it. */
.rdl-page .rdl-pill-sm {
  padding: 3px 9px;
  font-size: 11px;
  letter-spacing: 0.03em;
}
/* The whole row is a click target when scripting is on (row-link.js). The
   feedback is the one the dossier's timeline rows give: the title turns
   green, nothing moves and no band is painted behind a row whose dot hangs
   outside it. */
.rdl-page .live-row-link { cursor: pointer; }
.rdl-page .live-row-link:hover a.rdl-name { color: var(--rd-green-deep); text-decoration: underline; }
@media (max-width: 560px) {
  .rdl-page .rdl-list { padding-left: 22px; }
  .rdl-page .rdl-row { grid-template-columns: minmax(0, 1fr); gap: 5px 0; }
  .rdl-page .rdl-dot { margin-left: -29px; }
  .rdl-page .rdl-title-row { font-size: 15px; }
}

/* ── Pagination and the two quiet states ─────────────────────────────────── */
.rdl-page .rdl-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 26px 0 0;
}
.rdl-page .rdl-pager-n {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-grey);
  font-variant-numeric: tabular-nums;
}
.rdl-page .rdl-empty {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--rd-grey);
}

/* ── Disclosures ("Filters", "Over deze lijst"): the design has no pill
      buttons, so the summary becomes the mono control the rest of the page
      speaks in. Scoped to .rdl-page: the dossier keeps its own. ─────────── */
.rdl-page .ds-more > summary {
  padding: 8px 14px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rdl-page .ds-more > summary:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.rdl-page .ds-more[open] > summary { color: var(--rd-grey); }
.rdl-page .ds-more-body {
  font-family: var(--rd-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--rd-grey);
  max-width: 72ch;
}
.rdl-page .ds-more-body p { margin: 0 0 10px; }
.rdl-page .ds-more-body p:last-child { margin-bottom: 0; }
.rdl-page .rdl-about { margin-top: 34px; }

/* ═══ The sector pages ═══════════════════════════════════════════════════════
   /sectors and /sectors/{nace} keep their panels (DossierPanel) and their
   table (DataTable); the .rd-page harmonisation above already gives those the
   flat white card and the 17px title. What is left is the page's own frame,
   the KPI rail and the table's type. ─────────────────────────────────────── */

/* The rail becomes the design's row of KPI cards: no outer box, each tile a
   card of its own. The 860px rule in Tokens.css re-draws the tile borders for
   its two-column layout, so it is answered here at the same width. */
.rdl-page .ds-kpirail {
  border: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  gap: 16px;
}
.rdl-page .ds-kpirail-tile {
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  background: #FFFFFF;
  padding: 20px 22px;
  gap: 8px;
}
.rdl-page .ds-kpirail-tile:has(a):hover,
.rdl-page .ds-kpirail-tile:has(a:focus-visible) { background: var(--rd-green-soft); }
.rdl-page .ds-kpirail-label {
  font-family: var(--rd-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--rd-grey);
}
.rdl-page .ds-kpirail-value {
  font-family: var(--rd-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
}
@media (max-width: 860px) {
  .rdl-page .ds-kpirail-tile,
  .rdl-page .ds-kpirail-tile:nth-child(odd) { border: 1px solid var(--rd-line); }
}

/* The table: a mono uppercase header over a 1px ink rule, hairline rows. */
.rdl-page .ds-table { font-family: var(--rd-sans); font-size: 14px; color: var(--rd-ink); }
.rdl-page .ds-table thead th {
  background: #FFFFFF;
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-grey);
  border-bottom: 1px solid var(--rd-ink);
  padding: 10px 14px;
}
.rdl-page .ds-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rd-line-soft);
  color: var(--rd-text);
}
.rdl-page .ds-table tbody tr:hover td { background: var(--rd-green-soft); }
.rdl-page .rdl-code {
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-grey);
  white-space: nowrap;
}
.rdl-page a.rdl-link-ink { color: var(--rd-ink); font-weight: 600; text-decoration: none; }
.rdl-page a.rdl-link-ink:hover { color: var(--rd-green-deep); text-decoration: underline; }
.rdl-page .rdl-hint { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--rd-grey); }

/* The sector table sits in a bordered, scrollable frame of its own: a wide
   table scrolls inside it, the page never does. */
.rdl-page .rdl-tablecard {
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  overflow-x: auto;
}

/* The two small sector forms (group filter, code jump) on one row. */
.rdl-page .rdl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 26px;
}
.rdl-page .rdl-toolbar form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rdl-page .rdl-input-mono { font-family: var(--rd-mono); font-size: 13px; }

/* The division index under the table: mono code, ink label. */
.rdl-page .rdl-divisions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 24px;
}
.rdl-page .rdl-divisions li { font-size: 14px; line-height: 1.45; display: flex; gap: 8px; min-width: 0; }
.rdl-page .rdl-divisions a { color: var(--rd-ink); text-decoration: none; overflow-wrap: anywhere; }
.rdl-page .rdl-divisions a:hover { color: var(--rd-green-deep); text-decoration: underline; }

/* The regional split bars: the design's one data colour on its empty track. */
.rdl-page .bar-track { background: var(--rd-fill); }
.rdl-page .bar-track .fill { background: var(--rd-green); }
.rdl-page .rdl-barrow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; margin-bottom: 6px; }
.rdl-page .rdl-barrow-v { font-family: var(--rd-mono); font-size: 13px; color: var(--rd-grey); white-space: nowrap; }

/* Sector tiles (the NACE-division medians) in the design's card form: the
   artboard's ratio tile is a 12px grey label over a 19px mono figure, not a
   mono eyebrow. */
.rdl-page .rdl-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.rdl-page .rdl-tile { border: 1px solid var(--rd-line); border-radius: 8px; padding: 14px 16px; min-width: 0; }
.rdl-page .rdl-tile-l { font-size: 12px; line-height: 1.4; color: var(--rd-grey); }
.rdl-page .rdl-tile-v {
  margin-top: 6px;
  font-family: var(--rd-mono);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}

/* The two empty states the sector page can land on. */
.rdl-page .empty-state {
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
}
.rdl-page .empty-title { font-family: var(--rd-sans); font-size: 17px; font-weight: 600; color: var(--rd-ink); }
.rdl-page .empty-sub { font-family: var(--rd-sans); font-size: 14px; line-height: 1.55; color: var(--rd-grey); }

/* The sector pages' own pieces: a NACE label is a 130-character description,
   not a company name, so the title takes one step down the scale; the code
   sits under it in mono the way the dossier's KBO number does. */
.rdl-page .rdl-title-sm { font-size: 34px; line-height: 1.1; }
.rdl-page .rdl-idline { margin-top: 12px; font-size: 14px; color: var(--rd-grey); }
.rdl-page .rdl-idline .rd-mono { color: var(--rd-ink); }
@media (max-width: 768px) { .rdl-page .rdl-title-sm { font-size: 28px; } }
@media (max-width: 480px) { .rdl-page .rdl-title-sm { font-size: 24px; } }

/* The breadcrumb line carries a link (← Alle sectoren): grey, ink on hover,
   never one more green link above the rule. */
.rdl-page .rdl-kicker a { color: var(--rd-grey); text-decoration: none; }
.rdl-page .rdl-kicker a:hover { color: var(--rd-ink); text-decoration: underline; }

/* A group heading inside the sector table, and the row's own View control. */
.rdl-page .rdl-group { padding-top: 18px; padding-bottom: 6px; border-bottom: 0; }
.rdl-page .rdl-btn-sm { padding: 5px 12px; font-size: 13px; }
.rdl-page .rdl-divisions-section { margin-top: 44px; }

/* .ds-more brings its own top margin; inside a .rd-stack the gap already
   spaces it. */
.rdl-page .rd-stack > details.ds-more { margin-top: 0; }

/* ───── redesign people ────────────────────────────────────────────────
   The people, search and standing pages of 2026-09-04

   The owner drew the COMPANY dossier in Claude Design
   (docs/design/dossier-redesign-2026-09-04/report.dc.html) and chose to carry
   that language across the rest of the site. This block dresses the pages that
   are about PEOPLE, about SEARCHING and the standing prose pages in the same
   clothes: the person dossier (/bestuurder, /p), /bestuurders, the search
   results and /companies, and methodology / pricing / help / about / tools.

   It is a RESTYLE, not a redesign: every page keeps its structure and its
   copy. What changes is the type, the colour, the shape of a card and the
   shape of a heading.

   Rooted at .rd-page like the dossier, so nothing here can leak into a page
   that has not switched. The --rd-* tokens live in Tokens.css and the shared
   primitives (.rd-h2, .rd-card, .rd-eyebrow, .rd-pill, .rd-btn, .rd-note,
   .rd-grid-2) live in the "redesign 2026-09-04" block above: this block adds
   only what those do not already give, under the .rdp- prefix.

   NO JAVASCRIPT is introduced anywhere below.  */

/* ── The head of a page that is not a dossier ─────────────────────────────
   The dossier's frame is: breadcrumb row, a 2px ink rule, then the name. A
   standing page has no breadcrumb, so the eyebrow takes that row and the rule
   under it is the same rule. The title is 38px rather than the dossier's 54px:
   54 is the size of a subject's NAME, and "Prijzen" is not one. */
.rdp-kicker {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 20px 0;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rdp-head { border-top: 2px solid var(--rd-ink); padding-top: 26px; }
.rdp-title {
  margin: 0;
  font-family: var(--rd-sans);
  font-size: 38px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  overflow-wrap: anywhere;
}
.rdp-lead {
  margin: 16px 0 0;
  max-width: 62ch;
  font-size: 17px;
  line-height: 1.55;
  color: var(--rd-ink-soft);
}
.rdp-head-foot { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rdp-sections { display: flex; flex-direction: column; gap: 60px; margin-top: 44px; }
@media (max-width: 768px) { .rdp-title { font-size: 30px; } .rdp-sections { gap: 44px; } }
@media (max-width: 480px) { .rdp-title { font-size: 26px; } }

/* ── Tiles: the artboard's vestiging grid, hairlines instead of gaps ──────
   One border around the set and a 1px background showing through as the rule
   between them, so four facts read as one instrument rather than four boxes.
   auto-fit means the same markup is a single column at 360 with no query. */
.rdp-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 1px;
  background: var(--rd-line);
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  overflow: hidden;
}
.rdp-tile { min-width: 0; background: #FFFFFF; padding: 16px 20px; }
.rdp-tile-label {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
  overflow-wrap: anywhere;
}
.rdp-tile-value {
  margin-top: 6px;
  font-family: var(--rd-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--rd-ink);
}
.rdp-tile-value-sm { font-size: 20px; }
.rdp-tile-note { margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--rd-grey); }
.rdp-tile-r .rdp-tile-value { color: var(--rd-red); }
.rdp-tile-g .rdp-tile-value { color: var(--rd-green); }

/* ── A list of rows in one bordered container ─────────────────────────────
   The Signalen shape: one border, rows divided by a hairline, no shadow. Used
   for the co-directors, the insolvency findings and the browse streams. */
.rdp-rows { background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: 8px; overflow: hidden; }
.rdp-row {
  display: flex;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 20px;
  border-top: 1px solid var(--rd-line-soft);
  color: var(--rd-ink);
  text-decoration: none;
}
.rdp-row:first-child { border-top: 0; }
.rd-page a.rdp-row { color: var(--rd-ink); }
.rd-page a.rdp-row:hover { background: var(--rd-green-soft); color: var(--rd-ink); text-decoration: none; }
.rdp-row-main { min-width: 0; flex: 1 1 auto; }
.rdp-row-name { display: block; font-size: 15px; font-weight: 600; color: var(--rd-ink); overflow-wrap: anywhere; }
.rd-page a .rdp-row-name { color: var(--rd-ink); }
.rdp-row-sub { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--rd-grey); overflow-wrap: anywhere; }
.rdp-row-aside {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rd-mono);
  font-size: 12px;
  color: var(--rd-grey);
  white-space: nowrap;
}
.rdp-row-arrow { color: var(--rd-grey-light); }
@media (max-width: 480px) {
  .rdp-row { flex-wrap: wrap; padding: 14px 16px; }
  .rdp-row-aside { white-space: normal; }
}

/* ── A table in the dossier's hand ────────────────────────────────────────
   Header row in mono caps over a 1px INK rule (the artboard's Meerjaren and
   Neergelegde jaarrekening tables), body rows divided by the soft hairline. */
.rdp-table { width: 100%; border-collapse: collapse; font-family: var(--rd-sans); font-size: 14px; }
.rdp-table th {
  padding: 0 0 10px;
  text-align: left;
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
  border-bottom: 1px solid var(--rd-ink);
  white-space: nowrap;
}
.rdp-table td { padding: 14px 0; vertical-align: top; border-bottom: 1px solid var(--rd-line-soft); color: var(--rd-text); }
.rdp-table tr:last-child td { border-bottom: 0; }
.rdp-table th + th, .rdp-table td + td { padding-left: 20px; }
.rdp-table td:last-child, .rdp-table th:last-child { text-align: right; }
.rdp-cell-name { font-size: 15px; font-weight: 600; color: var(--rd-ink); text-decoration: none; overflow-wrap: anywhere; }
.rd-page a.rdp-cell-name { color: var(--rd-ink); }
.rd-page a.rdp-cell-name:hover { color: var(--rd-green); text-decoration: underline; }
.rdp-cell-sub { margin-top: 3px; font-family: var(--rd-mono); font-size: 12px; color: var(--rd-grey); }
.rdp-cell-mono { font-family: var(--rd-mono); font-size: 13px; color: var(--rd-grey); white-space: nowrap; }
/* A flagged row: the insolvency mark under a company name in the mandate list. */
.rdp-cell-flag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-red);
}
.rdp-cell-flag-dot { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ── A bordered note with a coloured left rule ────────────────────────────
   The artboard's credit box (soft green, 3px green left border). Red is the
   same instrument for a finding that counts against the subject. */
.rdp-flag {
  border: 1px solid var(--rd-line);
  border-left: 3px solid var(--rd-grey);
  border-radius: 6px;
  padding: 16px 20px;
  background: #FFFFFF;
}
.rdp-flag-r { border-color: var(--rd-red-soft); border-left-color: var(--rd-red); background: #FFFFFF; }
.rdp-flag-g { border-color: var(--rd-green-line); border-left-color: var(--rd-green); background: var(--rd-green-soft); }
.rdp-flag-title { font-size: 15px; font-weight: 600; color: var(--rd-ink); }
.rdp-flag-r .rdp-flag-title { color: var(--rd-red); }
.rdp-flag-body { margin: 6px 0 0; font-size: 14px; line-height: 1.55; color: var(--rd-text); }
.rdp-flag-list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--rd-text); }
.rdp-flag-list .rd-mono { color: var(--rd-grey); }

/* ── A 44px initials avatar, as the artboard draws a director ─────────── */
.rdp-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--rd-green-soft);
  color: var(--rd-green-deep);
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── A dated history line: the mono date in an 88px column, then the event ─ */
.rdp-hist { display: grid; gap: 8px; font-size: 13px; }
.rdp-hist-row { display: flex; gap: 12px; }
.rdp-hist-date { flex: 0 0 88px; font-family: var(--rd-mono); color: var(--rd-grey); }
.rdp-hist-what { min-width: 0; color: var(--rd-ink); overflow-wrap: anywhere; }
.rdp-hist-row-past .rdp-hist-what { color: var(--rd-grey); }
@media (max-width: 480px) { .rdp-hist-row { flex-wrap: wrap; gap: 2px 12px; } }

/* ── The "over deze gegevens" disclosure ──────────────────────────────────
   Not a pill button any more: a mono caps line with a hairline over it, the
   same voice the section eyebrows use, so it reads as a footnote and not as
   an action. */
.rd-page .rdp-more { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rd-line); }
.rd-page .rdp-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-grey);
  cursor: pointer;
  list-style: none;
}
.rd-page .rdp-more > summary::-webkit-details-marker { display: none; }
.rd-page .rdp-more > summary::after { content: "+"; color: var(--rd-grey-light); }
.rd-page .rdp-more[open] > summary::after { content: "\2212"; }
.rd-page .rdp-more > summary:hover { color: var(--rd-ink); border-color: transparent; }
.rd-page .rdp-more[open] > summary { margin-bottom: 12px; color: var(--rd-grey); }
.rdp-more-body { max-width: 70ch; font-size: 13px; line-height: 1.6; color: var(--rd-text); }
.rdp-more-body p { margin: 0 0 8px; }
.rdp-more-body p:last-child { margin-bottom: 0; }

/* ── The person dossier ───────────────────────────────────────────────────
   The header is DossierHero's redesign mode (Redesign="true"), so the name,
   the pill and the identity line need nothing here. What is left is the lead
   sentence in the identity slot and the spacing of the stack under it. */
.rdp-person-summary { color: var(--rd-ink-soft); }
.rdp-stack { display: flex; flex-direction: column; gap: 20px; }
/* The mandate table has percentage columns: inside ds-table-scroll it squeezed
   to the viewport at 360 and wrapped every role word by word (r238). A width
   floor makes the wrapper scroll instead, which is the rule the page already
   lived by before the restyle. */
.rdp-mandates .rdp-table { min-width: 620px; }
.rdp-mandates .rdp-period { white-space: nowrap; }
/* ds-table-scroll gives the sideways scroll; inside a redesign card it must not
   add a second border on top of the card's own. */
.rdp-page .rd-card > .ds-table-scroll { border: 0; border-radius: 0; background: transparent; }

/* ── Section rhythm on a people page ──────────────────────────────────────
   60px between sections, the eyebrow over its hairline, and the count that
   used to be a panel subtitle sitting at the end of that same rule (the
   artboard's Signalen heading row). The card under such a heading carries no
   title of its own. */
.rdp-section { margin-top: 60px; }
.rdp-ribbon { margin-top: 44px; }
.rdp-secthead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rd-line);
}
.rdp-secthead > .rd-h2 { margin: 0; padding: 0; border: 0; }
@media (max-width: 768px) { .rdp-section { margin-top: 44px; } .rdp-ribbon { margin-top: 32px; } }

/* A page that is prose rather than a dossier reads at a narrower measure. */
.page.rd-page.rdp-narrow { max-width: 900px; }

/* The hero's lead slot is a render fragment, so a page with nothing to say in
   it still emits the box. An empty one takes no room. */
.rd-hero-lead:empty, .rd-hero-foot:empty { display: none; }

/* A row whose content is a name over a sentence, not a name beside a value. */
.rdp-row-stack { display: block; }
.rdp-row-body { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--rd-text); }
.rdp-row-sub-clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rdp-sep { margin: 0 4px; color: var(--rd-grey-light); }
.rdp-after-table { margin-top: 14px; }
/* The avatar's colour is the person's state: soft green when they sit on a
   board today, grey when they do not. That is the fact the coloured dot in
   front of the name used to carry. */
.rdp-avatar-past { background: var(--rd-fill); color: var(--rd-grey); }

/* Column widths for the mandate table, off the markup and into the sheet. */
.rdp-col-role { width: 24%; }
.rdp-col-period { width: 20%; }
.rdp-col-status { width: 12%; }

/* ── The shared Pill, in the redesign's hand ──────────────────────────────
   Same primitive (Pill.razor renders .ds-pill), same states; only the type
   and the palette change, so a status inside a redesigned page cannot look
   like a visitor from the July system. */
.rdp-page .ds-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--rd-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.2;
  background: #FFFFFF;
  border-color: var(--rd-line-strong);
  color: var(--rd-grey);
  white-space: nowrap;
}
.rdp-page .ds-pill-g { color: var(--rd-green); border-color: var(--rd-green); }
.rdp-page .ds-pill-a { color: var(--rd-orange); border-color: var(--rd-orange); }
.rdp-page .ds-pill-r { color: var(--rd-red); border-color: var(--rd-red); }

/* ── /p/{slug}: the insolvency-professional dossier ───────────────────────
   Same instruments as /bestuurder. Only the career chart and the case table
   are its own. */
.rdp-tile-a .rdp-tile-value { color: var(--rd-orange); }
.rdp-col-date { width: 110px; }
.rdp-col-kind { width: 160px; }
.rdp-empty { margin: 0; padding: 8px 0; font-size: 14px; color: var(--rd-grey); }
.pp-legend { margin-top: 10px; text-align: center; }
/* The career swimlane is drawn at 1200 wide and scaled; three columns plus a
   name do not fit 360, so the table around it scrolls rather than clipping. */
.pp-cases { min-width: 520px; }

/* ── The director track record (DirectorTrackRecordCard) ──────────────────
   Two numbers, the homonym caveat, the mandate table and the consecutive
   incorporation observations. The numbers are the artboard's KPI pair: the
   value in mono over its mono caps label. */
.dtr-stats { display: flex; flex-wrap: wrap; gap: 32px; margin-bottom: 18px; }
.dtr-stat { min-width: 0; }
.dtr-stat .rdp-tile-value { margin-top: 0; }
.dtr-stat .rdp-tile-label { margin-top: 4px; }
.dtr-stat-r .rdp-tile-value { color: var(--rd-red); }
.dtr-caveat { margin: 0 0 18px; font-size: 12px; line-height: 1.55; color: var(--rd-text); }
.dtr-ban { margin: 18px 0 4px; }
.dtr-table { margin-top: 18px; }
.dtr-col-mandate { width: 120px; }
.dtr-col-outcome { width: 150px; }
.dtr-inc { margin-left: 8px; }
.dtr-role { margin-top: 3px; }
.dtr-sub-sans { font-family: var(--rd-sans); }
.dtr-seq { margin-top: 20px; }
.dtr-seq-head { margin-bottom: 10px; }
.dtr-seq-row { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; font-size: 13px; line-height: 1.55; color: var(--rd-text); }
.dtr-seq-mark { flex: 0 0 auto; color: var(--rd-grey-light); }
.dtr-seq-note { margin: 10px 0 0; }
.dtr-foot { margin-top: 16px; }
/* The amber caveat rule: the artboard's left-rule note in the warning colour. */
.rdp-flag-a { border-color: var(--rd-line); border-left-color: var(--rd-orange); }

/* ── The July eyebrow, in the redesign's voice ────────────────────────────
   .ds-caps is the site's small uppercase label; inside a page that carries
   .rdp-page it is the artboard's mono eyebrow instead, so a component reused
   from the July system does not arrive in Inter next to JetBrains Mono. Scoped
   to .rdp-page, never .rd-page: the company dossier is another lane's surface
   and its eyebrows are its own to decide. */
.rdp-page .ds-caps {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--rd-grey);
}

/* ═══ /bestuurders ═══════════════════════════════════════════════════════
   These rules used to be a <style> island in DirectorsIndex.razor. They moved
   here with the restyle: one stylesheet, and the day's changes list (a shared
   component) is styled in the same place as the page that hosts it. */
.dx-head { margin-bottom: 8px; }
.dx-lead { margin-bottom: 0; }

/* The search field. The home hero's pill had a 38px shadow and a 99px radius;
   the design has neither, so this is a squared field with a hairline and a
   green focus ring, the same shape every other control in the system has. */
.dx-search { margin-top: 26px; }
.dx-search .hc2-searchwrap { position: relative; width: min(720px, 100%); }
.dx-search .hc2-search {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 18px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line-strong);
  border-radius: 6px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.dx-search .hc2-search:focus-within { border-color: var(--rd-green); box-shadow: 0 0 0 3px var(--rd-green-soft); }
.dx-search .hc2-search-ico { flex: 0 0 auto; color: var(--rd-grey-light); }
.dx-search .hc2-search-input {
  flex: 1;
  min-width: 0;
  padding: 4px 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--rd-sans);
  font-size: 17px;
  color: var(--rd-ink);
}
.dx-search .hc2-search-input::placeholder { color: var(--rd-grey-light); }
/* The suggest panel: a white card on a hairline, rows divided by nothing (the
   hover band does the work), the group labels in mono. */
.dx-search .hc2-live {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  overflow: hidden;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  box-shadow: 0 18px 40px -22px rgba(16, 20, 19, .30);
}
.dx-search .hc2-live-caps {
  padding: 12px 16px 6px;
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.dx-search .hc2-live-row { display: flex; align-items: center; gap: 11px; padding: 9px 16px; text-decoration: none; cursor: pointer; }
.dx-search .hc2-live-row.is-active { background: var(--rd-green-soft); }
.dx-search .hc2-live-ico { display: inline-flex; flex: 0 0 auto; color: var(--rd-grey-light); }
.dx-search .hc2-live-main { flex: 1; min-width: 0; }
.dx-search .hc2-live-name {
  display: block;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-search .hc2-live-name b { font-weight: 700; color: var(--rd-green-deep); }
.dx-search .hc2-live-sub {
  display: block;
  font-family: var(--rd-mono);
  font-size: 11px;
  color: var(--rd-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dx-search .hc2-live-empty { padding: 13px 16px; font-family: var(--rd-sans); font-size: 13px; color: var(--rd-grey); }
.dx-search .hc2-live-all {
  display: block;
  padding: 11px 16px;
  border-top: 1px solid var(--rd-line);
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-green-deep);
  text-decoration: none;
}
.dx-search .hc2-live-all.is-active, .dx-search .hc2-live-all:hover { background: var(--rd-green-soft); }

/* The day's director changes: a mono caption with the edition date, the rows
   under a hairline, one link to the whole register. At 360 the company name
   wraps under the sentence. */
.dx-changes { margin-top: 60px; max-width: 760px; }
.dx-changes-cap { margin-bottom: 10px; }
.dx-changes-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rd-ink); }
.dx-change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rd-line-soft);
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.4;
}
.dx-change-date { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-grey); white-space: nowrap; }
.dx-change-what { flex: 1 1 280px; min-width: 0; font-weight: 600; color: var(--rd-ink); text-decoration: none; }
.rd-page a.dx-change-what { color: var(--rd-ink); }
.rd-page a.dx-change-what:hover { color: var(--rd-green); text-decoration: underline; text-underline-offset: 2px; }
.dx-change-co { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--rd-grey); text-decoration: none; }
.rd-page a.dx-change-co { color: var(--rd-grey); }
.rd-page a.dx-change-co:hover { color: var(--rd-ink); text-decoration: underline; text-underline-offset: 2px; }
.dx-changes-all {
  display: inline-flex;
  align-items: center;
  margin-top: 14px;
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-green-deep);
  text-decoration: none;
}
.rd-page a.dx-changes-all { color: var(--rd-green-deep); }
.rd-page a.dx-changes-all:hover { color: var(--rd-ink); text-decoration: underline; text-underline-offset: 2px; }

/* The two person registers, as links. Outline buttons in the design's hand. */
.dx-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 60px; }
.dx-related a {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--rd-ink);
  text-decoration: none;
}
.rd-page .dx-related a { color: var(--rd-ink); }
.rd-page .dx-related a:hover { border-color: var(--rd-ink); color: var(--rd-ink); text-decoration: none; }
@media (max-width: 768px) {
  .dx-changes, .dx-related { margin-top: 44px; }
  .dx-search { margin-top: 22px; }
}

/* ═══ /companies and the search results ══════════════════════════════════
   Overrides, scoped to .rdp-page, of the July .cs- and .cb- rules above. The
   markup keeps its class names (the row-link script, the live suggest and the
   render tests all bind to them); only the look moves. */

/* The hero was a centred card with a radial tint and two shadows. The design
   is one left-aligned column with no shadows, so the card becomes the page
   head every other restyled page wears. */
.rdp-page .cs-hero {
  position: static;
  margin: 0;
  padding: 26px 0 0;
  border: 0;
  border-top: 2px solid var(--rd-ink);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  text-align: left;
  overflow: visible;
}
.rdp-page .cs-hero-title { margin: 0; }
.rdp-page .cs-hero-sub {
  margin: 14px 0 0;
  max-width: 62ch;
  font-family: var(--rd-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--rd-ink-soft);
}

/* The search field: a squared field with a hairline and a green focus ring,
   the ink-filled button beside it. No pill, no shadow. */
.rdp-page .cs-search {
  gap: 12px;
  max-width: 640px;
  margin: 26px 0 0;
  padding: 6px 6px 6px 18px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line-strong);
  border-radius: 6px;
  box-shadow: none;
}
.rdp-page .cs-search:focus-within { border-color: var(--rd-green); box-shadow: 0 0 0 3px var(--rd-green-soft); }
.rdp-page .cs-search-ico { color: var(--rd-grey-light); }
.rdp-page .cs-search input { padding: 12px 4px; font-family: var(--rd-sans); font-size: 17px; color: var(--rd-ink); }
.rdp-page .cs-search input::placeholder { color: var(--rd-grey-light); }
.rdp-page .cs-search-btn {
  padding: 11px 20px;
  border-radius: 4px;
  background: var(--rd-ink);
  color: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
}
.rdp-page .cs-search-btn:hover { background: var(--rd-green); }
.rdp-page .cs-search-btn:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }

/* Quick-starts: outline chips on the left, not centred pills. */
.rdp-page .cs-quick { justify-content: flex-start; margin: 20px 0 0; max-width: none; gap: 8px; }
.rdp-page .cs-quick-label {
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rdp-page .cs-quick-chip {
  padding: 6px 13px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--rd-ink);
}
.rdp-page .cs-quick-chip:hover { border-color: var(--rd-ink); color: var(--rd-ink); }
.rdp-page .cs-quick-chip:focus-visible { outline: 2px solid var(--rd-green); outline-offset: 2px; }

/* The results head and its refine controls. */
.rdp-page .cs-resulthead { margin: 0 0 32px; }
.rdp-page .cs-result-form { gap: 14px; margin-top: 22px; }
.rdp-page .cs-result-form .cs-search { margin: 0; max-width: 560px; }
.rdp-page .cs-filters { gap: 8px; }
.rdp-page .cs-filter {
  padding: 8px 12px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 13px;
  color: var(--rd-ink);
}
.rdp-page .cs-filter-check { font-family: var(--rd-sans); font-size: 13px; color: var(--rd-text); }
.rdp-page .cs-filter-check input { accent-color: var(--rd-green); }
.rdp-page .cs-result-query { font-family: var(--rd-sans); font-size: 13px; color: var(--rd-grey); }
.rdp-page .cs-result-query .q { font-family: var(--rd-mono); color: var(--rd-ink); }
.rdp-working { font-size: 14px; color: var(--rd-grey); }

/* The results table: the card holds the border, the scroller holds the sideways
   scroll, and the table itself is the artboard's. */
.srt-card { padding: 20px 24px; }
.srt-col-name { width: 36%; }
.srt-col-sector { width: 30%; }
.srt-col-city { width: 18%; }
.srt-col-kbo { width: 14%; }
.srt-col-open { width: 32px; }
.srt-table { min-width: 640px; }
.srt-sector { font-size: 14px; color: var(--rd-text); }
.srt-city { color: var(--rd-text); }
.srt-open { color: var(--rd-grey-light); }
.rdp-page tr[data-row-href]:hover { background: var(--rd-green-soft); }
@media (max-width: 480px) { .srt-card { padding: 14px 16px; } }

/* The two empty states. Both are cards; only the one that means "we could not
   ask" carries the amber left rule, because only that one is a fault. */
.ses-box { padding: 28px 32px; }
.ses-title { font-size: 17px; font-weight: 600; color: var(--rd-ink); }
.ses-body { margin: 8px 0 0; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--rd-text); }
.ses-body strong { color: var(--rd-ink); }
.ses-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .ses-box { padding: 18px; } }

/* ── The discovery band under the search hero ─────────────────────────────
   Two streams, each a white card on a hairline, under one section eyebrow
   with its rule. The tinted head strips and the count pills go; the eyebrow,
   the title and the count read as the artboard's card head. */
.rdp-page .cb-band { margin: 60px 0 0; }
.rdp-page .cb-band-head { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--rd-line); }
.rdp-page .cb-band-head .ds-caps { font-size: 12px; letter-spacing: 0.14em; }
.rdp-page .cb-streams { gap: 20px; }
.rdp-page .cb-panel {
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  box-shadow: none;
  overflow: hidden;
}
.rdp-page .cb-panel-head { padding: 22px 24px 14px; border-bottom: 0; background: transparent; }
.rdp-page .cb-panel-eyebrow {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rdp-page .cb-panel-eyebrow-dot { width: 7px; height: 7px; }
.rdp-page .cb-panel-title {
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--rd-ink);
}
.rdp-page .cb-panel-count {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--rd-grey);
}
.rdp-page .cb-row { padding: 12px 24px; border-top: 1px solid var(--rd-line-soft); }
.rdp-page .cb-row:hover { background: var(--rd-green-soft); }
.rdp-page .cb-row:focus-visible { outline: 2px solid var(--rd-green); outline-offset: -2px; }
.rdp-page .cb-row-name { font-family: var(--rd-sans); font-size: 15px; font-weight: 600; color: var(--rd-ink); }
.rdp-page .cb-row-meta { font-family: var(--rd-mono); font-size: 11px; color: var(--rd-grey); }
.rdp-page .cb-row-meta .cb-dot { color: var(--rd-grey-light); }
.rdp-page .cb-tag {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--rd-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rd-grey);
}
.rdp-page .cb-tag-dot { width: 7px; height: 7px; background: var(--rd-grey-light); }
.rdp-page .cb-tag-dot.high { background: var(--rd-red); }
.rdp-page .cb-tag-dot.med { background: var(--rd-orange); }
.rdp-page .cb-row-datelabel {
  font-family: var(--rd-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-grey-light);
}
.rdp-page .cb-row-date { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-grey); }
.rdp-page .cb-panel-foot { padding: 14px 24px; border-top: 1px solid var(--rd-line-soft); background: transparent; }
.rdp-page .cb-panel-more {
  font-family: var(--rd-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-green-deep);
}
.rdp-page .cb-panel-more:hover { color: var(--rd-ink); }
@media (max-width: 768px) { .rdp-page .cb-band { margin-top: 44px; } }

/* ═══ The standing prose pages ═══════════════════════════════════════════
   Methodology, the bankruptcy-probability page, About, Help, Tools, Pricing.
   Their markup carries almost no classes now: .rdp-prose types the bare
   elements, which is what a prose page wants and what keeps the copy legible
   in the source. The measure is 70ch, not the column, because a 1180px line
   of body text is unreadable whatever the design says about the frame. */
.rdp-prose { max-width: 100%; }
.rdp-prose p {
  margin: 0 0 16px;
  max-width: 70ch;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.75;
  color: var(--rd-text);
}
.rdp-prose p:last-child { margin-bottom: 0; }
.rdp-prose .rdp-lead { margin: 16px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rdp-prose strong { font-weight: 600; color: var(--rd-ink); }
.rdp-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: 70ch;
  font-family: var(--rd-sans);
  font-size: 15px;
  line-height: 1.65;
  color: var(--rd-text);
}
.rdp-list:last-child { margin-bottom: 0; }
/* The scoring tally: a mono list on the design's soft ground, inside the card
   the artboard gives a block of figures. */
.rdp-list-points {
  padding: 16px 20px;
  gap: 8px;
  background: var(--rd-track);
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  font-family: var(--rd-mono);
  font-size: 13px;
  line-height: 1.5;
}
.rdp-card-body { margin: 8px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.7; color: var(--rd-text); }
.rdp-table-num td, .rdp-table-num th { text-align: right; }
.rdp-table-num td:first-child, .rdp-table-num th:first-child { text-align: left; }
.rdp-table-num td { font-family: var(--rd-mono); font-variant-numeric: tabular-nums; padding: 8px 0; }
/* A row whose content sits at the top (an icon beside a title and a sentence). */
.rdp-row-top { align-items: flex-start; }
.rdp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--rd-line);
  border-radius: 6px;
  color: var(--rd-grey);
}

/* ── /help: the FAQ disclosures ───────────────────────────────────────────
   The rules were a <style> island in the page. They live here now, in the
   artboard's hand: the set on a 1px ink rule, one question per row on the soft
   hairline, the answer at 14px when it opens. */
.rdp-faq { border-top: 1px solid var(--rd-ink); }
.rdp-faq details { padding: 16px 0; border-bottom: 1px solid var(--rd-line-soft); }
.rdp-faq summary {
  position: relative;
  padding-right: 28px;
  cursor: pointer;
  list-style: none;
  font-family: var(--rd-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--rd-ink);
}
.rdp-faq summary::-webkit-details-marker { display: none; }
.rdp-faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: -2px;
  font-family: var(--rd-mono);
  font-size: 18px;
  font-weight: 400;
  color: var(--rd-grey-light);
}
.rdp-faq details[open] summary::after { content: "\2212"; }
.rdp-faq details p { margin: 12px 0 0; max-width: 70ch; font-size: 14px; line-height: 1.7; color: var(--rd-text); }
.rdp-faq details p + p { margin-top: 8px; }

/* ── /tools ───────────────────────────────────────────────────────────── */
.tool-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.rdp-page .tool-card {
  gap: 20px;
  padding: 22px 26px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
}
.rdp-page .tool-card:hover { border-color: var(--rd-ink); }
.rdp-page .tool-card-title {
  font-family: var(--rd-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: normal;
  color: var(--rd-ink);
}
/* The question was italic; the design italicises nothing, so it is the
   ink-soft colour that marks it as the customer's own words. */
.rdp-page .tool-card-q { margin-top: 6px; font-size: 14px; font-style: normal; color: var(--rd-ink-soft); }
.rdp-page .tool-card-body { margin-top: 8px; max-width: 62ch; font-size: 14px; line-height: 1.55; color: var(--rd-grey); }
.rdp-page .tool-card-arrow { font-size: 18px; color: var(--rd-grey-light); }

/* ── /pricing ─────────────────────────────────────────────────────────────
   Same plans, same order, same numbers. The free band stops being a tinted
   full-bleed wedge and becomes a card on a hairline; the plan cards drop their
   shadows; every amount is in JetBrains Mono, which is what the design does
   with a number. */
.rdp-page .pr-head { margin: 0; }
.rdp-page .pr-head-title { font-family: var(--rd-sans); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; color: var(--rd-ink); }
.rdp-page .pr-head-sub { max-width: 62ch; font-family: var(--rd-sans); font-size: 17px; line-height: 1.55; color: var(--rd-ink-soft); }
.rdp-page .pr-free {
  /* The July band bled to the viewport: width 100vw with a negative left and
     right margin. The design has no full-bleed anything, and leaving the width
     while resetting the margins would have pushed 100vw of band out of a
     1180px column and given the whole page a horizontal scrollbar. Width and
     margins are reset together, or not at all. */
  width: auto;
  margin: 60px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
}
.rdp-page .pr-free-inner {
  max-width: none;
  padding: 28px 32px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
}
.rdp-page .pr-free-top { align-items: baseline; gap: 14px; }
.rdp-page .pr-free-price { font-family: var(--rd-mono); font-size: 54px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--rd-green); }
.rdp-page .pr-free-title { margin-top: 18px; font-family: var(--rd-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--rd-ink); }
.rdp-page .pr-free-lead { margin-top: 8px; max-width: 70ch; font-size: 15px; line-height: 1.7; color: var(--rd-text); }
.rdp-page .pr-feat-grid { margin-top: 26px; gap: 18px 28px; }
.rdp-page .pr-feat-ico { color: var(--rd-green); }
.rdp-page .pr-feat-label { font-family: var(--rd-sans); font-size: 14px; font-weight: 600; color: var(--rd-ink); }
.rdp-page .pr-feat-desc { font-size: 13px; line-height: 1.5; color: var(--rd-grey); }
.rdp-page .pr-cta-row { margin-top: 28px; gap: 14px; }
.rdp-page .pr-cta-note { font-size: 13px; color: var(--rd-grey); }
.rdp-page .pr-office { margin-top: 60px; }
.rdp-page .pr-plus-title { font-family: var(--rd-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--rd-ink); }
.rdp-page .pr-plus-lead { max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--rd-grey); }
.rdp-page .pr-interval { padding: 3px; border: 1px solid var(--rd-line-strong); border-radius: 4px; background: #FFFFFF; }
.rdp-page .pr-interval-opt {
  padding: 7px 14px;
  border-radius: 3px;
  font-family: var(--rd-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--rd-grey);
}
.rdp-page .pr-interval-on { background: var(--rd-ink); color: #FFFFFF; }
.rdp-page .pr-plan {
  padding: 26px 24px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
  box-shadow: none;
}
.rdp-page .pr-plan-anchor { border-color: var(--rd-green); }
.rdp-page .pr-plan-badge {
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--rd-green-soft);
  border: 1px solid var(--rd-green-line);
  font-family: var(--rd-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rd-green-deep);
}
.rdp-page .pr-plan-name { font-family: var(--rd-sans); font-size: 17px; font-weight: 600; letter-spacing: normal; color: var(--rd-ink); }
.rdp-page .pr-plan-monitor { font-size: 13px; color: var(--rd-grey); }
.rdp-page .pr-plan-amount { font-family: var(--rd-mono); font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--rd-ink); }
.rdp-page .pr-plan-per { font-family: var(--rd-mono); font-size: 13px; color: var(--rd-grey); }
.rdp-page .pr-plan-vat { font-size: 12px; color: var(--rd-grey-light); }
.rdp-page .pr-plan-save { font-family: var(--rd-mono); font-size: 12px; color: var(--rd-green); }
.rdp-page .pr-plan-list { font-size: 14px; color: var(--rd-text); }
.rdp-page .pr-plan-unavailable { font-size: 12px; line-height: 1.5; color: var(--rd-grey); }
.rdp-page .pr-shared { margin-top: 28px; padding: 22px 26px; background: #FFFFFF; border: 1px solid var(--rd-line); border-radius: 8px; }
.rdp-page .pr-shared-list { font-size: 14px; color: var(--rd-text); }
.rdp-page .pr-plus-terms { max-width: 80ch; font-size: 13px; line-height: 1.7; color: var(--rd-grey); }
.rdp-page .pr-seats { margin-top: 60px; }
.rdp-page .pr-seat-item strong { font-family: var(--rd-sans); font-size: 15px; font-weight: 600; color: var(--rd-ink); }
.rdp-page .pr-seat-item span { font-size: 14px; line-height: 1.6; color: var(--rd-text); }
.rdp-page .pr-custom {
  margin-top: 60px;
  padding: 28px 32px;
  background: #FFFFFF;
  border: 1px solid var(--rd-line);
  border-radius: 8px;
}
.rdp-page .pr-custom-title { font-family: var(--rd-sans); font-size: 24px; font-weight: 600; letter-spacing: -0.015em; color: var(--rd-ink); }
.rdp-page .pr-custom-body { max-width: 62ch; font-size: 14px; line-height: 1.6; color: var(--rd-text); }
.rdp-page .pr-trust { margin-top: 60px; }
.rdp-page .pr-trust-ico { color: var(--rd-green); }
.rdp-page .pr-trust-item strong { font-family: var(--rd-sans); font-size: 14px; font-weight: 600; color: var(--rd-ink); }
.rdp-page .pr-trust-item span { font-size: 13px; line-height: 1.6; color: var(--rd-grey); }
.rdp-page .pr-notice { font-size: 14px; color: var(--rd-text); }
/* The site .btn inside a restyled page wears the redesign's button. */
.rdp-page .btn {
  padding: 10px 16px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 4px;
  background: #FFFFFF;
  font-family: var(--rd-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--rd-ink);
  box-shadow: none;
}
.rdp-page .btn:hover { border-color: var(--rd-ink); background: #FFFFFF; box-shadow: none; }
.rdp-page .btn.primary { background: var(--rd-ink); border-color: var(--rd-ink); color: #FFFFFF; }
.rdp-page .btn.primary:hover { background: var(--rd-green); border-color: var(--rd-green); color: #FFFFFF; }
.rdp-page .btn.lg { padding: 12px 22px; font-size: 15px; }
.rdp-page .btn.sm { padding: 7px 12px; font-size: 13px; }
@media (max-width: 768px) {
  .rdp-page .pr-head-title { font-size: 30px; }
  .rdp-page .pr-free, .rdp-page .pr-office, .rdp-page .pr-seats, .rdp-page .pr-custom, .rdp-page .pr-trust { margin-top: 44px; }
  .tool-list { margin-top: 26px; }
}
@media (max-width: 480px) {
  .rdp-page .pr-free-inner, .rdp-page .pr-custom { padding: 18px; }
  .rdp-page .pr-free-price { font-size: 42px; }
  .rdp-page .tool-card { padding: 18px; }
}

/* The pricing page's remaining inline styles, off the markup and into here. */
.pr-caps-g { color: var(--rd-green-deep); }
.pr-caps-sp { margin-bottom: 10px; }
.pr-buy { margin: 0; }

/* Two tables that have to scroll rather than clip on a phone: the track
   record's three columns (a nowrap mandate span plus an outcome pill) and the
   calibration deciles. Both sit in a .ds-table-scroll and carry a width floor,
   or the wrapper never scrolls and the table squeezes instead. */
.dtr-scroll { margin-top: 18px; }
.dtr-table { min-width: 520px; margin-top: 0; }
.mfk-scroll { margin: 0 0 16px; }
.rdp-table-num { min-width: 320px; }

/* ═══ The bridge: the July tokens, re-pointed at the design ══════════════
   The restyled pages still hold a lot of markup that reaches for --ds-*
   directly, in an inline style or in a July component we reuse. Rewriting
   every one of those by hand would be hundreds of edits for the same effect,
   and each one a chance to change a fact by accident. Custom properties
   inherit, so the page redefines the tokens instead: one place, and a July
   component dropped into a restyled page arrives in Archivo, in the design's
   greens and greys, without knowing anything about the redesign.

   Scoped to .rdp-page. NOT to .rd-page: the company dossier is another lane's
   surface and this would silently repaint it.

   TWO TOKENS ARE DELIBERATELY NOT REMAPPED. --ds-fg-dim is the readability
   FLOOR the light doctrine pins (#6b7480, DesignDoctrineTests); the design's
   lightest grey #9AA29E is lighter than that floor and is drawn for 12px
   footnotes only, so pointing the floor at it would lighten text the design
   never asked to lighten. --ds-inv is white in both systems. */
.rdp-page {
  /* Faces */
  --ds-sans: var(--rd-sans);
  --ds-serif: var(--rd-sans);
  --ds-mono: var(--rd-mono);

  /* Ink and text */
  --ds-ink: var(--rd-ink);
  --ds-ink-soft: var(--rd-ink-soft);
  --ds-fg: var(--rd-text);
  --ds-fg-mid: var(--rd-text);
  --ds-fg-mute: var(--rd-grey);

  /* Surfaces and hairlines */
  --ds-surface: #FFFFFF;
  --ds-page-bg: var(--rd-track);
  --ds-line: var(--rd-line);
  --ds-line-soft: var(--rd-line-soft);

  /* The one accent, and the three states */
  --ds-accent: var(--rd-green);
  --ds-accent-deep: var(--rd-green-deep);
  --ds-accent-soft: var(--rd-green-soft);
  --ds-good: var(--rd-green);
  --ds-warn: var(--rd-orange);
  --ds-bad: var(--rd-red);
  --ds-good-border: var(--rd-green-line);
  --ds-warn-border: var(--rd-line);
  --ds-bad-border: var(--rd-red-soft);
  --ds-good-bg: var(--rd-green-soft);
  --ds-warn-bg: #FFFFFF;
  --ds-bad-bg: #FFFFFF;

  /* Corners: the design has one radius for a card and one for a control */
  --ds-r-sm: 3px;
  --ds-r-md: 6px;
  --ds-r-lg: 8px;
  --ds-r-xl: 8px;

  /* The design draws no shadows */
  --ds-elev-1: none;
  --ds-elev-2: none;
  --ds-elev-3: none;
}

/* The risk trio an inline style still reaches for by its own name. */
.rdp-page {
  --risk-low: var(--rd-green);
  --risk-med: var(--rd-orange);
  --risk-high: var(--rd-red);
  --risk-low-bg: var(--rd-green-soft);
  --risk-med-bg: #FFFFFF;
  --risk-high-bg: #FFFFFF;
  --risk-low-border: var(--rd-green-line);
  --risk-med-border: var(--rd-line);
  --risk-high-border: var(--rd-red-soft);
}

/* ── The tool pages ───────────────────────────────────────────────────────
   Their structure is unchanged; the bridge above carries the palette and the
   type. What is left is the shapes the design draws differently: a panel is
   flat white on a hairline, an input is squared, and nothing has a shadow. */
.rdp-page input[type="text"],
.rdp-page input[type="search"],
.rdp-page input[type="number"],
.rdp-page input[type="email"],
.rdp-page select,
.rdp-page textarea {
  font-family: var(--rd-sans);
  border-radius: 4px;
}
.rdp-page input:focus-visible,
.rdp-page select:focus-visible,
.rdp-page textarea:focus-visible {
  outline: 2px solid var(--rd-green);
  outline-offset: 1px;
}
.rdp-page .ds-panel { box-shadow: none; }
.rdp-page h2, .rdp-page h3 { font-family: var(--rd-sans); }

/* Two pricing sections divided themselves with a rule ABOVE the heading, the
   July page's way of separating movements. In the design the rule sits UNDER
   the eyebrow that names the section, so the divider moves rather than
   doubling: the top border goes and the caps line gets the hairline. */
.rdp-page .pr-seats, .rdp-page .pr-trust { padding-top: 0; border-top: 0; }
.rdp-page .pr-seats > .ds-caps,
.rdp-page .pr-office-head .ds-caps {
  font-size: 12px;
  letter-spacing: 0.14em;
}
.rdp-page .pr-seats > .ds-caps {
  padding-bottom: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--rd-line);
}
.rdp-page .pr-trust { margin-bottom: 8px; }

/* ───── redesign home v2 ─────────────────────────────────────────────
   The owner's home artboard, docs/design/home-redesign-2026-09-04. Every
   measurement below is his: the 1fr + 420 hero split, the 60px headline on a
   16ch measure, the 46px time column, the 27px mono counters, the four-cell
   grid drawn with 1px gaps over a line-coloured ground.

   It comes AFTER the earlier home block on purpose. The hero keeps its
   .hc2-hero class because home-live.js binds the search suggest through it, so
   the July frame that class still carries (72px top padding, the aurora
   ::before, the centred text) is switched off here rather than deleted from a
   block another page still reads. */

.rdh2-hero {
  padding: 64px 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
  text-align: left;
}
.rdh2-hero::before { content: none; }
.rdh2-hero .hc2-searchwrap { margin: 0; max-width: none; }

.rdh2-title {
  margin: 0;
  font-family: var(--rd-sans, Archivo, system-ui, sans-serif);
  font-size: 60px;
  line-height: 1.03;
  font-weight: 600;
  letter-spacing: -0.03em;
  max-width: 16ch;
  color: var(--rd-ink, #101413);
}
.rdh2-lead {
  margin: 22px 0 0;
  max-width: 50ch;
  font-size: 19px;
  line-height: 1.5;
  color: var(--rd-text, #46504C);
}

/* the search field: one bordered row, the button inside it */
.rdh2-searchwrap { margin-top: 30px; position: relative; }
.rdh2-search {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rd-ink, #101413);
  border-radius: 6px;
  overflow: hidden;
  max-width: 560px;
  background: #FFFFFF;
  /* The July .hc2-search this form still carries sets `padding: 0 18px` and
     `gap: 12px`. Inherited here it left the button floating INSIDE the control:
     an 18.8px white gap between the button and the field's right edge, and a
     12px one on its left (measured 2026-09-04, owner: "the search button is just
     not in the right spot"). The artboard butts the button against the border.
     align-items: stretch for the same reason vertically: centred, the 52.5px
     button sat inside a 55.6px field with a 1.5px sliver above and below, which
     reads as pasted on rather than part of the control. */
  padding: 0;
  gap: 0;
}
.rdh2-search-input {
  flex: 1;
  min-width: 0;
  padding: 15px 18px;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--rd-sans, Archivo, system-ui, sans-serif);
  font-size: 16px;
  color: var(--rd-ink, #101413);
}
.rdh2-search-input::placeholder { color: var(--rd-grey-light, #9AA29E); }
.rdh2-search-btn {
  align-self: stretch;
  padding: 15px 24px;
  border: 0;
  background: var(--rd-ink, #101413);
  color: #FFFFFF;
  font-family: var(--rd-sans, Archivo, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.rdh2-search-btn:hover { background: var(--rd-green, #0C7A52); }

.rdh2-examples { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rdh2-examples-cap { font-size: 13px; color: var(--rd-grey-light, #9AA29E); }
.rd-page a.rdh2-example {
  padding: 4px 10px;
  border: 1px solid var(--rd-line, #E4E7E6);
  border-radius: 999px;
  font-size: 13px;
  color: var(--rd-text, #46504C);
  text-decoration: none;
}
.rd-page a.rdh2-example:hover { border-color: var(--rd-ink, #101413); color: var(--rd-ink, #101413); text-decoration: none; }

/* the live panel */
.rdh2-feed { border: 1px solid var(--rd-line, #E4E7E6); border-radius: 8px; overflow: hidden; }
.rdh2-feed-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rd-line, #E4E7E6);
  display: flex;
  align-items: center;
  gap: 9px;
}
.rdh2-feed-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rd-green, #0C7A52);
  animation: rdh2-pulse 2.2s ease-out infinite;
}
@keyframes rdh2-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(12, 122, 82, 0.45); }
  70%  { box-shadow: 0 0 0 7px rgba(12, 122, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(12, 122, 82, 0); }
}
@media (prefers-reduced-motion: reduce) { .rdh2-feed-dot { animation: none; } }
.rdh2-feed-caps {
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rd-ink, #101413);
}
.rd-page a.rdh2-feed-all { margin-left: auto; font-size: 12px; }
.rdh2-feed-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--rd-line-soft, #F0F2F1);
  align-items: baseline;
}
.rdh2-feed-row:hover { background: #FAFBFA; }
.rdh2-feed-when {
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; color: var(--rd-grey-light, #9AA29E);
}
.rdh2-feed-kind {
  display: block;
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
}
.rd-page a.rdh2-feed-name, .rdh2-feed-name {
  display: block; margin-top: 2px;
  font-size: 14px; font-weight: 500;
  color: var(--rd-ink, #101413); text-decoration: none;
}
.rd-page a.rdh2-feed-name:hover { color: var(--rd-green, #0C7A52); text-decoration: none; }
.rdh2-feed-foot {
  padding: 10px 18px;
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 10px; color: var(--rd-grey-light, #9AA29E);
  display: flex; gap: 12px;
}
.rdh2-feed-stamp { margin-left: auto; }

/* the counter strip */
.rdh2-counters {
  margin-top: 56px;
  border-top: 1px solid var(--rd-line, #E4E7E6);
  border-bottom: 1px solid var(--rd-line, #E4E7E6);
  padding: 22px 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.rd-page a.rdh2-counter { color: var(--rd-ink, #101413); display: block; text-decoration: none; }
.rd-page a.rdh2-counter:hover { text-decoration: none; }
.rd-page a.rdh2-counter:hover .rdh2-counter-n { color: var(--rd-green, #0C7A52); }
.rdh2-counter-line { display: flex; align-items: baseline; gap: 7px; }
.rdh2-counter-n {
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 27px; font-weight: 700; letter-spacing: -0.02em;
}
.rdh2-counter-delta {
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; font-weight: 700;
}
.rdh2-counter-delta.is-good { color: var(--rd-green, #0C7A52); }
.rdh2-counter-delta.is-bad  { color: var(--rd-red, #B23A1F); }
.rdh2-counter-label { margin-top: 3px; display: block; font-size: 13px; color: var(--rd-grey, #6E7671); }

/* what the dossier holds */
.rdh2-caps { margin-top: 56px; }
.rdh2-caps-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; flex-wrap: wrap;
  border-bottom: 1px solid var(--rd-line, #E4E7E6);
  padding-bottom: 10px;
}
.rdh2-caps-caps {
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rd-grey, #6E7671);
}
.rd-page a.rdh2-caps-link { font-size: 14px; }
.rdh2-caps-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rd-line, #E4E7E6);
  border: 1px solid var(--rd-line, #E4E7E6);
  border-radius: 8px;
  overflow: hidden;
}
.rd-page a.rdh2-cap { background: #FFFFFF; padding: 18px 20px; color: var(--rd-ink, #101413); display: block; text-decoration: none; }
.rd-page a.rdh2-cap:hover { background: #FAFBFA; text-decoration: none; }
.rdh2-cap-top { display: flex; align-items: baseline; gap: 10px; }
.rd-page a.rdh2-cap .rdh2-cap-name { color: var(--rd-ink, #101413); font-weight: 600; font-size: 15px; }
.rdh2-cap-metric {
  margin-left: auto;
  font-family: var(--rd-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-size: 12px; color: var(--rd-green, #0C7A52); white-space: nowrap;
}
.rdh2-cap-detail { margin-top: 4px; display: block; font-size: 13px; color: var(--rd-grey, #6E7671); }

/* the closing band */
.rdh2-cta {
  margin-top: 56px;
  border: 1px solid var(--rd-line, #E4E7E6);
  border-radius: 8px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: center;
}
.rdh2-cta-title { margin: 0; font-size: 27px; font-weight: 600; letter-spacing: -0.02em; }
.rdh2-cta-body { margin: 10px 0 0; max-width: 56ch; font-size: 16px; color: var(--rd-text, #46504C); }
.rdh2-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rd-page a.rdh2-btn {
  padding: 12px 20px;
  border: 1px solid #D5DAD7;
  border-radius: 5px;
  font-size: 15px; font-weight: 500;
  color: var(--rd-ink, #101413);
  text-decoration: none;
}
.rd-page a.rdh2-btn:hover { border-color: var(--rd-ink, #101413); text-decoration: none; }
.rd-page a.rdh2-btn.is-primary { background: var(--rd-ink, #101413); border-color: var(--rd-ink, #101413); color: #FFFFFF; }
.rd-page a.rdh2-btn.is-primary:hover { background: var(--rd-green, #0C7A52); border-color: var(--rd-green, #0C7A52); }

/* The artboard's slim closing line (.rdh2-foot) is gone with its markup: on the
   real site the shell's own footer renders directly under this page and carries
   the same links in named columns. Nothing else claimed these rules. */

/* narrow: the two-column bands stack, the grids halve then go single.
   His artboard is drawn at 1180. Everything below is the same page folded, not
   a different one: no element is dropped and no order changes. */
@media (max-width: 1080px) {
  /* minmax(0, 1fr) and not 1fr: a 1fr track's base size is auto, so it cannot
     shrink below its content's min-content and the column ends up WIDER than the
     grid. Measured at 360: the hero was 328px with a 344.9px track, and every
     child in it sat 16.9px past the page's right padding. Nothing scrolled,
     because the document rounds the difference away, which is exactly why it
     survived a scrollWidth check. */
  .rdh2-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .rdh2-title { font-size: 46px; max-width: 20ch; }
  .rdh2-counters { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
  .rdh2-caps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .rdh2-hero { padding-top: 40px; }
  .rdh2-title { font-size: 34px; max-width: none; letter-spacing: -0.02em; }
  .rdh2-lead { font-size: 17px; }
  .rdh2-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rdh2-caps-grid { grid-template-columns: 1fr; }
  .rdh2-cta { grid-template-columns: 1fr; gap: 22px; padding: 24px; }
  .rdh2-cta-title { font-size: 22px; }
  .rdh2-search { max-width: none; }
  .rdh2-search-btn { padding: 15px 16px; }
}