Quorla website: Astro site with home, privacy and terms

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitattributes

@@ -0,0 +1,2 @@
+* text=auto eol=lf
+*.png binary

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+dist/
+.astro/
+.env
+.DS_Store

README.md

@@ -0,0 +1,43 @@
+# Quorla website (quorlasocial.com)
+
+Marketing site for Quorla. The app itself lives in the separate repo `claude_Metatron_Social_Media_Manager`
+(served at app.quorlasocial.com). Built with [Astro](https://astro.build): pages compile to plain static HTML.
+
+## Work on it
+
+```bash
+npm install
+npm run dev        # http://localhost:4321
+npm run build      # writes the site to dist/
+```
+
+| What | Where |
+|---|---|
+| Pages (one file = one URL) | `src/pages/` (`index.astro` → `/`, `privacy.astro` → `/privacy`) |
+| Header, footer, `<head>` | `src/layouts/Base.astro` |
+| Styles (navy `#242142`, coral `#FC6D45`) | `src/styles/global.css` |
+| Logos, icons, images | `public/assets/` |
+
+## Deploy (HestiaCP server, as `dev`)
+
+HestiaCP serves `/home/user/web/quorlasocial.com/public_html/` as plain static files.
+
+```bash
+cd ~/APPS/quorla-website && git pull
+# Build with Docker so the server doesn't need Node (Astro 6 needs Node >= 22.12):
+docker run --rm -v "$PWD":/site -w /site node:22-bookworm-slim sh -c "npm ci && npm run build"
+sudo rsync -a --delete --chown=user:user --chmod=D755,F644 dist/ /home/user/web/quorlasocial.com/public_html/
+```
+
+## Keep these working
+
+Google's OAuth verification and TikTok's app review point at these URLs. Don't remove or move them:
+- https://quorlasocial.com (home page, must explain the app and link to the privacy policy)
+- https://quorlasocial.com/privacy and /terms (also still served by the app at app.quorlasocial.com/privacy and /terms;
+  keep both copies the same until the app's links and the review forms point here)
+- The Google and TikTok domain verification records are DNS TXT records, not files, so redeploying the site doesn't affect them.
+
+## Page plan
+
+Home · Features · Platforms · Pricing (hosted and self-hosted) · For agencies · Blog · Help/Docs · Contact / Book a demo
+· Privacy · Terms

astro.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from "astro/config";
+
+// Static site for quorlasocial.com. `npm run build` writes plain HTML to dist/, which HestiaCP serves.
+export default defineConfig({
+  site: "https://quorlasocial.com",
+  trailingSlash: "ignore",
+  build: { format: "directory" },
+});

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "quorla-website",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev",
+    "build": "astro build",
+    "preview": "astro preview"
+  },
+  "dependencies": {
+    "astro": "6.4.8"
+  }
+}

src/layouts/Base.astro

@@ -0,0 +1,61 @@
+---
+import "../styles/global.css";
+
+interface Props {
+  title: string;
+  description?: string;
+}
+const {
+  title,
+  description = "Quorla helps marketing agencies plan, approve and publish client content to Instagram, Facebook, TikTok, YouTube, LinkedIn, Google Business Profile and more, with reports clients can read.",
+} = Astro.props;
+const canonical = new URL(Astro.url.pathname, Astro.site);
+const APP = "https://app.quorlasocial.com";
+---
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{title}</title>
+  <meta name="description" content={description} />
+  <link rel="canonical" href={canonical} />
+  <link rel="icon" type="image/png" href="/assets/favicon.png" />
+  <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
+  <meta name="theme-color" content="#242142" />
+  <meta property="og:title" content={title} />
+  <meta property="og:description" content={description} />
+  <meta property="og:image" content="https://quorlasocial.com/assets/apple-touch-icon.png" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Plus+Jakarta+Sans:wght@700;800&display=swap" rel="stylesheet" />
+</head>
+<body>
+  <header class="top">
+    <div class="wrap">
+      <a href="/" aria-label="Quorla home"><img src="/assets/logo.png" alt="Quorla" width="107" height="30" /></a>
+      <nav class="links" aria-label="Main">
+        <a href="/#how">How it works</a>
+        <a href="/#features">Features</a>
+        <a href="/#platforms">Platforms</a>
+        <a class="btn btn-primary" href={APP}>Sign in</a>
+      </nav>
+    </div>
+  </header>
+
+  <main>
+    <slot />
+  </main>
+
+  <footer>
+    <div class="wrap">
+      <div>© {new Date().getFullYear()} Quorla · Metatroncube Software Solutions, Waterloo, Ontario, Canada</div>
+      <nav aria-label="Legal">
+        <a href="/privacy">Privacy Policy</a>
+        <a href="/terms">Terms of Service</a>
+        <a href="mailto:support@quorlasocial.com">support@quorlasocial.com</a>
+      </nav>
+    </div>
+  </footer>
+</body>
+</html>

