:root {
    color-scheme: dark;
    --surface: #1a1a19;
    --panel: #232322;
    --border: #383835;
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #8f8e85;
    --accent: #3987e5;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  }
  .wrap { max-width: 1100px; margin: 0 auto; padding: 40px 24px 64px; }
  header h1 { margin: 0 0 4px; font-size: 28px; letter-spacing: -0.01em; }
  .tagline { margin: 0 0 28px; color: var(--text-2); max-width: 62ch; }
  .answer { font-size: 21px; font-weight: 600; margin: 0 0 12px; max-width: 62ch; }
  .answer.quiet { color: var(--text-2); }
  .stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 40px; }
  .tile {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 18px;
    min-width: 150px;
    flex: 1 1 150px;
  }
  .tile .label { display: block; font-size: 13px; color: var(--text-2); }
  .tile .value { display: block; font-size: 26px; font-weight: 600; margin-top: 2px; }
  .tile .value.small { font-size: 16px; line-height: 2.1; }
  section { margin-bottom: 44px; }
  h2 {
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-2);
    border-bottom: 1px solid var(--border);
    padding-bottom: 8px;
    margin: 0 0 4px;
  }
  h2 .count { color: var(--muted); font-weight: 400; }
  .empty { color: var(--muted); padding: 12px 0; }
  .scroll { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; }
  th {
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px 6px 0;
  }
  td { padding: 10px 12px 10px 0; border-top: 1px solid var(--border); vertical-align: top; }
  tr:first-child td { border-top: 0; }
  td.company { font-weight: 600; white-space: nowrap; }
  td.num { white-space: nowrap; }
  .note { display: block; font-size: 13px; color: var(--muted); }
  .prose p { color: var(--text-2); max-width: 70ch; margin: 0 0 14px; }
  a { color: var(--accent); text-decoration: none; }
  a:hover, a:focus { text-decoration: underline; }
  footer { color: var(--text-2); font-size: 14px; max-width: 70ch; border-top: 1px solid var(--border); padding-top: 20px; }
  /* Small screens: the wide tables stay full-width inside their .scroll
     wrapper and pan sideways; a hint line above each says so, because an
     off-screen column with no cue reads as a missing column. */
  @media (max-width: 767px) {
    .wrap { padding: 24px 16px 48px; }
    header h1 { font-size: 24px; }
    .stats { gap: 8px; margin-bottom: 28px; }
    .tile { min-width: 128px; padding: 12px 14px; flex-basis: 128px; }
    .tile .value { font-size: 22px; }
    table { font-size: 14px; }
    th, td { padding-right: 10px; }
    .scroll::before {
      content: "Slide the table sideways to see every column";
      display: block;
      font-size: 12px;
      color: var(--muted);
      padding: 6px 0;
    }
  }