/* ============================================================
   VividCharts — reference pages (VIV-12076)
   /compare/vividcharts-vs-performance-analytics/ and /glossary/*.
   Builds on styles.css tokens & components. Adds: breadcrumb, a text
   hero, the bordered answer callout that sits directly under each H1
   (the block answer engines quote), prose sections, the comparison
   table, the glossary card grid and related-term links.
   ============================================================ */

/* ---------- Breadcrumb (same treatment as about / case-study) ---------- */
.crumb { border-bottom: 1px solid var(--line); }
.crumb .wrap { display: flex; align-items: center; gap: 10px; padding-top: 18px; padding-bottom: 18px; font-size: 13px; font-weight: 500; color: var(--ink-3); flex-wrap: wrap; }
.crumb a { color: var(--ink-3); }
.crumb a:hover { color: var(--brand-strong); }
.crumb .sep { color: var(--line-strong); }
.crumb .cur { color: var(--ink); }

/* ---------- Hero ---------- */
.ref-hero { position: relative; padding: 72px 0 64px; overflow: hidden; }
.ref-hero .hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ref-hero .wrap { position: relative; z-index: 1; }
.ref-hero h1 {
  font-size: clamp(36px, 5vw, 60px);
  max-width: 20ch;
  margin: 20px 0 0;
}
.ref-hero h1 .accent { color: var(--brand); }
.ref-hero .lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--ink-2);
  max-width: 62ch;
  margin: 26px 0 0;
  line-height: 1.55;
}
.ref-hero .hero-actions { margin-top: 30px; }

/* The answer block: first text after the H1, bordered, no links inside. */
.ref-answer {
  margin: 28px 0 0;
  max-width: 68ch;
  padding: 22px 26px;
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink);
}
.ref-answer strong { font-weight: 700; }

/* ---------- Prose sections ---------- */
.ref-section { padding: 72px 0; }
.ref-section.ruled::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - (var(--gutter) * 2), var(--maxw));
  height: 1px;
  background: var(--line);
}
.ref-section h2 { font-size: clamp(28px, 3.2vw, 40px); max-width: 24ch; }
.ref-prose { max-width: 68ch; }
.ref-prose > * + * { margin-top: 18px; }
.ref-section h2 + .ref-prose { margin-top: 22px; }
.ref-prose p, .ref-prose li { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.ref-prose ul { margin: 0; padding-left: 1.2em; }
.ref-prose li + li { margin-top: 12px; }
.ref-prose li strong { color: var(--ink); }
.ref-prose a:not(.btn), .ref-link {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ref-prose a:not(.btn):hover, .ref-link:hover { color: var(--ink); }

/* ---------- Two column "built for" block ---------- */
.ref-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ref-col {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}
.ref-col h2 { font-size: 22px; max-width: none; }
.ref-col p { margin-top: 14px; font-size: 17px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Comparison table ---------- */
.ref-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.ref-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 16px; line-height: 1.5; }
.ref-table th, .ref-table td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.ref-table tr:last-child th, .ref-table tr:last-child td { border-bottom: 0; }
.ref-table thead th { background: var(--light-cream); font-family: var(--font-display); font-size: 16px; color: var(--ink); }
.ref-table tbody th { width: 30%; font-weight: 700; color: var(--ink); }
.ref-table td { color: var(--ink-2); }

/* ---------- Proof cards ---------- */
.ref-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.ref-proof-card {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
}
.ref-proof-card p { font-size: 17px; color: var(--ink-2); line-height: 1.6; }
.ref-proof-card p + p { margin-top: 16px; }
.ref-proof-card strong { color: var(--ink); }

/* ---------- FAQ ---------- */
.ref-faq { margin-top: 30px; max-width: 80ch; border-top: 1px solid var(--line); }
.ref-faq-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.ref-faq-item h3 { font-size: 20px; line-height: 1.3; }
.ref-faq-item p { margin-top: 10px; font-size: 17px; color: var(--ink-2); line-height: 1.6; }

/* ---------- Glossary index card grid ---------- */
.gl-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;
}
.gl-card { height: 100%; }
.gl-card a {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.gl-card a:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.gl-card h2 { font-size: 21px; line-height: 1.25; }
.gl-card p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }

/* ---------- Glossary related terms ---------- */
.gl-related { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gl-related a {
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  font-size: 15px; font-weight: 600; color: var(--ink);
}
.gl-related a:hover { border-color: var(--brand); color: var(--brand-strong); }
.ref-cta { margin-top: 30px; }
/* Term-specific CTA labels are long; .btn's nowrap pushes them past a 375 viewport. */
.ref-cta .btn { white-space: normal; max-width: 100%; text-align: left; }

@media (max-width: 860px) {
  .ref-cols, .ref-proof { grid-template-columns: 1fr; }
  .ref-hero { padding: 52px 0 48px; }
  .ref-section { padding: 56px 0; }
}

/* Related-terms heading on a glossary term page: smaller than a section H2. */
.ref-section h2.gl-related-head { font-size: 20px; margin-top: 44px; }