/* 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: 1600px;
  margin: 0 auto;
  padding: 12px 24px 16px;
}

.static-page-title {
  max-width: 820px;
  font-size: 28px;
  color: #1a1a2e;
  margin: 8px 0 20px;
}

.static-page-body {
  max-width: 820px;
  color: #333;
  line-height: 1.7;
  font-size: 16px;
}

.static-page-body h2 {
  font-size: 20px;
  color: #1a1a2e;
  margin: 28px 0 10px;
}

.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: #c08a00;
}

/* 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 {
  color: #888;
  font-size: 14px;
}

/* 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;
  padding: 8px 12px;
  background: #faf8f3;
  border: 1px solid #eee6d6;
  border-radius: 6px;
  margin-bottom: 0;
}

.hub-count {
  color: #777;
  font-size: 14px;
  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 {
  padding: 10px 12px;
  background: #faf8f3;
  border: 1px solid #eee6d6;
  border-radius: 6px;
  margin-bottom: 0;
}

.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: 8px 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 10px;
  font-size: 14px;
  background: #fff;
  border: 1px solid #eee6d6;
  border-radius: 999px;
}

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