/* ═══════════════════════════════════════════════════════════════
   landing-features.css: drawing landing visitors to the features
   ═══════════════════════════════════════════════════════════════
   4.2531.25. The glowing tagline (hero and tour gallery), the tour
   gallery row (tiles and the player come from feature-rec.css), the
   hero's tours button and the feature cards' "See How It Works" links.
   Colors are the landing page's own (app.css). Everything that moves
   stands still under prefers-reduced-motion. */

/* The tagline: light text with a soft halo everywhere; where the browser
   can paint text with a gradient, a slow blue, cyan and green shimmer.
   The gradient is applied only inside @supports, so the text can never
   turn invisible. 4.2531.26: 1.15rem with no width cap, so it fits on one
   line where it can; its two halves are inline blocks, so when it must
   wrap the break falls after "verified,", and a half wraps within itself
   only on a screen too narrow for it. The shimmer is painted on each
   half. 4.2531.33: the first half holds two clauses (.lx-tl), each kept
   whole, so when that half no longer fits on one line it splits at its
   comma: one line, then two (after "verified,"), then three (one per
   clause), decided by the text's real width, with no breakpoint. The
   shimmer is painted on the clauses themselves (.lx-tl, the innermost
   text), since gradient text on a box holding other boxes is not
   reliably painted through in every browser. */
.lx-tagline {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.45;
  margin: 0 0 1.5rem;
  color: var(--text-primary);
  text-shadow: 0 0 18px rgba(6, 182, 212, 0.35);
}
.lx-tl-half, .lx-tl { display: inline-block; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .lx-tagline { text-shadow: none; filter: drop-shadow(0 0 10px rgba(6, 182, 212, 0.35)); }
  .lx-tl {
    background-image: linear-gradient(90deg, #3b82f6, #06b6d4, #10b981, #06b6d4, #3b82f6);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: lx-shimmer 8s linear infinite;
  }
}

/* The bar just below the nav bar: the tagline, then the tours button
   aligned right. 4.2531.27: the wrapper is only as wide as the tagline
   (never wider than the page), so the button's right edge meets the
   tagline's; a 0.4rem gap replaces the tagline's margin, and the bar's
   padding is trimmed, closing the space above the showcase. 4.2531.33:
   the gap between the tagline and the button is 0.2rem. */
.lx-tagline-bar { padding: 0.75rem 0 0; }
.lx-tagline-wrap { display: grid; width: fit-content; max-width: 100%; row-gap: 0.2rem; }
.lx-tagline-bar .lx-tagline { margin: 0; }
.lx-tours-cta { display: flex; justify-content: flex-end; }

/* The tour gallery: one row that scrolls sideways, snapping to tiles. */
.lx-tours-lead { color: var(--text-secondary); margin: 0 0 1.25rem; max-width: 46rem; }
.lx-tour-row { list-style: none; margin: 0; padding: 0.5rem 0.25rem 1rem; display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x proximity; }
.lx-tour { flex: 0 0 auto; width: 170px; display: flex; flex-direction: column; gap: 0.5rem; scroll-snap-align: start; }
.lx-tour .frec figcaption, .lx-tour .frec figcaption strong { color: var(--text-primary); }
.lx-tour-link, .lx-feature-link { color: var(--accent-cyan); text-decoration: none; font-weight: 500; }
.lx-tour-link { font-size: 0.85rem; }
.lx-feature-link { display: inline-block; margin-top: 0.75rem; }
.lx-tour-link:hover, .lx-feature-link:hover { text-decoration: underline; }
.lx-tour-link:focus-visible, .lx-feature-link:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }

@keyframes lx-shimmer { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }

@media (prefers-reduced-motion: reduce) {
  .lx-tl { animation: none; }
}