/* SEO guides: "Long Document" family from design.md. Tokens only. */
.seo-page-body { background: var(--color-paper); }
.seo-page-shell { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.seo-page-nav { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--color-line); }
.seo-page-nav-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-5); font-size: var(--text-sm); }
.seo-page-nav-links a,
.seo-page-breadcrumbs a,
.seo-page-footer a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-ink-soft); text-decoration: none; }
.seo-page-nav-links a:hover,
.seo-page-breadcrumbs a:hover,
.seo-page-footer a:hover { color: var(--color-accent); }
.seo-page-main { padding: clamp(var(--space-12), 6vw, 5rem) 0; }
.seo-page-hero { max-width: 48rem; }
.seo-page-eyebrow { margin: 0 0 var(--space-3); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }
.seo-page-title { max-width: 22ch; margin: 0; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -0.04em; line-height: 1.08; }
.seo-page-lede { max-width: 46rem; margin: var(--space-5) 0 0; color: var(--color-ink-soft); font-size: var(--text-lg); line-height: 1.7; }
.seo-page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.seo-page-note { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.seo-page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-12); }
.seo-page-card,
.seo-page-callout { padding: clamp(var(--space-5), 3vw, var(--space-8)); border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-surface); }
.seo-page-card h2,
.seo-page-card h3,
.seo-page-callout h2 { margin: 0 0 var(--space-2); font-size: var(--text-xl); letter-spacing: -0.03em; }
.seo-page-card p,
.seo-page-callout p { color: var(--color-ink-soft); line-height: 1.7; }
.seo-page-card p + a { margin-top: var(--space-3); }
.seo-page-card a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-accent); font-weight: 600; text-decoration: none; }
.seo-page-card a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.seo-page-callout { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: var(--space-10) 0; }
.seo-page-callout h2,
.seo-page-callout p { flex: 1 1 100%; }
.seo-page-callout p { margin-bottom: var(--space-2); }
.seo-page-content { max-width: 46rem; margin-top: var(--space-12); font-size: var(--text-md); }
.seo-page-content h2 { margin: var(--space-10) 0 var(--space-3); font-size: var(--text-2xl); letter-spacing: -0.035em; line-height: 1.2; }
.seo-page-content h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); }
.seo-page-content p,
.seo-page-content li { color: var(--color-ink-soft); line-height: 1.8; }
.seo-page-content p + p,
.seo-page-content p + ul,
.seo-page-content p + ol,
.seo-page-content ul + p,
.seo-page-content ol + p { margin-top: var(--space-4); }
.seo-page-content li + li { margin-top: var(--space-2); }
.seo-page-content ul,
.seo-page-content ol { padding-left: var(--space-5); }
.seo-page-content p a,
.seo-page-content li a { color: var(--color-accent); text-underline-offset: 0.2em; }
.seo-page-content table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: var(--space-5) 0 var(--space-8); font-size: var(--text-sm); }
.seo-page-content caption { padding: var(--space-3); color: var(--color-muted); text-align: left; }
.seo-page-content th,
.seo-page-content td { padding: var(--space-3); border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.seo-page-content thead th { background: var(--color-surface); color: var(--color-ink); }
.seo-page-content tbody th { font-weight: 600; }
.seo-page-content td { font-variant-numeric: tabular-nums; white-space: nowrap; }
.seo-page-content blockquote { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); border-left: 3px solid var(--color-accent); background: var(--color-surface); color: var(--color-ink); line-height: 1.7; }
.seo-page-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); margin-bottom: var(--space-4); color: var(--color-muted); font-size: var(--text-sm); }
.seo-page-faq { margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--color-line); }
.seo-page-faq details { border-bottom: 1px solid var(--color-line); }
.seo-page-faq summary { display: flex; min-height: 2.75rem; align-items: center; padding: var(--space-3) 0; cursor: pointer; font-weight: 600; }
.seo-page-faq summary:hover { color: var(--color-accent); }
.seo-page-faq details p { margin: 0 0 var(--space-4); }
.seo-page-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--color-line); color: var(--color-muted); font-size: var(--text-sm); }
.seo-page-footer span { flex: 1 1 100%; padding-top: var(--space-2); }
@media (max-width: 42rem) {
  .seo-page-nav { min-height: 4.25rem; }
  .seo-page-nav .brand > span:last-child { font-size: var(--text-sm); }
  .seo-page-nav-links { gap: 0 var(--space-3); font-size: var(--text-xs); }
  .seo-page-nav-links a:nth-child(2) { display: none; }
  .seo-page-grid { grid-template-columns: minmax(0, 1fr); }
}

/* On wide screens let tables use the full page shell instead of the 46rem reading column, so they never need horizontal scroll. */
@media (min-width: 60rem) {
  .seo-page-content table { display: table; width: min(100vw - 3rem, 72rem); max-width: none; }
  .seo-page-content td { white-space: normal; }
}