/* ════════════════════════════════════════════════════════════════════
   ScanSheet SEO article pages — Stripe / Linear blog style.
   Three-column layout on desktop (TOC + article + aside),
   single column with collapsible TOC on mobile.
   ════════════════════════════════════════════════════════════════════ */

:root {
  color: #0f1f24;
  background: #f7f9fa;
  font-family: Inter, "SF Pro Text", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  --color-text: #0f1f24;
  --color-text-soft: #2f3d46;
  --color-muted: #5d6f7a;
  --color-soft: #8a99a5;
  --color-accent: #147f72;
  --color-accent-strong: #0f6b5f;
  --color-accent-soft: rgba(20, 127, 114, 0.08);
  --color-accent-line: rgba(20, 127, 114, 0.18);
  --color-line: #e4eaee;
  --color-line-soft: #eef2f5;
  --color-bg: #f7f9fa;
  --color-panel: #ffffff;
  --color-tip: #a37223;
  --color-warn: #b54a3b;
  /* Shared content axis — every major section (hero, article, blocks, FAQ,
     related, CTA) is laid out against this same width so the page has one
     consistent vertical rhythm and the hero text aligns with the article
     column below. */
  --content-width: 760px;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-feature-settings: "ss01", "cv11";
}

/* ──────────────────────────────────────────────────────────────────
   Page shell — left-aligned. The article starts at the page's left
   edge instead of being centered. On wide screens the right side
   stays empty so the eye has space to breathe (Linear/Stripe style).
   ────────────────────────────────────────────────────────────────── */

.seo-page {
  max-width: 1280px;
  margin: 0;
  padding: 40px 40px 96px;
}

@media (max-width: 720px) {
  .seo-page {
    padding: 24px 20px 80px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Header — brand + breadcrumb. Compact, secondary to the hero.
   ────────────────────────────────────────────────────────────────── */

.seo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 680;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-soft);
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumb a:focus {
  text-decoration: underline;
}

.breadcrumb span[aria-hidden="true"] {
  color: #c5d0d8;
  font-weight: 500;
}

.breadcrumb [aria-current="page"] {
  color: var(--color-muted);
  font-weight: 500;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ──────────────────────────────────────────────────────────────────
   Hero — kept compact and editorial. h1 is no longer giant.
   ────────────────────────────────────────────────────────────────── */

.seo-hero {
  margin: 32px 0 0;
  max-width: var(--content-width);
  padding: 44px 48px 36px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}

.seo-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: -120px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle at center, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.seo-hero > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 720px) {
  .seo-hero {
    margin-top: 24px;
    padding: 28px 22px 24px;
    border-radius: 12px;
  }
  .seo-hero::before {
    width: 220px;
    height: 220px;
    right: -80px;
    top: -40px;
  }
}

.eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.72rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.seo-hero h1 {
  margin: 0 0 16px;
  font-size: clamp(1.55rem, 2.8vw, 2.2rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-text);
}

.seo-hero .lede {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--color-muted);
  font-size: 1.075rem;
  line-height: 1.6;
}

.seo-hero .hero-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin: 18px 0 22px;
  color: var(--color-soft);
  font-size: 0.85rem;
}

.seo-hero .hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.seo-hero .hero-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c5d0d8;
}

.primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 20px;
  border-radius: 9px;
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: -0.005em;
  transition: background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 180ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 0 rgba(15, 31, 36, 0.04);
}

.primary:hover,
.primary:focus {
  background: var(--color-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(20, 127, 114, 0.18);
}

.primary .arrow {
  display: inline-block;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.primary:hover .arrow {
  transform: translateX(2px);
}

/* ──────────────────────────────────────────────────────────────────
   Article body — left-aligned article + right-side TOC/aside panel.
   ────────────────────────────────────────────────────────────────── */

.seo-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 48px;
  margin-top: 40px;
  align-items: start;
}

.seo-article {
  max-width: var(--content-width);
  margin: 0;
  width: 100%;
  padding: 40px 48px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  color: var(--color-text);
  font-size: 1.05rem;
  line-height: 1.72;
}

.seo-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
  align-self: start;
}

@media (max-width: 1180px) {
  .seo-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .seo-side {
    position: static;
  }
}

@media (max-width: 880px) {
  .seo-body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .seo-article {
    padding: 28px 24px;
  }
}

.seo-article > * + * {
  margin-top: 1.2em;
}

.seo-h2 {
  margin: 1.8em 0 0.55em;
  font-size: 1.55rem;
  font-weight: 680;
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--color-text);
  scroll-margin-top: 24px;
}

.seo-h2:first-child {
  margin-top: 0;
}

.seo-h3 {
  margin: 1.6em 0 0.4em;
  font-size: 1.18rem;
  font-weight: 640;
  line-height: 1.38;
  letter-spacing: -0.008em;
  color: var(--color-text);
}

