/* Same content rail as the header and the listing pages, so the breadcrumb
   lines up with the logo instead of floating in the middle of the viewport.
   The reading measure is capped on the children, not on the rail. */
.static-page {
  max-width: var(--rail);
  margin: 0 auto;
  padding: clamp(24px, 4vw, 44px) 0 16px;
}

.static-page-title {
  max-width: 820px;
  margin: 14px 0 24px;
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}

.static-page-body {
  max-width: 820px;
  color: var(--text-2);
  line-height: 1.7;
  font-size: 16px;
}

.static-page-body h2 {
  margin: 36px 0 12px;
  font-size: 22px;
  color: var(--text);
}

.static-page-body p,
.static-page-body ul {
  margin-bottom: 14px;
}

.static-page-body ul {
  padding-left: 22px;
}

.static-page-body li {
  margin-bottom: 6px;
}

.static-page-body a {
  color: var(--accent-ink);
  text-decoration-color: var(--accent-ring);
  text-underline-offset: 3px;
}

.static-page-body a:hover {
  text-decoration-color: currentColor;
}

/* Scoped to beat the generic `.static-page-body ul` indent. */
.static-page-body .contact-list {
  list-style: none;
  padding-left: 0;
}

.static-page-body .contact-list li {
  margin-bottom: 8px;
}

.contact-company,
.terms-updated {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* Hub page: brand and category link lists */
.static-page-body .hub-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.static-page-body .hub-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 0;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s var(--ease);
}

.static-page-body .hub-list li:hover {
  border-color: var(--accent-ring);
}

.static-page-body .hub-list a,
.static-page-body .hub-tree a {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.static-page-body .hub-list a:hover,
.static-page-body .hub-tree a:hover {
  color: var(--accent-ink);
}

.hub-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Categories carry their brands, so they stack instead of sitting in the
   fixed-width grid the flat brand list uses. */
.static-page-body .hub-tree {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.static-page-body .hub-tree > li {
  margin-bottom: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.hub-tree-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.static-page-body .hub-sublist {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.static-page-body .hub-sublist li {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 0;
  padding: 3px 12px;
  font-size: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.static-page-body .hub-sublist a {
  font-weight: 500;
}

@media (max-width: 768px) {
  .static-page {
    padding: 18px 0 16px;
  }
}