/* ============================================================================
   Salarium design system — "ledger" edition.
   Institutional, editorial, evidence-first. Paper ground, ink type, a single
   viridian accent, semantic data colors. Serif display faces come from the
   system (Georgia stack): zero added bytes, immediate editorial contrast with
   the Inter UI face. No build step, no framework, no decorative gradients.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* ---- surfaces ---- */
  --paper:      #f6f4ed;   /* page ground */
  --paper-2:    #efece1;   /* raised panel */
  --paper-3:    #e9e5d7;   /* deep panel / thead */
  --panel:      #fbfaf5;   /* brighter-than-paper card (time machine) */
  --ink-block:  #21201a;   /* footer / inverted blocks */

  /* ---- ink ---- */
  --ink:        #21201a;   /* primary text: 13.9:1 on paper */
  --ink-2:      #55524a;   /* secondary text: 6.5:1 */
  --ink-3:      #6f6b60;   /* captions >=13px: 4.6:1 */

  /* ---- lines ---- */
  --line:        #d9d4c5;  /* hairline */
  --line-strong: #b4af9e;
  --rule:        #21201a;  /* editorial section rule */

  /* ---- accent + semantic data colors ---- */
  --accent:      #17594a;  /* viridian: measured/stated, links, primary CTA */
  --accent-soft: #dce8e2;  /* accent wash for evidence blocks */
  --eu:          #39618c;  /* EU / regulatory series */
  --warn:        #8a5a12;  /* building / caution */
  --neg:         #9c3b30;  /* contraction / failure */
  --pos:         #17594a;

  --radius:    3px;
  --radius-ui: 6px;
  --maxw:      1180px;

  --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* ---- ledger, night edition ------------------------------------------------
   Same editorial system, inverted ground: slate desk, ivory ink, brighter
   viridian for contrast. Server-rendered SVG figures are NOT recolored —
   they keep their paper ground below (printed exhibits on a dark desk),
   which preserves their measured contrast ratios untouched. */
:root[data-theme="dark"] {
  --paper:      #191817;
  --paper-2:    #201f1d;
  --paper-3:    #262420;
  --panel:      #201f1d;   /* was undefined: the light fallback leaked here */
  --ink-block:  #121110;

  --ink:        #ece9df;
  --ink-2:      #b5b1a4;
  --ink-3:      #918d80;

  --line:        #37342b;
  --line-strong: #4c4839;
  --rule:        #ece9df;

  --accent:      #55a68e;
  --accent-soft: #1e2f2a;
  --eu:          #7da3cf;
  --warn:        #c99b52;
  --neg:         #cf7266;
  --pos:         #55a68e;
  --nav-bg:      rgba(25, 24, 23, .94);
  color-scheme: dark;
}
/* SSR figures stay printed-on-paper in the dark theme. */
:root[data-theme="dark"] figure svg,
:root[data-theme="dark"] .brandviz svg {
  background: #f6f4ed; border-radius: 3px; padding: 6px;
}
:root[data-theme="dark"] .nav-links a.active { background: var(--paper-3); }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- type scale ---- */
.display, h1, h2 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.012em; }
.display { font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; margin: 0; }
h1 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.12; margin: 0; }
h2 { font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.2; margin: 0; }
h3 { font-family: var(--font); font-size: 1.02rem; font-weight: 650;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0; }
h4 { font-family: var(--font); font-size: .92rem; font-weight: 650; margin: 0; }
p  { margin: 0; }
.lead { font-size: 1.14rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }
.small { font-size: .86rem; }
.cap   { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }
.num, .figure { font-variant-numeric: tabular-nums lining-nums; }
.mono { font-family: var(--mono); }
.center { text-align: center; }

.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .16em;
  font-size: .72rem; font-weight: 650; color: var(--accent);
}
.eyebrow.plain { color: var(--ink-3); }

