update styling

support/index.html

@@ -51,24 +51,38 @@
       </nav>
     </header>
 
-    <main class="content-main">
-      <article class="content-shell">
+    <main class="content-main hub-main">
+      <section class="content-hero" aria-labelledby="support-title">
         <p class="eyebrow">Cedarline Digital</p>
-        <h1>Support</h1>
-        <p class="lead">Need help with a Cedarline Digital app or project?</p>
-        <p>Choose a product below:</p>
+        <h1 id="support-title">Support</h1>
+        <p>
+          Support information for Cedarline Digital software, apps, and released projects.
+        </p>
+      </section>
 
-        <ul class="link-list">
-          <li><a href="/support/left-unsaid">Left Unsaid Support</a></li>
-        </ul>
+      <div class="content-layout">
+        <article class="content-shell hub-shell">
+          <section aria-labelledby="product-support-title">
+            <p class="section-label">Product support</p>
+            <h2 id="product-support-title">Choose a product</h2>
+            <div class="document-links">
+              <a href="/support/left-unsaid">
+                <span>Support</span>
+                <strong>Left Unsaid</strong>
+                <p>Help, contact guidance, and privacy links for the private writing app.</p>
+              </a>
+            </div>
+            <p>More support pages will be added as new projects are released.</p>
+          </section>
+        </article>
 
-        <p>More support pages will be added as new projects are released.</p>
-
-        <section aria-labelledby="contact-title">
-          <h2 id="contact-title">Contact</h2>
-          <p>Email: <a href="mailto:support@cedarline.digital">support@cedarline.digital</a></p>
-        </section>
-      </article>
+        <aside class="content-aside" aria-labelledby="support-contact-title">
+          <p class="section-label">Contact</p>
+          <h2 id="support-contact-title">General support</h2>
+          <p>For product help or support questions, email Cedarline Digital.</p>
+          <a class="aside-link" href="mailto:support@cedarline.digital">support@cedarline.digital</a>
+        </aside>
+      </div>
     </main>
 
     <footer class="site-footer">

support/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,6 +61,16 @@
 
         <p class="eyebrow">Product Support</p>
         <h1>Left Unsaid Support</h1>
+        <dl class="policy-meta document-meta">
+          <div>
+            <dt>Product</dt>
+            <dd>Left Unsaid</dd>
+          </div>
+          <div>
+            <dt>Support</dt>
+            <dd><a href="mailto:support@cedarline.digital">support@cedarline.digital</a></dd>
+          </div>
+        </dl>
         <p class="lead">
           Left Unsaid is a private writing app for thoughts, feelings, and notes you want to let out quietly.
         </p>