/* ============================================================
   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 charcoal (#181B1F) and ink.
   ============================================================ */

/* Answer-page strip: sits right after the direct/quick-answer block. */
.vp-cta-strip {
  margin: 18px auto 22px;
  padding: 14px 16px;
  border: 1px solid #DFE0E0;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: var(--font-body, "DM Sans","DM Sans Fallback","DM Sans Fallback Android",system-ui,-apple-system,"Segoe UI",sans-serif);
  text-align: left;
  max-width: 720px;
}
/* A strip placed straight in <body> takes the column gutter instead of touching the screen edge. */
body > .vp-cta-strip { width: calc(100% - 48px); }
.vp-cta-strip-q { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #181B1F; 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: #505358; line-height: 1.4; }

.vp-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 20px;
  font-family: var(--font-body, "DM Sans","DM Sans Fallback","DM Sans Fallback Android",system-ui,-apple-system,"Segoe UI",sans-serif);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; letter-spacing: .01em;
  border-radius: 10px; text-decoration: none; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.vp-cta-primary { background: #181B1F; color: #FFFFFF; border: 1.5px solid #181B1F; }
.vp-cta-primary:hover { background: #33373C; border-color: #33373C; color: #FFFFFF; }
.vp-cta-secondary { background: transparent; color: #33373C; border: 1.5px solid #BFC1C2; }
.vp-cta-secondary:hover { border-color: #181B1F; color: #181B1F; }
.vp-cta-btn:focus-visible { outline: 3px solid #181B1F; outline-offset: 2px; }

/* Dark-background variant: only a strip explicitly marked .vp-cta-strip--dark. */
.vp-cta-strip--dark { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .22); }
.vp-cta-strip--dark .vp-cta-strip-q { color: #FFFFFF; }
.vp-cta-strip--dark .vp-cta-strip-note { color: #C8CBCD; }
.vp-cta-strip--dark .vp-cta-secondary { color: #FFFFFF; border-color: rgba(255, 255, 255, .7); }
.vp-cta-strip--dark .vp-cta-secondary:hover { color: #FFFFFF; border-color: #FFFFFF; background: rgba(255, 255, 255, .08); }
.vp-cta-strip--dark .vp-cta-btn:focus-visible { outline-color: #FFFFFF; }
@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: #17191B;
  border-top: 2px solid #17191B;
  transform: translateY(110%);
  transition: transform .22s ease-out;
  font-family: var(--font-body, "DM Sans","DM Sans Fallback","DM Sans Fallback Android",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: #F5F5F5; border-color: rgba(245,245,245, .35); }
.vp-sticky .vp-cta-secondary:hover { color: #FFFFFF; border-color: #F5F5F5; }
@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; }