/* editorial section rule: a strong top border + eyebrow, replaces card walls */
.rule-head { border-top: 2px solid var(--rule); padding-top: 14px; }
.rule-head.thin { border-top-width: 1px; border-top-color: var(--line-strong); }

/* left:0 matters: width:1px cannot shrink a <table> below min-content, so an
   unanchored sr-only table at its static position widened the document
   (measured +91px on /indices mobile). Pinned, its box ends at its own width. */
.sr-only { position: absolute !important; left: 0; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; left: 16px; top: -60px; padding: 10px 14px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius-ui); font-weight: 650; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #cfe3da; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 64px 0; }
.section-sm { padding: 36px 0; }
.divider { height: 1px; background: var(--line); border: none; margin: 0; }

/* ---------------- nav ---------------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg, rgba(246,244,237,.94));
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-strong); }
/* Wrap instead of overflow: nav width is locale-dependent (nine languages,
   the select as wide as its longest name), so fit must be content-driven.
   A fixed height clipped the wrapped rows — min-height keeps the ledger line. */
.nav-inner { display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px 22px; min-height: 60px; padding: 6px 0; }
.brand { display: flex; align-items: center; gap: 9px; font-family: var(--serif);
  font-weight: 700; font-size: 1.18rem; color: var(--ink); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand .logo { width: 22px; height: 22px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 2px; }
.nav-links a { padding: 8px 11px; color: var(--ink-2); font-size: .92rem;
  font-weight: 550; border-radius: var(--radius); }
.nav-links a:hover { color: var(--ink); text-decoration: none; background: var(--paper-2); }
.nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--ink); border-radius: 0; }
.nav-menu { flex: 1; display: flex; align-items: center; flex-wrap: wrap; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; }
.langsel { background: var(--paper); color: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-ui); padding: 7px 8px; font-size: .85rem; font-family: var(--font); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; padding: 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-ui);
  background: var(--paper); cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; margin: 4px 0;
  background: var(--ink); }

/* ---------------- buttons ---------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; min-height: 44px; border-radius: var(--radius-ui);
  font-weight: 600; font-size: .95rem; cursor: pointer; border: 1px solid transparent;
  white-space: nowrap; font-family: var(--font); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: #f6f4ed; }
.btn-primary:hover { background: #114437; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn-sm { padding: 8px 14px; min-height: 40px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------------- grid ---------------- */
.grid { display: grid; gap: 20px; }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px){ .g3,.g4 { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 620px){ .g2,.g3,.g4 { grid-template-columns: 1fr; } }

/* panel: quiet raised surface — used sparingly (forms, code, charts).
   `.card`/`.card-h` are compatibility aliases for the same surface. */
.panel, .card { background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; }
.panel .cap, .card .cap { margin-top: 10px; }
.panel-h, .card-h { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 12px; }
.val.teal { color: var(--accent); }
.pill.teal { color: var(--accent); border-color: #a9c6bb; background: var(--accent-soft); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px;
  margin-bottom: 24px; }
.section-head p { max-width: 60ch; }

/* ---------------- stat strip (editorial, no boxes) ---------------- */
.stat-strip { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.stat-strip .stat { padding: 18px 18px 16px 0; border-left: 1px solid var(--line); padding-left: 18px; }
.stat-strip .stat:first-child { border-left: 0; padding-left: 0; }
.stat .val { font-family: var(--serif); font-size: 2.3rem; font-weight: 700;
  line-height: 1.05; letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; }
.stat .val.accent { color: var(--accent); }
.stat .lbl { color: var(--ink-2); font-size: .85rem; margin-top: 7px; }
.stat .meta { color: var(--ink-3); font-size: .78rem; margin-top: 3px; }

/* ---------------- evidence / readout blocks ---------------- */
.readout { border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0; }
.readout .insight-value { font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; margin: 8px 0 10px;
  font-variant-numeric: tabular-nums; }
.readout .insight-detail { color: var(--ink-2); max-width: 74ch; }
.readout .insight-value.pos { color: var(--pos); }
.readout .insight-value.neg { color: var(--neg); }

.notice { background: var(--paper-2); border: 1px solid var(--line);
  border-left: 3px solid var(--warn); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 13px 16px; color: var(--ink-2); font-size: .9rem; }
.notice.ok { border-left-color: var(--accent); }

/* live status line — quiet, factual */
.live-banner { display: flex; justify-content: space-between; align-items: center;
  gap: 16px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
  padding: 9px 2px; color: var(--ink-2); font-size: .84rem; }
.live-banner strong { color: var(--ink); font-weight: 600; }
.live-state { display: inline-flex; align-items: center; gap: 8px; }
.live-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex: none; }

/* ---------------- tables ---------------- */
.tablewrap { border-top: 2px solid var(--rule); overflow-x: auto; }
.tablewrap.quiet { border-top: 1px solid var(--line-strong); }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th { text-align: left; font-weight: 650; color: var(--ink-2); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .09em; padding: 11px 14px 9px;
  border-bottom: 1px solid var(--line-strong); background: transparent; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line);
  color: var(--ink); vertical-align: top; }
