/* ════════════════════════════════════════════════════════════════════
   TapLoop Arcade SEO article pages — Stripe / Linear blog style.
   Three-column layout on desktop (TOC + article + aside),
   single column with collapsible TOC on mobile.
   Palette reuses the arcade's teal accent (#167267) so the article
   pages feel like a natural part of the same product.
   ════════════════════════════════════════════════════════════════════ */

: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: #167267;
  --color-accent-strong: #0e5a52;
  --color-accent-soft: rgba(22, 114, 103, 0.08);
  --color-accent-line: rgba(22, 114, 103, 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: 10px;
  color: var(--color-text);
  font-size: 0.98rem;
  font-weight: 680;
  letter-spacing: -0.005em;
  text-decoration: none;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(155deg, #167267 0%, #0e5a52 100%);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: -0.02em;
  box-shadow: 0 1px 0 rgba(15, 31, 36, 0.06);
}

.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 auto 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;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.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);
  border: 0;
  cursor: pointer;
}

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

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

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

.secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 9px;
  background: transparent;
  color: var(--color-text);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  letter-spacing: -0.005em;
  border: 1px solid var(--color-line);
  transition: border-color 180ms, background 180ms, color 180ms;
}

.secondary:hover,
.secondary:focus {
  border-color: var(--color-accent);
  color: var(--color-accent-strong);
  background: var(--color-accent-soft);
}

/* ──────────────────────────────────────────────────────────────────
   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 right 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: "\2212";
}

.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 {
  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, #0e5a52 0%, #167267 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;
}

/* ──────────────────────────────────────────────────────────────────
   Highlights grid (the 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 / "Who is this for" 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: "\2212";
}

.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(22, 114, 103, 0.28);
}

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

/* ──────────────────────────────────────────────────────────────────
   Footer.
   ────────────────────────────────────────────────────────────────── */

.seo-footer {
  max-width: var(--content-width);
  margin: 56px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--color-soft);
  font-size: 0.85rem;
}

.seo-footer p {
  margin: 0;
}

.seo-footer a {
  color: var(--color-muted);
  text-decoration: none;
}

.seo-footer a:hover,
.seo-footer a:focus {
  color: var(--color-accent-strong);
  text-decoration: underline;
}

.seo-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* ──────────────────────────────────────────────────────────────────
   Guides index page — card grid for /guides.
   ────────────────────────────────────────────────────────────────── */

.guides-grid {
  max-width: var(--content-width);
  margin: 32px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

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

.guide-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px;
  background: var(--color-panel);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  overflow: hidden;
  transition: border-color 180ms, transform 180ms, box-shadow 180ms;
}

.guide-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 130px;
  height: 130px;
  background: radial-gradient(circle at top right, var(--game-accent, var(--color-accent-soft)), transparent 70%);
  opacity: 0.45;
  pointer-events: none;
}

.guide-card > * {
  position: relative;
}

.guide-card:hover,
.guide-card:focus {
  border-color: var(--game-accent, var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 31, 36, 0.06);
}

.guide-eyebrow {
  display: inline-block;
  align-self: flex-start;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-strong);
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.guide-card h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-text);
}

.guide-card p {
  margin: 0;
  color: var(--color-muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.guide-bullets {
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guide-bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--color-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.guide-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--game-accent, var(--color-accent));
}

.guide-cta {
  margin-top: 6px;
  color: var(--color-accent-strong);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────────────────────────
   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,
  .guide-card {
    transition: none;
  }
}