/* GENERATED from frontend/foundations/proof-rails.css — do not edit this copy. */
/*
 * proof-rails.css — the drifting wall of student quotes.
 *
 * Lifted out of the live-experiment sales page so the schedule page can show
 * the same thing. Neutral class names rather than that page's `lx-` prefix,
 * because it is no longer that page's component.
 *
 * Every colour and shape here is a page-level token (--border, --card-bg,
 * --ink, --squircle-md), which both surfaces already define. Nothing is
 * hard-coded, so the wall picks up whichever page it lands on.
 */

.proof-rails { overflow: hidden; }

/*
 * Clipping and the edge fade live on the GROUP, not on each row.
 *
 * A row that clipped its own box also sliced the cards' shadows off top and
 * bottom, and the padding added to compensate is what pushed the rows apart
 * and made the wall read as three separate bands. The gap between rows is the
 * same 14px as the gap between cards, so it reads as one field. The mask clips
 * to this box, so the bottom row's shadow needs room INSIDE it.
 */
.proof-rows {
  display: flex; flex-direction: column; gap: 14px; padding-bottom: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.proof-row { display: flex; }

/* Position is written by rAF — see proof-rails.js. Deliberately NOT a CSS
   animation: slowing one by rewriting animation-duration makes it jump,
   because CSS re-derives elapsed progress from the new duration. */
.proof-track { display: flex; gap: 14px; flex: none; will-change: transform; }

.proof-quote {
  flex: none; width: 300px; margin: 0;
  padding: 22px; border-radius: var(--squircle-md, 22px);
  border: 1px solid var(--border, #e8e2da); background: var(--card-bg, #fff);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(68, 58, 48, .06));
}

.proof-quote p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink, #1a1712); }

.proof-quote cite {
  display: block; margin-top: 12px;
  font-size: 11.5px; font-style: normal; font-weight: 600;
  color: var(--ink-light, #6b6258);
}

.proof-quote cite span { font-weight: 400; color: var(--ink-faint, #9a9080); }

/* Width varies so the rows do not read as a table. WEIGHT does not — varying
   that made a handful of quotes look like pull-quotes for no reason. */
.proof-quote.is-short { width: 216px; }
.proof-quote.is-long { width: 372px; }

/* The drift is decoration. Reduced motion stops it and wraps the cards so
   every quote is still reachable, and the duplicate set is dropped entirely
   rather than shown twice. */
@media (prefers-reduced-motion: reduce) {
  .proof-rows { -webkit-mask-image: none; mask-image: none; }
  .proof-row { overflow: visible; }
  .proof-row .proof-track { flex-wrap: wrap; transform: none !important; }
  .proof-track > .is-dupe { display: none; }
}