update styling

privacy/index.html

@@ -51,31 +51,38 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main hub-main">
+      <section class="content-hero" aria-labelledby="privacy-title">
         <p class="eyebrow">Cedarline Digital</p>
-        <h1>Privacy</h1>
-        <p class="lead">
-          Cedarline Digital builds independent software, apps, and digital tools.
-        </p>
+        <h1 id="privacy-title">Privacy</h1>
         <p>
-          Each product may handle data differently depending on what it does. Product-specific privacy policies are listed below.
+          Privacy information for Cedarline Digital products, apps, and digital tools.
         </p>
+      </section>
 
-        <section aria-labelledby="product-policies-title">
-          <h2 id="product-policies-title">Product Policies</h2>
-          <ul class="link-list">
-            <li><a href="/privacy/left-unsaid">Left Unsaid Privacy Policy</a></li>
-          </ul>
-          <p>Additional product policies will be added here as new projects are released.</p>
-        </section>
+      <div class="content-layout">
+        <article class="content-shell hub-shell">
+          <section aria-labelledby="product-policies-title">
+            <p class="section-label">Product policies</p>
+            <h2 id="product-policies-title">Available policies</h2>
+            <div class="document-links">
+              <a href="/privacy/left-unsaid">
+                <span>Privacy Policy</span>
+                <strong>Left Unsaid</strong>
+                <p>How the private writing app handles local notes, support messages, and app data.</p>
+              </a>
+            </div>
+            <p>Additional product policies will be added here as new projects are released.</p>
+          </section>
+        </article>
 
-        <section aria-labelledby="contact-title">
-          <h2 id="contact-title">Contact</h2>
-          <p>For privacy questions, contact Cedarline Digital at:</p>
-          <p>Email: <a href="mailto:support@cedarline.digital">support@cedarline.digital</a></p>
-        </section>
-      </article>
+        <aside class="content-aside" aria-labelledby="privacy-contact-title">
+          <p class="section-label">Contact</p>
+          <h2 id="privacy-contact-title">Privacy questions</h2>
+          <p>For privacy questions, contact Cedarline Digital directly.</p>
+          <a class="aside-link" href="mailto:support@cedarline.digital">support@cedarline.digital</a>
+        </aside>
+      </div>
     </main>
 
     <footer class="site-footer">

privacy/left-unsaid/index.html

@@ -51,8 +51,8 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main document-main">
+      <article class="content-shell document-shell">
         <nav class="breadcrumb" aria-label="Breadcrumb">
           <a href="/">Home</a>
           <span aria-hidden="true">/</span>
@@ -61,7 +61,7 @@
 
         <p class="eyebrow">Product Policy</p>
         <h1>Left Unsaid Privacy Policy</h1>
-        <dl class="policy-meta">
+        <dl class="policy-meta document-meta">
           <div>
             <dt>Effective Date</dt>
             <dd>June 2026</dd>