/* Proof band (partials/hx-proof). A2 redesign, Oct 19 (AK: "too much information, not clean"; Krish K-008, K-259).
   One calm, separate band on every page: mist with hairline borders and six customer logos on one row at equal
   optical size (heights in constants/v2/proof.js). Product and other pages show the logos only. The homepage adds
   one quiet row under them: the three customer averages and, with their own space and no line near them, the three
   badges (smaller than the logos). About 96 px (logos only) to 150 px (homepage) at 1280, so it sits well on 1280x720.
   Logos: greyscale at rest, colour on hover/focus (Oct 20). No opacity, no placeholder boxes. Brand: ink #110A33, slate #5B6478, lavender #DDD6FF, mist #F6F4FF. */
/* AK Oct 26: no band of its own any more: the logos sit on the hero background (no mist fill, no hairlines), on every page. */
.hxp { --ink: #110A33; --slate: #5B6478; --lav: #DDD6FF; position: relative; padding: 24px 24px; background: transparent; border-top: 0; border-bottom: 0; font-family: Manrope, "Manrope Fallback", Arial, sans-serif; color: var(--ink); }
.hxp *, .hxp *::before, .hxp *::after { box-sizing: border-box; }
.hxp ul { list-style: none; margin: 0; padding: 0; }
.hxp-wrap { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.hxp-logos { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; }
.hxp-logos li { display: flex; align-items: center; justify-content: center; min-width: 0; height: 48px; }
.hxp-logos img { display: block; height: calc(var(--h, 30px) * .9); width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .65; background: none; transition: filter 200ms ease, opacity 200ms ease; /* Oct 22 AK: same soft grey as the homepage hero */ }
/* Oct 20 (Krish 00:14, AK): customer logos are greyscale at rest and show their own colour on hover or keyboard focus, 200 ms. Sizes untouched. */
.hxp-logos li:hover img, .hxp-logos li:focus-within img, .hxp-logos img:hover { filter: grayscale(0); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hxp-logos img { transition: none; } }
/* Customer video pill (Oct 25): sits under its logo, absolutely placed so the row keeps its own layout and sizes. */
.hxp-logos li.hxp-has-link { position: relative; }
/* Oct 26 (Haiku O): pill moved 8 px further from its logo (AK: too tight), so the gap is about 14 px at 1280 and 1440. */
.hxp-vid { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px; background: #DDD6FF; color: #110A33; font: 700 12px/16px Manrope, "Manrope Fallback", Arial, sans-serif; text-decoration: none; white-space: nowrap; transition: background 200ms ease; }
.hxp-vid:hover { background: #FFFFFF; }
.hxp-vid:focus-visible { outline: 2px solid #341D99; outline-offset: 2px; }
.hxp-vid-ico { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #FFC61E; flex: none; }
.hxp-vid-ico svg { display: block; }
/* 3 + 3 phone grid (shell.js adds is-grid3): the pill hangs below its logo, so only rows with a link get room for it */
.hxp-logos.is-grid3 .hxp-vid { top: calc(100% + 9px); }
.hxp-logos.is-grid3:has(.hxp-has-link) { row-gap: 42px !important; }
.hxp-wrap:has(.hxp-logos.is-grid3 .hxp-has-link) { padding-bottom: 20px; }
/* Oct 28 (Haiku F15, AK: "a little space, shouldn't look broken"): the pill hangs about 22 px below the row's centre, so
   it clears its logo by 8-12 px at 1280 and never runs into the band border or the next section. Plain (no-band) rows get the room too. */
.hxp-wrap:has(.hxp-has-link) { padding-bottom: 8px; }
.hxp.hxp--plain .hxp-wrap:has(.hxp-has-link) { padding-bottom: 32px; }
.hxp.hxp--plain .hxp-wrap:has(.hxp-logos.is-grid3 .hxp-has-link) { padding-bottom: 40px; }
@media (prefers-reduced-motion: reduce) { .hxp-vid { transition: none; } }
/* option names: a few chosen logos sit centred, with an optional caption above (Krish round, A1; was the page-local _pf-proof on /mcp and /api) */
.hxp-caption { margin: 0 0 -4px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--slate); text-align: center; }
.hxp-logos.hxp-few { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 56px; }
/* Final pass (Oct 20): a caption with one or two chosen logos sits on ONE row (label, then logo), so a single logo is not a tall lonely band. */
@media (min-width: 768px) {
  .hxp-wrap:has(.hxp-logos.hxp-few) { flex-direction: row; justify-content: center; align-items: center; gap: 12px 32px; }
  .hxp-wrap:has(.hxp-logos.hxp-few) .hxp-caption { margin: 0; }
  .hxp-wrap:has(.hxp-logos.hxp-few) .hxp-logos { width: auto; }
}
/* homepage row: averages on the left, badges on the right, a wide gap between them and no rule anywhere near the badges */
.hxp-foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 56px; }
.hxp-stats { display: flex; align-items: center; }
.hxp-stats li { display: flex; align-items: baseline; gap: 8px; padding: 0 18px; font-size: 14px; line-height: 20px; color: var(--slate); }
.hxp-stats li:first-child { padding-left: 0; }
.hxp-stats li + li { border-left: 1px solid var(--lav); }
.hxp-stats b { font: 700 18px/1 "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hxp-stats span { font-weight: 600; white-space: nowrap; }
.hxp-badges { display: flex; align-items: center; gap: 16px; }
.hxp-badges img { display: block; height: 30px; width: auto; }
@media (max-width: 1100px) {
  .hxp-foot { flex-direction: column; gap: 14px; }
}
@media (max-width: 991px) {
  .hxp-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .hxp-logos img { height: calc(var(--h, 30px) * .85); }
}
@media (max-width: 767px) {
  .hxp { padding: 20px 16px; }
  .hxp-wrap { gap: 16px; }
  /* Oct 20 balance: two columns on phones, so the widest wordmark (Sandler) is never clamped by its cell; every logo keeps its own ink area */
  .hxp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .hxp-logos li { height: 40px; }
  .hxp-logos img { height: calc(var(--h, 30px) * .7); }
  /* three equal columns, never a lone first item (320 px) */
  .hxp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; align-items: start; }
  .hxp-stats li, .hxp-stats li:first-child { flex-direction: column; align-items: center; gap: 2px; padding: 0 8px; font-size: 12px; line-height: 16px; text-align: center; }
  .hxp-stats span { white-space: normal; }
  .hxp-stats b { font-size: 16px; }
  .hxp-badges img { height: 28px; }
}
@media (max-width: 360px) { .hxp-stats li, .hxp-stats li:first-child { padding: 0 4px; } .hxp-logos img { height: calc(var(--h, 30px) * .58); } }

/* Homepage band under the hero (AK, Oct 19 night): logos sit smaller than the product equation above them. */
#customers .hxp-logos li { height: 40px; }
#customers .hxp-logos img { height: calc(var(--h, 30px) * .78); }
@media (max-width: 760px) { #customers .hxp-logos img { height: calc(var(--h, 30px) * .66); } }
@media (max-width: 360px) { #customers .hxp-logos img { height: calc(var(--h, 30px) * .58); } }

/* Plain variant (AK, Oct 19 night): logos inside the homepage hero, no band. */
.hxp.hxp--plain { background: none; border: 0; padding: 0; }
.hxp.hxp--plain .hxp-wrap { padding: 0; }
/* Oct 20 (AK): optional one-line note under the logos, e.g. the MCP rollout status on /mcp */
.hxp-note{margin:14px auto 0;max-width:60ch;text-align:center;font:500 15px/1.5 Manrope,"Manrope Fallback",Arial,sans-serif;color:#5B6478}