surver introduction on form

Not shown: a picture, a generated file, or past the length shown per change.

@@ -26,5 +26,10 @@ const cond = (x) => (x.if ? JSON.stringify(x.if) : undefined);
 
       <section class="sv-step" data-step="start" data-title="Start">
-        <h2>Before you begin</h2>
+        <h2>What this is</h2>
+        <div class="sv-about">
+          <p>State of Cannabis is a yearly survey run by the Cannabis Freedom Index. The index scores what the law allows in every country. This survey asks the people who live under those laws about the rest: what they do, what they believe, and what they see around them.</p>
+          <p>It is for everyone, whether you use cannabis, grow it, study it or have never touched it. The answers are counted and <a href={`${base}survey/`}>published openly</a> each year, beside each country's score, so that law and life can be compared. <a href={`${base}culture/`}>More about the project →</a></p>
+        </div>
+        <h3>Before you begin</h3>
         <ul class="sv-points">
           <li>It takes about ten minutes. Almost every question is optional, and whole sections are skipped when they do not apply to you.</li>

@@ -1570,2 +1570,5 @@ button.sv-row .sv-chip { font: 400 10.5px var(--mono); text-transform: uppercase
 .front-call:hover .fc-go { text-decoration: underline; text-underline-offset: 4px; }
 @media (max-width: 700px) { .front-call { grid-template-columns: 1fr; justify-items: start; } }
+.sv-about { max-width: 68ch; display: grid; gap: 12px; margin: 10px 0 6px; font-size: 16.5px; line-height: 1.55; }
+.sv-about p { margin: 0; }
+.sv-about a { text-decoration: underline; text-underline-offset: 3px; }