tbody tr:hover { background: var(--paper-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
th:first-child, td:first-child { padding-left: 2px; }
th:last-child, td:last-child { padding-right: 2px; }
.role-title { font-weight: 600; line-height: 1.35; }
.role-company { font-size: .82rem; margin-top: 2px; }
.role-company a { color: var(--accent); }
.role-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.role-table th:first-child { width: 40%; }
.source-link { color: var(--ink-2); text-decoration: underline;
  text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.source-link:hover { color: var(--accent); text-decoration-color: var(--accent); }
.pay-local { font-weight: 650; font-variant-numeric: tabular-nums; }
.pay-usd { color: var(--ink-3); font-size: .78rem; margin-top: 2px;
  font-variant-numeric: tabular-nums; }

/* ---------------- pills / tags ---------------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
  border-radius: 3px; font-size: .74rem; font-weight: 550; border: 1px solid var(--line-strong);
  color: var(--ink-2); background: var(--paper); }
.pill.accent { color: var(--accent); border-color: #a9c6bb; background: var(--accent-soft); }
.pill.warn { color: var(--warn); border-color: #d9bd93; background: #f3e8d5; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* ---------------- forms ---------------- */
label.field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem;
  font-weight: 600; color: var(--ink-2); }
select, input[type=text], input[type=number], input[type=email], textarea {
  background: #fdfcf9; border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: var(--radius-ui); padding: 10px 11px; min-height: 44px;
  font-family: var(--font); font-size: .92rem; }
textarea { min-height: 112px; resize: vertical; }
label.field > input, label.field > select, label.field > textarea { width: 100%; font-weight: 400; }
select:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px #cfe3da; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.filters .field { min-width: 136px; }
.filters .field:first-child { min-width: 220px; flex: 1; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.form-error { min-height: 1.4em; color: var(--neg); font-size: .84rem; }

/* ---------------- charts ---------------- */
.chart { width: 100%; height: 300px; }
.chart-sm { height: 240px; }
.chart-fallback { height: 100%; display: grid; place-items: center; color: var(--ink-3);
  text-align: center; padding: 20px; font-size: .9rem; }
.figure-note { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px;
  font-size: .78rem; color: var(--ink-3); }
.figure-note span::before { content: "·"; margin-right: 6px; }
.figure-note span:first-child::before { content: none; }

/* compact history-accrual state (replaces large empty charts) */
.accrual { display: flex; align-items: center; gap: 14px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); padding: 16px 18px; color: var(--ink-2); font-size: .9rem; }
.accrual .day-dots { display: inline-flex; gap: 4px; flex: none; }
.accrual .day-dots i { width: 9px; height: 9px; border-radius: 2px; background: var(--line); }
.accrual .day-dots i.on { background: var(--accent); }

/* ---------------- hero / masthead ---------------- */
.masthead { border-bottom: 1px solid var(--line-strong); }
.masthead-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px; align-items: end; padding: 64px 0 44px; }
.masthead .display { margin: 14px 0 18px; }
.masthead .lead { margin-bottom: 26px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.brandviz { width: 100%; }
.brandviz svg { display: block; width: 100%; height: auto; }
.brandviz figcaption { margin-top: 8px; }

/* coverage strip under the masthead */
.coverage-strip { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 14px 0;
  font-size: .86rem; color: var(--ink-2); border-bottom: 1px solid var(--line); }
.coverage-strip strong { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 650; }

/* workflows */
.workflow { border-top: 1px solid var(--line-strong); padding: 20px 0 4px; }
.workflow .num { font-family: var(--mono); color: var(--ink-3); font-size: .75rem; }
.workflow h3 { margin: 10px 0 8px; }
.workflow p { color: var(--ink-2); font-size: .92rem; max-width: 44ch; }
.workflow .wf-link { display: inline-block; margin-top: 10px; font-size: .88rem; font-weight: 600; }

/* fact list (what this is / is not) */
.fact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fact-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 9px; }
.fact-list li { color: var(--ink-2); display: flex; gap: 10px; font-size: .93rem; }
.fact-list li::before { content: "—"; color: var(--accent); font-weight: 700; flex: none; }
.fact-list.limits li::before { color: var(--warn); }

/* ---------------- pricing ---------------- */
.plan { border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 26px; display: flex; flex-direction: column; gap: 16px; background: var(--paper); }
.plan.featured { border-color: var(--accent); border-width: 2px; position: relative; }
.plan.featured::before { content: attr(data-badge); position: absolute; top: -11px; left: 22px;
  background: var(--accent); color: var(--paper); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; border-radius: 3px; }
.plan .price { font-family: var(--serif); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.plan .price small { font-size: .95rem; color: var(--ink-3); font-weight: 500; font-family: var(--font); }
.plan .price-prefix { display: block; color: var(--ink-3); font-size: .74rem;
  font-weight: 500; font-family: var(--font); letter-spacing: 0; line-height: 1; margin-bottom: 6px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { display: flex; gap: 10px; color: var(--ink-2); font-size: .92rem; }
.plan li::before { content: "—"; color: var(--accent); flex: none; }
.plan .btn { margin-top: auto; }
.plan-kicker { color: var(--accent); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; font-weight: 700; }
.plan-note { color: var(--ink-3); font-size: .8rem; line-height: 1.5; }

/* ---------------- code / api ---------------- */
pre.code { background: var(--ink-block); color: #e8e5da; border-radius: var(--radius);
  width: 100%; max-width: 100%; padding: 18px; overflow-x: auto; font-family: var(--mono);
  font-size: .84rem; line-height: 1.7; }
code.inline { font-family: var(--mono); background: var(--paper-3); padding: 2px 6px;
  border-radius: 3px; font-size: .85em; color: var(--ink); }
.endpoint { font-family: var(--mono); font-size: .85rem; display: flex; gap: 10px;
  align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--line); }
.endpoint:last-child { border-bottom: none; }
.method { color: var(--accent); font-weight: 700; min-width: 44px; }
.kbd { font-family: var(--mono); background: var(--paper-3); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 1px 6px; font-size: .8em; }

/* ---------------- faq / details ---------------- */
.faq { border-top: 2px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--ink-2); margin-top: 10px; max-width: 76ch; }

/* ---------------- misc layouts ---------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
@media (max-width: 820px){ .split { grid-template-columns: 1fr; } }
.access-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }
.check-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 11px; }
.check-list li { color: var(--ink-2); display: flex; gap: 10px; }
.check-list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex: none; }
.method-step { display: grid; grid-template-columns: 52px 1fr; gap: 16px; padding: 20px 0;
  border-bottom: 1px solid var(--line); }
.method-step:last-child { border-bottom: 0; }
.method-step .step-num { width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%; color: var(--accent);
  font-family: var(--mono); font-weight: 600; }
.method-step p { color: var(--ink-2); margin-top: 6px; max-width: 72ch; }
.spinner { color: var(--ink-3); font-size: .9rem; padding: 24px; text-align: center; }
.hide { display: none !important; }

/* completeness bars (methodology / admin) */
.meter { display: grid; grid-template-columns: 150px 1fr 64px; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
.meter:last-child { border-bottom: 0; }
.meter .bar { height: 10px; background: var(--paper-3); border-radius: 2px; overflow: hidden; }
.meter .bar i { display: block; height: 100%; background: var(--accent); }
.meter .pct { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

/* proof grid: bordered fact cells (editorial, no cards) */
.proof-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--line); }
.proof-item { padding: 16px 18px 16px 0; border-left: 1px solid var(--line); padding-left: 18px; }
.proof-item:first-child { border-left: 0; padding-left: 0; }
.proof-item strong { display: block; font-family: var(--serif); font-size: 1.35rem;
  font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.proof-item span { color: var(--ink-3); font-size: .8rem; }
@media (max-width: 900px) {
  .proof-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .proof-item { border-top: 1px solid var(--line); }
  .proof-item:nth-child(-n+2) { border-top: 0; }
}
.insight-card { border-left: 3px solid var(--accent); background: var(--accent-soft);
  padding: 22px 24px; border-radius: 0 var(--radius) var(--radius) 0; }
.insight-card .insight-value { font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.18; margin: 8px 0 10px; }
.insight-card .insight-detail { color: var(--ink-2); max-width: 74ch; }
.live-detail { flex: 1; color: var(--ink-2); }

/* saved views / watchlist chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; min-height: 36px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  font-size: .84rem; color: var(--ink-2); cursor: pointer; font-family: var(--font); }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip .x { font-weight: 700; color: var(--ink-3); }
.chip .x:hover { color: var(--neg); }

/* results toolbar on the explorer */
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 12px 0; }
.results-bar .count { font-weight: 650; font-variant-numeric: tabular-nums; }
.results-bar .spacer { flex: 1; }

/* time machine: as-of replay control (dashboard) */
.tm { margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); background: var(--panel); }
.tm-head { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; flex-wrap: wrap; }
.tm-date { font-weight: 650; font-variant-numeric: tabular-nums; }
.tm-date .pill { margin-left: 6px; font-style: normal; }
.tm input[type="range"] { width: 100%; margin-top: 10px; appearance: none;
  -webkit-appearance: none; height: 4px; background: var(--line);
  border-radius: 2px; outline-offset: 4px; cursor: pointer; }
