/* Typography and layout for generated SEO pages. */
.site-header--static { position: static; }

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: #101014;
  color: #f5f5f7;
  border-radius: 6px;
}

.page-shell {
  max-width: 74ch;
  margin: 0 auto;
  padding: 2rem 1.25rem 6rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  font-size: 0.82rem;
  color: #8a8a93;
}
.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.5rem;
  color: #4a4a52;
}
.breadcrumbs a { color: #8a8a93; text-decoration: none; }
.breadcrumbs a:hover { color: #f5f5f7; }

.page-shell h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1.5rem;
}
.page-shell h2 {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  margin: 3rem 0 1rem;
}
.page-shell h3 { font-size: 1.05rem; margin: 2rem 0 0.5rem; }
.page-shell p { line-height: 1.75; color: #c8c8d0; margin: 0 0 1.25rem; }
.page-shell ul { line-height: 1.75; color: #c8c8d0; padding-left: 1.25rem; }
.page-shell li { margin-bottom: 0.5rem; }

.page-lede { font-size: 1.1rem; color: #e4e4ea; }

.stack-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; }
.stack-tags li {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #2a2a32;
  border-radius: 999px;
  color: #a8a8b2;
  margin: 0;
}

.page-facts {
  display: grid;
  gap: 1.5rem;
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid #22222a;
  border-radius: 12px;
}
@media (min-width: 620px) {
  .page-facts { grid-template-columns: 1fr 1fr; }
}
.page-facts h3 { margin: 0 0 0.35rem; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a93; }
.page-facts p { margin: 0; }

.faq-item { border-top: 1px solid #22222a; padding: 1.25rem 0; }
.faq-item h3 { margin: 0 0 0.5rem; font-size: 1rem; color: #f5f5f7; }
.faq-item p { margin: 0; }

.related-grid { display: grid; gap: 1rem; padding: 0; list-style: none; margin: 1.5rem 0 0; }
@media (min-width: 620px) {
  .related-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
.related-grid a {
  display: block;
  padding: 1rem;
  border: 1px solid #22222a;
  border-radius: 10px;
  text-decoration: none;
  color: #f5f5f7;
  height: 100%;
}
.related-grid a:hover { border-color: #3a3a44; }
.related-grid span { display: block; font-size: 0.85rem; color: #8a8a93; margin-top: 0.35rem; line-height: 1.5; }

.page-cta {
  margin-top: 3.5rem;
  padding: 2rem;
  border: 1px solid #22222a;
  border-radius: 12px;
  text-align: center;
}

.hub-index { display: grid; gap: 1rem; padding: 0; list-style: none; }
@media (min-width: 620px) {
  .hub-index { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
.hub-index a {
  display: block;
  padding: 1.1rem;
  border: 1px solid #22222a;
  border-radius: 10px;
  text-decoration: none;
  color: #f5f5f7;
  height: 100%;
}
.hub-index a:hover { border-color: #3a3a44; }
.hub-index span { display: block; font-size: 0.85rem; color: #8a8a93; margin-top: 0.35rem; line-height: 1.5; }