.hub-wrap { max-width: 1120px; margin: 0 auto; padding: 2.25rem var(--container-padding) 4rem; }

  .hub-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
  }
  .hub-header-copy { min-width: 0; }
  .hub-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700; color: var(--ink); margin: 0 0 0.3rem; line-height: 1.1;
  }
  .hub-header p { color: var(--ink-60); font-size: 1rem; max-width: 620px; margin: 0; }

  .hub-section-label {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin: 0 0 0.65rem;
  }
  .hub-section-label h2 {
    font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;
    color: var(--ink); margin: 0;
  }
  .hub-section-label span { color: var(--ink-35); font-size: 0.78rem; }
  .hub-section-label a { color: var(--ink-deep); font-size: .85rem; text-underline-offset: .2em; }

  .hub-start-grid, .hub-tool-grid { display: grid; gap: 0.75rem; }
  .hub-start-grid { margin-bottom: 1.75rem; }
  .hub-start-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-start-grid.cols-3, .hub-tool-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hub-tool-card {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; min-height: 132px; padding: 1rem 1.05rem;
    background: var(--surface); border: var(--keyline-w) solid var(--keyline);
    border-radius: var(--r-sm); box-shadow: var(--shadow-chip);
    color: var(--ink); text-decoration: none;
  }
  .hub-tool-card:hover { background: var(--wash-2); }
  .hub-tool-card h3 {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem;
    font-family: var(--font-display); font-size: 1.08rem; font-weight: 700;
    line-height: 1.15; margin: 0 0 0.35rem;
  }
  .hub-tool-card p {
    flex: 1; margin: 0; color: var(--ink-60); font-size: 0.82rem; line-height: 1.4;
  }
  .hub-tool-card .board-btn {
    margin-top: 0.75rem; background: var(--surface); border: var(--keyline-w) solid var(--keyline);
    color: var(--ink); padding: 0.5rem 0.7rem; letter-spacing: 0;
    text-transform: none;
  }
  .hub-tool-card .board-btn:hover { background: var(--wash); border-color: var(--keyline); }
  .hub-tool-card .founders-badge, .hub-tool-card .beta-badge {
    display: inline-block; color: var(--surface); font-family: var(--font-body); font-size: 0.58rem;
    font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 0.2rem 0.35rem;
    border-radius: var(--r-sm); text-transform: uppercase;
  }
  .hub-tool-card .founders-badge { background: var(--ink); }
  .hub-tool-card .beta-badge { background: var(--coral); }
  .hub-tools { padding-bottom: 1.75rem; }

  @media (max-width: 900px) {
    .hub-start-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 620px) {
    .hub-start-grid.cols-3, .hub-start-grid.cols-4, .hub-tool-grid { grid-template-columns: 1fr; }
  }

  /* ── 1. The board ───────────────────────────────────────────── */
  .board {
    background: var(--surface); border: 2px solid var(--keyline);
    border-radius: var(--r-sm); box-shadow: var(--shadow-chip);
    margin: 0 5px 1.75rem 0; overflow: hidden;
  }
  .board-head {
    background: var(--ink); color: #fff; padding: 0.95rem 1.25rem;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
  }
  .board-head h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; margin: 0; color: #fff; }
  .board-head .meta { font-size: 0.78rem; color: var(--ink-20); font-variant-numeric: tabular-nums; }

  .board-action {
    background: var(--wash-2); border-bottom: 1.5px solid var(--rule);
    padding: 0.85rem 1.25rem; display: flex; align-items: center;
    justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  }
  .board-action .left { display: flex; align-items: baseline; gap: 0.65rem; flex-wrap: wrap; }
  .board-action .big {
    font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
    color: var(--ink); font-variant-numeric: tabular-nums;
  }
  .board-action .sm { font-size: 0.86rem; color: var(--ink-60); }
  .board-btn {
    display: inline-block; background: var(--coral); border: 1.5px solid var(--coral);
    color: #fff; border-radius: var(--r-sm); padding: 0.42rem 0.85rem;
    font-family: var(--font-body); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  }
  .board-btn:hover { background: var(--coral-dark); border-color: var(--coral-dark); }

  .board-body { padding: 1.15rem 1.25rem 1.3rem; }
  .board-group + .board-group { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); }
  .group-cap { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
  .group-cap h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; margin: 0; }
  .group-cap .c { font-size: 0.76rem; color: var(--ink-45); font-variant-numeric: tabular-nums; }

  .board-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.6rem 0.85rem; text-decoration: none; color: inherit;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .board-row + .board-row { margin-top: 0.4rem; }
  .board-row:hover { border-color: var(--keyline); background: var(--wash-2); }
  .board-row .name { min-width: 0; }
  .board-row .n { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
  .board-row .note { font-size: 0.78rem; color: var(--ink-60); line-height: 1.35; }
  .board-row .right {
    display: flex; align-items: center; gap: 0.85rem; white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .board-row .count { font-size: 0.8rem; color: var(--ink-45); }
  .board-row .val { font-size: 0.92rem; font-weight: 700; color: var(--positive-strong); min-width: 4.5rem; text-align: right; }
  .board-row .tag {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--caution-strong); background: var(--caution-05); border: 1px solid var(--caution-20);
    border-radius: var(--r-sm); padding: 0.12rem 0.4rem;
  }
  .bar { width: 96px; height: 5px; background: var(--wash); border-radius: 100px; overflow: hidden; }
  .bar i { display: block; height: 100%; background: var(--coral); }
  @media (max-width: 620px) {
    .bar { display: none; }
    .board-row { align-items: flex-start; }
    .board-row .right { flex-direction: column; align-items: flex-end; gap: 0.15rem; }
  }

  .board-foot { font-size: 0.78rem; color: var(--ink-45); margin: 0.9rem 0 0; line-height: 1.5; }

  /* ── Feature. One tool per hub that carries the section on its own.
        The Oddsmatcher is the whole job on the betting side, so it gets a
        surface, not a chip in a row of six. ─────────────────────────── */
  .hub-feature {
    display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
    flex-wrap: wrap; background: var(--surface); border: 2px solid var(--keyline);
    border-radius: var(--r-sm); box-shadow: var(--shadow-chip);
    margin: 0 5px 1.9rem 0; padding: 1.15rem 1.25rem; text-decoration: none; color: inherit;
  }
  .hub-feature:hover { background: var(--wash-2); }
  .hub-feature .body { min-width: 0; flex: 1 1 320px; }
  .hub-feature h2 {
    font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
    margin: 0 0 0.2rem; line-height: 1.15; color: var(--ink);
  }
  .hub-feature p { margin: 0; font-size: 0.92rem; color: var(--ink-60); max-width: 52ch; }
  .hub-feature .founders-badge {
    display: inline-block; background: var(--ink); color: #fff; margin-left: 0.45rem;
    font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: var(--r-sm);
    vertical-align: middle; position: relative; top: -4px;
  }

  .hub-feature .beta-badge {
    display: inline-block; background: var(--coral); color: #fff; margin-left: 0.45rem;
    font-family: var(--font-body); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: var(--r-sm);
    vertical-align: middle; position: relative; top: -4px;
  }

  /* ── 2. Numbers ─────────────────────────────────────────────── */
  .hub-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 1.9rem; }
  @media (max-width: 620px) { .hub-numbers { grid-template-columns: 1fr; } }
  .num-card {
    background: var(--surface); border: 2px solid var(--keyline); border-radius: var(--r-sm);
    padding: 0.9rem 1.05rem;
  }
  .num-card .cap {
    font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-45); margin-bottom: 0.55rem;
  }
  .num-set { display: flex; gap: 1.6rem; flex-wrap: wrap; }
  .num .lbl { display: block; font-size: 0.68rem; color: var(--ink-45); margin-bottom: 0.1rem; }
  .num .val {
    font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.1;
    font-variant-numeric: tabular-nums; color: var(--ink);
  }
  .num .val.pos { color: var(--positive-strong); }
  .num .val.neg { color: var(--negative-strong); }
  .num-card .prompt { font-size: 0.84rem; color: var(--ink-60); margin: 0; }
  .num-card .prompt a { color: var(--coral-dark); font-weight: 600; }
  .members-only .cap::after {
    content: 'Members'; margin-left: 0.4rem; background: var(--ink); color: #fff;
    font-size: 0.58rem; letter-spacing: 0.06em; padding: 0.08rem 0.35rem; border-radius: var(--r-sm);
  }

  /* ── 3. Rails ───────────────────────────────────────────────── */
  .rail { margin-bottom: 1.5rem; scroll-margin-top: 6rem; }
  .rail-cap {
    display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--rule); padding-bottom: 0.4rem; margin-bottom: 0.6rem;
  }
  .rail-cap h3 {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--ink-45); margin: 0;
  }
  .rail-cap .note { font-size: 0.82rem; color: var(--ink-45); margin: 0; }
  .rail-items { display: flex; flex-wrap: wrap; gap: 0.4rem; }
  .rail-item {
    background: var(--surface); border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 0.42rem 0.75rem; font-size: 0.88rem; font-weight: 600; color: var(--ink);
    text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease;
  }
  .rail-item:hover { border-color: var(--keyline); background: var(--wash-2); }
  .rail-item .founders-badge {
    display: inline-block; background: var(--ink); color: #fff; margin-left: 0.35rem;
    font-family: var(--font-body); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; padding: 0.08rem 0.35rem; border-radius: var(--r-sm);
    vertical-align: middle; position: relative; top: -1px;
  }

  .hub-cross {
    background: var(--wash-2); border: 1.5px solid var(--rule); border-radius: var(--r-sm);
    padding: 1rem 1.2rem; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-top: 2rem;
  }
  .hub-cross p { margin: 0; color: var(--ink-70); font-size: 0.95rem; }
  .hub-cross a {
    border: 1.5px solid var(--keyline); background: var(--surface); color: var(--ink);
    border-radius: var(--r-sm); padding: 0.42rem 0.85rem; text-decoration: none;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    white-space: nowrap;
  }
  .hub-cross a:hover { background: var(--wash); }