/* Full-viewport first impression. The research content keeps its reading width. */
.site-header{position:fixed;inset:0 0 auto;height:82px;background:transparent;border-bottom:1px solid #ffffff22;backdrop-filter:none;color:#fff;z-index:30;transition:background .35s,height .35s,border-color .35s,backdrop-filter .35s}
.site-header.is-solid{height:66px;background:#0e211cd9;border-color:#ffffff14;backdrop-filter:blur(14px) saturate(1.2)}
.site-header .wordmark span{border-color:#ffffff50;color:#e4eee8}.site-header .nav-demo{background:#d9ed9d;color:#20372e}.site-header nav>a:not(.nav-demo){text-shadow:0 1px 8px #0009;opacity:.86;transition:opacity .2s}.site-header nav>a:not(.nav-demo):hover,.site-header nav>a.is-current{opacity:1;text-decoration:none}.site-header nav>a.is-current:not(.nav-demo){box-shadow:inset 0 -2px #e0f292}

.hero-cinematic{--hero-accent:#e0f292;position:relative;isolation:isolate;min-height:640px;height:100svh;max-height:1100px;padding:0;margin:0;overflow:hidden;background:#0c1a16;text-align:left;color:#fff;display:flex;flex-direction:column;justify-content:flex-end}
.hero-poster,.hero-video,.hero-shade,.hero-grain{position:absolute;inset:0;width:100%;height:100%;z-index:-3}
.hero-poster,.hero-video{object-fit:cover;object-position:center 50%;pointer-events:none}
.hero-poster{animation:heroDrift 14s ease-out both}
.hero-video{opacity:0;transition:opacity 1.4s ease}.hero-video.is-playing{opacity:1}.hero-video[hidden]{display:none}
.hero-shade{z-index:-2;background:linear-gradient(180deg,#06120fb3 0%,#06120f00 22%,#06120f00 55%,#06120fe6 100%),linear-gradient(270deg,#07140fe0 0%,#07140fa6 30%,#07140f00 62%)}
.hero-grain{z-index:-1;opacity:.08;mix-blend-mode:overlay;background-image:radial-gradient(#fff 0.6px,transparent 0.7px);background-size:3px 3px}

.hero-copy,.hero-bottom{width:100%;max-width:1240px;margin:0 auto;padding-inline:32px}
.hero-copy{padding-top:150px;padding-bottom:52px;display:flex;flex-direction:column;align-items:flex-end;text-align:right;margin-block:auto 0}
.hero-copy .eyebrow{font-size:11px;letter-spacing:2.4px;color:#e3eed9;margin:0 0 22px}
.hero-copy h1{margin:0;color:#fff}
.hero-word{display:block;margin:0;max-width:none;font-size:clamp(76px,11vw,156px);letter-spacing:-.045em;line-height:.9;font-weight:850;background:linear-gradient(180deg,#fff 30%,#dfe9d4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-copy h1 .hero-sub{display:block;max-width:640px;margin:22px 0 0 auto;font-size:clamp(22px,2.6vw,36px);line-height:1.25;font-weight:500;letter-spacing:-.03em;color:#f1f6ec;text-shadow:0 2px 24px #0008}
.hero-cta{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:14px 22px;margin-top:34px}
.hero-watch{display:inline-flex;align-items:center;gap:12px;border:0;border-radius:999px;background:var(--hero-accent);color:#132820;padding:8px 22px 8px 8px;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 10px 40px #d9ed9d33;transition:transform .2s,box-shadow .2s}
.hero-watch:hover{transform:translateY(-2px);box-shadow:0 14px 48px #d9ed9d55}
.hero-watch small{font-weight:600;font-size:11px;opacity:.6;font-variant-numeric:tabular-nums}
.hero-watch-icon{position:relative;width:36px;height:36px;border-radius:50%;background:#132820;display:grid;place-items:center}
.hero-watch-icon:before{content:"";margin-left:3px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--hero-accent)}
.hero-watch-icon:after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #132820;opacity:0;animation:heroPulse 2.4s ease-out 2.2s infinite}
.hero-try{font-size:13px;font-weight:600;color:#fff;border-bottom:1px solid #ffffff66;padding-bottom:2px}.hero-try:hover{text-decoration:none;border-color:#fff}

.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:18px;padding-bottom:28px;position:relative}
.hero-bottom:before{content:"";position:absolute;top:0;left:32px;right:32px;border-top:1px solid #ffffff30}
.hero-live{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:650;letter-spacing:1.6px;color:#f2f7ea}
.hero-live-dot{width:8px;height:8px;border-radius:50%;background:var(--hero-accent);box-shadow:0 0 0 0 #e0f29299;animation:heroLive 2s ease-out infinite}
.hero-tags{display:flex;flex-wrap:wrap;gap:18px;font-size:11px;color:#dfe8da}.hero-tags span{display:flex;align-items:center;gap:7px}.hero-tags span:before{content:"";width:4px;height:4px;background:var(--hero-accent);border-radius:50%}
.hero-media-actions{display:flex;align-items:center;gap:18px}
.hero-scroll{font-size:11px;color:#fff;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}.hero-scroll span{display:inline-block;animation:heroBob 2s ease-in-out infinite}
#hero-video-toggle{font-size:11px;background:#ffffff12;border:1px solid #ffffff45;border-radius:999px;color:#fff;padding:7px 13px;cursor:pointer;backdrop-filter:blur(6px)}#hero-video-toggle:hover{background:#ffffff24}#hero-video-toggle[hidden]{display:none}
.hero-cinematic a:focus-visible,.hero-cinematic button:focus-visible{outline-color:var(--hero-accent)}
.hero-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:#ffffff14}.hero-progress span{display:block;height:100%;background:var(--hero-accent);transform-origin:left;transform:scaleX(var(--p,0))}

/* Staggered entrance */
.hero-reveal{animation:heroIn 1s cubic-bezier(.2,.7,.2,1) both}
.hero-copy .eyebrow.hero-reveal{animation-delay:.15s}.hero-word.hero-reveal{animation-delay:.3s}.hero-sub.hero-reveal{animation-delay:.5s}.hero-cta.hero-reveal{animation-delay:.72s}.hero-bottom.hero-reveal{animation-delay:.95s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes heroDrift{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes heroPulse{0%{transform:scale(.9);opacity:.55}100%{transform:scale(1.5);opacity:0}}
@keyframes heroLive{0%{box-shadow:0 0 0 0 #e0f29299}80%,100%{box-shadow:0 0 0 9px #e0f29200}}
@keyframes heroBob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* Full-length film */
.film-dialog{width:min(1280px,calc(100vw - 48px));max-width:none;max-height:none;padding:0;border:0;background:transparent;color:#fff;overflow:visible}
.film-dialog::backdrop{background:#040b09e8;backdrop-filter:blur(8px)}
.film-dialog[open]{animation:filmIn .35s cubic-bezier(.2,.7,.2,1)}
.film-frame{aspect-ratio:16/9;max-height:calc(100svh - 120px);margin:auto;background:#000;border-radius:12px;overflow:hidden;box-shadow:0 30px 120px #000c}
.film-frame video{width:100%;height:100%;display:block;object-fit:contain;background:#000}
.film-caption{margin:14px 2px 0;font-size:11px;letter-spacing:1.4px;color:#c8d5c6;text-transform:uppercase}
.film-close{position:absolute;top:-46px;right:0;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff40;background:#ffffff14;color:#fff;font-size:22px;line-height:1;cursor:pointer}.film-close:hover{background:#ffffff2a}
@keyframes filmIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
body.film-open{overflow:hidden}

/* Real demonstration video cards */
.media-card video,.demo-video{display:block;width:100%;height:100%;object-fit:cover;background:#0c1a16}
.media-card .demo-video-wrap{height:330px;background:#0c1a16}
.media-card .demo-video-wrap video{object-fit:contain}

/* Scroll-in reveal for the research sections (enabled by JS only) */
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js-reveal .reveal.is-visible{opacity:1;transform:none}

.publication{text-align:center;padding:32px 0 40px;border-bottom:1px solid var(--line)}.publication .authors{margin:0 0 8px}.publication .hero-summary{font-size:14px;margin:0;color:var(--muted)}.publication .hero-actions{margin-top:22px}.hero-media{margin-bottom:55px}

@media(max-width:1000px){.media-card .demo-video-wrap{height:280px}}
@media(max-width:900px){.hero-media-actions{gap:12px}.hero-tags{display:none}.hero-copy h1 .hero-sub{max-width:520px}}
@media(max-width:700px){
.site-header{height:auto;min-height:100px;gap:12px}.site-header.is-solid{height:auto;min-height:0}
.hero-cinematic{min-height:640px;max-height:none}
.hero-copy,.hero-bottom{padding-inline:20px}
.hero-copy{padding-top:150px;padding-bottom:30px;align-items:flex-start;text-align:left}
.hero-copy .eyebrow{font-size:9px;letter-spacing:1.2px;line-height:1.8;max-width:260px;margin-bottom:16px}
.hero-word{font-size:clamp(62px,17vw,96px)}
.hero-copy h1 .hero-sub{font-size:clamp(21px,5.6vw,30px);margin:16px 0 0}.hero-copy h1 br{display:none}
.hero-cta{justify-content:flex-start;margin-top:26px}
.hero-poster,.hero-video{object-position:26% center}
.hero-shade{background:linear-gradient(180deg,#06120fb3 0%,#06120f00 24%,#06120f33 45%,#06120ff2 88%)}
.hero-bottom{flex-wrap:wrap;gap:12px;padding-top:16px;padding-bottom:22px}.hero-bottom:before{left:20px;right:20px}
.hero-live{font-size:9px;letter-spacing:1.2px}
.film-dialog{width:calc(100vw - 20px)}.film-close{top:-48px}
.publication{padding:28px 0}.publication .hero-summary{font-size:13px}.hero-media{margin-bottom:35px}
.media-card .demo-video-wrap{height:auto;aspect-ratio:16/9}
}
@media(max-height:620px) and (min-width:701px){.hero-cinematic{min-height:560px}.hero-copy{padding-top:110px;padding-bottom:26px}.hero-word{font-size:96px}.hero-copy h1 .hero-sub{font-size:26px;margin-top:14px}.hero-cta{margin-top:22px}.hero-copy .eyebrow{margin-bottom:14px}}
@media(prefers-reduced-motion:reduce){.hero-reveal,.hero-poster,.hero-watch-icon:after,.hero-live-dot,.hero-scroll span,.film-dialog[open]{animation:none}.hero-video{transition:none}.js-reveal .reveal{opacity:1;transform:none;transition:none}}

/* Minimal hero: corner play/pause control replaces the bottom bar */
.hero-cinematic .hero-copy{padding-bottom:clamp(64px,11vh,120px)}
.hero-toggle{position:absolute;right:max(24px,calc((100vw - 1240px)/2 + 32px));bottom:28px;width:38px;height:38px;border-radius:50%;border:1px solid #ffffff55;background:#0a1a1544;backdrop-filter:blur(6px);cursor:pointer;display:grid;place-items:center;opacity:.75;transition:opacity .2s,background .2s}
.hero-toggle:hover{opacity:1;background:#0a1a1577}.hero-toggle[hidden]{display:none}
.hero-toggle:before{content:"";width:10px;height:12px;border-left:3px solid #fff;border-right:3px solid #fff;box-sizing:border-box}
.hero-toggle.is-paused:before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;margin-left:3px}
@media(max-width:700px){.hero-cinematic .hero-copy{padding-bottom:72px}.hero-toggle{right:20px;bottom:20px}}

/* Title band at the bottom so the background rally stays visible */
.hero-cinematic .hero-copy{flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;text-align:left;gap:20px 48px;padding-top:0;padding-bottom:clamp(40px,7vh,72px)}
.hero-cinematic .hero-word{font-size:clamp(56px,7.2vw,108px)}
.hero-cinematic .hero-copy h1 .hero-sub{margin:12px 0 0;max-width:none;font-size:clamp(18px,1.9vw,27px)}
.hero-cinematic .hero-cta{margin-top:0;justify-content:flex-start}
.hero-cinematic .hero-shade{background:linear-gradient(180deg,#06120fa6 0%,#06120f00 16%,#06120f00 55%,#06120fd9 88%,#06120ff2 100%)}
@media(max-width:700px){
.hero-cinematic .hero-copy{flex-direction:column;align-items:flex-start;gap:22px;padding-bottom:84px}
.hero-cinematic .hero-word{font-size:clamp(52px,15vw,80px)}
.hero-cinematic .hero-copy h1 .hero-sub{font-size:clamp(18px,5vw,24px)}
.hero-cinematic .hero-shade{background:linear-gradient(180deg,#06120fa6 0%,#06120f00 18%,#06120f00 48%,#06120fe6 86%)}
}
.hero-cinematic .hero-cta{align-items:center;gap:14px}
.hero-cinematic .hero-cta .hero-toggle{position:static}

/* Title, authors and links stacked in the bottom-left band */
.hero-cinematic .hero-copy{flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:0}
.hero-authors{margin:14px 0 0;font-size:14px;letter-spacing:.02em;color:#dfe8da}
.hero-cinematic .hero-cta{margin-top:22px;flex-wrap:wrap;gap:10px 12px}
.hero-link{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border-radius:999px;border:1px solid #ffffff4d;background:#0a1a1540;backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;transition:background .2s,border-color .2s}
.hero-link:hover{text-decoration:none;background:#ffffff1f;border-color:#ffffff99}
.hero-watch{height:52px}
.hero-cinematic .hero-toggle{position:absolute}
@media(max-width:700px){.hero-link{height:40px;padding:0 14px;font-size:12px}.hero-authors{font-size:13px}}
@media(max-width:700px){.hero-cinematic .hero-shade{background:linear-gradient(180deg,#06120fa6 0%,#06120f00 16%,#06120f00 30%,#06120fb3 52%,#06120ff2 78%)}}

/* Centered title band, smaller wordmark */
.hero-cinematic .hero-copy{align-items:center;text-align:center}
.hero-cinematic .hero-copy h1{text-align:center}
.hero-cinematic .hero-word{font-size:clamp(44px,5.2vw,80px)}
.hero-cinematic .hero-copy h1 .hero-sub{margin:10px auto 0}
.hero-cinematic .hero-cta{justify-content:center}
@media(max-width:700px){.hero-cinematic .hero-copy{align-items:center}.hero-cinematic .hero-word{font-size:clamp(42px,12vw,60px)}.hero-cinematic .hero-copy h1 br{display:inline}}

/* TGMM data-collection video in the method section */
.matching-detail .tgmm-video{aspect-ratio:180/137;height:auto;border-radius:10px;overflow:hidden;background:#3f5446}
.matching-detail .tgmm-video video{object-fit:contain}

/* TGMM data-collection video below the abstract */
.tgmm-demo{max-width:930px;margin:0 auto 64px}
.tgmm-demo .tgmm-video{aspect-ratio:180/137;border-radius:12px;overflow:hidden;background:#3f5446}
.tgmm-demo .tgmm-video video{object-fit:contain}
.tgmm-demo figcaption{display:flex;gap:16px;padding-top:12px;font-size:12px;color:var(--muted)}
.tgmm-demo figcaption span{flex-shrink:0;font-weight:700;color:var(--ink)}
.matching-detail .tgmm-figure{border-radius:10px;overflow:hidden;background:#192d30}
@media(max-width:700px){.tgmm-demo{margin-bottom:40px}.tgmm-demo figcaption{display:block}.tgmm-demo figcaption span{display:block;margin-bottom:4px}}

/* TGMM demo: text left, video right */
section.tgmm-demo{max-width:none;margin:0 0 64px;display:grid;grid-template-columns:1fr 1.45fr;gap:48px;align-items:center}
.tgmm-demo-copy h3{font-size:27px;line-height:1.3;letter-spacing:-.8px}
.tgmm-demo-copy p{color:var(--muted);font-size:14px}
section.tgmm-demo figure{margin:0}
@media(max-width:1000px){section.tgmm-demo{gap:30px}}
@media(max-width:700px){section.tgmm-demo{grid-template-columns:1fr;gap:18px;margin-bottom:40px}.tgmm-demo-copy h3{font-size:24px}}

/* Smaller TGMM video with a playback-speed badge */
section.tgmm-demo{grid-template-columns:minmax(0,1fr) minmax(0,520px);justify-content:space-between;gap:56px}
.tgmm-demo .tgmm-video{position:relative}
.speed-badge{position:absolute;top:12px;left:12px;z-index:1;padding:4px 10px;border-radius:999px;background:#0b1d18cc;color:#f2f7ea;font-size:11px;font-weight:700;letter-spacing:.04em;pointer-events:none}
@media(max-width:700px){section.tgmm-demo{grid-template-columns:1fr}}

/* Simulated rallies: two clips side by side before the interactive demo */
.sim-rallies{padding:8px 0 56px}
.sim-rallies>p:not(.section-label){color:var(--muted);font-size:16px;max-width:740px}
.sim-rally-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.sim-rally-video{margin:0;aspect-ratio:1280/542;border-radius:12px;overflow:hidden;background:#13212d}
.sim-rally-video video{object-fit:cover}
@media(max-width:700px){.sim-rally-grid{grid-template-columns:1fr;gap:14px}.sim-rallies{padding-bottom:36px}}

/* Real-world demonstrations: alternating text / video rows */
.demo-row{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:48px;align-items:center;padding:8px 0 40px}
.demo-row+.demo-row{border-top:1px solid var(--line);padding-top:48px}
.demo-row-flip{grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr)}
.demo-row-flip .demo-row-copy{order:2}
.demo-row-copy h3{font-size:24px;line-height:1.3;letter-spacing:-.6px}
.demo-row-copy p{color:var(--muted);font-size:14px}
.demo-row-media{margin:0}
.demo-row-media .demo-video-wrap{border-radius:12px;overflow:hidden;background:#0c1a16}
.demo-row-media .serve-video{aspect-ratio:25/19}
.demo-row-media .rally-video{aspect-ratio:16/9}
.demo-row-media video{object-fit:contain}
@media(max-width:700px){.demo-row,.demo-row-flip{grid-template-columns:1fr;gap:16px;padding-bottom:28px}.demo-row-flip .demo-row-copy{order:0}.demo-row+.demo-row{padding-top:32px}}
