/* Happy clients: a vertical rail of client cards that drifts top to bottom in an endless loop.
   Wide screens (1440px+): fixed in the right margin beside the 960px column.
   Narrower screens: shown in-flow as a section, quote on the left and the rail on the right.
   Colours come from the page's own tokens, so it follows site.css and the startups theme. */
.hc-viewport { position: relative; overflow: hidden; mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.hc-track { display: grid; gap: 12px; animation: hc-down 72s linear infinite; }
.hc-viewport:hover .hc-track, .hc-viewport:focus-within .hc-track { animation-play-state: paused; }
@keyframes hc-down { from { transform: translateY(calc(-50% - 6px)); } to { transform: translateY(0); } }
.hc-set { display: grid; gap: 12px; }

.hc-card { margin: 0; display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--bg); box-shadow: var(--shadow-card); min-width: 0; }
.hc-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hc-brand img { width: 40px; height: 40px; border-radius: 10px; flex: none; }
.hc-brand b { font: 700 14px/18px var(--display); color: var(--ink-heading); }
.hc-brand span { display: block; font: 500 11px/14px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.hc-quote blockquote { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink); }
.hc-quote blockquote::before { content: "“"; display: block; font: 800 34px/0.8 var(--display); color: var(--accent); margin-bottom: 4px; }
.hc-quote figcaption { font-size: 12px; line-height: 18px; color: var(--ink-muted); }
.hc-quote figcaption a { color: var(--accent); font-weight: 600; text-decoration: none; }
.hc-fact b { font: 700 14px/19px var(--display); color: var(--ink-heading); }
.hc-fact p { font-size: 13px; line-height: 19px; color: var(--ink-muted); }
.hc-label { display: flex; align-items: center; gap: 8px; }
.hc-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 22%, transparent); }

/* Fixed side rail on wide screens */
.hc-rail { display: none; }
@media (min-width: 1440px) {
  .hc-rail { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; position: fixed; z-index: 15; top: calc(env(safe-area-inset-top, 0px) + 76px); height: min(calc(100vh - 170px - var(--cartpad, 0px)), 760px); right: 16px; width: min(250px, calc((100vw - 1008px) / 2 - 32px)); }
  .hc-rail .hc-label { justify-self: start; padding: 4px 10px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
  .hc-inline { display: none; }
}

/* In-flow section on narrower screens */
.hc-inline { padding-block: 40px; }
.hc-inline .hc-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 32px; align-items: stretch; }
.hc-feature { display: grid; gap: 16px; align-content: center; }
.hc-inline .hc-viewport { height: 380px; }
@media (max-width: 720px) {
  .hc-inline .hc-grid { grid-template-columns: 1fr; }
  .hc-inline .hc-viewport { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  .hc-track { animation: none; }
  .hc-viewport { overflow-y: auto; mask-image: none; -webkit-mask-image: none; }
  .hc-set[aria-hidden="true"] { display: none; }
}

/* Startups page: sticker style */
.fun .hc-card { border: 2px solid var(--stroke); border-radius: 18px; box-shadow: 4px 4px 0 var(--pop-shadow); }
.fun .hc-rail .hc-label { border: 2px solid var(--stroke); background: var(--fun-mango); color: #1b1533; font-family: var(--display); }
.fun .hc-quote { background: color-mix(in srgb, var(--fun-mango) 14%, var(--bg)); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Featured quote rotator (timing is generated per client count by the page builder) */
.hc-rotator { display: grid; }
.hc-slide { grid-area: 1 / 1; margin: 0; display: grid; gap: 16px; align-content: center; }
.hc-feature:hover .hc-slide { animation-play-state: paused; }
.hc-slide blockquote { margin: 0; font: 700 clamp(19px, 2.4vw, 25px)/1.38 var(--display); color: var(--ink-heading); text-wrap: pretty; }
.hc-slide blockquote::before { content: "“"; display: block; font: 800 56px/0.7 var(--display); color: var(--accent); }
.hc-slide .hc-brand img { width: 56px; height: 56px; }
@media (prefers-reduced-motion: reduce) {
  .hc-rotator { gap: 28px; }
  .hc-slide { grid-area: auto; animation: none !important; }
}