.seo-p {
  margin: 0;
  color: var(--color-text-soft);
  font-size: 1.05rem;
  line-height: 1.72;
}

.seo-p a {
  color: var(--color-accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--color-accent-line);
}

.seo-p a:hover {
  text-decoration-color: var(--color-accent);
}

.seo-ul,
.seo-ol {
  margin: 0;
  padding-left: 1.4em;
  color: var(--color-text-soft);
}

.seo-ul li,
.seo-ol li {
  margin: 0.55em 0;
  color: var(--color-text-soft);
  line-height: 1.7;
}

.seo-ul li::marker {
  color: var(--color-accent);
}

/* ──────────────────────────────────────────────────────────────────
   TOC — sticky left sidebar on desktop, collapsible block on mobile.
   ────────────────────────────────────────────────────────────────── */

.seo-toc {
  padding: 20px 18px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font-size: 0.86rem;
}

.seo-toc h2 {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-soft);
}

.seo-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-counter;
}

.seo-toc li {
  counter-increment: toc-counter;
  margin: 0;
}

.seo-toc a {
  display: block;
  padding: 7px 9px;
  border-radius: 6px;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.42;
  border-left: 2px solid transparent;
  transition: color 160ms, background 160ms, border-color 160ms;
}

.seo-toc a::before {
  content: counter(toc-counter, decimal-leading-zero) " ";
  color: var(--color-soft);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

.seo-toc a:hover,
.seo-toc a:focus {
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
}

.seo-toc a.is-active {
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  border-left-color: var(--color-accent);
  font-weight: 600;
}

/* Mobile TOC — collapsible details block at the top of the article. */
.seo-toc-mobile {
  display: none;
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-size: 0.9rem;
}

@media (max-width: 880px) {
  .seo-toc-mobile {
    display: block;
  }
  .seo-toc-desktop {
    display: none;
  }
}

.seo-toc-mobile summary {
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.seo-toc-mobile summary::-webkit-details-marker {
  display: none;
}

.seo-toc-mobile summary::after {
  content: "+";
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 600;
}

.seo-toc-mobile[open] summary::after {
  content: "−";
}

.seo-toc-mobile ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: toc-m-counter;
}

.seo-toc-mobile li {
  counter-increment: toc-m-counter;
  margin: 0;
}

.seo-toc-mobile a {
  display: block;
  padding: 8px 6px;
  color: var(--color-muted);
  text-decoration: none;
  border-top: 1px solid var(--color-line-soft);
}

.seo-toc-mobile a::before {
  content: counter(toc-m-counter, decimal-leading-zero) " ";
  color: var(--color-soft);
  font-variant-numeric: tabular-nums;
  margin-right: 4px;
}

/* ──────────────────────────────────────────────────────────────────
   Right aside — quick facts / reading time / cta mini block.
   ────────────────────────────────────────────────────────────────── */

.seo-aside {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.seo-aside-card {
  padding: 20px 18px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font-size: 0.88rem;
}

.seo-aside-card h3 {
  margin: 0 0 12px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-soft);
}

.seo-aside-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.seo-aside-card dt {
  color: var(--color-soft);
  font-size: 0.78rem;
  font-weight: 500;
}

.seo-aside-card dd {
  margin: 0 0 2px;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.92rem;
}

.seo-aside-cta {
  padding: 22px 20px;
  background: linear-gradient(155deg, #0f6b5f 0%, #147f72 100%);
  color: #ffffff;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.seo-aside-cta::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14), transparent 70%);
  pointer-events: none;
}

.seo-aside-cta h3 {
  position: relative;
  margin: 0 0 8px;
  font-size: 1.02rem;
  font-weight: 660;
  letter-spacing: -0.005em;
}

.seo-aside-cta p {
  position: relative;
  margin: 0 0 14px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.86rem;
  line-height: 1.5;
}

.seo-aside-cta .primary {
  position: relative;
  background: #ffffff;
  color: var(--color-accent-strong);
  width: 100%;
  justify-content: center;
  box-shadow: 0 1px 0 rgba(15, 31, 36, 0.06);
}

.seo-aside-cta .primary:hover {
  background: rgba(255, 255, 255, 0.94);
  color: var(--color-accent-strong);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

/* ──────────────────────────────────────────────────────────────────
   Callout (info / tip / warn).
   ────────────────────────────────────────────────────────────────── */

.seo-callout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 1.6em 0;
  padding: 16px 20px;
  border-radius: 10px;
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-soft);
  color: #1f3540;
  font-size: 1rem;
  line-height: 1.65;
}

.seo-callout strong {
  flex-shrink: 0;
  color: var(--color-accent-strong);
  font-weight: 700;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding-top: 3px;
}

.seo-callout span {
  flex: 1;
  min-width: 0;
}

.seo-callout-tip {
  border-left-color: var(--color-tip);
  background: rgba(211, 157, 73, 0.08);
}

.seo-callout-tip strong {
  color: var(--color-tip);
}

.seo-callout-warn {
  border-left-color: var(--color-warn);
  background: rgba(181, 74, 59, 0.06);
}

.seo-callout-warn strong {
  color: var(--color-warn);
}

/* ──────────────────────────────────────────────────────────────────
   Table — Stripe/Linear comparison style. First column bolded,
   zebra rows, hover highlight, sticky header, horizontal scroll.
   ────────────────────────────────────────────────────────────────── */

.seo-table-wrap {
  margin: 1.6em 0;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--color-line);
  background: var(--color-panel);
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.seo-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: #ffffff;
  font-size: 0.93rem;
  table-layout: auto;
}

