/* Extra components for the static, crawlable landing pages and guides.
   Builds on the di-* / svc-* design system in the main stylesheet. */
body {
  --navy: #00548B; --navy-d: #00436f; --sky: #22A8E0; --ink: #0f2942;
  --muted: #5a6b7d; --soft: #3d4f60; --line: #e3ecf3;
  --ring: 0 1px 2px rgba(15,41,66,.04), 0 12px 32px -24px rgba(0,84,139,.35);
  margin: 0; background: #fff; color: var(--ink);
  font-family: 'IBM Plex Sans', sans-serif; -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth }

/* Breadcrumb */
.seo-crumbs { margin: 0 0 1.25rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; font-size: .8125rem; color: var(--muted) }
.seo-crumbs li + li:before { content: "/"; margin-right: .375rem; color: #b5c4d2 }
.seo-crumbs a { color: var(--navy); text-decoration: none }
.seo-crumbs a:hover { text-decoration: underline }

/* Comparison table */
.seo-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--ring) }
.seo-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .9375rem; line-height: 1.55 }
.seo-table caption { padding: 1rem 1.25rem; text-align: left; font-size: .8125rem; color: var(--muted); caption-side: bottom; border-top: 1px solid var(--line) }
.seo-table th, .seo-table td { padding: .9375rem 1.25rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line) }
.seo-table thead th { background: #f6f9fc; font-size: .8125rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--soft) }
.seo-table tbody th { font-weight: 600; color: var(--ink); width: 26% }
.seo-table td { color: var(--muted) }
.seo-table .is-us { background: rgba(34,168,224,.06); color: var(--ink); font-weight: 500 }
.seo-table thead .is-us { background: var(--navy); color: #fff }
.seo-table tr:last-child th, .seo-table tr:last-child td { border-bottom: 0 }

/* Card grid for benefits / features */
.seo-grid { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0,1fr) }
@media (min-width: 720px) { .seo-grid { grid-template-columns: repeat(2, minmax(0,1fr)) } }
@media (min-width: 1024px) { .seo-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)) } }
.seo-card { padding: 1.625rem 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--ring) }
.seo-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: 1rem; border-radius: 12px; color: var(--navy); background: linear-gradient(135deg, rgba(34,168,224,.16), rgba(0,84,139,.1)); font-size: 1.0625rem }
.seo-card__title { margin: 0 0 .5rem; font-size: 1.0625rem; font-weight: 700; color: var(--ink) }
.seo-card__text { margin: 0; font-size: .9375rem; line-height: 1.7; color: var(--muted) }

/* Long-form guide typography */
.seo-prose { max-width: 46rem; margin: 0 auto; font-size: 1.0625rem; line-height: 1.8; color: var(--soft) }
.seo-prose h2 { margin: 3rem 0 1rem; font-size: clamp(1.45rem, 2.6vw, 1.875rem); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; color: var(--ink) }
.seo-prose h3 { margin: 2rem 0 .625rem; font-size: 1.1875rem; font-weight: 700; color: var(--ink) }
.seo-prose p { margin: 0 0 1.25rem }
.seo-prose ul, .seo-prose ol { margin: 0 0 1.5rem; padding-left: 1.375rem }
.seo-prose li { margin-bottom: .5rem }
.seo-prose a { color: var(--navy); text-underline-offset: 2px }
.seo-prose strong { color: var(--ink) }
.seo-toc { margin: 0 0 2.5rem; padding: 1.375rem 1.5rem; border: 1px solid var(--line); border-radius: 14px; background: #f6f9fc }
.seo-toc__title { margin: 0 0 .625rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted) }
.seo-toc ol { margin: 0; padding-left: 1.25rem; font-size: .9375rem }
.seo-meta { margin: 1.25rem 0 0; font-size: .875rem; color: var(--muted) }

/* Related links (re-uses svc-links cards) */
.seo-related { margin-top: 0 }

/* Footer link columns */
.seo-foot { padding: 3.5rem 0 2rem; border-top: 1px solid var(--line); background: #f6f9fc; font-size: .9375rem }
.seo-foot__cols { display: grid; gap: 2rem; grid-template-columns: minmax(0,1fr) }
@media (min-width: 720px) { .seo-foot__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr } }
.seo-foot__brand p { margin: .875rem 0 0; max-width: 22rem; line-height: 1.7; color: var(--muted) }
.seo-foot__title { margin: 0 0 .875rem; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink) }
.seo-foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem }
.seo-foot a { color: var(--soft); text-decoration: none }
.seo-foot a:hover { color: var(--navy); text-decoration: underline }
.seo-foot__base { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted) }