body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--color-paper);
  color: var(--color-charcoal);
}

.hub-header {
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-steel-light);
  background:
    linear-gradient(var(--color-paper-dim) 1px, transparent 1px),
    linear-gradient(90deg, var(--color-paper-dim) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hub-header-inner { max-width: 1040px; margin: 0 auto; }
.hub-kicker {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.hub-header h1 { margin: 0 0 var(--space-3); font-size: clamp(1.75rem, 4vw, 2.5rem); }
.hub-header p { margin: 0; max-width: 60ch; color: var(--color-graphite); }

.hub-main { max-width: 1040px; margin: 0 auto; padding: var(--space-7) var(--space-5); }

.hub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 860px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-graphite);
  background: var(--color-white);
  padding: var(--space-5);
  text-decoration: none; color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hub-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(27,31,35,0.1); }
.hub-card-num {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em;
  color: var(--color-accent); margin-bottom: var(--space-3);
}
.hub-card h2 { margin: 0 0 var(--space-2); font-size: 1.125rem; color: var(--color-charcoal); }
.hub-card p { margin: 0; font-size: 0.875rem; color: var(--color-graphite); flex: 1; }
.hub-card-cta {
  margin-top: var(--space-4); font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--color-accent-strong); font-weight: 600;
}

.hub-footer {
  max-width: 1040px; margin: 0 auto; padding: 0 var(--space-5) var(--space-7);
  font-size: 0.8125rem; color: var(--color-steel);
}
.hub-footer p { margin: 0 0 var(--space-2); }
.hub-footer p:last-child { margin-bottom: 0; font-family: var(--font-mono); }
.hub-footer a { color: var(--color-steel); }
.hub-footer a:hover { color: var(--color-accent-strong); }