/* ==========================================================================
   09 · RAIL, QUOTES, FAQ, PRICING
   ========================================================================== */

/* --- Horizontal scroller --------------------------------------------------
   Native scroll-snap. A row of cards does not need a carousel library, and
   this already works with a trackpad, a touch screen and the Tab key. */

.rail {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  padding-bottom: var(--s-4);
}

.rail__track {
  display: flex;
  gap: var(--s-5);
  min-width: min-content;
}

.rail__item {
  flex: 0 0 clamp(240px, 22vw, 320px);
  scroll-snap-align: start;
}


/* --- Testimonial ---------------------------------------------------------- */

.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex-basis: clamp(280px, 30vw, 420px);
  padding: var(--s-6);
  background: var(--card);
  border: var(--border);
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-600);
  font-style: italic;
  line-height: 1.4;
}

.quote__by {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
}

.quote__name {
  color: var(--ink);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.quote__event { color: var(--ink-3); font-size: var(--fs-200); }


/* --- FAQ ------------------------------------------------------------------ */

.faq { border-top: 1px solid var(--rule); }

.faq__item { border-bottom: 1px solid var(--rule); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  font-family: var(--font-display);
  font-size: var(--fs-600);
  list-style: none;
  cursor: pointer;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__sign {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  background: var(--gilt);
}

.faq__sign::before { top: 6px; left: 0; width: 14px; height: 1px; }

.faq__sign::after {
  top: 0;
  left: 6px;
  width: 1px;
  height: 14px;
  transition: opacity 0.2s var(--ease);
}

.faq__item[open] .faq__sign::after { opacity: 0; }

.faq__a { padding-bottom: var(--s-5); }


/* --- Pricing --------------------------------------------------------------
   Ranges, never fixed figures — the final price depends on print run and
   finishing, and one number invites the wrong conversation. */

.pricing { border-top: 1px solid var(--rule); }

.pricing__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) 0;
  border-bottom: 1px solid var(--rule-soft);
}

.pricing__item { font-size: var(--fs-400); }

.pricing__value {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pricing__range { font-size: var(--fs-300); }
.pricing__unit  { color: var(--ink-3); font-size: var(--fs-100); }

.pricing__note {
  margin-top: var(--s-4);
  color: var(--ink-3);
  font-size: var(--fs-200);
}