Tenlou \u2014 For when your memory needs a buddy.<\/title>\r\n<meta name=\"description\" content=\"Tenlou is the gentle task buddy that holds your tasks, never judges, and reminds you until they're done. Coming soon on mobile.\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --bg: #EEF4ED;\r\n --surface: #FFFFFF;\r\n --primary: #3D5A80;\r\n --accent: #F4D58D;\r\n --cta: #E07A5F;\r\n --text1: #2C3E50;\r\n --text2: #6B7E8F;\r\n --border: #D8E2DC;\r\n --success: #4CAF7D;\r\n --radius: 16px;\r\n --font: 'Nunito', sans-serif;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: var(--font);\r\n background: var(--bg);\r\n color: var(--text1);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n background: rgba(238,244,237,0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid var(--border);\r\n padding: 0 5%;\r\n display: flex; align-items: center; justify-content: space-between;\r\n height: 64px;\r\n }\r\n\r\n .nav-logo {\r\n font-size: 1.6rem; font-weight: 800;\r\n color: var(--primary); text-decoration: none;\r\n letter-spacing: -0.5px;\r\n }\r\n .nav-logo span { color: var(--cta); }\r\n\r\n .nav-links { display: flex; align-items: center; gap: 2rem; }\r\n .nav-links a {\r\n font-size: 0.9rem; font-weight: 600;\r\n color: var(--text2); text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n .nav-links a:hover { color: var(--primary); }\r\n\r\n .nav-cta {\r\n background: var(--cta) !important;\r\n color: #fff !important;\r\n padding: 0.5rem 1.25rem;\r\n border-radius: 50px;\r\n font-weight: 700 !important;\r\n transition: opacity 0.2s !important;\r\n }\r\n .nav-cta:hover { opacity: 0.88 !important; }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex; align-items: center; justify-content: center;\r\n text-align: center;\r\n padding: 100px 5% 60px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-blob {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n opacity: 0.35;\r\n pointer-events: none;\r\n }\r\n .blob1 { width: 500px; height: 500px; background: var(--primary); top: -100px; right: -100px; animation: drift 12s ease-in-out infinite alternate; }\r\n .blob2 { width: 400px; height: 400px; background: var(--accent); bottom: -80px; left: -80px; animation: drift 15s ease-in-out infinite alternate-reverse; }\r\n .blob3 { width: 300px; height: 300px; background: var(--cta); top: 40%; left: 60%; animation: drift 10s ease-in-out infinite alternate; }\r\n\r\n @keyframes drift {\r\n from { transform: translate(0, 0) scale(1); }\r\n to { transform: translate(30px, 20px) scale(1.08); }\r\n }\r\n\r\n .hero-inner { position: relative; z-index: 2; max-width: 740px; }\r\n\r\n .hero-badge {\r\n display: inline-block;\r\n background: var(--primary);\r\n color: var(--accent);\r\n font-size: 0.75rem; font-weight: 700;\r\n letter-spacing: 1.5px; text-transform: uppercase;\r\n padding: 0.35rem 1rem;\r\n border-radius: 50px;\r\n margin-bottom: 1.5rem;\r\n animation: fadeUp 0.6s ease both;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(2.6rem, 6vw, 4.2rem);\r\n font-weight: 800;\r\n color: var(--primary);\r\n line-height: 1.15;\r\n letter-spacing: -1px;\r\n margin-bottom: 1.25rem;\r\n animation: fadeUp 0.6s 0.1s ease both;\r\n }\r\n\r\n .hero h1 em {\r\n font-style: normal;\r\n color: var(--cta);\r\n position: relative;\r\n }\r\n .hero h1 em::after {\r\n content: '';\r\n position: absolute; left: 0; right: 0; bottom: 2px;\r\n height: 3px;\r\n background: var(--accent);\r\n border-radius: 2px;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 1.15rem;\r\n color: var(--text2);\r\n max-width: 520px;\r\n margin: 0 auto 2.5rem;\r\n font-weight: 400;\r\n animation: fadeUp 0.6s 0.2s ease both;\r\n }\r\n\r\n .hero-actions {\r\n display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;\r\n animation: fadeUp 0.6s 0.3s ease both;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--cta);\r\n color: #fff;\r\n padding: 0.85rem 2rem;\r\n border-radius: 50px;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n border: none; cursor: pointer;\r\n text-decoration: none;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n box-shadow: 0 4px 20px rgba(224,122,95,0.35);\r\n }\r\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(224,122,95,0.45); }\r\n\r\n .btn-secondary {\r\n background: transparent;\r\n color: var(--primary);\r\n padding: 0.85rem 2rem;\r\n border-radius: 50px;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n border: 2px solid var(--primary);\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: background 0.2s, color 0.2s;\r\n }\r\n .btn-secondary:hover { background: var(--primary); color: #fff; }\r\n\r\n .coming-soon-pill {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n border-radius: 50px;\r\n padding: 0.5rem 1.25rem;\r\n font-size: 0.85rem; color: var(--text2); font-weight: 600;\r\n margin-top: 2rem;\r\n animation: fadeUp 0.6s 0.4s ease both;\r\n }\r\n .coming-soon-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }\r\n @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }\r\n\r\n \/* \u2500\u2500 PHONE MOCKUP \u2500\u2500 *\/\r\n .phone-section {\r\n display: flex; justify-content: center;\r\n padding: 20px 5% 80px;\r\n position: relative;\r\n }\r\n\r\n .phone-frame {\r\n width: 260px;\r\n background: var(--primary);\r\n border-radius: 40px;\r\n padding: 16px;\r\n box-shadow: 0 30px 80px rgba(61,90,128,0.35), 0 0 0 1px rgba(61,90,128,0.15);\r\n animation: floatPhone 6s ease-in-out infinite;\r\n position: relative;\r\n }\r\n @keyframes floatPhone {\r\n 0%,100%{ transform: translateY(0) rotate(-1deg); }\r\n 50%{ transform: translateY(-12px) rotate(1deg); }\r\n }\r\n\r\n .phone-screen {\r\n background: #0D1117;\r\n border-radius: 28px;\r\n padding: 24px 16px 16px;\r\n overflow: hidden;\r\n min-height: 480px;\r\n }\r\n\r\n .phone-status { display: flex; justify-content: space-between; margin-bottom: 20px; }\r\n .phone-status span { font-size: 10px; color: #8FA8BF; font-weight: 600; }\r\n\r\n .phone-greeting { font-size: 11px; color: #8FA8BF; margin-bottom: 4px; }\r\n .phone-title { font-size: 18px; font-weight: 800; color: #EEF4ED; margin-bottom: 16px; }\r\n\r\n .task-card {\r\n background: #1E2D3D;\r\n border-radius: 12px;\r\n padding: 12px;\r\n margin-bottom: 8px;\r\n border-left: 3px solid var(--accent);\r\n }\r\n .task-card.done { border-left-color: var(--success); opacity: 0.7; }\r\n .task-card .task-name { font-size: 11px; font-weight: 700; color: #EEF4ED; margin-bottom: 4px; }\r\n .task-card .task-meta { font-size: 9px; color: #8FA8BF; }\r\n .task-card .check { float: right; font-size: 14px; }\r\n\r\n .nudge-bubble {\r\n background: var(--primary);\r\n border-radius: 12px 12px 12px 4px;\r\n padding: 8px 12px;\r\n margin-top: 12px;\r\n font-size: 10px; color: var(--accent); font-weight: 600;\r\n line-height: 1.4;\r\n }\r\n\r\n \/* \u2500\u2500 SECTIONS \u2500\u2500 *\/\r\n section { padding: 90px 5%; }\r\n\r\n .section-label {\r\n font-size: 0.75rem; font-weight: 700;\r\n letter-spacing: 2px; text-transform: uppercase;\r\n color: var(--primary);\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .section-heading {\r\n font-size: clamp(1.9rem, 4vw, 2.8rem);\r\n font-weight: 800; color: var(--text1);\r\n line-height: 1.2; letter-spacing: -0.5px;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-sub { font-size: 1.05rem; color: var(--text2); max-width: 560px; }\r\n\r\n \/* \u2500\u2500 PROBLEM \u2500\u2500 *\/\r\n .problem-section { background: var(--surface); }\r\n\r\n .problem-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .problem-card {\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 2rem 1.75rem;\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n .problem-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(61,90,128,0.12); }\r\n\r\n .problem-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 4px;\r\n background: var(--primary);\r\n border-radius: var(--radius) var(--radius) 0 0;\r\n }\r\n\r\n .problem-icon {\r\n font-size: 2rem; margin-bottom: 1rem;\r\n display: block;\r\n }\r\n\r\n .problem-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .problem-card p { font-size: 0.9rem; color: var(--text2); line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 HOW IT WORKS \u2500\u2500 *\/\r\n .how-section { background: var(--bg); }\r\n\r\n .steps-wrap {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 2rem;\r\n margin-top: 3.5rem;\r\n position: relative;\r\n }\r\n\r\n .step-card {\r\n text-align: center;\r\n padding: 2rem 1.5rem;\r\n background: var(--surface);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n transition: transform 0.25s;\r\n }\r\n .step-card:hover { transform: translateY(-4px); }\r\n\r\n .step-num {\r\n width: 52px; height: 52px;\r\n background: var(--primary);\r\n color: var(--accent);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.25rem; font-weight: 800;\r\n margin: 0 auto 1.25rem;\r\n }\r\n\r\n .step-card h3 { font-size: 1rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .step-card p { font-size: 0.88rem; color: var(--text2); }\r\n\r\n \/* \u2500\u2500 FEATURES \u2500\u2500 *\/\r\n .features-section { background: var(--surface); }\r\n\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .feature-card {\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 1.75rem;\r\n border: 1px solid var(--border);\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(61,90,128,0.1); }\r\n\r\n .feature-icon {\r\n width: 48px; height: 48px;\r\n background: var(--primary);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 1.25rem;\r\n font-size: 1.4rem;\r\n }\r\n\r\n .feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--text1); margin-bottom: 0.4rem; }\r\n .feature-card p { font-size: 0.88rem; color: var(--text2); line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 AUDIENCE \u2500\u2500 *\/\r\n .audience-section {\r\n background: var(--primary);\r\n text-align: center;\r\n }\r\n\r\n .audience-section .section-label { color: var(--accent); }\r\n .audience-section .section-heading { color: #EEF4ED; }\r\n .audience-section .section-sub { color: #8FA8BF; margin: 0 auto; }\r\n\r\n .audience-cards {\r\n display: flex; flex-wrap: wrap; justify-content: center;\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .aud-card {\r\n background: rgba(255,255,255,0.07);\r\n border: 1px solid rgba(255,255,255,0.12);\r\n border-radius: var(--radius);\r\n padding: 2rem 1.75rem;\r\n max-width: 280px;\r\n text-align: left;\r\n transition: background 0.25s;\r\n }\r\n .aud-card:hover { background: rgba(255,255,255,0.11); }\r\n\r\n .aud-emoji { font-size: 2.2rem; margin-bottom: 1rem; display: block; }\r\n .aud-card h3 { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }\r\n .aud-card p { font-size: 0.88rem; color: #8FA8BF; line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 WAITLIST \u2500\u2500 *\/\r\n .waitlist-section { background: var(--bg); text-align: center; }\r\n\r\n .waitlist-box {\r\n max-width: 520px;\r\n margin: 3rem auto 0;\r\n background: var(--surface);\r\n border-radius: 24px;\r\n padding: 2.5rem 2rem;\r\n border: 1px solid var(--border);\r\n box-shadow: 0 8px 40px rgba(61,90,128,0.1);\r\n }\r\n\r\n .waitlist-box h3 { font-size: 1.3rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .waitlist-box p { font-size: 0.9rem; color: var(--text2); margin-bottom: 1.5rem; }\r\n\r\n .waitlist-form { display: flex; flex-direction: column; gap: 0.75rem; }\r\n\r\n .waitlist-form input {\r\n padding: 0.85rem 1.25rem;\r\n border-radius: 50px;\r\n border: 1.5px solid var(--border);\r\n font-family: var(--font);\r\n font-size: 0.95rem;\r\n color: var(--text1);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s;\r\n }\r\n .waitlist-form input:focus { border-color: var(--primary); }\r\n .waitlist-form input::placeholder { color: var(--text2); }\r\n\r\n .waitlist-form button {\r\n background: var(--cta);\r\n color: #fff;\r\n border: none;\r\n border-radius: 50px;\r\n padding: 0.85rem;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n cursor: pointer;\r\n transition: opacity 0.2s, transform 0.2s;\r\n }\r\n .waitlist-form button:hover { opacity: 0.88; transform: translateY(-1px); }\r\n\r\n .privacy-note { font-size: 0.78rem; color: var(--text2); margin-top: 0.75rem; }\r\n\r\n .success-msg {\r\n display: none;\r\n background: #e8f7f0;\r\n border: 1px solid var(--success);\r\n color: #2a7a54;\r\n border-radius: 12px;\r\n padding: 1rem;\r\n font-size: 0.9rem; font-weight: 600;\r\n margin-top: 1rem;\r\n }\r\n\r\n \/* \u2500\u2500 SOCIAL \u2500\u2500 *\/\r\n .social-section { background: var(--surface); text-align: center; }\r\n\r\n .social-links {\r\n display: flex; flex-wrap: wrap; justify-content: center;\r\n gap: 1rem;\r\n margin-top: 2.5rem;\r\n }\r\n\r\n .social-btn {\r\n display: flex; align-items: center; gap: 0.6rem;\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: 50px;\r\n padding: 0.65rem 1.4rem;\r\n font-family: var(--font);\r\n font-size: 0.9rem; font-weight: 700;\r\n color: var(--primary);\r\n text-decoration: none;\r\n transition: background 0.2s, transform 0.2s, border-color 0.2s;\r\n }\r\n .social-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }\r\n .social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--primary);\r\n color: #8FA8BF;\r\n text-align: center;\r\n padding: 3rem 5% 2rem;\r\n }\r\n\r\n .footer-logo { font-size: 1.6rem; font-weight: 800; color: #EEF4ED; margin-bottom: 0.4rem; }\r\n .footer-logo span { color: var(--accent); }\r\n .footer-tagline { font-size: 0.9rem; margin-bottom: 2rem; }\r\n .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\r\n .footer-links a { color: #8FA8BF; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.2s; }\r\n .footer-links a:hover { color: var(--accent); }\r\n .footer-copy { font-size: 0.78rem; color: #5A7A95; }\r\n\r\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(24px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .reveal {\r\n opacity: 0; transform: translateY(28px);\r\n transition: opacity 0.55s ease, transform 0.55s ease;\r\n }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 640px) {\r\n .nav-links { display: none; }\r\n .hero { padding: 90px 5% 40px; }\r\n .phone-frame { width: 220px; }\r\n .phone-screen { min-height: 400px; }\r\n section { padding: 70px 5%; }\r\n .waitlist-box { padding: 2rem 1.25rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav>\r\n <a class=\"nav-logo\" href=\"#\">Ten<span>lou<\/span><\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#how-it-works\">How it works<\/a>\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"#waitlist\">Download<\/a>\r\n <a href=\"#waitlist\" class=\"nav-cta\">Join Waitlist<\/a>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"hero-blob blob1\"><\/div>\r\n <div class=\"hero-blob blob2\"><\/div>\r\n <div class=\"hero-blob blob3\"><\/div>\r\n <div class=\"hero-inner\">\r\n <span class=\"hero-badge\">Coming Soon to Mobile<\/span>\r\n <h1>Your memory's<br\/><em>gentle buddy<\/em>.<\/h1>\r\n <p class=\"hero-sub\">Tenlou holds your tasks, never judges, and reminds you \u2014 softly \u2014 until they're done. No shame. No stress. Just: <strong>Ten lo.<\/strong><\/p>\r\n <div class=\"hero-actions\">\r\n <a href=\"#waitlist\" class=\"btn-primary\">Join the Waitlist<\/a>\r\n <a href=\"#how-it-works\" class=\"btn-secondary\">See How It Works<\/a>\r\n <\/div>\r\n <div class=\"coming-soon-pill\">\r\n <span class=\"dot\"><\/span>\r\n App launching soon \u2014 be the first to know\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"phone-section\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-screen\">\r\n <div class=\"phone-status\">\r\n <span>9:41<\/span><span>\u25cf\u25cf\u25cf<\/span>\r\n <\/div>\r\n <p class=\"phone-greeting\">Good morning<\/p>\r\n <p class=\"phone-title\">Your tasks \ud83e\udd1d<\/p>\r\n\r\n <div class=\"task-card\">\r\n <span class=\"check\">\ud83d\udd14<\/span>\r\n <div class=\"task-name\">Call the dentist<\/div>\r\n <div class=\"task-meta\">You asked me to hold this \u00b7 Due today<\/div>\r\n <\/div>\r\n\r\n <div class=\"task-card\">\r\n <span class=\"check\">\ud83d\udd14<\/span>\r\n <div class=\"task-name\">Pick up prescription<\/div>\r\n <div class=\"task-meta\">Assigned by: Mom \u00b7 Due today<\/div>\r\n <\/div>\r\n\r\n <div class=\"task-card done\">\r\n <span class=\"check\">\u2705<\/span>\r\n <div class=\"task-name\">Email the teacher<\/div>\r\n <div class=\"task-meta\">Completed \u00b7 Nice work!<\/div>\r\n <\/div>\r\n\r\n <div class=\"nudge-bubble\">\r\n \"Hey \u2014 you asked me to hold 'Call the dentist.' Still on your mind? No rush. \ud83d\ude42\"\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section class=\"problem-section reveal\" id=\"problem\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">The problem<\/p>\r\n <h2 class=\"section-heading\">You know what to do.<br\/>You just forget to do it.<\/h2>\r\n <p class=\"section-sub\">And then the shame spiral starts. Sound familiar?<\/p>\r\n <div class=\"problem-grid\">\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83c\udf00<\/span>\r\n <h3>The vanishing task<\/h3>\r\n <p>Someone tells you something. You nod. Three minutes later \u2014 gone. Not because you don't care. Just because memory is hard.<\/p>\r\n <\/div>\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83d\ude14<\/span>\r\n <h3>The shame spiral<\/h3>\r\n <p>\"Why didn't I do it? I knew I had to.\" That internal loop is exhausting. You don't need a taskmaster \u2014 you need a buddy.<\/p>\r\n <\/div>\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83d\udde3\ufe0f<\/span>\r\n <h3>Verbal reminders feel like nagging<\/h3>\r\n <p>When someone repeats a task out loud, it can feel like criticism \u2014 even when it's not. Tenlou removes that friction entirely.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"how-section\" id=\"how-it-works\">\r\n <div style=\"max-width:1100px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">How it works<\/p>\r\n <h2 class=\"section-heading\">Simple as telling a friend.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Three easy steps. No learning curve. No shame. Just results.<\/p>\r\n <div class=\"steps-wrap\">\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">1<\/div>\r\n <h3>Give the task to Tenlou<\/h3>\r\n <p>Type it or say it out loud. Tenlou receives it \u2014 so your brain doesn't have to hold it.<\/p>\r\n <\/div>\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">2<\/div>\r\n <h3>Tenlou holds it safely<\/h3>\r\n <p>Your task lives in Tenlou, not in your head. Gentle reminders increase in frequency \u2014 never in volume.<\/p>\r\n <\/div>\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">3<\/div>\r\n <h3>Check it off. Earn your reward.<\/h3>\r\n <p>You set your own reward. Completing a task becomes a win \u2014 not just a relief.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"features-section\" id=\"features\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">Features<\/p>\r\n <h2 class=\"section-heading\">Built for real, human brains.<\/h2>\r\n <p class=\"section-sub\">Every feature designed around how you actually work \u2014 not how you think you should.<\/p>\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83c\udf99\ufe0f<\/div>\r\n <h3>Voice or text input<\/h3>\r\n <p>Just say it. Tenlou listens and logs it so you can keep moving. No forms, no friction.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udd14<\/div>\r\n <h3>Gentle reminders<\/h3>\r\n <p>Nudges that feel like a friend \u2014 never a boss. Increasing frequency, never increasing guilt.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83c\udfc6<\/div>\r\n <h3>You set the reward<\/h3>\r\n <p>Screen time, a snack, a walk \u2014 you decide what motivates you. Tenlou doesn't judge.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/div>\r\n <h3>Family task sharing<\/h3>\r\n <p>Assign chores to kids or family without repeating yourself out loud. Less friction. More peace.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83e\udde0<\/div>\r\n <h3>ADHD buddy mode<\/h3>\r\n <p>Extra check-ins, encouraging messages, and zero shame. Designed with executive dysfunction in mind.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udd12<\/div>\r\n <h3>Private & secure<\/h3>\r\n <p>Your tasks stay yours. No ads, no selling your data. Just a quiet buddy in your corner.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"audience-section reveal\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">Who it's for<\/p>\r\n <h2 class=\"section-heading\">Made for you. Whoever you are.<\/h2>\r\n <p class=\"section-sub\">Tenlou was built for the forgetful, the overwhelmed, and the ones who just need a little extra help.<\/p>\r\n <div class=\"audience-cards\">\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83e\udde9<\/span>\r\n <h3>ADHD Warriors<\/h3>\r\n <p>Your brain is brilliant but busy. Tenlou is the external memory system it's been asking for \u2014 without the shame.<\/p>\r\n <\/div>\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83d\udc6a<\/span>\r\n <h3>Parents & Families<\/h3>\r\n <p>Assign chores to kids while you're at work. Let them earn rewards you set. No more repeating yourself.<\/p>\r\n <\/div>\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83d\ude2e\u200d\ud83d\udca8<\/span>\r\n <h3>The Overwhelmed<\/h3>\r\n <p>To-do lists feel like walls. Tenlou breaks it down gently \u2014 one task, one nudge, one win at a time.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"waitlist-section\" id=\"waitlist\">\r\n <div style=\"max-width:680px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">Be the first<\/p>\r\n <h2 class=\"section-heading\">Tenlou is almost here.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Join the waitlist and get early access when we launch on the App Store and Google Play.<\/p>\r\n <div class=\"waitlist-box reveal\">\r\n <h3>\ud83d\ude4c Reserve your spot<\/h3>\r\n <p>No spam. Just one email when the app is ready for you.<\/p>\r\n <div class=\"waitlist-form\" id=\"waitlistForm\">\r\n <input type=\"text\" id=\"wlName\" placeholder=\"Your first name\" autocomplete=\"given-name\" \/>\r\n <input type=\"email\" id=\"wlEmail\" placeholder=\"Your email address\" autocomplete=\"email\" \/>\r\n <button type=\"button\" onclick=\"submitWaitlist()\">Notify me when it launches \u2192<\/button>\r\n <\/div>\r\n <div class=\"success-msg\" id=\"successMsg\">\r\n \ud83c\udf89 You're on the list! We'll reach out as soon as Tenlou is ready. Thanks for believing in this early.\r\n <\/div>\r\n <p class=\"privacy-note\">\ud83d\udd12 We respect your privacy. No spam, ever. Unsubscribe anytime.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"social-section reveal\">\r\n <div style=\"max-width:700px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">Follow Along<\/p>\r\n <h2 class=\"section-heading\">Watch Tenlou come to life.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Follow us on social for behind-the-scenes, launch updates, and a community that gets it.<\/p>\r\n <div class=\"social-links\">\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.instagram.com\/tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"currentColor\" stroke-width=\"2\"\/><circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/><\/svg>\r\n Instagram\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.tiktok.com\/@tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n TikTok\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.x.com\/tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\r\n X (Twitter)\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.facebook.com\/profile.php?id=61573674610030\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Facebook\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.youtube.com\/@TenlouApp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z\" stroke=\"currentColor\" stroke-width=\"2\"\/><polygon points=\"9.75 15.02 15.5 12 9.75 8.98 9.75 15.02\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><\/svg>\r\n YouTube\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"footer-logo\">Ten<span>lou<\/span><\/div>\r\n <p class=\"footer-tagline\">For when your memory needs a buddy.<\/p>\r\n <div class=\"footer-links\">\r\n <a href=\"#home\">Home<\/a>\r\n <a href=\"#how-it-works\">How it works<\/a>\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"#waitlist\">Waitlist<\/a>\r\n <a href=\"mailto:hello@tenlou.app\">Contact<\/a>\r\n <\/div>\r\n <p class=\"footer-copy\">© <span id=\"yr\"><\/span> Tenlou. All rights reserved. Built with care for forgetful humans everywhere.<\/p>\r\n<\/footer>\r\n\r\n<script>\r\n document.getElementById('yr').textContent = new Date().getFullYear();\r\n\r\n \/\/ Scroll reveal\r\n const reveals = document.querySelectorAll('.reveal');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });\r\n }, { threshold: 0.12 });\r\n reveals.forEach(el => observer.observe(el));\r\n\r\n \/\/ Waitlist form\r\n function submitWaitlist() {\r\n const name = document.getElementById('wlName').value.trim();\r\n const email = document.getElementById('wlEmail').value.trim();\r\n if (!name) { alert('Please enter your first name.'); return; }\r\n const emailReg = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!emailReg.test(email)) { alert('Please enter a valid email address.'); return; }\r\n document.getElementById('waitlistForm').style.display = 'none';\r\n document.getElementById('successMsg').style.display = 'block';\r\n \/\/ NOTE TO DEVELOPER: Connect this to your email service (Mailchimp, ConvertKit, etc.)\r\n \/\/ by replacing this block with your form submission API call.\r\n console.log('Waitlist signup:', { name, email });\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tenlou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":12,"date":"2026-04-20T05:22:00","date_gmt":"2026-04-20T05:22:00","guid":{"rendered":"https:\/\/tenlou.com\/?page_id=12"},"modified":"2026-04-20T05:30:35","modified_gmt":"2026-04-20T05:30:35","slug":"home","status":"publish","type":"page","link":"https:\/\/tenlou.com\/","title":{"rendered":"Home"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\nTenlou \u2014 For when your memory needs a buddy.<\/title>\r\n<meta name=\"description\" content=\"Tenlou is the gentle task buddy that holds your tasks, never judges, and reminds you until they're done. Coming soon on mobile.\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Nunito:wght@300;400;600;700;800&display=swap\" rel=\"stylesheet\" \/>\r\n<style>\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --bg: #EEF4ED;\r\n --surface: #FFFFFF;\r\n --primary: #3D5A80;\r\n --accent: #F4D58D;\r\n --cta: #E07A5F;\r\n --text1: #2C3E50;\r\n --text2: #6B7E8F;\r\n --border: #D8E2DC;\r\n --success: #4CAF7D;\r\n --radius: 16px;\r\n --font: 'Nunito', sans-serif;\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n font-family: var(--font);\r\n background: var(--bg);\r\n color: var(--text1);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n }\r\n\r\n \/* \u2500\u2500 NAV \u2500\u2500 *\/\r\n nav {\r\n position: fixed; top: 0; left: 0; right: 0; z-index: 100;\r\n background: rgba(238,244,237,0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid var(--border);\r\n padding: 0 5%;\r\n display: flex; align-items: center; justify-content: space-between;\r\n height: 64px;\r\n }\r\n\r\n .nav-logo {\r\n font-size: 1.6rem; font-weight: 800;\r\n color: var(--primary); text-decoration: none;\r\n letter-spacing: -0.5px;\r\n }\r\n .nav-logo span { color: var(--cta); }\r\n\r\n .nav-links { display: flex; align-items: center; gap: 2rem; }\r\n .nav-links a {\r\n font-size: 0.9rem; font-weight: 600;\r\n color: var(--text2); text-decoration: none;\r\n transition: color 0.2s;\r\n }\r\n .nav-links a:hover { color: var(--primary); }\r\n\r\n .nav-cta {\r\n background: var(--cta) !important;\r\n color: #fff !important;\r\n padding: 0.5rem 1.25rem;\r\n border-radius: 50px;\r\n font-weight: 700 !important;\r\n transition: opacity 0.2s !important;\r\n }\r\n .nav-cta:hover { opacity: 0.88 !important; }\r\n\r\n \/* \u2500\u2500 HERO \u2500\u2500 *\/\r\n .hero {\r\n min-height: 100vh;\r\n display: flex; align-items: center; justify-content: center;\r\n text-align: center;\r\n padding: 100px 5% 60px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .hero-blob {\r\n position: absolute;\r\n border-radius: 50%;\r\n filter: blur(80px);\r\n opacity: 0.35;\r\n pointer-events: none;\r\n }\r\n .blob1 { width: 500px; height: 500px; background: var(--primary); top: -100px; right: -100px; animation: drift 12s ease-in-out infinite alternate; }\r\n .blob2 { width: 400px; height: 400px; background: var(--accent); bottom: -80px; left: -80px; animation: drift 15s ease-in-out infinite alternate-reverse; }\r\n .blob3 { width: 300px; height: 300px; background: var(--cta); top: 40%; left: 60%; animation: drift 10s ease-in-out infinite alternate; }\r\n\r\n @keyframes drift {\r\n from { transform: translate(0, 0) scale(1); }\r\n to { transform: translate(30px, 20px) scale(1.08); }\r\n }\r\n\r\n .hero-inner { position: relative; z-index: 2; max-width: 740px; }\r\n\r\n .hero-badge {\r\n display: inline-block;\r\n background: var(--primary);\r\n color: var(--accent);\r\n font-size: 0.75rem; font-weight: 700;\r\n letter-spacing: 1.5px; text-transform: uppercase;\r\n padding: 0.35rem 1rem;\r\n border-radius: 50px;\r\n margin-bottom: 1.5rem;\r\n animation: fadeUp 0.6s ease both;\r\n }\r\n\r\n .hero h1 {\r\n font-size: clamp(2.6rem, 6vw, 4.2rem);\r\n font-weight: 800;\r\n color: var(--primary);\r\n line-height: 1.15;\r\n letter-spacing: -1px;\r\n margin-bottom: 1.25rem;\r\n animation: fadeUp 0.6s 0.1s ease both;\r\n }\r\n\r\n .hero h1 em {\r\n font-style: normal;\r\n color: var(--cta);\r\n position: relative;\r\n }\r\n .hero h1 em::after {\r\n content: '';\r\n position: absolute; left: 0; right: 0; bottom: 2px;\r\n height: 3px;\r\n background: var(--accent);\r\n border-radius: 2px;\r\n }\r\n\r\n .hero-sub {\r\n font-size: 1.15rem;\r\n color: var(--text2);\r\n max-width: 520px;\r\n margin: 0 auto 2.5rem;\r\n font-weight: 400;\r\n animation: fadeUp 0.6s 0.2s ease both;\r\n }\r\n\r\n .hero-actions {\r\n display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;\r\n animation: fadeUp 0.6s 0.3s ease both;\r\n }\r\n\r\n .btn-primary {\r\n background: var(--cta);\r\n color: #fff;\r\n padding: 0.85rem 2rem;\r\n border-radius: 50px;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n border: none; cursor: pointer;\r\n text-decoration: none;\r\n transition: transform 0.2s, box-shadow 0.2s;\r\n box-shadow: 0 4px 20px rgba(224,122,95,0.35);\r\n }\r\n .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(224,122,95,0.45); }\r\n\r\n .btn-secondary {\r\n background: transparent;\r\n color: var(--primary);\r\n padding: 0.85rem 2rem;\r\n border-radius: 50px;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n border: 2px solid var(--primary);\r\n cursor: pointer;\r\n text-decoration: none;\r\n transition: background 0.2s, color 0.2s;\r\n }\r\n .btn-secondary:hover { background: var(--primary); color: #fff; }\r\n\r\n .coming-soon-pill {\r\n display: inline-flex; align-items: center; gap: 0.5rem;\r\n background: var(--surface);\r\n border: 1px solid var(--border);\r\n border-radius: 50px;\r\n padding: 0.5rem 1.25rem;\r\n font-size: 0.85rem; color: var(--text2); font-weight: 600;\r\n margin-top: 2rem;\r\n animation: fadeUp 0.6s 0.4s ease both;\r\n }\r\n .coming-soon-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); animation: pulse 2s infinite; }\r\n @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.4;} }\r\n\r\n \/* \u2500\u2500 PHONE MOCKUP \u2500\u2500 *\/\r\n .phone-section {\r\n display: flex; justify-content: center;\r\n padding: 20px 5% 80px;\r\n position: relative;\r\n }\r\n\r\n .phone-frame {\r\n width: 260px;\r\n background: var(--primary);\r\n border-radius: 40px;\r\n padding: 16px;\r\n box-shadow: 0 30px 80px rgba(61,90,128,0.35), 0 0 0 1px rgba(61,90,128,0.15);\r\n animation: floatPhone 6s ease-in-out infinite;\r\n position: relative;\r\n }\r\n @keyframes floatPhone {\r\n 0%,100%{ transform: translateY(0) rotate(-1deg); }\r\n 50%{ transform: translateY(-12px) rotate(1deg); }\r\n }\r\n\r\n .phone-screen {\r\n background: #0D1117;\r\n border-radius: 28px;\r\n padding: 24px 16px 16px;\r\n overflow: hidden;\r\n min-height: 480px;\r\n }\r\n\r\n .phone-status { display: flex; justify-content: space-between; margin-bottom: 20px; }\r\n .phone-status span { font-size: 10px; color: #8FA8BF; font-weight: 600; }\r\n\r\n .phone-greeting { font-size: 11px; color: #8FA8BF; margin-bottom: 4px; }\r\n .phone-title { font-size: 18px; font-weight: 800; color: #EEF4ED; margin-bottom: 16px; }\r\n\r\n .task-card {\r\n background: #1E2D3D;\r\n border-radius: 12px;\r\n padding: 12px;\r\n margin-bottom: 8px;\r\n border-left: 3px solid var(--accent);\r\n }\r\n .task-card.done { border-left-color: var(--success); opacity: 0.7; }\r\n .task-card .task-name { font-size: 11px; font-weight: 700; color: #EEF4ED; margin-bottom: 4px; }\r\n .task-card .task-meta { font-size: 9px; color: #8FA8BF; }\r\n .task-card .check { float: right; font-size: 14px; }\r\n\r\n .nudge-bubble {\r\n background: var(--primary);\r\n border-radius: 12px 12px 12px 4px;\r\n padding: 8px 12px;\r\n margin-top: 12px;\r\n font-size: 10px; color: var(--accent); font-weight: 600;\r\n line-height: 1.4;\r\n }\r\n\r\n \/* \u2500\u2500 SECTIONS \u2500\u2500 *\/\r\n section { padding: 90px 5%; }\r\n\r\n .section-label {\r\n font-size: 0.75rem; font-weight: 700;\r\n letter-spacing: 2px; text-transform: uppercase;\r\n color: var(--primary);\r\n margin-bottom: 0.75rem;\r\n }\r\n\r\n .section-heading {\r\n font-size: clamp(1.9rem, 4vw, 2.8rem);\r\n font-weight: 800; color: var(--text1);\r\n line-height: 1.2; letter-spacing: -0.5px;\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .section-sub { font-size: 1.05rem; color: var(--text2); max-width: 560px; }\r\n\r\n \/* \u2500\u2500 PROBLEM \u2500\u2500 *\/\r\n .problem-section { background: var(--surface); }\r\n\r\n .problem-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .problem-card {\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 2rem 1.75rem;\r\n border: 1px solid var(--border);\r\n position: relative;\r\n overflow: hidden;\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n .problem-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(61,90,128,0.12); }\r\n\r\n .problem-card::before {\r\n content: '';\r\n position: absolute; top: 0; left: 0; right: 0;\r\n height: 4px;\r\n background: var(--primary);\r\n border-radius: var(--radius) var(--radius) 0 0;\r\n }\r\n\r\n .problem-icon {\r\n font-size: 2rem; margin-bottom: 1rem;\r\n display: block;\r\n }\r\n\r\n .problem-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .problem-card p { font-size: 0.9rem; color: var(--text2); line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 HOW IT WORKS \u2500\u2500 *\/\r\n .how-section { background: var(--bg); }\r\n\r\n .steps-wrap {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 2rem;\r\n margin-top: 3.5rem;\r\n position: relative;\r\n }\r\n\r\n .step-card {\r\n text-align: center;\r\n padding: 2rem 1.5rem;\r\n background: var(--surface);\r\n border-radius: var(--radius);\r\n border: 1px solid var(--border);\r\n transition: transform 0.25s;\r\n }\r\n .step-card:hover { transform: translateY(-4px); }\r\n\r\n .step-num {\r\n width: 52px; height: 52px;\r\n background: var(--primary);\r\n color: var(--accent);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n font-size: 1.25rem; font-weight: 800;\r\n margin: 0 auto 1.25rem;\r\n }\r\n\r\n .step-card h3 { font-size: 1rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .step-card p { font-size: 0.88rem; color: var(--text2); }\r\n\r\n \/* \u2500\u2500 FEATURES \u2500\u2500 *\/\r\n .features-section { background: var(--surface); }\r\n\r\n .features-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .feature-card {\r\n background: var(--bg);\r\n border-radius: var(--radius);\r\n padding: 1.75rem;\r\n border: 1px solid var(--border);\r\n transition: transform 0.25s, box-shadow 0.25s;\r\n }\r\n .feature-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(61,90,128,0.1); }\r\n\r\n .feature-icon {\r\n width: 48px; height: 48px;\r\n background: var(--primary);\r\n border-radius: 12px;\r\n display: flex; align-items: center; justify-content: center;\r\n margin-bottom: 1.25rem;\r\n font-size: 1.4rem;\r\n }\r\n\r\n .feature-card h3 { font-size: 1rem; font-weight: 700; color: var(--text1); margin-bottom: 0.4rem; }\r\n .feature-card p { font-size: 0.88rem; color: var(--text2); line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 AUDIENCE \u2500\u2500 *\/\r\n .audience-section {\r\n background: var(--primary);\r\n text-align: center;\r\n }\r\n\r\n .audience-section .section-label { color: var(--accent); }\r\n .audience-section .section-heading { color: #EEF4ED; }\r\n .audience-section .section-sub { color: #8FA8BF; margin: 0 auto; }\r\n\r\n .audience-cards {\r\n display: flex; flex-wrap: wrap; justify-content: center;\r\n gap: 1.5rem;\r\n margin-top: 3rem;\r\n }\r\n\r\n .aud-card {\r\n background: rgba(255,255,255,0.07);\r\n border: 1px solid rgba(255,255,255,0.12);\r\n border-radius: var(--radius);\r\n padding: 2rem 1.75rem;\r\n max-width: 280px;\r\n text-align: left;\r\n transition: background 0.25s;\r\n }\r\n .aud-card:hover { background: rgba(255,255,255,0.11); }\r\n\r\n .aud-emoji { font-size: 2.2rem; margin-bottom: 1rem; display: block; }\r\n .aud-card h3 { font-size: 1rem; font-weight: 700; color: var(--accent); margin-bottom: 0.5rem; }\r\n .aud-card p { font-size: 0.88rem; color: #8FA8BF; line-height: 1.6; }\r\n\r\n \/* \u2500\u2500 WAITLIST \u2500\u2500 *\/\r\n .waitlist-section { background: var(--bg); text-align: center; }\r\n\r\n .waitlist-box {\r\n max-width: 520px;\r\n margin: 3rem auto 0;\r\n background: var(--surface);\r\n border-radius: 24px;\r\n padding: 2.5rem 2rem;\r\n border: 1px solid var(--border);\r\n box-shadow: 0 8px 40px rgba(61,90,128,0.1);\r\n }\r\n\r\n .waitlist-box h3 { font-size: 1.3rem; font-weight: 700; color: var(--text1); margin-bottom: 0.5rem; }\r\n .waitlist-box p { font-size: 0.9rem; color: var(--text2); margin-bottom: 1.5rem; }\r\n\r\n .waitlist-form { display: flex; flex-direction: column; gap: 0.75rem; }\r\n\r\n .waitlist-form input {\r\n padding: 0.85rem 1.25rem;\r\n border-radius: 50px;\r\n border: 1.5px solid var(--border);\r\n font-family: var(--font);\r\n font-size: 0.95rem;\r\n color: var(--text1);\r\n background: var(--bg);\r\n outline: none;\r\n transition: border-color 0.2s;\r\n }\r\n .waitlist-form input:focus { border-color: var(--primary); }\r\n .waitlist-form input::placeholder { color: var(--text2); }\r\n\r\n .waitlist-form button {\r\n background: var(--cta);\r\n color: #fff;\r\n border: none;\r\n border-radius: 50px;\r\n padding: 0.85rem;\r\n font-family: var(--font);\r\n font-size: 1rem; font-weight: 700;\r\n cursor: pointer;\r\n transition: opacity 0.2s, transform 0.2s;\r\n }\r\n .waitlist-form button:hover { opacity: 0.88; transform: translateY(-1px); }\r\n\r\n .privacy-note { font-size: 0.78rem; color: var(--text2); margin-top: 0.75rem; }\r\n\r\n .success-msg {\r\n display: none;\r\n background: #e8f7f0;\r\n border: 1px solid var(--success);\r\n color: #2a7a54;\r\n border-radius: 12px;\r\n padding: 1rem;\r\n font-size: 0.9rem; font-weight: 600;\r\n margin-top: 1rem;\r\n }\r\n\r\n \/* \u2500\u2500 SOCIAL \u2500\u2500 *\/\r\n .social-section { background: var(--surface); text-align: center; }\r\n\r\n .social-links {\r\n display: flex; flex-wrap: wrap; justify-content: center;\r\n gap: 1rem;\r\n margin-top: 2.5rem;\r\n }\r\n\r\n .social-btn {\r\n display: flex; align-items: center; gap: 0.6rem;\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: 50px;\r\n padding: 0.65rem 1.4rem;\r\n font-family: var(--font);\r\n font-size: 0.9rem; font-weight: 700;\r\n color: var(--primary);\r\n text-decoration: none;\r\n transition: background 0.2s, transform 0.2s, border-color 0.2s;\r\n }\r\n .social-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); transform: translateY(-2px); }\r\n .social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }\r\n\r\n \/* \u2500\u2500 FOOTER \u2500\u2500 *\/\r\n footer {\r\n background: var(--primary);\r\n color: #8FA8BF;\r\n text-align: center;\r\n padding: 3rem 5% 2rem;\r\n }\r\n\r\n .footer-logo { font-size: 1.6rem; font-weight: 800; color: #EEF4ED; margin-bottom: 0.4rem; }\r\n .footer-logo span { color: var(--accent); }\r\n .footer-tagline { font-size: 0.9rem; margin-bottom: 2rem; }\r\n .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin-bottom: 2rem; }\r\n .footer-links a { color: #8FA8BF; text-decoration: none; font-size: 0.85rem; font-weight: 600; transition: color 0.2s; }\r\n .footer-links a:hover { color: var(--accent); }\r\n .footer-copy { font-size: 0.78rem; color: #5A7A95; }\r\n\r\n \/* \u2500\u2500 ANIMATIONS \u2500\u2500 *\/\r\n @keyframes fadeUp {\r\n from { opacity: 0; transform: translateY(24px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n\r\n .reveal {\r\n opacity: 0; transform: translateY(28px);\r\n transition: opacity 0.55s ease, transform 0.55s ease;\r\n }\r\n .reveal.visible { opacity: 1; transform: translateY(0); }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 640px) {\r\n .nav-links { display: none; }\r\n .hero { padding: 90px 5% 40px; }\r\n .phone-frame { width: 220px; }\r\n .phone-screen { min-height: 400px; }\r\n section { padding: 70px 5%; }\r\n .waitlist-box { padding: 2rem 1.25rem; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav>\r\n <a class=\"nav-logo\" href=\"#\">Ten<span>lou<\/span><\/a>\r\n <div class=\"nav-links\">\r\n <a href=\"#how-it-works\">How it works<\/a>\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"#waitlist\">Download<\/a>\r\n <a href=\"#waitlist\" class=\"nav-cta\">Join Waitlist<\/a>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n<section class=\"hero\" id=\"home\">\r\n <div class=\"hero-blob blob1\"><\/div>\r\n <div class=\"hero-blob blob2\"><\/div>\r\n <div class=\"hero-blob blob3\"><\/div>\r\n <div class=\"hero-inner\">\r\n <span class=\"hero-badge\">Coming Soon to Mobile<\/span>\r\n <h1>Your memory's<br\/><em>gentle buddy<\/em>.<\/h1>\r\n <p class=\"hero-sub\">Tenlou holds your tasks, never judges, and reminds you \u2014 softly \u2014 until they're done. No shame. No stress. Just: <strong>Ten lo.<\/strong><\/p>\r\n <div class=\"hero-actions\">\r\n <a href=\"#waitlist\" class=\"btn-primary\">Join the Waitlist<\/a>\r\n <a href=\"#how-it-works\" class=\"btn-secondary\">See How It Works<\/a>\r\n <\/div>\r\n <div class=\"coming-soon-pill\">\r\n <span class=\"dot\"><\/span>\r\n App launching soon \u2014 be the first to know\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<div class=\"phone-section\">\r\n <div class=\"phone-frame\">\r\n <div class=\"phone-screen\">\r\n <div class=\"phone-status\">\r\n <span>9:41<\/span><span>\u25cf\u25cf\u25cf<\/span>\r\n <\/div>\r\n <p class=\"phone-greeting\">Good morning<\/p>\r\n <p class=\"phone-title\">Your tasks \ud83e\udd1d<\/p>\r\n\r\n <div class=\"task-card\">\r\n <span class=\"check\">\ud83d\udd14<\/span>\r\n <div class=\"task-name\">Call the dentist<\/div>\r\n <div class=\"task-meta\">You asked me to hold this \u00b7 Due today<\/div>\r\n <\/div>\r\n\r\n <div class=\"task-card\">\r\n <span class=\"check\">\ud83d\udd14<\/span>\r\n <div class=\"task-name\">Pick up prescription<\/div>\r\n <div class=\"task-meta\">Assigned by: Mom \u00b7 Due today<\/div>\r\n <\/div>\r\n\r\n <div class=\"task-card done\">\r\n <span class=\"check\">\u2705<\/span>\r\n <div class=\"task-name\">Email the teacher<\/div>\r\n <div class=\"task-meta\">Completed \u00b7 Nice work!<\/div>\r\n <\/div>\r\n\r\n <div class=\"nudge-bubble\">\r\n \"Hey \u2014 you asked me to hold 'Call the dentist.' Still on your mind? No rush. \ud83d\ude42\"\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n\r\n<section class=\"problem-section reveal\" id=\"problem\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">The problem<\/p>\r\n <h2 class=\"section-heading\">You know what to do.<br\/>You just forget to do it.<\/h2>\r\n <p class=\"section-sub\">And then the shame spiral starts. Sound familiar?<\/p>\r\n <div class=\"problem-grid\">\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83c\udf00<\/span>\r\n <h3>The vanishing task<\/h3>\r\n <p>Someone tells you something. You nod. Three minutes later \u2014 gone. Not because you don't care. Just because memory is hard.<\/p>\r\n <\/div>\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83d\ude14<\/span>\r\n <h3>The shame spiral<\/h3>\r\n <p>\"Why didn't I do it? I knew I had to.\" That internal loop is exhausting. You don't need a taskmaster \u2014 you need a buddy.<\/p>\r\n <\/div>\r\n <div class=\"problem-card reveal\">\r\n <span class=\"problem-icon\">\ud83d\udde3\ufe0f<\/span>\r\n <h3>Verbal reminders feel like nagging<\/h3>\r\n <p>When someone repeats a task out loud, it can feel like criticism \u2014 even when it's not. Tenlou removes that friction entirely.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"how-section\" id=\"how-it-works\">\r\n <div style=\"max-width:1100px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">How it works<\/p>\r\n <h2 class=\"section-heading\">Simple as telling a friend.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Three easy steps. No learning curve. No shame. Just results.<\/p>\r\n <div class=\"steps-wrap\">\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">1<\/div>\r\n <h3>Give the task to Tenlou<\/h3>\r\n <p>Type it or say it out loud. Tenlou receives it \u2014 so your brain doesn't have to hold it.<\/p>\r\n <\/div>\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">2<\/div>\r\n <h3>Tenlou holds it safely<\/h3>\r\n <p>Your task lives in Tenlou, not in your head. Gentle reminders increase in frequency \u2014 never in volume.<\/p>\r\n <\/div>\r\n <div class=\"step-card reveal\">\r\n <div class=\"step-num\">3<\/div>\r\n <h3>Check it off. Earn your reward.<\/h3>\r\n <p>You set your own reward. Completing a task becomes a win \u2014 not just a relief.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"features-section\" id=\"features\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">Features<\/p>\r\n <h2 class=\"section-heading\">Built for real, human brains.<\/h2>\r\n <p class=\"section-sub\">Every feature designed around how you actually work \u2014 not how you think you should.<\/p>\r\n <div class=\"features-grid\">\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83c\udf99\ufe0f<\/div>\r\n <h3>Voice or text input<\/h3>\r\n <p>Just say it. Tenlou listens and logs it so you can keep moving. No forms, no friction.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udd14<\/div>\r\n <h3>Gentle reminders<\/h3>\r\n <p>Nudges that feel like a friend \u2014 never a boss. Increasing frequency, never increasing guilt.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83c\udfc6<\/div>\r\n <h3>You set the reward<\/h3>\r\n <p>Screen time, a snack, a walk \u2014 you decide what motivates you. Tenlou doesn't judge.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67<\/div>\r\n <h3>Family task sharing<\/h3>\r\n <p>Assign chores to kids or family without repeating yourself out loud. Less friction. More peace.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83e\udde0<\/div>\r\n <h3>ADHD buddy mode<\/h3>\r\n <p>Extra check-ins, encouraging messages, and zero shame. Designed with executive dysfunction in mind.<\/p>\r\n <\/div>\r\n <div class=\"feature-card reveal\">\r\n <div class=\"feature-icon\">\ud83d\udd12<\/div>\r\n <h3>Private & secure<\/h3>\r\n <p>Your tasks stay yours. No ads, no selling your data. Just a quiet buddy in your corner.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"audience-section reveal\">\r\n <div style=\"max-width:1100px; margin:0 auto;\">\r\n <p class=\"section-label\">Who it's for<\/p>\r\n <h2 class=\"section-heading\">Made for you. Whoever you are.<\/h2>\r\n <p class=\"section-sub\">Tenlou was built for the forgetful, the overwhelmed, and the ones who just need a little extra help.<\/p>\r\n <div class=\"audience-cards\">\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83e\udde9<\/span>\r\n <h3>ADHD Warriors<\/h3>\r\n <p>Your brain is brilliant but busy. Tenlou is the external memory system it's been asking for \u2014 without the shame.<\/p>\r\n <\/div>\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83d\udc6a<\/span>\r\n <h3>Parents & Families<\/h3>\r\n <p>Assign chores to kids while you're at work. Let them earn rewards you set. No more repeating yourself.<\/p>\r\n <\/div>\r\n <div class=\"aud-card\">\r\n <span class=\"aud-emoji\">\ud83d\ude2e\u200d\ud83d\udca8<\/span>\r\n <h3>The Overwhelmed<\/h3>\r\n <p>To-do lists feel like walls. Tenlou breaks it down gently \u2014 one task, one nudge, one win at a time.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"waitlist-section\" id=\"waitlist\">\r\n <div style=\"max-width:680px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">Be the first<\/p>\r\n <h2 class=\"section-heading\">Tenlou is almost here.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Join the waitlist and get early access when we launch on the App Store and Google Play.<\/p>\r\n <div class=\"waitlist-box reveal\">\r\n <h3>\ud83d\ude4c Reserve your spot<\/h3>\r\n <p>No spam. Just one email when the app is ready for you.<\/p>\r\n <div class=\"waitlist-form\" id=\"waitlistForm\">\r\n <input type=\"text\" id=\"wlName\" placeholder=\"Your first name\" autocomplete=\"given-name\" \/>\r\n <input type=\"email\" id=\"wlEmail\" placeholder=\"Your email address\" autocomplete=\"email\" \/>\r\n <button type=\"button\" onclick=\"submitWaitlist()\">Notify me when it launches \u2192<\/button>\r\n <\/div>\r\n <div class=\"success-msg\" id=\"successMsg\">\r\n \ud83c\udf89 You're on the list! We'll reach out as soon as Tenlou is ready. Thanks for believing in this early.\r\n <\/div>\r\n <p class=\"privacy-note\">\ud83d\udd12 We respect your privacy. No spam, ever. Unsubscribe anytime.<\/p>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"social-section reveal\">\r\n <div style=\"max-width:700px; margin:0 auto; text-align:center;\">\r\n <p class=\"section-label\">Follow Along<\/p>\r\n <h2 class=\"section-heading\">Watch Tenlou come to life.<\/h2>\r\n <p class=\"section-sub\" style=\"margin:0 auto;\">Follow us on social for behind-the-scenes, launch updates, and a community that gets it.<\/p>\r\n <div class=\"social-links\">\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.instagram.com\/tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" stroke=\"currentColor\" stroke-width=\"2\"\/><circle cx=\"12\" cy=\"12\" r=\"4\" stroke=\"currentColor\" stroke-width=\"2\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\"1\" fill=\"currentColor\"\/><\/svg>\r\n Instagram\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.tiktok.com\/@tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n TikTok\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.x.com\/tenlouapp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\/><\/svg>\r\n X (Twitter)\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.facebook.com\/profile.php?id=61573674610030\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\r\n Facebook\r\n <\/a>\r\n\r\n \r\n <a class=\"social-btn\" href=\"https:\/\/www.youtube.com\/@TenlouApp\" target=\"_blank\" rel=\"noopener\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46A2.78 2.78 0 0 0 1.46 6.42 29 29 0 0 0 1 12a29 29 0 0 0 .46 5.58 2.78 2.78 0 0 0 1.95 1.96C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 0 0 1.95-1.96A29 29 0 0 0 23 12a29 29 0 0 0-.46-5.58z\" stroke=\"currentColor\" stroke-width=\"2\"\/><polygon points=\"9.75 15.02 15.5 12 9.75 8.98 9.75 15.02\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linejoin=\"round\"\/><\/svg>\r\n YouTube\r\n <\/a>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<footer>\r\n <div class=\"footer-logo\">Ten<span>lou<\/span><\/div>\r\n <p class=\"footer-tagline\">For when your memory needs a buddy.<\/p>\r\n <div class=\"footer-links\">\r\n <a href=\"#home\">Home<\/a>\r\n <a href=\"#how-it-works\">How it works<\/a>\r\n <a href=\"#features\">Features<\/a>\r\n <a href=\"#waitlist\">Waitlist<\/a>\r\n <a href=\"mailto:hello@tenlou.app\">Contact<\/a>\r\n <\/div>\r\n <p class=\"footer-copy\">© <span id=\"yr\"><\/span> Tenlou. All rights reserved. Built with care for forgetful humans everywhere.<\/p>\r\n<\/footer>\r\n\r\n<script>\r\n document.getElementById('yr').textContent = new Date().getFullYear();\r\n\r\n \/\/ Scroll reveal\r\n const reveals = document.querySelectorAll('.reveal');\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); } });\r\n }, { threshold: 0.12 });\r\n reveals.forEach(el => observer.observe(el));\r\n\r\n \/\/ Waitlist form\r\n function submitWaitlist() {\r\n const name = document.getElementById('wlName').value.trim();\r\n const email = document.getElementById('wlEmail').value.trim();\r\n if (!name) { alert('Please enter your first name.'); return; }\r\n const emailReg = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!emailReg.test(email)) { alert('Please enter a valid email address.'); return; }\r\n document.getElementById('waitlistForm').style.display = 'none';\r\n document.getElementById('successMsg').style.display = 'block';\r\n \/\/ NOTE TO DEVELOPER: Connect this to your email service (Mailchimp, ConvertKit, etc.)\r\n \/\/ by replacing this block with your form submission API call.\r\n console.log('Waitlist signup:', { name, email });\r\n }\r\n<\/script>\r\n<\/body>\r\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tenlou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":1,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions"}],"predecessor-version":[{"id":14,"href":"https:\/\/tenlou.com\/index.php?rest_route=\/wp\/v2\/pages\/12\/revisions\/14"}],"wp:attachment":[{"href":"https:\/\/tenlou.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}