feat(site): show the verified rate per product alongside per record

Most smartphone records are regional and RAM variants of one phone, and
no source documents an individual SKU, so the per-record figure reads
lower than how well the products in the dataset are actually sourced.
The homepage now shows both readings of the same verifications, the
per-product one as a secondary line under the headline.

The block removes itself when the snapshot predates the field rather
than rendering a zero.

Refs #1

Author: Seungpyo1007

site/src/pages/index.astro

@@ -275,6 +275,13 @@ const endpoints = [
               <div class="verify-pct" id="verify-pct">—</div>
               <div class="verify-pct-l">records verified<br /><span id="verify-count">loading…</span></div>
             </div>
+            <!-- Most smartphone records are regional/RAM variants of one phone,
+                 and no source documents an individual SKU — so the same
+                 verifications are also shown per product. -->
+            <div class="verify-headline verify-models">
+              <div class="verify-pct" id="verify-models-pct">—</div>
+              <div class="verify-pct-l">models verified<br /><span id="verify-models-count">loading…</span></div>
+            </div>
             <div class="verify-bar" id="verify-bar" role="img" aria-label="Verification band distribution">
               <span class="vb green" style="width:0%"></span>
               <span class="vb yellow" style="width:0%"></span>

site/src/scripts/techapi.js

@@ -500,6 +500,20 @@ function countUp(node, target, opts = {}) {
 
     countEl.textContent = `${(t.verified || 0).toLocaleString()} / ${total.toLocaleString()}`;
 
+    // Same verifications counted per product. Older snapshots predate the
+    // field, so the block only appears once the numbers are actually there.
+    const mTotal = t.models || 0;
+    const mPctEl = document.getElementById("verify-models-pct");
+    if (mPctEl && mTotal) {
+      const mPct = t.verified_models_pct != null
+        ? t.verified_models_pct : (t.verified_models || 0) / mTotal * 100;
+      mPctEl.textContent = mPct.toFixed(1) + "%";
+      setText("verify-models-count",
+        `${(t.verified_models || 0).toLocaleString()} / ${mTotal.toLocaleString()}`);
+    } else if (mPctEl) {
+      mPctEl.closest(".verify-models")?.remove();
+    }
+
     const g = t.green || 0, y = t.yellow || 0, r = t.red || 0;
     const sum = Math.max(1, g + y + r);
     const seg = bar.querySelectorAll(".vb");

site/src/styles/techapi.css

@@ -509,6 +509,10 @@ section.block { padding: 76px 0; border-top: 1px solid var(--border); }
 .verify-pct { font-family: var(--mono); font-size: clamp(40px, 6vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.03em; color: var(--vg); }
 .verify-pct-l { color: var(--muted); font-size: 13px; line-height: 1.5; }
 .verify-pct-l span { color: var(--fg-2); font-family: var(--mono); }
+/* The per-product figure is the same verifications seen another way, so it sits
+   under the headline as a secondary reading rather than competing with it. */
+.verify-models { margin-top: 14px; }
+.verify-models .verify-pct { font-size: clamp(24px, 3.4vw, 34px); color: var(--fg-2); }
 .verify-bar { display: flex; height: 14px; margin-top: 24px; border-radius: 4px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); }
 .verify-bar .vb { height: 100%; transition: width .9s cubic-bezier(.2,.7,.2,1); }
 .verify-bar .vb.green { background: var(--vg); }