/* Snaplot marketing pages (comparison, use-case, keyword-landing, resource).
   Generic content styling used by page-marketing.php. */

.snap-mkpage { background: var(--snap-cream); }

.snap-mkpage__hero {
  background: linear-gradient(180deg, var(--snap-ivory) 0%, var(--snap-cream) 100%);
  padding: 80px 0 56px;
  text-align: center;
}
.snap-mkpage__title {
  font: 900 clamp(2.2rem, 5vw, 3.2rem)/1.05 var(--snap-font);
  letter-spacing: -.02em;
  margin: 12px auto 16px;
  max-width: 880px;
  color: var(--snap-navy);
}
.snap-mkpage__sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--snap-slate);
  margin: 0 auto;
  max-width: 720px;
}

.snap-mkpage__body { padding: 64px 0 96px; }
.snap-mkpage__container { max-width: 820px; }

/* Generic prose styling for HTML content */
.snap-mkpage__container h2 {
  font: 800 clamp(1.6rem, 3vw, 2rem)/1.15 var(--snap-font);
  margin: 48px 0 16px;
  color: var(--snap-navy);
  letter-spacing: -.01em;
}
.snap-mkpage__container h2:first-child { margin-top: 0; }
.snap-mkpage__container h3 {
  font: 700 1.25rem/1.3 var(--snap-font);
  margin: 32px 0 12px;
  color: var(--snap-navy);
}
.snap-mkpage__container p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--snap-slate);
  margin: 0 0 18px;
}
.snap-mkpage__container ul,
.snap-mkpage__container ol {
  margin: 0 0 24px;
  padding-left: 24px;
  color: var(--snap-slate);
  font-size: 17px;
  line-height: 1.65;
}
.snap-mkpage__container li { margin-bottom: 8px; }
.snap-mkpage__container li::marker { color: var(--snap-amber); }

.snap-mkpage__container strong { color: var(--snap-navy); }

.snap-mkpage__container a {
  color: var(--snap-amber-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.snap-mkpage__container a:hover { color: var(--snap-amber); }

/* Comparison table */
.snap-mkpage__container table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 32px;
  font-size: 16px;
  background: #fff;
  border-radius: var(--snap-radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(14,42,71,.06);
}
.snap-mkpage__container th,
.snap-mkpage__container td {
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--snap-border, #D6D2C5);
}
.snap-mkpage__container th {
  background: var(--snap-navy);
  color: var(--snap-ivory);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px;
}
.snap-mkpage__container tr:last-child td { border-bottom: 0; }
.snap-mkpage__container td.yes::before { content: "✓ "; color: var(--snap-success, #16A34A); font-weight: 700; }
.snap-mkpage__container td.no::before  { content: "✗ "; color: var(--snap-danger, #DC2626); font-weight: 700; }

/* Highlight boxes */
.snap-mkpage__container blockquote {
  border-left: 4px solid var(--snap-amber);
  background: #fff;
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 8px rgba(14,42,71,.04);
}
.snap-mkpage__container blockquote p { margin-bottom: 8px; }
.snap-mkpage__container blockquote p:last-child { margin-bottom: 0; }

/* Inline note callout */
.snap-mkpage__container .snap-note {
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  padding: 14px 18px;
  border-radius: 8px;
  font-size: 15px;
  margin: 16px 0 24px;
}

/* TL;DR / summary block (helps AEO/GEO extraction) */
.snap-mkpage__container .snap-tldr {
  background: #fff;
  border: 1px solid var(--snap-border);
  padding: 18px 22px;
  border-radius: 12px;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--snap-slate);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}
.snap-mkpage__container .snap-tldr strong { color: var(--snap-navy); }

/* FAQ block */
.snap-mkpage__container .snap-faq-q {
  font-weight: 700;
  color: var(--snap-navy);
  margin: 24px 0 6px;
  font-size: 18px;
}
.snap-mkpage__container .snap-faq-a { margin-bottom: 0; }

@media (max-width: 640px) {
  .snap-mkpage__hero { padding: 56px 0 40px; }
  .snap-mkpage__body { padding: 40px 0 64px; }
  .snap-mkpage__container { padding: 0 4px; }
  .snap-mkpage__container table { font-size: 14px; }
  .snap-mkpage__container th, .snap-mkpage__container td { padding: 10px 12px; }
}