Move LookAtU PRD out of the site folder so it is not published

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01KDXAh86FTSBLqF8ohPqZ88

.claude/skills/website-builder-setup/SKILL.md

@@ -0,0 +1,143 @@
+---
+name: website-builder-setup
+description: "Install the full AI website builder stack — UI/UX Pro Max, Framer Motion animations, and 21st.dev components. One skill, three tools, zero coding experience needed."
+---
+
+# Website Builder Setup
+
+This skill walks you through installing everything you need to build professional, animated websites with Claude Code. No coding experience required.
+
+## What Gets Installed
+
+| Tool | What it does |
+|------|-------------|
+| **UI/UX Pro Max** | Gives Claude access to 50+ design styles, 161 color palettes, 57 font pairings. Your sites look designed, not generated. |
+| **Framer Motion** | Adds smooth animations — page transitions, hover effects, scroll reveals. Makes sites feel alive. |
+| **21st.dev Magic** | A library of 100+ polished React components Claude can pull from. Production-quality building blocks. |
+
+## Workflow
+
+When this skill is triggered, walk the user through each step one at a time. Be encouraging and clear — assume they have zero coding experience. If any step fails, don't stop. Acknowledge it, give them the manual command, and keep moving.
+
+---
+
+### Step 1: Check Prerequisites
+
+> Before we start, let me make sure you have what we need.
+
+Run this silently:
+```bash
+node --version 2>&1 && npm --version 2>&1
+```
+
+- If Node.js is installed → say "You're good — Node.js is installed. Let's go."
+- If NOT installed → say:
+
+> You need Node.js first. Go to https://nodejs.org and download the LTS version. Install it, restart your terminal, then come back and run `/website-builder-setup` again. Takes 2 minutes.
+
+Stop here if Node is missing.
+
+---
+
+### Step 2: Install UI/UX Pro Max
+
+> **Step 1 of 3: UI/UX Pro Max**
+>
+> This gives me a massive design library — 50+ styles, 161 color palettes, 57 font pairings. When you ask me to build a website, I'm pulling from a real design system instead of guessing. This is why the output won't look like generic AI slop.
+>
+> Installing now...
+
+Run:
+```bash
+npm install -g uipro-cli 2>&1
+```
+
+Then:
+```bash
+uipro init --ai claude 2>&1
+```
+
+- On success → "UI/UX Pro Max is installed. Your design stack is ready."
+- On failure → "Hit a snag. You can try manually later: `npm install -g uipro-cli && uipro init --ai claude`. Let's keep going."
+
+---
+
+### Step 3: Install Framer Motion
+
+> **Step 2 of 3: Framer Motion**
+>
+> This teaches me how to add real animations to your websites — smooth page transitions, hover effects, scroll-triggered reveals. The stuff that makes a $500 site look like a $10,000 site.
+>
+> Installing now...
+
+Run:
+```bash
+npm install framer-motion 2>&1
+```
+
+- On success → "Framer Motion is installed. Your sites will have real animations now."
+- On failure → "Hit a snag. You can try manually later: `npm install framer-motion`. Moving on."
+
+---
+
+### Step 4: Set Up 21st.dev Magic
+
+> **Step 3 of 3: 21st.dev Components**
+>
+> This connects me to a library of 100+ beautifully designed React components. Instead of building everything from scratch, I pull from production-quality building blocks — buttons, navbars, hero sections, cards, footers — all pre-designed and ready to use.
+>
+> This one needs a free API key. Here's how to get it:
+>
+> 1. Go to **https://21st.dev/magic/console**
+> 2. Sign up or log in (it's free)
+> 3. Copy your API key
+> 4. Paste it here when I ask for it
+
+Wait for the user to provide their API key.
+
+Once they provide it, add the MCP server to their Claude Code config:
+
+Read `~/.claude.json`, find the `mcpServers` object, and add:
+
+```json
+"21st-dev-magic": {
+  "command": "npx",
+  "args": ["-y", "@21st-dev/magic@latest"],
+  "env": {
+    "API_KEY": "THEIR_KEY_HERE"
+  }
+}
+```
+
+After writing the config:
+
+> 21st.dev Magic is connected. You'll need to restart Claude Code for this one to kick in — just close and reopen your terminal after we're done.
+
+---
+
+### Step 5: Done
+
+> **You're all set.** Here's what you just installed:
+>
+> - **UI/UX Pro Max** — 50+ styles, 161 palettes, 57 font pairings
+> - **Framer Motion** — smooth, professional animations
+> - **21st.dev Magic** — 100+ production-ready components
+>
+> **To build your first website, just tell me:**
+> - What your business does
+> - Who it's for
+> - What vibe you want (dark, minimal, bold, playful, etc.)
+>
+> I'll handle the rest. Try something like:
+>
+> *"Build me a landing page for my consulting business targeting small business owners. Dark theme, modern, with animations."*
+>
+> **Important:** Restart Claude Code first so 21st.dev loads in. Then let's build something.
+
+## Rules
+- Walk through each step ONE AT A TIME
+- Never dump all instructions at once
+- If any install fails, don't stop — acknowledge, give manual command, keep moving
+- Be encouraging and casual throughout
+- Assume zero coding experience
+- After everything is installed, prompt them to build their first site

docs/LookAtU-PRD.md

@@ -0,0 +1,60 @@
+# LookAtU: Product Plan (PRD)
+
+## What is it? (the 4th-grade version)
+LookAtU is a helper for parents. The parent has an app. The child has an app. The parent can see where the child is, see what the child does on the phone, choose which apps the child can use, and check calls and messages. If the child is in danger, the child taps a big **panic button** and the parent gets an alert right away.
+
+## Who is it for?
+- **Parents** of kids who have their own phone.
+- **Kids**, who need a simple way to ask for help.
+
+## Core features
+1. **Live location**: the parent sees where the child is, any time.
+2. **Activity monitor**: which apps are used and for how long.
+3. **App control**: the parent can allow, block, or limit apps, and approve new installs.
+4. **Calls and messages**: the parent can check call history and messages.
+5. **Panic button**: the child taps once. The parent gets an alert with the child's location.
+
+## Trust and safety rules (built in from day one)
+- The child **knows** the app is on their phone. No hidden spying. This is the honest way to do it, and app stores require it.
+- The parent signs in with a real account and a strong password.
+- Data is private and encrypted. Only the parent sees it.
+- Rules about monitoring messages differ by country and by the child's age. We must check the law for each country before launch.
+
+## Phased roadmap
+
+### Phase 1: Quick win (TODAY)
+A good-looking website (one page) that explains LookAtU and collects sign-ups.
+- Hero, 5 feature cards, "how it works", trust section, FAQ
+- Waitlist form that checks the email is real-looking
+- Works on phones and computers
+- **Done when:** page loads with no errors and the form and buttons work.
+
+### Phase 2: Make it real
+- Connect the waitlist form to a real service so emails are saved.
+- Add animations (Framer Motion) and better pictures.
+- Add privacy and terms pages.
+
+### Phase 3: Parent accounts
+- Sign up and log in.
+- A simple parent dashboard (website).
+- Link a parent to a child.
+
+### Phase 4: Phone apps
+- Child app and parent app (Android first, then iPhone).
+- Live location and the panic button with alerts (push notifications and SMS).
+
+### Phase 5: Monitoring and control
+- App usage, app blocking and install approval.
+- Call and message history (after legal review).
+
+## How we test at every phase
+1. Page loads with **no errors**.
+2. Buttons and forms **work**.
+3. Real services (database, email, maps, alerts) **work**.
+4. **Security check**: passwords, private data, no secrets in code.
+
+## Open questions for the owner
+- Which countries first?
+- Free or paid? (price)
+- Android first, or iPhone first?
+- Final name and logo?

lookatu/index.html

@@ -0,0 +1,229 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>LookAtU – Know your child is safe</title>
+<meta name="description" content="LookAtU helps parents see where their child is, guide their phone use, and gives kids a panic button for emergencies.">
+<style>
+:root{
+  --bg:#0b1220; --bg2:#111a2e; --card:#16213a; --text:#eaf0ff; --muted:#a3b1d1;
+  --brand:#4f8cff; --brand2:#7c5cff; --danger:#ff4d5e; --ok:#31d0a0; --line:#243253;
+}
+*{box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
+a{color:inherit}
+.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
+header{position:sticky;top:0;z-index:10;background:rgba(11,18,32,.85);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
+.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
+.logo{font-weight:800;font-size:1.3rem;text-decoration:none}
+.logo span{color:var(--brand)}
+.nav a.link{margin-left:22px;text-decoration:none;color:var(--muted);font-size:.95rem}
+.nav a.link:hover{color:var(--text)}
+.btn{display:inline-block;border:0;cursor:pointer;font:inherit;font-weight:700;padding:12px 22px;border-radius:12px;color:#fff;text-decoration:none;background:linear-gradient(135deg,var(--brand),var(--brand2));transition:transform .15s}
+.btn:hover{transform:translateY(-2px)}
+.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--text)}
+.hero{padding:80px 0 60px;text-align:center;background:radial-gradient(900px 400px at 50% -10%,rgba(79,140,255,.25),transparent)}
+.hero h1{font-size:clamp(2.2rem,6vw,3.8rem);line-height:1.1;margin:0 0 18px}
+.hero h1 em{font-style:normal;background:linear-gradient(135deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
+.hero p{max-width:620px;margin:0 auto 28px;color:var(--muted);font-size:1.15rem}
+.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
+.phone{margin:48px auto 0;width:240px;border:2px solid var(--line);border-radius:34px;padding:18px;background:var(--bg2);box-shadow:0 20px 60px rgba(0,0,0,.4)}
+.map{height:130px;border-radius:16px;background:linear-gradient(135deg,#1c2b4d,#22365f);position:relative;overflow:hidden}
+.pin{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px;border-radius:50%;background:var(--ok)}
+.pin::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid var(--ok);animation:pulse 2s infinite}
+@keyframes pulse{from{transform:scale(.6);opacity:1}to{transform:scale(1.8);opacity:0}}
+.phone p{margin:12px 0 4px;font-size:.9rem;color:var(--muted)}
+.panic{margin-top:6px;width:100%;padding:12px;border:0;border-radius:14px;background:var(--danger);color:#fff;font-weight:800;font-size:1rem;cursor:pointer}
+section{padding:70px 0}
+section.alt{background:var(--bg2)}
+h2{font-size:clamp(1.6rem,4vw,2.4rem);margin:0 0 10px;text-align:center}
+.sub{text-align:center;color:var(--muted);max-width:620px;margin:0 auto 40px}
+.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
+.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px}
+.card .ic{font-size:2rem}
+.card h3{margin:10px 0 6px}
+.card p{margin:0;color:var(--muted)}
+.card.sos{border-color:var(--danger)}
+.steps{counter-reset:s}
+.steps .card{position:relative;padding-top:50px}
+.steps .card::before{counter-increment:s;content:counter(s);position:absolute;top:14px;left:20px;width:28px;height:28px;border-radius:50%;background:var(--brand);display:grid;place-items:center;font-weight:800}
+.trust li{margin:10px 0;color:var(--muted)}
+.trust b{color:var(--text)}
+details{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:10px auto;max-width:720px}
+summary{cursor:pointer;font-weight:700}
+details p{color:var(--muted);margin:10px 0 0}
+form{max-width:480px;margin:0 auto;display:flex;gap:10px;flex-wrap:wrap}
+input[type=email]{flex:1 1 220px;padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
+input[type=email]:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
+#msg{text-align:center;margin-top:14px;min-height:1.5em}
+#msg.ok{color:var(--ok)} #msg.err{color:var(--danger)}
+.note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:8px}
+.sr{position:absolute;left:-9999px}
+.trap{position:absolute;left:-9999px;height:0;overflow:hidden}
+select{padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);font:inherit}
+.consent{flex:1 1 100%;font-size:.9rem;color:var(--muted)}
+.consent input{margin-right:8px}
+.consent a{color:var(--brand)}
+footer a{margin:0 8px}
+footer{padding:30px 0;border-top:1px solid var(--line);color:var(--muted);font-size:.9rem;text-align:center}
+@media (prefers-reduced-motion:reduce){.pin::after{animation:none}html{scroll-behavior:auto}}
+@media (max-width:640px){.nav a.link{display:none}}
+</style>
+</head>
+<body>
+<header>
+  <div class="wrap nav">
+    <a class="logo" href="#top">Look<span>At</span>U</a>
+    <nav>
+      <a class="link" href="#features">Features</a>
+      <a class="link" href="#how">How it works</a>
+      <a class="link" href="#trust">Trust</a>
+      <a class="link" href="#faq">FAQ</a>
+      <a class="btn" style="margin-left:22px;padding:9px 16px" href="#join">Join waitlist</a>
+    </nav>
+  </div>
+</header>
+
+<main id="top">
+  <div class="hero">
+    <div class="wrap">
+      <h1>Know your child is <em>safe</em>,<br>anytime you want.</h1>
+      <p>See where they are, guide how they use their phone, and give them a big red button to call for help when it matters most.</p>
+      <div class="cta">
+        <a class="btn" href="#join">Join the waitlist</a>
+        <a class="btn ghost" href="#features">See what it does</a>
+      </div>
+      <div class="phone" aria-hidden="true">
+        <div class="map"><div class="pin"></div></div>
+        <p>Alex is at school · just now</p>
+        <button class="panic" tabindex="-1">SOS</button>
+      </div>
+    </div>
+  </div>
+
+  <section id="features">
+    <div class="wrap">
+      <h2>Everything a parent needs</h2>
+      <p class="sub">Five simple tools, in one app.</p>
+      <div class="grid">
+        <div class="card"><div class="ic">📍</div><h3>Live location</h3><p>Open the app and see where your child is right now.</p></div>
+        <div class="card"><div class="ic">📊</div><h3>Activity monitor</h3><p>See which apps they use and for how long, every day.</p></div>
+        <div class="card"><div class="ic">🔒</div><h3>App control</h3><p>Allow, block or limit apps. Approve new installs before they happen.</p></div>
+        <div class="card"><div class="ic">💬</div><h3>Calls &amp; messages</h3><p>Check call history and messages so you can spot trouble early.</p></div>
+        <div class="card sos"><div class="ic">🚨</div><h3>Panic button</h3><p>One tap and you get an alert with their location, right away.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section id="how" class="alt">
+    <div class="wrap">
+      <h2>How it works</h2>
+      <p class="sub">Set up takes a few minutes.</p>
+      <div class="grid steps">
+        <div class="card"><h3>Install on both phones</h3><p>You get the parent app. Your child gets the child app.</p></div>
+        <div class="card"><h3>Link them together</h3><p>Scan a code on your child's phone to connect the two.</p></div>
+        <div class="card"><h3>Choose your rules</h3><p>Pick which apps are allowed and what you want to see.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <section id="trust">
+    <div class="wrap" style="max-width:720px">
+      <h2>Built on trust, not secrets</h2>
+      <p class="sub">Safety works best when families talk about it.</p>
+      <ul class="trust">
+        <li><b>Your child knows.</b> The app is always visible on their phone. LookAtU is never hidden.</li>
+        <li><b>Private by design.</b> Data is encrypted and only the parent account can see it.</li>
+        <li><b>You stay in charge.</b> Choose what to watch and turn features on or off at any time.</li>
+        <li><b>Follows the law.</b> Rules about monitoring differ by country and a child's age. We check them before we launch anywhere.</li>
+      </ul>
+    </div>
+  </section>
+
+  <section id="faq" class="alt">
+    <div class="wrap">
+      <h2>Questions</h2>
+      <p class="sub">&nbsp;</p>
+      <details><summary>Is LookAtU available now?</summary><p>Not yet. This page is for our waitlist. Join and we will email you when it opens.</p></details>
+      <details><summary>Can my child hide the app?</summary><p>No. The app is always visible, and your child knows it is there.</p></details>
+      <details><summary>What happens when my child presses the panic button?</summary><p>You get an instant alert with your child's location, so you can call them or get help.</p></details>
+      <details><summary>Which phones will it work on?</summary><p>We plan to start with Android, then iPhone. Tell us which one you need when you join.</p></details>
+      <details><summary>How much will it cost?</summary><p>We have not set the price yet. Waitlist members will hear first.</p></details>
+    </div>
+  </section>
+
+  <section id="join">
+    <div class="wrap">
+      <h2>Join the waitlist</h2>
+      <p class="sub">Be the first to know when LookAtU opens.</p>
+      <form id="waitlist" novalidate>
+        <label for="email" class="sr">Email address</label>
+        <input id="email" name="email" type="email" placeholder="you@example.com" autocomplete="email" required>
+        <label for="phone" class="sr">Your child's phone</label>
+        <select id="phone" name="phone">
+          <option value="Android">Android phone</option>
+          <option value="iPhone">iPhone</option>
+          <option value="Both">Both</option>
+        </select>
+        <div class="trap" aria-hidden="true"><label for="website">Leave this empty</label><input id="website" name="website" type="text" tabindex="-1" autocomplete="off"></div>
+        <label class="consent" for="agree"><input id="agree" name="agree" type="checkbox"> I agree to the <a href="privacy/">Privacy Policy</a> and want emails about LookAtU.</label>
+        <button class="btn" id="send" type="submit">Notify me</button>
+      </form>
+      <div id="msg" role="status" aria-live="polite"></div>
+      <p class="note" id="note">We only use your email to tell you when LookAtU opens. No spam.</p>
+    </div>
+  </section>
+</main>
+
+<footer><div class="wrap">© <span id="yr">2026</span> LookAtU. Early preview. <a href="privacy/">Privacy</a> <a href="terms/">Terms</a></div></footer>
+
+<script>
+// PASTE YOUR FORM URL BETWEEN THE QUOTES (example: https://formspree.io/f/abcdwxyz). While empty, the form runs in demo mode.
+var FORM_ENDPOINT = 'https://formspree.io/f/mljgogkr';
+(function(){
+  var form=document.getElementById('waitlist'),email=document.getElementById('email'),msg=document.getElementById('msg'),
+      btn=document.getElementById('send'),note=document.getElementById('note');
+  document.getElementById('yr').textContent=new Date().getFullYear();
+  if(!FORM_ENDPOINT){note.textContent='Demo mode: emails are not saved yet.';}
+  function say(cls,t){msg.className=cls;msg.textContent=t;msg.scrollIntoView({block:'nearest'});}
+  form.addEventListener('submit',function(e){
+    e.preventDefault();
+    var v=email.value.trim();
+    if(!/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v)){say('err','Please enter a real email address, like you@example.com.');email.focus();return;}
+    if(!document.getElementById('agree').checked){say('err','Please tick the box to agree to the Privacy Policy.');return;}
+    if(document.getElementById('website').value){say('ok','Thank you! You are on the list.');return;}
+    if(!FORM_ENDPOINT){say('ok','Thank you! You are on the list (demo, not saved).');form.reset();return;}
+    btn.disabled=true;say('','Sending...');
+    var data=new FormData();data.append('email',v);data.append('phone',document.getElementById('phone').value);
+    fetch(FORM_ENDPOINT,{method:'POST',headers:{'Accept':'application/json'},body:data})
+    .then(function(r){
+      if(!r.ok){return r.text().then(function(t){throw new Error('Error '+r.status+' '+t.slice(0,120));});}
+      say('ok','Thank you! You are on the list.');form.reset();
+    })
+    .catch(function(err){
+      say('err','Could not send. ('+(err&&err.message?err.message:'network problem')+') Please try again in a minute.');
+      if(window.console)console.error('Waitlist error:',err);
+    })
+    .then(function(){btn.disabled=false;msg.scrollIntoView({block:'nearest'});});
+  });
+})();
+</script>
+<script type="module">
+// Framer Motion ("motion") adds the animations. If it fails to load, the page still shows everything.
+try{
+  var m=await import('https://cdn.jsdelivr.net/npm/motion@11.11.13/+esm');
+  if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
+    m.animate('.hero h1,.hero p,.hero .cta',{opacity:[0,1],y:[24,0]},{duration:.7,delay:m.stagger(.12)});
+    m.animate('.phone',{opacity:[0,1],y:[40,0]},{duration:.8,delay:.4});
+    document.querySelectorAll('.card').forEach(function(c){
+      m.inView(c,function(){m.animate(c,{opacity:[0,1],y:[24,0]},{duration:.5});});
+      c.addEventListener('mouseenter',function(){m.animate(c,{y:-4},{duration:.2});});
+      c.addEventListener('mouseleave',function(){m.animate(c,{y:0},{duration:.2});});
+    });
+  }
+}catch(e){}
+</script>
+</body>
+</html>

lookatu/privacy/index.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Privacy Policy – LookAtU</title>
+<style>
+body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
+main{max-width:720px;margin:0 auto;padding:40px 20px}
+a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
+.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
+</style></head><body><main>
+<p><a href="../">&larr; Back to LookAtU</a></p>
+<h1>Privacy Policy</h1>
+<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
+
+<h2>What we collect today</h2>
+<p>This website collects only the email address and phone type (Android, iPhone or both) that you type into the waitlist form.</p>
+<h2>Why we collect it</h2>
+<p>We use it only to tell you when LookAtU opens. We do not sell it. We do not use it for anything else.</p>
+<h2>Who sees it</h2>
+<p>The LookAtU team, and the service that stores the waitlist for us.</p>
+<h2>Your choices</h2>
+<p>You can ask us to delete your email at any time. Every email we send will have a way to unsubscribe.</p>
+<h2>The LookAtU app (coming later)</h2>
+<p>The app will handle location, activity and messages of children. Before launch we will publish full details here: what is collected, how it is protected, how long it is kept, and how a parent can delete it. The child will always be able to see that the app is installed.</p>
+<h2>Contact</h2>
+<p>Contact email: <em>to be added before launch</em>.</p>
+</main></body></html>

lookatu/terms/index.html

@@ -0,0 +1,29 @@
+<!doctype html>
+<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Terms of Use – LookAtU</title>
+<style>
+body{margin:0;background:#0b1220;color:#eaf0ff;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.7}
+main{max-width:720px;margin:0 auto;padding:40px 20px}
+a{color:#4f8cff}h1{margin-top:0}h2{margin-top:32px}
+.draft{background:#16213a;border:1px solid #ff4d5e;border-radius:12px;padding:14px 18px;color:#a3b1d1}
+</style></head><body><main>
+<p><a href="../">&larr; Back to LookAtU</a></p>
+<h1>Terms of Use</h1>
+<p class="draft"><strong>Draft.</strong> This page is a plain-language starting point. A lawyer must review it before LookAtU launches, because rules for children's data differ by country.</p>
+
+<h2>This is an early preview</h2>
+<p>This website is a preview of a product that is not released yet. Nothing here is an offer to sell.</p>
+<h2>Waitlist</h2>
+<p>Joining the waitlist is free and does not oblige you to buy anything. You can leave at any time.</p>
+<h2>Using LookAtU responsibly (when it launches)</h2>
+<ul>
+<li>LookAtU is for parents and legal guardians of their own children.</li>
+<li>It must not be used to watch another adult or someone else's child.</li>
+<li>The child must be able to see that the app is installed.</li>
+<li>Parents are responsible for following the laws in their country.</li>
+</ul>
+<h2>Emergencies</h2>
+<p>The panic button helps a child alert a parent. It does not replace the police or emergency services. In an emergency, call your local emergency number.</p>
+<h2>Contact</h2>
+<p>Contact email: <em>to be added before launch</em>.</p>
+</main></body></html>