/* faq section: ACTBE ticket-card carousel. Cards sit on a horizontal rail; desktop is driven by GSAP (infinite loop,
   prev/next, drag), phones use native scroll-snap. */
.cr-faq { position: relative; max-width: none; color: var(--c-ink); } /* app.css still has a legacy .cr-faq { max-width: 46rem } */
.cr-faq *, .cr-faq *::before, .cr-faq *::after { box-sizing: border-box; }
.cr-faq__inner { position: relative; display: flex; align-items: center; height: 100vh; height: 100dvh; overflow: hidden; overflow: clip; }
.cr-faq__vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; white-space: nowrap; border: 0; clip: rect(0 0 0 0); }

.cr-faq__card { width: 100%; height: 100%; opacity: var(--init-opacity); }
.cr-faq__wrapper { height: 100%; }
.cr-faq__wrapper.is-busy { pointer-events: none; }
.cr-faq__track { display: flex; gap: 8px; align-items: center; justify-content: flex-start; height: 100%; padding: calc(var(--header-height-constant) + 4.86svh) var(--padding-wrapper); scrollbar-width: none; }
.cr-faq__track::-webkit-scrollbar { display: none; }

.cr-faq__item { position: relative; z-index: 1; z-index: var(--_z-index, 1); display: flex; flex-shrink: 0; flex-direction: column; width: min(43.24svh, 82.05vw); height: min(85.81svh, 162.82vw); max-height: 100%; padding: 16px; scroll-snap-align: center; }
.cr-faq__bg { position: absolute; inset: 0; z-index: -1; display: flex; justify-content: center; }
.cr-faq__shadow { position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--gray-9) 28%, transparent); border-radius: 8px; opacity: 0; filter: blur(40px); }
.cr-faq__base { position: absolute; inset: 0; z-index: 2; background: var(--c-white); border-radius: 8px; }
.cr-faq__clip { position: relative; z-index: 3; width: min(8.78svh, 16.67vw); height: min(3.65svh, 6.92vw); margin-top: min(2.16svh, 4.1vw); margin-left: min(1.35svh, 2.56vw); background: var(--gray-3); border-radius: 100vh; }
.cr-faq__clip-knob { position: absolute; left: 50%; top: 0; width: 38%; height: 70%; background: var(--gray-3); border-radius: 100vh 100vh 0 0; transform: translate(-50%, -55%); }

.cr-faq__head { display: flex; align-items: flex-start; justify-content: space-between; }
.cr-faq__index { display: grid; font-family: var(--f-inter); font-size: min(7.57svh, 14.36vw); font-weight: 400; line-height: .9; letter-spacing: -.04em; }
.cr-faq__index-text { text-transform: uppercase; }
.cr-faq__index-number { display: flex; align-items: center; justify-content: flex-start; }
.cr-faq__barcode { display: block; width: min(12.84svh, 24.36vw); height: min(2.7svh, 5.13vw); color: var(--c-ink); }
.cr-faq__chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: min(.54svh, 1.03vw); margin: min(1.08svh, 2.05vw) 0 0; padding: 0; list-style: none; }
.cr-faq__chip { display: flex; align-items: center; justify-content: center; width: 100%; height: min(2.3svh, 4.36vw); border: 1px solid currentcolor; border-radius: 100%; }
.cr-faq__chip.is-on { color: var(--color-text-inverse); background: var(--c-ink); border-color: var(--c-ink); }
.cr-faq__chip-text { margin-top: .1em; font-family: var(--f-roboto-mono); font-size: min(1.35svh, 2.56vw); font-weight: 400; line-height: 1; transform: scale(.7); }

