/* =====================================================================
   Xonware SEO patch — additions to existing premium.css
   Append the contents of this file to your existing premium.css OR
   include it as a separate stylesheet AFTER premium.css.
   Uses v4.6 light-theme variables — does NOT introduce dark theme.
   ===================================================================== */

/* ---- Breadcrumbs ---- */
.breadcrumbs {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ink-300, #64748B);
  margin-bottom: 24px;
  letter-spacing: 0.04em;
}
.breadcrumbs a {
  color: var(--ink-500, #475569);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.breadcrumbs a:hover { border-bottom-color: var(--leaf-500, #8BC53F); }
.breadcrumbs span { margin: 0 8px; color: var(--ink-300, #94A3B8); }

/* ---- Feature lists (long-form SEO content) ---- */
.feature-list {
  list-style: none;
  padding: 0;
  margin: 24px 0;
  display: grid;
  gap: 14px;
}
.feature-list li {
  padding-left: 28px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700, #334155);
}
.feature-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 14px;
  background: var(--leaf-500, #8BC53F);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(139,197,63,.15);
}
.feature-list strong { color: var(--ink-900, #0F172A); }

.ordered-list {
  padding-left: 0;
  list-style: none;
  counter-reset: ol;
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.ordered-list li {
  counter-increment: ol;
  padding-left: 48px;
  position: relative;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-700, #334155);
}
.ordered-list li::before {
  content: counter(ol, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  font-family: var(--mono, monospace);
  font-size: 13px;
  font-weight: 500;
  color: var(--leaf-500, #8BC53F);
  letter-spacing: 0.04em;
}
.ordered-list strong { color: var(--ink-900, #0F172A); }

/* ---- Comparison grid ---- */
.comparison-grid {
  margin-top: 32px;
  border: 1px solid var(--line-200, #E2E8F0);
  border-radius: 12px;
  overflow: hidden;
}
.comp-row {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 0;
  border-bottom: 1px solid var(--line-200, #E2E8F0);
}
.comp-row:last-child { border-bottom: none; }
.comp-row > div {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--ink-700, #334155);
  border-right: 1px solid var(--line-200, #E2E8F0);
  display: flex;
  align-items: center;
}
.comp-row > div:last-child { border-right: none; }
.comp-row > div:first-child { background: rgba(248,250,252,.5); font-weight: 500; }
.comp-row--head > div {
  background: var(--ink-900, #0F172A);
  color: white;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.comp-row--head > div:first-child { background: var(--ink-900, #0F172A); }
@media (max-width: 768px) {
  .comparison-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .comp-row { min-width: 720px; }
}

/* When grid has only 2 data cols (e.g. XIMS vs Splynx) */
.comp-row:has(> div:nth-child(3):last-child) {
  grid-template-columns: 1.4fr 1fr 1fr;
}

/* ---- FAQ accordion ---- */
.faq {
  border-top: 1px solid var(--line-200, #E2E8F0);
  padding: 20px 0;
}
.faq:last-of-type { border-bottom: 1px solid var(--line-200, #E2E8F0); }
.faq summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-900, #0F172A);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 16px;
}
.faq summary::after {
  content: '+';
  font-family: var(--mono, monospace);
  font-size: 22px;
  color: var(--leaf-500, #8BC53F);
  transition: transform .25s;
  font-weight: 300;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary::-webkit-details-marker { display: none; }
.faq p {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-700, #475569);
}

/* ---- CTA strip ---- */
.cta-strip {
  background: linear-gradient(135deg, var(--ink-900, #1A237E) 0%, var(--navy-700, #2A3CC9) 100%);
  color: white;
  padding: 40px 48px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.cta-strip h3 {
  color: white;
  font-size: 26px;
  margin: 0;
  letter-spacing: -0.02em;
}
.cta-strip p {
  color: rgba(255,255,255,.85);
  font-size: 16px;
  margin: 0 0 16px;
  max-width: 56ch;
}
.cta-strip .btn {
  background: var(--leaf-500, #8BC53F);
  color: var(--ink-900, #0F172A);
  font-weight: 500;
}
.cta-strip .btn:hover { background: white; }
@media (max-width: 600px) {
  .cta-strip { padding: 32px 24px; }
  .cta-strip h3 { font-size: 22px; }
}

/* ---- Blog list ---- */
.blog-list {
  display: grid;
  gap: 24px;
  max-width: 820px;
}
.blog-card {
  display: block;
  padding: 32px;
  border: 1px solid var(--line-200, #E2E8F0);
  border-radius: 16px;
  background: white;
  text-decoration: none;
  transition: transform .35s, border-color .35s, box-shadow .35s;
}
.blog-card:hover {
  transform: translateY(-2px);
  border-color: var(--leaf-500, #8BC53F);
  box-shadow: 0 12px 32px -12px rgba(139,197,63,.25);
}
.blog-card__date {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: var(--ink-400, #64748B);
  letter-spacing: 0.04em;
}
.blog-card__title {
  margin: 12px 0 10px;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink-900, #0F172A);
  letter-spacing: -0.01em;
}
.blog-card__desc {
  font-size: 15px;
  color: var(--ink-600, #475569);
  line-height: 1.55;
  margin: 0;
}
.blog-card__tags {
  margin-top: 16px;
  font-family: var(--mono, monospace);
  font-size: 11px;
  color: var(--leaf-700, #5A8A1F);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

/* ---- Blog post content ---- */
.blog-post {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-700, #334155);
}
.blog-post h2 {
  margin-top: 56px;
  margin-bottom: 18px;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ink-900, #0F172A);
}
.blog-post h3 {
  margin-top: 40px;
  margin-bottom: 14px;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--ink-900, #0F172A);
}
.blog-post p { margin-bottom: 20px; }
.blog-post strong { color: var(--ink-900, #0F172A); font-weight: 500; }
.blog-post ul {
  margin: 20px 0;
  padding-left: 24px;
}
.blog-post ul li {
  margin-bottom: 10px;
}
.blog-post a {
  color: var(--leaf-700, #5A8A1F);
  text-decoration: none;
  border-bottom: 1px solid rgba(139,197,63,.4);
  transition: border-color .2s;
}
.blog-post a:hover { border-bottom-color: var(--leaf-500, #8BC53F); }
.blog-post code {
  background: rgba(248,250,252,.8);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: var(--mono, monospace);
  font-size: 0.92em;
  color: var(--navy-700, #2A3CC9);
}