/* ============================================================
   VIADOR — CTA strip + mobile sticky bar (conversion package 2026-10-25)
   ------------------------------------------------------------
   Self-contained: pages load styles.css, home.css or their own inline
   styles, so nothing here depends on a page's tokens. Colors are the
   site's olive (#6B745E) and ink (#141210).
   ============================================================ */

/* Answer-page strip: sits right after the direct/quick-answer block. */
.vp-cta-strip {
  margin: 18px 0 22px;
  padding: 14px 16px;
  border: 1px solid rgba(107, 116, 94, .28);
  border-radius: 10px;
  background: rgba(107, 116, 94, .07);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: left;
  max-width: 720px;
}
.vp-cta-strip-q { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #141210; line-height: 1.35; }
.vp-cta-strip-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.vp-cta-strip-note { margin: 9px 0 0; font-size: 12.5px; color: #52504C; line-height: 1.4; }

.vp-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 16px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14.5px; font-weight: 600; line-height: 1.2; text-align: center;
  border-radius: 8px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.vp-cta-primary { background: #6B745E; color: #FFFFFF; border: 1.5px solid #6B745E; }
.vp-cta-primary:hover { background: #454D3D; border-color: #454D3D; color: #FFFFFF; }
.vp-cta-secondary { background: transparent; color: #141210; border: 1.5px solid rgba(20, 18, 16, .25); }
.vp-cta-secondary:hover { border-color: #6B745E; color: #141210; }
.vp-cta-btn:focus-visible { outline: 3px solid #6B745E; outline-offset: 2px; }
@media (max-width: 480px) {
  .vp-cta-strip-btns .vp-cta-btn { flex: 1 1 100%; }
}

/* Mobile sticky bar: injected by /js/cta.js below 720px only. */
.vp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #141210;
  border-top: 2px solid #6B745E;
  transform: translateY(110%);
  transition: transform .22s ease-out;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vp-sticky.is-on { transform: translateY(0); }
.vp-sticky .vp-cta-btn { flex: 1 1 0; min-width: 0; font-size: 14px; padding: 10px 8px; }
.vp-sticky .vp-cta-primary { flex-grow: 1.6; }
.vp-sticky .vp-cta-secondary { color: #F4F5F3; border-color: rgba(244, 245, 243, .35); }
.vp-sticky .vp-cta-secondary:hover { color: #FFFFFF; border-color: #F4F5F3; }
@media (min-width: 720px) { .vp-sticky { display: none; } }
@media (prefers-reduced-motion: reduce) { .vp-sticky { transition: none; } }
html.vp-sticky-on body { padding-bottom: 72px; }