From 9b6843ef851f1f668dcfbd588bd8d8d6bed32911 Mon Sep 17 00:00:00 2001
From: Ali Tleis <tleis.a@northeastern.edu>
Date: Wed, 11 Nov 2026 14:17:45 -0500
Subject: [PATCH] Update download label and add YouTube tutorial

---
 docs/css/site.css | 21 +++++++++++++++++++++
 docs/index.html   | 16 ++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/docs/css/site.css b/docs/css/site.css
index 2310110..49dca76 100644
--- a/docs/css/site.css
+++ b/docs/css/site.css
@@ -211,6 +211,27 @@ h1, h2 { margin: 0; font-weight: 600; letter-spacing: -.025em; }
 .how-text > p { margin-top: 10px; color: var(--soft); }
 @media (max-width: 900px) { .how { grid-template-columns: 1fr; } }
 
+.tutorial {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    margin-top: 18px;
+    padding: 18px;
+    border: 1px solid var(--line-strong);
+    border-radius: 10px;
+    background: var(--panel);
+    color: var(--text);
+    text-decoration: none;
+    transition: border-color .2s ease, background-color .2s ease;
+}
+.tutorial:hover { border-color: var(--amber); background: rgba(242, 169, 59, .06); color: var(--text); }
+.tutorial-icon { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 10px; background: rgba(242, 169, 59, .12); color: var(--amber); }
+.tutorial-icon svg { width: 24px; height: 24px; }
+.tutorial-copy { display: grid; gap: 3px; }
+.tutorial-copy strong { font-size: 16px; font-weight: 600; }
+.tutorial-copy > span { font-size: 14px; color: var(--soft); }
+.tutorial-arrow { flex: none; width: 20px; height: 20px; margin-left: auto; color: var(--amber); }
+
 .flow { list-style: none; margin: 26px 0 0; padding: 0; }
 .node {
     position: relative;
diff --git a/docs/index.html b/docs/index.html
index 2da41be..175639d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -22,7 +22,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@500&display=swap" rel="stylesheet">
     <script>document.documentElement.classList.add('js-motion');</script>
-    <link rel="stylesheet" href="css/site.css?v=20261027o">
+    <link rel="stylesheet" href="css/site.css?v=20261111a">
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>
@@ -67,7 +67,7 @@ <h1>Upscale and smooth <span>anime in Resolve.</span></h1>
             <div class="actions">
                 <a class="btn btn-amber" href="download.html">
                     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg>
-                    Download, free
+                    Download
                 </a>
                 <a class="btn" href="help.html#windows">How to install</a>
             </div>
@@ -88,6 +88,7 @@ <h1>Upscale and smooth <span>anime in Resolve.</span></h1>
     </section>
 
     <section class="section how" id="how" aria-labelledby="how-title" data-reveal>
+        <div class="how-media">
             <figure class="panel film">
                 <div class="player">
                     <video src="assets/demo/promo.mp4" poster="assets/demo/promo-resolve.jpg" controls playsinline preload="none"
@@ -99,6 +100,17 @@ <h1>Upscale and smooth <span>anime in Resolve.</span></h1>
                 </div>
                 <figcaption>Footage from <a href="https://studio.blender.org/projects/hero/">Hero</a> by the Blender Foundation, <a href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>, edited.</figcaption>
             </figure>
+            <a class="tutorial" href="https://www.youtube.com/watch?v=5XfLBFodP0A" target="_blank" rel="noopener noreferrer">
+                <span class="tutorial-icon" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2a2.8 2.8 0 0 0-2-2C17.8 4.7 12 4.7 12 4.7s-5.8 0-7.6.5a2.8 2.8 0 0 0-2 2A29 29 0 0 0 2 12a29 29 0 0 0 .4 4.8 2.8 2.8 0 0 0 2 2c1.8.5 7.6.5 7.6.5s5.8 0 7.6-.5a2.8 2.8 0 0 0 2-2A29 29 0 0 0 22 12a29 29 0 0 0-.4-4.8ZM10 15.2V8.8l5.5 3.2-5.5 3.2Z"/></svg>
+                </span>
+                <span class="tutorial-copy">
+                    <strong>Watch the full tutorial</strong>
+                    <span>Follow along on YouTube</span>
+                </span>
+                <svg class="tutorial-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 17 17 7M7 7h10v10"/></svg>
+            </a>
+        </div>
         <div class="how-text">
             <h2 id="how-title">How it works</h2>
             <p>Open the panel from Workspace, Scripts and put the playhead on a clip. This is the path it takes, and the film walks through it in 34 seconds.</p>