Update ai-check.html

ai-check.html

@@ -176,6 +176,7 @@
       </section>
     </div>
 
+    <!-- Extra sections from second file -->
     <!-- Extra sections from second file -->
     <section class="mt-10 space-y-4">
       <h2 class="text-xl md:text-2xl font-semibold">Why choose this AI content checker?</h2>
@@ -228,8 +229,8 @@
         Ideal for anyone curious about AI detection or building their own detector interface.
       </p>
 
-      <div class="grid md:grid-cols-3 gap-5 mt-3">
-        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4 text-xs">
+      <div class="grid md:grid-cols-3 gap-5 mt-3 text-xs">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
           <div class="flex items-center gap-3 mb-2">
             <div class="w-9 h-9 rounded-full bg-sky-500/20 flex items-center justify-center">
               <span class="text-lg">🎓</span>
@@ -241,7 +242,7 @@
           </p>
         </div>
 
-        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4 text-xs">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
           <div class="flex items-center gap-3 mb-2">
             <div class="w-9 h-9 rounded-full bg-amber-500/20 flex items-center justify-center">
               <span class="text-lg">🧑‍🏫</span>
@@ -253,7 +254,7 @@
           </p>
         </div>
 
-        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4 text-xs">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
           <div class="flex items-center gap-3 mb-2">
             <div class="w-9 h-9 rounded-full bg-rose-500/20 flex items-center justify-center">
               <span class="text-lg">💻</span>
@@ -267,6 +268,54 @@
       </div>
     </section>
 
+    <section class="mt-10 space-y-4">
+      <h2 class="text-xl md:text-2xl font-semibold">How does this AI content checker work?</h2>
+      <p class="text-sm text-slate-300">
+        The scoring is intentionally simple, so you can read the JavaScript and fully understand it.
+      </p>
+
+      <div class="grid md:grid-cols-3 gap-5 mt-3 text-xs">
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-fuchsia-500/20 flex items-center justify-center">
+              <span class="text-lg">1️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Tokenise the text</p>
+          </div>
+          <p>
+            Text is lower-cased and split into words and sentences for basic statistics.
+          </p>
+        </div>
+
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-indigo-500/20 flex items-center justify-center">
+              <span class="text-lg">2️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Measure patterns</p>
+          </div>
+          <p>
+            It looks at vocabulary variety and average sentence length — long, repetitive text can
+            look more AI-like.
+          </p>
+        </div>
+
+        <div class="bg-slate-900/70 border border-slate-800 rounded-2xl p-4">
+          <div class="flex items-center gap-3 mb-2">
+            <div class="w-9 h-9 rounded-full bg-emerald-500/20 flex items-center justify-center">
+              <span class="text-lg">3️⃣</span>
+            </div>
+            <p class="font-semibold text-sm">Compute a score</p>
+          </div>
+          <p>
+            Those metrics are combined into an AI-generated probability (0–100%), displayed and
+            saved in your PDF report.
+          </p>
+        </div>
+      </div>
+    </section>
+
+
     <section class="mt-12">
       <h2 class="text-xl md:text-2xl font-semibold mb-3">Reviews for this AI checker</h2>
       <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 md:p-6 relative overflow-hidden">