.seo-table thead th {
  background: #f3f7f8;
  color: var(--color-text);
  font-weight: 640;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
  position: sticky;
  top: 0;
  z-index: 1;
  white-space: nowrap;
}

.seo-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--color-line-soft);
  color: var(--color-text-soft);
  vertical-align: top;
  line-height: 1.55;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.seo-table tbody tr:last-child td {
  border-bottom: none;
}

.seo-table tbody tr:nth-child(even) td {
  background: #fafcfd;
}

.seo-table tbody tr:hover td {
  background: var(--color-accent-soft);
}

.seo-table td:first-child,
.seo-table th:first-child {
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.seo-table tbody td:not(:first-child) {
  color: var(--color-muted);
  font-weight: 500;
}

/* ──────────────────────────────────────────────────────────────────
   Code / quote.
   ────────────────────────────────────────────────────────────────── */

.seo-code {
  margin: 1.2em 0;
  padding: 14px 16px;
  background: #0f1f24;
  color: #d6efe9;
  border-radius: 8px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.55;
}

.seo-quote {
  margin: 1.4em 0;
  padding: 6px 0 6px 18px;
  border-left: 3px solid var(--color-accent);
  color: var(--color-muted);
  font-style: italic;
  font-size: 1.02rem;
}

.seo-quote p {
  margin: 0;
}

/* ──────────────────────────────────────────────────────────────────
   Video block.
   ────────────────────────────────────────────────────────────────── */

.seo-video {
  max-width: var(--content-width);
  width: 100%;
  margin: 32px 0 0;
}

.seo-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #0f1f24;
  border: 1px solid var(--color-line);
  box-shadow: 0 6px 24px rgba(15, 31, 36, 0.08);
}

.seo-video-frame-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, var(--color-accent-soft), transparent 60%),
    radial-gradient(circle at 80% 80%, var(--color-accent-soft), transparent 60%),
    linear-gradient(155deg, #f7fbf9 0%, #eef5f2 100%);
  border-color: var(--color-accent-line);
}

.seo-video-placeholder-inner {
  text-align: center;
  padding: 24px;
  max-width: 520px;
}

.seo-video-placeholder-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #ffffff;
  margin-bottom: 16px;
  box-shadow: 0 8px 20px rgba(20, 127, 114, 0.22);
}

.seo-video-placeholder-title {
  margin: 0 0 6px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.005em;
}

.seo-video-placeholder-text {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.seo-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.seo-video video {
  display: block;
  width: 100%;
  max-height: 60vh;
  border-radius: 12px;
  border: 1px solid var(--color-line);
  background: #0f1f24;
}

.seo-video-caption {
  margin: 12px 4px 0;
  color: var(--color-soft);
  font-size: 0.85rem;
}

/* ──────────────────────────────────────────────────────────────────
   Highlights grid (the 3 product highlights above the article body).
   ────────────────────────────────────────────────────────────────── */

.seo-highlights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: var(--content-width);
  margin: 28px auto 0;
}

.seo-highlights article {
  padding: 22px 22px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 12px;
  transition: border-color 200ms, transform 200ms;
}

.seo-highlights article:hover {
  border-color: var(--color-accent-line);
  transform: translateY(-1px);
}

.seo-highlights strong {
  display: block;
  color: var(--color-text);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.42;
  letter-spacing: -0.005em;
}

