/* The trust wall (partials/hx-shoutout), rebuilt Oct 20 (AK: "Do a crazy good job").
   Editorial bento of real Shoutout posts on a warm cream field that dissolves into an ink and violet glow at the bottom: one large ink video tile (the CRO
   roundtable) plus a wide video card, a video card and a written post. Each card is one link (the stretched link covers
   the card, so the whole card clicks and keyboard focus rings the whole card). Hover lift and poster zoom on fine
   pointers only; a short staggered entrance when the wall scrolls in (skipped with reduced motion).
   Brand only: ink #110A33, gold #FFC61E, gold 300 #FFE8A5, violet #341D99 (one glow inside the ink tile), lavender
   #DDD6FF (text on ink), mist #F6F4FF, cream #FFF4D2, slate #5B6478, white. Cabinet Grotesk + Manrope, 24px corners,
   fixed shadow scale, 4px spacing steps. Old 3-card styles: 04-build/backups/trust-wall-oct20/shoutout.css. */
.hxs {
  --ink: #110A33; --gold: #FFC61E; --gold3: #FFE8A5; --violet: #341D99; --lav: #DDD6FF; --mist: #F6F4FF; --cream: #FFF4D2; --slate: #5B6478; --white: #fff;
  --sh-sm: 0 2px 8px rgba(17, 10, 51, .08); --sh-md: 0 12px 32px -12px rgba(17, 10, 51, .22); --sh-lg: 0 32px 64px -24px rgba(17, 10, 51, .35);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --disp: "Cabinet Grotesk", Cabinetgrotesk, "Cabinet Fallback", Arial, sans-serif;
  --body: Manrope, "Manrope Fallback", Arial, sans-serif;
  --bg: var(--cream);
  position: relative; isolation: isolate; overflow: clip;
  padding: 56px 24px 56px; background: var(--bg); color: var(--ink); font-family: var(--body); scroll-margin-top: 84px;
}
.hxs--mist { --bg: var(--mist); }
.hxs--white { --bg: var(--white); }
.hxs *, .hxs *::before, .hxs *::after { box-sizing: border-box; }
/* the bottom glow (AK, Oct 20, from the Shoutout campaign creative): the warm wall dissolves into ink and violet rising from
   the bottom edge, with a warm gold light at its heart. Decorative only: behind the cards, never over text, no pointer events. */
