@bongos/core 1.20.48 → 1.20.50

package/modules/public-landing/public/projects.html

@@ -107,6 +107,47 @@ h1[tabindex="-1"]:focus:not(:focus-visible){outline:none;}
    pair steps aside for the checklist */
 .createSplit.wizDone{display:block;}
 .createSplit.wizDone .bongoCell{display:none;}
+/* the front door (task 1004417, BV2.PS05): two screens before the numbered
+   steps. The rail is the steps', so it steps aside for both; the fork takes the
+   whole card like the done panel, the bongo pair giving way to the seed. */
+#view-new .card.wizFront .steps{display:none;}
+.createSplit.wizFork{display:block;}
+.createSplit.wizFork .bongoCell{display:none;}
+/* the one tick: a hairline row, the box in the accent, the whole row the target */
+.termsAck{display:flex;gap:14px;align-items:flex-start;cursor:pointer;max-width:62ch;margin:6px 0 0;padding:16px 0 10px;border-top:1px solid var(--rule);}
+.termsAck input{width:20px;height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent);}
+.termsAck span{font-size:16px;line-height:1.5;color:var(--ink);}
+.termsRead{display:inline-block;margin-left:34px;padding:3px 0;min-height:24px;line-height:18px;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
+/* the door pill (DESIGN.md): two equal doors joined into one object — one grid
+   of two equal tracks inside one hairline pill; the demo door is transparent at
+   rest, the accent only on the one that goes on */
+.doorPill{display:inline-grid;grid-template-columns:1fr 1fr;gap:6px;padding:7px;margin:6px 0 16px;border-radius:999px;border:1px solid var(--rule);background:color-mix(in srgb,var(--bg) 55%,transparent);}
+#view-new .doorPill .btn.ghost{border-color:transparent;}
+#view-new .doorPill .btn.ghost:hover{border-color:var(--rule);}
+.demoSoon{font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:52ch;margin:0 0 16px;}
+/* the seed on the field plate: the world's own render, a hairline orbit and a
+   dashed one, the chrome blob cut out on top — nothing drawn but hairlines */
+.forkBody{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,380px);gap:48px;align-items:center;}
+.forkStage{position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:var(--sky-bg) var(--field-plate) center/cover no-repeat;}
+.forkOrbit{position:absolute;inset:20%;border:1px solid var(--rule);border-radius:50%;}
+.forkOrbit.forkOrbitDash{inset:9%;border-style:dashed;border-color:var(--rule-soft);}
+.forkSeed{position:absolute;left:50%;top:50%;width:44%;height:auto;transform:translate(-50%,-50%);}
+/* the two routes on one hairline band */
+.forkRoutes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;margin-top:40px;}
+.forkRoutes>div{border-top:1px solid var(--rule);padding-top:18px;}
+.routeLbl{font-family:var(--label-face);font-size:var(--label-size);letter-spacing:var(--label-space);text-transform:uppercase;color:var(--ink-faint);margin:0;}
+.routeT{font-family:var(--font-display);font-weight:300;font-size:26px;letter-spacing:-.02em;line-height:1.1;text-transform:lowercase;color:var(--ink);margin:8px 0 0;}
+.routeD{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:8px 0 0;max-width:52ch;}
+@media (max-width:840px){
+  .forkBody,.forkRoutes{grid-template-columns:1fr;gap:28px;}
+  .forkStage{max-width:300px;}
+  .forkRoutes{margin-top:32px;}
+}
+/* under 520 the two doors cannot sit side by side at 48px, so they stack —
+   still two equal doors in one object */
+@media (max-width:520px){
+  .doorPill{display:grid;grid-template-columns:1fr;width:100%;border-radius:32px;}
+}
 
 /* a field: the label in the label face above, the input on one bottom
    hairline that takes ink on focus (the bar's search field), the hint under
@@ -1085,23 +1126,24 @@ summary{min-height:24px;padding:3px 0;}
 
 <!-- ══════════════════ VIEW · NEW PROJECT ══════════════════════════════════
      The whole create wizard, absorbed from /create (task 1002763; direction
-     §4 — that route now 302s here). Eight panels behind the six-beat rail; the
+     §4 — that route now 302s here). The front door's two screens (terms, then
+     demo or create — task 1004417), then eight panels behind the rail; the
      wizard block in the script below drives them. Same trust boundary as
      ever: every button here only ENQUEUES a provisioning request (ADR 0111).
-     The name panel carries a static `on` so a no-script visitor still reads
+     The terms panel carries a static `on` so a no-script visitor still reads
      step 1 rather than an empty card. -->
 <section id="view-new" hidden>
   <div class="wrap viewWrap">
-    <div class="card">
+    <div class="card wizFront">
       <ol class="steps" aria-label="Creation steps">
-        <li class="now" data-step="1" aria-current="step"><span class="snum">1</span><span class="slbl">Name</span></li>
-        <li data-step="2"><span class="snum">2</span><span class="slbl">Type</span></li>
-        <li data-step="3"><span class="snum">3</span><span class="slbl">About</span></li>
-        <li data-step="4"><span class="snum">4</span><span class="slbl">Modules</span></li>
-        <li data-step="5"><span class="snum">5</span><span class="slbl">Home</span></li>
-        <li data-step="6"><span class="snum">6</span><span class="slbl">Address</span></li>
-        <li data-step="7"><span class="snum">7</span><span class="slbl">App</span></li>
-        <li data-step="8"><span class="snum">8</span><span class="slbl">Create</span></li>
+        <li class="now" data-step="3" aria-current="step"><span class="snum">1</span><span class="slbl">Name</span></li>
+        <li data-step="4"><span class="snum">2</span><span class="slbl">Type</span></li>
+        <li data-step="5"><span class="snum">3</span><span class="slbl">About</span></li>
+        <li data-step="6"><span class="snum">4</span><span class="slbl">Modules</span></li>
+        <li data-step="7"><span class="snum">5</span><span class="slbl">Home</span></li>
+        <li data-step="8"><span class="snum">6</span><span class="slbl">Address</span></li>
+        <li data-step="9"><span class="snum">7</span><span class="slbl">App</span></li>
+        <li data-step="10"><span class="snum">8</span><span class="slbl">Create</span></li>
       </ol>
 
       <div class="createSplit">
@@ -1140,17 +1182,85 @@ summary{min-height:24px;padding:3px 0;}
             <div class="alert" id="wizGateAlert" role="alert"></div>
           </section>
 
-          <!-- step 1 · name (the hub's original step-1 form, now the wizard's) -->
-          <section class="panel on" id="panel-name" aria-labelledby="name-h">
-            <h1 id="name-h">Start a project</h1>
-            <p class="lede">Your own project: its own repository, its own home on the web, and a hall of AI builders
-              who do the building. You set the direction; agents lay down the code.</p>
+          <!-- step 1 · the front door, part one: the terms (task 1004417, BV2.PS05; the
+               canvas's Main.dc.html, docs/design/project-startup-direction.md). Before
+               anything is asked, the founder acknowledges the terms. Sign-in stays where
+               it was: the gate above comes first. The tick rides the create request as
+               `terms_acknowledged` and the SERVER records which terms version it was
+               (modules/provisioning/terms-ack.js), so this page never names one. The rail
+               is for the numbered steps, so it steps aside on both front-door screens. -->
+          <section class="panel on" id="panel-terms" aria-labelledby="terms-h">
             <!-- The standup already being watched, kept one click away (task 1003503).
-                 A deliberate "New project" click opens THIS fresh step 1; the previous
+                 A deliberate "New project" click opens THIS fresh step 1 (the front door since task 1004417); the previous
                  project's done panel is reachable here instead of taking the panel over.
                  Baked markup, hidden until enter() has a record to name. -->
             <p class="resumeOffer" id="wizResume" hidden>still watching <strong id="wizResumeName">your project</strong> — <a href="#" id="wizResumeGo">resume it</a></p>
-            <form id="newForm" data-next="2">
+            <h1 id="terms-h">Anything you want to make</h1>
+            <p class="lede"><span data-brand-product-inline>Cloud Bongos</span> can be used for any project, by any kind of project entity: from a solo developer to a large corporation.</p>
+            <p class="lede">Because of the sensitive nature of this platform and its projects, we highly recommend you review the legal terms as diligently as is appropriate for your project entity type.</p>
+            <form data-next="2">
+              <label class="termsAck">
+                <input type="checkbox" id="termsAck" aria-describedby="h-terms">
+                <span>I can sign legally, or can get a signature, for the use of this platform, and I acknowledge the terms and conditions.</span>
+              </label>
+              <a class="termsRead" href="/terms" target="_blank" rel="noopener">Read the terms</a>
+              <div class="hint" id="h-terms">&nbsp;</div>
+              <div class="nav">
+                <span></span>
+                <button type="submit" class="btn">Proceed to project creation</button>
+              </div>
+            </form>
+          </section>
+
+          <!-- step 2 · the front door, part two: demo or create (task 1004417; the canvas's
+               Fork.dc.html). Two equal ways in, so it is the world's door pill (DESIGN.md):
+               two doors joined into one object, equal in size, the accent only on the one
+               that goes on. The seed stands on the field plate beside it. The demo is its
+               own task (BV2.PS09); until it ships, its door says so here instead of
+               leading anywhere. -->
+          <section class="panel" id="panel-fork" aria-labelledby="fork-h">
+            <div class="forkBody">
+              <div>
+                <h1 id="fork-h">You are now creating a digital planet</h1>
+                <p class="lede">If that sounds like too much for now, try our demo system. Otherwise, proceed with planet initiation :)</p>
+                <form data-next="3">
+                  <div class="doorPill" role="group" aria-label="How to begin">
+                    <button type="button" class="btn big ghost" id="wizDemo" aria-controls="demoSoon" aria-expanded="false">Try the demo</button>
+                    <button type="submit" class="btn big">Begin planet creation</button>
+                  </div>
+                  <p class="demoSoon" id="demoSoon" hidden>The demo isn’t open yet. It’s being built now; until it opens, begin planet creation to make a real project.</p>
+                  <div class="nav">
+                    <button type="button" class="btn ghost" data-back="1">← Back</button>
+                    <span></span>
+                  </div>
+                </form>
+              </div>
+              <div class="forkStage" aria-hidden="true">
+                <span class="forkOrbit"></span>
+                <span class="forkOrbit forkOrbitDash"></span>
+                <img class="forkSeed" src="/assets/world/r2-chrome-blob-one-cut.webp" alt="">
+              </div>
+            </div>
+            <div class="forkRoutes">
+              <div>
+                <p class="routeLbl">Route 1 · demo · coming soon</p>
+                <p class="routeT">Training wheels</p>
+                <p class="routeD">Pick how many people, how many hours each, and an idea. The platform checks that it fits, picks the settings, and you learn by building something small. Keep your planet at the end if you like it.</p>
+              </div>
+              <div>
+                <p class="routeLbl">Route 2 · planet creation</p>
+                <p class="routeT">Create your planet</p>
+                <p class="routeD">Answer a few questions about your project, choose where its code and its app live, and it stands up as yours.</p>
+              </div>
+            </div>
+          </section>
+
+          <!-- step 3 · name (the hub's original step-1 form, now the wizard's) -->
+          <section class="panel" id="panel-name" aria-labelledby="name-h">
+            <h1 id="name-h">Start a project</h1>
+            <p class="lede">Your own project: its own repository, its own home on the web, and a hall of AI builders
+              who do the building. You set the direction; agents lay down the code.</p>
+            <form id="newForm" data-next="4">
               <label class="wizField"><span>Project name</span>
                 <input type="text" id="newName" placeholder="What should it be called?" autocomplete="off" maxlength="80" aria-label="Project name">
                 <div class="hint" id="h-name">&nbsp;</div>
@@ -1174,7 +1284,7 @@ summary{min-height:24px;padding:3px 0;}
           <section class="panel" id="panel-type" aria-labelledby="type-h">
             <h1 id="type-h">What kind of project is it?</h1>
             <p class="lede">Pick the shape that fits best — it’s how the project is listed on the map, and you can change it later from the project’s own page. Not sure is a fine answer.</p>
-            <form data-next="3">
+            <form data-next="5">
               <div class="typeCards" id="typeCards" role="group" aria-label="Project type">
                 <button type="button" class="tpill" data-type="game" aria-pressed="false">Game</button>
                 <button type="button" class="tpill" data-type="research" aria-pressed="false">Research</button>
@@ -1188,7 +1298,7 @@ summary{min-height:24px;padding:3px 0;}
               </div>
               <div class="hint" id="h-projtype">&nbsp;</div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="1">← Back</button>
+                <button type="button" class="btn ghost" data-back="3">← Back</button>
                 <button type="submit" class="btn">Next →</button>
               </div>
             </form>
@@ -1206,7 +1316,7 @@ summary{min-height:24px;padding:3px 0;}
           <section class="panel" id="panel-detail" aria-labelledby="detail-h">
             <h1 id="detail-h">Tell us about it</h1>
             <p class="lede">Optional — skip it and nothing about your project changes. Answering shapes what we set up for you, and a description is what puts the project on the public map.</p>
-            <form data-next="4">
+            <form data-next="6">
               <label class="wizField"><span>What are you building? <small>(a sentence or two)</small></span>
                 <textarea id="f-desc" rows="3" maxlength="600" placeholder="A co-op farming game where the seasons never repeat."></textarea>
               </label>
@@ -1219,7 +1329,7 @@ summary{min-height:24px;padding:3px 0;}
               </div>
               <div class="reassure" id="detailSkipNote"></div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="2">← Back</button>
+                <button type="button" class="btn ghost" data-back="4">← Back</button>
                 <span class="navPair">
                   <button type="button" class="btn ghost" id="skipDetail">Skip for now</button>
                   <button type="submit" class="btn">Next →</button>
@@ -1242,7 +1352,7 @@ summary{min-height:24px;padding:3px 0;}
           <section class="panel" id="panel-modules" aria-labelledby="mod-h">
             <h1 id="mod-h">What it comes with</h1>
             <p class="lede">Optional — skip it and you get the suggested set below, shaped by what you just told us. These are extras on top of everything every project already has, and you can switch any of them on or off later.</p>
-            <form data-next="5">
+            <form data-next="7">
               <div class="wizField"><span id="modLbl">Extras for this project</span>
                 <!-- the catalog search (task 1002340, BV1.R21). The wizard's own
                      search idiom (#ghSearch): a plain field on one hairline, no
@@ -1258,7 +1368,7 @@ summary{min-height:24px;padding:3px 0;}
               <div class="reassure" id="modCoreNote"></div>
               <div class="hint" id="h-modules">&nbsp;</div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="3">← Back</button>
+                <button type="button" class="btn ghost" data-back="5">← Back</button>
                 <span class="navPair">
                   <button type="button" class="btn ghost" id="skipModules">Skip for now</button>
                   <button type="submit" class="btn">Next →</button>
@@ -1271,7 +1381,7 @@ summary{min-height:24px;padding:3px 0;}
           <section class="panel" id="panel-home" aria-labelledby="home-h">
             <h1 id="home-h">Where the code lives</h1>
             <p class="lede">Every project is a real GitHub repository that you own. Start from a clean slate, or bring a repo you already have.</p>
-            <form data-next="6">
+            <form data-next="8">
               <div class="choices" role="group" aria-label="Starting point">
                 <button type="button" class="choice" id="c-green" aria-pressed="true">
                   <!-- token-built, not platform orange — public-landing/ ships wholesale to
@@ -1337,7 +1447,7 @@ summary{min-height:24px;padding:3px 0;}
               </div>
               <div class="hint" id="h-home">&nbsp;</div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="4">← Back</button>
+                <button type="button" class="btn ghost" data-back="6">← Back</button>
                 <button type="submit" class="btn">Next →</button>
               </div>
             </form>
@@ -1355,7 +1465,7 @@ summary{min-height:24px;padding:3px 0;}
           <section class="panel" id="panel-address" aria-labelledby="addr-h">
             <h1 id="addr-h">Its address in the sky</h1>
             <p class="lede">The handle names your project on the platform — and its address comes with it. Once it stands up, a few GitHub steps (the next screen walks you through them) switch sign-in on.</p>
-            <form data-next="7">
+            <form data-next="9">
               <label class="wizField"><span>Project handle</span>
                 <input type="text" id="f-slug" placeholder="mercury" autocomplete="off" maxlength="40" spellcheck="false">
                 <div class="hint" id="h-slug">&nbsp;</div>
@@ -1377,7 +1487,7 @@ summary{min-height:24px;padding:3px 0;}
                 </label>
               </div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="5">← Back</button>
+                <button type="button" class="btn ghost" data-back="7">← Back</button>
                 <button type="submit" class="btn">Next →</button>
               </div>
             </form>
@@ -1394,7 +1504,7 @@ summary{min-height:24px;padding:3px 0;}
             <h1 id="app-h">Where your app will run</h1>
             <p class="appHall"><b>We host your Builders' hall</b> — the place where the project gets built — at the address you just chose. There is nothing for you to set up.</p>
             <p class="lede">Your app is the thing the project builds. Choose where it should run, or decide later.</p>
-            <form data-next="8">
+            <form data-next="10">
               <fieldset class="appOpts" id="appOpts">
                 <legend>Where your app runs</legend>
                 <label class="appOpt" id="appOptRender">
@@ -1452,7 +1562,7 @@ summary{min-height:24px;padding:3px 0;}
                 <div class="hint" id="h-render" role="status">&nbsp;</div>
               </div>
               <div class="nav">
-                <button type="button" class="btn ghost" data-back="6">← Back</button>
+                <button type="button" class="btn ghost" data-back="8">← Back</button>
                 <button type="submit" class="btn">Next →</button>
               </div>
             </form>
@@ -1465,7 +1575,7 @@ summary{min-height:24px;padding:3px 0;}
             <ul class="review" id="reviewList"></ul>
             <div class="alert" id="createAlert" role="alert"></div>
             <div class="nav">
-              <button type="button" class="btn ghost" data-back="7">← Back</button>
+              <button type="button" class="btn ghost" data-back="9">← Back</button>
               <button type="button" class="btn big" id="doCreate">Create my project</button>
             </div>
             <p class="finePrint">This files the request; the control plane does the real standup and nothing touches servers from this page. You'll get the few steps only you can do right after.</p>
@@ -3805,8 +3915,12 @@ summary{min-height:24px;padding:3px 0;}
        so a draft written under either older numbering must be ignored, not
        reinterpreted — a stale step 4 meant Address under v1 and Home under v3,
        and replaying it would land on the wrong panel with the rail already
-       marking the skipped ones done. Bump this key on EVERY renumbering. */
-    var DRAFT_KEY = 'cb-create-draft-v5';
+       marking the skipped ones done. Bump this key on EVERY renumbering
+       (-v6: the front door's two screens took steps 1 and 2, task 1004417). */
+    /* `termsAck` is the front door's one tick (task 1004417). It is the founder's
+       own answer, so it lives in the draft like every other one and survives the
+       GitHub round-trip; the server, not this page, names the terms version. */
+    var DRAFT_KEY = 'cb-create-draft-v6';
     var CREATED_KEY = 'cb-created-instance';
     /* `description` + `teamShape` are the optional About step (task 1002334) —
        both legitimately stay empty, and empty is what the create request omits. */
@@ -3815,7 +3929,7 @@ summary{min-height:24px;padding:3px 0;}
        request omits the field), [] = the owner switched them all off, [...] =
        what they picked. Never seed it with the preselect — that would store an
        answer nobody gave. */
