| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8" /> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| | <title>HitSafe.ai — Founder Decision Memo</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <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=Bebas+Neue&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@300;400;500;700&family=Manrope:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" /> |
| |
|
| | <style> |
| | :root { |
| | --green: #007A3D; |
| | --green-light: #00A855; |
| | --green-bg: #E8F7EE; |
| | --green-border: rgba(0,122,61,0.18); |
| | --amber: #C47A00; |
| | --amber-bg: #FFF5E0; |
| | --amber-border: rgba(196,122,0,0.22); |
| | --red: #C42B2B; |
| | --red-bg: #FDEAEA; |
| | --red-border: rgba(196,43,43,0.2); |
| | --blue: #1A56A0; |
| | --blue-bg: #EBF2FB; |
| | --blue-border: rgba(26,86,160,0.18); |
| | --page: #F7F7F9; |
| | --surface: #FFFFFF; |
| | --surface-2: #F0F0F4; |
| | --surface-3: #E8E8EE; |
| | --border: rgba(0,0,0,0.08); |
| | --border-mid: rgba(0,0,0,0.14); |
| | --text-main: rgba(0,0,0,0.88); |
| | --text-mid: rgba(0,0,0,0.56); |
| | --text-muted: rgba(0,0,0,0.36); |
| | } |
| | |
| | * { box-sizing: border-box; margin: 0; padding: 0; } |
| | html { scroll-behavior: smooth; } |
| | |
| | body { |
| | background-color: var(--page); |
| | color: var(--text-main); |
| | font-family: 'Manrope', sans-serif; |
| | font-size: 15px; |
| | line-height: 1.7; |
| | overflow-x: hidden; |
| | } |
| | |
| | body::before { |
| | content: ''; |
| | position: fixed; |
| | inset: 0; |
| | background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E"); |
| | opacity: 0.02; |
| | pointer-events: none; |
| | z-index: 9999; |
| | } |
| | |
| | .font-bebas { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; } |
| | .font-mono { font-family: 'JetBrains Mono', monospace; } |
| | |
| | @keyframes fadeUp { |
| | from { opacity: 0; transform: translateY(24px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | @keyframes ticker { |
| | 0% { transform: translateX(0); } |
| | 100% { transform: translateX(-50%); } |
| | } |
| | @keyframes glow-pulse { |
| | 0%, 100% { opacity: 0.5; } |
| | 50% { opacity: 1; } |
| | } |
| | @keyframes slideInRight { |
| | from { opacity: 0; transform: translateX(40px); } |
| | to { opacity: 1; transform: translateX(0); } |
| | } |
| | @keyframes slideOutRight { |
| | from { opacity: 1; transform: translateX(0); } |
| | to { opacity: 0; transform: translateX(40px); } |
| | } |
| | |
| | .animate-fade-up { animation: fadeUp 0.7s cubic-bezier(0.22,1,0.36,1) forwards; } |
| | .delay-1 { animation-delay: 0.1s; opacity: 0; } |
| | .delay-2 { animation-delay: 0.25s; opacity: 0; } |
| | .delay-3 { animation-delay: 0.4s; opacity: 0; } |
| | .delay-4 { animation-delay: 0.55s; opacity: 0; } |
| | |
| | |
| | #view-memo { display: block; } |
| | #view-workflow { display: none; } |
| | #view-workflow.active { |
| | display: block; |
| | animation: slideInRight 0.45s cubic-bezier(0.22,1,0.36,1) forwards; |
| | } |
| | |
| | |
| | .pill { |
| | display: inline-flex; align-items: center; gap: 6px; |
| | padding: 4px 12px; border-radius: 999px; |
| | font-family: 'JetBrains Mono', monospace; |
| | font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; |
| | } |
| | .pill-green { background: var(--green-bg); color: var(--green); border: 1px solid var(--green-border); } |
| | .pill-amber { background: var(--amber-bg); color: var(--amber); border: 1px solid var(--amber-border); } |
| | .pill-red { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-border); } |
| | .pill-blue { background: var(--blue-bg); color: var(--blue); border: 1px solid var(--blue-border); } |
| | .pill-neutral { background: var(--surface-2); color: var(--text-mid); border: 1px solid var(--border); } |
| | |
| | .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } |
| | .dot-green { background: var(--green-light); animation: glow-pulse 2s infinite; } |
| | .dot-amber { background: var(--amber); } |
| | .dot-red { background: var(--red); } |
| | .dot-blue { background: var(--blue); } |
| | |
| | |
| | .card { |
| | background: var(--surface); |
| | border: 1px solid var(--border); |
| | border-radius: 16px; |
| | padding: 28px 32px; |
| | box-shadow: 0 1px 4px rgba(0,0,0,0.05); |
| | } |
| | .card-accent { |
| | background: linear-gradient(135deg, var(--green-bg) 0%, rgba(232,247,238,0.3) 100%); |
| | border: 1px solid var(--green-border); |
| | border-radius: 16px; |
| | padding: 28px 32px; |
| | } |
| | .card-blue { |
| | background: linear-gradient(135deg, var(--blue-bg) 0%, rgba(235,242,251,0.3) 100%); |
| | border: 1px solid var(--blue-border); |
| | border-radius: 16px; |
| | padding: 28px 32px; |
| | } |
| | |
| | |
| | .stat-number { |
| | font-family: 'Bebas Neue', sans-serif; |
| | font-size: clamp(48px, 6vw, 80px); |
| | letter-spacing: 0.02em; |
| | line-height: 1; |
| | color: var(--green); |
| | } |
| | |
| | |
| | .section-label { |
| | font-family: 'JetBrains Mono', monospace; |
| | font-size: 10px; font-weight: 500; |
| | letter-spacing: 0.2em; text-transform: uppercase; |
| | color: var(--text-muted); |
| | } |
| | |
| | |
| | .hero-bg { |
| | background: |
| | radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,168,85,0.06) 0%, transparent 70%), |
| | radial-gradient(ellipse 50% 40% at 85% 110%, rgba(0,122,61,0.03) 0%, transparent 60%), |
| | var(--surface); |
| | } |
| | .grid-bg { |
| | background-image: |
| | linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px), |
| | linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px); |
| | background-size: 60px 60px; |
| | } |
| | |
| | |
| | .ticker-track { animation: ticker 28s linear infinite; white-space: nowrap; display: flex; } |
| | |
| | |
| | .funnel-step { |
| | position: relative; |
| | display: flex; align-items: flex-start; gap: 20px; |
| | padding: 20px 0; |
| | } |
| | .funnel-step:not(:last-child)::after { |
| | content: ''; |
| | position: absolute; |
| | left: 17px; top: 52px; |
| | width: 2px; height: calc(100% - 20px); |
| | background: linear-gradient(to bottom, var(--green-light), transparent); |
| | } |
| | .funnel-num { |
| | width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; |
| | display: flex; align-items: center; justify-content: center; |
| | background: var(--surface-2); border: 1px solid var(--green-border); |
| | font-family: 'JetBrains Mono', monospace; font-size: 12px; |
| | color: var(--green); font-weight: 700; z-index: 1; |
| | } |
| | |
| | |
| | .comp-row:hover { background: var(--surface-2); } |
| | |
| | |
| | .btn-primary { |
| | background: var(--green); color: #fff; |
| | font-family: 'Manrope', sans-serif; |
| | font-weight: 800; font-size: 13px; |
| | letter-spacing: 0.05em; text-transform: uppercase; |
| | padding: 14px 32px; border-radius: 8px; |
| | border: none; cursor: pointer; |
| | transition: all 0.2s ease; |
| | display: inline-block; text-decoration: none; |
| | } |
| | .btn-primary:hover { background: #005a2b; transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,122,61,0.22); } |
| | |
| | .btn-secondary { |
| | background: transparent; color: var(--text-main); |
| | font-family: 'Manrope', sans-serif; |
| | font-weight: 700; font-size: 13px; |
| | letter-spacing: 0.05em; text-transform: uppercase; |
| | padding: 13px 28px; border-radius: 8px; |
| | border: 1px solid var(--border-mid); cursor: pointer; |
| | transition: all 0.2s ease; |
| | display: inline-block; |
| | } |
| | .btn-secondary:hover { border-color: rgba(0,0,0,0.28); background: var(--surface-2); } |
| | |
| | .btn-workflow { |
| | background: var(--surface); color: var(--green); |
| | font-family: 'Manrope', sans-serif; |
| | font-weight: 700; font-size: 13px; |
| | letter-spacing: 0.04em; |
| | padding: 13px 28px; border-radius: 8px; |
| | border: 1.5px solid var(--green); cursor: pointer; |
| | transition: all 0.2s ease; |
| | display: inline-flex; align-items: center; gap: 8px; |
| | text-decoration: none; |
| | } |
| | .btn-workflow:hover { background: var(--green-bg); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,122,61,0.12); } |
| | |
| | .btn-back { |
| | background: transparent; color: var(--text-mid); |
| | font-family: 'JetBrains Mono', monospace; |
| | font-weight: 500; font-size: 11px; |
| | letter-spacing: 0.12em; text-transform: uppercase; |
| | padding: 10px 20px; border-radius: 6px; |
| | border: 1px solid var(--border); cursor: pointer; |
| | transition: all 0.18s ease; |
| | display: inline-flex; align-items: center; gap: 8px; |
| | } |
| | .btn-back:hover { border-color: var(--border-mid); color: var(--text-main); background: var(--surface-2); } |
| | |
| | |
| | .wf-node { |
| | background: var(--surface); |
| | border: 1px solid var(--border); |
| | border-radius: 10px; |
| | padding: 12px 18px; |
| | font-size: 13px; font-weight: 600; |
| | color: var(--text-main); |
| | text-align: center; |
| | box-shadow: 0 1px 4px rgba(0,0,0,0.05); |
| | position: relative; |
| | } |
| | .wf-node-green { |
| | background: var(--green-bg); |
| | border-color: var(--green-border); |
| | color: var(--green); |
| | } |
| | .wf-node-amber { |
| | background: var(--amber-bg); |
| | border-color: var(--amber-border); |
| | color: var(--amber); |
| | } |
| | .wf-node-blue { |
| | background: var(--blue-bg); |
| | border-color: var(--blue-border); |
| | color: var(--blue); |
| | } |
| | .wf-node-muted { |
| | background: var(--surface-2); |
| | border-color: var(--border); |
| | color: var(--text-mid); |
| | font-weight: 500; |
| | } |
| | .wf-arrow { |
| | display: flex; align-items: center; justify-content: center; |
| | color: var(--text-muted); font-size: 18px; |
| | height: 24px; flex-shrink: 0; |
| | } |
| | .wf-arrow-right { |
| | display: flex; align-items: center; |
| | color: var(--text-muted); font-size: 18px; |
| | padding: 0 4px; flex-shrink: 0; |
| | } |
| | .wf-lane { |
| | background: var(--surface); |
| | border: 1px solid var(--border); |
| | border-radius: 14px; |
| | padding: 20px 22px; |
| | } |
| | .wf-lane-label { |
| | font-family: 'JetBrains Mono', monospace; |
| | font-size: 9px; font-weight: 700; |
| | letter-spacing: 0.18em; text-transform: uppercase; |
| | margin-bottom: 14px; padding-bottom: 10px; |
| | border-bottom: 1px solid var(--border); |
| | } |
| | .wf-decision { |
| | background: var(--amber-bg); |
| | border: 1.5px dashed var(--amber-border); |
| | border-radius: 8px; |
| | padding: 12px 18px; |
| | font-size: 13px; font-weight: 600; |
| | color: var(--amber); |
| | text-align: center; |
| | } |
| | |
| | |
| | .wf-section { |
| | margin-bottom: 60px; |
| | } |
| | .wf-section-title { |
| | font-family: 'Bebas Neue', sans-serif; |
| | font-size: 28px; letter-spacing: 0.04em; |
| | color: var(--text-main); |
| | margin-bottom: 8px; |
| | } |
| | .wf-section-sub { |
| | font-size: 14px; color: var(--text-mid); |
| | max-width: 680px; margin-bottom: 28px; |
| | line-height: 1.65; |
| | } |
| | .wf-caption { |
| | font-family: 'JetBrains Mono', monospace; |
| | font-size: 10px; letter-spacing: 0.1em; |
| | color: var(--text-muted); text-transform: uppercase; |
| | margin-top: 12px; |
| | } |
| | |
| | |
| | .callout { |
| | border-radius: 10px; padding: 16px 20px; |
| | font-size: 13px; line-height: 1.65; |
| | } |
| | .callout-green { background: var(--green-bg); border: 1px solid var(--green-border); color: var(--text-mid); } |
| | .callout-amber { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--text-mid); } |
| | .callout-blue { background: var(--blue-bg); border: 1px solid var(--blue-border); color: var(--text-mid); } |
| | .callout strong { color: var(--text-main); } |
| | |
| | |
| | ::-webkit-scrollbar { width: 4px; } |
| | ::-webkit-scrollbar-track { background: var(--page); } |
| | ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; } |
| | |
| | @media (max-width: 768px) { |
| | .stat-number { font-size: 56px; } |
| | .hide-mobile { display: none !important; } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| |
|
| | |
| | |
| | |
| | <div id="view-memo"> |
| |
|
| | |
| | <div style="background: var(--surface); border-bottom: 1px solid var(--border); overflow: hidden; height: 36px; display: flex; align-items: center;"> |
| | <div style="background: var(--green); color: #fff; padding: 0 16px; height: 100%; display: flex; align-items: center; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.15em; white-space: nowrap; flex-shrink: 0;">CONFIDENTIAL</div> |
| | <div style="overflow: hidden; flex: 1;"> |
| | <div class="ticker-track" style="color: var(--text-muted); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em;"> |
| | <span style="padding: 0 40px;">HITSAFE.AI — FOUNDER DECISION MEMO — CLASSIFICATION: INTERNAL — STATUS: AWAITING SIGN-OFF — RUNWAY: 30 DAYS — UNIT TESTS: 32/32 PASSED — STRESS TESTS: 13/13 PASSED — COST PER USER: £0.02 — FREE CAPACITY: 375 USERS/DAY — </span> |
| | <span style="padding: 0 40px;">HITSAFE.AI — FOUNDER DECISION MEMO — CLASSIFICATION: INTERNAL — STATUS: AWAITING SIGN-OFF — RUNWAY: 30 DAYS — UNIT TESTS: 32/32 PASSED — STRESS TESTS: 13/13 PASSED — COST PER USER: £0.02 — FREE CAPACITY: 375 USERS/DAY — </span> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <section class="hero-bg grid-bg" style="padding: 100px 5% 80px; position: relative; overflow: hidden;"> |
| | <div style="position: absolute; top: -120px; right: -80px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(0,168,85,0.05) 0%, transparent 70%); pointer-events: none;"></div> |
| | <div style="max-width: 1100px; margin: 0 auto;"> |
| | <div class="animate-fade-up delay-1" style="display: flex; align-items: center; gap: 12px; margin-bottom: 32px; flex-wrap: wrap;"> |
| | <span class="pill pill-green"><span class="dot dot-green"></span>Live Decision Memo</span> |
| | <span class="pill pill-neutral">For Founding Partner Eyes Only</span> |
| | <span class="pill pill-amber"><span class="dot dot-amber"></span>Action Required</span> |
| | </div> |
| | <h1 class="font-bebas animate-fade-up delay-2" style="font-size: clamp(56px, 9vw, 130px); line-height: 0.95; letter-spacing: 0.02em; margin-bottom: 28px; color: var(--text-main);"> |
| | We built it.<br/><span style="color: var(--green);">It works.</span><br/>Let's launch. |
| | </h1> |
| | <p class="animate-fade-up delay-3" style="font-size: 18px; max-width: 620px; color: var(--text-mid); line-height: 1.65; margin-bottom: 32px;"> |
| | This memo makes the case — in hard numbers, tested code, and market facts — for why <strong style="color: var(--text-main);">HitSafe.ai</strong> goes public today. Two asks. One decision. Read this in 7 minutes. |
| | </p> |
| | <div class="animate-fade-up delay-4" style="display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;"> |
| | <button class="btn-workflow" onclick="showWorkflow()"> |
| | <svg width="14" height="14" viewBox="0 0 14 14" fill="none" style="flex-shrink:0"><rect x="1" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="5" y="9" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M3 5v2.5a1.5 1.5 0 001.5 1.5H7m4-4v2.5A1.5 1.5 0 019.5 9H7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> |
| | How HitSafe.ai Reaches a Result |
| | </button> |
| | </div> |
| | <div style="display: flex; gap: 32px; flex-wrap: wrap;"> |
| | <div> |
| | <div class="section-label" style="margin-bottom: 4px;">Prepared By</div> |
| | <div style="font-weight: 600; font-size: 14px;">Co-Founder, HitSafe.ai</div> |
| | </div> |
| | <div style="border-left: 1px solid var(--border); padding-left: 32px;"> |
| | <div class="section-label" style="margin-bottom: 4px;">Addressed To</div> |
| | <div style="font-weight: 600; font-size: 14px;">Co-Founder & Legal Partner</div> |
| | </div> |
| | <div style="border-left: 1px solid var(--border); padding-left: 32px;"> |
| | <div class="section-label" style="margin-bottom: 4px;">Stage</div> |
| | <div style="font-weight: 600; font-size: 14px;">Pre-Launch / Sign-Off</div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <div style="background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 0 5%;"> |
| | <div style="max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);"> |
| | <div style="padding: 28px 24px; border-right: 1px solid var(--border);"> |
| | <div class="section-label" style="margin-bottom: 8px;">Cost per Full User Flow</div> |
| | <div class="stat-number" style="font-size: 52px;">$0.025</div> |
| | <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">tokens via Gemini 3 Flash</div> |
| | </div> |
| | <div style="padding: 28px 24px; border-right: 1px solid var(--border);"> |
| | <div class="section-label" style="margin-bottom: 8px;">Free Daily User Capacity</div> |
| | <div class="stat-number" style="font-size: 52px;">375</div> |
| | <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">users/day on free tier</div> |
| | </div> |
| | <div style="padding: 28px 24px; border-right: 1px solid var(--border);"> |
| | <div class="section-label" style="margin-bottom: 8px;">Free Runway (Pilot)</div> |
| | <div class="stat-number" style="font-size: 52px;">30</div> |
| | <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">days on $300 cloud credit</div> |
| | </div> |
| | <div style="padding: 28px 24px;"> |
| | <div class="section-label" style="margin-bottom: 8px;">SaaS Profit Margin</div> |
| | <div class="stat-number" style="font-size: 52px;">~100%</div> |
| | <div style="font-size: 12px; color: var(--text-muted); margin-top: 4px;">on £99/mo tier at scale</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <main style="max-width: 1100px; margin: 0 auto; padding: 80px 5%;"> |
| |
|
| | |
| | <div style="margin-bottom: 100px;"> |
| | <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 48px;"> |
| | <span class="section-label" style="font-size: 11px;">01</span> |
| | <span style="font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.04em;">The Product Is Ready</span> |
| | <span class="pill pill-green" style="margin-left: auto;"><span class="dot dot-green"></span>Verified</span> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 28px;"> |
| | <div class="card-accent"> |
| | <div style="font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--green); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px;">Unit Tests</div> |
| | <div style="display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px;"> |
| | <div class="stat-number">32</div> |
| | <div style="font-size: 24px; font-family: 'Bebas Neue'; color: var(--text-muted); padding-bottom: 8px;">/ 32</div> |
| | </div> |
| | <div style="background: rgba(0,168,85,0.15); border-radius: 4px; height: 4px; margin-bottom: 12px;"> |
| | <div style="width: 100%; height: 100%; background: var(--green); border-radius: 4px;"></div> |
| | </div> |
| | <div style="font-size: 13px; color: var(--text-mid);">All core logic paths verified. Zero regressions. Every compliance rule, rewrite path, and API integration confirmed clean.</div> |
| | </div> |
| | <div class="card-accent"> |
| | <div style="font-size: 11px; font-family: 'JetBrains Mono', monospace; color: var(--green); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 16px;">Historical Stress Tests</div> |
| | <div style="display: flex; align-items: flex-end; gap: 12px; margin-bottom: 16px;"> |
| | <div class="stat-number">13</div> |
| | <div style="font-size: 24px; font-family: 'Bebas Neue'; color: var(--text-muted); padding-bottom: 8px;">/ 13</div> |
| | </div> |
| | <div style="background: rgba(0,168,85,0.15); border-radius: 4px; height: 4px; margin-bottom: 12px;"> |
| | <div style="width: 100%; height: 100%; background: var(--green); border-radius: 4px;"></div> |
| | </div> |
| | <div style="font-size: 13px; color: var(--text-mid);">Real-world FCA breach scenarios from the past 5 years. Every single one flagged correctly. This is our legal defensibility baseline.</div> |
| | </div> |
| | </div> |
| | <div style="background: var(--amber-bg); border: 1px solid var(--amber-border); border-radius: 16px; padding: 28px 32px; display: flex; gap: 24px; align-items: flex-start;"> |
| | <div style="flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; background: rgba(196,122,0,0.1); display: flex; align-items: center; justify-content: center; font-size: 20px;">🛡️</div> |
| | <div> |
| | <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap;"> |
| | <span style="font-weight: 800; font-size: 15px;">Native v3 Suite — 2/4 Failures Caught Pre-Launch</span> |
| | <span class="pill pill-amber"><span class="dot dot-amber"></span>This is a win</span> |
| | </div> |
| | <p style="color: var(--text-mid); font-size: 14px; line-height: 1.65;">Two edge cases surfaced in our new v3 test suite before a single external user touched the product. This is not a red flag — <strong style="color: var(--text-main);">it is exactly how serious safety infrastructure is supposed to work.</strong> Our conservative risk-flagging logic caught corner cases in a pre-production environment. We are not papering over complexity; we are stress-testing against it. Compare that to every competitor who shipped without this level of rigour. We fix, we ship clean.</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="margin-bottom: 100px;"> |
| | <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 48px;"> |
| | <span class="section-label" style="font-size: 11px;">02</span> |
| | <span style="font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.04em;">The Economics Are Absurd (In Our Favour)</span> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin-bottom: 32px;"> |
| | <div class="card" style="text-align: center;"> |
| | <div class="section-label" style="margin-bottom: 12px;">Token Cost</div> |
| | <div style="font-family: 'Bebas Neue'; font-size: 56px; color: var(--green); line-height: 1;">$0.025</div> |
| | <p style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">Per full interaction — initial check + full copy rewrite via Gemini 3 Flash. <em style="color: var(--text-mid);">This is pennies.</em></p> |
| | </div> |
| | <div class="card" style="text-align: center;"> |
| | <div class="section-label" style="margin-bottom: 12px;">Free Daily Searches</div> |
| | <div style="font-family: 'Bebas Neue'; font-size: 56px; color: var(--green); line-height: 1;">1,500</div> |
| | <p style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">Google gives us 1,500 free searches/day. At 4 per user, that covers <strong style="color: var(--text-main);">375 users entirely free.</strong></p> |
| | </div> |
| | <div class="card" style="text-align: center;"> |
| | <div class="section-label" style="margin-bottom: 12px;">Pilot Runway</div> |
| | <div style="font-family: 'Bebas Neue'; font-size: 56px; color: var(--green); line-height: 1;">12,000</div> |
| | <p style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">Full user flows on the $300 GCP credit — roughly <strong style="color: var(--text-main);">30 days of pilot at zero cost.</strong></p> |
| | </div> |
| | </div> |
| | <div class="card" style="margin-bottom: 20px;"> |
| | <div style="display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 24px; flex-wrap: wrap; gap: 12px;"> |
| | <div> |
| | <div class="section-label" style="margin-bottom: 6px;">Runway Consumption Model</div> |
| | <div style="font-size: 16px; font-weight: 700;">$300 Credit — Three Scenarios</div> |
| | </div> |
| | <span class="pill pill-green">30-Day Horizon</span> |
| | </div> |
| | <div style="display: flex; flex-direction: column; gap: 16px;"> |
| | <div> |
| | <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;"> |
| | <span style="color: var(--text-mid);">≤375 users/day — <em>Sweet Spot</em></span> |
| | <span style="color: var(--green); font-family: 'JetBrains Mono'; font-weight: 600;">$0 out-of-pocket · 30 days</span> |
| | </div> |
| | <div style="height: 8px; background: var(--surface-2); border-radius: 4px;"><div style="width: 100%; height: 100%; background: var(--green); border-radius: 4px;"></div></div> |
| | </div> |
| | <div> |
| | <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;"> |
| | <span style="color: var(--text-mid);">~700 users/day — <em>Gaining traction</em></span> |
| | <span style="color: var(--amber); font-family: 'JetBrains Mono'; font-weight: 600;">~$40/day · 7–8 days</span> |
| | </div> |
| | <div style="height: 8px; background: var(--surface-2); border-radius: 4px;"><div style="width: 28%; height: 100%; background: var(--amber); border-radius: 4px;"></div></div> |
| | </div> |
| | <div> |
| | <div style="display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px;"> |
| | <span style="color: var(--text-mid);">1,000+ users/day — <em>Monetisation trigger</em></span> |
| | <span style="color: var(--red); font-family: 'JetBrains Mono'; font-weight: 600;">Credit burns in 5 days → flip the switch</span> |
| | </div> |
| | <div style="height: 8px; background: var(--surface-2); border-radius: 4px;"><div style="width: 18%; height: 100%; background: var(--red); border-radius: 4px;"></div></div> |
| | </div> |
| | </div> |
| | <div style="margin-top: 20px; padding: 14px 16px; background: var(--surface-2); border-radius: 8px; border: 1px solid var(--border);"> |
| | <p style="font-size: 12px; color: var(--text-mid);"><strong style="color: var(--text-main);">Read that third scenario correctly:</strong> if we're burning through $300 of cloud credit in 5 days, it means over 1,000 users are hitting the product daily. That is not a crisis — that is a green light to enable payments. The "problem" is viral growth.</p> |
| | </div> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;"> |
| | <div class="card-accent" style="position: relative; overflow: hidden;"> |
| | <div style="position: absolute; top: -20px; right: -20px; font-size: 80px; opacity: 0.07; color: var(--green);">£</div> |
| | <div class="section-label" style="margin-bottom: 12px;">Upside #1 — SaaS Margins</div> |
| | <div style="font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 12px;">The £99/mo tier operates at near <span style="color: var(--green);">100% profit margin.</span></div> |
| | <p style="font-size: 13px; color: var(--text-mid); line-height: 1.65;">When your base compute cost is £0.02 per user interaction and your monthly subscription is £99, the economics are essentially pure margin. No COGS. No inventory. No fulfilment. Software economics at their absolute best.</p> |
| | </div> |
| | <div class="card-accent" style="position: relative; overflow: hidden;"> |
| | <div style="position: absolute; top: -20px; right: -20px; font-size: 80px; opacity: 0.07; color: var(--green);">∞</div> |
| | <div class="section-label" style="margin-bottom: 12px;">Upside #2 — Zero CAC Agency Pipeline</div> |
| | <div style="font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 12px;">High-ticket leads flowing to your agency at <span style="color: var(--green);">virtually zero cost.</span></div> |
| | <p style="font-size: 13px; color: var(--text-mid); line-height: 1.65;">Every user who signs up for a compliance check is a financial services marketing buyer who needs FCA-compliant content. That is your agency's exact client profile. HitSafe.ai is a self-filling lead pipeline — one that also charges them £99/mo for the privilege of entering your funnel.</p> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="margin-bottom: 100px;"> |
| | <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 48px;"> |
| | <span class="section-label" style="font-size: 11px;">03</span> |
| | <span style="font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.04em;">The Market Is Proven. Move Now.</span> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 5fr 3fr; gap: 32px;"> |
| | <div> |
| | <table style="width: 100%; border-collapse: collapse;"> |
| | <thead> |
| | <tr style="border-bottom: 1px solid var(--border);"> |
| | <th style="text-align: left; padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-weight: 400;">Competitor</th> |
| | <th style="text-align: left; padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-weight: 400;">Category</th> |
| | <th style="text-align: left; padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-weight: 400;">Their Gap</th> |
| | <th style="text-align: center; padding: 10px 16px; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); font-weight: 400;">Monetising?</th> |
| | </tr> |
| | </thead> |
| | <tbody> |
| | <tr class="comp-row" style="transition: background 0.15s;"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700;">RuleGuard</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Regulatory Tech SaaS</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Enterprise-only. No consumer/SMB tier. High friction onboarding.</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center;"><span class="pill pill-green" style="font-size: 9px;">Yes</span></td></tr> |
| | <tr class="comp-row" style="transition: background 0.15s;"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700;">Sedric.ai</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Compliance AI Platform</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Conversation monitoring only. No marketing copy checks. Niche use-case.</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center;"><span class="pill pill-green" style="font-size: 9px;">Yes</span></td></tr> |
| | <tr class="comp-row" style="transition: background 0.15s;"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700;">Absolute Digital</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Agency (Compliance Services)</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Human review, not AI. Slow, expensive, unscalable. We are 10–100× cheaper.</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center;"><span class="pill pill-green" style="font-size: 9px;">Yes</span></td></tr> |
| | <tr class="comp-row" style="transition: background 0.15s;"><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700;">Lever Digital</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">FinTech Marketing Agency</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 13px;">Sells compliance as a service — no SaaS product. Can't compete on margin or velocity.</td><td style="padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: center;"><span class="pill pill-green" style="font-size: 9px;">Yes</span></td></tr> |
| | </tbody> |
| | </table> |
| | </div> |
| | <div> |
| | <div class="card" style="height: 100%; display: flex; flex-direction: column; justify-content: space-between;"> |
| | <div> |
| | <div class="section-label" style="margin-bottom: 16px;">The Verdict</div> |
| | <p style="font-size: 15px; line-height: 1.75; font-weight: 500; color: var(--text-main); margin-bottom: 20px;">Every competitor in this table is <strong style="color: var(--green);">already making money</strong> from the same demand signal we've built for.</p> |
| | <p style="font-size: 14px; color: var(--text-mid); line-height: 1.7;">The market is proven. The demand is validated. The funnel is tested. We have better economics, a lower barrier to entry, and an AI-native product none of them can replicate quickly.</p> |
| | </div> |
| | <div style="margin-top: 24px; padding: 16px; border-radius: 10px; background: var(--green-bg); border: 1px solid var(--green-border);"> |
| | <p style="font-size: 13px; font-weight: 800; color: var(--green); text-transform: uppercase; letter-spacing: 0.06em;">Every day we wait is market share gifted to a competitor who is already there.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="margin-bottom: 100px;"> |
| | <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 48px;"> |
| | <span class="section-label" style="font-size: 11px;">04</span> |
| | <span style="font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.04em;">The Conversion Engine</span> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;"> |
| | <div> |
| | <div class="section-label" style="margin-bottom: 24px;">Frictionless User Journey</div> |
| | <div class="funnel-step"><div class="funnel-num">01</div><div><div style="font-weight: 800; font-size: 15px; margin-bottom: 4px;">Free Compliance Check</div><p style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">Zero barrier entry. Paste your marketing copy, get an instant FCA compliance verdict. No account needed. Builds trust, drives SEO, creates habit.</p></div></div> |
| | <div class="funnel-step"><div class="funnel-num">02</div><div><div style="font-weight: 800; font-size: 15px; margin-bottom: 4px;">Email Signup → 10 Free Daily Checks + Rewrites Unlocked</div><p style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">Once they see the tool works, the value exchange is obvious. Email unlocks the full rewrite feature. This is where we capture intent and start warming.</p></div></div> |
| | <div class="funnel-step"><div class="funnel-num">03</div><div><div style="font-weight: 800; font-size: 15px; margin-bottom: 4px;">£99/month SaaS — Unlimited Checks</div><p style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">For any active financial services marketer, this is a rounding error on their COGS. Unlimited checks, priority processing, compliance history. Near-100% margin product.</p></div></div> |
| | <div class="funnel-step" style="padding-bottom: 0;"><div class="funnel-num" style="background: var(--green-bg); border-color: var(--green);">04</div><div><div style="font-weight: 800; font-size: 15px; margin-bottom: 4px; color: var(--green);">The Agency Upsell — High-Ticket Lead Handoff</div><p style="font-size: 13px; color: var(--text-muted); line-height: 1.6;">The paying SaaS user who regularly needs FCA-compliant copy is the perfect brief for your agency. Zero CAC. Pre-qualified. Already trusting your brand. This is the crown jewel.</p></div></div> |
| | </div> |
| | <div style="display: flex; flex-direction: column; gap: 20px;"> |
| | <div class="card"> |
| | <div class="section-label" style="margin-bottom: 12px;">Why No Phone Number Gate?</div> |
| | <p style="font-size: 14px; color: var(--text-mid); line-height: 1.65;">We are optimising for <strong style="color: var(--text-main);">conversion velocity</strong>, not lead qualification friction. Phone gates kill top-of-funnel growth. They add compliance complexity. We collect intent data via usage behaviour, then qualify on the backend. Let the funnel breathe.</p> |
| | </div> |
| | <div class="card-accent"> |
| | <div class="section-label" style="margin-bottom: 8px;">Dual Revenue Architecture</div> |
| | <div style="font-size: 16px; font-weight: 700; margin-bottom: 8px;">HitSafe.ai is two businesses in one.</div> |
| | <div style="display: flex; flex-direction: column; gap: 8px; margin-top: 12px;"> |
| | <div style="display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-mid);"><span style="color: var(--green); font-weight: 700; margin-top: 1px;">→</span><span><strong style="color: var(--text-main);">Standalone SaaS:</strong> recurring, near-infinite margin, self-serve growth.</span></div> |
| | <div style="display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-mid);"><span style="color: var(--green); font-weight: 700; margin-top: 1px;">→</span><span><strong style="color: var(--text-main);">Agency Lead Engine:</strong> pre-qualified, high-ticket clients, delivered to your desk at zero acquisition cost.</span></div> |
| | </div> |
| | </div> |
| | |
| | <div style="background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px;"> |
| | <div class="section-label">Want to understand how it actually works?</div> |
| | <p style="font-size: 13px; color: var(--text-mid); line-height: 1.6;">See the full step-by-step workflow — from ad submission through to result — written for a non-technical reader.</p> |
| | <button class="btn-workflow" style="align-self: flex-start; font-size: 12px; padding: 10px 20px;" onclick="showWorkflow()"> |
| | <svg width="12" height="12" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="9" y="1" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><rect x="5" y="9" width="4" height="4" rx="1" stroke="currentColor" stroke-width="1.5"/><path d="M3 5v2.5a1.5 1.5 0 001.5 1.5H7m4-4v2.5A1.5 1.5 0 019.5 9H7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg> |
| | View System Workflow |
| | </button> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="margin-bottom: 0;"> |
| | <div style="display: flex; align-items: center; gap: 16px; margin-bottom: 48px;"> |
| | <span class="section-label" style="font-size: 11px;">05</span> |
| | <span style="font-family: 'Bebas Neue', sans-serif; font-size: 36px; letter-spacing: 0.04em;">Two Asks. One Decision.</span> |
| | <span class="pill pill-red" style="margin-left: auto;"><span class="dot dot-red"></span>Action Required</span> |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px;"> |
| | <div style="background: linear-gradient(135deg, var(--green-bg) 0%, rgba(232,247,238,0.5) 100%); border: 1.5px solid var(--green); border-radius: 20px; padding: 36px 32px; position: relative; overflow: hidden;"> |
| | <div style="position: absolute; top: -30px; right: -30px; font-family: 'Bebas Neue'; font-size: 140px; color: var(--green); opacity: 0.06; line-height: 1; pointer-events: none;">01</div> |
| | <div class="section-label" style="color: var(--green); margin-bottom: 16px;">Ask #1 — The Green Light</div> |
| | <h3 style="font-family: 'Bebas Neue'; font-size: 34px; letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 20px;">Authorise Public Launch of the Free Version Today</h3> |
| | <p style="font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px;">The product is tested, the economics are contained, and the runway is funded. We have 375 free user slots per day before a single penny leaves our account. The only thing standing between us and market validation is your sign-off.</p> |
| | <div style="padding: 14px 16px; background: rgba(0,122,61,0.07); border-radius: 8px; border: 1px solid var(--green-border);"> |
| | <p style="font-size: 13px; color: var(--green); font-weight: 700;">What "yes" looks like: a go-ahead to push the product live, begin organic seeding, and monitor the first 500 users under the free tier.</p> |
| | </div> |
| | </div> |
| | <div style="background: linear-gradient(135deg, var(--amber-bg) 0%, rgba(255,245,224,0.5) 100%); border: 1.5px solid var(--amber); border-radius: 20px; padding: 36px 32px; position: relative; overflow: hidden;"> |
| | <div style="position: absolute; top: -30px; right: -30px; font-family: 'Bebas Neue'; font-size: 140px; color: var(--amber); opacity: 0.07; line-height: 1; pointer-events: none;">02</div> |
| | <div class="section-label" style="color: var(--amber); margin-bottom: 16px;">Ask #2 — Your Legal Expertise</div> |
| | <h3 style="font-family: 'Bebas Neue'; font-size: 34px; letter-spacing: 0.03em; line-height: 1.1; margin-bottom: 20px;">Draft Terms of Service That Classify HitSafe.ai as a Utility</h3> |
| | <p style="font-size: 14px; color: var(--text-mid); line-height: 1.7; margin-bottom: 24px;">This is where your corporate law expertise is irreplaceable. We need a ToS that unambiguously positions HitSafe.ai as a <strong style="color: var(--text-main);">software utility</strong> — not a legal or financial advice service — creating a clean, documented liability shield between the product and the agency. This is not optional. It is the legal architecture that makes everything else safe to scale.</p> |
| | <div style="padding: 14px 16px; background: rgba(196,122,0,0.07); border-radius: 8px; border: 1px solid var(--amber-border);"> |
| | <p style="font-size: 13px; color: var(--amber); font-weight: 700;">What "yes" looks like: a complete ToS draft — utility classification, liability waiver, data use clause, and disclaimer language — before or concurrent with launch.</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 60px 48px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,0.06);"> |
| | <div style="position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 110%, rgba(0,168,85,0.05) 0%, transparent 70%); pointer-events: none;"></div> |
| | <div class="section-label" style="margin-bottom: 20px;">The Bottom Line</div> |
| | <h2 class="font-bebas" style="font-size: clamp(44px, 6vw, 80px); line-height: 1; margin-bottom: 24px; color: var(--text-main);"> |
| | The risk is<br/><span style="color: var(--green);">staying still.</span> |
| | </h2> |
| | <p style="font-size: 17px; color: var(--text-mid); max-width: 560px; margin: 0 auto 40px; line-height: 1.7;"> |
| | We have a working product, a proven market, and the most favourable unit economics I have ever seen at pre-launch stage. The window is open. It does not stay open. |
| | </p> |
| | <div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;"> |
| | <div class="btn-primary">✓ Green Light — Let's Launch</div> |
| | <div class="btn-secondary">Draft the ToS →</div> |
| | </div> |
| | <p style="margin-top: 32px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-muted); letter-spacing: 0.08em;">HITSAFE.AI · CONFIDENTIAL FOUNDER MEMO · FOR INTERNAL USE ONLY</p> |
| | </div> |
| | </div> |
| |
|
| | </main> |
| |
|
| | |
| | <footer style="border-top: 1px solid var(--border); padding: 32px 5%; margin-top: 60px; background: var(--surface);"> |
| | <div style="max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;"> |
| | <div style="display: flex; align-items: center; gap: 12px;"> |
| | <div style="width: 28px; height: 28px; border-radius: 6px; background: var(--green); display: flex; align-items: center; justify-content: center;"> |
| | <span style="color: #fff; font-family: 'Bebas Neue'; font-size: 14px; letter-spacing: 0.02em;">H</span> |
| | </div> |
| | <span style="font-family: 'Bebas Neue'; font-size: 18px; letter-spacing: 0.08em; color: var(--text-main);">HitSafe<span style="color: var(--green);">.ai</span></span> |
| | </div> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em; text-align: center;">CONFIDENTIAL — FOUNDER DECISION MEMO — ALL FIGURES INTERNAL ESTIMATES</div> |
| | <div><span class="pill pill-green"><span class="dot dot-green"></span>Awaiting Sign-Off</span></div> |
| | </div> |
| | </footer> |
| |
|
| | </div> |
| |
|
| |
|
| | |
| | |
| | |
| | <div id="view-workflow"> |
| |
|
| | |
| | <div style="background: var(--surface); border-bottom: 1px solid var(--border); padding: 0 5%; position: sticky; top: 0; z-index: 100;"> |
| | <div style="max-width: 1100px; margin: 0 auto; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;"> |
| | <div style="display: flex; align-items: center; gap: 16px;"> |
| | <div style="display: flex; align-items: center; gap: 8px;"> |
| | <div style="width: 24px; height: 24px; border-radius: 5px; background: var(--green); display: flex; align-items: center; justify-content: center;"><span style="color: #fff; font-family: 'Bebas Neue'; font-size: 12px;">H</span></div> |
| | <span style="font-family: 'Bebas Neue'; font-size: 15px; letter-spacing: 0.08em; color: var(--text-main);">HitSafe<span style="color: var(--green);">.ai</span></span> |
| | </div> |
| | <span style="color: var(--border-mid); font-size: 14px;">·</span> |
| | <span style="font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);">System Workflow</span> |
| | </div> |
| | <button class="btn-back" onclick="showMemo()"> |
| | ← Back to Memo |
| | </button> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="background: var(--surface); border-bottom: 1px solid var(--border); padding: 64px 5% 56px;"> |
| | <div style="max-width: 860px; margin: 0 auto;"> |
| | <div style="display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap;"> |
| | <span class="pill pill-blue"><span class="dot dot-blue"></span>Technical Overview</span> |
| | <span class="pill pill-neutral">For Legal & Commercial Review</span> |
| | </div> |
| | <h1 class="font-bebas" style="font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: 0.03em; margin-bottom: 20px; color: var(--text-main);"> |
| | How HitSafe.ai<br/><span style="color: var(--green);">Reaches a Result</span> |
| | </h1> |
| | <p style="font-size: 17px; color: var(--text-mid); line-height: 1.7; max-width: 640px;"> |
| | A plain-English explanation of how the system reviews a promotion, reaches a result, and keeps the legal boundary clear. Written for legal and commercial readers — no technical background required. |
| | </p> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="max-width: 860px; margin: 0 auto; padding: 72px 5%;"> |
| |
|
| | |
| | <div class="wf-section"> |
| | <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;"> |
| | <span class="pill pill-blue" style="font-size: 9px;">Diagram 1 of 5</span> |
| | </div> |
| | <div class="wf-section-title">The End-to-End Workflow</div> |
| | <p class="wf-section-sub">From the moment a user submits a promotion, to the moment a result is returned — and what happens if they want a safer draft.</p> |
| |
|
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 40px; box-shadow: 0 1px 8px rgba(0,0,0,0.04);"> |
| | |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| |
|
| | <div class="wf-node wf-node-blue" style="width: 100%; max-width: 420px;">User submits ad copy & optional creative image</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node" style="width: 100%; max-width: 420px;">First review — evidence gathered from official sources</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node" style="width: 100%; max-width: 420px;">Structured record created — issues, facts, regulator lanes</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-green" style="width: 100%; max-width: 420px; font-weight: 700;">Code-based rule layer applies fixed logic → Result produced</div> |
| | <div class="wf-arrow">↓</div> |
| |
|
| | |
| | <div class="wf-decision" style="width: 100%; max-width: 420px;">Does the user want a safer draft?</div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 460px; margin-top: 8px;"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em;">NO</div> |
| | <div class="wf-node wf-node-muted" style="width: 100%; font-size: 12px;">Process ends</div> |
| | </div> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em;">YES</div> |
| | <div class="wf-node wf-node-amber" style="width: 100%; font-size: 12px;">Second review runs ↓</div> |
| | </div> |
| | </div> |
| | <div style="width: 50%; display: flex; justify-content: flex-end; padding-right: 0;"> |
| | <div style="width: 50%;"> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-amber" style="width: 100%; font-size: 12px;">Safer draft produced</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-green" style="width: 100%; font-size: 12px; font-weight: 700;">Draft checked again by the same engine → Rewrite result shown</div> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | <p class="wf-caption">End-to-end flow — from user submission to result and optional rewrite</p> |
| | <div class="callout callout-green" style="margin-top: 20px;"> |
| | <strong>In plain terms:</strong> the tool receives a promotion, gathers evidence from official sources, organises that evidence into a clear structure, then applies a fixed set of rules to produce a result. If a rewrite is requested, it runs as a completely separate step and is checked again before being shown. |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div class="wf-section"> |
| | <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;"> |
| | <span class="pill pill-blue" style="font-size: 9px;">Diagram 2 of 5</span> |
| | </div> |
| | <div class="wf-section-title">What the System Does vs What the AI Does</div> |
| | <p class="wf-section-sub">The AI does not make the final decision on its own. There are two distinct stages with clearly separated responsibilities.</p> |
| |
|
| | <div style="display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,0.04);"> |
| |
|
| | |
| | <div style="padding: 28px 28px 32px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border);">Stage 1 — First Review (AI)</div> |
| | <div style="display: flex; flex-direction: column; gap: 10px;"> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--blue-bg); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--blue); font-weight: 700;">1</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Reads the ad copy and any uploaded image</div> |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--blue-bg); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--blue); font-weight: 700;">2</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Searches official regulatory sources where needed</div> |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--blue-bg); border: 1px solid var(--blue-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--blue); font-weight: 700;">3</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Builds a structured evidence record with issues and facts</div> |
| | </div> |
| | </div> |
| | <div style="margin-top: 20px; padding: 12px 14px; background: var(--blue-bg); border: 1px solid var(--blue-border); border-radius: 8px; font-size: 12px; color: var(--blue); font-weight: 600;"> |
| | The AI gathers and organises. It does not decide. |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="display: flex; align-items: center; padding: 0 16px;"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div style="width: 1px; height: 40px; background: var(--border);"></div> |
| | <div style="width: 28px; height: 28px; border-radius: 50%; background: var(--green-bg); border: 1px solid var(--green-border); display: flex; align-items: center; justify-content: center;"> |
| | <span style="font-size: 12px; color: var(--green); font-weight: 700;">→</span> |
| | </div> |
| | <div style="width: 1px; height: 40px; background: var(--border);"></div> |
| | </div> |
| | </div> |
| |
|
| | |
| | <div style="padding: 28px 28px 32px; background: linear-gradient(135deg, var(--green-bg) 0%, rgba(232,247,238,0.2) 100%);"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--green); margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--green-border);">Stage 2 — Rule Layer (Code)</div> |
| | <div style="display: flex; flex-direction: column; gap: 10px;"> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--green-bg); border: 1px solid var(--green-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--green); font-weight: 700;">1</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Cleans and filters the structured material</div> |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--green-bg); border: 1px solid var(--green-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--green); font-weight: 700;">2</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Applies fixed policy rules — written in code, not opinion</div> |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: flex-start;"> |
| | <div style="width: 20px; height: 20px; border-radius: 4px; background: var(--green-bg); border: 1px solid var(--green-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;"><span style="font-family: 'JetBrains Mono', monospace; font-size: 9px; color: var(--green); font-weight: 700;">3</span></div> |
| | <div style="font-size: 13px; color: var(--text-main); font-weight: 600;">Produces the final result for the user</div> |
| | </div> |
| | </div> |
| | <div style="margin-top: 20px; padding: 12px 14px; background: rgba(0,122,61,0.08); border: 1px solid var(--green-border); border-radius: 8px; font-size: 12px; color: var(--green); font-weight: 600;"> |
| | The rule layer decides. It is deterministic, not probabilistic. |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | <p class="wf-caption">Separation of responsibilities — AI gathers, code decides</p> |
| | <div class="callout callout-blue" style="margin-top: 20px;"> |
| | <strong>Why this matters:</strong> unlike a system that simply asks an AI "is this compliant?", HitSafe.ai separates evidence gathering from decision-making. The final result is produced by fixed, auditable rules — not the model's interpretation on a given day. |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div class="wf-section"> |
| | <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;"> |
| | <span class="pill pill-blue" style="font-size: 9px;">Diagram 3 of 5</span> |
| | </div> |
| | <div class="wf-section-title">How One Submission Becomes a Structured Record</div> |
| | <p class="wf-section-sub">Rather than returning a single vague answer, the first review organises each submission into three distinct parts — keeping everything reviewable and traceable.</p> |
| |
|
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 36px; box-shadow: 0 1px 8px rgba(0,0,0,0.04);"> |
| | <div style="text-align: center; margin-bottom: 24px;"> |
| | <div class="wf-node wf-node-blue" style="display: inline-block; padding: 14px 32px; font-size: 14px;">Single ad or promotion submitted</div> |
| | </div> |
| |
|
| | |
| | <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px;"> |
| |
|
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| | <div class="wf-arrow" style="height: 20px;">↓</div> |
| | <div class="wf-lane" style="width: 100%;"> |
| | <div class="wf-lane-label" style="color: var(--blue);">Evidence Pack</div> |
| | <div style="display: flex; flex-direction: column; gap: 8px;"> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Summary of findings</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Official source citations</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Search history log</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| | <div class="wf-arrow" style="height: 20px;">↓</div> |
| | <div class="wf-lane" style="width: 100%;"> |
| | <div class="wf-lane-label" style="color: var(--green);">Fact Ledger</div> |
| | <div style="display: flex; flex-direction: column; gap: 8px;"> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Approval status</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Audience & gating</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">Product & claim features</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| | <div class="wf-arrow" style="height: 20px;">↓</div> |
| | <div class="wf-lane" style="width: 100%;"> |
| | <div class="wf-lane-label" style="color: var(--amber);">Regulator Lanes</div> |
| | <div style="display: flex; flex-direction: column; gap: 8px;"> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">FCA issues</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">CMA issues</div> |
| | <div class="wf-node wf-node-muted" style="font-size: 11px; padding: 8px 12px;">PRA issues</div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | <p class="wf-caption">Structured record — every submission is broken into evidence, facts, and regulator-specific issues</p> |
| | <div class="callout callout-green" style="margin-top: 20px;"> |
| | <strong>Why this matters:</strong> separating FCA, CMA, and PRA issues into distinct lanes means the output is clear, traceable, and easy for a legal reviewer to interrogate. It avoids a single blended answer that mixes different regulatory concerns together. |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div class="wf-section"> |
| | <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;"> |
| | <span class="pill pill-amber" style="font-size: 9px;">Diagram 4 of 5</span> |
| | </div> |
| | <div class="wf-section-title">The Rewrite Safeguard Loop</div> |
| | <p class="wf-section-sub">A rewrite is not automatically trusted. It is generated in a separate step and then checked again by the same engine before being shown to the user.</p> |
| |
|
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 40px; box-shadow: 0 1px 8px rgba(0,0,0,0.04);"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| |
|
| | <div class="wf-node" style="width: 100%; max-width: 420px; background: var(--surface-2);">Initial result flags issues in the original copy</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-amber" style="width: 100%; max-width: 420px;">User requests: "Draft a safer version"</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node" style="width: 100%; max-width: 420px;">Second review uses the first result as context — it already knows the issues</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node" style="width: 100%; max-width: 420px;">Safer draft is created</div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-blue" style="width: 100%; max-width: 420px; font-weight: 700;">Draft is checked again by the same engine</div> |
| | <div class="wf-arrow">↓</div> |
| |
|
| | |
| | <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; width: 100%; max-width: 480px;"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div class="wf-node wf-node-green" style="width: 100%; font-size: 11px; padding: 10px 8px;">Ready to use under current assumptions</div> |
| | </div> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div class="wf-node wf-node-amber" style="width: 100%; font-size: 11px; padding: 10px 8px;">Safer, but review still recommended</div> |
| | </div> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div class="wf-node" style="width: 100%; font-size: 11px; padding: 10px 8px; background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red);">No safe public version available</div> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | <p class="wf-caption">Rewrite safeguard — the draft is generated and then checked before being presented</p> |
| | <div class="callout callout-amber" style="margin-top: 20px;"> |
| | <strong>Important:</strong> HitSafe.ai does not present a rewrite as automatically compliant. The output is labelled with one of three statuses — ready under current assumptions, safer but still requiring review, or no safe public version available. The user is never left with false confidence. |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div class="wf-section"> |
| | <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 8px;"> |
| | <span class="pill pill-blue" style="font-size: 9px;">Diagram 5 of 5</span> |
| | </div> |
| | <div class="wf-section-title">Audit Trail & Monitoring</div> |
| | <p class="wf-section-sub">Every run is recorded. This is not technical detail for its own sake — it is the foundation for reliability, accountability, and future quality control.</p> |
| |
|
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px 36px; box-shadow: 0 1px 8px rgba(0,0,0,0.04);"> |
| | <div style="display: grid; grid-template-columns: auto 1fr; gap: 0; align-items: stretch;"> |
| |
|
| | |
| | <div style="display: flex; flex-direction: column; align-items: center; padding-right: 24px; padding-top: 4px;"> |
| | <div class="wf-node wf-node-blue" style="writing-mode: horizontal-tb; font-size: 12px; padding: 12px 16px;">User Request</div> |
| | <div style="width: 2px; flex: 1; background: linear-gradient(to bottom, var(--blue-border), var(--green-border)); margin: 8px 0;"></div> |
| | <div class="wf-node wf-node-green" style="font-size: 12px; padding: 12px 16px;">Result</div> |
| | </div> |
| |
|
| | |
| | <div style="border-left: 1px solid var(--border); padding-left: 28px; padding-top: 4px; display: flex; flex-direction: column; gap: 12px; justify-content: center;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px;">Recorded for every run</div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"> |
| | <div style="display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;"> |
| | <span style="font-size: 16px;">📊</span> Token usage |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;"> |
| | <span style="font-size: 16px;">🔍</span> Search activity |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;"> |
| | <span style="font-size: 16px;">⚡</span> Cache activity |
| | </div> |
| | <div style="display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; font-weight: 600;"> |
| | <span style="font-size: 16px;">📋</span> Request traces & outputs |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | </div> |
| | </div> |
| | <p class="wf-caption">Audit trail — every run is traceable and reviewable</p> |
| | <div class="callout callout-blue" style="margin-top: 20px;"> |
| | <strong>What this gives you:</strong> a complete operational record of every check run through the system. This supports reliability monitoring, dispute resolution, and quality assurance — and provides a defensible trail if questions are ever raised about a specific result. |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div class="wf-section" style="margin-bottom: 48px;"> |
| | <div class="wf-section-title">The Legal Boundary</div> |
| | <p class="wf-section-sub">This section is the most important one for your review. It defines precisely what HitSafe.ai is — and what it is not.</p> |
| |
|
| | <div style="background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 36px 40px; box-shadow: 0 1px 8px rgba(0,0,0,0.04); margin-bottom: 24px;"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 0;"> |
| |
|
| | <div class="wf-node wf-node-green" style="width: 100%; max-width: 420px; font-size: 14px; padding: 16px 20px;"> |
| | HitSafe.ai — Software Screening Utility |
| | </div> |
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; max-width: 460px; margin-top: 8px;"> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div class="wf-arrow" style="height: 20px;">↓</div> |
| | <div class="wf-node" style="width: 100%; font-size: 12px; background: var(--surface-2);">Flags likely issues</div> |
| | </div> |
| | <div style="display: flex; flex-direction: column; align-items: center; gap: 6px;"> |
| | <div class="wf-arrow" style="height: 20px;">↓</div> |
| | <div class="wf-node" style="width: 100%; font-size: 12px; background: var(--surface-2);">Produces safer draft</div> |
| | </div> |
| | </div> |
| | <div class="wf-arrow" style="margin-top: 4px;">↓</div> |
| | <div class="wf-node wf-node-amber" style="width: 100%; max-width: 420px; font-size: 13px; padding: 14px 20px;"> |
| | Client's legal or compliance team reviews the output |
| | </div> |
| | <div class="wf-arrow">↓</div> |
| | <div class="wf-node wf-node-blue" style="width: 100%; max-width: 420px; font-size: 13px; padding: 14px 20px; font-weight: 700;"> |
| | Final publication decision remains with the client |
| | </div> |
| |
|
| | </div> |
| | </div> |
| |
|
| | <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"> |
| | <div style="padding: 20px 22px; background: var(--green-bg); border: 1px solid var(--green-border); border-radius: 12px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green); margin-bottom: 12px;">✓ What HitSafe.ai is</div> |
| | <ul style="list-style: none; display: flex; flex-direction: column; gap: 8px;"> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--green); font-weight: 700; flex-shrink: 0;">→</span>A software screening tool</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--green); font-weight: 700; flex-shrink: 0;">→</span>A drafting utility for safer copy</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--green); font-weight: 700; flex-shrink: 0;">→</span>An evidence-gathering aid</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--green); font-weight: 700; flex-shrink: 0;">→</span>A tool that helps teams move faster toward a safer draft</li> |
| | </ul> |
| | </div> |
| | <div style="padding: 20px 22px; background: var(--red-bg); border: 1px solid var(--red-border); border-radius: 12px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--red); margin-bottom: 12px;">✗ What HitSafe.ai is not</div> |
| | <ul style="list-style: none; display: flex; flex-direction: column; gap: 8px;"> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--red); font-weight: 700; flex-shrink: 0;">×</span>A regulated legal advice service</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--red); font-weight: 700; flex-shrink: 0;">×</span>A substitute for a compliance review</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--red); font-weight: 700; flex-shrink: 0;">×</span>A guarantee of FCA approval</li> |
| | <li style="font-size: 13px; color: var(--text-mid); display: flex; gap: 8px;"><span style="color: var(--red); font-weight: 700; flex-shrink: 0;">×</span>The final word on publication suitability</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| |
|
| | |
| | <div style="background: var(--surface); border: 1.5px solid var(--green); border-radius: 20px; padding: 44px 48px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 2px 20px rgba(0,0,0,0.05);"> |
| | <div style="position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(0,168,85,0.04) 0%, transparent 70%); pointer-events: none;"></div> |
| | <div class="section-label" style="margin-bottom: 16px;">System Summary</div> |
| | <p style="font-size: 20px; font-weight: 700; line-height: 1.55; color: var(--text-main); max-width: 600px; margin: 0 auto 28px;"> |
| | In practical terms, the system is designed to be <span style="color: var(--green);">explainable</span>, <span style="color: var(--green);">reviewable</span>, and safer than a black-box AI answer. |
| | </p> |
| | <p style="font-size: 14px; color: var(--text-mid); max-width: 560px; margin: 0 auto 32px; line-height: 1.7;"> |
| | The first review gathers evidence. The rule layer produces a deterministic result. Rewrites are separately generated and separately checked. Every run leaves an audit trail. And final publication responsibility always remains with the client. |
| | </p> |
| | <button class="btn-back" onclick="showMemo()" style="font-size: 12px; padding: 12px 28px; border-radius: 8px;">← Return to the Decision Memo</button> |
| | </div> |
| |
|
| | </div> |
| |
|
| | |
| | <footer style="border-top: 1px solid var(--border); padding: 28px 5%; margin-top: 60px; background: var(--surface);"> |
| | <div style="max-width: 860px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;"> |
| | <div style="font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-muted); letter-spacing: 0.1em;">HITSAFE.AI · SYSTEM WORKFLOW OVERVIEW · INTERNAL DOCUMENT</div> |
| | <button class="btn-back" onclick="showMemo()">← Back to Memo</button> |
| | </div> |
| | </footer> |
| |
|
| | </div> |
| |
|
| |
|
| | <script> |
| | function showWorkflow() { |
| | document.getElementById('view-memo').style.display = 'none'; |
| | const wf = document.getElementById('view-workflow'); |
| | wf.style.display = 'block'; |
| | wf.classList.add('active'); |
| | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| | } |
| | function showMemo() { |
| | document.getElementById('view-workflow').style.display = 'none'; |
| | document.getElementById('view-workflow').classList.remove('active'); |
| | document.getElementById('view-memo').style.display = 'block'; |
| | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| | } |
| | </script> |
| |
|
| | </body> |
| | </html> |