.tm input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;
  width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
  border: 2px solid var(--paper); box-shadow: 0 0 0 1px var(--accent); }
.tm input[type="range"]::-moz-range-thumb { width: 14px; height: 14px;
  border-radius: 50%; background: var(--accent); border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--accent); }

/* Event timelines (salary page, company page, briefs) carry posting titles
   verbatim; German compounds arrive as 25+ char unbreakable words and must
   wrap rather than widen the page. overflow-wrap inherits to the links.
   The leading ISO date column is exactly 10 chars in an 88px slot — it must
   never inherit the break rule. */
.event-list { overflow-wrap: anywhere; }
.event-list li > .mono:first-child { overflow-wrap: normal; white-space: nowrap; }

/* ---------------- footer (ink block) ---------------- */
.footer { background: var(--ink-block); color: #b9b5a8; margin-top: 72px;
  padding: 44px 0 36px; font-size: .86rem; }
.footer a { color: #dad7cb; }
.footer a:hover { color: #fff; }
.footer .brand { color: #f6f4ed; }
.footer-top { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #3a382f; }
/* 16 footer links in one unwrappable row overflowed every viewport ≤1489px;
   the row must wrap like the header does. */
.footer .nav-links { flex-wrap: wrap; }
.footer .nav-links a { color: #b9b5a8; }
.footer .nav-links a:hover { color: #fff; background: transparent; }

/* ---------------- responsive ---------------- */
@media (max-width: 960px) {
  .masthead-inner { grid-template-columns: 1fr; gap: 30px; padding: 44px 0 36px; }
  .fact-cols { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .stat-strip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stat-strip .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
  .stat-strip .stat { border-top: 1px solid var(--line); }
  .stat-strip .stat:nth-child(-n+2) { border-top: 0; }
  .access-layout { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 760px) {
  .container { padding: 0 18px; }
  .section { padding: 46px 0; }
  .section-sm { padding: 28px 0; }
  .nav-toggle { display: block; }
  .nav-menu { display: none; position: absolute; left: 12px; right: 12px; top: 66px;
    padding: 12px; background: var(--paper); border: 1px solid var(--line-strong);
    border-radius: var(--radius-ui); box-shadow: 0 18px 40px rgba(33,32,26,.18); }
  .nav-menu.open { display: block; }
  .nav-links { margin: 0; display: grid; gap: 2px; }
  .nav-links a { padding: 12px; min-height: 44px; display: flex; align-items: center; }
  .nav-links a.active { box-shadow: none; background: var(--paper-2); border-radius: var(--radius); }
  .nav-right { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr; }
  .langsel { width: 100%; min-height: 44px; }
  .section-head { display: block; }
  .section-head p { margin-top: 10px; }
  .masthead .display { font-size: clamp(2.1rem, 9vw, 2.7rem); }
  .stat .val { font-size: 1.85rem; }
  .results-bar { align-items: flex-start; }

  /* role tables collapse to evidence cards */
  .tablewrap.role-table { border-top: 0; overflow: visible; }
  .role-table table, .role-table tbody { display: block; }
  .role-table thead { display: none; }
  .role-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    margin-bottom: 12px; padding: 15px; background: var(--paper); }
  /* overflow-wrap: German compound titles ("Wirtschaftsingenieurwesen…")
     exceed the card width as single unbreakable words; the card grid must
     break them because role cards deliberately keep overflow visible. */
  .role-table tbody td { display: block; padding: 0; border: 0; min-width: 0;
    overflow-wrap: anywhere; }
  .role-table tbody td:first-child { grid-column: 1 / -1; }
  .role-table tbody td.num { text-align: left; }
  .role-table tbody tr:hover { background: var(--paper); }

  .endpoint { align-items: flex-start; flex-wrap: wrap; overflow-wrap: anywhere; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .filters .field { min-width: calc(50% - 6px); flex: 1; }
  .filters .field:first-child { flex-basis: 100%; }
  .live-banner { flex-direction: column; align-items: flex-start; gap: 4px; }
  .meter { grid-template-columns: 110px 1fr 54px; }
  .footer-top .nav-links { grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; }
  .footer-top .nav-links a { padding: 8px 0; }
}
@media (max-width: 420px) {
  .hero-cta .btn { flex: 1; }
  .stat .val { font-size: 1.6rem; }
}

/* ---------------- decile grid (offer calculator) ----------------
   A 9-column table clips on phones and hides its own overflow; a wrapping
   grid shows every decile at any width without a scroll gesture. */
.decile-grid { display: grid; gap: 1px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  background: var(--line); border: 1px solid var(--line); }
.decile-grid > div { background: var(--paper); padding: 8px 10px; }
.decile-grid dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); }
.decile-grid dd { margin: 2px 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); }

/* ---------------- EU league page ---------------- */
.disc-bar { display: inline-block; width: 54px; height: 7px; margin-right: 8px;
  vertical-align: baseline; background: var(--line);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-size: var(--w, 0%) 100%; }
.chip-sm { min-height: 26px; padding: 2px 8px; font-size: .78rem; }

/* ---------------- motion ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav-links a, .chip, .source-link { transition: background-color .14s, border-color .14s, color .14s; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}