/* Shared blocks (Website V2, Oct 16 2026): hx-start3, hx-voices, hx-compare, hx-trust and the
   slow auto-scroll row. Self-contained so it works on hx pages and old Webflow pages alike.
   Locked brand: gold, gold 300, ink, mist, cream, slate, white (lavender only for small chips).
   4px scale, 24px corners, pill buttons, fixed shadows. Contract: page-builds/shared/CONTRACT.md */
.hxb { --ink:#110A33; --gold:#FFC61E; --gold3:#FFE8A5; --violet:#341D99; --mist:#F6F4FF; --cream:#FFF4D2; --slate:#5B6478; --line:rgba(17,10,51,.12);
  --sh-sm:0 2px 8px rgba(17,10,51,.08); --sh-md:0 12px 32px -12px rgba(17,10,51,.22);
  --ease:cubic-bezier(.23,1,.32,1); --disp:"Cabinet Grotesk",Cabinetgrotesk,Arial,sans-serif;
  padding:clamp(64px,8vw,96px) 16px; background:#fff; color:var(--ink); font:400 16px/1.6 Manrope,Arial,sans-serif; text-align:center; scroll-margin-top:96px; }
.hxb *, .hxb *::before, .hxb *::after { box-sizing:border-box; }
.hxb--mist { background:var(--mist); } .hxb--cream { background:var(--cream); } .hxb--none { background:transparent; }
.hxb-wrap { max-width:1200px; margin:0 auto; }
/* Doubled class (0,3,0) so a page reset like `.page h2 { margin:0 }` or `:where()` rules can't pin
   the shared headings left or restyle them. */
.hxb.hxb .hxb-h2 { margin:0 auto 12px; max-width:22ch; text-align:center; font:700 clamp(27px,3.4vw,44px)/1.12 var(--disp); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.hxb.hxb .hxb-sub { margin:0 auto 48px; text-align:center; max-width:60ch; font-size:17.5px; font-weight:400; line-height:28px; color:var(--slate); text-wrap:pretty; }
.hxb.hxb .hxb-h2 + :not(.hxb-sub) { margin-top:36px; }
.hxb.hxb .hxb-h2w { margin:0 auto 12px; text-align:center; text-wrap:balance; } /* Webflow pages: the page's own h2 type */
.hxb h3 { margin:0; font:700 19px/1.12 var(--disp); letter-spacing:-.01em; color:inherit; text-wrap:balance; }
.hxb p { margin:0; }
.hxb a { color:inherit; }
.hxb :focus-visible { outline:2px solid var(--violet); outline-offset:3px; border-radius:8px; }
.hxb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* Pill buttons */
.hxb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:12px 24px; border-radius:999px; border:1.5px solid transparent;
  font:700 16px/1 var(--disp); text-decoration:none; white-space:nowrap; cursor:pointer; transition:transform .16s var(--ease), background-color .2s, color .2s, box-shadow .2s; }
.hxb-btn:active { transform:scale(.96); }
.hxb .hxb-btn--gold { background:var(--gold); color:var(--ink); }
.hxb .hxb-btn--line { background:transparent; border-color:var(--ink); color:var(--ink); }
@media (hover:hover) and (pointer:fine) {
  .hxb .hxb-btn--gold:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }
  .hxb .hxb-btn--line:hover { background:var(--ink); color:#fff; }
}
.hxb-link { font-weight:800; text-decoration:none; background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat; padding-bottom:2px; }
.hxb-link:hover { background-size:100% 100%; }

/* One-time reveal (only when blocks.js runs; no JS = everything visible) */
[data-hxb-rv] > * { opacity:0; transform:translateY(16px); transition:opacity .7s var(--ease), transform .7s var(--ease); transition-delay:calc(var(--n,0) * 90ms); }
[data-hxb-rv].is-in > * { opacity:1; transform:none; }

/* hx-start3: three ways to get started (Oct 19 redesign, opus-three-ways). One compact panel, three
   paths split by hairlines (no cards, no cream, no dark trio): try it (the one gold action), talk to
   us (outline pill), still unsure (a text link). Subgrid keeps the three headings, lines and actions
   on shared rows, so the actions sit on one line however long a description runs. */
.hxb.hxb.hxb-s3 .hxb-h2 + .hxb-s3__panel { margin-top:24px; }
.hxb-s3__panel { max-width:1120px; margin-inline:auto; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto auto auto;
  text-align:left; border-radius:24px; background:var(--mist); }
.hxb--mist .hxb-s3__panel, .hxb--cream .hxb-s3__panel { background:#fff; box-shadow:var(--sh-sm); }
.hxb-s3__path { grid-row:span 3; display:grid; grid-template-rows:subgrid; row-gap:0; min-width:0; padding:32px; }
.hxb-s3__path + .hxb-s3__path { border-inline-start:1px solid var(--line); }
.hxb.hxb-s3 h3 { font-size:20px; line-height:26px; color:var(--ink); }
.hxb .hxb-s3__path > p { margin-top:8px; max-width:36ch; font-size:15px; line-height:22px; color:var(--slate); text-wrap:pretty; }
.hxb-s3__path > :last-child { align-self:center; justify-self:start; margin-top:24px; }
.hxb-s3__path--try > :last-child { justify-self:stretch; }
.hxb-s3 .hxb-btn { min-height:44px; padding:10px 22px; }
/* Trial form: one pill holding the email field and the gold button */
.hxb-s3__form { position:relative; max-width:480px; width:100%; min-width:0; }
.hxb-s3__field { display:flex; gap:4px; padding:4px; background:#fff; border:1px solid var(--line); border-radius:999px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.hxb-s3__field:focus-within { border-color:var(--ink); outline:2px solid var(--violet); outline-offset:2px; }
/* width:0 keeps the input's native width out of the column sizing, so field + button stay inside the column */
.hxb.hxb-s3 .hxb-s3__field input { flex:1 1 0; width:0; min-width:0; height:44px; padding:0 8px 0 16px; border-radius:999px; background:transparent; font:500 16px Manrope,Arial,sans-serif; color:var(--ink); }
/* border !important: old Webflow page scripts paint a red/green inline border-bottom on every email input (off-brand) */
.hxb-s3 .hxb-s3__field input { border:0 !important; }
.hxb-s3__field input::placeholder { color:#6B7385; opacity:1; }
.hxb.hxb-s3 .hxb-s3__field input:focus, .hxb.hxb-s3 .hxb-s3__field input:focus-visible { outline:none; }
.hxb-s3__field:has(input[aria-invalid="true"]) { border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); }
.hxb .hxb-s3__msg { position:absolute; inset-inline:16px 0; top:100%; margin-top:6px; font-size:13px; line-height:18px; font-weight:700; color:var(--ink); text-wrap:pretty; }
.hxb .hxb-s3__msg:empty { display:none; }
/* "Still unsure?" is a link, not a third button */
.hxb-s3__more { display:inline-flex; align-items:center; gap:8px; min-height:44px; font:700 16px/1.2 var(--disp); color:var(--ink); text-decoration:none; }
.hxb-s3__more span { background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 2px no-repeat; padding-bottom:3px; transition:background-size .25s var(--ease); }
.hxb-s3__more svg { flex:none; transition:transform .2s var(--ease); }
@media (hover:hover) and (pointer:fine) {
  .hxb-s3__more:hover span { background-size:100% 100%; }
  .hxb-s3__more:hover svg { transform:translateX(3px); }
}

/* hx-voices: testimonial cards. One per row until three fit side by side, so a row never ends
   with one lone card (no 2 + 1 at tablet widths). */
.hxb-grid { display:grid; grid-template-columns:minmax(0,560px); justify-content:center; gap:16px; }
@media (min-width:1000px) { .hxb-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,352px); } }
.hxb-mq__list > li { display:flex; }
.hxb-mq__list > li > .hxb-v { flex:1; }
.hxb-v { display:flex; flex-direction:column; margin:0; padding:24px; border-radius:24px; background:#fff; box-shadow:var(--sh-sm); text-align:left; }
.hxb--white .hxb-v, .hxb--none .hxb-v { background:var(--mist); box-shadow:none; }
.hxb-v__top { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hxb-v__ph { width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; }
.hxb-v__logo { height:20px; width:auto; max-width:112px; }
.hxb-v figcaption { margin-top:16px; }
.hxb-v figcaption b { display:block; font:700 18px/24px var(--disp); }
.hxb-v figcaption span { display:block; font-size:14px; line-height:20px; color:var(--slate); }
.hxb-v blockquote { margin:12px 0 0; flex:1; }
.hxb-v blockquote p { font:700 18px/26px var(--disp); letter-spacing:-.005em; color:var(--ink); text-wrap:pretty; }
.hxb-v__watch { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; margin-top:20px; min-height:44px; font-size:15px; font-weight:800; text-decoration:none; color:var(--ink); }
.hxb-v__watch i { width:32px; height:32px; border-radius:50%; background:var(--gold); display:grid; place-items:center; transition:transform .2s var(--ease); }
.hxb-v__watch:hover i { transform:scale(1.08); }

/* Slow auto-scroll row (hx-voices with 4+ people, the Sandler people strip, any row like them) */
.hxb-mq { position:relative; }
[data-hxb-list] { scrollbar-width:none; overscroll-behavior-x:contain; }
[data-hxb-list]::-webkit-scrollbar { display:none; }
.hxb-mq__list { display:flex; gap:16px; overflow-x:auto; margin:0 -16px; padding:8px 16px 16px; list-style:none; scroll-snap-type:x mandatory; }
.hxb-mq__list > * { flex:0 0 320px; scroll-snap-align:start; }
/* soft edges while the row drifts (it never drifts under reduced motion) */
@media (prefers-reduced-motion:no-preference) { [data-hxb-list] { -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); } }
.hxb-mq__arrows { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.hxb-arrow { width:48px; height:48px; border-radius:50%; border:1.5px solid var(--ink); background:transparent; color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:background-color .2s, color .2s, transform .16s var(--ease); }
.hxb-arrow:active { transform:scale(.96); }
.hxb-arrow:disabled { opacity:.3; cursor:default; }
[data-hxb-pause][aria-pressed="true"] .hxb-i-pause, [data-hxb-pause]:not([aria-pressed="true"]) .hxb-i-play { display:none; }
.hxb-arrow[hidden] { display:none; }
@media (hover:hover) and (pointer:fine) { .hxb-arrow:not(:disabled):hover { background:var(--ink); color:var(--gold); } }

/* hx-compare: comparison sneak peek */
.hxb-cmp__box { max-width:960px; margin:0 auto; padding:8px; border-radius:24px; background:var(--mist); }
.hxb--mist .hxb-cmp__box { background:#fff; }
.hxb-cmp table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; text-align:center; }
.hxb-cmp th, .hxb-cmp td { padding:12px 8px; font-size:15px; line-height:22px; vertical-align:middle; }
.hxb-cmp thead th { padding:16px 8px; font:700 16px/22px var(--disp); color:var(--ink); }
.hxb-cmp thead th a { text-decoration:none; }
.hxb-cmp__tool { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:44px; }
.hxb-cmp__logo { width:28px; height:28px; border-radius:8px; object-fit:contain; }
.hxb-cmp thead th a:hover { text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:4px; }
.hxb-cmp th[scope=row], .hxb-cmp thead th:first-child { width:36%; padding-left:20px; text-align:left; font:600 15px/22px Manrope,Arial,sans-serif; color:var(--ink); }
.hxb-cmp thead th:first-child { color:var(--slate); }
.hxb-cmp .is-us { background:#fff; }
.hxb--mist .hxb-cmp .is-us { background:var(--cream); }
.hxb-cmp thead .is-us { border-radius:16px 16px 0 0; }
.hxb-cmp tbody tr:last-child .is-us { border-radius:0 0 16px 16px; }
.hxb-cmp thead .is-us img { display:block; margin:0 auto; width:132px; height:auto; }
.hxb-cmp__m { display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; }
.hxb-cmp__m--y { color:var(--ink); }
.hxb-cmp .is-us .hxb-cmp__m--y { background:var(--gold); }
.hxb-cmp__m--n { color:var(--slate); }
.hxb-cmp__p { font-size:14px; font-weight:700; color:var(--slate); text-decoration:underline dotted; text-underline-offset:3px; cursor:help; }
.hxb-cmp__note { display:block; font-size:12px; line-height:16px; color:var(--slate); }
.hxb .hxb-cmp__more { margin-top:24px; font-size:16px; }
.hxb .hxb-cmp__more { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 32px; } /* room for the matrix link + the page's closing link (+ the Agent Pi white paper, Oct 23) */
/* Oct 28 (AK, G1): the links close the block as ONE tight row (the page's closing link used to be a separate band ~100px below the matrix link). 8px of padding above and below each link keeps a 40px+ tap target without more space. */
.hxb-cmp__more .hxb-link { padding:8px 0; background:none; text-decoration:underline; text-decoration-color:var(--gold); text-decoration-thickness:2px; text-underline-offset:6px; text-wrap:balance; transition:text-decoration-color .15s ease; } /* real underline so a wrapped link underlines each line, not the whole box */
.hxb-cmp__more .hxb-link:hover { text-decoration-color:var(--ink); }
.hxb.hxb-cmp { padding-bottom:clamp(32px,4vw,48px); }
@media (max-width:640px) { .hxb .hxb-cmp__more { gap:0 24px; margin-top:16px; } }

/* hx-trust: compliance strip */
.hxb-trust { padding-top:32px; padding-bottom:32px; }
.hxb.hxb-s3 { padding-block:clamp(48px,6vw,64px); }
.hxb-trust__panel { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:32px; padding:32px 40px; border-radius:24px; background:var(--ink); color:#fff; text-align:left; }
.hxb-trust__say p { font:700 20px/28px var(--disp); letter-spacing:-.01em; max-width:40ch; text-wrap:pretty; }
.hxb-trust__say .hxb-link { display:inline-block; margin-top:16px; font-size:15px; }
.hxb-trust__badges { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0; padding:0; list-style:none; }
.hxb-trust__badges li { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.hxb-trust__badges img { width:72px; height:72px; padding:8px; border-radius:50%; background:#fff; object-fit:contain; }
.hxb-trust__badges b { font:700 16px/22px var(--disp); }
.hxb-trust__badges a { font-size:14px; line-height:20px; font-weight:700; color:rgba(255,255,255,.8); text-decoration:none; }
.hxb-trust__badges a:hover { color:var(--gold); }

/* hx-start3 below 960px: "try it" takes the full first row, talk and unsure share the second */
@media (max-width:960px) {
  .hxb-s3__panel { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none; }
  .hxb-s3__path { grid-row:auto; display:flex; flex-direction:column; align-items:flex-start; padding:28px; }
  .hxb .hxb-s3__path > p { margin-bottom:20px; }
  .hxb-s3__path > :last-child { margin-top:auto; align-self:flex-start; }
  .hxb-s3__path--try { grid-column:1 / -1; border-bottom:1px solid var(--line); }
  .hxb-s3__path--try > :last-child { align-self:stretch; }
  .hxb-s3__path + .hxb-s3__path { border-inline-start:0; }
  .hxb-s3__path:last-child { border-inline-start:1px solid var(--line); }
}
@media (max-width:860px) {
  .hxb-trust__panel { grid-template-columns:1fr; padding:32px 24px; }
}
@media (max-width:600px) {
  .hxb-s3__panel { grid-template-columns:minmax(0,1fr); }
  .hxb-s3__path { padding:24px 20px; }
  .hxb-s3__path:last-child { border-inline-start:0; border-top:1px solid var(--line); }
  .hxb-mq__list > * { flex-basis:84%; }
  .hxb-cmp__box { padding:4px; }
  .hxb-cmp thead th:first-child { display:none; }
  .hxb-cmp tr { display:grid; grid-template-columns:repeat(var(--n,4),minmax(0,1fr)); }
  .hxb-cmp__logo { width:24px; height:24px; }
  .hxb-cmp th[scope=row] { grid-column:1 / -1; width:auto; padding:16px 12px 4px; }
  .hxb-cmp thead th { font-size:12px; line-height:16px; padding:12px 2px; hyphens:auto; }
  .hxb-cmp thead .is-us img { width:min(84px,100%); }
  .hxb-cmp tbody tr:not(:last-child) .is-us { border-radius:0; }
}
/* Small phones: the email field and "Start free trial" stack, both full width */
@media (max-width:440px) {
  .hxb-s3__field { flex-direction:column; gap:8px; padding:0; border:0; background:transparent; }
  .hxb-s3__field:focus-within { outline:0; }
  .hxb.hxb-s3 .hxb-s3__field input { flex:none; width:100%; height:48px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); }
  .hxb.hxb-s3 .hxb-s3__field input:focus-visible { box-shadow:inset 0 0 0 1px var(--ink); outline:2px solid var(--violet); outline-offset:2px; }
  .hxb-s3__field:has(input[aria-invalid="true"]) { box-shadow:none; }
  .hxb.hxb-s3 .hxb-s3__field input[aria-invalid="true"] { box-shadow:inset 0 0 0 2px var(--ink); }
  .hxb-s3__field .hxb-btn { width:100%; min-height:48px; }
  .hxb .hxb-s3__msg { position:static; margin-top:8px; }
}
@media (prefers-reduced-motion:reduce) {
  .hxb-btn, .hxb-arrow, .hxb-v__watch i, .hxb-s3__field, .hxb-s3__more span, .hxb-s3__more svg { transition:none; }
  [data-hxb-rv] > * { opacity:1; transform:none; transition:none; }
}
/* MOBILE-B (Oct 21): comparison rows are shorter on phones (row title then marks, less padding) */
@media (max-width:600px) {
  .hxb-cmp th[scope=row] { padding:10px 12px 0; font-size:14px; line-height:20px; }
  .hxb-cmp td { padding:4px 2px 10px; }
  .hxb-cmp__m { width:26px; height:26px; }
  .hxb-cmp__note { font-size:12px; }
}