.cr-faq__title { margin: min(3.24svh, 6.15vw) 0 0; font-size: min(2.7svh, 5.13vw); font-weight: 500; line-height: 1.2; }
.cr-faq__content { height: 100%; margin-top: min(2.16svh, 4.1vw); overflow-y: auto; color: var(--color-text-body); }
.cr-faq__scroller { display: flex; flex-direction: column; gap: min(2.16svh, 4.1vw); align-items: center; }
.cr-faq__paragraph { margin: 0; font-size: min(1.25rem, min(2.16svh, 4.1vw)); font-weight: 400; line-height: 1.5; }
.cr-faq__link { display: flex; gap: min(.54svh, 1.03vw); align-items: center; justify-content: center; margin-top: min(3.24svh, 6.15vw); color: var(--c-ink); text-decoration: none; }
.cr-faq__link-text { font-size: min(1.25rem, min(2.16svh, 4.1vw)); font-weight: 400; line-height: 1.5; }
.cr-faq__link-arrow { width: min(2.7svh, 5.13vw); height: min(2.7svh, 5.13vw); transform: rotate(-45deg); transition: transform .4s var(--ease-out-expo); }
.cr-faq__link-arrow svg, .cr-faq__all-arrow svg { display: block; width: 100%; height: 100%; }

.cr-faq__card.is-ready .cr-faq__track { overflow-x: scroll; scroll-snap-type: x mandatory; }
.cr-faq__nav { display: none; }
.cr-faq__foot { display: none; }
.cr-faq__label { margin: 0; }

/* no GSAP: show the rail as is */
.cr-faq.is-static .cr-faq__card { opacity: 1; }
.cr-faq.is-static .cr-faq__track { overflow-x: auto; scroll-snap-type: x mandatory; }

