site: hero demo ends Store forms on the key Data safety rows, no bottom gaps in any scene (logs and checklist take the spare height), narrow 2-column hero drops the skipped pre-flight row

site/index.html

@@ -23,9 +23,9 @@
 <meta name="twitter:title" content="storebound · take your app or game from zero to Submit for review">
 <meta name="twitter:description" content="For mobile apps and games: app records, in-app products and subscriptions, listings in every language, every questionnaire, privacy, icons, screenshots. One config and your AI coding agent.">
 <meta name="twitter:image" content="https://storebound.dev/og.png">
-<link rel="stylesheet" href="style.css?v=c4f54f7">
+<link rel="stylesheet" href="style.css?v=0ac6422">
 <script>document.documentElement.classList.add('js')</script>
-<script src="main.js?v=c4f54f7" defer></script>
+<script src="main.js?v=0ac6422" defer></script>
 </head>
 <body>
 <a class="skip" href="#main">Skip to content</a>
@@ -163,11 +163,12 @@
             </div>
             <p class="t-cmd" data-s="type"><i>$</i> <span>storebound play data-safety --dry</span></p>
             <p class="t-out t-wrap" data-s="200"><b>[play]</b> data safety: 4 data types declared (PSL_EMAIL, PSL_USER_ACCOUNT, PSL_USER_GENERATED_CONTENT, PSL_CRASH_LOGS)</p>
-            <div class="tick tick-csv" aria-hidden="true">
+            <!-- The CSV streams in file order, then the final frame keeps only its key rows (data-key): the same real rows, in file order (the data types are in the [play] line above). -->
-              <p data-s="24"><em>TRUE</em> <span class="lbl">Does your app collect or share any of the required user data types?</span></p>
+            <div class="tick tick-csv" id="csv" aria-hidden="true">
-              <p data-s="24"><em>TRUE</em> <span class="lbl">Is all of the user data collected by your app encrypted in transit?</span></p>
+              <p data-s="24" data-key><em>TRUE</em> <span class="lbl">Does your app collect or share any of the required user data types?</span></p>
-              <p data-s="24"><em>TRUE</em> <span class="lbl">Do you provide a way for users to request that their data is deleted?</span></p>
+              <p data-s="24" data-key class="hot"><em>TRUE</em> <span class="lbl">Is all of the user data collected by your app encrypted in transit?</span></p>
-              <p data-s="24"><em>TRUE</em> <span class="lbl">Account creation / PSL_ACM_USER_ID_PASSWORD</span></p>
+              <p data-s="24" data-key class="hot"><em>TRUE</em> <span class="lbl">Do you provide a way for users to request that their data is deleted?</span></p>
+              <p data-s="24" data-key><em>TRUE</em> <span class="lbl">Account creation / PSL_ACM_USER_ID_PASSWORD</span></p>
               <p data-s="24"><em>TRUE</em> <span class="lbl">PSL_DATA_TYPES_PERSONAL / PSL_EMAIL</span></p>
               <p data-s="24"><em>TRUE</em> <span class="lbl">PSL_DATA_TYPES_PERSONAL / PSL_USER_ACCOUNT</span></p>
               <p data-s="24"><i>-</i> <span class="lbl">PSL_DATA_TYPES_CALENDAR / PSL_CALENDAR</span></p>
@@ -199,7 +200,7 @@
               <p data-s="24"><em>TRUE</em> <span class="lbl">Data usage and handling (PSL_USER_GENERATED_CONTENT) / Collected</span></p>
               <p data-s="24"><em>TRUE</em> <span class="lbl">Data usage and handling (PSL_USER_GENERATED_CONTENT) / Required</span></p>
             </div>
-            <p class="sc-foot" data-s="500"><b class="big"><span data-count="764">764</span> answers</b> <span class="sep">·</span> from 12 lines of config</p>
+            <p class="sc-foot" data-s="500" data-flip="csv"><b class="big"><span data-count="764">764</span> answers</b> <span class="sep">·</span> from 12 lines of config</p>
             <p class="t-cmd" data-s="type"><i>$</i> <span>storebound apple encryption --dry</span></p>
             <p class="t-err t-wrap" data-s="300">error: apple.usesNonExemptEncryption is not set in storebound.config.ts. Decide it with the export-compliance skill (…); storebound never guesses it.</p>
             <p class="sc-hand"><span>By hand</span> Play's form, question by question, for every data type you collect.</p>

site/style.css

@@ -362,6 +362,21 @@ h1 .hl { color: var(--accent); }
 .tick-csv .lbl { color: #94a3b8; }
 .tick-csv i, .tick-csv em { display: inline-block; width: 4ch; font-style: normal; } .tick-csv i { color: #334155; }
 .tick-ic { height: calc(6 * 1.65em); margin: 12px 0 0; }
+/* the CSV box and the icon log take the scene's spare height, so the scene ends on content, not on a gap */
+.tick-csv, .tick-ic, .sc-shots .tick { flex: 1 0 auto; }
+.pf-list { flex: 1 0 auto; align-content: space-between; }
+/* Store forms final frame (and the no-JS / reduced-motion view): only the key rows of the CSV, in file order */
+.sc:not(.is-anim) .tick-csv p:not([data-key]), .sc.is-anim .tick-csv.fixed p:not([data-key]) { display: none; }
+.sc:not(.is-anim) .tick-csv, .sc.is-anim .tick-csv.fixed { justify-content: center; -webkit-mask-image: none; mask-image: none; }
+.sc.is-anim .tick-csv.fixed p[data-key] { animation: csv-in .35s ease both; }
+.tick-csv p.hot .lbl { color: #e2e8f0; }
+.sc:not(.is-anim) .tick-csv p[data-key], .sc.is-anim .tick-csv.fixed p[data-key] { white-space: normal; padding-left: 4ch; text-indent: -4ch; margin: 2px 0; }
+.tick-csv p[data-key] em { text-indent: 0; }
+@keyframes csv-in { from { opacity: 0; transform: translateY(4px); } }
+@media (prefers-reduced-motion: reduce) { .sc.is-anim .tick-csv.fixed p[data-key] { animation: none; } }
+/* a narrow demo window (the 2-column hero just above 1024 px): the skipped row goes, so the checklist fits */
+.sc-stage { container-type: inline-size; }
+@container (max-width: 480px) { .pf-na { display: none !important; } }
 .tick-ic p { color: #94a3b8; }
 .tick-ic .kb { color: #64748b; }