src/pages/index.astro

@@ -0,0 +1,85 @@
+---
+import Base from "../layouts/Base.astro";
+---
+<Base title="Quorla · Social media management for agencies">
+<section class="hero">
+  <div class="wrap">
+    <div>
+      <p class="eyebrow">Social media management for agencies</p>
+      <h1>Every client's social, planned, approved and posted from one place.</h1>
+      <p class="lead">Quorla helps marketing agencies plan content, get each post approved, and publish it to the right client account on the right platform at the client's local time. Then it shows the client what worked.</p>
+      <div class="ctas">
+        <a class="btn btn-coral" href="mailto:support@quorlasocial.com?subject=Quorla%20access">Request access</a>
+        <a class="btn btn-ghost" href="https://app.quorlasocial.com">Sign in</a>
+      </div>
+    </div>
+    <div class="mock" aria-label="Example: a post waiting for approval">
+      <div class="row">
+        <div class="avatar" aria-hidden="true">GC</div>
+        <div><div class="who">Green Corner Café</div><div class="sub">Thu 11:30 a.m. · client's local time</div></div>
+      </div>
+      <div class="media" aria-hidden="true">VERTICAL VIDEO · 0:18</div>
+      <div class="cap">Fresh focaccia every morning at 8. First 20 people get a free cortado this Saturday.</div>
+      <div class="chips"><span class="chip">Instagram Reel</span><span class="chip">TikTok</span><span class="chip">Google Business Profile</span></div>
+      <div class="bar"><span class="pill">Waiting for approval</span><span class="btn btn-primary approve">Approve</span></div>
+    </div>
+  </div>
+</section>
+
+<section class="block" id="how">
+  <div class="wrap">
+    <div class="head">
+      <h2>How it works</h2>
+      <p>One workflow for every client, with a person signing off before anything goes live.</p>
+    </div>
+    <div class="steps">
+      <div class="step"><h3>Connect</h3><p>An admin connects each client's accounts once, with the platform's own sign-in. Quorla never asks for their passwords.</p></div>
+      <div class="step"><h3>Plan</h3><p>The team uploads finished work to each client's library and builds the week's posts from it, with captions written for each platform.</p></div>
+      <div class="step"><h3>Approve</h3><p>An admin reviews the exact caption, media and settings. Nothing is posted without that approval.</p></div>
+      <div class="step"><h3>Publish and report</h3><p>Quorla posts at the scheduled time, keeps within each platform's limits, and turns the results into a report the client can read.</p></div>
+    </div>
+  </div>
+</section>
+
+<section class="block alt" id="features">
+  <div class="wrap">
+    <div class="head">
+      <h2>Built for teams running many client accounts</h2>
+      <p>Each client keeps their own voice, accounts and data. Your team sees what it needs to.</p>
+    </div>
+    <div class="grid3">
+      <div class="card"><h3>Content library</h3><p>Designers and editors upload finished posts per client. Only approved items can be scheduled.</p></div>
+      <div class="card"><h3>Approval before publishing</h3><p>Drafts wait for an admin. Approval covers the exact caption and media, not just the idea.</p></div>
+      <div class="card"><h3>Client time zones</h3><p>Posts go out at the client's local hour, wherever your team is working from.</p></div>
+      <div class="card"><h3>Comments and messages</h3><p>See comments and DMs per client and draft replies. A person approves every reply.</p></div>
+      <div class="card"><h3>Reports clients can read</h3><p>Monthly audits and weekly reports in plain language, exported as PDFs with your agency's branding.</p></div>
+      <div class="card"><h3>Team roles</h3><p>Admins connect accounts and approve. Designers, editors and managers get the views they need.</p></div>
+    </div>
+  </div>
+</section>
+
+<section class="block" id="platforms">
+  <div class="wrap">
+    <div class="head">
+      <h2>Platforms</h2>
+      <p>Connect the accounts each client actually uses. Every platform has its own post settings, and Quorla respects its rules and rate limits.</p>
+    </div>
+    <div class="platforms">
+      <span>Instagram</span><span>Facebook</span><span>TikTok</span><span>YouTube</span><span>Google Business Profile</span><span>LinkedIn</span><span>Pinterest</span><span>Threads</span><span>Reddit</span>
+    </div>
+    <p class="note">On TikTok, creators choose who can see each post and whether comments, Duet and Stitch are on, and Quorla shows TikTok's music and branded-content terms before posting.</p>
+  </div>
+</section>
+
+<section class="block" style="padding-top:0">
+  <div class="wrap">
+    <div class="cta">
+      <div>
+        <h2>Run your clients' social in one place</h2>
+        <p>Quorla is available to agencies by invitation. Tell us about your team.</p>
+      </div>
+      <a class="btn btn-coral" href="mailto:support@quorlasocial.com?subject=Quorla%20access">Request access</a>
+    </div>
+  </div>
+</section>
+</Base>