.hxs-glow { position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--glow-h, 48%); pointer-events: none;
  background:
    radial-gradient(46% 38% at 50% 100%, rgba(255, 198, 30, .42), rgba(255, 198, 30, 0) 72%),
    radial-gradient(30% 24% at 16% 100%, rgba(255, 232, 165, .2), rgba(255, 232, 165, 0) 70%),
    radial-gradient(30% 24% at 84% 100%, rgba(255, 232, 165, .16), rgba(255, 232, 165, 0) 70%),
    linear-gradient(180deg, rgba(17, 10, 51, 0) 34%, rgba(17, 10, 51, .7) 70%, #110A33 100%),
    radial-gradient(150% 100% at 50% 100%, #341D99 0%, rgba(52, 29, 153, .96) 42%, rgba(52, 29, 153, .55) 62%, rgba(52, 29, 153, .14) 80%, rgba(52, 29, 153, 0) 92%); }
.hxs-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; }

/* header: centred heading, one line of source + the way to the full board */
.hxs-head { text-align: center; margin: 0 0 28px; }
.hxs .hxs-h2 { margin: 0; font: 700 clamp(28px, 2.8vw, 36px)/1.1 var(--disp); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.hxs .hxs-sub { margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 12px; font: 500 15px/1.5 var(--body); color: var(--slate); }
/* the way to the whole board: a gold pill sitting on the glow */
.hxs-more { display: flex; justify-content: center; margin-top: 28px; }
.hxs-all { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 12px 24px; border-radius: 999px; background: var(--gold); color: var(--ink);
  font: 800 16px/1.2 var(--body); text-decoration: none; white-space: nowrap; box-shadow: 0 0 0 6px rgba(255, 232, 165, .16), var(--sh-md);
  transition: background-color .2s ease, transform .16s var(--ease); }
.hxs-all:active { transform: scale(.96); }
.hxs .hxs-all:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.hxs-arr { flex: none; transition: transform .25s var(--ease); }

/* the bento */
.hxs-bento { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hxs-c { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 24px; background: var(--white);
  box-shadow: var(--sh-sm), 0 0 0 1px rgba(17, 10, 51, .05); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }

/* video poster: inset 8px, so its corner is 24 - 8 = 16px */
.hxs-media { position: relative; flex: none; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--ink); }
.hxs-media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(17, 10, 51, .1); pointer-events: none; }
.hxs-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.hxs-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gold); color: var(--ink); box-shadow: 0 0 0 6px rgba(255, 232, 165, .5), var(--sh-md); transition: transform .3s var(--ease); }
.hxs-play svg { width: 20px; height: 20px; margin-left: 3px; }
.hxs-time { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; border-radius: 999px; background: rgba(17, 10, 51, .82); color: var(--white);
  font: 700 12px/1.2 var(--body); font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* words */
.hxs-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 14px 10px 4px; }
.hxs-who { display: flex; align-items: center; gap: 12px; }
.hxs-ph { position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--lav); }
.hxs-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* a transparent cut-out: zoom to the face */
.hxs-ph--cut img { position: absolute; left: 50%; top: 10%; width: 122%; max-width: none; height: auto; transform: translateX(-50%); }
.hxs-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.hxs-name { margin: 0; font: 700 15px/1.3 var(--body); color: var(--ink); }
.hxs-role { font: 500 13px/1.35 var(--body); color: var(--slate); }
.hxs-via { flex: none; color: var(--slate); }
.hxs-quote { margin: 0; font: 700 20px/1.25 var(--disp); letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; hanging-punctuation: first; }
.hxs-hl { color: inherit; padding: 0 2px; margin: 0 -2px; background: linear-gradient(180deg, transparent 56%, var(--gold3) 56%, var(--gold3) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hxs-text p { margin: 0; font: 500 14px/1.55 var(--body); color: var(--ink); text-wrap: pretty; }
.hxs-text p + p { margin-top: 8px; }
.hxs-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hxs-link { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; white-space: nowrap; font: 800 14px/1.2 var(--body); color: var(--ink); text-decoration: none; }
/* stretched link: the whole card is the link */
.hxs-link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 24px; }
/* the ring goes round the whole card (below), not the words */
.hxs .hxs-c .hxs-link:focus-visible { outline: none !important; box-shadow: none !important; }
/* ink then white ring: the ink reads on the cream top, the white on the dark glow at the bottom */
.hxs-link:focus-visible::after { outline: 3px solid transparent; box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--white); }
.hxs-date { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1.3 var(--body); color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hxs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* feature: the CRO roundtable on ink, the one dark, heavy tile */
.hxs-c--feature { background: var(--ink) radial-gradient(120% 70% at 100% 100%, rgba(52, 29, 153, .75), rgba(52, 29, 153, 0) 70%); color: var(--white);
  box-shadow: var(--sh-lg), inset 0 0 0 1px rgba(221, 214, 255, .1); }
.hxs-c--feature .hxs-media::after { box-shadow: inset 0 0 0 1px rgba(221, 214, 255, .14); }
.hxs-c--feature .hxs-play { width: 72px; height: 72px; margin: -36px 0 0 -36px; box-shadow: 0 0 0 8px rgba(255, 232, 165, .35), var(--sh-lg); }
.hxs-c--feature .hxs-play svg { width: 26px; height: 26px; margin-left: 4px; }
.hxs-c--feature .hxs-body { padding: 20px 16px 12px; gap: 16px; }
.hxs-c--feature .hxs-name { font: 700 clamp(24px, 2.2vw, 28px)/1.12 var(--disp); letter-spacing: -.01em; color: var(--white); text-wrap: balance; }
.hxs-c--feature .hxs-role { margin-top: 6px; font-size: 14px; color: var(--lav); }
.hxs-c--feature .hxs-via { color: var(--lav); }
.hxs-c--feature .hxs-text p { font-size: 17px; line-height: 1.55; color: var(--white); max-width: 46ch; }
.hxs-c--feature .hxs-link { min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--gold); color: var(--ink); transition: background-color .2s ease; }
.hxs-c--feature .hxs-date { color: var(--lav); }
/* the ring sits outside the card, so it stays ink for every card; over the dark glow it is white (below) */

/* video cards: the person is already in the poster, so one name and role line, no second face (AK, Oct 20) */
.hxs-id--line { display: block; font-size: 13px; line-height: 1.4; }
.hxs-id--line .hxs-name, .hxs-id--line .hxs-role { display: inline; }
.hxs-id--line .hxs-role::before { content: "\00A0\00B7\00A0"; }

