.seo-page { margin: 0; }
.seo-header, .seo-main, .seo-footer { width: min(1120px, calc(100% - 48px)); margin-inline: auto; }
.seo-header { position: static; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 28px; border-bottom: 1px solid var(--border, #2a2d2e); }
.seo-header nav { display: flex; align-items: center; gap: 24px; }
.seo-page a { color: inherit; text-decoration: none; }
.seo-page a:hover { color: #d4f77d; }
.seo-page a:focus-visible, .search-entry-points a:focus-visible { outline: 2px solid #d4f77d; outline-offset: 5px; }
.seo-main { padding-block: 24px 64px; }
.seo-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #92999d; font-size: 13px; padding-block: 12px; }
.seo-intro { max-width: 880px; padding-block: 32px; }
.seo-intro h1 { font-size: clamp(32px, 5vw, 56px); letter-spacing: -.04em; line-height: 1.12; margin: 18px 0; overflow-wrap: anywhere; }
.seo-page p, .seo-page li { color: #b3b9bd; line-height: 1.75; }
.seo-page h2 { font-size: 22px; line-height: 1.35; letter-spacing: -.025em; }
.seo-advice, .seo-note, .seo-sources { padding: 24px; border: 1px solid #2b3033; border-radius: 14px; background: #15191b; margin-bottom: 32px; }
.seo-advice h2, .seo-note h2, .seo-sources h2 { margin: 0 0 12px; }
.seo-advice p, .seo-note p, .seo-sources p { margin-block: 12px; }
.seo-advice ul { padding-left: 20px; }
.seo-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.seo-section-heading span, .seo-category-card > span { color: #92999d; font-size: 13px; }
.seo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.seo-card, .seo-category-card { border: 1px solid #2b3033; border-radius: 12px; padding: 22px; background: #15191b; min-width: 0; overflow-wrap: anywhere; }
.seo-card { display: flex; align-items: flex-start; gap: 14px; }
.seo-card .project-logo { width: 40px; height: 40px; flex: 0 0 40px; }
.seo-card h3 { margin: 0 0 8px; font-size: 17px; }
.seo-card p { font-size: 13px; margin: 0 0 16px; }
.seo-card-links, .seo-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 13px; }
.seo-card-links a, .seo-actions a, .seo-sources a, .seo-note a { color: #d4f77d; }
.seo-category-card h2 { margin-top: 0; }
.seo-category-card p { font-size: 14px; }
.seo-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 28px; color: #b3b9bd; font-size: 14px; }
.seo-related { margin-top: 40px; }
.seo-category-links { display: flex; flex-wrap: wrap; gap: 12px; }
.seo-category-links a { border: 1px solid #2b3033; border-radius: 8px; padding: 12px 16px; font-size: 14px; }
.seo-product-meta { display: flex; align-items: center; gap: 16px; color: #92999d; font-size: 14px; }
.seo-screenshot { margin: 0 0 32px; max-width: 880px; }
.seo-screenshot img { width: 100%; max-height: 480px; object-fit: contain; border: 1px solid #2b3033; border-radius: 14px; background: #15191b; }
.seo-screenshot figcaption { color: #92999d; font-size: 12px; margin-top: 10px; }
.seo-detail-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.seo-footer { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; color: #92999d; font-size: 13px; border-top: 1px solid #2b3033; padding-block: 28px; }
.search-entry-points { padding-block: 28px; border-top: 1px solid #2b3033; }
.search-entry-points h2 { font-size: 18px; margin-bottom: 16px; }
.search-entry-points p { color: #92999d; font-size: 14px; line-height: 1.65; }
.search-entry-points nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.search-entry-points a { color: #b3b9bd; text-decoration: none; border: 1px solid #2b3033; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
.search-entry-points a:hover { color: #d4f77d; border-color: #d4f77d; }
.project-card[href] { text-decoration: none; color: inherit; }
.intro { flex-wrap: wrap; }
.intro > div { min-width: 0; }
.intro h1 { white-space: normal; }
.intro-description { flex: 1 1 240px; max-width: 320px; min-width: 0; }
@media (max-width: 900px) { .seo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .seo-header, .seo-main, .seo-footer { width: calc(100% - 32px); }
  .seo-header { flex-wrap: wrap; gap: 18px; padding-block: 22px; }
  .seo-header nav { justify-content: space-between; width: 100%; gap: 16px; font-size: 14px; }
  .seo-grid, .seo-detail-columns { grid-template-columns: minmax(0, 1fr); }
  .seo-intro { padding-block: 20px; }
  .seo-advice, .seo-note, .seo-sources, .seo-card, .seo-category-card { padding: 18px; }
  .seo-pagination { font-size: 12px; gap: 8px; }
  .seo-pagination .secondary-button { padding: 10px; font-size: 12px; }
  .seo-header .wordmark { font-size: 24px; }
}