/* ============================================================
   Vanilla landing-page styles
   Shared page-scoped composition for the marketing + legal pages
   (index, transfers, arbitration, faq, privacy, terms). Loaded after
   nextgen.css. No design-system primitives are redefined here; everything
   references DS tokens (--cx-*, --bs-*) so the pages track the theme.
   ============================================================ */

/* ---- Shared primitives (all pages) --------------------------------- */

/* Eyebrow / overline — uppercase tracked label. Bootstrap has no
   letter-spacing utility; this is the only added text rule. */
.cx-eyebrow { letter-spacing: .08em; }

/* Brand wordmark sizing in the header. */
.cx-brandbar__logo { height: 1.75rem; width: auto; display: block; }

/* Readable body-copy widths with no exact Bootstrap utility. */
.cx-measure        { max-width: 40rem; }   /* index */
.cx-measure-narrow { max-width: 32rem; }   /* transfers */

/* ---- Logo marquee (index, transfers) ------------------------------
   Infinite, seamless, slow (≈38s/loop), pauses on hover. The track holds
   the 25 logos twice; translating exactly -50% lands logo-26 where logo-1
   began, so the loop never visibly resets. */
.cx-marquee {
  overflow: hidden;
  /* Fade the leading/trailing edges into the band background. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.cx-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  animation: cx-marquee-scroll 38s linear infinite;
  will-change: transform;
}
.cx-marquee:hover .cx-marquee__track,
.cx-marquee:focus-within .cx-marquee__track { animation-play-state: paused; }
.cx-marquee__logo {
  height: 2rem;            /* ≈32px — matches the 40px row in the design */
  width: auto;
  flex: 0 0 auto;
  object-fit: contain;
  opacity: .85;
}
@keyframes cx-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Respect reduced-motion: hold the marquee still. */
@media (prefers-reduced-motion: reduce) {
  .cx-marquee__track { animation: none; }
}

/* ---- Home "$495" spotlight (index) --------------------------------
   Only the values with NO Bootstrap utility stay custom: the lg card
   padding (64/72px), the 48px lg row gap, the fixed 284px points block,
   and the flex min-width:0 shrink guard. Base padding / flex / direction
   / gap come from utilities on the elements; the lg padding & gap use
   !important to layer over the base utilities (.p-4 / .gap-5). */
@media (min-width: 992px) {
  .cx-spotlight-body     { padding: 4rem 4.5rem !important; }
  .cx-spotlight-row      { gap: 3rem !important; }
  .cx-spotlight-features { flex: 0 0 284px; }
  .cx-spotlight-content  { min-width: 0; }
}

/* ---- "What's included" card (transfers) ---------------------------
   Base 24px padding comes from .p-4 on the element; only the lg 72px/64px
   stays custom. !important layers it over .p-4's !important. */
@media (min-width: 992px) {
  .cx-included-body { padding: 4rem 4.5rem !important; }
}

/* ---- FAQ accordions (faq) -----------------------------------------
   Native <details> disclosure (the DS .accordion is Bootstrap's boxed
   component and needs JS; native disclosure keeps the page JS-light).
   These rules cover only what utilities can't: hiding the native marker
   and rotating the chevron. */
summary.cx-faq-q { list-style: none; cursor: pointer; }
summary.cx-faq-q::-webkit-details-marker { display: none; }
.cx-faq-chevron { transition: transform .2s ease; }
details[open] > summary .cx-faq-chevron { transform: rotate(180deg); }

/* ---- Table-of-contents legal pages (arbitration, privacy, terms) ---
   Figma layout widths (no Bootstrap utility hits these exactly):
   1296px content (72px margins @1440), 416px sidebar, 848px main, 32px gap. */
.cx-toc-wrap { max-width: 1296px; }
@media (min-width: 992px) {
  .cx-toc-aside { flex: 0 0 416px; }        /* fixed sidebar width */
  /* Sidebar floats beside the content as the page scrolls past it. */
  .cx-toc-nav   { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; }
}

/* TOC links (scrollspy target). Not a DS component, so styled here with
   cx-* tokens; the scrollspy (Bootstrap or the local script) toggles .active. */
#toc .nav-link        { color: var(--cx-text-muted); padding: .75rem 1rem; border-radius: .5rem; line-height: 1.3; }
#toc .nav-link:hover  { background-color: var(--cx-surface-hover);  color: var(--cx-text); }
#toc .nav-link.active { background-color: var(--cx-surface-active); color: var(--cx-text); }

/* Smooth-scroll on TOC click; anchor jumps land a little below the very top. */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 1.5rem; }

/* Trailing scroll room so the final section can reach the scrollspy activation
   line. The -lg variant gives terms' long TOC extra room to reach the last item. */
.cx-toc-tail    { height: 40vh; }
.cx-toc-tail-lg { height: 55vh; }