/* Example 5, revisions 3 and 4 (15 Sep 2026). Loaded after best-of-v2.css.
   1. The film plays on its own (no pinned scroll travel); scrolling speeds
      it up for a moment. Layout mirrors the "still" state of film-first.
   2. A decision card lands on the right of the hero on wide screens.
   3. A four-point strip under the real app demo. */

/* 1. Autoplay hero: one viewport tall, film behind, no scroll track. */
.tg-best-of .tg-film[data-autoplay="true"] { height: 100svh !important; min-height: 620px; }
.tg-best-of .tg-film[data-autoplay="true"] .tg-film-stage { position: relative; height: 100%; min-height: 620px; }
.tg-best-of .tg-film[data-autoplay="true"] .review-scroll-track { display: none; }
.tg-best-of .tg-film-copy > .landing_heroBody__r34Ky b { color: #e6eaf2; font-weight: 500; }

/* 2. Hero card. */
.tg-hero-card { position: absolute; right: min(8vw, 120px); top: 50%; z-index: 2; width: 250px; transform: translateY(-50%) scale(.96); opacity: 0;
  background: #101828; border: 1px solid #1f2937; border-radius: 12px; padding: 11px 13px; box-shadow: 0 16px 40px rgba(0,0,0,.4); color: #e6eaf2;
  animation: tg-land .5s ease .9s forwards, tg-edge 1.2s ease .9s; pointer-events: none; }
@keyframes tg-land { to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes tg-edge { 30% { box-shadow: 0 0 0 1px #34d399, 0 16px 40px rgba(0,0,0,.4); } }
.tg-hero-card .top { display: flex; justify-content: space-between; align-items: center; font: 600 10px "Plus Jakarta Sans", sans-serif; letter-spacing: .12em; color: #6b7280; }
.tg-hero-card .type { color: #34d399; }
.tg-hero-card h4 { margin: 7px 0 3px; font: 700 14.5px "Plus Jakarta Sans", sans-serif; letter-spacing: -.01em; color: #e6eaf2; }
.tg-hero-card p { margin: 0; font: 400 12.5px/1.5 "TalkGraph Inter", Inter, Rubik, sans-serif; color: #8b93a7; }
.tg-hero-card .who { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 12px "TalkGraph Inter", Inter, Rubik, sans-serif; color: #8b93a7; }
.tg-hero-card .who i { width: 6px; height: 6px; border-radius: 50%; background: #38bdf8; }
@media (max-width: 1000px) { .tg-hero-card { display: none; } }
@media (prefers-reduced-motion: reduce) { .tg-hero-card { animation: none; opacity: 1; transform: translateY(-50%); } }

/* 3. Four-point strip under the demo. */
.tg-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 34px; }
.tg-strip > div { border-top: 1px solid #1f2937; padding-top: 16px; }
.tg-strip b { display: block; font: 700 15px "Plus Jakarta Sans", sans-serif; margin-bottom: 6px; color: #e6eaf2; }
.tg-strip span { color: #8b93a7; font: 400 14px/1.6 "TalkGraph Inter", Inter, Rubik, sans-serif; }
.tg-strip a { color: #34d399; text-decoration: none; }
.tg-strip a:hover { text-decoration: underline; }
@media (max-width: 900px) { .tg-strip { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 480px) { .tg-strip { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; } }