/* ════════════════════════════════════════════════
   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%;
}
.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);
}
.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; 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; }
.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); }

/* ───── snowflake (5-axis radar) ───── */
.snowflake-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.snowflake-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. */
.snowflake { max-width: 100%; height: auto; }
.snowflake .sf-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.01em; }
.snowflake .sf-score { font-family: var(--mono); font-size: 10px; }
.snowflake-side { flex: 1; min-width: 220px; }
.snowflake-avg { display: flex; align-items: baseline; gap: 6px; }
.snowflake-avg .sf-avg-num { font-family: var(--mono); font-size: var(--ds-fs-39); font-weight: 600; line-height: 1; }
.snowflake-avg .sf-avg-den { font-family: var(--mono); color: var(--fg-mute); }
.snowflake-verdict { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--ink-soft); margin: 10px 0 16px; }
.snowflake-legend { display: flex; flex-direction: column; gap: 7px; }
.sf-legend-row { display: flex; align-items: center; gap: 10px; }
.sf-legend-bar { flex: 1; height: 6px; border-radius: var(--r-full); background: var(--bg-mid); overflow: hidden; }
.sf-legend-bar > span { display: block; height: 100%; border-radius: var(--r-full); }
.sf-legend-label { font-size: 12px; color: var(--fg-mid); width: 96px; flex-shrink: 0; }
.sf-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. */
  .snowflake-wrap { gap: 18px; justify-content: center; flex-direction: column; align-items: stretch; }
  .snowflake-fig { align-self: center; }
  .snowflake-side { min-width: 0; width: 100%; }
  .snowflake-avg { justify-content: center; }
  .snowflake-avg .sf-avg-num { font-size: var(--ds-fs-31); }
  .snowflake-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. */
  .sf-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; }

/* 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; }

/* extraction-status trust notice — dossier "full dossier in preparation" strip.
   Brand-accent (green) wash, NOT a risk banner: this is a feature, not an alarm.
   The action row reserves height so the button never jumps to the confirmation. */
.exn {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--ds-accent-soft);
  border-left: 3px solid var(--ds-accent);
  background: var(--ds-accent-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
}
.exn-mark {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--bg-lowest);
  color: var(--ds-accent);
  box-shadow: inset 0 0 0 1px var(--ds-accent-soft);
}
.exn-mark svg { width: 17px; height: 17px; }
.exn-body { flex: 1; min-width: 0; }
.exn-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 5px;
}
.exn-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ds-accent-deep);
}
.exn-progress {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ds-fg-mute);
  background: var(--bg-lowest);
  border: 1px solid var(--ds-accent-soft);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.exn-progress-n { font-family: var(--mono); font-weight: 600; color: var(--ds-ink); }
.exn-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ds-fg-mid);
  margin: 0;
  max-width: 70ch;
}
.exn-action {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
  min-height: 34px;
}
.exn-action form { display: inline; margin: 0; }
.exn-hint { font-size: 12px; color: var(--ds-fg-mute); }
.exn-confirm {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ds-accent-deep);
}
.exn-check { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.exn-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ds-accent-deep);
}
.exn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ds-accent);
  box-shadow: 0 0 0 3px var(--ds-accent-soft);
}
@media (max-width: 560px) {
  .exn { padding: 14px; gap: 12px; }
  .exn-mark { width: 26px; height: 26px; }
}

/* ════════════════════════════════════════════════
   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 */
.snowflake { 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 */
.sf-legend-row:hover .sf-legend-label,
.sf-legend-row:hover .sf-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;
  }

  /* ── Snowflake radar: data polygon grows from center + fades; dots stagger ── */
  .snowflake 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;
  }
  .snowflake circle {
    opacity: 0;
    animation: ck-fade-in .35s ease-out forwards;
  }
  .snowflake circle:nth-of-type(1) { animation-delay: .42s; }
  .snowflake circle:nth-of-type(2) { animation-delay: .50s; }
  .snowflake circle:nth-of-type(3) { animation-delay: .58s; }
  .snowflake circle:nth-of-type(4) { animation-delay: .66s; }
  .snowflake 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) ── */
  .sf-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, .sf-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); }
.sf-legend-row { border-radius: var(--r-sm); }
.sf-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: #e2d6fb; }
.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); }
/* === 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;
}

/* ── 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);
}