/* The homepage's On board section with real customers (template-parts/home/proof.php, from inc/quotes.json): what the
   prototype's sample wall did not have, on top of its hp- rules in app.min.css. Enqueued on the front page only, after
   the page stylesheet (inc/quotes.php).
   - The marks are the companies' own logos: a wordmark alone (img.hp-lgw, 22 px high), or a square mark on a white
     tile before the name (.hp-lgm, .hp-lgm-fill for a square image with its own ground). A wordmark drawn dark turns
     white in the dark theme; one drawn white (.hp-lgw-light) turns dark in the light theme.
   - The person is their photo (img.hp-av in the words' who line, .hp-pp-img in a tall cell).
   - The tall cell (.hp-c-pp, the sample wall's case cell) shows the person under the logo instead of a figure.
   - The two tiles (.hp-qts > figure.hp-qt) are the words large, with nothing behind them to turn to: the sample's tiles
     turned to an invented case. */

.vp .hp-lgw{display:block;flex:none;width:auto;height:22px;max-width:128px;object-fit:contain;filter:var(--hp-lgf,none)}
.vp .hp-lgw-light{filter:var(--hp-lglf,brightness(0))}
.vp .hp-lgm{display:grid;place-items:center;flex:none;width:1.32em;height:1.32em;border-radius:24%;overflow:hidden;background:#FFFFFF;box-shadow:inset 0 0 0 1px rgba(22,22,26,.1)}
.vp .hp-lgm img{display:block;width:84%;height:84%;object-fit:contain}
.vp .hp-lgm-fill img{width:100%;height:100%;object-fit:cover}
.vp img.hp-av{object-fit:cover;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line)}
.vp .hp-av-lg{width:48px;height:48px}

/* the tall cell: the logo on top, the person at the foot */
.vp .hp-pp{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;min-width:0;max-width:100%}
.vp .hp-pp-img{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--sunk);box-shadow:0 0 0 1px var(--line)}
.vp .hp-pp b{display:block;font:600 14px/1.25 var(--sans);color:var(--ink2)}
.vp .hp-pp small{display:-webkit-box;margin-top:2px;overflow:hidden;font:400 12px/1.35 var(--sans);color:var(--mute);-webkit-line-clamp:2;-webkit-box-orient:vertical}

/* what the company is (company.segment, Peter, 2026-10-28: "it is unclear who is a recruiter, who does lead gen"):
   under the mark in a quote cell (.hp-mk holds the two) and in a tall cell, beside it in a tile (the prototype's own
   .hp-who-k) and in the words' head (.hp-kind, where the sample said Quote) */
.vp .hp-mk{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;min-width:0}
.vp .hp-seg{display:block;max-width:150px;font:500 10px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);white-space:normal}
.vp .hp-c-case .hp-seg{margin:6px 0 4px;max-width:100%}

/* where the words come from, under the person in the words and the tiles (.hp-src, the quote's links) */
.vp .hp-src{margin:12px 0 0;font:400 13px/1.45 var(--sans);color:var(--mute)}
.vp .hp-src a{color:var(--ink2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.vp .hp-src a:hover{color:var(--ink)}
.vp.hp-proof .k-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* the two tiles, the words large */
.vp .hp-qts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.vp .hp-qt{--t:var(--hp-li);display:flex;flex-direction:column;margin:0;padding:26px 30px;border:1px solid var(--line);border-radius:22px;background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--t) 9%,transparent),transparent 70%),var(--panel)}
.vp .hp-qt-2{--t:var(--hp-em)}
.vp .hp-qt .hp-tile-h{min-height:30px}
.vp .hp-qt .hp-lgw{height:28px;max-width:170px}
.vp .hp-qt .hp-tile-h .hp-sample{margin-left:auto}
.vp .hp-qt .hp-tile-q{flex:1}
.vp .hp-qt figcaption{margin-top:22px}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .vp.hp-proof{--hp-lgf:brightness(0) invert(1);--hp-lglf:none}
}
:root[data-theme="dark"] .vp.hp-proof{--hp-lgf:brightness(0) invert(1);--hp-lglf:none}

@media (max-width:760px){
  .vp .hp-lgw{height:19px;max-width:110px}
  /* a tall cell keeps its role's two lines inside it under the segment line: the photo smaller, the gap tighter */
  .vp .hp-pp{gap:6px}
  .vp .hp-pp-img{width:32px;height:32px}
  .vp .hp-qts{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px}
  .vp .hp-qt{padding:22px 22px 24px}
}