/* Shared by generated direct-entry pages and React SEO routes. */
body:has(.static-seo-page), .seo-page.seo-page {
  --ink:#191727; --muted:#625e73; --line:#e5e1ed; --paper:#faf9fc;
  --panel:#fff; --accent:#7054ce; --accent-ink:#fff; --soft:#f3effc; --chip:#f8f6fc;
}
html[data-theme="dark"] body:has(.static-seo-page), html[data-theme="dark"] .seo-page.seo-page {
  --ink:#f1edf9; --muted:#bdb5cc; --line:#3b344b; --paper:#15121b;
  --panel:#211c2a; --accent:#b9a3ff; --accent-ink:#20163e; --soft:#2c243e; --chip:#272030;
}
main.static-seo-page, .seo-page.seo-page {
  color:var(--ink); width:min(1120px,calc(100% - 48px)); max-width:1120px;
  margin:32px auto 48px; padding:0; display:grid; gap:24px;
}
body:has(.static-seo-page) .blog-footer { width:min(1120px,calc(100% - 48px)); }
.static-seo-page .static-seo-hero, .seo-page.seo-page .seo-hero {
  display:grid; grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr); gap:40px;
  align-items:center; max-width:none; padding:clamp(28px,4vw,48px);
  border:1px solid var(--line); border-radius:24px; box-shadow:none;
  background:linear-gradient(125deg,var(--panel) 50%,var(--soft));
}
.static-seo-page .static-seo-hero h1, .seo-page.seo-page .seo-hero h1 {
  color:var(--ink); font-size:clamp(32px,3.7vw,48px); line-height:1.12;
  font-weight:750; letter-spacing:-.04em; margin:18px 0; overflow-wrap:normal; text-wrap:balance;
}
.static-seo-page .pill, .seo-page.seo-page .eyebrow {
  background:var(--soft); border:1px solid var(--line); color:var(--accent);
  border-radius:999px; display:inline-flex; font-size:12px; font-weight:650;
  letter-spacing:.015em; padding:6px 12px;
}
.static-seo-page .summary, .seo-page.seo-page .seo-hero p {
  color:var(--muted); font-size:16px; font-weight:400; line-height:1.75; max-width:62ch; margin:0;
}
.static-seo-page .static-seo-actions, .seo-page.seo-page .seo-hero__actions {
  display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:24px 0 0;
}
.static-seo-page .static-seo-actions a, .seo-page.seo-page .seo-hero__actions a, .seo-page.seo-page .seo-hero__actions a.button {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:12px 18px; border:1px solid var(--line); border-radius:10px;
  background:var(--panel); color:var(--ink); font-size:14px; font-weight:650;
  line-height:1.4; text-decoration:none; box-shadow:none; white-space:normal;
}
.static-seo-page .static-seo-actions a:first-child, .seo-page.seo-page .seo-hero__actions a:first-child, .seo-page.seo-page .seo-hero__actions a.button:first-child {
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
}
.static-seo-page .static-seo-actions a:hover, .seo-page.seo-page .seo-hero__actions a:hover { filter:brightness(.95); }
.static-seo-page .seo-start-note, .seo-page.seo-page .seo-start-note {
  display:block; color:var(--muted); font-size:12px; line-height:1.6; margin:12px 0 0;
}
.static-seo-page .static-answer-card, .seo-page.seo-page .seo-session-card {
  align-self:center; padding:26px; border:1px solid var(--line); border-radius:18px;
  background:var(--panel); box-shadow:none; min-width:0;
}
.seo-card-label { color:var(--accent); display:block; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
.static-seo-page .static-answer-card h2, .seo-page.seo-page .seo-session-card h2 { color:var(--ink); font-size:22px; line-height:1.3; letter-spacing:-.025em; margin:0 0 22px; }
.seo-practice-steps { counter-reset:practice; display:grid; gap:22px; list-style:none; padding:0; margin:0; }
.seo-practice-steps li { counter-increment:practice; position:relative; padding-left:42px; margin:0; font-size:14px; line-height:1.5; }
.seo-practice-steps li::before { content:counter(practice); position:absolute; left:0; top:0; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--soft); color:var(--accent); font-weight:650; font-size:12px; }
.seo-practice-steps strong { display:block; color:var(--ink); font-weight:650; }
.seo-practice-steps span { display:block; color:var(--muted); font-size:13px; margin-top:4px; }
.static-seo-page .static-section-grid { gap:20px; }
.static-seo-page .static-section-grid section, .static-seo-page .static-seo-panel,
.seo-page.seo-page :is(.seo-answer-block,.seo-section) {
  border:1px solid var(--line); border-radius:18px; padding:28px;
  background:var(--panel); box-shadow:none; min-width:0;
}
.static-seo-page :is(.static-seo-panel,.static-section-grid) h2,
.seo-page.seo-page :is(.seo-section,.seo-answer-block) h2 { color:var(--ink); font-size:23px; letter-spacing:-.025em; line-height:1.3; margin:0 0 14px; }
.static-seo-page :is(.static-section-grid,.static-seo-panel) p,
.static-seo-page .static-section-grid li,
.seo-page.seo-page :is(.seo-section,.seo-answer-block,.seo-card) p { color:var(--muted); font-size:15px; line-height:1.75; }
.static-seo-page .static-section-grid p:last-child { margin-bottom:0; }
.static-seo-page .static-faq-list, .seo-page.seo-page .seo-faq-list { display:grid; gap:0; }
.static-faq-list details, .seo-faq-list details { border-bottom:1px solid var(--line); }
.static-faq-list details:last-child, .seo-faq-list details:last-child { border-bottom:0; }
.static-faq-list summary, .seo-faq-list summary { cursor:pointer; color:var(--ink); font-size:15px; font-weight:600; line-height:1.5; padding:18px 0; }
.static-faq-list details p, .seo-faq-list details p { margin:0 0 20px; max-width:80ch; }
.static-seo-page .static-faq-list article { padding:22px 0; border-top:1px solid var(--line); }
.static-seo-page .static-faq-list article h3 { font-size:18px; line-height:1.5; margin:10px 0; color:var(--ink); }
.static-seo-page .static-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.static-seo-page .static-related-grid a, .seo-page.seo-page .seo-link-grid a { background:var(--chip); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:14px; font-weight:550; line-height:1.6; padding:18px; box-shadow:none; }
.static-seo-page .topic-chip, .seo-page.seo-page .knowledge-tag-row span { background:var(--chip); border:1px solid var(--line); color:var(--muted); font-weight:450; font-size:12px; }
.seo-page.seo-page .seo-card { background:var(--chip); border:1px solid var(--line); border-radius:12px; box-shadow:none; }
.seo-page.seo-page .seo-card h3, .seo-page.seo-page .seo-link-grid strong { color:var(--ink); }
.seo-page.seo-page .seo-link-grid span { color:var(--muted); }
.static-seo-page .seo-conversion-band, .seo-page.seo-page .seo-conversion-band { background:var(--soft); border:1px solid var(--line); border-radius:20px; padding:32px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:32px; align-items:center; }
.seo-conversion-band h2 { color:var(--ink); font-size:clamp(24px,3vw,32px); line-height:1.25; letter-spacing:-.03em; max-width:26ch; margin:0 0 12px; text-wrap:balance; }
.seo-conversion-band p { color:var(--muted); font-size:15px; line-height:1.7; margin:0; max-width:55ch; }
.static-seo-page .seo-conversion-band .static-seo-actions, .seo-page.seo-page .seo-conversion-band .seo-hero__actions { margin:0; flex-direction:column; align-items:stretch; text-align:center; }
.static-seo-page :is(a,summary):focus-visible, .seo-page.seo-page :is(a,summary):focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media(max-width:900px) {
  .static-seo-page .static-seo-hero, .seo-page.seo-page .seo-hero { grid-template-columns:1fr; gap:28px; }
  .static-seo-page .static-section-grid { grid-template-columns:1fr; }
  .static-seo-page .static-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .seo-page.seo-page :is(.seo-card-grid,.seo-link-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  body:has(.static-seo-page) .blog-footer { width:calc(100% - 32px); }
  main.static-seo-page, .seo-page.seo-page { width:calc(100% - 32px); max-width:none; margin:20px auto 32px; gap:16px; }
  .static-seo-page .static-seo-hero, .seo-page.seo-page .seo-hero { padding:24px 20px; border-radius:18px; }
  .static-seo-page .static-seo-hero h1, .seo-page.seo-page .seo-hero h1 { font-size:32px; line-height:1.15; }
  .static-seo-page .static-seo-actions, .seo-page.seo-page .seo-hero__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  .static-seo-page .static-seo-actions a:first-child, .seo-page.seo-page .seo-hero__actions a:first-child { grid-column:1/-1; }
  .seo-page.seo-page .seo-hero__actions a:nth-child(2):last-child { grid-column:1/-1; }
  .static-seo-page .seo-conversion-band .static-seo-actions, .seo-page.seo-page .seo-conversion-band .seo-hero__actions { display:flex; }
  .static-seo-page .static-seo-actions a, .seo-page.seo-page .seo-hero__actions a { width:100%; }
  .static-seo-page :is(.static-answer-card,.static-seo-panel), .static-seo-page .static-section-grid section, .seo-page.seo-page :is(.seo-section,.seo-answer-block,.seo-session-card) { padding:22px 20px; }
  .static-seo-page .seo-conversion-band, .seo-page.seo-page .seo-conversion-band { grid-template-columns:1fr; gap:20px; padding:24px 20px; }
  .static-seo-page .static-related-grid { grid-template-columns:1fr; }
  .seo-page.seo-page :is(.seo-card-grid,.seo-link-grid) { grid-template-columns:1fr; }
}

/* Worked examples use the same readable sections during app navigation. */
.seo-page.seo-page .seo-content-sections { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.seo-page.seo-page .seo-content-sections > section { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:28px; min-width:0; }
.seo-page.seo-page .seo-content-sections h2 { color:var(--ink); font-size:23px; line-height:1.3; letter-spacing:-.025em; margin:0 0 14px; }
.seo-page.seo-page .seo-content-sections :is(p,li) { color:var(--muted); font-size:15px; line-height:1.75; }
.seo-page.seo-page .seo-content-sections li { margin-bottom:10px; }
.static-seo-page .static-answer-card .seo-preview-prompt, .seo-page.seo-page .seo-session-card .seo-preview-prompt { color:var(--ink); font-size:20px; line-height:1.5; font-weight:600; margin:0 0 16px; }
.static-seo-page .static-answer-card > p:not(.seo-preview-prompt) { color:var(--muted); font-size:14px; line-height:1.7; }
.seo-page.seo-page .table-scroll { overflow-x:auto; max-width:100%; }
.seo-page.seo-page table { width:100%; border-collapse:collapse; font-size:14px; line-height:1.6; }
.seo-page.seo-page :is(th,td) { padding:12px; border:1px solid var(--line); text-align:left; vertical-align:top; }
.seo-page.seo-page caption { text-align:left; color:var(--muted); margin-bottom:12px; }
.seo-page.seo-page .seo-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.seo-page.seo-page .seo-section li { color:var(--muted); line-height:1.75; }
@media(max-width:900px) { .seo-page.seo-page .seo-content-sections { grid-template-columns:1fr; } }
@media(max-width:600px) {
  .seo-page.seo-page .seo-content-sections { gap:16px; }
  .seo-page.seo-page .seo-content-sections > section { padding:22px 20px; }
  .seo-page.seo-page .seo-link-grid { grid-template-columns:1fr; }
}