.seo-highlights span {
  display: block;
  margin-top: 8px;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 720px) {
  .seo-highlights {
    grid-template-columns: 1fr;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Use cases panel + how it works panel.
   ────────────────────────────────────────────────────────────────── */

.seo-block {
  max-width: var(--content-width);
  margin: 24px 0 0;
  padding: 28px 32px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
}

@media (max-width: 720px) {
  .seo-block {
    padding: 22px 20px;
    border-radius: 12px;
  }
}

.seo-block h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.seo-block ul,
.seo-block ol {
  margin: 0;
  padding-left: 1.2em;
  color: var(--color-text-soft);
}

.seo-block li {
  margin: 0.5em 0;
  line-height: 1.65;
}

.seo-block .columns-2 {
  columns: 2;
  column-gap: 36px;
}

@media (max-width: 720px) {
  .seo-block .columns-2 {
    columns: 1;
  }
}

/* ──────────────────────────────────────────────────────────────────
   FAQ — native <details>.
   ────────────────────────────────────────────────────────────────── */

.seo-faq {
  max-width: var(--content-width);
  margin: 24px auto 0;
  padding: 28px 32px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
}

@media (max-width: 720px) {
  .seo-faq {
    padding: 22px 20px;
    border-radius: 12px;
  }
}

.seo-faq h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.seo-faq > p {
  margin: 0 0 16px;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.seo-faq details {
  border-top: 1px solid var(--color-line);
  padding: 16px 0;
}

.seo-faq details:last-of-type {
  border-bottom: 1px solid var(--color-line);
}

.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-text);
  font-size: 1rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  letter-spacing: -0.005em;
}

.seo-faq summary::-webkit-details-marker {
  display: none;
}

.seo-faq summary::after {
  content: "+";
  color: var(--color-accent-strong);
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 500;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.seo-faq details[open] summary::after {
  content: "−";
}

.seo-faq details[open] summary {
  margin-bottom: 12px;
}

.seo-faq details p {
  margin: 0;
  color: var(--color-muted);
  line-height: 1.7;
  font-size: 0.97rem;
}

/* ──────────────────────────────────────────────────────────────────
   Related reading.
   ────────────────────────────────────────────────────────────────── */

.seo-related {
  max-width: var(--content-width);
  margin: 24px 0 0;
  padding: 28px 32px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
}

@media (max-width: 720px) {
  .seo-related {
    padding: 22px 20px;
    border-radius: 12px;
  }
}

.seo-related h2 {
  margin: 0 0 6px;
  font-size: 1.15rem;
  font-weight: 660;
  letter-spacing: -0.005em;
  color: var(--color-text);
}

.seo-related > p {
  margin: 0 0 14px;
  color: var(--color-muted);
  font-size: 0.92rem;
}

.seo-related ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 720px) {
  .seo-related ul {
    grid-template-columns: 1fr;
  }
}

.seo-related li {
  margin: 0;
  padding: 0;
}

.seo-related a {
  display: block;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-line);
  border-radius: 9px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
  line-height: 1.42;
  letter-spacing: -0.005em;
  transition: border-color 160ms, color 160ms, background 160ms, transform 160ms;
}

.seo-related a:hover,
.seo-related a:focus {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
  transform: translateY(-1px);
}

/* ──────────────────────────────────────────────────────────────────
   Final CTA.
   ────────────────────────────────────────────────────────────────── */

.seo-cta-final {
  max-width: var(--content-width);
  margin: 36px 0 0;
  padding: 48px 48px 44px;
  background: linear-gradient(155deg, #f1faf7 0%, #ffffff 65%);
  color: var(--color-text);
  border: 1px solid var(--color-accent-line);
  border-radius: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.seo-cta-final::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
}

.seo-cta-final::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, var(--color-accent-soft), transparent 70%);
  pointer-events: none;
}

.seo-cta-final > * {
  position: relative;
}

.seo-cta-final h2 {
  margin: 0 0 12px;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--color-text);
  line-height: 1.25;
}

.seo-cta-final p {
  max-width: 480px;
  margin: 0 auto 24px;
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.seo-cta-final .primary {
  background: var(--color-accent);
  color: #ffffff;
  box-shadow: 0 1px 0 rgba(15, 31, 36, 0.06);
}

.seo-cta-final .primary:hover,
.seo-cta-final .primary:focus {
  background: var(--color-accent-strong);
  color: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 127, 114, 0.28);
}

@media (max-width: 720px) {
  .seo-cta-final {
    padding: 36px 24px 32px;
    border-radius: 14px;
  }
}

/* ──────────────────────────────────────────────────────────────────
   Mobile refinements.
   ────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .seo-h2 {
    font-size: 1.4rem;
    line-height: 1.3;
  }
  .seo-h3 {
    font-size: 1.1rem;
  }
  .seo-callout {
    flex-direction: column;
    gap: 6px;
    padding: 14px 18px;
  }
  .seo-table thead th,
  .seo-table tbody td {
    padding: 11px 14px;
  }
  .seo-related a,
  .seo-faq summary,
  .seo-block h2,
  .seo-faq h2 {
    font-size: 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-faq summary::after,
  .primary,
  .seo-highlights article,
  .seo-related a {
    transition: none;
  }
}