/* written post: the quote carries the card */
.hxs-c--post .hxs-body { padding-top: 12px; gap: 16px; }
.hxs-c--post .hxs-quote { font-size: 22px; }
.hxs-c--post .hxs-text p { color: var(--slate); }
.hxs-c--wide .hxs-quote { font-size: 22px; }

/* tablet: the two wide tiles span the row, the feature lays its words beside the video */
@media (min-width: 768px) {
  .hxs-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxs-c--feature, .hxs-c--wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 8px; align-items: stretch; }
  .hxs-c--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hxs-c--feature .hxs-media, .hxs-c--wide .hxs-media { align-self: center; }
  .hxs-c--feature .hxs-body { padding: 16px 16px 8px 16px; }
}
/* desktop: the editorial bento, feature left across two rows */
@media (min-width: 1024px) {
  .hxs-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hxs-c--feature { grid-column: 1 / 7; grid-row: 1 / 3; display: flex; }
  .hxs-c--feature .hxs-body { padding: 20px 16px 12px; }
  .hxs-c--wide { grid-column: 7 / 13; grid-row: 1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hxs-c--wide .hxs-quote { font-size: 20px; }
  .hxs-c--video { grid-column: 7 / 10; grid-row: 2; }
  .hxs-c--post { grid-column: 10 / 13; grid-row: 2; }
  /* a shorter set (only / limit) falls back to an even row */
  .hxs-bento--1 .hxs-c, .hxs-bento--2 .hxs-c, .hxs-bento--3 .hxs-c { grid-column: auto / span 6; grid-row: auto; }
  .hxs-bento--3 .hxs-c { grid-column: auto / span 4; }
}

/* fine pointers only: lift, zoom the poster, nudge the arrow */
@media (hover: hover) and (pointer: fine) {
  .hxs-c:hover { transform: translateY(-2px); box-shadow: var(--sh-lg), 0 0 0 1px rgba(17, 10, 51, .06); }
  .hxs-c--feature:hover { box-shadow: 0 40px 72px -24px rgba(17, 10, 51, .5), inset 0 0 0 1px rgba(221, 214, 255, .16); }
  .hxs-c:hover .hxs-media img { transform: scale(1.04); }
  .hxs-c:hover .hxs-play { transform: scale(1.08); }
  .hxs-c:hover .hxs-arr, .hxs-all:hover .hxs-arr { transform: translateX(3px); }
  .hxs-c--post:hover .hxs-arr { transform: translate(2px, -2px); }
  .hxs-c--feature:hover .hxs-link { background: var(--gold3); }
  .hxs-all:hover { background: var(--gold3); }
}
.hxs-c:active { transform: translateY(-2px) scale(.995); }

/* entrance: the tiles settle in once, in board order (JS adds hxs--pre / hxs--in; no JS = no hiding) */
.hxs--pre:not(.hxs--in) .hxs-c { opacity: 0; }
.hxs--in .hxs-c { animation: hxs-in .7s var(--ease) calc(var(--i, 0) * 80ms) backwards; }
@keyframes hxs-in { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* phones */
@media (max-width: 767px) {
  .hxs { padding: 48px 16px 56px; --glow-h: 34%; }
  .hxs-more { margin-top: 32px; }
  .hxs-head { margin-bottom: 24px; }
  .hxs-sub { font-size: 14px; }
  .hxs-c--feature .hxs-play { width: 60px; height: 60px; margin: -30px 0 0 -30px; }
  .hxs-c--feature .hxs-text p { font-size: 15px; }
  .hxs-c--wide .hxs-quote, .hxs-c--post .hxs-quote { font-size: 20px; }
}
@media (max-width: 359px) {
  .hxs-c--feature .hxs-name { font-size: 22px; }
  .hxs-c--feature .hxs-foot { flex-wrap: wrap; }
  .hxs-c--feature .hxs-body { padding: 16px 12px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hxs-c, .hxs-media img, .hxs-play, .hxs-arr, .hxs-c--feature .hxs-link, .hxs-all { transition: none; }
  .hxs--in .hxs-c { animation: none; }
  .hxs-c:hover, .hxs-c:active { transform: none; }
  .hxs-c:hover .hxs-media img, .hxs-c:hover .hxs-play { transform: none; }
}
/* MOBILE-B (Oct 21): shoutout wall, a little less air on phones */
@media (max-width: 767px) {
  .hxs { padding: 32px 16px 40px; }
  .hxs-head { margin-bottom: 16px; }
  .hxs-more { margin-top: 20px; }
}