/* ==========================================================================
   vs.css — shared styles for JotPsych competitor comparison pages (vs-*.html)
   Loaded after style.css. Brand tokens (--midnight, --sunset, etc.) come from
   style.css :root. Keep page bodies lean — all vs-page styling lives here.
   ========================================================================== */

/* ---- Hero ---- */
.vs-hero { padding: 140px 0 72px; background: var(--warm); }
.vs-eyebrow {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 0.6875rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--midnight);
  background: rgba(28,30,133,0.08); padding: 8px 16px; border-radius: 99px; margin-bottom: 24px;
}
.vs-hero h1 {
  font-family: 'Archivo', sans-serif; font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: 700; color: var(--deep); line-height: 1.1; margin-bottom: 24px;
}
.vs-hero h1 em { font-style: italic; color: var(--afterglow); }
.vs-hero-verdict {
  font-family: 'Inter', sans-serif; font-size: 1.125rem; color: var(--text);
  line-height: 1.7; max-width: 680px; margin-bottom: 32px;
}
.vs-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---- Generic section ---- */
.vs-section { padding: 72px 0; border-top: 1px solid var(--border); }
.vs-section h2 {
  font-family: 'Archivo', sans-serif; font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; color: var(--deep); margin-bottom: 16px;
}
.vs-section h2 em { font-style: italic; color: var(--afterglow); }
.vs-section-lead {
  font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.75;
  color: var(--text-muted); margin-bottom: 8px; max-width: 680px;
}

/* ---- Feature showcase (the heart of the page) ---- */
.vs-showcase-eyebrow {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 0.6875rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--afterglow);
  background: rgba(129,63,232,0.08); padding: 8px 16px; border-radius: 99px; margin-bottom: 20px;
}
.vs-feature-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 32px 0 0;
}
.vs-feature-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px 26px;
}
.vs-feature-card-icon {
  width: 44px; height: 44px; border-radius: 12px; background: rgba(28,30,133,0.06);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.vs-feature-card-icon svg { width: 22px; height: 22px; }
.vs-feature-card h3 {
  font-family: 'Archivo', sans-serif; font-size: 1.0625rem; font-weight: 700;
  color: var(--deep); margin-bottom: 8px; line-height: 1.3;
}
.vs-feature-card p {
  font-family: 'Inter', sans-serif; font-size: 0.9375rem; color: var(--text-muted);
  line-height: 1.6;
}
.vs-feature-card .vs-tag {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 0.6875rem;
  font-weight: 700; color: var(--afterglow); margin-top: 12px; letter-spacing: 0.02em;
}

/* ---- Comparison table (tight) ---- */
.vs-table-wrap { overflow-x: auto; margin: 32px 0 0; }
.vs-table { width: 100%; border-collapse: collapse; font-family: 'Inter', sans-serif; font-size: 0.9375rem; }
.vs-table th {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 0.875rem; text-align: left;
  padding: 14px 20px; background: var(--warm); color: var(--deep); border-bottom: 2px solid var(--border);
}
.vs-table th.jp-col { background: rgba(28,30,133,0.05); }
.vs-table td { padding: 14px 20px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text); line-height: 1.5; }
.vs-table td.jp-col { background: rgba(28,30,133,0.03); font-weight: 500; }
.vs-table tr:last-child td { border-bottom: none; }
.vs-yes { color: #166534; font-weight: 600; }
.vs-no { color: #991B1B; }
.vs-partial { color: #854D0E; }

/* ---- Honest note ("where they may fit better") ---- */
.vs-note {
  background: var(--white); border: 1px solid var(--border); border-left: 4px solid var(--text-muted);
  border-radius: var(--radius); padding: 28px 32px; max-width: 760px;
}
.vs-note h3 { font-family: 'Archivo', sans-serif; font-size: 1.125rem; font-weight: 700; color: var(--deep); margin-bottom: 10px; }
.vs-note p { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.7; color: var(--text); }

/* ---- Quotes ---- */
.vs-quote { border-left: 3px solid var(--sunset); padding: 0 0 0 28px; margin: 28px 0 0; max-width: 760px; }
.vs-quote p { font-family: 'Archivo', sans-serif; font-style: italic; font-size: 1.0625rem; line-height: 1.55; color: var(--deep); margin-bottom: 10px; }
.vs-quote cite { font-family: 'Inter', sans-serif; font-style: normal; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.vs-quote cite a { color: var(--midnight); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Citations ---- */
.vs-cite { font-size: 0.75rem; color: var(--text-muted, #6B7280); font-style: normal; margin-left: 4px; }
.vs-cite a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---- "Works with any EHR / replace it" band (mirrors homepage) ---- */
.vs-ehr-band { background: var(--midnight); color: #fff; padding: 96px 0; }
.vs-ehr-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.vs-ehr-eyebrow {
  display: inline-block; font-family: 'Archivo', sans-serif; font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--sunset);
  background: rgba(253,150,201,0.12); padding: 8px 16px; border-radius: 99px; margin-bottom: 24px;
}
.vs-ehr-band h2 { font-family: 'Archivo', sans-serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.12; margin-bottom: 20px; }
.vs-ehr-band h2 em { font-style: italic; color: var(--sunset); }
.vs-ehr-band p { font-family: 'Inter', sans-serif; font-size: 1.0625rem; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 640px; margin: 0 auto 32px; }
.vs-ehr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 36px; }
.vs-ehr-pill {
  font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  padding: 8px 16px; border-radius: 99px;
}
.vs-ehr-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Final CTA ---- */
.final-cta { padding: 96px 0; background: linear-gradient(135deg, var(--midnight) 0%, var(--deep) 60%, var(--afterglow) 100%); text-align: center; }
.final-cta h2 { font-family: 'Archivo', sans-serif; font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: #fff; margin-bottom: 16px; }
.final-cta p { font-family: 'Inter', sans-serif; font-size: 1.125rem; color: rgba(255,255,255,0.78); max-width: 540px; margin: 0 auto 32px; line-height: 1.65; }
.final-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Responsive ---- */
@media (max-width: 960px) {
  .vs-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .vs-hero { padding: 112px 0 56px; }
  .vs-feature-grid { grid-template-columns: 1fr; }
  .vs-hero-actions { flex-direction: column; align-items: flex-start; }
  .vs-note { padding: 24px; }
}