@media screen and (min-width: 960px) {
  .cr-faq__inner { position: relative; display: flex; align-items: center; height: 100vh; padding-top: 0; }
  .cr-faq__card { width: 100%; padding: min(11.98vh, 6.73vw) 0; -webkit-user-select: none; user-select: none; }
  .cr-faq__wrapper { position: relative; display: block; height: 100%; cursor: grab; touch-action: pan-y; }
  .cr-faq__wrapper.is-dragging { cursor: grabbing; }
  .cr-faq__track { position: absolute; top: 0; left: 0; gap: 24px; justify-content: flex-start; width: max-content; height: 100%; padding: 0; will-change: transform; }
  .cr-faq__item { width: min(127.86vh, 71.89vw); height: min(82.68vh, 46.49vw); min-height: 100%; max-height: 100%; padding: min(3.13vh, 1.76vw); }
  .cr-faq__clip { width: min(13.28vh, 7.47vw); height: min(5.47vh, 3.07vw); margin-top: min(4.17vh, 2.34vw); margin-left: 0; }
  .cr-faq__index { font-size: min(15.63vh, 8.78vw); }
  .cr-faq__barcode { width: min(27.34vh, 15.37vw); height: min(5.47vh, 3.07vw); }
  .cr-faq__chips { gap: min(1.04vh, .59vw); margin-top: min(2.08vh, 1.17vw); }
  .cr-faq__chip { height: min(4.95vh, 2.78vw); }
  .cr-faq__chip-text { margin-top: 0; font-size: min(2.08vh, 1.17vw); transform: scale(1); }
  .cr-faq__title { margin-top: min(4.17vh, 2.34vw); font-size: min(3.13vh, 1.76vw); line-height: 1.5; }
  .cr-faq__content { margin-top: min(2.08vh, 1.17vw); overflow: visible; }
  .cr-faq__scroller { gap: min(2.08vh, 1.17vw); align-items: flex-start; }
  .cr-faq__paragraph { max-width: 38em; font-size: min(2.08vh, 1.17vw); }
  .cr-faq__link { gap: min(.52vh, .29vw); margin-top: 0; margin-left: auto; }
  .cr-faq__link-text { font-size: min(2.08vh, 1.17vw); }
  .cr-faq__link-arrow { width: min(2.6vh, 1.46vw); height: min(2.6vh, 1.46vw); }
  .cr-faq__card.is-ready .cr-faq__track { overflow: visible; scroll-snap-type: none; }
  .cr-faq.is-static .cr-faq__track { overflow: visible; scroll-snap-type: none; }

  .cr-faq__nav { position: absolute; right: min(5.21vh, 2.93vw); bottom: min(3.91vh, 2.2vw); z-index: 1; display: block; pointer-events: none; opacity: 0; }
  .cr-faq.is-static .cr-faq__nav { opacity: 1; pointer-events: auto; }
  .cr-faq__nav-list { display: flex; gap: 16px; align-items: flex-end; justify-content: center; }
  .cr-faq__nav-button { display: flex; align-items: center; justify-content: center; width: min(11.46vh, 6.44vw); height: min(4.17vh, 2.34vw); padding: 0; color: var(--color-text-inverse); pointer-events: auto; background: var(--c-ink); border: 0; border-radius: 4px; cursor: pointer; }
  .cr-faq__nav-icon { position: relative; display: flex; align-items: center; justify-content: center; width: min(3.52vh, 1.98vw); height: min(1.3vh, .73vw); transform: rotate(var(--_icon-rotate, 0deg)); }
  .cr-faq__nav-icon svg { display: block; width: 100%; height: 100%; }
  .cr-faq__nav-button[data-type="prev"] { --_icon-rotate: 180deg; }

  .cr-faq__foot { position: absolute; left: var(--padding-wrapper); top: 56px; z-index: 1; display: flex; gap: min(3.51vw, calc(3rem * var(--r-max-scale))); align-items: center; height: min(4.17vh, 2.34vw); font-family: var(--f-roboto-mono); font-size: min(1.02vw, calc(.875rem * var(--r-max-scale))); line-height: 1; }
  .cr-faq__label { position: relative; padding-left: 32px; font-family: var(--f-roboto-mono); font-size: min(1.17vw, 1rem); font-weight: 400; line-height: 1; }
  .cr-faq__label::before { position: absolute; left: 0; content: "/"; background: none; width: auto; height: auto; border-radius: 0; color: currentColor; font: inherit; }
  .cr-faq__label .-main-text { position: relative; display: flex; flex-wrap: wrap; align-items: center; }
  .cr-faq__label .-char { display: block; flex-shrink: 0; white-space: pre; opacity: var(--init-opacity); }
  .cr-faq__slash { position: absolute; width: 1px; height: 1em; background: currentcolor; opacity: 0; pointer-events: none; }
  .cr-faq__all { display: inline-flex; gap: .4em; align-items: center; color: inherit; text-decoration: none; opacity: var(--init-opacity); }
  .cr-faq__all-text { background: linear-gradient(currentcolor, currentcolor) no-repeat 100% 100% / 0 1px; padding-bottom: .2em; transition: background-size .4s var(--ease-out-expo); }
  .cr-faq__all-arrow { width: 1.25em; height: 1.25em; transform: rotate(-45deg); }
  .cr-faq.is-static .cr-faq__label .-char, .cr-faq.is-static .cr-faq__all { opacity: 1; }
}

@media (any-hover: hover) {
  .cr-faq__nav-button { transition: background-color .4s var(--ease-out-expo); }
  .cr-faq__nav-button:hover { background: var(--color-accent); }
  .cr-faq__all:hover .cr-faq__all-text { background-position: 0 100%; background-size: 100% 1px; }
  .cr-faq__link:hover .cr-faq__link-arrow { transform: rotate(-45deg) translateX(.2em); }
}

@media (prefers-reduced-motion: reduce) {
  .cr-faq *, .cr-faq *::before, .cr-faq *::after { transition-duration: .01ms !important; }
}

/* no GSAP on desktop: plain scrollable rail */
@media screen and (min-width: 960px) {
  .cr-faq.is-static .cr-faq__wrapper { overflow-x: auto; cursor: auto; }
  .cr-faq.is-static .cr-faq__track { position: static; padding: 0 var(--padding-wrapper); }
}