/* Mid-page conversion row (partials/hx-cta-strip), Oct 20 evening, Batch 5 C2.
   Self-contained so it looks the same on every page, including the Webflow-based product pages and /library.
   Brand: ink #110A33, gold #FFC61E, gold 300 #FFE8A5, mist #F6F4FF. Pill buttons match the page heroes (.hx-btn). */
.hxcta { box-sizing: border-box; padding: 32px 24px; text-align: center; font-family: Manrope, "Manrope Fallback", Arial, sans-serif; color: #110A33; clear: both; width: 100%; flex: 0 0 100%; }
.hxcta *, .hxcta *::before, .hxcta *::after { box-sizing: border-box; }
.hxcta--white { background: #fff; }
.hxcta--mist { background: #F6F4FF; }
.hxcta--bare { background: transparent; padding: 48px 0 0; }
.hxcta-in { max-width: 720px; margin: 0 auto; }
.hxcta-line { margin: 0 auto 28px; max-width: 34em; font: 700 clamp(20px, 2vw, 24px)/1.25 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; letter-spacing: -.01em; color: #110A33; text-wrap: balance; }
.hxcta-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; }
.hxcta .hx-btn { display: inline-flex; align-items: center; gap: 11px; min-height: 50px; border-radius: 999px; font: 700 16px/1 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; text-decoration: none; white-space: nowrap; margin: 0; cursor: pointer; transition: background-color .15s, color .15s, transform .16s cubic-bezier(.23, 1, .32, 1); }
.hxcta .hx-btn-primary, .hxcta .hx-btn-primary:visited { background: #FFC61E; color: #110A33; padding: 7px 26px 7px 7px; border: 0; }
.hxcta .hx-btn-primary:hover { background: #FFE8A5; color: #110A33; transform: translateY(-1px); }
.hxcta .hx-btn-ic { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #110A33; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: transform .2s cubic-bezier(.23, 1, .32, 1); }
.hxcta .hx-btn-primary:hover .hx-btn-ic { transform: translateX(3px); }
.hxcta .hx-btn-ghost, .hxcta .hx-btn-ghost:visited { background: transparent; color: #110A33; padding: 0 24px; border: 1.5px solid #110A33; }
.hxcta .hx-btn-ghost:hover { background: #110A33; color: #fff; }
.hxcta .hx-btn:active { transform: scale(.96); }
.hxcta .hx-btn:focus-visible { outline: 2px solid #341D99; outline-offset: 3px; }
@media (max-width: 520px) {
  .hxcta { padding: 32px 16px; }
  .hxcta--bare { padding: 40px 0 0; }
  .hxcta-row { flex-direction: column; align-items: stretch; }
  .hxcta .hx-btn { width: 100%; justify-content: center; }
  .hxcta .hx-btn-primary { padding: 7px 16px 7px 7px; }
}
@media (prefers-reduced-motion: reduce) { .hxcta .hx-btn, .hxcta .hx-btn-ic { transition: none; } .hxcta .hx-btn:hover, .hxcta .hx-btn:active { transform: none; } }
/* MOBILE-B (Oct 21): the two buttons share a row on phones (stack only below 360px), less air around the line */
@media (max-width: 767px) {
  .hxcta { padding: 24px 16px; }
  .hxcta-line { margin-bottom: 24px; font-size: 20px; }
}
@media (min-width: 360px) and (max-width: 520px) {
  .hxcta-row { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 8px; }
  .hxcta .hx-btn { flex: 1 1 auto; width: auto; min-width: 0; gap: 8px; justify-content: center; }
  .hxcta .hx-btn-primary { padding: 7px 14px 7px 7px; }
  .hxcta .hx-btn-ghost { padding: 0 16px; }
}