/* AK Nov 6: the small customer quote (photo, quote, "Name  Role, Company"), the pricing page's .pq, shared with the product pages
   (views/partials/hx-pq.ejs). Brand colours only.
   AK Nov 7: ONE placement everywhere (product pages and solution pages): a sibling right after the lavender box, centred, 32px above
   (24px on phones), one max line length (620px, balanced wrapping), photo centred on the text block, name bold then
   role + company in slate, always left aligned (a global figcaption rule used to centre the byline). The bottom gap is the panel's own padding. */
html body .hpq { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; grid-column: 1 / -1; justify-self: center; box-sizing: border-box; width: fit-content; max-width: min(620px, 100%); margin: 32px auto 0; padding: 0; text-align: left; }
html body .hpq img { grid-row: 1 / 3; align-self: center; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #FFC61E; }
html body .hpq blockquote { margin: 0; padding: 0; border: 0; text-align: left; font: 700 19px/1.3 "Cabinet Grotesk", Cabinetgrotesk, Arial, sans-serif; letter-spacing: -.005em; color: #110A33; text-wrap: balance; }
html body .hpq figcaption { margin: 0; text-align: left; font: 400 14px/1.4 Manrope, Arial, sans-serif; color: #5B6478; text-wrap: pretty; }
html body .hpq figcaption b { margin-right: 6px; font-weight: 700; color: #110A33; }
@media (max-width: 767px) { html body .hpq { margin-top: 24px; } html body .hpq blockquote { font-size: 17px; } }
/* phones: photo on top, everything centred, name and role on two lines, so a long quote never squeezes beside the photo */
@media (max-width: 599px) {
  html body .hpq { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 12px; text-align: center; }
  html body .hpq img { grid-row: auto; }
  html body .hpq blockquote, html body .hpq figcaption { text-align: center; }
  html body .hpq figcaption b { display: block; margin: 0 0 2px; }
}