/* User feedback ticker (19 Oct 2026, v2). One thin line of real messages drifting along under the download buttons
   in the hero ("Free, and no account needed" line), on the homepage, Mac and Windows pages. Markup is written by
   scripts/add-feedback-feed.mjs.

   Without JavaScript, or with "reduce motion" switched on, it is an ordinary single row you scroll sideways: nothing
   moves on its own. feedback-feed.js adds .fb-live, which clips the row and starts the drift.
   Nothing here touches .dl-buttons, .lp-ctas, .dl-col, .dl-group or [data-dl-*] (the download-buttons contract). */

.fb-tick { margin: 22px 0 0; max-width: 100%; }
.fb-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.fb-label { font: 600 11px var(--mono); letter-spacing: .6px; text-transform: uppercase; color: var(--v-panel-text); }
.fb-toggle {
  font: 600 11px var(--mono); letter-spacing: .3px; color: var(--v-panel-text);
  background: none; border: 0; padding: 10px 2px; min-height: 44px; margin: -10px 0; cursor: pointer;
}
.fb-toggle:hover { color: var(--v-ink); }
.fb-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 4px; }

.fb-viewport { overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.fb-rail { display: flex; width: max-content; }
.fb-set { display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none; }

.fb-card {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 16px; box-shadow: 0 1px 2px rgba(60, 50, 40, .04);
}
.fb-card blockquote { margin: 0; font-size: 14.5px; line-height: 1.3; font-weight: 500; color: var(--v-ink); }
.fb-by { margin: 0; font: 500 11.5px var(--mono); color: var(--v-panel-text); letter-spacing: .1px; display: flex; align-items: center; gap: 6px; }
.fb-by::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
.fb-tr { font-style: italic; }

/* JS on and motion allowed: clip the row, fade the ends, drift left. The second set is a copy, hidden from
   assistive tech, so -50% lands exactly on the first card again. */
.fb-live .fb-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.fb-live .fb-rail { animation: fb-drift 80s linear infinite; }
.fb-live .fb-viewport:hover .fb-rail,
.fb-live .fb-viewport:focus-within .fb-rail,
.fb-live.is-paused .fb-rail { animation-play-state: paused; }
@keyframes fb-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .fb-live .fb-rail { animation: none; }
}

/* The hero's "Free, and no account needed" line sits under the ticker. Where the text column is wide enough it
   is one line; below that it wraps like any paragraph. */
.fb-tick + .v-trust { margin-top: 12px; }
@media (min-width: 1100px) { .fb-tick + .v-trust-line { white-space: nowrap; max-width: none; } }
@media (min-width: 600px) and (max-width: 960px) { .fb-tick + .v-trust-line { white-space: nowrap; max-width: none; } }