src/pages/privacy.astro

@@ -0,0 +1,68 @@
+---
+import Base from "../layouts/Base.astro";
+// Keep in sync with the app copy in claude_Metatron_Social_Media_Manager/dashboard/server/legal/privacy.html
+---
+<Base title="Privacy Policy · Quorla" description="Quorla Privacy Policy.">
+<article class="prose">
+<h1>Privacy Policy</h1>
+  <p class="meta">Effective 20 October 2026 · Operated by Metatroncube Software Solutions, Waterloo, Ontario, Canada</p>
+
+  <p>Quorla is a social media management service used by marketing agencies to plan, approve and publish content for the businesses they work with, and to see how that content performs. This policy explains what information Quorla handles, why, and the choices you have.</p>
+
+  <h2>Who this covers</h2>
+  <ul>
+    <li><b>Agency users</b>: people who sign in to Quorla (agency owners, managers, designers, editors).</li>
+    <li><b>Connected account owners</b>: businesses and creators whose social media accounts an agency connects to Quorla with the owner's permission.</li>
+  </ul>
+
+  <h2>Information we collect</h2>
+  <ul>
+    <li><b>Account details</b>: name, work email and role of agency users. Passwords are stored only as one-way hashes.</li>
+    <li><b>Content</b>: images, videos, captions, plans and reports that agency users upload or create.</li>
+    <li><b>Connected platform data</b>: when an account is connected, Quorla receives access tokens and the data each platform allows for the permissions granted, such as the account's ID, name, username, profile picture, follower count, posts, post insights and comments.</li>
+    <li><b>Technical logs</b>: sign-in times, actions such as approvals and publishing results, and errors, used to run and secure the service.</li>
+  </ul>
+
+  <h2>Data from connected platforms</h2>
+  <p>Quorla only uses platform data to provide the features the account owner and their agency use, and only within each platform's terms:</p>
+  <ul>
+    <li><b>TikTok</b> (Login Kit, Content Posting API): basic profile information (open ID, display name, username, avatar) and follower counts to show which account is connected; and permission to upload and publish videos and photo posts that a person has reviewed and approved in Quorla. Quorla does not post anything without that approval and does not add watermarks or promotional branding to content.</li>
+    <li><b>Meta</b> (Facebook, Instagram, Threads): Page and account details, insights, posts and comments for reporting and replies, and publishing of approved posts.</li>
+    <li><b>Google</b> (YouTube, Google Business Profile): channel and business location details, and uploading or posting approved content. Quorla's use and transfer of information received from Google APIs adheres to the <a href="https://developers.google.com/terms/api-services-user-data-policy">Google API Services User Data Policy</a>, including the Limited Use requirements.</li>
+    <li><b>LinkedIn, Pinterest and Reddit</b>: profile, Page or board details needed to post, and publishing of approved content.</li>
+  </ul>
+  <p>We never sell platform data, never use it for advertising, and never use it to train AI models.</p>
+
+  <h2>How we use information</h2>
+  <ul>
+    <li>To run Quorla: sign-in, content library, scheduling, approvals, publishing and reports.</li>
+    <li>To produce AI-assisted drafts (content plans, captions, reports). Relevant content and performance data are processed by our AI provider, Anthropic, under terms that do not allow it to train models on that data.</li>
+    <li>To keep the service secure and to fix problems.</li>
+  </ul>
+
+  <h2>Sharing</h2>
+  <p>Information is shared only with the agency that controls the account in Quorla, with the social platforms when you publish to them, with service providers that host or process data for us (hosting, AI processing, email), or when the law requires it. Each provider may use the data only to provide its service to us.</p>
+
+  <h2>Security and storage</h2>
+  <p>Quorla is served over HTTPS. Platform access tokens and app keys are encrypted at rest. Access is limited to the agency's signed-in users, and only admins can connect accounts or approve posts.</p>
+
+  <h2>Retention and deletion</h2>
+  <ul>
+    <li>Disconnecting an account in Quorla deletes its stored access tokens immediately. You can also remove Quorla's access in the platform's own settings (for example TikTok: Settings and privacy → Security → Manage app permissions).</li>
+    <li>Content and reports are kept while the agency uses Quorla, then deleted within 90 days after the agency's account closes, unless the law requires us to keep them longer.</li>
+    <li>To ask for a copy or deletion of your information, email us at the address below. We respond within 30 days.</li>
+  </ul>
+
+  <h2>Your rights</h2>
+  <p>Depending on where you live (for example under Canada's PIPEDA or the EU/UK GDPR), you may have the right to access, correct, delete or move your information, and to object to some processing. Contact us to use these rights.</p>
+
+  <h2>Children</h2>
+  <p>Quorla is a business tool and is not intended for anyone under 18.</p>
+
+  <h2>Changes</h2>
+  <p>We will post changes on this page and update the date at the top. For significant changes we will notify agency admins.</p>
+
+  <h2>Contact</h2>
+  <p>Metatroncube Software Solutions, Waterloo, Ontario, Canada<br>Email: <a href="mailto:support@quorlasocial.com">support@quorlasocial.com</a></p>
+</article>
+</Base>

src/pages/terms.astro

@@ -0,0 +1,61 @@
+---
+import Base from "../layouts/Base.astro";
+// Keep in sync with the app copy in claude_Metatron_Social_Media_Manager/dashboard/server/legal/terms.html
+---
+<Base title="Terms of Service · Quorla" description="Quorla Terms of Service.">
+<article class="prose">
+<h1>Terms of Service</h1>
+  <p class="meta">Effective 20 October 2026 · Operated by Metatroncube Software Solutions, Waterloo, Ontario, Canada</p>
+
+  <p>These terms apply to anyone who uses Quorla, the social media management service operated by Metatroncube Software Solutions ("we", "us"). By signing in to or using Quorla you agree to them.</p>
+
+  <h2>1. The service</h2>
+  <p>Quorla lets agencies plan, review, approve and publish content to social media accounts they manage, and see performance. Posts are published only after a person with admin rights approves them.</p>
+
+  <h2>2. Accounts</h2>
+  <ul>
+    <li>You must give accurate details and keep your password private. You are responsible for activity under your account.</li>
+    <li>Agency admins decide who has access and what role they have.</li>
+  </ul>
+
+  <h2>3. Connecting social accounts</h2>
+  <ul>
+    <li>You may only connect accounts you own or that the owner has authorized you to manage, and only for the purposes the owner agreed to.</li>
+    <li>When you connect or post to a platform, that platform's own terms and policies also apply, including the <a href="https://www.tiktok.com/legal/terms-of-service">TikTok Terms of Service</a>, TikTok's <a href="https://www.tiktok.com/legal/page/global/music-usage-confirmation/en">Music Usage Confirmation</a> and <a href="https://www.tiktok.com/legal/page/global/bc-policy/en">Branded Content Policy</a>, Meta's terms, the <a href="https://www.youtube.com/t/terms">YouTube Terms of Service</a>, and the terms of LinkedIn, Pinterest and Reddit.</li>
+    <li>You can disconnect any account at any time in Quorla, or remove Quorla's access in the platform's settings.</li>
+  </ul>
+
+  <h2>4. Your content</h2>
+  <p>You keep all rights to the content you upload or create. You give us permission to store, process and publish it only as needed to provide Quorla to you. You confirm you have the rights to everything you publish, including music, images and people's likenesses, and that paid partnerships and promotional content are disclosed as the law and each platform require.</p>
+
+  <h2>5. Acceptable use</h2>
+  <p>You must not use Quorla to:</p>
+  <ul>
+    <li>post spam, misleading content, fake reviews or testimonials, or anything illegal;</li>
+    <li>buy followers or engagement, or run engagement schemes;</li>
+    <li>break any platform's rules or rate limits, or try to get around their restrictions;</li>
+    <li>access accounts or data you aren't authorized to use, or interfere with the service's security.</li>
+  </ul>
+
+  <h2>6. AI features</h2>
+  <p>AI-generated drafts are suggestions. A person must review them before they are published, and you are responsible for what you approve.</p>
+
+  <h2>7. Fees</h2>
+  <p>Fees, if any, are set out in your plan or agreement with us.</p>
+
+  <h2>8. Availability and changes</h2>
+  <p>We work to keep Quorla available but don't guarantee it will be uninterrupted. Platforms can change or limit their APIs at any time, which may affect features. We may update Quorla and these terms; we'll post changes here and notify agency admins of significant ones.</p>
+
+  <h2>9. Disclaimer and liability</h2>
+  <p>Quorla is provided "as is". To the extent the law allows, we are not liable for indirect or consequential losses, for actions taken by social platforms, or for content you approve. Our total liability for any claim is limited to the fees you paid us in the 12 months before the claim.</p>
+
+  <h2>10. Ending use</h2>
+  <p>You can stop using Quorla at any time. We may suspend accounts that break these terms. Our <a href="/privacy">Privacy Policy</a> explains what happens to data afterwards.</p>
+
+  <h2>11. Governing law</h2>
+  <p>These terms are governed by the laws of the Province of Ontario and the federal laws of Canada that apply there.</p>
+
+  <h2>Contact</h2>
+  <p>Metatroncube Software Solutions, Waterloo, Ontario, Canada<br>Email: <a href="mailto:support@quorlasocial.com">support@quorlasocial.com</a></p>
+</article>
+</Base>

src/styles/global.css

@@ -0,0 +1,106 @@
+/* Quorla site styles. Brand: navy #242142, coral #FC6D45. */
+:root {
+  --navy: #242142; --navy-2: #3b3778; --coral: #fc6d45; --coral-deep: #c2461a;
+  --ink: #1f2024; --muted: #5d6070; --line: #e6e5ef; --soft: #f6f5fb; --bg: #ffffff;
+}
+* { box-sizing: border-box; }
+html { -webkit-font-smoothing: antialiased; }
+body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 Inter, "Segoe UI", system-ui, sans-serif; }
+h1, h2, h3 { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; letter-spacing: -0.015em; margin: 0; }
+a { color: inherit; }
+.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
+:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
+
+/* header */
+header.top { position: sticky; top: 0; z-index: 5; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
+header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 16px; }
+header.top img { height: 30px; width: auto; display: block; }
+nav.links { display: flex; align-items: center; gap: 24px; font-size: 14.5px; font-weight: 500; }
+nav.links a { text-decoration: none; color: var(--muted); }
+nav.links a:hover { color: var(--ink); }
+.btn { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid transparent; white-space: nowrap; }
+.btn-primary { background: var(--navy); color: #fff; }
+.btn-primary:hover { background: var(--navy-2); }
+.btn-ghost { border-color: #d6d4e4; color: var(--navy); background: #fff; }
+.btn-ghost:hover { background: var(--soft); }
+.btn-coral { background: var(--coral); color: var(--navy); }
+.btn-coral:hover { background: #ff8460; }
+nav.links .btn { height: 36px; font-size: 14px; color: #fff; }
+
+/* hero */
+.hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
+.hero::after { content: ""; position: absolute; right: -180px; top: -180px; width: 560px; height: 560px; border-radius: 50%; background: radial-gradient(circle, rgba(252,109,69,.32), transparent 65%); pointer-events: none; }
+.hero .wrap { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 96px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
+.eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--coral); margin: 0 0 16px; }
+.hero h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.06; font-weight: 800; }
+.hero p.lead { color: #cfcde3; font-size: 18px; max-width: 540px; margin: 20px 0 32px; }
+.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; }
+.hero .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
+.hero .btn-ghost:hover { background: rgba(255,255,255,.08); }
+
+/* approval mock */
+.mock { background: #fff; color: var(--ink); border-radius: 14px; padding: 18px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); font-size: 14px; }
+.mock .row { display: flex; align-items: center; gap: 10px; }
+.mock .who { font-weight: 600; }
+.mock .sub { color: var(--muted); font-size: 12.5px; }
+.mock .media { margin: 14px 0; height: 150px; border-radius: 10px; background: linear-gradient(135deg, #3b3778, #242142 55%, #fc6d45); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
+.mock .cap { color: #3a3c46; }
+.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
+.chip { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--navy); border: 1px solid var(--line); }
+.mock .bar { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
+.pill { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #fff0ea; color: var(--coral-deep); }
+.mock .approve { height: 34px; font-size: 13.5px; padding: 0 14px; }
+.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--soft); border: 1px solid var(--line); display: grid; place-items: center; font-weight: 700; color: var(--navy); font-size: 13px; flex-shrink: 0; }
+
+/* sections */
+section.block { padding: 88px 0; }
+section.alt { background: var(--soft); }
+.head { max-width: 640px; margin-bottom: 44px; }
+.head h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.15; font-weight: 800; color: var(--navy); }
+.head p { color: var(--muted); font-size: 17px; margin: 12px 0 0; }
+.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
+.step { border-top: 2px solid var(--navy); padding-top: 18px; }
+.step::before { counter-increment: step; content: "0" counter(step); font: 700 13px "Plus Jakarta Sans", sans-serif; color: var(--coral-deep); }
+.step h3 { font-size: 18px; margin: 8px 0 6px; color: var(--navy); }
+.step p { margin: 0; color: var(--muted); font-size: 15px; }
+.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
+.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 22px; }
+.card h3 { font-size: 17px; color: var(--navy); margin-bottom: 6px; }
+.card p { margin: 0; color: var(--muted); font-size: 15px; }
+.platforms { display: flex; flex-wrap: wrap; gap: 10px; }
+.platforms span { padding: 10px 16px; border-radius: 10px; background: #fff; border: 1px solid var(--line); font-weight: 600; color: var(--navy); font-size: 15px; }
+.note { color: var(--muted); font-size: 14px; margin-top: 18px; }
+
+.cta { background: var(--navy); color: #fff; border-radius: 18px; padding: 48px; display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
+.cta h2 { font-size: clamp(26px, 3vw, 34px); }
+.cta p { color: #cfcde3; margin: 8px 0 0; }
+
+footer { border-top: 1px solid var(--line); padding: 36px 0 48px; font-size: 14px; color: var(--muted); }
+footer .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
+footer nav { display: flex; gap: 20px; flex-wrap: wrap; }
+footer a { text-decoration: none; }
+footer a:hover { color: var(--ink); text-decoration: underline; }
+
+@media (max-width: 900px) {
+  .hero .wrap { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
+  .steps { grid-template-columns: 1fr 1fr; }
+  .grid3 { grid-template-columns: 1fr; }
+  nav.links a:not(.btn) { display: none; }
+}
+@media (max-width: 560px) {
+  .wrap { padding: 0 16px; }
+  .steps { grid-template-columns: 1fr; }
+  section.block { padding: 64px 0; }
+  .cta { padding: 32px 22px; }
+}
+
+/* Legal and long-form pages */
+.prose { max-width: 760px; margin: 0 auto; padding: 56px 24px 88px; }
+.prose h1 { font-size: clamp(30px, 4vw, 40px); line-height: 1.15; color: var(--navy); margin-bottom: 6px; }
+.prose .meta { color: var(--muted); font-size: 14px; margin: 0 0 28px; }
+.prose h2 { font-size: 20px; color: var(--navy); margin: 34px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); }
+.prose p, .prose li { color: #3a3c46; }
+.prose ul { padding-left: 1.2em; }
+.prose li { margin: 6px 0; }
+.prose a { color: var(--navy-2); }
+@media (max-width: 560px) { .prose { padding: 40px 16px 64px; } }