-    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later' };
+    var state = { step: 0, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', termsAck: false };
     try { Object.assign(state, JSON.parse(sessionStorage.getItem(DRAFT_KEY) || '{}')); } catch (e) {}
     var authKnown = false;   /* flips true when the boot's /me settles, either way */
 
@@ -3829,7 +3943,7 @@ summary{min-height:24px;padding:3px 0;}
         state.name = handedName.trim().slice(0, 80);
         state.slug = deriveSlug(state.name); state.slugTouched = false;
         state.repo = deriveRepo(state.name); state.repoTouched = false;
-        state.step = state.step >= 1 && state.step <= 8 ? state.step : 1;
+        state.step = state.step >= 1 && state.step <= 10 ? state.step : 1;
         try { sessionStorage.setItem(DRAFT_KEY, JSON.stringify(state)); } catch (e) {}
       }
     } catch (e) {}
@@ -4021,18 +4135,19 @@ summary{min-height:24px;padding:3px 0;}
     }
 
     /* ── step navigation ──
-       Nine steps since task 1004351: gate 0 · name 1 · type 2 · about 3 ·
-       modules 4 · home 5 · address 6 · app 7 · review 8 · done 9 (the rail shows
-       1-8; done marks it all). About and Modules are the two steps Next can pass with
-       nothing filled in. */
-    var panels = { 0: 'panel-gate', 1: 'panel-name', 2: 'panel-type', 3: 'panel-detail', 4: 'panel-modules', 5: 'panel-home', 6: 'panel-address', 7: 'panel-app', 8: 'panel-review', 9: 'panel-done' };
+       Since task 1004417 the front door comes first: gate 0 · terms 1 · fork 2 ·
+       name 3 · type 4 · about 5 · modules 6 · home 7 · address 8 · app 9 · review 10 ·
+       done 11. The rail numbers 3-10 as its 1-8 and steps aside on 1 and 2; done
+       marks it all. About and Modules are the two steps Next can pass with nothing
+       filled in. */
+    var panels = { 0: 'panel-gate', 1: 'panel-terms', 2: 'panel-fork', 3: 'panel-name', 4: 'panel-type', 5: 'panel-detail', 6: 'panel-modules', 7: 'panel-home', 8: 'panel-address', 9: 'panel-app', 10: 'panel-review', 11: 'panel-done' };
     /* the rail at the done panel (task 1003244): "done" is the Create step
        still running — the marker stays on 5 until the project actually
        answers, and only then does the whole rail read finished. aria-current
        tells a screen reader the same thing. */
     function paintRail(step) {
-      var landed = step === 9 && !!(live && live.instStatus === 'active');
-      var cur = step === 9 ? 8 : step;
+      var landed = step === 11 && !!(live && live.instStatus === 'active');
+      var cur = step === 11 ? 10 : step;
       root.querySelectorAll('.steps li').forEach(function (li) {
         var n = Number(li.getAttribute('data-step'));
         var now = !landed && n === cur;
@@ -4043,7 +4158,7 @@ summary{min-height:24px;padding:3px 0;}
            the button role, the tab stop and the data-goto the delegated handler
            below reads. The done panel offers none — the project is filed, and
            there is nothing behind it to change. */
-        if (step < 9 && n < cur) {
+        if (step < 11 && n < cur) {
           li.setAttribute('role', 'button');
           li.setAttribute('tabindex', '0');
           li.setAttribute('data-goto', String(n));
@@ -4062,7 +4177,11 @@ summary{min-height:24px;padding:3px 0;}
       paintRail(step);
       saveDraft();
       /* the done step takes the whole card — the bongo pair steps aside */
-      root.querySelector('.createSplit').classList.toggle('wizDone', step === 9);
+      root.querySelector('.createSplit').classList.toggle('wizDone', step === 11);
+      /* the front door (task 1004417): no rail on its two screens, and the fork
+         takes the whole card for the seed on its plate */
+      root.querySelector('.card').classList.toggle('wizFront', step === 1 || step === 2);
+      root.querySelector('.createSplit').classList.toggle('wizFork', step === 2);
       /* focus moves ONLY on a deliberate step (the hub rule setView already
          applies to this view: never on boot, never on a background settle) */
       if (moveFocus) {
@@ -4074,17 +4193,17 @@ summary{min-height:24px;padding:3px 0;}
          draft's owner with myLogin()'s placeholder) */
       /* the picker repaints on entry, not once at boot: the owner can walk back
          to the Type step and change the answer the preselect is keyed to */
-      if (step === 4) renderModules();
-      if (step === 5) { syncHome(); if (authKnown) ensureRepoAccess(); }
+      if (step === 6) renderModules();
+      if (step === 7) { syncHome(); if (authKnown) ensureRepoAccess(); }
       /* a resumed draft can land PAST the Home step with the probe never run —
          Create would then file a repo it promised to make but never did */
-      else if (step > 5 && step < 9 && authKnown && repoAccess === null) ensureRepoAccess();
+      else if (step > 7 && step < 11 && authKnown && repoAccess === null) ensureRepoAccess();
       /* re-check on every entry, not just on typing: a resumed draft arrives here with
          a handle nobody has asked the server about, and a handle free ten minutes ago
          may not be now (task 1002898 N10) */
-      if (step === 6) { checkSlugAvailable(); renderAddrPanel(); }
-      if (step === 7) { syncAppStep(); syncRenderSetup(); }
-      if (step === 8) renderReview();
+      if (step === 8) { checkSlugAvailable(); renderAddrPanel(); }
+      if (step === 9) { syncAppStep(); syncRenderSetup(); }
+      if (step === 10) renderReview();
     }
 
     /* One delegated pair on the rail, so paintRail can add and drop data-goto
@@ -4105,6 +4224,20 @@ summary{min-height:24px;padding:3px 0;}
       });
     }
 
+    /* ── the front door (task 1004417) ── the tick mirrors into the draft; the
+       demo door opens a line saying the demo is not open yet (BV2.PS09 builds it) */
+    $('termsAck').checked = !!state.termsAck;
+    $('termsAck').addEventListener('change', function () {
+      state.termsAck = !!this.checked;
+      if (state.termsAck) { $('h-terms').textContent = '\u00a0'; $('h-terms').className = 'hint'; }
+      saveDraft();
+    });
+    $('wizDemo').addEventListener('click', function () {
+      var soon = $('demoSoon');
+      soon.hidden = !soon.hidden;
+      this.setAttribute('aria-expanded', soon.hidden ? 'false' : 'true');
+    });
+
     /* ── field wiring ── */
     $('newName').value = state.name;
     $('f-owner').value = state.owner;
@@ -4234,7 +4367,7 @@ summary{min-height:24px;padding:3px 0;}
     /* Skip = go on with whatever is (or isn't) filled in. It deliberately does
        NOT erase an answer already given: a visitor who typed a description and
        then pressed Skip meant "I'm done here", not "throw that away". */
-    $('skipDetail').addEventListener('click', function () { show(4, true); });
+    $('skipDetail').addEventListener('click', function () { show(6, true); });
 
     /* ── the module picker (task 1002339, BV1.R20) ──
        ONE public read gives the panel both halves it needs: `optional` is the
@@ -4277,8 +4410,8 @@ summary{min-height:24px;padding:3px 0;}
        exact dishonesty the About row's "off the public map" clause exists to
        prevent, one screen before Create. */
     function repaintForBundles() {
-      if (state.step === 4) renderModules();
-      else if (state.step === 8) renderReview();
+      if (state.step === 6) renderModules();
+      else if (state.step === 10) renderReview();
     }
     /* The row for the declared type, or null before the read lands / for a type
        the table has no row for (including no type at all). */
@@ -4493,7 +4626,7 @@ summary{min-height:24px;padding:3px 0;}
     /* Skip = walk past without answering. It does NOT erase a toggle already
        made (the About step's rule), and with nothing said it leaves state.modules
        null so the server applies the bundle this panel was showing. */
-    $('skipModules').addEventListener('click', function () { show(5, true); });
+    $('skipModules').addEventListener('click', function () { show(7, true); });
 
     /* ── GitHub-integrated repo picker (adopt) + auto-create (fresh) — task 1002099 / ADR 0143.
           Progressive enhancement: probe GET /github/repos once we reach the Home step.
@@ -4683,12 +4816,21 @@ summary{min-height:24px;padding:3px 0;}
 
     /* per-panel validation on Next */
     function validateStep(step) {
-      if (step === 7) return validateRender();
+      if (step === 9) return validateRender();
+      /* the front door's one tick (task 1004417): nothing past it until it is given */
       if (step === 1) {
+        if (!state.termsAck) {
+          $('h-terms').textContent = 'Tick the box to go on. It’s how your project records that you acknowledged the terms.';
+          $('h-terms').className = 'hint err';
+          return false;
+        }
+        return true;
+      }
+      if (step === 3) {
         if (!state.name.trim()) { $('h-name').textContent = 'Give it a name to start.'; $('h-name').className = 'hint err'; return false; }
         return true;
       }
-      if (step === 2) {
+      if (step === 4) {
         if (!state.projType) {
           $('h-projtype').textContent = 'Pick one — Not Sure is a fine answer.';
           $('h-projtype').className = 'hint err';
@@ -4696,10 +4838,10 @@ summary{min-height:24px;padding:3px 0;}
         }
         return true;
       }
-      /* steps 3 (About) and 4 (Modules) have no clause: they are the optional
+      /* steps 5 (About) and 6 (Modules) have no clause: they are the optional
          ones, and Next past an empty answer is the whole point (tasks 1002334,
-         1002339). */
-      if (step === 5) {
+         1002339). Step 2 (the fork) has none either: its doors are the answer. */
+      if (step === 7) {
         var homeErr = function (msg) { $('h-home').textContent = msg; $('h-home').className = 'hint err'; return false; };
         if (repoAccess === 'need-connect') return homeErr('Allow GitHub repo access to pick or create your repository — or choose “enter it manually”.');
         if (repoAccess === true && state.mode !== 'adopt') {
@@ -4714,7 +4856,7 @@ summary{min-height:24px;padding:3px 0;}
         $('h-home').innerHTML = '&nbsp;'; $('h-home').className = 'hint';
         return true;
       }
-      if (step === 6) {
+      if (step === 8) {
         if (!validSlug(state.slug)) {
           $('h-slug').textContent = '2–40 lowercase letters, numbers, or dashes; no leading/trailing/double dash.';
           $('h-slug').className = 'hint err'; $('f-slug').classList.add('bad');
@@ -4833,7 +4975,7 @@ summary{min-height:24px;padding:3px 0;}
             : 'Once the project is up, we create your app on your Render account. Your key is used once, then thrown away.';
           /* then the app's own progress, from the same read the project's page uses (task 1004353) */
           var box = $('doneApp');
-          if (box) watchApp(instanceId, box, function () { return state.step === 9; }, 5000);
+          if (box) watchApp(instanceId, box, function () { return state.step === 11; }, 5000);
         });
       }).catch(function (err) {
         note.className = 'hint err';
@@ -4949,6 +5091,11 @@ summary{min-height:24px;padding:3px 0;}
       var btn = this;
       var alertBox = $('createAlert');
       alertBox.classList.remove('on');
+      /* a draft can reach Review without the front door's tick (one written before
+         it existed is dropped by the key bump, but a cleared box is still a cleared
+         box) — send the founder back to it rather than file an unacknowledged
+         project (task 1004417) */
+      if (!state.termsAck) { show(1, true); validateStep(1); return; }
       btn.disabled = true; btn.textContent = 'Raising it into the sky…';
       ensureFreshRepo().then(function () {
         return fetch(API + '/provisioning/instances', {
@@ -4966,6 +5113,8 @@ summary{min-height:24px;padding:3px 0;}
                the server then applies the SAME starter bundle the panel showed,
                so a skip and an accept land the same modules */
             modules: modulesForCreate(),
+            /* the front door's tick (task 1004417) — the server stamps WHICH terms */
+            terms_acknowledged: state.termsAck ? true : undefined,
             hosting_shape: 'cloud-host',
             /* ONLY a bring-your-own domain travels (task 1002898 N2). The server owns
                the assigned <slug>.<apex> default (task 1002704) and applies it to an
@@ -5010,7 +5159,7 @@ summary{min-height:24px;padding:3px 0;}
           sessionStorage.removeItem(DRAFT_KEY);
         } catch (e) {}
         renderDone();
-        show(9, true);
+        show(11, true);
         sendRenderSetup(data.instance && data.instance.id);   // the key rides the new project's own setup run (task 1004352)
         startProgress(data.instance && data.instance.id);
       }).catch(function (err) {
@@ -5019,7 +5168,7 @@ summary{min-height:24px;padding:3px 0;}
         if (err && err.gotoHome) {
           /* A repo-creation problem (name taken / reconnect) — bounce back to the Home
              step with the reason, so the user fixes it where the repo is chosen. */
-          show(5, true);
+          show(7, true);
           $('h-home').textContent = err.homeMsg || 'Please revisit the repository step.';
           $('h-home').className = 'hint err';
           return;
@@ -5586,7 +5735,7 @@ summary{min-height:24px;padding:3px 0;}
                5s tick never clobbers an open dropdown or mid-flight button) */
             if (inst && inst.status !== live.instStatus) {
               live.instStatus = inst.status; renderSteps();
-              if (state.step === 9) paintRail(9);   /* the rail finishes only when the project answers */
+              if (state.step === 11) paintRail(11);   /* the rail finishes only when the project answers */
             }
             var terminal = renderProgress(inst);
             if (!terminal) pollTimer = setTimeout(tick, 5000);
@@ -5626,7 +5775,7 @@ summary{min-height:24px;padding:3px 0;}
          is three-valued and null is its "nothing said" sentinel; leaving the key out
          left it UNDEFINED, which is not null — so pickedModules() reached .slice()
          on it and the second project's Modules step threw. */
-      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later' };
+      state = { step: 1, name: '', projType: null, description: '', teamShape: null, modules: null, mode: 'greenfield', owner: '', ownerTouched: false, repo: '', repoTouched: false, slug: '', slugTouched: false, domain: '', noAddress: false, appPlatform: 'later', termsAck: false };
       $('newName').value = ''; $('f-owner').value = ''; $('f-repo').value = ''; $('f-slug').value = ''; $('f-domain').value = '';
       $('f-noaddr').checked = false; $('f-desc').value = '';
       /* Re-seed the owner from the signed-in account for the next project. */
@@ -5698,20 +5847,20 @@ summary{min-height:24px;padding:3px 0;}
        step is what says so. A landed create clears DRAFT_KEY — but show(9) then
        persists the done panel's own position straight back into it, so "is there a
        draft?" is always yes and would have skipped the reset forever, leaving the
-       finished project's name sitting in the fresh form. Only steps 1–8 are wizard
+       finished project's name sitting in the fresh form. Only steps 1–10 are wizard
        steps: anything else is the done panel's bookkeeping, not a project someone
        is part-way through typing. */
     function enterCreated(created, focus) {
       if (focus && !resumeIntent) {
         var draft = null;
         try { draft = JSON.parse(sessionStorage.getItem(DRAFT_KEY) || 'null'); } catch (e) {}
-        var at = draft && draft.step >= 1 && draft.step <= 8 ? draft.step : 0;
+        var at = draft && draft.step >= 1 && draft.step <= 10 ? draft.step : 0;
         if (!at) { resetForNewProject(); at = 1; }
         paintResumeOffer(created);
-        /* step 1's own focus target is the name field, not the heading — the same
-           deliberate-nav rule enter() applies below */
+        /* step 1's own focus target is its one control, the terms tick, not the
+           heading — the same deliberate-nav rule enter() applies below */
         show(at, at !== 1);
-        if (at === 1) $('newName').focus();
+        if (at === 1) $('termsAck').focus();
         return;
       }
       resumeIntent = false;
@@ -5729,7 +5878,7 @@ summary{min-height:24px;padding:3px 0;}
         manifestState = created.manifest_state; manifestPending = true;
       }
       renderDone();
-      show(9, !!focus);
+      show(11, !!focus);
       startProgress(created.id);
       resumePolls();
     }
@@ -5743,10 +5892,10 @@ summary{min-height:24px;padding:3px 0;}
       var created = authKnown ? createdRecord() : null;
       if (created && created.id) { enterCreated(created, !!focus); return; }
       paintResumeOffer(null);
-      /* before identity settles, never render past the name step: deeper steps
-         carry authenticated side effects (the Home-step repo probe), and onAuth()
-         re-enters to the real draft step the moment /me answers */
-      var step = authKnown && state.step >= 1 && state.step <= 8 ? state.step : 1;
+      /* before identity settles, never render past step 1 (the terms, since task
+         1004417): deeper steps carry authenticated side effects (the Home-step repo
+         probe), and onAuth() re-enters to the real draft step the moment /me answers */
+      var step = authKnown && state.step >= 1 && state.step <= 10 ? state.step : 1;
       if (step === 1) {
         /* Pre-auth, step 1 is a PLACEHOLDER, not where the visitor is — but show()
            persists whatever step it renders, so it used to overwrite the draft's real
@@ -5755,8 +5904,8 @@ summary{min-height:24px;padding:3px 0;}
            step back after rendering the placeholder, in memory AND in the draft. */
         var resumeStep = state.step;
         show(1, false);
-        if (!authKnown && resumeStep >= 1 && resumeStep <= 8) { state.step = resumeStep; saveDraft(); }
-        if (focus) $('newName').focus();
+        if (!authKnown && resumeStep >= 1 && resumeStep <= 10) { state.step = resumeStep; saveDraft(); }
+        if (focus) $('termsAck').focus();
       } else {
         show(step, !!focus);
       }